/* KOAI Design System — CSS tokens + component styles */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  --font-mono: "SF Mono", "Menlo", "Cascadia Code", monospace;

  /* Type scale */
  --text-caption2:    10px;
  --text-caption:     12px;
  --text-footnote:    13px;
  --text-subheadline: 15px;
  --text-body:        17px;
  --text-callout:     16px;
  --text-headline:    17px;
  --text-title3:      20px;
  --text-title2:      22px;
  --text-title:       28px;

  /* Font weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Line heights */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Accent */
  --color-accent:         #007AFF;
  --color-accent-hover:   #0068E0;
  --color-accent-subtle:  rgba(0, 122, 255, 0.16);
  --color-accent-badge:   rgba(0, 122, 255, 0.15);

  /* Status */
  --color-running:        #007AFF;
  --color-running-badge:  rgba(0, 122, 255, 0.15);
  --color-done:           #34C759;
  --color-done-badge:     rgba(52, 199, 89, 0.15);
  --color-queued:         #FF9500;
  --color-queued-badge:   rgba(255, 149, 0, 0.15);
  --color-failed:         #FF3B30;
  --color-failed-badge:   rgba(255, 59, 48, 0.15);
  --color-paused:         #8E8E93;
  --color-paused-badge:   rgba(142, 142, 147, 0.15);
  --color-danger:         #FF3B30;

  /* Surfaces */
  --color-bg-window:    #1c1c1e;
  --color-bg-sidebar:   #232325;
  --color-bg-content:   #1c1c1e;
  --color-bg-card:      rgba(142, 142, 147, 0.08);
  --color-bg-grouped:   #2c2c2e;
  --color-bg-input:     #3a3a3c;
  --color-bg-hover:     rgba(255, 255, 255, 0.05);
  --color-bg-selection: rgba(0, 122, 255, 0.16);
  --color-bg-primary:   var(--color-bg-content);
  --color-bg-tertiary:  var(--color-bg-grouped);
  --color-surface-1:    var(--color-bg-card);
  --color-surface-2:    var(--color-bg-grouped);

  /* Text */
  --color-fg-primary:     rgba(255, 255, 255, 0.92);
  --color-fg-secondary:   rgba(255, 255, 255, 0.55);
  --color-fg-tertiary:    rgba(255, 255, 255, 0.30);
  --color-fg-placeholder: rgba(255, 255, 255, 0.25);
  --color-fg-accent:      #007AFF;

  /* Borders */
  --color-separator:    rgba(255, 255, 255, 0.10);
  --color-border-input: rgba(255, 255, 255, 0.12);
  --color-border:       var(--color-separator);
  --color-hairline:     rgba(255, 255, 255, 0.04);
  --color-overlay-border: rgba(255, 255, 255, 0.14);

  /* Controls */
  --color-scrollbar-thumb: rgba(255, 255, 255, 0.10);
  --color-track:           rgba(255, 255, 255, 0.08);
  --color-toggle-track:    #3a3a3c;
  --color-toggle-knob:     #ffffff;
  --color-spinner-track:   rgba(255, 255, 255, 0.15);
  --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Browser preview chrome — the frame drawn around an embedded page */
  --color-browser-chrome-bg: #171a21;
  --color-browser-chrome-fg: #e7eaf0;
  --color-browser-btn-bg:    #252a34;

  /* Elevation */
  --shadow-overlay: 0 14px 36px rgba(0, 0, 0, 0.28);
  --shadow-popover: 0 16px 40px rgba(0, 0, 0, 0.38);

  /* Special */
  --color-indigo: #5E5CE6;

  /* Spacing */
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  10px;
  --space-6:  12px;
  --space-7:  16px;
  --space-8:  20px;
  --space-9:  24px;
  --space-10: 32px;

  /* Radii */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 9999px;

  /* Sidebar */
  --sidebar-width:   260px;
  --sidebar-px:      12px;
  --titlebar-height: 52px;

  /* Set by the general settings; see js/appearance.js. */
  --ui-zoom: 1;

  /* Zoom-corrected viewport units. The zoom on <html> divides the containing block,
     so percentages track the window — but vh/vw are measured against the raw viewport
     and ignore zoom entirely, which makes "100vh" render 30% taller than the window at
     the largest text size. Use calc(N * var(--vh)) wherever a vh/vw would otherwise be.
     Prefer a plain % when an ancestor has a definite size; these are for when none does. */
  --vh: calc(1vh / var(--ui-zoom));
  --vw: calc(1vw / var(--ui-zoom));
}

/* ── Light theme ───────────────────────────────────────────────────────────────
   Only the colour tokens are re-pointed — everything downstream reads them, so no
   component rule needs a light variant. data-theme is always a concrete light/dark
   by the time it lands here: appearance.js resolves the user's Auto against the OS
   and re-stamps on change, which is why there's no prefers-color-scheme query. */
:root[data-theme="light"] {
  --color-accent-subtle:  rgba(0, 122, 255, 0.12);
  --color-accent-badge:   rgba(0, 122, 255, 0.12);

  --color-running-badge:  rgba(0, 122, 255, 0.12);
  --color-done:           #248A3D;
  --color-done-badge:     rgba(52, 199, 89, 0.18);
  --color-queued:         #B25000;
  --color-queued-badge:   rgba(255, 149, 0, 0.20);
  --color-failed:         #D70015;
  --color-failed-badge:   rgba(255, 59, 48, 0.14);
  --color-paused:         #6C6C70;
  --color-paused-badge:   rgba(142, 142, 147, 0.18);
  --color-danger:         #D70015;

  /* Surfaces */
  --color-bg-window:    #f2f2f7;
  --color-bg-sidebar:   #ebebf0;
  --color-bg-content:   #ffffff;
  --color-bg-card:      rgba(120, 120, 128, 0.06);
  --color-bg-grouped:   #ffffff;
  --color-bg-input:     #ffffff;
  --color-bg-hover:     rgba(0, 0, 0, 0.045);
  --color-bg-selection: rgba(0, 122, 255, 0.12);

  /* Text */
  --color-fg-primary:     rgba(0, 0, 0, 0.88);
  --color-fg-secondary:   rgba(0, 0, 0, 0.55);
  --color-fg-tertiary:    rgba(0, 0, 0, 0.38);
  --color-fg-placeholder: rgba(0, 0, 0, 0.30);

  /* Borders */
  --color-separator:      rgba(0, 0, 0, 0.10);
  --color-border-input:   rgba(0, 0, 0, 0.16);
  --color-hairline:       rgba(0, 0, 0, 0.06);
  --color-overlay-border: rgba(0, 0, 0, 0.12);

  /* Controls */
  --color-scrollbar-thumb: rgba(0, 0, 0, 0.20);
  --color-track:           rgba(0, 0, 0, 0.08);
  --color-toggle-track:    #d1d1d6;
  --color-toggle-knob:     #ffffff;
  --color-spinner-track:   rgba(0, 0, 0, 0.14);
  --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(0,0,0,0.4)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --color-browser-chrome-bg: #e8eaee;
  --color-browser-chrome-fg: #2b2f36;
  --color-browser-btn-bg:    #f7f8fa;

  --shadow-overlay: 0 14px 36px rgba(0, 0, 0, 0.14);
  --shadow-popover: 0 16px 40px rgba(0, 0, 0, 0.18);
}

