/* =========================================================================
   Substacker — stylesheet
   Tokens ported from the Platypus Economics Design System
   (see Tube2Stack/Platypus Economics Design System/colors_and_type.css).
   Per that system's guidance, we inline the tokens rather than shipping the
   CSS file verbatim, and match this codebase's conventions (plain CSS, no
   bundler). Brand rules surfaced in the design system that apply here:
     - Never invent colors outside the palette.
     - No emoji in brand surfaces.
     - Big type, committed negative space, one accent color per composition.
   ========================================================================= */

/* ---- Fonts (files live in /public/fonts/, served as static) -------------- */

@font-face {
  font-family: "Sublime";
  src: url("fonts/Sublime.ttf") format("truetype");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue LT";
  src: url("fonts/HelveticaNeueLTStd-Roman.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue LT";
  src: url("fonts/HelveticaNeueLTStd-It.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue LT";
  src: url("fonts/HelveticaNeueLTStd-Md.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue LT";
  src: url("fonts/HelveticaNeueLTStd-Bd.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue LT";
  src: url("fonts/HelveticaNeueLTStd-Blk.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue LT Cond";
  src: url("fonts/HelveticaNeueLTStd-BdCn.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue LT Cond";
  src: url("fonts/HelveticaNeueLTStd-BlkCn.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Variable.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---- Tokens -------------------------------------------------------------- */

:root {
  /* Core brand */
  --ink:      #0b0b0a;
  --shell:    #ffffff;
  --abyss:    #0e4a53;
  --surf:     #2f9e97;
  --algae:    #006b2e;
  --sun:      #d9a315;
  --coral:    #d93a43;
  --orchid:   #8e4aa0;

  /* Tints & neons */
  --abyss-neon:  #16a7b4;
  --abyss-tint:  #a8ecef;
  --surf-neon:   #00fff0;
  --surf-tint:   #ccfffb;
  --sun-tint:    #ffd966;
  --coral-tint:  #ff9aa0;

  /* Semantic */
  --bg:           var(--shell);
  --bg-alt:       #f5f7f7;
  --bg-dark:      var(--abyss);
  --bg-darker:    #083940;

  --fg:           var(--ink);
  --fg-muted:     #3a4347;
  --fg-subtle:    #5a6467;
  --fg-on-dark:   var(--shell);
  --fg-on-dark-muted: #d4eaec;

  --accent:        var(--surf);
  --accent-strong: var(--abyss);
  --accent-neon:   var(--surf-neon);

  --border:       #e2e6e6;
  --border-dark:  #13575f;
  --divider:      rgba(14, 74, 83, 0.12);

  --success: var(--algae);
  --warning: var(--sun);
  --danger:  var(--coral);

  /* Product-reference color for Substack itself — used sparingly to
     signal "destined for Substack," not as a general accent. */
  --substack: #ff6719;

  /* Type */
  --font-display: "Sublime", "Helvetica Neue LT Cond", Impact, "Arial Black", sans-serif;
  --font-impact:  "Helvetica Neue LT Cond", "Helvetica Neue LT", Impact, Helvetica, sans-serif;
  --font-sans:    "Helvetica Neue LT", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui:      "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Scale */
  --fs-h1: 44px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 20px;
  --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px;
  --fs-caption: 12px; --fs-eyebrow: 12px;

  /* Spacing (8px base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* Radii */
  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 12px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(11, 11, 10, 0.06);
  --shadow-md: 0 4px 14px rgba(11, 11, 10, 0.08);
  --shadow-crisp: 0 0 0 1px rgba(14, 74, 83, 0.14);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
}

/* ---- Reset + base -------------------------------------------------------- */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

a { color: var(--abyss); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--surf); }

button { font-family: inherit; }

/* =========================================================================
   TOP BAR — Abyss surface, white marks
   ========================================================================= */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-5);
  background: var(--abyss);
  color: var(--fg-on-dark);
  border-bottom: 1px solid var(--border-dark);
  min-height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: none;
  border: none;
  padding: var(--sp-1) var(--sp-2);
  margin-left: calc(var(--sp-2) * -1);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out);
}
.brand:hover { background: rgba(255, 255, 255, 0.08); }
.brand:focus-visible { outline: 3px solid var(--surf-neon); outline-offset: 2px; }

.brand-icon {
  height: 44px;
  width: auto;
  display: block;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 0.9;
  color: var(--fg-on-dark);
}

.brand-stack {
  height: 38px;
  width: 38px;
  display: block;
  margin-left: var(--sp-1);
}

.topbar-actions { display: flex; gap: var(--sp-2); }

/* =========================================================================
   BUTTONS
   ========================================================================= */

.icon-btn {
  background: transparent;
  color: var(--fg-on-dark);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.icon-btn.icon-only {
  padding: 8px 10px;
  font-size: 18px;
  min-width: 40px;
  justify-content: center;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.55); }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.primary-btn {
  background: var(--abyss);
  color: var(--shell);
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 20px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.primary-btn:hover { background: var(--surf); }
.primary-btn:disabled { background: var(--border); color: var(--fg-subtle); cursor: not-allowed; }

/* =========================================================================
   WORKSPACE (three-pane layout)
   ========================================================================= */

.workspace {
  display: grid;
  grid-template-columns: 1fr 6px var(--right-pane-width, 400px);
  min-height: 0;
  overflow: hidden;
}

/* Vertical drag gutter between conversation (center) and drafts (right).
   Takes its own 6px grid column; on hover/drag a surf stripe appears in
   the middle of the gutter so it's visible. */
.pane-resizer {
  cursor: col-resize;
  background: transparent;
  position: relative;
  user-select: none;
  touch-action: none;
}
.pane-resizer::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
  transition: background var(--dur-fast) var(--ease-out);
}
.pane-resizer:hover::before,
.pane-resizer.dragging::before,
.pane-resizer:focus-visible::before {
  background: var(--surf);
}

.pane {
  overflow: auto;
  border-right: 1px solid var(--border);
  background: var(--bg);
}
.pane-right { border-right: none; border-left: 1px solid var(--border); }

.pane-heading {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-subtle);
  margin: var(--sp-5) var(--sp-4) var(--sp-2);
}

/* ---- Phase stepper (horizontal strip above the conversation) ----------- */

.phases-bar {
  flex: none;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.phase-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
  row-gap: 4px;
}

.phase-list li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  font-family: var(--font-ui);
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}
.phase-list li:hover { background: var(--bg-alt); }

.phase-list li.active {
  color: var(--abyss);
  background: var(--surf-tint);
  font-weight: 600;
}

.phase-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border);
  display: inline-block;
  flex: none;
}
.phase-list li.active .phase-dot { background: var(--surf); box-shadow: 0 0 0 3px rgba(47, 158, 151, 0.22); }
.phase-list li.done .phase-dot { background: var(--algae); }

/* Phase navigator is inert while a turn is in flight (streaming, transcribing,
   image-gen, voice-rewrite). Active phase keeps full opacity so the user can
   still see where they are. */
.phase-list.busy li {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.phase-list.busy li.active { opacity: 1; }

/* ---- Sessions list (lives inside the Open popover) -------------------- */

.sessions { padding-bottom: var(--sp-3); }

.session-list { list-style: none; margin: 0; padding: 0 var(--sp-2); }
.session-list .empty {
  padding: var(--sp-3);
  color: var(--fg-subtle);
  font-style: italic;
  font-size: 13px;
}

.session-item {
  padding: 10px var(--sp-3);
  margin: 2px 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13.5px;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.session-item:hover {
  background: var(--bg-alt);
  border-color: var(--border);
}
.session-item.active {
  background: var(--surf-tint);
  border-color: var(--surf);
}
/* While the popover is the focal UI, the row that's driving the preview
   pane gets a slightly stronger highlight so it's easy to track which
   one the right-side preview corresponds to. */
.session-item.is-previewing {
  background: var(--bg-alt);
  border-color: var(--surf);
}
.session-item .session-body { flex: 1; min-width: 0; }
.session-item .title {
  font-weight: 600;
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  line-height: 1.25;
  font-size: 13.5px;
}
.session-item .meta { color: var(--fg-subtle); font-size: var(--fs-caption); margin-top: 4px; }
.session-item .session-preview {
  color: var(--fg-muted);
  font-size: 12.5px;
  line-height: 1.4;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}
.session-item .session-stats { color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.session-match-where {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--surf-tint, rgba(0,0,0,0.06));
  color: var(--fg-muted);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  vertical-align: 1px;
}

/* Session search input (sidebar) */
.session-search {
  margin: 6px 0 8px 0;
}
.session-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg, #fff);
  color: var(--fg);
  transition: border-color var(--dur-fast, 120ms) var(--ease-out, ease);
}
.session-search-input:focus {
  outline: none;
  border-color: var(--surf, #888);
}
.session-search-input::placeholder { color: var(--fg-subtle); }

.session-delete {
  background: transparent;
  border: none;
  color: var(--fg-subtle);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-xs);
  opacity: 0;
  font-size: 14px;
  line-height: 1;
  transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.session-item:hover .session-delete { opacity: 1; }
.session-delete:hover { background: var(--coral-tint); color: var(--coral); }
.session-delete:focus-visible { opacity: 1; }

/* Custom floating tooltip shown on session-item hover --------------------- */
.session-tooltip {
  position: fixed;
  z-index: 100;
  max-width: 380px;
  background: var(--abyss);
  color: var(--fg-on-dark);
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 44px rgba(11, 11, 10, 0.25),
              0 0 0 1px rgba(255, 255, 255, 0.05);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  pointer-events: none;
  animation: sessionTipIn 0.14s var(--ease-out);
}
.session-tooltip::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 14px;
  width: 10px;
  height: 10px;
  background: var(--abyss);
  transform: rotate(45deg);
  border-radius: 1px;
}
/* When the tooltip is placed to the left of its row (because the right
   side overflowed), flip the arrow to the right edge so it still points
   back at the source row. */
.session-tooltip[data-placement="left"]::before {
  left: auto;
  right: -6px;
}
@keyframes sessionTipIn {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}
.session-tooltip-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.2;
  color: var(--shell);
  margin-bottom: var(--sp-1);
}
.session-tooltip-meta {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--surf-neon);
  margin-bottom: var(--sp-2);
}
.session-tooltip-time {
  font-size: 11.5px;
  color: var(--fg-on-dark-muted);
  margin-bottom: var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.session-tooltip-stats {
  font-size: 11.5px;
  color: var(--fg-on-dark-muted);
  margin-bottom: var(--sp-3);
}
.session-tooltip-stats b {
  color: var(--shell);
  font-weight: 700;
}
.session-tooltip-preview {
  padding-top: var(--sp-2);
  border-top: 1px dashed rgba(255, 255, 255, 0.2);
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-on-dark);
  font-style: italic;
  max-height: 240px;
  overflow: hidden;
}

/* ---- Center pane: conversation ----------------------------------------- */

.pane-center { display: flex; flex-direction: column; min-height: 0; }

.conversation {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-6) var(--sp-7);
}

.welcome {
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
  padding-top: var(--sp-7);
}

.welcome h2 {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--abyss);
  margin: 0 0 var(--sp-4);
}
.welcome p {
  color: var(--fg-muted);
  font-size: var(--fs-body-lg);
  max-width: 560px;
  margin: 0 auto var(--sp-3);
  line-height: 1.55;
}
.welcome-scope {
  color: var(--fg-subtle) !important;
  font-size: 13px !important;
  font-style: italic;
  max-width: 520px;
  margin: 0 auto var(--sp-6) !important;
}

.input-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  /* Stretch every card in a row to the tallest one — keeps the grid aligned
     when one card expands its description on hover. */
  align-items: stretch;
}

.mode-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: var(--sp-5);
  background: var(--shell);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  color: var(--fg);
  position: relative;
  min-height: 168px;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.mode-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  color: var(--surf);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.mode-btn .mode-title {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  color: var(--abyss);
  letter-spacing: -0.005em;
}
.mode-btn .mode-tagline {
  font-size: 13.5px;
  color: var(--fg-subtle);
  line-height: 1.4;
}
.mode-btn .mode-desc {
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.5;
  /* Hidden until hover/focus. max-height + opacity so the card grows
     smoothly and the grid row stretches with it (align-items: stretch). */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height var(--dur-med) var(--ease-out),
              opacity var(--dur-med) var(--ease-out),
              margin-top var(--dur-med) var(--ease-out);
}
.mode-btn:hover,
.mode-btn:focus-visible {
  border-color: var(--surf);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  background: var(--bg);
}
.mode-btn:hover .mode-icon,
.mode-btn:focus-visible .mode-icon {
  background: var(--surf);
  color: var(--shell);
}
.mode-btn:hover .mode-desc,
.mode-btn:focus-visible .mode-desc {
  max-height: 160px;
  opacity: 1;
  margin-top: 6px;
}

/* On touch / no-hover devices, hover state is unreachable, so just show the
   description always. Keeps the long copy discoverable on iPad and phones. */
@media (hover: none) {
  .mode-btn .mode-desc {
    max-height: 160px;
    opacity: 1;
    margin-top: 6px;
  }
}

.mode-btn.disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.mode-btn.disabled:hover {
  border-color: var(--border);
  box-shadow: none;
  transform: none;
  background: var(--shell);
}
.mode-btn.disabled:hover .mode-icon {
  background: var(--bg-alt);
  color: var(--surf);
}
.mode-btn.disabled::after {
  content: "Coming soon";
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  background: var(--sun);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: var(--radius-xs);
}

/* ---- Headline + subtitle picker (in-conversation card) ---------------------- */

/* Lives between #conversation and .composer during the voiceRewrite phase
   so Justin picks the title before fact-check, not after. Visual treatment
   echoes .done-titles so muscle memory carries over from the Done pane. */
.headline-card {
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  padding: var(--sp-3) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 50vh;
  overflow-y: auto;
}
.headline-card[hidden] { display: none; }

.headline-card-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.headline-card-pending {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: var(--fg-muted);
  font-size: 13px;
  font-style: italic;
}
.headline-card-pending .draft-generating-spinner {
  width: 16px; height: 16px; border-width: 2px;
}

.headline-card-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.headline-card-option {
  text-align: left;
  background: var(--shell);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 14.5px;
  line-height: 1.4;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.headline-card-option:hover {
  border-color: var(--surf);
  background: var(--bg-alt);
}
.headline-card-option:disabled { opacity: 0.55; cursor: default; }

.headline-card-chosen-title,
.headline-card-chosen-subtitle {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: #fbfaf4;
  border: 1px solid #e9e4d3;
  border-radius: var(--radius-sm);
}
.headline-card-chosen-title-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.headline-card-chosen-title-text {
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: 16px;
  line-height: 1.3;
  color: #1a1a1a;
}
.headline-card-chosen-subtitle .headline-card-chosen-title-text {
  font-size: 14px;
  color: #5a5a5a;
}

/* Contenteditable headline / subtitle fields — both in the in-conversation
   picker chips and the Done pane's "Your headline + subtitle" preview. The
   user is editing real text, not a button, so cue it as text-input
   rather than tappable. */
.headline-card-chosen-editable {
  cursor: text;
  outline: none;
  border-radius: 3px;
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.headline-card-chosen-editable:hover {
  background: rgba(0, 0, 0, 0.03);
}
.headline-card-chosen-editable:focus {
  background: #fff;
  box-shadow: 0 0 0 2px rgba(15, 76, 71, 0.35);
}

.headline-card-cta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.headline-card-repick {
  margin-right: auto;
}

/* ---- Composer ---------------------------------------------------------- */

.composer {
  border-top: 1px solid var(--border);
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  background: var(--bg-alt);
}

.composer textarea {
  width: 100%;
  resize: none;                 /* auto-growing via JS, no manual handle */
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--fg);
  background: var(--shell);
  line-height: 1.5;
  min-height: 48px;
  max-height: 240px;
  overflow-y: hidden;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.composer textarea:focus { outline: none; border-color: var(--surf); box-shadow: 0 0 0 3px rgba(47, 158, 151, 0.15); }

.composer-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.composer-spacer { flex: 1; }

.composer-actions .icon-btn {
  background: var(--shell);
  color: var(--abyss);
  border: 1px solid var(--border);
}
.composer-actions .icon-btn:hover { background: var(--bg-alt); border-color: var(--surf); }

/* Mic button states */
#btn-mic.mic-recording {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--shell);
  animation: micPulse 1.1s ease-in-out infinite;
}
#btn-mic.mic-uploading {
  background: var(--surf-tint);
  border-color: var(--surf);
  color: var(--abyss);
}
#btn-mic.mic-error {
  background: var(--coral-tint);
  border-color: var(--coral);
  color: var(--coral);
}
#btn-mic.mic-error::after {
  content: "↻";
  margin-left: 4px;
  font-size: 14px;
  font-weight: 700;
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 58, 67, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(217, 58, 67, 0); }
}

