/*
 * agent-fluid-approvals.css — Track 7 D-006 approval surface styling.
 *
 * Selectors live here (not in agent-fluid.css) so the per-track CSS budget
 * Track 2 establishes stays clean. Imported next to agent-fluid.css from
 * index.html.
 *
 * Token discipline: reuses the existing --state-* / --hairline / --fg
 * palette in agent-fluid.css. No new tokens added per Track 2 contract.
 *
 * Reduced-motion fallback: every animation honors
 * @media (prefers-reduced-motion: reduce). The 2-second ring pulse degrades
 * to a 200ms swap-and-hold per Track 7 §"Edge cases".
 */

/* ── Per-card approval rail ────────────────────────────────────────────── */

.meme-card__approval-rail {
  display: flex;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--hairline);
  background: transparent;
}

.meme-card__approval-btn {
  flex: 1;
  min-width: 0;
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--hairline-strong);
  background: var(--card, #ffffff);
  color: var(--fg-strong);
  cursor: pointer;
  font-family: var(--font-ui);
  transition: background 120ms var(--ease-out-quart, ease-out),
              border-color 120ms var(--ease-out-quart, ease-out);
}

.meme-card__approval-btn:hover {
  background: var(--surface-hover);
}

/* P6 (agent-chat UX audit): approve / send-back / skip are the primary
 * decision controls — grow them to the 44px touch floor on coarse pointers so
 * they're comfortably tappable. Desktop keeps the 32px min-height above. */
@media (pointer: coarse) {
  .meme-card__approval-btn {
    min-height: 44px;
  }
}

.meme-card__approval-btn:focus-visible {
  outline: 2px solid var(--brand-strong);
  outline-offset: 2px;
}

.meme-card__approval-btn[data-approval-action="approve"] {
  background: var(--state-done-bg);
  color: var(--state-done-fg);
  border-color: var(--state-done-dot);
}

.meme-card__approval-btn[data-approval-action="approve"]:hover {
  background: color-mix(in srgb, var(--state-done-bg) 80%, var(--state-done-dot) 20%);
}

.meme-card__approval-btn[data-approval-action="send_back"] {
  background: var(--state-review-bg);
  color: var(--state-review-fg);
  border-color: var(--state-review-dot);
}

.meme-card__approval-btn[data-approval-action="skip"] {
  background: transparent;
  opacity: 0.75;
}

.meme-card__approval-btn[data-approval-action="skip"]:hover {
  opacity: 1;
}

/* Hide the rail once a terminal decision is recorded. The data attribute
 * is set by agent-fluid-approvals.js#markResolvedTerminal. */
.meme-card[data-approval-state="approved"] .meme-card__approval-rail,
.meme-card[data-approval-state="sent_back"] .meme-card__approval-rail,
.meme-card[data-approval-state="skipped"] .meme-card__approval-rail,
.meme-card[data-approval-state="rejected"] .meme-card__approval-rail {
  display: none;
}

/* P22 (agent-chat UX audit): optimistic-approval feedback. agent-fluid-approvals.js
 * flips data-approval-state immediately AND sets data-optimistic="true" on the
 * rail, then awaits the server. During that in-flight window the card was shown
 * as fully resolved (solid green "approved" badge). Until the server confirms,
 * mark it as still-saving: dim the card a touch and recolor the badge to the
 * review (in-progress) palette via the existing --state-review tokens. On 2xx
 * the JS clears data-optimistic (and pulses .meme-card--just-resolved); on
 * failure rollback() removes it. No new tokens. */
.meme-card:has(.meme-card__approval-rail[data-optimistic="true"]) {
  opacity: 0.82;
}

.meme-card[data-approval-state]:has(.meme-card__approval-rail[data-optimistic="true"])::after {
  content: "saving\2026";
  background: var(--state-review-bg);
  color: var(--state-review-fg);
}

/* Resolved-state badge — small pill in the upper-right of the card. */
.meme-card[data-approval-state] {
  position: relative;
}

.meme-card[data-approval-state]::after {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  z-index: 2;
}

.meme-card[data-approval-state="approved"]::after {
  content: "approved";
  background: var(--state-done-bg);
  color: var(--state-done-fg);
}

.meme-card[data-approval-state="sent_back"]::after {
  content: "sent back";
  background: var(--state-review-bg);
  color: var(--state-review-fg);
}

.meme-card[data-approval-state="skipped"]::after {
  content: "skipped";
  background: var(--surface);
  color: var(--fg-muted);
}

.meme-card[data-approval-state="rejected"]::after {
  content: "rejected";
  background: var(--state-block-bg);
  color: var(--state-block-fg);
}