/* The general settings' text-size step. It scales the px sizes set inline across the
   UI as well as the type scale, which a font-size token alone would miss. Zoom on the
   root shrinks the initial containing block to match, so the shell still fits exactly. */
html { zoom: var(--ui-zoom, 1); }

/* Positions a fixed popover at a pointer coordinate. Set --anchor-x/--anchor-y from the
   event's ClientX/ClientY (in px) and add this class.

   The division is the point: pointer coordinates arrive in real window px, but every
   length inside the zoomed root is interpreted in zoomed px, so assigning ClientY
   straight to `top` lands the menu ClientY × zoom down the page — visibly low at the
   larger text sizes, and further off the further down you click. Dividing the zoom back
   out converts window px into the local space. Any new pointer-anchored popover wants
   this class rather than a raw left/top. */
.zoom-anchored {
  left: calc(var(--anchor-x, 0px) / var(--ui-zoom, 1));
  top:  calc(var(--anchor-y, 0px) / var(--ui-zoom, 1));
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: var(--text-body);
  color: var(--color-fg-primary);
  background: var(--color-bg-window);
  -webkit-font-smoothing: antialiased;
}

/* ── App shell ── */
.app-shell {
  display: flex;
  flex-direction: column;
  /* 100% (of #app, which fills body) rather than 100vh: vh ignores the text-size zoom,
     so the shell would hang past the bottom of the window and body's overflow:hidden
     would make that strip — the end of the settings nav and content — unreachable. */
  height: 100%;
  overflow: hidden;
}

/* ── Title bar ── */
.title-bar {
  height: var(--titlebar-height);
  min-height: var(--titlebar-height);
  background: var(--color-bg-sidebar);
  border-bottom: 1px solid var(--color-separator);
  display: flex;
  align-items: center;
  padding: 0 var(--space-9);
  position: relative;
  flex-shrink: 0;
  -webkit-app-region: drag;
  user-select: none;
}

.title-bar .traffic-lights {
  display: flex;
  gap: var(--space-4);
  -webkit-app-region: no-drag;
}

.title-bar .traffic-lights .tl {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.tl-close   { background: #FF5F57; }
.tl-min     { background: #FEBC2E; }
.tl-max     { background: #28C840; }

.title-bar .tab-bar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-1);
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: 3px;
  -webkit-app-region: no-drag;
}

.title-bar .tab-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 16px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--color-fg-secondary);
  font-family: var(--font-ui);
  font-size: var(--text-footnote);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.title-bar .tab-btn.active {
  background: var(--color-bg-grouped);
  color: var(--color-fg-primary);
}

.title-bar .tab-btn:hover:not(.active) {
  background: var(--color-bg-hover);
  color: var(--color-fg-primary);
}

/* ── Main content area ── */
.main-area {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ── Sidebar ── */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--color-bg-sidebar);
  border-right: 1px solid var(--color-separator);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) 0;
}

.sidebar-scroll::-webkit-scrollbar { width: 0; }

.sidebar-section-header {
  padding: var(--space-2) var(--sidebar-px) var(--space-2);
  font-size: var(--text-caption2);
  font-weight: var(--weight-semibold);
  color: var(--color-fg-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-section-header button {
  background: none;
  border: none;
  color: var(--color-fg-tertiary);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
}

.sidebar-section-header button:hover { color: var(--color-fg-secondary); }

.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 5px var(--sidebar-px);
  cursor: pointer;
  border-radius: 0;
  position: relative;
  min-height: 32px;
  transition: background 0.1s;
}

.sidebar-item:hover { background: var(--color-bg-hover); }

.sidebar-item.selected {
  background: var(--color-bg-selection);
  color: var(--color-accent);
}

/* ── Narration section (3-card layout) ── */
.narration-section {
  margin-top: 12px;
}

.narration-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.narration-section-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.narration-section-title {
  font-size: var(--text-footnote);
  font-weight: var(--weight-semibold);
  color: var(--color-fg-primary);
}

.narration-kind-toggle {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-grouped);
  border: 1px solid var(--color-separator);
}

.narration-kind-btn {
  font-size: var(--text-caption2);
  font-weight: var(--weight-medium);
  color: var(--color-fg-secondary);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  padding: 3px 10px;
  cursor: pointer;
  line-height: 1.4;
}

.narration-kind-btn:hover:not(.narration-kind-btn-active) {
  color: var(--color-fg-primary);
}

.narration-kind-btn-active {
  color: var(--color-fg-primary);
  background: var(--color-bg-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.narration-delete-btn {
  font-size: var(--text-caption2);
  color: var(--color-failed);
  border-color: transparent;
  display: flex;
  align-items: center;
  gap: 4px;
}

.narration-delete-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-failed) 12%, transparent);
  border-color: var(--color-failed);
}

.narration-delete-btn:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.narration-cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.narration-card {
  position: relative;
  border: 1px solid var(--color-separator);
  border-radius: var(--radius-md);
  background: var(--color-bg-grouped);
  padding: 10px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  min-height: 88px;
}

.narration-card:hover {
  border-color: var(--color-accent);
  background: var(--color-bg-card);
}

.narration-card-active {
  border-color: var(--color-accent);
  border-left-width: 3px;
  background: var(--color-bg-card);
}

.narration-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.narration-card-label {
  font-size: var(--text-footnote);
  font-weight: var(--weight-semibold);
  color: var(--color-fg-primary);
}