/* Inline transcription status — sits next to the mic button so the user
   can see at a glance that the recording is being uploaded + transcribed.
   The mic button's tooltip alone isn't enough; this is always visible
   during the ~10s wait. */
.mic-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surf-tint);
  border: 1px solid var(--surf);
  color: var(--abyss);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  animation: micStatusFade var(--dur-fast) var(--ease-out);
}
.mic-status[hidden] { display: none; }
.mic-status-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--surf);
  border-top-color: transparent;
  animation: micStatusSpin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes micStatusSpin {
  to { transform: rotate(360deg); }
}
@keyframes micStatusFade {
  from { opacity: 0; transform: translateX(4px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* "Move to Structure →" advance-phase button. Sits on the left of the
   composer action row so it's always within reach. */
.advance-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--surf-tint);
  color: var(--abyss);
  border: 1px solid var(--surf);
  border-radius: var(--radius-md);
  padding: 7px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.advance-btn[hidden] { display: none; }
.advance-btn:hover {
  background: var(--surf);
  color: var(--shell);
  transform: translateX(2px);
}
.advance-btn b {
  font-weight: 700;
  letter-spacing: -0.005em;
}
.advance-btn .advance-arrow {
  font-family: var(--font-impact);
  font-size: 16px;
  line-height: 1;
}
/* "Your typed text will ship with this advance." Resting state mirrors the
   hover treatment — filled teal on white — so the button reads as loaded
   the instant the composer has unsent input. Hover deepens to abyss so the
   button still has somewhere to go on press. The prefix span is hidden by
   default and unhidden by updateAdvanceButton when the textarea is dirty. */
.advance-btn .advance-prefix {
  font-weight: 700;
}
.advance-btn.advance-with-text {
  background: var(--surf);
  color: var(--shell);
  border-color: var(--surf);
  box-shadow: 0 0 0 1px var(--surf-neon) inset, var(--shadow-sm);
}
.advance-btn.advance-with-text:hover {
  background: var(--abyss);
  border-color: var(--abyss);
  color: var(--shell);
}
.advance-btn:disabled,
.advance-btn:disabled:hover,
.advance-btn.advance-with-text:disabled,
.advance-btn.advance-with-text:disabled:hover {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Phase divider card inserted into the conversation on phase changes */
.phase-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-4);
  color: var(--fg-subtle);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.phase-divider::before,
.phase-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.phase-divider .phase-divider-name {
  color: var(--abyss);
  padding: 3px 10px;
  border: 1px solid var(--surf);
  border-radius: var(--radius-pill);
  background: var(--surf-tint);
}

/* ---- Right pane: drafts ------------------------------------------------ */

.drafts-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  padding-top: var(--sp-2);
}

.draft-tabs {
  display: flex;
  gap: 2px;
  padding: 0 var(--sp-3);
  align-items: flex-end;
}

.draft-tab {
  background: var(--bg-alt);
  border: 1px solid transparent;
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
  padding: 8px 14px;
  margin-bottom: -1px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-subtle);
  cursor: pointer;
  letter-spacing: 0.01em;
  position: relative;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.draft-tab:hover:not(.active) {
  background: rgba(255, 255, 255, 0.55);
  color: var(--fg);
}
.draft-tab.active {
  background: var(--bg);
  border-color: var(--border);
  border-bottom-color: var(--bg);
  color: var(--abyss);
  z-index: 1;
}
.draft-tab.active::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: var(--surf);
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}
.draft-tab-history { margin-left: auto; }

.draft-body {
  padding: var(--sp-5) var(--sp-5);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg);
}
.draft-empty {
  color: var(--fg-subtle);
  font-style: italic;
  text-align: center;
  margin-top: var(--sp-7);
}

/* Draft header row — word count + pending-edits badge ------------------- */
.draft-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.draft-wordcount {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--abyss);
  letter-spacing: 0.01em;
}
.draft-wordcount b { font-weight: 700; }
.draft-wordcount-label {
  color: var(--fg-subtle);
  font-weight: 500;
  margin-left: 2px;
}
.draft-edits-badge {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--abyss);
  padding: 3px 10px;
  background: var(--surf-tint);
  border: 1px dashed var(--surf);
  border-radius: var(--radius-pill);
}

/* The draft prose itself. Serif-tuned so it reads distinctly from the
   chat bubbles on the left. */
.draft-prose {
  font-family: var(--font-ui);
  color: var(--ink);
  line-height: 1.7;
  font-size: 16px;
}
.draft-para {
  margin: 0 0 var(--sp-4) 0;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: text;
  transition: background 0.12s var(--ease-out);
  position: relative;
}

/* Headline + subtitle — matches Substack's own layout: big serif title,
   then a muted one-sentence subtitle immediately beneath. Distinct
   enough from body prose that a skim-reader sees at a glance what's
   the piece's hook and what's paragraph one. */
.draft-para.draft-headline {
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-2);
  padding-top: var(--sp-2);
}
.draft-para.draft-subtitle {
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--fg-subtle);
  font-style: normal;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.draft-para:hover {
  background: var(--bg-alt);
  box-shadow: inset 3px 0 0 var(--surf-neon);
}
.draft-para-editing {
  background: var(--shell);
  box-shadow: inset 3px 0 0 var(--surf), 0 0 0 2px var(--surf);
  outline: none;
  cursor: text;
}
.draft-para-editing:focus { outline: none; }
.draft-para-edited {
  background: rgba(47, 158, 151, 0.05);
  box-shadow: inset 3px 0 0 var(--surf);
}

/* Pencil button that reveals on paragraph hover — explicit "click here to
   edit" affordance alongside single-click and double-click. Absolutely
   positioned so it doesn't become part of the editable text flow. */
.draft-para {
  position: relative;
}
.draft-para-edit-btn {
  position: absolute;
  top: 2px;
  right: 4px;
  background: var(--shell);
  border: 1px solid var(--border);
  color: var(--fg-subtle);
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.draft-para:hover .draft-para-edit-btn {
  opacity: 1;
}
.draft-para-edit-btn:hover {
  color: var(--abyss);
  border-color: var(--surf);
}
.draft-para-editing .draft-para-edit-btn {
  display: none;
}

/* Hover-revealed copy button — sits to the left of the edit pencil so
   Justin can grab any paragraph (or headline / subtitle) for pasting into
   Substack, Bluesky, etc. without a manual selection. */
.draft-para-copy-btn {
  position: absolute;
  top: 2px;
  right: 34px;
  background: var(--shell);
  border: 1px solid var(--border);
  color: var(--fg-subtle);
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.draft-para:hover .draft-para-copy-btn { opacity: 1; }
.draft-para-copy-btn:hover {
  color: var(--abyss);
  border-color: var(--surf);
}
.draft-para-copy-btn.is-copied {
  color: var(--algae);
  border-color: var(--algae);
  opacity: 1;
}
.draft-para-editing .draft-para-copy-btn { display: none; }

/* "Copy all" button anchored to the right edge of the draft header row.
   Always visible (not hover-only) since the row already has plenty of
   ambient affordance and Justin asked for an easy grab handle. */
.draft-copy-all {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--shell);
  border: 1px solid var(--border);
  color: var(--fg-subtle);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.draft-copy-all:hover {
  color: var(--abyss);
  border-color: var(--surf);
  background: var(--bg-alt);
}
.draft-copy-all.is-copied {
  color: var(--algae);
  border-color: var(--algae);
  background: var(--shell);
}

/* Inline graph figure — rendered when a paragraph is a
   `=== INSERT GRAPH HERE ... Research ID: ... ===` block that resolves
   to an image the user uploaded during research. */
.draft-para-graph {
  padding: 0;
}
.draft-graph-figure {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 6px);
  background: var(--shell);
}
.draft-graph-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.draft-graph-caption {
  margin-top: 8px;
  font-size: 0.9em;
  color: var(--fg-subtle);
  font-style: italic;
  text-align: center;
}
/* Description-only placeholder — a chart Justin's asked to be made but
   hasn't uploaded yet. Styled as a soft callout so it's visually
   distinct from prose but doesn't shout. */
.draft-graph-placeholder {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md, 6px);
  background: rgba(0, 0, 0, 0.02);
  color: var(--fg-subtle);
}
.draft-graph-placeholder-label {
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-subtle);
  margin-bottom: 4px;
}
.draft-graph-placeholder-title {
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 4px;
}
.draft-graph-placeholder-body {
  font-size: 0.9em;
}

