/* chain-chips — unified in-image action row (§8, Q9-approved design).
   JS-injected once (guard id: chain-chips-css); never referenced from the
   generated public/agent/*.html templates.

   Palette rides the shared.css theme tokens (--card / --border / --primary /
   --panel-*), so floating surfaces follow the page's light/dark mode; the
   in-image layer stays dark because it always overlays media. */

:root {
  --chain-accent: hsl(var(--primary));
  --chain-surface-shadow: 0 16px 48px rgba(15, 12, 25, 0.16);
  --magic-bg: hsl(var(--primary) / 0.09);
  --magic-bg-hover: hsl(var(--primary) / 0.14);
  --magic-fg: hsl(var(--primary));
  --magic-bd: hsl(var(--primary) / 0.32);
}

.dark {
  /* --primary lightened for contrast on the near-black card surface. */
  --chain-accent: hsl(271 83% 72%);
  --chain-surface-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  --magic-bg: hsl(271 83% 72% / 0.14);
  --magic-bg-hover: hsl(271 83% 72% / 0.2);
  --magic-fg: #c4b5fd;
  --magic-bd: hsl(271 83% 72% / 0.35);
}

.chain-media-host {
  position: relative;
  display: block;
}

/* Hero-stage fit (fitContainer surfaces): result-renderer stamps the media's
   own aspect-ratio on the wrapper, capped to the stage box, so the action row
   hugs the visible media's bottom edge instead of drifting below an
   overflowing or letterboxed stage. */
.chain-media-host-fit {
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
}

.chain-media-host-fit > a { display: block; width: 100%; height: 100%; }

.chain-media-host-fit > a > img,
.chain-media-host-fit > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Bottom-edge gradient scrim; revealed on hover / .chain-revealed (auto/touch).
   z-index 24 sits above the slider's nav (10), publish (20), counter (20) and
   download (22) layers while leaving them clickable when hidden. */
.chain-scrim {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 24;
  /* 44px band (6 + 30 row + 8) — matching the video variant. The fade used to
     run 76px and climbed well up the image; it now sits tight to the row, and
     the gradient reaches most of its darkness by the row's top edge so the
     shorter band does not cost the chips their contrast. */
  padding: 6px 10px 8px;
  background: linear-gradient(transparent, rgba(8, 7, 12, 0.55) 30%, rgba(8, 7, 12, 0.86));
  border-radius: 0 0 16px 16px;
  opacity: 0;
  /* Rest state stays untranslated: a translateY offset would poke below the
     host and give overflow:auto stages 8px of phantom scroll. The rise-in
     runs as a reveal animation instead. */
  transition: opacity 0.16s ease;
  pointer-events: none;
}

.chain-host:hover .chain-scrim,
.chain-host.chain-revealed .chain-scrim {
  opacity: 1;
  animation: chain-rise 0.16s ease;
  pointer-events: auto;
}

/* Video: the native player stays untouched — the host reserves a 44px band
   under the video (padding-bottom; border-box hosts shrink their content box)
   and the scrim fills it as a dark tray, so the row never overlaps the native
   controls bar. */
.chain-host-below { padding-bottom: 44px; }

.chain-host-below .chain-scrim {
  padding: 7px 10px;
  background: rgba(8, 7, 12, 0.9);
}

/* Viewport-capped modal videos must not bleed into the band; percentage
   max-height is a no-op where the parent is auto-height. */
.chain-host-below video { max-height: 100%; }

.chain-actionrow {
  display: flex;
  align-items: center;
  gap: 3px;
}

.chain-chips-group {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  flex-wrap: wrap;
}

/* No chips (text outputs, catalog miss) → no orphaned hairline next to Publish. */
.chain-chips-group:empty { display: none; }
.chain-chips-group:empty ~ .chain-divider { display: none; }

.chain-sp { flex: 1; }

.chain-divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 5px;
}

/* Identical ghost style for every button in the row (Q12): 30px, no prices at
   rest (price lives in the tooltip + mini-confirm). */