.narration-card-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.narration-card-dot-ready   { background: #34C759; }
.narration-card-dot-script  { background: #FF9500; }
.narration-card-dot-empty   { background: var(--color-separator); }

.narration-card-duration,
.narration-card-status {
  font-size: var(--text-caption2);
  color: var(--color-fg-tertiary);
}

.narration-card-progress {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.narration-card-progress-label {
  font-size: 10px;
  color: var(--color-fg-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.narration-card-gen-btn {
  margin-top: auto;
  font-size: 11px;
  height: 24px;
  padding: 0 8px;
  align-self: flex-start;
}

.narration-card-cancel-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #FF3B30;
}

/* ── Narration player (legacy, used in YouTube) ── */
.narration-player {
  margin-top: 12px;
  border: 1px solid var(--color-separator);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  padding: 12px;
}

.narration-player-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.narration-player-title {
  font-size: var(--text-footnote);
  font-weight: var(--weight-semibold);
  color: var(--color-fg-primary);
}

.narration-player-meta {
  margin-top: 2px;
  font-size: var(--text-caption2);
  color: var(--color-fg-tertiary);
}

.narration-player-actions,
.narration-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.narration-detail-select {
  width: 124px;
  height: 28px;
  font-size: var(--text-caption);
}

.narration-generation-progress {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}

.narration-generation-line,
.narration-generation-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: var(--text-caption2);
  color: var(--color-fg-secondary);
}

.narration-generation-line strong {
  color: var(--color-fg-primary);
  font-weight: var(--weight-semibold);
}

.narration-generation-meta {
  justify-content: flex-start;
  color: var(--color-fg-tertiary);
}

.narration-progress-track {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-bg-grouped);
  border: 1px solid var(--color-separator);
}

.narration-progress-fill {
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: var(--color-accent);
  transition: width .2s ease;
}

.narration-controls {
  margin-top: 12px;
}

.narration-icon-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-separator);
  border-radius: var(--radius-sm);
  background: var(--color-bg-grouped);
  color: var(--color-fg-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.narration-icon-btn:hover {
  color: var(--color-fg-primary);
  background: var(--color-bg-hover);
}

.narration-icon-btn:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.narration-icon-btn:disabled:hover {
  color: var(--color-fg-secondary);
  background: var(--color-bg-grouped);
}

.narration-icon-btn svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.narration-primary-btn {
  background: var(--color-accent);
  color: white;
  border-color: transparent;
}

.narration-primary-btn:hover {
  background: var(--color-accent-hover);
}

.narration-primary-btn:disabled,
.narration-primary-btn:disabled:hover {
  background: var(--color-bg-grouped);
  color: var(--color-fg-tertiary);
  border-color: var(--color-separator);
}

.narration-seek {
  min-width: 240px;
  flex: 1 1 280px;
  display: grid;
  grid-template-columns: 40px minmax(140px, 1fr) 40px;
  align-items: center;
  gap: 8px;
  font-size: var(--text-caption2);
  color: var(--color-fg-tertiary);
}

.narration-speed {
  width: 164px;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 6px;
  font-size: var(--text-caption2);
  color: var(--color-fg-tertiary);
}

.narration-seek input,
.narration-speed input {
  width: 100%;
}

.narration-player-empty {
  margin-top: 10px;
  font-size: var(--text-caption);
  color: var(--color-fg-tertiary);
}

.narration-script-preview {
  margin-top: 10px;
}

.narration-script-body {
  font-size: var(--text-caption);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-secondary);
  white-space: pre-wrap;
}

.sidebar-item.selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: var(--color-accent);
  border-radius: 0 2px 2px 0;
}

.sidebar-item-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-fg-secondary);
}

.sidebar-item.selected .sidebar-item-icon { color: var(--color-accent); }

.sidebar-item-content { flex: 1; min-width: 0; }

.sidebar-item-title {
  font-size: var(--text-footnote);
  font-weight: var(--weight-medium);
  color: var(--color-fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-item.selected .sidebar-item-title {
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}

.sidebar-item-sub {
  font-size: var(--text-caption);
  color: var(--color-fg-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.sidebar-context-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
}

.sidebar-context-menu {
  position: fixed;
  z-index: 100;
  min-width: 168px;
  background: var(--color-bg-grouped);
  border: 1px solid var(--color-separator);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-popover);
  padding: 4px;
}

.sidebar-context-item {
  width: 100%;
  background: none;
  border: none;
  color: var(--color-fg-primary);
  cursor: pointer;
  display: block;
  font-size: var(--text-footnote);
  padding: 7px 10px;
  text-align: left;
}

.sidebar-context-item:hover {
  background: var(--color-bg-hover);
}

.sidebar-context-item-danger {
  color: #FF3B30;
}

/* ── Create topic button ── */
.btn-create-topic {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-4) var(--sidebar-px);
  padding: 8px 14px;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: var(--text-footnote);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  width: calc(100% - 2 * var(--sidebar-px));
  transition: background 0.15s;
}

.btn-create-topic:hover { background: var(--color-accent-hover); }

/* ── Active job block in sidebar ── */
.sidebar-active-job {
  border-top: 1px solid var(--color-separator);
  padding: var(--space-4) var(--sidebar-px);
  background: var(--color-bg-card);
}

/* ── Content area ── */
.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg-content);
}

/* ── Status badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-caption2);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.badge-running  { background: var(--color-running-badge);  color: var(--color-running); }
.badge-done     { background: var(--color-done-badge);     color: var(--color-done); }
.badge-queued   { background: var(--color-queued-badge);   color: var(--color-queued); }
.badge-failed   { background: var(--color-failed-badge);   color: var(--color-failed); }
.badge-paused   { background: var(--color-paused-badge);   color: var(--color-paused); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px 14px;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: var(--text-footnote);
  font-weight: var(--weight-medium);
  cursor: pointer;
  border: none;
  transition: background 0.15s, opacity 0.15s;
}

.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
  background: var(--color-accent);
  color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); }

.btn-secondary {
  background: var(--color-bg-card);
  color: var(--color-fg-primary);
  border: 1px solid var(--color-border-input);
}
.btn-secondary:hover:not(:disabled) { background: var(--color-bg-hover); }

.btn-danger {
  background: var(--color-failed-badge);
  color: var(--color-danger);
  border: 1px solid rgba(255,59,48,0.2);
}
.btn-danger:hover:not(:disabled) { background: rgba(255,59,48,0.2); }

.btn-ghost {
  background: transparent;
  color: var(--color-fg-secondary);
  border: 1px solid var(--color-separator);
}
.btn-ghost:hover:not(:disabled) { background: var(--color-bg-hover); color: var(--color-fg-primary); }

/* ── Form controls ── */
.form-input {
  width: 100%;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  padding: 7px 12px;
  color: var(--color-fg-primary);
  font-family: var(--font-ui);
  font-size: var(--text-footnote);
  outline: none;
  transition: border-color 0.15s;
}

.form-input:focus { border-color: var(--color-accent); }
.form-input::placeholder { color: var(--color-fg-placeholder); }

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.form-select {
  appearance: none;
  background-image: var(--select-caret);
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}

.form-label {
  display: block;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--color-fg-secondary);
  margin-bottom: var(--space-2);
}

.form-group { margin-bottom: var(--space-6); }

.form-row {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

.form-row > * { flex: 1; }

/* ── Toggle ── */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-separator);
}

.toggle-row:last-child { border-bottom: none; }

.toggle-info { flex: 1; min-width: 0; }

.toggle-title {
  font-size: var(--text-footnote);
  font-weight: var(--weight-medium);
  color: var(--color-fg-primary);
}

.toggle-desc {
  font-size: var(--text-caption);
  color: var(--color-fg-tertiary);
  margin-top: 2px;
  line-height: var(--leading-snug);
}

.toggle-switch {
  position: relative;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
  margin-left: var(--space-6);
}

.toggle-switch input { opacity: 0; width: 0; height: 0; }

.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--color-toggle-track);
  border-radius: 13px;
  cursor: pointer;
  transition: background 0.2s;
}

.toggle-switch input:checked + .toggle-track { background: var(--color-accent); }

.toggle-switch input:disabled + .toggle-track {
  opacity: 0.45;
  cursor: not-allowed;
}

.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: var(--color-toggle-knob);
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.toggle-switch input:checked + .toggle-track::after { transform: translateX(18px); }

/* ── Cards ── */
.card {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-7);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.card-title {
  font-size: var(--text-footnote);
  font-weight: var(--weight-semibold);
  color: var(--color-fg-primary);
}