/* Track-changes rendering ----------------------------------------------- */
.track-ins {
  color: var(--algae, #2e7d32);
  background: rgba(46, 125, 50, 0.1);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  padding: 0 1px;
  border-radius: 2px;
}
.track-del {
  color: var(--coral, #c62828);
  background: rgba(198, 40, 40, 0.08);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  padding: 0 1px;
  border-radius: 2px;
}

/* =========================================================================
   FACT CHECK — claims workspace inside the Fact-Checked draft tab
   ========================================================================= */

.factcheck-header {
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.factcheck-title {
  font-family: var(--font-display, var(--font-sans));
  font-size: 18px;
  font-weight: 700;
  color: var(--abyss);
  margin: 0 0 6px 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.factcheck-sub {
  color: var(--fg-muted);
  font-size: 13.5px;
  margin: 0 0 var(--sp-3) 0;
  line-height: 1.5;
}
.factcheck-pill {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.factcheck-pill-running {
  background: var(--surf-tint);
  color: var(--abyss);
}
.factcheck-pill-done {
  background: rgba(46, 125, 50, 0.15);
  color: var(--algae, #2e7d32);
}
.factcheck-pill-error {
  background: var(--coral-tint);
  color: var(--coral);
}
.factcheck-progress {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--fg-muted);
}
.factcheck-progress b { color: var(--abyss); font-weight: 700; }
.factcheck-error {
  margin-top: var(--sp-2);
  padding: 8px 12px;
  background: var(--coral-tint);
  color: var(--coral);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.factcheck-start-btn {
  margin-top: var(--sp-3);
}

.factcheck-claims {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.factcheck-claim {
  background: var(--shell);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  position: relative;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.factcheck-claim-pending-research {
  border-color: var(--border);
  opacity: 0.8;
}
.factcheck-claim-pending-research .claim-quote {
  color: var(--fg-muted);
}
.factcheck-claim-accept {
  border-left: 3px solid var(--algae, #2e7d32);
}
.factcheck-claim-dismiss {
  border-left: 3px solid var(--fg-subtle);
  opacity: 0.75;
}
.factcheck-claim-substitute {
  border-left: 3px solid var(--surf);
}

.claim-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 6px;
  font-family: var(--font-sans);
  font-size: 11.5px;
}
.claim-status {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.claim-status-verified {
  background: rgba(46, 125, 50, 0.15);
  color: var(--algae, #2e7d32);
}
.claim-status-contested {
  background: rgba(234, 179, 8, 0.15);
  color: #b45309;
}
.claim-status-needs-correction {
  background: var(--coral-tint);
  color: var(--coral);
}
.claim-status-dismiss,
.claim-status-pending {
  background: var(--bg-alt);
  color: var(--fg-subtle);
}
.claim-confidence {
  color: var(--fg-subtle);
  font-weight: 500;
}
.claim-quote {
  font-family: var(--font-ui);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  border-left: 3px solid var(--border);
  padding: 2px 12px;
  margin: 6px 0 10px 0;
}
.claim-context {
  font-size: 12.5px;
  color: var(--fg-muted);
  margin-bottom: 8px;
  line-height: 1.5;
}
.claim-research {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg);
  padding: 10px 12px;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.claim-suggested {
  margin-bottom: 10px;
  padding: 10px 12px;
  background: rgba(46, 125, 50, 0.06);
  border: 1px solid rgba(46, 125, 50, 0.25);
  border-radius: var(--radius-sm);
}
.claim-suggested-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--algae, #2e7d32);
  margin-bottom: 4px;
}
.claim-suggested-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

.claim-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--sp-2);
}
.claim-action {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.claim-action:hover { border-color: var(--surf); }
.claim-action.active {
  background: var(--abyss);
  color: var(--shell);
  border-color: var(--abyss);
}
.claim-action-accept.active {
  background: var(--algae, #2e7d32);
  border-color: var(--algae, #2e7d32);
}
.claim-action-dismiss.active {
  background: var(--fg-muted);
  border-color: var(--fg-muted);
}
.claim-action-substitute.active {
  background: var(--surf);
  border-color: var(--surf);
}

.claim-verdict-banner {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-muted);
  font-weight: 600;
}
.claim-custom-text {
  margin-top: 4px;
  font-weight: 400;
  font-style: italic;
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.5;
}

.factcheck-cta {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}
.factcheck-cta .primary-btn {
  padding: 10px 20px;
  font-size: 14px;
}

/* Bulk action row above the claims list. Only shown when at least one
   bulk action would actually do something. */
.factcheck-bulk {
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px dashed var(--border);
}
.factcheck-bulk-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 6px;
}
.factcheck-bulk-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.factcheck-bulk-btn {
  background: var(--surf-tint);
  border: 1px solid var(--surf);
  color: var(--abyss);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.factcheck-bulk-btn:hover { background: var(--surf); color: var(--shell); }
.factcheck-bulk-btn-muted {
  background: transparent;
  border-color: var(--border);
  color: var(--fg-muted);
}
.factcheck-bulk-btn-muted:hover {
  background: var(--bg-alt);
  color: var(--abyss);
}

.factcheck-rerun-wrap {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--sp-3);
}
.factcheck-rerun-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.factcheck-rerun-btn:hover {
  color: var(--abyss);
  border-color: var(--surf);
}

/* =========================================================================
   FACT CHECK — in-chat workspace (left pane during factCheck phase)

   The workspace is mounted as the LAST child of #conversation. Cards are
   grouped into severity tiers; within a tier they're ordered by where
   they appear in the draft. The chat composer is disabled during this
   phase — per-card "Ask a follow-up" inputs are how Justin talks to
   Claude here.
   ========================================================================= */

.factcheck-workspace {
  margin: var(--sp-4) auto;
  padding: var(--sp-4);
  max-width: 860px;
  background: var(--shell);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.factcheck-workspace .factcheck-header {
  margin-bottom: var(--sp-3);
}

/* Claim kind badge — appears beside the status pill so each card reads as
   "this is a CLAIM card" at a glance, even though claims and links live in
   their own sections. */
.claim-kind-badge {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
  color: var(--fg-subtle);
  border: 1px solid var(--border);
}

/* Inline-editable suggested replacement — replaces the modal popover. */
.claim-suggested-edit {
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--shell);
  border: 1px solid rgba(46, 125, 50, 0.35);
  border-radius: var(--radius-sm);
  resize: vertical;
  min-height: 56px;
}
.claim-suggested-edit:focus {
  outline: none;
  border-color: var(--algae, #2e7d32);
  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.15);
}

/* Undo + Ask buttons */
.claim-action-undo {
  background: transparent;
  border-color: var(--border);
  color: var(--fg-muted);
}
.claim-action-undo:hover { color: var(--abyss); border-color: var(--abyss); }
.claim-action-ask {
  margin-left: auto;
  background: var(--surf-tint);
  border-color: var(--surf);
  color: var(--abyss);
}

/* Per-card follow-up Q&A thread */
.claim-followup {
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--border);
  display: none;
}
.claim-followup.open { display: block; }
.claim-followup-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.claim-followup-msg {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.55;
}
.claim-followup-msg-user {
  background: var(--surf-tint);
  color: var(--abyss);
  align-self: flex-end;
  max-width: 92%;
}
.claim-followup-msg-assistant {
  background: var(--bg-alt);
  color: var(--fg);
  align-self: flex-start;
  max-width: 92%;
}
.claim-followup-role {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 3px;
}
.claim-followup-ask {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.claim-followup-ask textarea {
  flex: 1;
  padding: 8px 10px;
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--shell);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  resize: vertical;
  min-height: 48px;
}
.claim-followup-ask textarea:focus {
  outline: none;
  border-color: var(--surf);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}
.claim-followup-send {
  align-self: flex-end;
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  background: var(--abyss);
  color: var(--shell);
  border: 1px solid var(--abyss);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.claim-followup-send:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Source-draft note shown in the right pane during factCheck phase. */
.factcheck-source-note {
  margin-bottom: var(--sp-4);
  padding: 10px 12px;
  background: var(--surf-tint);
  border: 1px solid var(--surf);
  border-radius: var(--radius-sm);
}
.factcheck-source-note-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--abyss);
  margin-bottom: 3px;
}
.factcheck-source-note-sub {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--fg-muted);
  line-height: 1.5;
}

/* =========================================================================
   RESEARCH PANE — gather-your-sources workspace in the right sidebar
   ========================================================================= */

.research-header {
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.research-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.research-title {
  font-family: var(--font-display, var(--font-sans));
  font-size: 18px;
  font-weight: 700;
  color: var(--abyss);
  margin: 0;
}
.research-scope-badge {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  cursor: help;
}
.research-sub {
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 10px 0;
}
.research-progress {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--fg-subtle);
}
.research-progress b { color: var(--abyss); font-weight: 700; }
.research-progress em { font-style: italic; }

.research-form {
  margin-bottom: var(--sp-4);
  padding: var(--sp-3);
  background: var(--bg-alt);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border);
}

/* Segmented scope toggle. Makes the context-vs-RAG choice explicit. */
.research-scope-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}
.research-scope-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  background: var(--shell);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  text-align: left;
}
.research-scope-opt:hover {
  border-color: var(--surf);
}
.research-scope-opt.active {
  border-color: var(--abyss);
  background: var(--abyss);
  color: var(--shell);
}
.research-scope-opt-label {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--abyss);
}
.research-scope-opt.active .research-scope-opt-label {
  color: var(--shell);
}
.research-scope-opt-sub {
  font-family: var(--font-sans);
  font-size: 10.5px;
  color: var(--fg-subtle);
  line-height: 1.35;
}
.research-scope-opt.active .research-scope-opt-sub {
  color: rgba(255, 255, 255, 0.75);
}
.research-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  min-height: 70px;
  background: var(--shell);
  color: var(--fg);
}
.research-input:focus {
  outline: none;
  border-color: var(--surf);
  box-shadow: 0 0 0 3px rgba(47, 158, 151, 0.15);
}
.research-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.research-hint {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--fg-subtle);
}
.research-form-buttons {
  display: flex;
  gap: 6px;
}
.research-add-btn {
  padding: 7px 16px;
  font-size: 13px;
}
.research-upload-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.research-upload-btn:hover {
  color: var(--abyss);
  border-color: var(--surf);
}
.research-upload-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Drag-and-drop overlay covers the whole research pane. */
.draft-body { position: relative; }
.research-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: rgba(47, 158, 151, 0.12);
  border: 3px dashed var(--surf);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: researchDropIn 0.12s var(--ease-out);
}
.research-drop-inner {
  background: var(--shell);
  padding: 20px 28px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.research-drop-icon {
  font-size: 32px;
  color: var(--surf);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
}
.research-drop-text {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--abyss);
  margin-bottom: 4px;
}
.research-drop-sub {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}
@keyframes researchDropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.research-items {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.research-empty {
  color: var(--fg-subtle);
  font-style: italic;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.55;
  padding: var(--sp-5) var(--sp-3);
}

.research-item {
  padding: var(--sp-3) var(--sp-4);
  background: var(--shell);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  position: relative;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.research-item-processing,
.research-item-pending {
  border-left: 3px solid var(--surf);
  animation: researchItemPulse 1.2s ease-in-out infinite;
}
@keyframes researchItemPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.78; }
}
.research-item-ready { border-left: 3px solid var(--algae, #2e7d32); }
.research-item-error { border-left: 3px solid var(--coral); }

.research-item-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  margin-bottom: 4px;
}
.research-item-status {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.research-item-status-ready {
  background: rgba(46, 125, 50, 0.15);
  color: var(--algae, #2e7d32);
}
.research-item-status-processing,
.research-item-status-pending {
  background: var(--surf-tint);
  color: var(--abyss);
}
.research-item-status-error {
  background: var(--coral-tint);
  color: var(--coral);
}
.research-item-kind {
  color: var(--fg-subtle);
  font-weight: 600;
  text-transform: uppercase;
}
.research-item-scope {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: help;
}
.research-item-scope-context {
  background: var(--surf-tint);
  color: var(--abyss);
}
.research-item-scope-rag {
  background: rgba(234, 179, 8, 0.18);
  color: #92400e;
}
.research-item-scope-rag.research-item-scope {
  /* slightly stronger visual so "searchable" feels distinct */
}
.research-item-scope-rag .research-item-summary { display: none; }
.research-item.research-item-scope-rag {
  border-left-style: solid;
  border-left-width: 3px;
  border-left-color: #eab308;
}
.research-item.research-item-scope-rag.research-item-ready {
  border-left-color: #92400e;
}
.research-item-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--abyss);
  line-height: 1.35;
  margin-bottom: 4px;
}
.research-item-link {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  color: var(--fg-subtle);
  word-break: break-all;
  margin-bottom: 8px;
  text-decoration: none;
}
.research-item-link:hover { color: var(--surf); text-decoration: underline; }

.research-item-thumb {
  display: block;
  max-width: 100%;
  max-height: 220px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin: 6px 0 10px 0;
  background: #fff;
}

/* YouTube thumbnail — 16:9 with a play glyph in the center. Click = open
   the video in YouTube in a new tab. */
.research-item-yt-thumb {
  position: relative;
  display: block;
  margin: 6px 0 10px 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-decoration: none;
  line-height: 0;
}
.research-item-yt-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--bg-alt);
}
.research-item-yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(14, 74, 83, 0.85);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;  /* optical nudge for ▶ */
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.research-item-yt-thumb:hover .research-item-yt-play {
  background: var(--surf);
  transform: translate(-50%, -50%) scale(1.06);
}

/* Ingestion banner — shown at the top of the research pane while a slow
   /research/* call is in flight. Replaces the silent "nothing's
   happening" period with a clear working-on-it indicator. */
.ingesting-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  background: var(--surf-tint);
  border: 1px solid var(--surf);
  border-radius: var(--radius-md);
  color: var(--abyss);
  animation: ingestIn 0.18s var(--ease-out);
}
.ingesting-banner-error {
  background: var(--coral-tint);
  border-color: var(--coral);
}
@keyframes ingestIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ingesting-spinner {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 3px solid rgba(14, 74, 83, 0.2);
  border-top-color: var(--abyss);
  border-radius: 50%;
  animation: ingestSpin 0.9s linear infinite;
}
@keyframes ingestSpin { to { transform: rotate(360deg); } }
.ingesting-icon-error {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ingesting-body {
  flex: 1;
  min-width: 0;
}
.ingesting-title {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--abyss);
  margin-bottom: 2px;
}
.ingesting-sub {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--fg-muted);
}
.ingesting-source {
  font-family: ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--fg-subtle);
  margin-top: 4px;
  word-break: break-all;
  opacity: 0.8;
}
.ingesting-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.ingesting-retry, .ingesting-dismiss {
  background: var(--shell);
  border: 1px solid var(--border);
  color: var(--abyss);
  padding: 5px 12px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.ingesting-retry:hover {
  background: var(--abyss);
  color: var(--shell);
  border-color: var(--abyss);
}
.ingesting-dismiss:hover {
  background: var(--bg-alt);
  border-color: var(--fg-subtle);
}

.research-item-summary {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 10px;
}
.research-item-section-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 4px;
}
.research-item-facts,
.research-item-angles {
  margin-bottom: 10px;
}
.research-item-facts ul,
.research-item-angles ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg);
}
.research-item-facts li,
.research-item-angles li {
  margin-bottom: 4px;
}
.research-item-error {
  font-size: 12.5px;
  color: var(--coral);
  padding: 6px 10px;
  background: var(--coral-tint);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}

/* Inline transcript reveal — surfaces the raw transcript text from the
   Research phase. Closed by default; the summary line shows the kind +
   word count and the body scrolls vertically when long. */
.research-item-transcript {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
}
.research-item-transcript-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-family: var(--font-sans);
  list-style: none;
  user-select: none;
}
.research-item-transcript-summary::-webkit-details-marker { display: none; }
.research-item-transcript-summary::before {
  content: '▸';
  font-size: 10px;
  color: var(--fg-subtle);
  transition: transform var(--dur-fast) var(--ease-out);
}
.research-item-transcript[open] .research-item-transcript-summary::before {
  transform: rotate(90deg);
}
.research-item-transcript-summary:hover { background: var(--shell); }
.research-item-transcript-label {
  flex: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.research-item-transcript-meta {
  font-size: 11px;
  color: var(--fg-muted);
}
.research-item-transcript-body {
  margin: 0;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg);
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 360px;
  overflow-y: auto;
  background: var(--shell);
}

.research-item-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  opacity: 0.4;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.research-item:hover .research-item-actions { opacity: 1; }
.research-item-action {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  padding: 3px 10px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.research-item-action:hover {
  color: var(--abyss);
  border-color: var(--surf);
}
.research-item-action-delete:hover {
  color: var(--coral);
  border-color: var(--coral);
}
.research-item-action-primary {
  background: var(--abyss);
  color: var(--shell);
  border-color: var(--abyss);
  font-weight: 600;
}
.research-item-action-primary:hover {
  background: var(--surf);
  color: var(--shell);
  border-color: var(--surf);
}
.research-item-warn {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(234, 145, 59, 0.18);
  color: #b35d00;
  font-size: 10.5px;
}

/* =========================================================================
   DONE PANE — publish-ready view
   ========================================================================= */

.done-header {
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.done-title {
  font-family: var(--font-display, var(--font-sans));
  font-size: 20px;
  font-weight: 700;
  color: var(--abyss);
  margin: 0 0 4px 0;
}
.done-stats {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-muted);
}
.done-stats b { color: var(--abyss); font-weight: 700; }

.done-section-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 8px;
}

.done-titles { margin-bottom: var(--sp-5); }
.done-title-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.done-title-btn {
  text-align: left;
  background: var(--shell);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.done-title-btn:hover {
  border-color: var(--surf);
  background: var(--bg-alt);
}
.done-title-btn-copied {
  background: rgba(46, 125, 50, 0.1);
  border-color: var(--algae, #2e7d32);
  color: var(--algae, #2e7d32);
  font-weight: 600;
}
/* The user's picked option in the headline or subtitle step — distinct from
   a hover state so the choice stays visible while they pick the next. */
.done-title-btn-chosen {
  background: var(--surf-tint-weak, rgba(168, 236, 239, 0.18));
  border-color: var(--surf);
  color: var(--abyss);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--surf);
}
.done-title-btn-chosen:hover {
  background: var(--surf-tint-weak, rgba(168, 236, 239, 0.28));
}

.done-subtitles { margin-bottom: var(--sp-5); }

/* Final headline+subtitle pair once both steps are done. Styled to look like
   the page header on Substack itself so Justin can eyeball how the two
   read together before copying. */
.done-headline-pair {
  margin-bottom: var(--sp-5);
  padding: var(--sp-4);
  background: #fbfaf4;
  border: 1px solid #e9e4d3;
  border-radius: var(--radius-sm);
}
.done-headline-title {
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.done-headline-subtitle {
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: 16px;
  line-height: 1.4;
  color: #5a5a5a;
}
.done-titles-pending {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--fg-muted);
  font-size: 13px;
  font-style: italic;
}
.done-titles-pending .draft-generating-spinner {
  width: 16px; height: 16px; border-width: 2px;
}

.done-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.done-copy-btn {
  padding: 10px 20px;
  font-size: 14px;
}
.done-secondary-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.done-secondary-btn:hover {
  border-color: var(--surf);
  color: var(--abyss);
}
.done-secondary-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.done-prose-wrap {
  /* Full width — final prose gets room to breathe. */
}
.done-prose {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
}
.done-prose p {
  margin: 0 0 var(--sp-4) 0;
}

/* "Voice rewrite is running" placeholder ------------------------------- */
.draft-generating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-4);
  text-align: center;
  color: var(--fg-muted);
}
.draft-generating-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--surf);
  border-radius: 50%;
  animation: draftSpin 0.9s linear infinite;
}
@keyframes draftSpin { to { transform: rotate(360deg); } }
.draft-generating-label {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--abyss);
  font-weight: 600;
}
.draft-generating-sub {
  font-size: 12.5px;
  color: var(--fg-subtle);
}

/* Draft history list ---------------------------------------------------- */
.draft-history { display: flex; flex-direction: column; gap: var(--sp-2); }
.draft-history-row {
  text-align: left;
  background: var(--shell);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
  cursor: pointer;
  font-family: var(--font-sans);
}
.draft-history-row:hover {
  background: var(--bg-alt);
  border-color: var(--surf);
}
.draft-history-label { font-weight: 600; color: var(--abyss); font-size: 14px; }
.draft-history-meta { color: var(--fg-subtle); font-size: 12px; margin-top: 2px; }

/* =========================================================================
   MESSAGES
   ========================================================================= */

.msg {
  display: flex;
  flex-direction: column;
  margin: var(--sp-4) 0;
  position: relative;
}
.msg-user { align-items: flex-end; }
.msg-assistant { align-items: flex-start; }

/* Hover-revealed copy/delete controls per message ----------------------- */
/* Anchored to the bubble (not the message row), so for assistant messages
   they sit at the top-right of the (potentially narrow) bubble rather than
   floating far away at the right edge of the row. Peek just above the
   bubble's top edge — close enough to feel attached, high enough not to
   cover the first line of text. */