/* ── Approved-meme export rail (B-3: close the paid loop) ──────────────────
 *
 * Mounted by agent-fluid-approvals.js#mountExportRail after a card resolves to
 * "approved" (replacing the vanished Approve/Send-back/Skip rail). Same visual
 * grammar as the approval rail: a hairline-topped row of three equal buttons,
 * existing tokens only, 44px touch floor on coarse pointers. */
.meme-card__export-rail {
  display: flex;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--hairline);
  background: transparent;
}

.meme-card__export-btn {
  flex: 1;
  min-width: 0;
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--hairline-strong);
  background: var(--card, #ffffff);
  color: var(--fg-strong);
  cursor: pointer;
  font-family: var(--font-ui);
  transition: background 120ms var(--ease-out-quart, ease-out),
              border-color 120ms var(--ease-out-quart, ease-out);
}

.meme-card__export-btn:hover {
  background: var(--surface-hover);
}

.meme-card__export-btn:focus-visible {
  outline: 2px solid var(--brand-strong);
  outline-offset: 2px;
}

/* The primary export action — the marketer's finished artifact leaving the
 * product — carries the "done" (green) accent, matching Approve. */
.meme-card__export-btn[data-export-action="download"] {
  background: var(--state-done-bg);
  color: var(--state-done-fg);
  border-color: var(--state-done-dot);
}

.meme-card__export-btn[data-export-action="download"]:hover {
  background: color-mix(in srgb, var(--state-done-bg) 80%, var(--state-done-dot) 20%);
}

/* Brief transient feedback ("Minting…", "Copied", "Downloaded") — dim the
 * button so the label swap reads as an in-progress/confirmation state. */
.meme-card__export-btn[data-flash="true"] {
  opacity: 0.72;
}

@media (pointer: coarse) {
  .meme-card__export-btn {
    min-height: 44px;
  }
}

/* One-time post-first-approval nudge — the activation moment. Muted, inline,
 * no modal/confetti; sits just above the export rail. */
.meme-card__export-nudge {
  margin: 10px 12px 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--fg-muted);
  font-family: var(--font-ui);
}

/* ── At-a-glance quality signal ────────────────────────────────────────── */

/* Comic-turn confidence chip. Rendered only when the P2 judge is on (the JS
 * emits nothing when sub_scores.comic_turn is absent), so cards without the
 * judge look exactly as before. Reuses the existing --state-* palette:
 * done (green) / thinking (amber) / block (red). No new tokens. */
.meme-card__comic-turn-chip {
  align-self: flex-start;
  margin: 8px 12px 0;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  font-family: var(--font-ui);
}

.meme-card__comic-turn-chip[data-comic-turn="sharp"] {
  background: var(--state-done-bg);
  color: var(--state-done-fg);
}

.meme-card__comic-turn-chip[data-comic-turn="soft"] {
  background: var(--state-thinking-bg);
  color: var(--state-thinking-fg);
}

.meme-card__comic-turn-chip[data-comic-turn="label"] {
  background: var(--state-block-bg);
  color: var(--state-block-fg);
}

/* Short "why this" — muted, clamped to two lines. Was white-space:nowrap,
 * which (combined with the flex item's default min-width:auto) forced the
 * whole card to its one-line min-content width and overflowed the drafts
 * pane (2026-06-11 rebuild, mapping finding #4). */
.meme-card__why-this {
  margin: 6px 12px 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--fg-muted);
  font-family: var(--font-ui);
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Top-pick highlight — green border + an in-flow banner strip across the
 * card top. Was an absolutely-positioned corner badge that overlapped the
 * comic-turn chip (2026-06-11 rebuild, mapping finding #6). */
.meme-card[data-top-pick="true"] {
  position: relative;
  border-color: var(--state-done-dot);
}

.meme-card[data-top-pick="true"]::before {
  content: "★ top pick";
  display: block;
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: lowercase;
  background: var(--state-done-bg);
  color: var(--state-done-fg);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-ui);
}

/* ── 2s ring pulse on resolve ──────────────────────────────────────────── */

.meme-card--just-resolved {
  box-shadow: 0 0 0 2px var(--state-done-dot);
  animation: meme-card-ring-pulse 2000ms var(--ease-out-quart, ease-out) forwards;
}

@keyframes meme-card-ring-pulse {
  0%   { box-shadow: 0 0 0 2px var(--state-done-dot); }
  50%  { box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.18); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .meme-card--just-resolved {
    animation: none;
    box-shadow: 0 0 0 2px var(--state-done-dot);
    transition: box-shadow 200ms;
  }
}

/* ── Pending memes queue tab ───────────────────────────────────────────── */

.agent-fluid__queue-tab {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  min-height: 240px;
}

.agent-fluid__queue-tab[hidden] {
  display: none;
}

.agent-fluid__queue-tab-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 8px;
  border-bottom: 1px solid var(--hairline);
}