/* ── Settings layout ── */
.settings-shell {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.settings-nav {
  width: 200px;
  min-width: 200px;
  background: var(--color-bg-sidebar);
  border-right: 1px solid var(--color-separator);
  padding: var(--space-5) 0;
  overflow-y: auto;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 7px 16px;
  cursor: pointer;
  font-size: var(--text-footnote);
  color: var(--color-fg-secondary);
  border-radius: 0;
  transition: background 0.1s, color 0.1s;
}

.settings-nav-item:hover { background: var(--color-bg-hover); color: var(--color-fg-primary); }

.settings-nav-item.active {
  background: var(--color-bg-selection);
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}

.settings-nav-item svg { flex-shrink: 0; }

.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-9);
}

.settings-content::-webkit-scrollbar { width: 6px; }
.settings-content::-webkit-scrollbar-thumb { background: var(--color-scrollbar-thumb); border-radius: 3px; }

.settings-page-title {
  font-size: var(--text-title2);
  font-weight: var(--weight-bold);
  color: var(--color-fg-primary);
  margin-bottom: var(--space-3);
}

.settings-page-sub {
  font-size: var(--text-footnote);
  color: var(--color-fg-secondary);
  margin-bottom: var(--space-9);
  line-height: var(--leading-snug);
}

.settings-section {
  margin-bottom: var(--space-9);
}

.settings-section-title {
  font-size: var(--text-caption2);
  font-weight: var(--weight-semibold);
  color: var(--color-fg-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-5);
}

.settings-group {
  background: var(--color-bg-grouped);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-7);
  border-bottom: 1px solid var(--color-separator);
  gap: var(--space-7);
}

.setting-row:last-child { border-bottom: none; }

.setting-row-label {
  font-size: var(--text-footnote);
  color: var(--color-fg-primary);
  min-width: 160px;
  flex-shrink: 0;
}

.setting-row-control { flex: 1; display: flex; justify-content: flex-end; }

.setting-row-control .form-input,
.setting-row-control .form-select {
  max-width: 280px;
}

/* ── Research view ── */
.research-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.research-header {
  padding: var(--space-7) var(--space-9) var(--space-6);
  border-bottom: 1px solid var(--color-separator);
  flex-shrink: 0;
}

.research-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-7);
  margin-bottom: var(--space-5);
}

.research-title {
  font-size: var(--text-title2);
  font-weight: var(--weight-bold);
  color: var(--color-fg-primary);
  margin-bottom: var(--space-1);
}

.research-topic-name {
  font-size: var(--text-headline);
  font-weight: var(--weight-semibold);
  color: var(--color-fg-primary);
}

.research-topic-desc {
  font-size: var(--text-footnote);
  color: var(--color-fg-tertiary);
  margin-top: var(--space-1);
}

.research-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.research-youtube-toggle {
  display: flex;
  align-items: center;
  min-width: 240px;
  max-width: 320px;
  gap: var(--space-3);
}

.research-youtube-toggle .toggle-title,
.research-youtube-toggle .toggle-desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Progress bar ── */
.progress-bar-wrap {
  height: 3px;
  background: var(--color-track);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--space-5);
}

.progress-bar-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 2px;
  transition: width 0.5s ease;
}

.progress-label {
  font-size: var(--text-caption);
  color: var(--color-fg-tertiary);
  margin-top: var(--space-2);
}

/* ── Chat feed ── */
.chat-feed {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--space-9);
}

.chat-feed::-webkit-scrollbar { width: 6px; }
.chat-feed::-webkit-scrollbar-thumb { background: var(--color-scrollbar-thumb); border-radius: 3px; }

.browser-preview-panel {
  display: flex;
  flex-direction: column;
  min-height: 360px;
  height: clamp(360px, calc(52 * var(--vh)), 620px);
  margin: 0 0 var(--space-6);
  overflow: hidden;
  border: 1px solid var(--color-overlay-border);
  border-radius: 8px;
  background: #f7f8fb;
  box-shadow: var(--shadow-overlay);
}

.browser-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 48px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--color-separator);
  background: var(--color-browser-chrome-bg);
}

.browser-preview-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.browser-preview-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #30d158;
  box-shadow: 0 0 0 4px rgba(48,209,88,0.14);
  flex-shrink: 0;
}

.browser-preview-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.browser-preview-title {
  color: #f5f7fa;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  line-height: 1.25;
}

.browser-preview-url {
  color: #a7adb8;
  font-size: 11px;
  line-height: 1.2;
  max-width: min(720px, calc(72 * var(--vw)));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}

.browser-preview-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--color-border-input);
  border-radius: 6px;
  background: var(--color-browser-btn-bg);
  color: var(--color-browser-chrome-fg);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.browser-preview-close:hover { background: #303746; }

.browser-preview-frame {
  display: block;
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  background: #fff;
  color-scheme: light;
}

.browser-preview-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  background: #f7f8fb;
  color: #303642;
}

.browser-preview-placeholder-title {
  font-size: 14px;
  font-weight: var(--weight-semibold);
}

.browser-preview-placeholder-text {
  font-size: 12px;
  color: #667085;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .research-header-top {
    flex-direction: column;
  }

  .research-actions {
    flex-wrap: wrap;
    width: 100%;
  }

  .research-youtube-toggle {
    width: 100%;
    max-width: none;
  }

  .browser-preview-panel {
    height: 360px;
  }

  .browser-preview-url {
    max-width: calc(58 * var(--vw));
  }
}

/* ── Embedded browser dock (in-chat ChatGPT/Grok WebView) ──
   Reserves a docked region at the bottom of the app shell; the native WebView is
   positioned by the driver over .embedded-browser-slot-viewport. A real flex
   child (not a modal), so it reflows the chat above it. */
.embedded-browser-slot {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: clamp(320px, calc(46 * var(--vh)), 640px);
  border-top: 1px solid var(--color-separator);
  background: var(--color-browser-chrome-bg);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.30);
  z-index: 20;
}

.embedded-browser-slot-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-separator);
  background: var(--color-browser-chrome-bg);
}

.embedded-browser-slot-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #30d158;
  box-shadow: 0 0 0 4px rgba(48,209,88,0.14);
  flex-shrink: 0;
}

.embedded-browser-slot-status {
  flex: 1;
  min-width: 0;
  color: #d7dbe3;
  font-size: 12px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.embedded-browser-slot-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--color-border-input);
  border-radius: 6px;
  background: var(--color-browser-btn-bg);
  color: var(--color-browser-chrome-fg);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.embedded-browser-slot-close:hover { background: #303746; }

/* Placeholder the native WebView is docked over. Kept visible (with a subtle
   loading look) so there is something to see before the WebView attaches. */
.embedded-browser-slot-viewport {
  flex: 1;
  min-height: 0;
  background:
    repeating-linear-gradient(-45deg, #1c2028 0 12px, #1a1e26 12px 24px);
}

.chat-message {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-separator);
}

.chat-message:last-child { border-bottom: none; }

.chat-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.chat-avatar-ai  { background: rgba(0,122,255,0.2); color: var(--color-accent); }
.chat-avatar-sys { background: rgba(142,142,147,0.2); color: var(--color-fg-tertiary); }

.chat-body { flex: 1; min-width: 0; }

.chat-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.chat-name {
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
}

.chat-time {
  font-size: 10px;
  color: var(--color-fg-tertiary);
}

.chat-content {
  font-size: var(--text-footnote);
  color: var(--color-fg-primary);
  line-height: var(--leading-relaxed);
  white-space: pre-wrap;
}

/* ── Typing indicator ── */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: var(--space-4);
}

.typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0.4;
  animation: typing-pulse 1.2s ease-in-out infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* ── Sources panel ── */
.sources-panel {
  border-top: 1px solid var(--color-separator);
  padding: var(--space-6) var(--space-9);
  flex-shrink: 0;
}

.sources-label {
  font-size: var(--text-caption2);
  font-weight: var(--weight-semibold);
  color: var(--color-fg-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
}

.sources-chips {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ── Curated source lists (topic editor) ── */
.source-url-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-3);
}

.source-url-row .form-input {
  flex: 1;
  min-width: 0;
}

.source-url-remove {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-fg-secondary);
  cursor: pointer;
  line-height: 1;
}

.source-url-remove:hover {
  background: var(--color-bg-hover);
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.source-list-empty {
  font-size: 12px;
  color: var(--color-fg-tertiary);
  margin-bottom: var(--space-3);
}

/* ── Directive highlighting inside the description textarea ──
   A textarea can't render styled spans, so the marks are painted on a backdrop behind
   it. The two must agree on every property that affects where a glyph lands — font,
   size, line-height, padding, border width, wrapping — or the marks drift off their
   words. Scroll position is synced by js/directive-highlighter.js. */
.directive-editor {
  position: relative;
}

.directive-editor .directive-backdrop,
.directive-editor .directive-input {
  font-family: var(--font-ui);
  font-size: var(--text-footnote);
  line-height: var(--leading-normal);
  letter-spacing: normal;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.directive-editor .directive-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Text is invisible here — the textarea on top paints the real glyphs. The backdrop
     exists only so the <mark> boxes land behind the right characters. */
  color: transparent;
  background: var(--color-bg-input);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.directive-editor .directive-input {
  position: relative;
  z-index: 1;
  /* The backdrop paints the field background, so the textarea must let it through. */
  background: transparent;
  border-color: var(--color-border-input);
}

.directive-mark {
  /* <mark>'s UA style forces a yellow background and black text — override both. */
  background: var(--color-accent-subtle);
  color: transparent;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px rgba(0, 122, 255, 0.35);
}

/* A unit word the offline catalog didn't recognise: the LLM rules on it at job start, so
   it reads as "not settled yet" rather than as a confirmed part of the command. */
.directive-mark-pending {
  background: var(--color-queued-badge);
  box-shadow: 0 0 0 1px rgba(255, 149, 0, 0.45);
}

.directive-pending-hint {
  color: var(--color-queued);
}

/* ── Slash-command suggestions under the description field ── */
.command-popover-anchor {
  position: relative;
}

.command-popover {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-grouped);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.command-popover-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-fg-tertiary);
  padding: var(--space-2) var(--space-3);
}

.command-option {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
}

.command-option:hover {
  background: var(--color-bg-hover);
}

.command-token {
  flex: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--color-fg-accent);
}

.command-desc {
  font-size: 12px;
  color: var(--color-fg-secondary);
}

.source-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid;
}

.source-chip-done {
  background: var(--color-done-badge);
  color: var(--color-done);
  border-color: rgba(52,199,89,0.2);
}

.source-chip-active {
  background: var(--color-accent-badge);
  color: var(--color-accent);
  border-color: rgba(0,122,255,0.2);
}

/* ── Empty state ── */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-7);
  padding: var(--space-10);
  text-align: center;
}

.empty-state-icon svg {
  opacity: 0.2;
}

.empty-state-title {
  font-size: var(--text-title3);
  font-weight: var(--weight-semibold);
  color: var(--color-fg-secondary);
  margin-bottom: var(--space-3);
}

.empty-state-desc {
  font-size: var(--text-footnote);
  color: var(--color-fg-tertiary);
  max-width: 320px;
  line-height: var(--leading-relaxed);
}

.topic-picker-card {
  width: min(460px, 100%);
  margin-top: var(--space-2);
  padding: var(--space-6);
  border: 1px solid var(--color-separator);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  text-align: left;
}

.topic-picker-card .settings-section-title {
  margin-bottom: var(--space-4);
}

.topic-picker-search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 34px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-separator);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.14);
  color: var(--color-fg-tertiary);
}

.topic-picker-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-fg-primary);
  font: inherit;
  font-size: var(--text-footnote);
}

.topic-picker-input::placeholder {
  color: var(--color-fg-tertiary);
}

.topic-picker-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 260px;
  margin-top: var(--space-4);
  overflow-y: auto;
}

.topic-picker-item {
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-fg-primary);
  text-align: left;
  cursor: pointer;
}

.topic-picker-item:hover {
  background: var(--color-bg-hover);
}

.topic-picker-item.selected {
  border-color: rgba(0,122,255,0.3);
  background: var(--color-accent-badge);
}

.topic-picker-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--color-accent);
}

.topic-picker-item-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
}

.topic-picker-item-title {
  overflow: hidden;
  color: var(--color-fg-primary);
  font-size: var(--text-footnote);
  font-weight: var(--weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topic-picker-item-desc {
  overflow: hidden;
  color: var(--color-fg-tertiary);
  font-size: var(--text-caption);
  line-height: var(--leading-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topic-picker-empty {
  padding: var(--space-5) var(--space-2) 0;
  color: var(--color-fg-tertiary);
  font-size: var(--text-caption);
  text-align: center;
}

/* ── Topic editor ── */
.topic-editor {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-9);
}

.topic-editor::-webkit-scrollbar { width: 6px; }
.topic-editor::-webkit-scrollbar-thumb { background: var(--color-scrollbar-thumb); border-radius: 3px; }

.topic-editor-title {
  font-size: var(--text-title2);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-9);
}

/* ── Stepper ── */
.stepper {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.stepper-btn {
  width: 28px;
  height: 28px;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  color: var(--color-fg-primary);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.stepper-btn:hover { background: var(--color-bg-hover); }
.stepper-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.stepper-value {
  font-size: var(--text-footnote);
  color: var(--color-fg-primary);
  min-width: 28px;
  text-align: center;
}

/* ── Summary section ── */
.summary-section {
  padding: var(--space-7) var(--space-9);
  border-top: 1px solid var(--color-separator);
}

.summary-section-title {
  font-size: var(--text-caption2);
  font-weight: var(--weight-semibold);
  color: var(--color-fg-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-6);
}

.summary-title {
  font-size: var(--text-headline);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-5);
}

.summary-body {
  font-size: var(--text-footnote);
  color: var(--color-fg-secondary);
  line-height: var(--leading-relaxed);
}

/* Markdown rendered output inside summary panels */
.markdown-body { color: var(--color-fg-primary); }
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
  font-size: 14px; font-weight: 600; margin: 10px 0 4px;
  color: var(--color-fg-primary);
}
.markdown-body h1 { font-size: 15px; }
.markdown-body p  { margin: 4px 0 8px; }
.markdown-body ul, .markdown-body ol { margin: 4px 0 8px; padding-left: 20px; }
.markdown-body li { margin-bottom: 2px; }
.markdown-body strong { font-weight: 600; color: var(--color-fg-primary); }
.markdown-body em    { font-style: italic; }
.markdown-body code  { font-family: monospace; font-size: 11px; background: var(--color-surface-2); padding: 1px 4px; border-radius: 3px; }
.markdown-body pre   { background: var(--color-surface-2); padding: 8px; border-radius: 6px; overflow: auto; font-size: 11px; }
.markdown-body blockquote { border-left: 3px solid var(--color-border); padding-left: 10px; color: var(--color-fg-secondary); margin: 6px 0; }
.markdown-body hr    { border: none; border-top: 1px solid var(--color-border); margin: 10px 0; }

/* ── Scrollable page content ── */
.page-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-9);
}
.page-scroll::-webkit-scrollbar { width: 6px; }
.page-scroll::-webkit-scrollbar-thumb { background: var(--color-scrollbar-thumb); border-radius: 3px; }