.msg-controls {
  position: absolute;
  top: -12px;
  right: 6px;
  display: flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
  z-index: 2;
}
.msg:hover .msg-controls,
.msg:focus-within .msg-controls {
  opacity: 1;
  pointer-events: auto;
}
/* Fade a message out while the delete round-trip completes. */
.msg-deleting {
  opacity: 0.35;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.msg-ctrl-btn {
  background: var(--shell);
  border: 1px solid var(--border);
  color: var(--fg-subtle);
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  padding: 0;
  box-shadow: var(--shadow-sm);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.msg-ctrl-btn:hover {
  color: var(--abyss);
  border-color: var(--surf);
}
.msg-ctrl-delete:hover {
  color: var(--coral);
  border-color: var(--coral);
  background: var(--coral-tint);
}

.msg-bubble {
  max-width: 680px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  font-size: 15.5px;
  line-height: 1.6;
  position: relative; /* anchor for .msg-controls */
}

.msg-user .msg-bubble {
  background: var(--abyss);
  color: var(--fg-on-dark);
  border-bottom-right-radius: var(--radius-xs);
}
.msg-user .msg-bubble a { color: var(--surf-tint); }

/* Widget-response chips rendered inside a user bubble. Styled so it's
   clear these came from clicking widgets, not typing. */
.msg-widget-chips {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--surf-tint);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-2);
  border-bottom: 1px dashed rgba(168, 236, 239, 0.35);
}
.msg-widget-chip { margin: 2px 0; }
.msg-widget-chip em {
  font-style: italic;
  color: var(--surf-neon);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.msg-widget-chip b {
  color: var(--fg-on-dark);
  font-weight: 700;
}
.chip-check {
  display: inline-block;
  width: 14px;
  color: var(--surf-neon);
  font-weight: 700;
}
.msg-user-text {
  /* Free-text portion sits after any chips block */
}

/* Receipts for thumbs and inline edits bundled into a turn. These only
   live on the optimistic bubble (server strips them from stored content
   before reload) — that's fine, they exist so Justin can see at the
   moment-of-send that his feedback actually shipped to the LLM. */
.msg-feedback-receipt {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--surf-tint);
  padding: var(--sp-2) 0 0 0;
  margin-top: var(--sp-2);
  border-top: 1px dashed rgba(168, 236, 239, 0.35);
}
.msg-feedback-receipt .receipt-line {
  margin: 1px 0;
}
.msg-feedback-receipt .receipt-thumb {
  font-weight: 600;
  color: var(--fg-on-dark);
}
.msg-feedback-receipt .receipt-up { color: var(--surf-neon); }
.msg-feedback-receipt .receipt-down { color: var(--coral, #e78c8c); }
.msg-feedback-receipt .receipt-edit {
  display: inline-block;
  width: 14px;
  color: var(--surf-neon);
  font-weight: 700;
}
/* Per-thumb quote and per-edit before/after blocks. These let Justin
   see exactly which paragraph got reacted to and what each inline edit
   actually changed, instead of an opaque count. */
.msg-feedback-receipt .receipt-quote {
  color: rgba(255, 255, 255, 0.72);
  font-style: italic;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.msg-feedback-receipt .receipt-edit-line {
  margin: 4px 0 6px 0;
}
.msg-feedback-receipt .receipt-edit-head {
  font-weight: 600;
  color: var(--fg-on-dark);
}
.msg-feedback-receipt .receipt-edit-diff {
  margin: 2px 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.msg-feedback-receipt .receipt-edit-orig {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: line-through;
  text-decoration-color: rgba(231, 140, 140, 0.55);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.msg-feedback-receipt .receipt-edit-new {
  color: var(--fg-on-dark);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.msg-feedback-receipt .receipt-edit-new::before {
  content: "→ ";
  color: var(--surf-neon);
  font-weight: 600;
}

.msg-assistant .msg-bubble {
  background: var(--shell);
  border: 1px solid var(--border);
  color: var(--fg);
  border-bottom-left-radius: var(--radius-xs);
  box-shadow: var(--shadow-sm);
}

.msg-ephemeral .msg-bubble {
  background: var(--bg-alt);
  border-style: dashed;
  box-shadow: none;
}

.msg-streaming .msg-bubble {
  box-shadow: 0 0 0 1px var(--surf), var(--shadow-sm);
}

/* ---------------------------------------------------------------------
   Paper-look for draft-phase assistant messages.

   When the assistant writes a First Draft, revises the draft, or runs
   the Voice Rewrite, what it emits IS the piece — not conversation.
   Giving those messages a distinct "sheet of paper" treatment (cream
   bg, serif body, wider margins, subtle page shadow) makes the chat
   pane legible: reader can see at a glance what's chat and what's the
   manuscript they're iterating on.
--------------------------------------------------------------------- */
.msg-assistant[data-phase="firstDraft"] .msg-bubble,
.msg-assistant[data-phase="revision"] .msg-bubble,
.msg-assistant[data-phase="voiceRewrite"] .msg-bubble {
  background: #fbfaf4;
  border: 1px solid #e9e4d3;
  border-radius: var(--radius-sm);
  padding: var(--sp-5) var(--sp-6);
  max-width: 720px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02),
              0 8px 24px -12px rgba(0,0,0,0.18);
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: 17px;
  line-height: 1.7;
  color: #1a1a1a;
}
.msg-assistant[data-phase="firstDraft"] .msg-bubble .prose,
.msg-assistant[data-phase="revision"] .msg-bubble .prose,
.msg-assistant[data-phase="voiceRewrite"] .msg-bubble .prose {
  font-family: Georgia, "Iowan Old Style", serif;
}
/* Make the headline in a draft-phase chat bubble pop the same way it
   does in the draft pane on the right. A bare <h1> from marked.parse
   becomes a proper title. */
.msg-assistant[data-phase="firstDraft"] .msg-bubble .prose h1:first-child,
.msg-assistant[data-phase="revision"] .msg-bubble .prose h1:first-child,
.msg-assistant[data-phase="voiceRewrite"] .msg-bubble .prose h1:first-child {
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-2) 0;
  padding: 0;
  border: 0;
}
/* Subtitle — the first fully-italic paragraph right after the h1 gets the
   muted subtitle treatment, matching Substack's title+subtitle pair. */
.msg-assistant[data-phase="firstDraft"] .msg-bubble .prose h1:first-child + p:has(> em:only-child),
.msg-assistant[data-phase="revision"] .msg-bubble .prose h1:first-child + p:has(> em:only-child),
.msg-assistant[data-phase="voiceRewrite"] .msg-bubble .prose h1:first-child + p:has(> em:only-child) {
  font-size: 17px;
  line-height: 1.4;
  color: #5a5a5a;
  margin: 0 0 var(--sp-5) 0;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid #e9e4d3;
}
.msg-assistant[data-phase="firstDraft"] .msg-bubble .prose h1:first-child + p:has(> em:only-child) em,
.msg-assistant[data-phase="revision"] .msg-bubble .prose h1:first-child + p:has(> em:only-child) em,
.msg-assistant[data-phase="voiceRewrite"] .msg-bubble .prose h1:first-child + p:has(> em:only-child) em {
  font-style: normal;
}

.streaming-cursor {
  display: inline-block;
  animation: blink 1s steps(1) infinite;
  color: var(--surf);
  margin-left: 1px;
}
@keyframes blink { 50% { opacity: 0; } }

/* Prose inside assistant bubbles */
.prose { font-size: 15.5px; }
.prose p:first-child { margin-top: 0; }
.prose p:last-child { margin-bottom: 0; }
.prose p { margin: 0.6em 0; }
.prose h1, .prose h2, .prose h3 {
  font-family: var(--font-sans);
  color: var(--abyss);
  margin: 1em 0 0.4em;
  letter-spacing: -0.01em;
}
.prose h1 { font-size: 1.4em; font-weight: 700; }
.prose h2 { font-size: 1.2em; font-weight: 700; }
.prose h3 { font-size: 1.05em; font-weight: 600; }
.prose blockquote {
  border-left: 3px solid var(--surf);
  margin: 0.6em 0;
  padding: 0.2em 0 0.2em var(--sp-3);
  color: var(--fg-muted);
  font-style: italic;
}
.prose code {
  background: var(--bg-alt);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.92em;
}
.prose pre {
  background: var(--bg-alt);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: 13px;
  border: 1px solid var(--border);
}
.prose a { color: var(--abyss); }
.prose a:hover { color: var(--surf); }

/* Per-chunk thumbs-up / thumbs-down controls ----------------------------- */
.msg-chunk {
  position: relative;
  padding-right: 72px;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out);
}
.msg-chunk.thumbed-up { background: rgba(0, 107, 46, 0.06); }
.msg-chunk.thumbed-down { background: rgba(217, 58, 67, 0.06); }

.chunk-thumbs {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.msg-chunk:hover .chunk-thumbs,
.msg-chunk.thumbed-up .chunk-thumbs,
.msg-chunk.thumbed-down .chunk-thumbs {
  opacity: 1;
}

.chunk-thumb {
  background: var(--shell);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.chunk-thumb:hover { background: var(--bg-alt); border-color: var(--surf); }
.chunk-thumb .thumb-glyph { font-size: 13px; line-height: 1; filter: grayscale(0.3); }
.chunk-thumb .thumb-intensity {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--abyss);
}
.chunk-thumb .thumb-intensity:empty { display: none; }

/* Selected states */
.msg-chunk.thumbed-up .chunk-thumb-up {
  background: var(--algae);
  border-color: var(--algae);
  color: var(--shell);
}
.msg-chunk.thumbed-up .chunk-thumb-up .thumb-glyph { filter: none; }
.msg-chunk.thumbed-up .chunk-thumb-up .thumb-intensity { color: var(--shell); }
.msg-chunk.thumbed-down .chunk-thumb-down {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--shell);
}
.msg-chunk.thumbed-down .chunk-thumb-down .thumb-glyph { filter: none; }
.msg-chunk.thumbed-down .chunk-thumb-down .thumb-intensity { color: var(--shell); }

/* Out-of-phase messages: no thumbs, no hover reveal, no reserved space. */
.msg-assistant.out-of-phase .chunk-thumbs { display: none; }
.msg-assistant.out-of-phase .chunk-edit-btn { display: none; }
.msg-assistant.out-of-phase .msg-chunk { padding-right: 0; }
.msg-assistant.out-of-phase .msg-chunk.thumbed-up,
.msg-assistant.out-of-phase .msg-chunk.thumbed-down { background: transparent; }

/* In-place paragraph editing on assistant chunks (chat pane, mirrors the
   .draft-para flow in the right-hand draft pane). */
.chunk-edit-btn {
  position: absolute;
  top: 2px;
  right: 76px;
  background: var(--shell);
  border: 1px solid var(--border);
  color: var(--fg-subtle);
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.msg-chunk:hover .chunk-edit-btn,
.msg-chunk.msg-chunk-edited .chunk-edit-btn {
  opacity: 1;
}
.chunk-edit-btn:hover {
  color: var(--abyss);
  border-color: var(--surf);
}
/* Extra right padding so the pencil doesn't overlap the prose. */
.msg-chunk { padding-right: 104px; }
.msg-chunk.msg-chunk-editing {
  background: var(--shell);
  box-shadow: inset 3px 0 0 var(--surf), 0 0 0 2px var(--surf);
  outline: none;
  cursor: text;
}
.msg-chunk.msg-chunk-editing:focus { outline: none; }
.msg-chunk.msg-chunk-edited {
  background: rgba(47, 158, 151, 0.05);
  box-shadow: inset 3px 0 0 var(--surf);
}
.msg-chunk.msg-chunk-editing .chunk-edit-btn,
.msg-chunk.msg-chunk-editing .chunk-thumbs { display: none; }

/* Inline comments (Phase D.2) ---------------------------------------------- */

/* Small floating chip that appears just below a text selection */
.comment-add-chip {
  position: absolute;
  z-index: 50;
  background: var(--abyss);
  color: var(--shell);
  border: none;
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  display: none;
  align-items: center;
  animation: commentChipIn 0.16s var(--ease-out);
}
.comment-add-chip .chip-label { letter-spacing: 0.01em; }
.comment-add-chip:hover { background: var(--surf); }
@keyframes commentChipIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Popover that opens from the chip */
.comment-popover {
  position: absolute;
  z-index: 60;
  background: var(--shell);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--sp-3);
  width: 340px;
  max-width: calc(100vw - 32px);
}
.comment-popover-quote {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--fg-muted);
  font-style: italic;
  border-left: 3px solid var(--surf);
  padding: 4px 10px;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-2);
  line-height: 1.4;
}
.comment-popover-text {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  min-height: 60px;
  color: var(--fg);
  background: var(--shell);
}
.comment-popover-text:focus { outline: none; border-color: var(--surf); box-shadow: 0 0 0 3px rgba(47, 158, 151, 0.15); }
.comment-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.comment-cancel {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.comment-cancel:hover { background: var(--bg-alt); }
.comment-save {
  padding: 6px 16px;
  font-size: 13px;
}

/* Pending-comments indicator shown at the bottom of the message */
.msg-pending-comments {
  margin-top: var(--sp-2);
  padding: 6px 10px;
  background: var(--bg-alt);
  border: 1px dashed var(--surf);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--abyss);
  width: 100%;
  max-width: 680px;
  box-sizing: border-box;
}

/* Persisted (sent) comments rendered under an assistant message */
.msg-comment-card {
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  background: var(--bg-alt);
  border-left: 3px solid var(--surf);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.5;
  position: relative;
  width: 100%;
  max-width: 680px;
  box-sizing: border-box;
}
.msg-comment-card .comment-quote {
  font-style: italic;
  color: var(--fg-muted);
  margin-bottom: 4px;
}
.msg-comment-card .comment-text {
  color: var(--fg);
  white-space: pre-wrap;
}
.msg-comment-card .comment-footer {
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--abyss);
  opacity: 0.75;
}
/* "Pending" variant — queued but not yet sent. Dashed accent + footer. */
.msg-comment-card-pending {
  background: rgba(47, 158, 151, 0.07);
  border-left: 3px dashed var(--surf);
}
.comment-remove-btn {
  position: absolute;
  top: 4px;
  right: 6px;
  background: transparent;
  border: none;
  color: var(--fg-subtle);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}