.chain-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: #e6e6e6;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  position: relative;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}

.chain-btn:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.chain-btn:disabled { opacity: 0.45; cursor: default; }
.chain-btn svg { flex: none; }

/* Keyboard reveal pairs with a visible ring (host focusin shows the row). */
.chain-btn:focus-visible,
.chain-pop-go:focus-visible,
.chain-pop-cancel:focus-visible,
.chain-openlink:focus-visible,
.chain-sheet-row:focus-visible,
.chain-sheet-x:focus-visible,
.chain-seed-note-x:focus-visible,
.chain-model-trigger:focus-visible,
.chain-model-opt:focus-visible {
  outline: 2px solid var(--chain-accent);
  outline-offset: 1px;
}

/* Tooltip stays dark in both themes — it anchors inside the media scrim.
   --tip-shift is written per chip by applyTipClamp: the row's hosts are
   overflow-hidden, so a tooltip wider than its chip would be CROPPED at the
   edges (the leftmost chip's name lost its first letters). It rides on
   margin-left, not the transform, so a re-clamp never animates the tooltip
   sideways — transform is the reveal transition's own property. */
.chain-tip {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  margin-left: var(--tip-shift, 0px);
  transform: translateX(-50%) translateY(3px);
  background: #161616;
  border: 1px solid #2e2e2e;
  color: #f0f0f0;
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 7px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s, transform 0.12s;
  z-index: 10;
  text-shadow: none;
}

.chain-btn:hover .chain-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.chain-tip-cr { color: hsl(271 83% 72%); font-weight: 600; }

/* Too wide for the clip box even flush against its edge: wrap to the space
   there is. Overflowing is not an option, and cropping is what we're fixing.
   An explicit width, not max-width: the tooltip's containing block is its
   30px chip, so shrink-to-fit would collapse it to the longest single word. */
.chain-tip-wrap {
  white-space: normal;
  width: var(--tip-max);
  text-align: center;
}

/* ------------------------- mini-confirm (tier 1) ------------------------- */

.chain-pop {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: 252px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--chain-surface-shadow);
  color: hsl(var(--card-foreground));
  text-align: left;
  text-shadow: none;
  cursor: default;
  white-space: normal;
}

.chain-pop-title {
  color: hsl(var(--foreground));
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
}

.chain-pop-title svg { color: var(--chain-accent); }
.chain-pop-model { margin: 8px 0 0; }

.chain-mselect {
  width: 100%;
  height: 30px;
  border-radius: 8px;
  border: 1px solid hsl(var(--border));
  background: var(--panel-input);
  color: hsl(var(--foreground));
  font-size: 12px;
  padding: 0 8px;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.chain-mselect:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.18);
}

/* ---------------------- compact model picker (Q17) ----------------------- */

.chain-model-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 34px;
  padding: 0 9px;
  border-radius: 9px;
  border: 1px solid hsl(var(--border));
  background: var(--panel-input);
  color: hsl(var(--foreground));
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.chain-model-trigger:hover { background: var(--panel-hover); }
.chain-model-trigger[aria-expanded="true"] { border-color: hsl(var(--primary)); }

/* Owner logo tile; the initial letter shows through when the PNG 404s. */
.chain-model-ic {
  position: relative;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 6px;
  overflow: hidden;
  background: hsl(var(--primary) / 0.12);
  color: var(--chain-accent);
  font-size: 10px;
  font-weight: 700;
}

.chain-model-ic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chain-model-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.chain-model-cr { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--chain-accent); }

.chain-model-chev {
  flex: none;
  display: inline-flex;
  color: hsl(var(--muted-foreground));
  transition: transform 0.12s;
}

.chain-model-trigger[aria-expanded="true"] .chain-model-chev { transform: rotate(180deg); }

.chain-model-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  padding: 4px;
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  background: hsl(var(--card));
  max-height: 176px;
  overflow-y: auto;
}

.chain-model-menu[hidden] { display: none; }