/* ── Page header ── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-9);
}

.page-title {
  font-size: var(--text-title2);
  font-weight: var(--weight-bold);
}

.page-sub {
  font-size: var(--text-footnote);
  color: var(--color-fg-tertiary);
  margin-top: var(--space-2);
}

/* ── Disclosure group ── */
.disclosure {
  background: var(--color-bg-grouped);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-5);
}

.disclosure-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-7);
  cursor: pointer;
  user-select: none;
}

.disclosure-header:hover { background: var(--color-bg-hover); }

.disclosure-title {
  font-size: var(--text-footnote);
  font-weight: var(--weight-semibold);
  color: var(--color-fg-primary);
}

.disclosure-chevron {
  color: var(--color-fg-tertiary);
  transition: transform 0.2s;
}

.disclosure-chevron.open { transform: rotate(90deg); }

.disclosure-content {
  border-top: 1px solid var(--color-separator);
  padding: var(--space-7);
}

/* ── Modal / sheet ── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-sheet {
  background: var(--color-bg-grouped);
  border-radius: var(--radius-lg);
  padding: var(--space-9);
  min-width: 480px;
  max-width: 560px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.modal-panel {
  background: var(--color-bg-grouped);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-surface-2);
  font-weight: var(--weight-semibold);
  font-size: 14px;
  gap: 8px;
}

.modal-body {
  padding: 16px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-4);
  padding: 12px 16px;
  border-top: 1px solid var(--color-surface-2);
}

/* ── Danger zone ── */
.danger-zone {
  border: 1px solid rgba(255,59,48,0.2);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  margin-top: var(--space-7);
}

.danger-zone-title {
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--color-danger);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-5);
}

/* ── Spinner ── */
@keyframes spin { to { transform: rotate(360deg); } }

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-spinner-track);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ── Key-value pair ── */
.kv-row {
  display: flex;
  gap: var(--space-7);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-separator);
  font-size: var(--text-footnote);
}

.kv-row:last-child { border-bottom: none; }

.kv-key {
  color: var(--color-fg-secondary);
  min-width: 140px;
  flex-shrink: 0;
}

.kv-value { color: var(--color-fg-primary); }

/* ── Research log section header ── */
.log-section-header {
  font-size: var(--text-caption2);
  font-weight: var(--weight-semibold);
  color: var(--color-fg-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-6) 0 var(--space-3);
}

.research-log-block {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--space-6);
}

.research-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-separator);
  /* Pin the tab switcher to the top of the scrolling chat feed so it stays
     reachable while the user scrolls through a long research log. */
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-bg-content);
  padding-top: var(--space-5);
  /* The log scrolls behind this bar, so every pixel around it has to be painted
     by the bar itself: a margin here would be a transparent band with log text
     running through it. The spacing lives on .research-tab-content instead, and
     the layer promotion keeps WebKit from leaving unrepainted slivers of the
     scrolled content along the bar's edges. */
  margin-bottom: 0;
  transform: translateZ(0);
}

.research-tabs {
  display: flex;
  gap: var(--space-2);
}

.research-tab {
  background: none;
  border: none;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-footnote);
  font-weight: var(--weight-semibold);
  color: var(--color-fg-tertiary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color 0.15s ease, background 0.15s ease;
}

.research-tab:hover {
  color: var(--color-fg-primary);
  background: var(--color-bg-hover);
}

.research-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.research-tabs-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.research-jump-latest {
  background: none;
  border: none;
  color: var(--color-fg-tertiary);
  cursor: pointer;
  padding: var(--space-3);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.research-jump-latest:hover { color: var(--color-fg-primary); }

.research-elapsed {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
  color: var(--color-fg-tertiary);
}

.research-elapsed-live { color: var(--color-accent); }

/* Live cowork delegation indicator, next to the auto-resume toggle above the log. */
.research-cowork-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-size: var(--text-caption);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-fg-tertiary);
  cursor: default;
  white-space: nowrap;
}

.research-cowork-pill-live {
  color: var(--color-done);
  border-color: color-mix(in srgb, var(--color-done) 45%, transparent);
  background: color-mix(in srgb, var(--color-done) 12%, transparent);
}

.research-run-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  padding: var(--space-2) var(--space-4);
  background: none;
  border: 1px solid var(--color-separator);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--color-fg-secondary);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.research-run-toggle:hover:not(:disabled) {
  color: var(--color-fg-primary);
  background: var(--color-bg-hover);
}

.research-run-toggle:disabled { opacity: 0.5; cursor: default; }

.research-autoresume {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-caption);
  color: var(--color-fg-secondary);
  cursor: pointer;
  user-select: none;
}

.research-autoresume:hover { color: var(--color-fg-primary); }

.research-autoresume input { cursor: pointer; margin: 0; }

.research-tab-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-top: var(--space-5);
}

.research-log-panel {
  display: flex;
  flex-direction: column;
  height: 184px;
  min-height: 184px;
  overflow: hidden;
}

.research-log-panel-expanded {
  height: auto;
  flex: 1;
}

.research-log-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: var(--space-4);
}

.research-log-scroll::-webkit-scrollbar { width: 6px; }
.research-log-scroll::-webkit-scrollbar-thumb { background: var(--color-scrollbar-thumb); border-radius: 3px; }

/* ── Research log (rlog) entries ── */
.rlog-entry {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  font-size: var(--text-footnote);
  color: var(--color-fg-secondary);
  border-bottom: 1px solid var(--color-hairline);
}

.rlog-entry:last-child { border-bottom: none; }

.rlog-icon {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  font-size: 12px;
}

.rlog-content { flex: 1; line-height: var(--leading-relaxed); }

.rlog-time {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--color-fg-tertiary);
  font-variant-numeric: tabular-nums;
}

.rlog-running { padding: var(--space-4) 0; border-bottom: none; }

/* Browser visit row */
.rlog-browser-visit {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0 var(--space-3) var(--space-2);
  font-size: 11px;
  color: var(--color-fg-tertiary);
  border-bottom: 1px solid var(--color-hairline);
}

.rlog-browser-icon { flex-shrink: 0; font-size: 12px; }

.rlog-browser-url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-accent);
  opacity: 0.7;
}

/* LLM prompt/response row */
.rlog-llm {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  font-size: var(--text-footnote);
  color: var(--color-fg-secondary);
  border-bottom: 1px solid var(--color-hairline);
}