.comment-remove-btn:hover {
  color: var(--coral);
  background: var(--bg-alt);
}
/* Inline-text highlight for commented spans (Google-Docs style) --------- */
mark.comment-highlight {
  background: #fef9c3;
  border-bottom: 2px solid #facc15;
  color: inherit;
  padding: 1px 0;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
mark.comment-highlight:hover,
mark.comment-highlight.comment-active {
  background: #fde68a;
  border-bottom-color: #f59e0b;
}

/* Card ↔ highlight hover linkage ---------------------------------------- */
.msg-comment-card {
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.msg-comment-card-active,
.msg-comment-card:hover {
  background: #fef3c7;
  border-left-color: #f59e0b;
}

/* Card layout: quote on one row, comment below, actions in top-right */
.msg-comment-card .comment-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
}
.msg-comment-card .comment-resolved-badge {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: var(--radius-pill);
}
.msg-comment-card-resolved {
  opacity: 0.6;
}
.msg-comment-card-resolved .comment-text {
  text-decoration: line-through;
  color: var(--fg-muted);
}

.msg-comment-card-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.msg-comment-card:hover .msg-comment-card-actions,
.msg-comment-card:focus-within .msg-comment-card-actions {
  opacity: 1;
}
.msg-comment-action {
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-subtle);
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.msg-comment-action:hover {
  background: var(--shell);
  border-color: var(--border);
  color: var(--abyss);
}
.msg-comment-action-delete:hover {
  color: var(--coral);
  border-color: var(--coral);
}
.msg-comment-action-resolve:hover {
  color: var(--algae, #2e7d32);
  border-color: var(--algae, #2e7d32);
}

/* Edit popover — Delete button variant */
.comment-delete {
  background: transparent;
  border: 1px solid var(--coral);
  color: var(--coral);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-right: auto;
}
.comment-delete:hover { background: var(--coral-tint); }

/* User-bubble variant — same structure but the user bubble is dark, so
   we invert colors. */
.msg-user-comments {
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-2);
  border-bottom: 1px dashed rgba(168, 236, 239, 0.35);
}
.msg-comment-card-user {
  background: rgba(255, 255, 255, 0.06);
  border-left-color: var(--surf-neon, #7be4d0);
  color: var(--fg-on-dark);
  margin-top: 0;
  margin-bottom: 6px;
}
.msg-comment-card-user .comment-quote {
  color: rgba(255, 255, 255, 0.65);
}
.msg-comment-card-user .comment-text {
  color: var(--fg-on-dark);
}
.prose.error {
  color: var(--danger);
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.widget-error {
  background: var(--coral-tint);
  border: 1px solid var(--coral);
  color: var(--ink);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: pre-wrap;
}

/* =========================================================================
   WIDGETS
   ========================================================================= */

.widget {
  margin: var(--sp-4) 0 var(--sp-2);
  padding: var(--sp-4);
  background: var(--surf-tint);
  border: 1px solid var(--surf);
  border-radius: var(--radius-md);
}

.widget-prompt {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--abyss);
  margin-bottom: var(--sp-3);
  font-size: 15px;
  letter-spacing: -0.005em;
}

.widget-controls { display: flex; flex-direction: column; gap: var(--sp-2); }

/* -- pick / multi -------------------------------------------------------- */
.widget-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--shell);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  color: var(--fg);
  position: relative;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.widget-opt:hover { border-color: var(--surf); }
.widget-opt b { font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--abyss); }
.widget-opt span { font-size: 13px; color: var(--fg-muted); }
.widget-opt.selected {
  border-color: var(--surf);
  background: var(--shell);
  box-shadow: 0 0 0 2px var(--surf);
}
.intensity-badge {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-3);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--surf);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* "Or type your own" block appended to pick/multi widgets */
.widget-other {
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px dashed rgba(14, 74, 83, 0.25);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.widget-other-intro {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  color: var(--fg-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.widget-other-text {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--shell);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  min-height: 56px;
  color: var(--fg);
}
.widget-other-text:focus { outline: none; border-color: var(--surf); box-shadow: 0 0 0 3px rgba(47, 158, 151, 0.15); }

/* Hint line that explains the intensity-dot badges */
.widget-intensity-hint {
  margin-top: var(--sp-2);
  font-size: 12px;
  color: var(--fg-subtle);
  font-style: italic;
  line-height: 1.4;
}

/* -- scale --------------------------------------------------------------- */
.widget-slider { width: 100%; accent-color: var(--surf); }
.widget-readout {
  text-align: center;
  font-family: var(--font-impact);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  color: var(--abyss);
  letter-spacing: -0.01em;
}
.widget-scale-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* -- shortfield --------------------------------------------------------- */
.widget-field {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--shell);
  font-family: var(--font-ui);
  font-size: 14px;
}
.widget-field:focus { outline: none; border-color: var(--surf); }

/* -- rank ---------------------------------------------------------------- */
.widget-rank-list { list-style: none; padding: 0; margin: 0; counter-reset: rank; }
.widget-rank-list li {
  counter-increment: rank;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  margin: var(--sp-1) 0;
  background: var(--shell);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  cursor: grab;
  user-select: none;
  transition: box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.widget-rank-list li:hover { border-color: var(--surf); }
.widget-rank-list li.dragging {
  opacity: 0.5;
  cursor: grabbing;
  box-shadow: var(--shadow-md);
}
.widget-rank-list li.drop-before {
  border-top: 3px solid var(--surf);
  padding-top: calc(var(--sp-2) - 2px);
}
.widget-rank-list li.drop-after {
  border-bottom: 3px solid var(--surf);
  padding-bottom: calc(var(--sp-2) - 2px);
}
.widget-rank-list li::before {
  content: counter(rank) ".";
  font-family: var(--font-impact);
  color: var(--surf);
  font-weight: 900;
  width: 20px;
  flex: none;
}
.widget-rank-list .rank-label { flex: 1; }
.widget-rank-list .handle {
  color: var(--fg-subtle);
  cursor: grab;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -2px;
  user-select: none;
}
.widget-rank-list li.dragging .handle { cursor: grabbing; }
.widget-rank-list .rank-controls { margin-left: auto; display: flex; gap: 2px; }
.widget-rank-list .rank-controls button {
  background: transparent;
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  cursor: pointer;
}
.widget-rank-list .rank-controls button:hover { background: var(--bg-alt); border-color: var(--surf); }

/* -- allocate ------------------------------------------------------------ */
.widget-allocate-rows { display: flex; flex-direction: column; gap: var(--sp-1); }
.widget-allocate-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--shell);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.allocate-label { flex: 1; font-size: 14px; }
.allocate-input {
  width: 72px;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 14px;
  text-align: right;
}
.widget-allocate-total {
  margin-top: var(--sp-2);
  text-align: right;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-muted);
}
.widget-allocate-total.over  { color: var(--coral); font-weight: 700; }
.widget-allocate-total.under { color: var(--fg-muted); }

/* -- queue status (shown automatically when widget has a response) ------ */
/* Pick/multi/scale/shortfield/rank/allocate auto-queue on every interaction;
   this strip appears below the widget controls when there's something to
   send, so the user knows the Send button in the composer will include it. */
.widget-queue-status {
  margin-top: var(--sp-3);
  padding: 6px 10px;
  background: rgba(0, 107, 46, 0.08);
  border: 1px dashed rgba(0, 107, 46, 0.4);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--algae);
  display: flex;
  align-items: center;
  gap: 6px;
}
.widget-queue-status .chip-check {
  color: var(--algae);
  width: auto;
  font-size: 13px;
}
.widget-queue-status .widget-queue-text b { color: var(--abyss); }

/* Older classes kept for the confirm widget's status strip ---------------- */
.widget-submit {
  align-self: flex-start;
  margin-top: var(--sp-3);
  font-size: 13px;
  padding: var(--sp-2) var(--sp-4);
}

/* Shown after submit (replaces the Submit or Confirm button). Full-width
   strip so the explanatory text has room to breathe. */
.widget-status {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--algae-tint, #d6f5e0);
  border: 1px solid rgba(0, 107, 46, 0.35);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  color: var(--fg);
  line-height: 1.4;
}
.widget-status-icon {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--algae);
  color: var(--shell);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.widget-status-text { flex: 1; }
.widget-status-text b { color: var(--abyss); }
.widget-status-edit {
  flex: none;
  background: transparent;
  border: 1px solid rgba(0, 107, 46, 0.45);
  color: var(--algae);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.widget-status-edit:hover { background: rgba(0, 107, 46, 0.1); }

/* Confirm widget: a single prominent "Do it!" action. */
.widget-confirm {
  align-self: flex-start;
  margin-top: var(--sp-2);
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--sun);
  color: var(--ink);
  border-radius: var(--radius-md);
}
.widget-confirm:hover { background: var(--sun-tint); }

/* =========================================================================
   STATUS BAR
   ========================================================================= */

.statusbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-5);
  background: var(--shell);
  border-top: 1px solid var(--border);
  font-size: var(--fs-caption);
  color: var(--fg-subtle);
  overflow: hidden;
  min-width: 0;
}

#status-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-updated {
  flex: none;
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.status-updated b {
  color: var(--fg-muted);
  font-weight: 700;
}

.status-dot {
  font-size: 10px;
  line-height: 1;
  display: inline-block;
  padding: 2px;
  border-radius: 50%;
  user-select: none;
}
.status-dot.status-ok       { color: var(--algae); }
.status-dot.status-error,
.status-dot.status-down     { color: var(--coral); }
.status-dot.status-degraded { color: #c78a00; } /* honey/amber */
.status-dot.status-unknown  { color: var(--fg-subtle); }
.status-dot:focus-visible   { outline: 3px solid var(--surf-neon); outline-offset: 2px; }

/* Transient autosave message — rendered in #status-updated via data-autosave
   so it sits where "App updated {date}" normally lives, and takes over the
   slot briefly while the save is in flight. */
#status-updated.autosave-saving::before,
#status-updated.autosave-saved::before,
#status-updated.autosave-error::before {
  content: attr(data-autosave);
  display: inline;
  font-weight: 600;
  margin-right: 6px;
}
#status-updated.autosave-saving::before { color: var(--fg-subtle); }
#status-updated.autosave-saved::before  { color: var(--algae); }
#status-updated.autosave-error::before  { color: var(--coral); }
#status-updated.autosave-saving b,
#status-updated.autosave-saved b,
#status-updated.autosave-error b { display: none; }

/* ========================================================================
   Health popover — opens above the footer status dot on hover or click.
   Gives the user a row per external service with its current status + the
   last error message if any, so they know *which* dependency is sick.
   ======================================================================== */
.health-popover {
  position: fixed;
  z-index: 1000;
  width: min(380px, calc(100vw - 16px));
  max-height: min(520px, calc(100vh - 24px));
  overflow-y: auto;
  background: var(--shell);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 8px 24px rgba(10, 20, 30, 0.14);
  padding: var(--sp-3);
  font-size: var(--fs-caption);
  color: var(--fg);
  line-height: 1.45;
}
.health-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-caption);
}
.health-header-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
.health-row {
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--border);
}
.health-row:last-of-type { border-bottom: none; }
.health-row-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  justify-content: space-between;
}
.health-row-label {
  font-weight: 600;
  color: var(--fg);
}
.health-row-note {
  color: var(--fg-subtle);
  margin-top: 2px;
  font-size: 11px;
}
.health-row-line {
  color: var(--fg-muted, var(--fg));
  margin-top: 3px;
  font-size: 12px;
}
.health-row-err {
  color: var(--coral);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  word-break: break-word;
}
.health-footer {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
  color: var(--fg-subtle);
  font-size: 11px;
}
.health-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.4;
  flex: none;
}
.health-badge-ok,
.health-header-dot.health-badge-ok        { background: #dff6e6; color: var(--algae); }
.health-badge-down,
.health-header-dot.health-badge-down      { background: #fde1e2; color: var(--coral); }
.health-badge-degraded,
.health-header-dot.health-badge-degraded  { background: #fef2d5; color: #8a5e00; }
.health-badge-unknown,
.health-header-dot.health-badge-unknown   { background: var(--border); color: var(--fg-subtle); }
.health-header-dot.health-badge-ok        { background: var(--algae); }
.health-header-dot.health-badge-down      { background: var(--coral); }
.health-header-dot.health-badge-degraded  { background: #c78a00; }
.health-header-dot.health-badge-unknown   { background: var(--fg-subtle); }

/* =========================================================================
   FOCUS — visible, accessible (per design-system a11y baseline)
   ========================================================================= */

:focus-visible {
  outline: 3px solid var(--surf-neon);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =========================================================================
   YOUTUBE PICKER — grid of channel videos / shorts on the Video mode click
   ========================================================================= */

.yt-picker-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 74, 83, 0.55);
  z-index: 310;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
}
.yt-picker {
  width: 100%;
  max-width: 1000px;
  max-height: calc(100vh - 48px);
  background: var(--shell);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  display: grid;
  grid-template-rows: auto auto 1fr;
  overflow: hidden;
}
.yt-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.yt-picker-header h2 {
  font-family: var(--font-display, var(--font-sans));
  font-size: 16px;
  font-weight: 700;
  color: var(--abyss);
  margin: 0;
}
.yt-picker-close {
  background: transparent;
  border: none;
  color: var(--fg-subtle);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}
.yt-picker-close:hover { color: var(--abyss); }

.yt-picker-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.yt-picker-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-muted);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.yt-picker-tab:hover { color: var(--abyss); }
.yt-picker-tab.active {
  background: var(--abyss);
  color: var(--shell);
  border-color: var(--abyss);
}
.yt-picker-tabs-spacer { flex: 1; }
.yt-picker-custom {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 12.5px;
  cursor: pointer;
}
.yt-picker-custom:hover { color: var(--abyss); border-color: var(--surf); }

.yt-picker-body {
  padding: 16px 20px;
  overflow-y: auto;
}
.yt-picker-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px;
  color: var(--fg-muted);
  font-size: 13.5px;
}
.yt-picker-empty,
.yt-picker-error {
  padding: 40px 20px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 13.5px;
  line-height: 1.5;
}
.yt-picker-retry,
.yt-picker-fallback {
  margin: 8px 4px 0;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 12.5px;
  cursor: pointer;
}
.yt-picker-retry:hover,
.yt-picker-fallback:hover { color: var(--abyss); border-color: var(--surf); }

/* --- Producer picker (shares .yt-picker-* chrome) --------------------- */
.producer-picker-search {
  flex: 1;
  min-width: 200px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 13px;
  background: #fff;
  color: var(--abyss);
}
.producer-picker-search:focus {
  outline: none;
  border-color: var(--surf);
  box-shadow: 0 0 0 3px rgba(0, 114, 178, 0.12);
}
.producer-picker-opt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--fg-muted);
  cursor: pointer;
  user-select: none;
  margin-left: 8px;
}
.producer-picker-opt input[type=checkbox] { margin: 0; cursor: pointer; }
.producer-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.producer-picker-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.producer-picker-row:hover {
  border-color: var(--surf);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.producer-picker-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.producer-picker-row-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--abyss);
  line-height: 1.3;
}
.producer-picker-row-meta {
  display: flex;
  gap: 10px;
  font-size: 11.5px;
  color: var(--fg-muted);
  flex-shrink: 0;
  align-items: baseline;
}
.producer-picker-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: rgba(0, 114, 178, 0.12);
  color: var(--surf);
  font-size: 11px;
  font-weight: 600;
}
.producer-picker-badge-muted {
  background: rgba(0, 0, 0, 0.05);
  color: var(--fg-muted);
}
.producer-picker-seed {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--fg-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.producer-picker-snippets {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
  color: var(--fg-muted);
}
.producer-picker-snippet {
  margin: 2px 0;
  line-height: 1.4;
}
.producer-picker-snippet b { color: var(--abyss); }

.yt-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.yt-picker-grid-shorts {
  grid-template-columns: repeat(4, 1fr);
}
.yt-picker-tile {
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.yt-picker-tile:hover {
  border-color: var(--surf);
  transform: translateY(-1px);
}
.yt-picker-thumb-wrap {
  position: relative;
  width: 100%;
  background: #000;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.yt-picker-grid-shorts .yt-picker-thumb-wrap {
  aspect-ratio: 9 / 16;
}
.yt-picker-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.yt-picker-thumb-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--abyss), var(--surf));
}
.yt-picker-duration {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
}
.yt-picker-tile-body {
  padding: 8px 4px 4px;
}
.yt-picker-tile-title {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--abyss);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 3px;
}
.yt-picker-tile-meta {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--fg-subtle);
}

/* =========================================================================
   BLUESKY PICKER — reuses .yt-picker-* modal chrome, adds a text-forward
   card list. Narrower max-width than YouTube since the content is text
   rather than a thumbnail grid.
   ========================================================================= */