.agent-fluid__queue-tab-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--fg-strong);
}

.agent-fluid__queue-tab-back {
  padding: 4px 10px;
  border: 1px solid var(--hairline-strong);
  background: var(--card);
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  color: var(--fg-strong);
}

.agent-fluid__queue-empty {
  padding: 24px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--fg-muted);
  border: 1px dashed var(--hairline);
  border-radius: 8px;
}

.agent-fluid__queue-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--card);
  cursor: pointer;
  transition: border-color 120ms var(--ease-out-quart, ease-out),
              transform 120ms var(--ease-out-quart, ease-out);
}

.agent-fluid__queue-row:hover {
  border-color: var(--hairline-strong);
  transform: translateY(-1px);
}

.agent-fluid__queue-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.agent-fluid__queue-row-template {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-strong);
  letter-spacing: 0.02em;
}

.agent-fluid__queue-row-chip {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  background: var(--state-review-bg);
  color: var(--state-review-fg);
}

.agent-fluid__queue-row-chip[data-review-state="best_effort"] {
  background: var(--state-thinking-bg);
  color: var(--state-thinking-fg);
}

.agent-fluid__queue-row-summary {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg);
}

/* ── X mention reply block (draft-only; a human posts the reply) ─────────── */
/* Token discipline: reuses --surface / --hairline / --fg / --state-* only. */
.agent-fluid__queue-row-chip[data-channel="x"] {
  background: var(--state-done-bg);
  color: var(--state-done-fg);
}

.agent-fluid__queue-row-xreply {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--surface);
}

.agent-fluid__queue-row-xreply-context {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--fg-muted, var(--fg));
  opacity: 0.85;
}

.agent-fluid__queue-row-xreply-lead {
  font-weight: 600;
}

.agent-fluid__queue-row-xreply-open {
  color: var(--state-review-fg);
  text-decoration: underline;
}

.agent-fluid__queue-row-xreply-text {
  margin: 0;
  padding: 8px 10px;
  border-left: 3px solid var(--hairline);
  border-radius: 0 4px 4px 0;
  background: var(--surface-hover);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg);
  white-space: pre-wrap;
  word-break: break-word;
}

.agent-fluid__queue-row-xreply-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.agent-fluid__queue-row-xreply-btn {
  background: var(--state-done-bg);
  color: var(--state-done-fg);
  border-color: var(--state-done-dot);
}

.agent-fluid__queue-row-xreply-btn:hover {
  background: color-mix(in srgb, var(--state-done-bg) 80%, var(--state-done-dot) 20%);
}

/* ── AlarmBanner badge mounted via Track 7 count fan-out ───────────────── */
/* The AlarmBanner module owns its own renderer; this rule styles the
 * approval-count node that Track 7's event listener injects. */
.agent-fluid-ambient__alarm-approval-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--state-review-bg);
  color: var(--state-review-fg);
  font-size: 11px;
  font-weight: 600;
}

.agent-fluid-ambient__alarm-approval-count[data-empty="true"] {
  display: none;
}

/* ── Send-back modal ───────────────────────────────────────────────────── */

.agent-fluid__send-back-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 17, 21, 0.45);
  z-index: 1000;
}

.agent-fluid__send-back-modal[data-open="true"] {
  display: flex;
}

.agent-fluid__send-back-dialog {
  width: min(520px, 100% - 32px);
  background: var(--card);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  padding: 18px 18px 14px;
  box-shadow: 0 24px 48px -16px rgba(15, 17, 21, 0.35);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.agent-fluid__send-back-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg-strong);
}

.agent-fluid__send-back-textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  font-family: var(--font-ui);
  color: var(--fg-strong);
  background: var(--canvas);
}

.agent-fluid__send-back-textarea:focus-visible {
  outline: 2px solid var(--brand-strong);
  outline-offset: 1px;
}

.agent-fluid__send-back-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--fg-muted);
}

.agent-fluid__send-back-counter[data-warn="true"] {
  color: var(--state-block-fg);
}

.agent-fluid__send-back-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.agent-fluid__send-back-btn {
  min-height: 32px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--hairline-strong);
  background: var(--card);
  color: var(--fg-strong);
  cursor: pointer;
  font-family: var(--font-ui);
}

.agent-fluid__send-back-btn[data-variant="primary"] {
  background: var(--state-review-bg);
  color: var(--state-review-fg);
  border-color: var(--state-review-dot);
}

.agent-fluid__send-back-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Toast region for approval errors ──────────────────────────────────── */

.agent-fluid__approval-toasts {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  z-index: 1100;
}

.agent-fluid__approval-toast {
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--state-block-bg);
  color: var(--state-block-fg);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--state-block-dot);
  box-shadow: 0 8px 24px -10px rgba(15, 17, 21, 0.35);
  pointer-events: auto;
}