.rlog-llm-icon {
  flex-shrink: 0;
  font-size: 12px;
  margin-top: 2px;
  color: var(--color-accent);
  opacity: 0.6;
}

.rlog-llm-text {
  flex: 1;
  line-height: var(--leading-relaxed);
  font-style: italic;
  opacity: 0.7;
}

/* ── Q&A separator ── */
.qa-separator {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) 0 var(--space-3);
  color: var(--color-fg-tertiary);
  font-size: var(--text-caption2);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.qa-separator::before,
.qa-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-separator);
}

/* ── Chat input bar ── */
.chat-input-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-9);
  border-top: 1px solid var(--color-separator);
  flex-shrink: 0;
}

.chat-input-field {
  flex: 1;
  height: 36px;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  padding: 0 var(--space-6);
  font-size: var(--text-footnote);
  color: var(--color-fg-primary);
  outline: none;
}

.chat-input-field:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0,122,255,0.15);
}

.chat-input-field:disabled { opacity: 0.5; cursor: not-allowed; }

.chat-input-field::placeholder { color: var(--color-fg-tertiary); }

.chat-send-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Chat user message ── */
.chat-message-user {
  flex-direction: row-reverse;
}

.chat-message-user .chat-body { text-align: right; }

.chat-message-user .chat-meta { flex-direction: row-reverse; }

.chat-avatar-user {
  background: rgba(142,142,147,0.18);
  color: var(--color-fg-secondary);
}

/* ── Summary actions ── */
.summary-actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* ── Job action buttons row ── */
.job-actions-row {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-separator);
  flex-wrap: wrap;
}

/* ── Small button variant ── */
.btn.btn-sm {
  padding: 4px 10px;
  font-size: 11px;
  height: 26px;
}

/* ── Summary pending empty state ── */
.summary-pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-10) var(--space-9);
  text-align: center;
}

.summary-pending-title {
  font-size: var(--text-headline);
  font-weight: var(--weight-semibold);
  color: var(--color-fg-secondary);
}

.summary-pending-desc {
  font-size: var(--text-footnote);
  color: var(--color-fg-tertiary);
  max-width: 360px;
  line-height: var(--leading-relaxed);
}

/* ─── History Window ──────────────────────────────────────────────────────── */
.history-window {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--color-bg-content);
}

.history-sidebar {
  width: 260px;
  min-width: 200px;
  background: var(--color-bg-sidebar);
  border-right: 1px solid var(--color-separator);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

.history-detail {
  flex: 1;
  background: var(--color-bg-content);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.history-window-context-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
}

.history-window-context-menu {
  position: fixed;
  z-index: 100;
  min-width: 160px;
  background: var(--color-bg-grouped);
  border: 1px solid var(--color-separator);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-popover);
  padding: 4px;
}

.history-window-context-item {
  width: 100%;
  background: none;
  border: none;
  color: var(--color-fg-primary);
  cursor: pointer;
  display: block;
  font-size: var(--text-footnote);
  padding: 7px 10px;
  text-align: left;
}

.history-window-context-item:hover {
  background: var(--color-bg-hover);
}

.history-window-context-item-danger {
  color: #FF3B30;
}

/* ─── Quick Preview Overlay ────────────────────────────────────────────────── */
.quick-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-preview-sheet {
  width: 620px;
  max-height: 620px;
  background: var(--color-bg-primary);
  color: var(--color-fg-primary);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.quick-preview-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: var(--color-bg-tertiary);
  color: var(--color-fg-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.quick-preview-header {
  padding: 16px 48px 12px 20px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.quick-preview-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-fg-primary);
  line-height: 1.4;
}

.quick-preview-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.quick-preview-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* ─── Disclosure Groups ─────────────────────────────────────────────────────── */
.disclosure-group {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}

.disclosure-summary {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-fg-primary);
  cursor: pointer;
  background: var(--color-bg-secondary);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.disclosure-summary::before {
  content: "›";
  font-size: 14px;
  color: var(--color-fg-tertiary);
  transition: transform 0.15s;
  display: inline-block;
}

details[open] > .disclosure-summary::before {
  transform: rotate(90deg);
}

.disclosure-body {
  padding: 12px 14px;
  background: var(--color-bg-primary);
  border-top: 1px solid var(--color-border);
}

/* ─── Rlog live dot ─────────────────────────────────────────────────────────── */
.rlog-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  display: inline-block;
  animation: pulse 1.2s ease-in-out infinite;
  margin-left: 4px;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

/* ─── Sidebar item history hover ─────────────────────────────────────────── */
.sidebar-item-history { position: relative; }

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-fg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 2px 4px;
  transition: background 0.1s, color 0.1s;
}

.btn-icon:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-fg-primary);
}

/* ─── Playwright Browser Activity Panel ──────────────────────────────────── */
.browser-activity-panel {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}

.browser-activity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
}