.bsky-picker { max-width: 640px; }
.bsky-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bsky-picker-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.bsky-picker-card:hover {
  border-color: var(--surf);
  background: var(--shell);
}
.bsky-picker-card.selected {
  border-color: var(--accent-strong);
  background: var(--shell);
}
.bsky-picker-check {
  margin: 3px 0 0;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent-strong);
}
.bsky-picker-card-body {
  flex: 1;
  min-width: 0;
}
.bsky-picker-text {
  font-size: 14px;
  color: var(--abyss);
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin-bottom: 6px;
}
.bsky-picker-embed {
  font-size: 12px;
  color: var(--fg-muted);
  background: var(--shell);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  margin-bottom: 6px;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bsky-picker-meta {
  font-size: 11.5px;
  color: var(--fg-subtle);
}

/* Reply context — small line above the post body that says who's being
   replied to and quotes a snippet of their post. Muted so it's clearly
   secondary to the actual reply text. */
.bsky-picker-reply-context {
  font-size: 12px;
  color: var(--fg-subtle);
  margin-bottom: 6px;
  line-height: 1.45;
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}
.bsky-picker-reply-arrow {
  color: var(--surf);
  font-weight: 700;
  flex-shrink: 0;
}
.bsky-picker-reply-context b {
  color: var(--fg-muted);
  font-weight: 600;
}
.bsky-picker-reply-snippet {
  color: var(--fg-subtle);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}

/* Self-thread band — sits above the first post of a chain in the feed
   with a checkbox to select the whole thread at once. Cards in the
   same thread carry a left accent so the chain reads as one unit. */
.bsky-picker-thread-band {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surf-tint);
  border: 1px solid var(--surf);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--abyss);
  margin-top: 4px;
  cursor: pointer;
}
.bsky-picker-thread-band.is-selected {
  background: var(--shell);
  border-color: var(--accent-strong);
  border-bottom: 1px dashed var(--accent-strong);
}
.bsky-picker-thread-check {
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent-strong);
}
.bsky-picker-thread-icon { font-size: 14px; line-height: 1; }
.bsky-picker-thread-label {
  flex: 1;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Cards that belong to a self-thread sit flush under the band, with a
   matching left edge, so the visual unit reads as one chain. */
.bsky-picker-card-in-thread {
  border-left: 3px solid var(--surf);
  border-radius: 0;
  margin-left: 0;
}
.bsky-picker-card-in-thread + .bsky-picker-card-in-thread {
  border-top: none;
}
/* When the thread is selected, individual posts in it are dimmed and
   their checkboxes disabled — the thread root covers them. */
.bsky-picker-card-covered {
  opacity: 0.55;
  background: var(--bg-alt);
}
.bsky-picker-card-covered:hover {
  border-color: var(--border);
  background: var(--bg-alt);
  cursor: default;
}
.bsky-picker-card-covered .bsky-picker-check {
  cursor: not-allowed;
}
.bsky-picker-more {
  margin: 14px auto 4px;
  display: block;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 12.5px;
  cursor: pointer;
}
.bsky-picker-more:hover:not(:disabled) { color: var(--abyss); border-color: var(--surf); }
.bsky-picker-more:disabled { opacity: 0.6; cursor: wait; }

.bsky-picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}
.bsky-picker-count {
  font-size: 13px;
  color: var(--fg-muted);
}
.bsky-picker-confirm {
  background: var(--accent-strong);
  color: var(--shell);
  border: 1px solid var(--accent-strong);
  border-radius: var(--radius-pill);
  padding: 7px 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.bsky-picker-confirm:hover:not(:disabled) { opacity: 0.85; }
.bsky-picker-confirm:disabled { opacity: 0.4; cursor: not-allowed; }

/* =========================================================================
   SETTINGS MODAL — prompt editor
   ========================================================================= */

.settings-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 74, 83, 0.55);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
}
.settings-modal {
  width: 100%;
  max-width: 1100px;
  max-height: calc(100vh - 48px);
  background: var(--shell);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  overflow: hidden;
}
.settings-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.settings-modal-header h2 {
  font-family: var(--font-display, var(--font-sans));
  font-size: 18px;
  font-weight: 700;
  color: var(--abyss);
  margin: 0;
}
.settings-scope-note {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 2px;
  max-width: 600px;
}
.settings-scope-note b { color: var(--abyss); font-weight: 700; }
.settings-modal-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.settings-reset-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
}
.settings-reset-btn:hover { color: var(--abyss); border-color: var(--surf); }
.settings-tour-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
}
.settings-tour-btn:hover { color: var(--abyss); border-color: var(--surf); }
.settings-close-btn {
  background: transparent;
  border: none;
  color: var(--fg-subtle);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}
.settings-close-btn:hover { color: var(--abyss); }

.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.settings-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-muted);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.settings-tab:hover { color: var(--abyss); }
.settings-tab.active {
  background: var(--abyss);
  color: var(--shell);
  border-color: var(--abyss);
}

.settings-body {
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 400px;
}
.settings-hint {
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}
.settings-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.settings-textarea {
  width: 100%;
  min-height: 440px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  resize: vertical;
  background: #fbfbfa;
  color: var(--ink);
  white-space: pre-wrap;
}
.settings-textarea:focus {
  outline: none;
  border-color: var(--surf);
  box-shadow: 0 0 0 3px rgba(47, 158, 151, 0.15);
}
.settings-model-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 12px;
  align-items: center;
}
.settings-model-row label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--abyss);
}
.settings-model-row input {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, monospace;
  font-size: 13px;
  background: var(--shell);
  color: var(--fg);
}
.settings-model-row input:focus {
  outline: none;
  border-color: var(--surf);
  box-shadow: 0 0 0 3px rgba(47, 158, 151, 0.15);
}

.settings-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
}
.settings-status {
  margin-right: auto;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--algae, #2e7d32);
}
.settings-cancel {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
}
.settings-cancel:hover { color: var(--abyss); border-color: var(--surf); }
.settings-save {
  padding: 7px 18px;
  font-size: 13px;
}

/* =========================================================================
   TOAST — floating bottom-center snackbar for reversible actions
   ========================================================================= */

.toast {
  position: fixed;
  left: 50%;
  bottom: 48px;
  transform: translate(-50%, 12px);
  opacity: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--abyss);
  color: var(--shell);
  padding: 10px 14px 10px 16px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,0.25));
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  max-width: min(640px, calc(100vw - 32px));
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  pointer-events: auto;
}
.toast-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.toast-body { display: inline-block; }
.toast-body b { font-weight: 700; }
.toast-quote {
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
}
.toast-action {
  background: transparent;
  color: var(--surf-neon, #7be4d0);
  border: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}
.toast-action:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--shell);
}
.toast-close {
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  margin-left: 4px;
}
.toast-close:hover { color: var(--shell); }

/* =========================================================================
   SCROLL-TO-BOTTOM CHIP — shown during streaming when the user has scrolled
   up to read something, so they can jump back to live content
   ========================================================================= */

.pane-center { position: relative; }
.scroll-to-bottom-chip {
  position: absolute;
  right: 20px;
  bottom: 110px; /* clear the composer */
  z-index: 50;
  background: var(--abyss);
  color: var(--shell);
  border: none;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  animation: scrollChipIn 0.14s var(--ease-out);
}
.scroll-to-bottom-chip:hover { background: var(--surf); }
@keyframes scrollChipIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   PHASE-STEPPER CUSTOM TOOLTIP — replaces the native title attribute
   ========================================================================= */

.phase-tooltip {
  position: fixed;
  z-index: 100;
  background: var(--abyss);
  color: var(--shell);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
  font-size: 13px;
  max-width: 300px;
  pointer-events: none;
  animation: phaseTipIn 0.14s var(--ease-out);
}
.phase-tooltip-title {
  color: var(--surf-neon, #7be4d0);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.phase-tooltip-desc {
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}
/* Up-facing caret so the tooltip reads as attached to the stepper item
   sitting in the horizontal strip above. */
.phase-tooltip::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px 5px;
  border-style: solid;
  border-color: transparent transparent var(--abyss) transparent;
}
@keyframes phaseTipIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------------------
   Manual-YouTube-ingest modal. Reuses .settings-modal-backdrop for overlay,
   but the card + guts below are bespoke because the UX (three numbered
   steps + drop zone + textarea + fields) doesn't fit the settings grid.
   --------------------------------------------------------------------------- */
.manual-yt-modal {
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 48px);
  background: var(--shell);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.manual-yt-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.manual-yt-header h2 {
  font-family: var(--font-display, var(--font-sans));
  font-size: 18px;
  font-weight: 700;
  color: var(--abyss);
  margin: 0;
}
.manual-yt-sub {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--fg-muted);
  margin-top: 4px;
  max-width: 520px;
  line-height: 1.5;
}
.manual-yt-close {
  flex-shrink: 0;
}
.manual-yt-body {
  padding: 18px 20px 6px;
  overflow-y: auto;
  font-family: var(--font-sans);
}
.manual-yt-step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.manual-yt-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--abyss);
  color: var(--shell);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.manual-yt-step-title {
  font-weight: 600;
  color: var(--abyss);
  font-size: 13.5px;
  margin-bottom: 4px;
}
.manual-yt-hint {
  font-size: 12px;
  color: var(--fg-muted);
  margin-bottom: 6px;
}
.manual-yt-hint-muted {
  font-size: 11.5px;
  margin-top: 4px;
  margin-bottom: 0;
}
.manual-yt-hint a { color: var(--abyss); }
.manual-yt-hint code {
  background: var(--bg-alt);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}
.manual-yt-code-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-bottom: 2px;
}
.manual-yt-code {
  flex: 1;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
  overflow-x: auto;
}
.manual-yt-code-long { font-size: 11.5px; }
.manual-yt-copy {
  background: var(--shell);
  border: 1px solid var(--border);
  color: var(--abyss);
  padding: 0 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
}
.manual-yt-copy:hover {
  background: var(--abyss);
  color: var(--shell);
}
.manual-yt-drop {
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  text-align: center;
  background: var(--bg-alt);
  margin-bottom: 8px;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.manual-yt-drop.is-dragover {
  border-color: var(--abyss);
  background: var(--shell);
}
.manual-yt-drop-text {
  font-size: 12.5px;
  color: var(--fg-muted);
  margin-bottom: 8px;
}
.manual-yt-drop-text b { color: var(--ink); font-weight: 600; }
.manual-yt-pick {
  background: var(--shell);
  border: 1px solid var(--border);
  color: var(--abyss);
  padding: 5px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.manual-yt-pick:hover {
  background: var(--abyss);
  color: var(--shell);
}
.manual-yt-textarea {
  width: 100%;
  min-height: 120px;
  max-height: 260px;
  resize: vertical;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--shell);
  color: var(--ink);
  line-height: 1.5;
  box-sizing: border-box;
}
.manual-yt-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.manual-yt-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--fg-muted);
}
.manual-yt-field input {
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--shell);
  color: var(--ink);
}
.manual-yt-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
}
.manual-yt-details {
  margin: 4px 0 12px;
  font-size: 12px;
  color: var(--fg-muted);
}
.manual-yt-details summary {
  cursor: pointer;
  padding: 4px 0;
}
.manual-yt-stderr {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 11px;
  white-space: pre-wrap;
  max-height: 140px;
  overflow-y: auto;
}
.manual-yt-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
}
.manual-yt-status {
  flex: 1;
  font-size: 12px;
  color: var(--fg-muted);
  text-align: left;
}
.manual-yt-cancel {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
}
.manual-yt-cancel:hover { background: var(--bg-alt); color: var(--abyss); }
.manual-yt-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ingesting-manual {
  margin-right: 2px;
}

/* Helper section at top of the manual-YouTube modal. Primary CTA when
   the helper is running + yt-dlp ok; instructions otherwise. */
.manual-yt-helper {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 16px;
}
.manual-yt-helper-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.manual-yt-helper-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--abyss);
}
.manual-yt-helper-sub {
  font-weight: 400;
  color: var(--fg-muted);
  font-size: 12px;
}
.manual-yt-helper-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--border);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.03);
}
.manual-yt-helper-dot[data-state="ok"]    { background: #2e7d32; box-shadow: 0 0 0 3px rgba(46,125,50,0.15); }
.manual-yt-helper-dot[data-state="warn"]  { background: #b35d00; box-shadow: 0 0 0 3px rgba(234,145,59,0.15); }
.manual-yt-helper-dot[data-state="off"]   { background: var(--fg-subtle); }
.manual-yt-helper-dot[data-state="loading"] {
  background: var(--fg-subtle);
  animation: helperDotPulse 1.2s ease-in-out infinite;
}
@keyframes helperDotPulse {
  0%,100% { opacity: 0.45; }
  50%     { opacity: 1; }
}
.manual-yt-helper-refresh {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
}
.manual-yt-helper-refresh:hover { color: var(--abyss); border-color: var(--surf); }
.manual-yt-helper-body {
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.5;
}
.manual-yt-helper-lead { margin-bottom: 8px; }
.manual-yt-helper-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.manual-yt-helper-go {
  padding: 8px 18px;
  font-size: 13px;
}
.manual-yt-helper-go:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.manual-yt-helper-progress {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--fg-muted);
  font-style: italic;
}
.manual-yt-or {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 6px 0 16px;
}
.manual-yt-or::before,
.manual-yt-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ===========================================================================
 * Paper-suggestion chip + hover tooltip
 *
 * Inline chip styling for `<a.paper-suggestion-link>` anchors the LLM
 * emits mid-draft. The chip stays readable as prose (still underlined
 * like a normal link) but picks up a subtle amber tint and a 📄 badge
 * so it's visually distinct from accepted / published links. The
 * hover tooltip lives at the document level (absolutely positioned)
 * with Title · Authors · Justification · Accept / Reject actions.
 * ===========================================================================*/
.paper-suggestion-link {
  background: rgba(234, 179, 8, 0.10);
  border-bottom: 1px dashed rgba(180, 83, 9, 0.55);
  text-decoration: none;
  padding: 0 2px;
  border-radius: 2px;
  color: inherit;
  transition: background var(--dur-fast) var(--ease-out);
}
.paper-suggestion-link:hover {
  background: rgba(234, 179, 8, 0.22);
}
.paper-suggestion-badge {
  display: inline-block;
  margin-left: 3px;
  font-size: 0.8em;
  opacity: 0.7;
  vertical-align: baseline;
}
.paper-suggestion-link:hover .paper-suggestion-badge { opacity: 1; }

.paper-suggestion-tooltip {
  position: absolute;
  z-index: 9999;
  max-width: 360px;
  min-width: 260px;
  background: var(--shell);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg);
}
.paper-tip-header {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b45309;
  margin-bottom: 4px;
}
.paper-tip-title {
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 3px;
}
.paper-tip-authors {
  font-size: 12px;
  color: var(--fg-muted);
  margin-bottom: 8px;
}
.paper-tip-justification {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--fg);
  padding: 8px 10px;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  line-height: 1.5;
}
.paper-tip-url { margin-bottom: 10px; }
.paper-tip-url a {
  font-size: 12px;
  color: var(--surf);
  text-decoration: underline;
}
.paper-tip-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.paper-tip-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.paper-tip-btn:hover { border-color: var(--surf); }
.paper-tip-accept {
  background: var(--algae, #2e7d32);
  border-color: var(--algae, #2e7d32);
  color: var(--shell);
}
.paper-tip-accept:hover { background: #276528; border-color: #276528; }
.paper-tip-reject:hover {
  background: var(--coral-tint);
  border-color: var(--coral);
  color: var(--coral);
}

/* ===========================================================================
 * Link-check cards in the fact-check pane
 * ===========================================================================*/
.factcheck-links-section {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--border);
}
.factcheck-links-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.factcheck-links-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.factcheck-links-progress {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-muted);
}
.factcheck-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.factcheck-link {
  background: var(--shell);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  position: relative;
}
.factcheck-link-paper {
  border-left: 3px solid #b45309;
}
.factcheck-link-pending-check { opacity: 0.8; }
.factcheck-link-keep, .factcheck-link-accept-paper {
  border-left: 3px solid var(--algae, #2e7d32);
}
.factcheck-link-drop, .factcheck-link-reject-paper {
  border-left: 3px solid var(--coral);
  opacity: 0.85;
}

.factcheck-link-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 6px;
  font-family: var(--font-sans);
  font-size: 11.5px;
}
.factcheck-link-status {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.factcheck-link-status-verified {
  background: rgba(46, 125, 50, 0.15);
  color: var(--algae, #2e7d32);
}
.factcheck-link-status-broken {
  background: var(--coral-tint);
  color: var(--coral);
}
.factcheck-link-status-mismatch {
  background: var(--coral-tint);
  color: var(--coral);
}
.factcheck-link-status-uncertain {
  background: rgba(234, 179, 8, 0.15);
  color: #b45309;
}
.factcheck-link-status-pending {
  background: var(--bg-alt);
  color: var(--fg-subtle);
}
.factcheck-link-confidence, .factcheck-link-http {
  color: var(--fg-subtle);
  font-weight: 500;
}
.factcheck-link-anchor {
  font-size: 12.5px;
  color: var(--fg-muted);
  margin-bottom: 2px;
  font-style: italic;
}
.factcheck-link-url {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--surf);
  text-decoration: underline;
  margin-bottom: 8px;
  word-break: break-all;
}
.factcheck-link-paper-meta {
  margin: 8px 0;
  padding: 10px 12px;
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(180, 83, 9, 0.25);
  border-radius: var(--radius-sm);
}
.factcheck-link-paper-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b45309;
  margin-bottom: 4px;
}
.factcheck-link-paper-title {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.factcheck-link-paper-authors {
  font-size: 12.5px;
  color: var(--fg-muted);
  margin-top: 2px;
}
.factcheck-link-paper-justification {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--fg);
  margin-top: 6px;
  line-height: 1.5;
}
.factcheck-link-paragraph {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--fg-muted);
  border-left: 3px solid var(--border);
  padding: 2px 12px;
  margin: 6px 0 10px 0;
  line-height: 1.5;
}
.factcheck-link-finding {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg);
  padding: 10px 12px;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.factcheck-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--sp-2);
}
.factcheck-link-action {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.factcheck-link-action:hover { border-color: var(--surf); }
.factcheck-link-action.active {
  background: var(--abyss);
  color: var(--shell);
  border-color: var(--abyss);
}
.factcheck-link-action-accept.active {
  background: var(--algae, #2e7d32);
  border-color: var(--algae, #2e7d32);
}
.factcheck-link-action-dismiss.active {
  background: var(--coral);
  border-color: var(--coral);
}
.factcheck-link-verdict-banner {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-muted);
  font-weight: 600;
}

/* ===========================================================================
   IMAGES PANE — Phase 7 (between Fact Check and Done).
   Grid of ranked photo + art candidates the user toggles to pick.
   =========================================================================== */
.images-pane {
  padding: var(--sp-4);
  font-family: var(--font-sans);
}
.images-header { margin-bottom: var(--sp-4); }
.images-subtitle {
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.5;
  margin-top: 4px;
}
.images-empty {
  padding: var(--sp-4);
  text-align: center;
  color: var(--fg-muted);
  font-size: 14px;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
}
.images-empty p { margin: 0 0 12px; }
.images-error {
  padding: var(--sp-4);
  background: rgba(204, 67, 67, 0.08);
  border: 1px solid rgba(204, 67, 67, 0.35);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 13px;
  margin-bottom: var(--sp-4);
}
.images-error p { margin: 0 0 8px; }
.images-working {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  color: var(--fg-muted);
  font-size: 13px;
  font-style: italic;
}

/* User-guidance textarea — sits above the themes block. Visually quiet
   so it doesn't compete with the picks grid; tightens its border on
   focus so it feels like a dedicated input, not just decoration. */
.images-guidance {
  margin-bottom: var(--sp-4);
}
.images-guidance-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 6px;
}
.images-guidance-optional {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-muted);
  font-style: italic;
}
.images-guidance-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--shell);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  resize: vertical;
  min-height: 50px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.images-guidance-input::placeholder {
  color: var(--fg-subtle);
  font-style: italic;
}
.images-guidance-input:focus {
  outline: none;
  border-color: var(--surf);
  box-shadow: 0 0 0 2px var(--surf-tint-weak, rgba(168, 236, 239, 0.35));
}