.chain-model-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: hsl(var(--foreground));
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}

.chain-model-opt:hover { background: var(--panel-hover); }
.chain-model-opt-selected { background: hsl(var(--primary) / 0.1); }
.chain-model-opt-selected:hover { background: hsl(var(--primary) / 0.14); }

.chain-model-badge {
  flex: none;
  padding: 1px 6px;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.12);
  color: var(--chain-accent);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.chain-model-check { flex: none; display: inline-flex; color: var(--chain-accent); }

.chain-pop-cost { color: hsl(var(--muted-foreground)); font-size: 11.5px; margin: 8px 0 10px; }
.chain-pop-cost b { color: var(--chain-accent); font-weight: 600; }

.chain-pop-error { color: #dc2626; font-size: 11.5px; margin: 0 0 10px; }
.dark .chain-pop-error { color: #f87171; }

.chain-get-credits {
  background: none;
  border: none;
  color: var(--chain-accent);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.chain-pop-actions { display: flex; gap: 6px; align-items: center; }

.chain-pop-go {
  flex: 1;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}

.chain-pop-go:hover { background: hsl(var(--primary) / 0.9); }
.chain-pop-go:disabled { opacity: 0.55; cursor: default; }

.chain-pop-cancel {
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid hsl(var(--border));
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.chain-pop-cancel:hover { background: var(--panel-hover); color: hsl(var(--foreground)); }

.chain-pop-foot { display: flex; justify-content: flex-end; margin-top: 8px; }

.chain-openlink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: hsl(var(--muted-foreground));
  font-size: 11.5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.chain-openlink:hover { color: hsl(var(--foreground)); }

/* --------------------------- palette sheet (More) ------------------------ */

.chain-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  z-index: 60;
  display: grid;
  place-items: center;
}

.chain-sheet {
  width: min(420px, 92vw);
  max-height: 70vh;
  overflow: auto;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--chain-surface-shadow);
  color: hsl(var(--card-foreground));
}

.chain-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.chain-sheet-title { display: inline-flex; align-items: center; gap: 6px; color: hsl(var(--foreground)); font-size: 14px; font-weight: 600; }
.chain-sheet-title > svg { flex: none; color: var(--chain-accent); }

.chain-sheet-x {
  display: inline-flex;
  padding: 5px;
  border: none;
  border-radius: 7px;
  background: none;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.chain-sheet-x:hover { background: var(--panel-hover); color: hsl(var(--foreground)); }

.chain-sheet-list { display: flex; flex-direction: column; gap: 2px; }

.chain-sheet-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: hsl(var(--foreground));
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}

.chain-sheet-row:hover { background: var(--panel-hover); }

.chain-sheet-ic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  background: hsl(var(--primary) / 0.12);
  color: var(--chain-accent);
}

.chain-sheet-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Q11 hybrid: the producing agent sits in the sheet only — mark the rerun. */
.chain-sheet-again {
  flex: none;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--panel-hover);
  color: hsl(var(--muted-foreground));
  font-size: 10.5px;
  font-weight: 600;
}

.chain-sheet-cr { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 11.5px; font-weight: 600; color: var(--chain-accent); }

/* Touch ergonomics: hover doesn't exist — chips must be finger-sized. The
   row's fit-to-space logic (applyRowFit) handles width, so no wrap/scroll. */
@media (pointer: coarse) {
  .chain-btn { height: 38px; padding: 0 12px; }
}

/* Touch ergonomics: the sheet becomes a bottom sheet; dialogs sink to thumb
   reach. Explicit widths keep the confirm/quick-chain their own size. */
@media (max-width: 640px) {
  .chain-sheet-overlay { place-items: end center; }
  .chain-sheet {
    width: 100vw;
    max-height: 78vh;
    border-radius: 18px 18px 0 0;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .chain-qc,
  .chain-pop-floating { margin-bottom: 10px; }
}

/* ---------------------- tier-2 quick-chain popup (Flow A2) --------------- */

.chain-qc {
  width: min(460px, 92vw);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--chain-surface-shadow);
  color: hsl(var(--card-foreground));
}