.browser-activity-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-fg-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.browser-activity-state {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.browser-activity-state.state-idle       { background: var(--color-bg-tertiary); color: var(--color-fg-tertiary); }
.browser-activity-state.state-navigating { background: #1a3a6e; color: #7ab3ff; }
.browser-activity-state.state-loading    { background: #1a3a6e; color: #7ab3ff; }
.browser-activity-state.state-popup      { background: #3a2a0e; color: #f5a623; }
.browser-activity-state.state-scrolling  { background: #1a3a6e; color: #7ab3ff; }
.browser-activity-state.state-clicking   { background: #1a3a6e; color: #7ab3ff; }
.browser-activity-state.state-extracting { background: #0e3a2a; color: #4ade80; }
.browser-activity-state.state-done       { background: #0e3a2a; color: #4ade80; }
.browser-activity-state.state-failed     { background: #3a0e0e; color: #f87171; }

.browser-activity-url {
  padding: 6px 12px;
  font-size: 11px;
  color: var(--color-fg-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--color-border);
}

.browser-activity-page-title {
  padding: 4px 12px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.browser-activity-action {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 8px;
  font-size: 12px;
  color: var(--color-fg-secondary);
}

.browser-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--color-fg-tertiary);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

.browser-activity-screenshot-wrap {
  position: relative;
  line-height: 0;
  border-top: 1px solid var(--color-border);
  overflow-y: auto;
  max-height: 340px;
}

.browser-activity-screenshot {
  width: 100%;
  height: auto;
  display: block;
}

.browser-click-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(250, 80, 80, 0.7);
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 0 6px rgba(250, 80, 80, 0.6);
  animation: click-pulse 0.6s ease-out forwards;
}

@keyframes click-pulse {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

/* ─── Playwright Runtime Status Banner ───────────────────────────────────── */
.playwright-runtime-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  border: 1px solid var(--color-border);
}

.playwright-runtime-status-icon {
  font-size: 14px;
  font-weight: 700;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.playwright-runtime-status-text { flex: 1; min-width: 0; }

.playwright-runtime-status-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-fg-primary);
}

.playwright-runtime-status-detail {
  font-size: 11px;
  color: var(--color-fg-tertiary);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-status-ready   { background: rgba(74, 222, 128, 0.08); border-color: rgba(74, 222, 128, 0.25); }
.runtime-status-missing { background: rgba(250, 204, 21, 0.08); border-color: rgba(250, 204, 21, 0.25); }
.runtime-status-broken  { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.25); }
.runtime-status-installing { background: rgba(96, 165, 250, 0.08); border-color: rgba(96, 165, 250, 0.25); }
.runtime-status-unknown { background: var(--color-bg-tertiary); }

.runtime-status-ready    .playwright-runtime-status-icon { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.runtime-status-missing  .playwright-runtime-status-icon { background: rgba(250, 204, 21, 0.15); color: #facc15; }
.runtime-status-broken   .playwright-runtime-status-icon { background: rgba(248, 113, 113, 0.15); color: #f87171; }
.runtime-status-installing .playwright-runtime-status-icon { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.runtime-status-unknown  .playwright-runtime-status-icon { background: var(--color-bg-tertiary); color: var(--color-fg-tertiary); }

/* Settings notice */
.settings-notice {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
}

.settings-notice-warning {
  background: rgba(250, 204, 21, 0.08);
  border: 1px solid rgba(250, 204, 21, 0.25);
  color: var(--color-fg-secondary);
}

/* ── ChatGPT-style research log ──────────────────────────────────────────── */
.chat-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-log-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Cowork per-device attribution: a chip naming the machine a row's work ran on. Only
   rendered when a single run's log mixes more than one device. */
.chat-device-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: center;
  padding: 1px 7px 1px 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.6;
  max-width: 190px;
  white-space: nowrap;
  overflow: hidden;
}

.chat-device-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.chat-device-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "local" / "peer": the name alone never says whose machine it is. Dimmer than the
   name so the chip still reads as the device first. */
.chat-device-role {
  flex-shrink: 0;
  padding-left: 5px;
  border-left: 1px solid currentColor;
  font-weight: 500;
  opacity: 0.7;
}

.chat-log-bubble {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 4px 12px 12px 12px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-fg-primary);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.chat-log-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-log-time {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--color-fg-tertiary);
  font-variant-numeric: tabular-nums;
}

.chat-log-bubble-llm {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--color-fg-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  display: block;
}

.chat-log-bubble-error {
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.08);
}

/* The trending harvest: a long, grouped list — give it the monospace treatment the
   other machine-generated dumps get, so the columns line up. */
.chat-log-bubble-trending {
  border-color: rgba(255, 55, 95, 0.35);
  background: rgba(255, 55, 95, 0.06);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
}

/* Browser card sits flush inside its bubble */
.chat-log-bubble-browser {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  display: block;
}

/* ── Inline 4:3 browser session card ─────────────────────────────────────── */
.browser-session-card {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-bg-tertiary);
}

.browser-session-card.is-live {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.browser-session-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}

.browser-session-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-fg-tertiary);
}
.browser-session-dot.state-done      { background: #4ade80; }
.browser-session-dot.state-failed    { background: #f87171; }
.browser-session-dot.state-navigating,
.browser-session-dot.state-loading,
.browser-session-dot.state-scrolling,
.browser-session-dot.state-clicking  { background: #7ab3ff; }
.browser-session-dot.state-extracting{ background: #4ade80; }
.browser-session-dot.state-popup     { background: #f5a623; }
.browser-session-card.is-live .browser-session-dot { animation: browser-dot-pulse 1.2s ease-in-out infinite; }

@keyframes browser-dot-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.browser-session-domain {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-fg-primary);
  flex-shrink: 0;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-session-page-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--color-fg-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-session-state {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--color-bg-tertiary);
  color: var(--color-fg-secondary);
}
.browser-session-state.state-done   { background: #0e3a2a; color: #4ade80; }
.browser-session-state.state-failed { background: #3a0e0e; color: #f87171; }

.browser-session-viewport {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  background: var(--color-bg-primary);
  overflow: hidden;
}

.browser-session-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.browser-session-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-fg-tertiary);
}

/* ─── Collapsed task line + log detail panel ───────────────────────────────── */
/* One narration/podcast render shows as a single line in the log; the whole row
   list lives in the side panel it opens. */
.log-task-line {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 4px 12px 12px 12px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--color-fg-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-align: left;
}

.log-task-line:hover,
.log-task-line:focus-visible {
  background: var(--color-bg-hover);
  border-color: var(--color-accent);
  outline: none;
}

.log-task-line-active {
  border-color: var(--color-accent);
}

.log-task-icon { flex-shrink: 0; }

.log-task-label {
  font-weight: 600;
  flex-shrink: 0;
}

/* The one part that gives: a long phase message is clipped, not wrapped, so the
   line stays a line. */
.log-task-status {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-fg-secondary);
}

.log-task-spinner {
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--color-fg-tertiary);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

.log-task-steps {
  flex-shrink: 0;
  background: var(--color-bg-tertiary);
  color: var(--color-fg-tertiary);
  border-radius: 8px;
  padding: 1px 6px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.log-task-chevron {
  flex-shrink: 0;
  color: var(--color-fg-tertiary);
}

/* Floats over the right third of the chat: no backdrop, so the feed stays readable
   and scrollable while the detail is open. Below .modal-backdrop's z-index of 200. */
.log-detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(33vw, 420px);
  z-index: 150;
  background: var(--color-bg-primary);
  border-left: 1px solid var(--color-border);
  box-shadow: -8px 0 32px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  outline: none;
}

@media (max-width: 900px) {
  .log-detail-panel { width: 100%; }
}

.log-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.log-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.log-detail-action {
  border: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
  color: var(--color-fg-secondary);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.log-detail-action:hover {
  background: var(--color-bg-hover);
  color: var(--color-fg-primary);
}

.log-detail-action-danger {
  color: #FF3B30;
  border-color: rgba(255, 59, 48, 0.35);
}

.log-detail-action-danger:hover {
  background: rgba(255, 59, 48, 0.12);
  color: #FF3B30;
}

.log-detail-title {
  /* Takes the slack so the device chip sits next to the actions rather than floating in
     the middle of the header; a long task label ellipsises instead of pushing them out. */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-fg-primary);
}

.log-detail-close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: var(--color-bg-tertiary);
  color: var(--color-fg-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.log-detail-close:hover { background: var(--color-bg-hover); }

/* Holds .chat-log rows, so it carries the padding the log feed gets from its own
   panel and lets the bubbles keep their spacing. */
.log-detail-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px;
}

.log-detail-body::-webkit-scrollbar { width: 6px; }
.log-detail-body::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: 3px;
}

/* The panel is far narrower than the feed: let the timestamp drop under the text
   instead of squeezing the message into a column two words wide. */
.log-detail-body .chat-log-bubble {
  flex-wrap: wrap;
}

/* A podcast question, with the expert's answer folded away behind it. */
.log-detail-disclosure {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.log-detail-disclosure svg {
  flex-shrink: 0;
  color: var(--color-fg-tertiary);
  transition: transform 0.15s ease;
}

.log-detail-disclosure.is-open svg { transform: rotate(90deg); }

.log-detail-disclosure:hover svg { color: var(--color-accent); }

.log-detail-answer {
  flex: 1 1 100%;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
  color: var(--color-fg-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}