.images-themes {
  margin-bottom: var(--sp-5);
  padding: var(--sp-4);
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.images-emotion {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  margin: 8px 0;
}
.images-theme-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.images-theme-list li {
  font-size: 13px;
  line-height: 1.45;
}
.images-theme-name {
  font-weight: 600;
  color: var(--abyss);
  margin-right: 6px;
}
.images-theme-why { color: var(--fg-muted); }
.images-queries {
  margin-top: 12px;
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.9;
}
.images-queries-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--fg-subtle);
  margin-right: 8px;
}
.images-query-chip {
  display: inline-block;
  padding: 3px 9px;
  background: var(--shell);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--ink);
  margin-right: 4px;
}
.images-query-chip em {
  font-style: normal;
  color: var(--fg-subtle);
  margin-left: 2px;
  font-size: 10.5px;
}

.images-results-label {
  margin-top: var(--sp-2);
  margin-bottom: 10px;
}

.images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: var(--sp-4);
}
.image-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  background: var(--shell);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  font-family: inherit;
  color: inherit;
}
.image-card:hover {
  border-color: var(--surf);
  transform: translateY(-1px);
}
.image-card-chosen {
  border-color: var(--abyss);
  box-shadow: 0 0 0 3px var(--surf-tint-weak, rgba(168, 236, 239, 0.4));
}
.image-card-chosen::after {
  content: '✓';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--abyss);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.image-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
  overflow: hidden;
}
.image-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.image-card-score {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.68);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--font-sans);
}
.image-card-why {
  padding: 7px 9px 9px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink);
}

/* Photographer / source credit running along the right edge of the photo
   from bottom to top — reads with a head-tilt. Deliberately light: small,
   low-contrast, soft text-shadow for legibility on any background.
   `writing-mode: vertical-rl` turns the text vertically; `transform:
   rotate(180deg)` flips it so the baseline runs bottom-to-top. */
.image-card-credit {
  position: absolute;
  top: 6px;
  right: 3px;
  bottom: 6px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.55), 0 0 6px rgba(0, 0, 0, 0.35);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-height: 100%;
  padding: 0 1px;
  z-index: 2;
  transition: color var(--dur-fast) var(--ease-out);
}
.image-card-credit:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.image-card-credit-plain {
  pointer-events: none;
}

.images-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

/* Chosen images surfaced on the Done pane. */
.done-picked-images {
  margin-bottom: var(--sp-5);
}
.done-picked-images-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.done-picked-image {
  position: relative;
  width: 140px;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--shell);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.done-picked-image:hover { border-color: var(--surf); }
.done-picked-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
/* Vertical credit overlay matches the .image-card-credit treatment from
   the picker so the credit convention is consistent across both panes. */
.done-picked-image .image-card-credit {
  top: 5px;
  right: 2px;
  bottom: 5px;
}

/* Tiny "placing photos…" status text rendered inside the picks-row label
   while the imagePlacements LLM call is in flight. */
.done-picked-images-status {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--text-muted, #777);
  margin-left: var(--sp-2);
}

/* Inline photo figures — interleaved into the Final Draft prose at the
   paragraph indices the model returned. Each figure carries its own
   Economist-style caption picker (six alternatives + a "write your own"
   input) below the image, with photographer credit on the right. */
.done-inline-photo {
  margin: var(--sp-5) 0;
  padding: 0;
  display: block;
}
.done-inline-photo-img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-sm);
  background: var(--shell);
}
.done-inline-photo-caption {
  margin-top: var(--sp-2);
  font-family: var(--font-serif, Georgia, serif);
  font-size: 0.95em;
  line-height: 1.35;
  color: var(--text-muted, #555);
}
.caption-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.caption-text {
  font-style: italic;
  font-weight: 500;
  color: var(--text, #222);
  flex: 1 1 auto;
}
.caption-text-custom::after {
  content: " ✎";
  font-style: normal;
  font-size: 0.85em;
  color: var(--text-muted, #999);
  margin-left: 4px;
}
.caption-pending {
  font-style: italic;
  color: var(--text-muted, #888);
}
.caption-edit {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted, #777);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.caption-edit:hover {
  color: var(--text, #222);
  border-color: var(--text-muted, #777);
}

/* Caption picker — opens below the caption row when "change ▾" is clicked.
   Six alternatives stacked as full-width buttons; custom input below. */
.caption-picker {
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  background: var(--shell);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.caption-picker[hidden] { display: none; }
.caption-picker-label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #777);
  margin-bottom: var(--sp-2);
}
.caption-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.caption-options li { margin: 0; }
.caption-option {
  width: 100%;
  text-align: left;
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  font-size: 0.95em;
  color: var(--text, #222);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.caption-option:hover {
  background: var(--surf, #f5f3ee);
  border-color: var(--border);
}
.caption-option.active {
  background: var(--surf, #f5f3ee);
  border-color: var(--accent, #c9a227);
  font-weight: 600;
}
.caption-custom-row {
  margin-top: var(--sp-3);
  display: flex;
  gap: var(--sp-2);
  align-items: stretch;
}
.caption-custom-input {
  flex: 1 1 auto;
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  font-size: 0.95em;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--shell);
  color: var(--text, #222);
}
.caption-custom-input:focus {
  outline: none;
  border-color: var(--accent, #c9a227);
}
.caption-custom-save {
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text, #222);
  background: var(--shell);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  cursor: pointer;
}
.caption-custom-save:hover { border-color: var(--text-muted, #777); }

.done-inline-photo-credit-row {
  margin-top: var(--sp-1);
  font-family: var(--font-sans);
  font-size: 0.78em;
  letter-spacing: 0.02em;
  color: var(--text-muted, #777);
  text-align: right;
}
.done-inline-photo-credit-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.done-inline-photo-credit-link:hover { color: var(--text, #222); }

/* =========================================================================
   RESPONSIVE — tablet / mobile / foldable adaptations
   -------------------------------------------------------------------------
   Everything below is ADDITIVE. The desktop experience (viewport ≥1200px
   AND a hover-capable pointer) sees none of these rules evaluate, so the
   laptop layout is byte-identical to the pre-change version.

   Breakpoints:
     ≥1200px           — desktop, iPad landscape, iPad Pro landscape,
                         Pixel Fold open landscape (unchanged)
     900–1199px        — iPad portrait, iPad Pro portrait
                         (three panes still visible, just tighter)
     600–899px         — Pixel Fold open, iPhone landscape, small tablets
                         (left pane becomes a drawer; right stays inline)
     ≤599px            — iPhones portrait, Pixel Fold front screen
                         (single-pane; left = drawer, right = slide-over)
   ========================================================================= */

/* ---- Mobile-only topbar buttons: hidden on desktop --------------------- */
.drafts-btn-mobile { display: none; }

/* ---- Backdrop that closes whichever overlay is open ------------------- */
.pane-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 74, 83, 0.45);
  backdrop-filter: blur(2px);
  z-index: 190;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out);
}
.pane-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}
.pane-backdrop[hidden] { display: block; }

/* ---- Safe-area insets (no-op on non-notched devices) ------------------ */
.topbar { padding-top: calc(var(--sp-3) + env(safe-area-inset-top)); }
.statusbar { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }

/* =========================================================================
   OPEN-SESSIONS POPOVER
   Anchored under the "Open" button in the topbar. Houses the session
   category filter, search box, and recent-sessions list.
   ========================================================================= */
.open-popover {
  position: fixed;
  z-index: 220;
  /* Two-pane chooser at desktop widths. The width is wide enough to fit
     a 320px list column plus a roomy preview, but clamps to the viewport
     so it stays usable on iPad portrait and below. */
  width: min(880px, calc(100vw - 24px));
  max-height: min(640px, calc(100dvh - 96px));
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 44px rgba(11, 11, 10, 0.18),
              0 0 0 1px rgba(0, 0, 0, 0.04);
  /* Each column scrolls on its own — outer overflow stays clipped so the
     border-radius isn't broken by inner scrollbars. */
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: row;
  animation: openPopIn 0.14s var(--ease-out);
}
.open-popover[hidden] { display: none; }
.open-popover .sessions {
  flex: 0 0 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--sp-3);
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.open-popover .session-list {
  padding: 0;
  margin: 0;
  flex: 1;
  overflow-y: auto;
  /* Pad the bottom so the last row doesn't visually crash into the popover
     corner when the list scrolls all the way down. */
  padding-bottom: var(--sp-2);
}
.open-popover .category-picker { margin-bottom: var(--sp-2); }
.open-popover .session-search { flex: 0 0 auto; }

/* ---- Right preview pane (desktop) ---- */
.open-preview {
  flex: 1 1 0;
  min-width: 0;
  background: var(--bg-alt);
  overflow-y: auto;
  padding: var(--sp-5) var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
}
.open-preview-empty {
  margin: auto;
  text-align: center;
  color: var(--fg-subtle);
  max-width: 280px;
  padding: var(--sp-4);
}
.open-preview-empty-icon {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-3);
  color: var(--surf);
  opacity: 0.6;
}
.open-preview-empty-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-muted);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.open-preview-empty-sub {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-subtle);
}

.open-preview-body { color: var(--fg); }
.open-preview-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--abyss);
  margin: 0 0 var(--sp-3);
}
.open-preview-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--sp-3);
}
.open-preview-badge {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--shell);
  color: var(--fg-muted);
  border: 1px solid var(--border);
}
.open-preview-badge.is-phase {
  background: var(--surf-tint);
  color: var(--abyss);
  border-color: transparent;
}
.open-preview-times {
  font-size: 12.5px;
  color: var(--fg-subtle);
  line-height: 1.6;
  margin-bottom: var(--sp-3);
  font-variant-numeric: tabular-nums;
}
.open-preview-times div + div { margin-top: 2px; }
.open-preview-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.open-preview-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.open-preview-stat-num {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--abyss);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.open-preview-stat-lbl {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
  font-weight: 600;
}
.open-preview-snippet {
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-muted);
  font-style: italic;
  /* Generous height — the preview pane scrolls if a session has a long
     snippet, so we don't truncate. */
  white-space: pre-wrap;
}
.open-preview-trashed {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  font-size: 12px;
  color: var(--coral);
  background: var(--coral-tint);
  border-radius: var(--radius-sm);
}

/* On narrower viewports we collapse the preview pane and revert to the
   compact single-column popover. The floating .session-tooltip below
   then takes over for hover details. */
@media (max-width: 1099px) {
  .open-popover {
    width: min(440px, calc(100vw - 24px));
    max-height: min(560px, calc(100dvh - 96px));
  }
  .open-popover .sessions {
    flex: 1 1 auto;
    border-right: none;
  }
  .open-preview { display: none; }
}

@keyframes openPopIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Open-button caret affordance — small chevron after the label. */
#btn-open .btn-open-caret {
  font-size: 10px;
  opacity: 0.8;
  margin-left: 2px;
}
#btn-open[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
}

/* =========================================================================
   Medium viewport: 900–1199px (iPad portrait, iPad Pro portrait)
   Still three panes — just give them room to breathe.
   ========================================================================= */
@media (max-width: 1199px) {
  .workspace {
    grid-template-columns: 1fr 6px var(--right-pane-width, 360px);
  }
  .conversation { padding: var(--sp-5) var(--sp-5); }
  .phases-bar { padding: var(--sp-2) var(--sp-4); }
  .draft-body { padding: var(--sp-4); }
  .topbar { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .brand-name { font-size: 32px; }
  .brand-icon { height: 38px; }
  .brand-stack { height: 32px; width: 32px; }
  .phase-list li { font-size: 13px; padding: 5px 10px; }
  .input-modes { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); }
  .msg-bubble { max-width: 560px; }
}

/* =========================================================================
   Small viewport: 600–899px (Pixel Fold open, iPhone landscape, small tablet)
   Center + right stay inline. The Open popover handles sessions.
   ========================================================================= */
@media (max-width: 899px) {
  .workspace {
    grid-template-columns: 1fr 6px var(--right-pane-width, 300px);
  }
  /* Pin actions right so brand stays anchored on the left. */
  .topbar-actions { margin-left: auto; }

  /* Expand the pane-resizer's touch target without changing its visible width. */
  .pane-resizer::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -10px; right: -10px;
  }

  .conversation { padding: var(--sp-4) var(--sp-4); }
  .draft-body { padding: var(--sp-4); }
  .welcome { padding-top: var(--sp-5); }
  .input-modes { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); }
  .mode-btn { min-height: 152px; padding: var(--sp-4); }
  .mode-icon { width: 38px; height: 38px; }
  .mode-icon svg { width: 24px; height: 24px; }

  .topbar { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .brand-name { font-size: 26px; }
  .brand-icon { height: 34px; }
  .brand-stack { display: none; }
  .brand-version { display: none; }

  .msg-bubble { max-width: 520px; }
}