.chain-qc-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }

.chain-qc-thumb {
  width: 76px;
  height: 76px;
  border-radius: 10px;
  overflow: hidden;
  flex: none;
  border: 1px solid hsl(var(--border));
  background: var(--panel-input);
}

.chain-qc-thumb img,
.chain-qc-thumb video { width: 100%; height: 100%; object-fit: cover; }

.chain-qc-sub { color: hsl(var(--muted-foreground)); font-size: 11.5px; margin-top: 3px; }
.chain-qc-fields { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }

.chain-qc-text {
  width: 100%;
  min-height: 72px;
  border-radius: 10px;
  border: 1px solid hsl(var(--border));
  background: var(--panel-input);
  color: hsl(var(--foreground));
  font-size: 13px;
  padding: 10px 12px;
  outline: none;
  resize: vertical;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.chain-qc-text::placeholder { color: hsl(var(--muted-foreground)); }

.chain-qc-text:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.18);
}

/* Floating variant: a confirm opened from a sheet item (the sheet scroll-clips
   anchored pops, so it closes and the dialog centers instead). */
.chain-pop-floating {
  position: static;
  width: min(320px, 92vw);
}

/* ---------------------- Flow-B landing note (§5.5) ----------------------- */

.chain-seed-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px solid hsl(var(--primary) / 0.35);
  border-radius: 10px;
  background: hsl(var(--primary) / 0.08);
  color: hsl(var(--foreground));
  font-size: 12.5px;
}

.chain-seed-note > svg { flex: none; color: var(--chain-accent); }
.chain-seed-note span { flex: 1; }

.chain-seed-note-x {
  display: inline-flex;
  flex: none;
  padding: 4px;
  border: none;
  border-radius: 6px;
  background: none;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}

.chain-seed-note-x:hover { background: var(--panel-hover); color: hsl(var(--foreground)); }

/* ------------ Magic Tools identity + panel utility rail (B/G2) ----------- */

/* Skin only — this sheet loads after tailwind.css, so any layout property set
   here would silently override the per-surface utilities left on the button
   (h-11, rounded-ios-xl, the `hidden` of a not-yet-shown button…). */
.chain-magic-btn {
  background: var(--magic-bg);
  color: var(--magic-fg);
  border: 1px solid var(--magic-bd);
}

.chain-magic-btn:hover { background: var(--magic-bg-hover); }

/* The history-card hero is new markup, so it owns its layout. */
.chain-magic-btn--hero {
  display: flex;
  width: 100%;
  height: 38px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 600;
}

/* Tile pills sit on the always-dark hover gradient — the tint never follows
   the page theme. */
.chain-magic-btn--icon {
  background: hsl(271 83% 72% / 0.14);
  color: #c4b5fd;
  border: 1px solid hsl(271 83% 72% / 0.35);
}

.chain-magic-btn--icon:hover { background: hsl(271 83% 72% / 0.2); }

.chain-utility-rail {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--panel-input);
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  padding: 4px;
}

/* ------------------------- entrance motion (Q9) -------------------------- */

@keyframes chain-fade { from { opacity: 0; } }
@keyframes chain-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes chain-scale-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

.chain-pop { animation: chain-rise 0.14s ease; }
.chain-sheet-overlay { animation: chain-fade 0.16s ease; }

.chain-sheet,
.chain-qc,
.chain-pop-floating { animation: chain-scale-in 0.16s ease; }

@media (prefers-reduced-motion: reduce) {
  .chain-scrim,
  .chain-btn,
  .chain-tip { transition: none; }

  .chain-host:hover .chain-scrim,
  .chain-host.chain-revealed .chain-scrim { animation: none; }

  .chain-pop,
  .chain-sheet-overlay,
  .chain-sheet,
  .chain-qc,
  .chain-pop-floating { animation: none; }
}