/* =========================================================================
   Extra-small viewport: ≤599px (iPhones, Pixel Fold front)
   Single-pane. Left = drawer, right = slide-over, pane-resizer hidden.
   ========================================================================= */
@media (max-width: 599px) {
  .workspace {
    grid-template-columns: 1fr;
  }

  .pane-resizer { display: none; }

  .pane-right {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(420px, 100vw);
    height: 100%;
    height: 100dvh;
    z-index: 200;
    background: var(--bg);
    border-left: 1px solid var(--border);
    border-right: none;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.14);
    transform: translateX(100%);
    transition: transform var(--dur-med) var(--ease-out);
    overflow-y: auto;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .pane-right.slideover-open { transform: translateX(0); }

  .drafts-btn-mobile { display: inline-flex; }

  .topbar {
    padding-left: var(--sp-2);
    padding-right: var(--sp-2);
    min-height: 56px;
    gap: var(--sp-1);
  }
  .brand { gap: var(--sp-2); padding: 2px var(--sp-1); }
  .brand-name { font-size: 22px; }
  .brand-icon { height: 30px; }
  .topbar-actions { gap: var(--sp-1); }
  .topbar-actions #btn-new {
    padding: 8px 10px;
    font-size: 0;
    min-width: 40px;
    justify-content: center;
  }
  .topbar-actions #btn-new::before {
    content: "＋";
    font-size: 20px;
    line-height: 1;
  }

  .conversation { padding: var(--sp-3) var(--sp-4); }
  .welcome { padding-top: var(--sp-4); }
  .welcome h2 { font-size: clamp(36px, 10vw, 56px); }
  .welcome p { font-size: var(--fs-body); max-width: none; }
  .welcome-scope { font-size: 12px !important; }
  .input-modes {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
  }
  .mode-btn { padding: var(--sp-3); min-height: 0; gap: 4px; }
  .mode-icon { width: 32px; height: 32px; margin-bottom: 4px; }
  .mode-icon svg { width: 20px; height: 20px; }
  .mode-btn .mode-title { font-size: 14px; }
  .mode-btn .mode-tagline { font-size: 12px; }
  .mode-btn .mode-desc { font-size: 12px; }

  /* Composer — iOS home-indicator safe-area + 16px font to suppress auto-zoom. */
  .composer {
    padding: var(--sp-2) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom));
  }
  .composer textarea {
    font-size: 16px;
    padding: 10px var(--sp-3);
    min-height: 44px;
  }
  .composer-actions { gap: 6px; }
  .primary-btn { padding: 10px 16px; }

  .advance-btn {
    padding: 7px 10px;
    font-size: 12px;
    white-space: nowrap;
    max-width: 56vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .msg-bubble { max-width: calc(100vw - var(--sp-6)); }

  /* Draft tabs scroll horizontally rather than wrap / crush. */
  .draft-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .draft-tabs::-webkit-scrollbar { display: none; }
  .draft-tab {
    flex: none;
    white-space: nowrap;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .draft-tab-history { margin-left: 0; }

  .draft-body { padding: var(--sp-4) var(--sp-4); font-size: 15px; }
  .draft-para.draft-headline { font-size: 24px; }
  .draft-para.draft-subtitle { font-size: 15px; }

  .phases-bar { padding: var(--sp-2) var(--sp-3); }
  .phase-list li { padding: 5px 9px; font-size: 12.5px; }

  /* The Open button collapses to icon-only on phones to save space; the
     full label is shown in the popover that drops down on tap. */
  .topbar-actions #btn-open .btn-open-label,
  .topbar-actions #btn-open .btn-open-caret { display: none; }
  .topbar-actions #btn-open {
    padding: 8px 10px;
    min-width: 40px;
    justify-content: center;
  }

  .statusbar { padding: 4px var(--sp-3) calc(4px + env(safe-area-inset-bottom)); }
  .status-updated { display: none; }

  .yt-picker-backdrop { padding: 12px; }
  .yt-picker { max-height: calc(100dvh - 24px); }

  .comment-popover {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
  }

  /* Hover-triggered tooltips are irrelevant on a touch device with no
     hover state — they'd either never appear or get stuck. Hide them. */
  .session-tooltip { display: none !important; }
  .phase-tooltip { display: none !important; }
}

/* Scroll-lock body while a mobile overlay (drawer / slide-over) is open.
   Applies at every breakpoint where overlays can open. */
body.overlay-open { overflow: hidden; }

/* =========================================================================
   Dynamic viewport height for full-screen modals (iOS address bar fix)
   ========================================================================= */
@supports (height: 100dvh) {
  .yt-picker { max-height: calc(100dvh - 48px); }
}

/* =========================================================================
   Hover-only affordances: downgrade on touch/pen devices so they're
   still visible and reachable without a mouse.
   ========================================================================= */
@media (hover: none) {
  .session-delete { opacity: 0.55; }
  .research-item-actions { opacity: 1; }
  .draft-para-edit-btn { opacity: 0.6; }
  .paper-suggestion-badge { opacity: 1; }
  .pane-resizer:hover::before { background: var(--border); }
}

/* Bigger minimum touch targets on coarse-pointer devices. */
@media (hover: none) and (pointer: coarse) {
  .icon-btn.icon-only { min-width: 44px; min-height: 44px; }
  .draft-tab { min-height: 44px; }
  .phase-list li { min-height: 36px; }
  .session-item { padding: 10px var(--sp-3); }
}

/* ============================================================================
   ONBOARDING TOUR
   First-run coachmark sequence. Backdrop dims everything; the highlighted
   element is lifted above it via a temporary class (.tour-highlight) plus a
   glow ring; a callout panel docks near the target with Skip/Back/Next.
   Replayable from Settings → "Replay tour".
   ========================================================================== */
.tour-root { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
.tour-root[hidden] { display: none; }
.tour-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 24, 28, 0.55);
  pointer-events: auto;
  animation: tour-fade-in 160ms ease-out;
}
@keyframes tour-fade-in { from { opacity: 0; } to { opacity: 1; } }
.tour-highlight {
  position: relative !important;
  z-index: 9100 !important;
  box-shadow: 0 0 0 4px var(--accent-neon, #5dc7d8),
              0 0 0 9999px rgba(8, 24, 28, 0.55);
  border-radius: 8px;
  transition: box-shadow 200ms ease-out;
}
.tour-callout {
  position: absolute;
  z-index: 9200;
  background: var(--bg, #fff);
  color: var(--fg, #1b2426);
  border: 1px solid var(--border, #e2e6e6);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  padding: 18px 20px 14px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: auto;
  animation: tour-pop 200ms ease-out;
}
@keyframes tour-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tour-step {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle, #5a6467);
  margin-bottom: 6px;
}
.tour-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--accent-strong, #083940);
}
.tour-body {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-muted, #3a4347);
}
.tour-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tour-spacer { flex: 1; }
.tour-skip {
  background: none;
  border: 0;
  color: var(--fg-subtle, #5a6467);
  font-size: 13px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
}
.tour-skip:hover { background: var(--bg-alt, #f5f7f7); color: var(--fg, #1b2426); }
.tour-back {
  background: none;
  border: 1px solid var(--border, #e2e6e6);
  color: var(--fg, #1b2426);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.tour-back:hover { background: var(--bg-alt, #f5f7f7); }
.tour-back[hidden] { display: none; }
.tour-next { font-size: 13px; padding: 6px 14px; }

/* ---------------------------------------------------------------------------
   Video-input modal. Reuses .settings-modal-backdrop for the overlay;
   bespoke chrome for the tabbed card (Paste / Upload transcript / Upload
   video). Visual language matches .manual-yt-modal.
   --------------------------------------------------------------------------- */
.video-input-modal {
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 48px);
  background: var(--shell);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.video-input-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.video-input-header h2 {
  font-family: var(--font-display, var(--font-sans));
  font-size: 18px;
  font-weight: 700;
  color: var(--abyss);
  margin: 0;
}
.video-input-sub {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--fg-muted);
  margin-top: 4px;
  max-width: 520px;
  line-height: 1.5;
}
.video-input-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 16px 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.video-input-tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-muted);
  cursor: pointer;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  position: relative;
  top: 1px;
}
.video-input-tab:hover { color: var(--abyss); }
.video-input-tab.active {
  background: var(--shell);
  border-color: var(--border);
  color: var(--abyss);
}
.video-input-body {
  padding: 18px 20px 8px;
  overflow-y: auto;
  font-family: var(--font-sans);
}
.video-input-pane { display: none; }
.video-input-pane.active { display: block; }
.video-input-textarea {
  width: 100%;
  min-height: 180px;
  max-height: 340px;
  resize: vertical;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--shell);
  color: var(--ink);
  line-height: 1.5;
  box-sizing: border-box;
}
.video-input-drop {
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 22px 14px;
  text-align: center;
  background: var(--bg-alt);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.video-input-drop.is-dragover {
  border-color: var(--abyss);
  background: var(--shell);
}
.video-input-drop-text {
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 4px;
  font-weight: 600;
}
.video-input-drop-hint {
  font-size: 11.5px;
  color: var(--fg-muted);
  margin-bottom: 10px;
  line-height: 1.5;
}
.video-input-pick {
  background: var(--shell);
  border: 1px solid var(--border);
  color: var(--abyss);
  padding: 5px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.video-input-pick:hover {
  background: var(--abyss);
  color: var(--shell);
}
.video-input-drop-selected {
  margin-top: 10px;
  font-size: 12px;
  color: var(--abyss);
  font-weight: 600;
}
.video-input-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.video-input-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--fg-muted);
}
.video-input-field > span {
  font-weight: 600;
  color: var(--ink);
}
.video-input-field input,
.video-input-field textarea {
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--shell);
  color: var(--ink);
}
.video-input-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
}
.video-input-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
}
.video-input-status {
  flex: 1;
  font-size: 12px;
  color: var(--fg-muted);
  text-align: left;
}
.video-input-cancel {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
}
.video-input-cancel:hover { background: var(--bg-alt); color: var(--abyss); }
.video-input-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =========================================================================
   SESSION CATEGORY PICKER (left-pane pill row)
   ========================================================================= */
.category-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 6px;
  margin: 0 0 8px;
}
.category-pill {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg-muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.3;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.category-pill:hover {
  background: var(--bg-alt);
  color: var(--fg);
}
.category-pill.active {
  background: var(--surf);
  color: var(--fg-on-dark, #fff);
  border-color: var(--surf);
}
.category-pill-trash { opacity: 0.8; }
.category-pill-trash.active {
  background: var(--coral, #c4583f);
  border-color: var(--coral, #c4583f);
}

/* Hover-revealed "move to…" control on each session-item (sits next to the
   delete icon). The menu itself is a fixed-positioned popover injected by
   app.js so it can escape the overflow:auto sidebar. */
.session-move {
  background: transparent;
  border: none;
  color: var(--fg-subtle);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-xs);
  opacity: 0;
  font-size: 14px;
  line-height: 1;
  transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.session-item:hover .session-move,
.session-move:focus-visible,
.session-move[aria-expanded="true"] { opacity: 1; }
.session-move:hover { background: var(--surf-tint); color: var(--fg); }

.session-move-menu {
  position: fixed;
  z-index: 220;
  min-width: 180px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  padding: 4px;
  font-size: 13px;
}
.session-move-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--fg);
  padding: 7px 10px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
}
.session-move-menu button:hover { background: var(--bg-alt); }
.session-move-menu button:disabled {
  color: var(--fg-subtle);
  cursor: default;
  background: transparent;
}
.session-move-menu button.danger { color: var(--coral, #c4583f); }
.session-move-menu .menu-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 2px;
}

/* Trash-specific badge + retention hint on trashed session items ---------- */
.session-trashed-hint {
  font-size: 11px;
  color: var(--fg-subtle);
  margin-top: 3px;
  font-style: italic;
}

/* =========================================================================
   IDEAS NOTEPAD (modal, top-bar "Ideas" button opens this)
   ========================================================================= */
.ideas-root[hidden] { display: none !important; }
.ideas-root {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ideas-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 74, 83, 0.42);
  backdrop-filter: blur(2px);
}
.ideas-panel {
  position: relative;
  width: min(680px, 94vw);
  max-height: min(80vh, 720px);
  background: var(--bg);
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ideas-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.ideas-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
}
.ideas-status {
  font-size: 12px;
  color: var(--fg-subtle);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  min-width: 60px;
  text-align: right;
}
.ideas-close {
  font-size: 22px;
  line-height: 1;
  padding: 2px 10px 4px;
}
.ideas-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 8px 10px 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  flex-wrap: nowrap;
}
.ideas-tab {
  appearance: none;
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  color: var(--fg-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  bottom: -1px;
}
.ideas-tab:hover { background: var(--bg-alt); color: var(--fg); }
.ideas-tab.active {
  background: var(--bg);
  border-color: var(--border);
  color: var(--fg);
}
.ideas-tab .tab-rename {
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: text;
  min-width: 40px;
}
.ideas-tab-close {
  background: transparent;
  border: none;
  color: var(--fg-subtle);
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  font-size: 14px;
  opacity: 0;
}
.ideas-tab:hover .ideas-tab-close,
.ideas-tab.active .ideas-tab-close { opacity: 0.7; }
.ideas-tab-close:hover { color: var(--coral); opacity: 1; }
.ideas-tab-add {
  appearance: none;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--fg-subtle);
  font: inherit;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  align-self: center;
  margin-left: 4px;
  margin-bottom: 2px;
}
.ideas-tab-add:hover { color: var(--fg); border-color: var(--fg-subtle); }

.ideas-body {
  padding: 12px 16px 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 240px;
}
.ideas-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.idea-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 6px 6px 4px;
  border-radius: var(--radius-xs);
  position: relative;
}
.idea-item:hover { background: var(--bg-alt); }
.idea-check {
  margin-top: 3px;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--surf);
}
.idea-text {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--fg);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  padding: 2px 0;
  resize: none;
  outline: none;
  overflow: hidden;
  word-break: break-word;
}
.idea-item.checked .idea-text {
  text-decoration: line-through;
  color: var(--fg-subtle);
}
.idea-delete {
  background: transparent;
  border: none;
  color: var(--fg-subtle);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  opacity: 0;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.idea-item:hover .idea-delete,
.idea-delete:focus-visible { opacity: 1; }
.idea-delete:hover { color: var(--coral); background: var(--coral-tint); }
.idea-add {
  margin-top: 8px;
  display: flex;
  gap: 6px;
}
.idea-add input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font: inherit;
  font-size: 14px;
  background: var(--bg);
  color: var(--fg);
}
.idea-add input:focus { outline: none; border-color: var(--surf); }
.idea-add button {
  padding: 7px 14px;
  border: none;
  border-radius: var(--radius-xs);
  background: var(--surf);
  color: var(--fg-on-dark, #fff);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.idea-add button:hover { filter: brightness(1.05); }

.ideas-empty {
  color: var(--fg-subtle);
  font-size: 13px;
  text-align: center;
  padding: 24px 0;
}

/* Hide the Ideas button's text label on narrow viewports; the icon alone
   carries the meaning. */
@media (max-width: 899px) {
  .btn-ideas-label { display: none; }
  #btn-ideas { padding-left: 8px; padding-right: 8px; }
}