/* ==========================================================================
   Ospi macOS Desktop Restyle (desktop-mac.css)
   Media: (min-width: 860px) and (hover: hover) and (pointer: fine)
   Scope: html.phase5
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Installed desktop window (Safari "Add to Dock", Chrome/Edge app window)
   app.js measureGlassFill() sets --sb-fill for the iPhone home-indicator strip
   below 100dvh. A Mac/Windows window has no such strip, but the measurement
   (screen.height - 100dvh) comes out large, so html grew past the window and
   cut the composer off. On desktop the strip is always zero.
   -------------------------------------------------------------------------- */
html.phase5 { --sb-fill: 0px !important; }
html.phase5.pwa { height: 100dvh !important; }

/* --------------------------------------------------------------------------
   A. Palette — Default Theme Overrides (Light & Dark)
   -------------------------------------------------------------------------- */

/* Light Default Themes */
html.phase5[data-theme="kapur-refined"],
html.phase5[data-theme="kapur-light"],
html.phase5[data-theme="automatic"],
html.phase5:not([data-theme]),
html.phase5[data-theme=""] {
  color-scheme: light;

  /* Modern tokens */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F5F5F7;
  --surface-3: #E8E8ED;
  --ink: #1D1D1F;
  --ink-2: #6E6E73;
  --ink-3: #AEAEB2;

  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.14);

  --hover: rgba(0, 0, 0, 0.045);
  --sel: rgba(0, 0, 0, 0.075);

  --accent: #007AFF;
  --accent-ink: #007AFF;
  --on-accent: #FFFFFF;
  --accent-soft: rgba(0, 122, 255, 0.12);

  --ok: #34C759;
  --warn: #FF9500;
  --danger: #FF3B30;

  --code-bg: #F6F6F8;
  --code-fg: #1D1D1F;
  --code-inline-bg: #F6F6F8;
  --code-inline-fg: #1D1D1F;

  --bubble-user: #EFEFF2;
  --on-bubble-user: #1D1D1F;

  --syn-kw: #AF52DE;
  --syn-str: #C41A16;

  /* Legacy variable mirrors */
  --surface2: #F5F5F7;
  --text: #1D1D1F;
  --muted: #6E6E73;
  --line2: rgba(0, 0, 0, 0.14);
  --accentInk: #FFFFFF;
  --code: #F6F6F8;
  --bubbleA: #FFFFFF;
  --bubbleU: #EFEFF2;

  /* Desktop specific surfaces */
  --side: rgba(236, 236, 240, 0.78);
  --bg2: #F5F5F7;
  --bg3: #E8E8ED;
  --t1: #1D1D1F;
  --t2: #6E6E73;
  --t3: #AEAEB2;
}

/* Dark Default Theme */
html.phase5[data-theme="kapur-night"] {
  color-scheme: dark;

  /* Modern tokens */
  --bg: #1E1E20;
  --surface: #1E1E20;
  --surface-2: #2C2C2E;
  --surface-3: #3A3A3C;
  --ink: #F5F5F7;
  --ink-2: #98989D;
  --ink-3: #636366;

  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.15);

  --hover: rgba(255, 255, 255, 0.06);
  --sel: rgba(255, 255, 255, 0.10);

  --accent: #0A84FF;
  --accent-ink: #0A84FF;
  --on-accent: #FFFFFF;
  --accent-soft: rgba(10, 132, 255, 0.15);

  --ok: #30D158;
  --warn: #FF9F0A;
  --danger: #FF453A;

  --code-bg: #262628;
  --code-fg: #F5F5F7;
  --code-inline-bg: #262628;
  --code-inline-fg: #F5F5F7;

  --bubble-user: #2F2F32;
  --on-bubble-user: #F5F5F7;

  --syn-kw: #BF5AF2;
  --syn-str: #FF8170;

  /* Legacy variable mirrors */
  --surface2: #2C2C2E;
  --text: #F5F5F7;
  --muted: #98989D;
  --line2: rgba(255, 255, 255, 0.15);
  --accentInk: #FFFFFF;
  --code: #262628;
  --bubbleA: #1E1E20;
  --bubbleU: #2F2F32;

  /* Desktop specific surfaces */
  --side: rgba(40, 40, 43, 0.80);
  --bg2: #2C2C2E;
  --bg3: #3A3A3C;
  --t1: #F5F5F7;
  --t2: #98989D;
  --t3: #636366;
}

/* Automatic Sync when System is Dark */
@media (prefers-color-scheme: dark) {
  html.phase5[data-theme="automatic"],
  html.phase5:not([data-theme]),
  html.phase5[data-theme=""] {
    color-scheme: dark;

    --bg: #1E1E20;
    --surface: #1E1E20;
    --surface-2: #2C2C2E;
    --surface-3: #3A3A3C;
    --ink: #F5F5F7;
    --ink-2: #98989D;
    --ink-3: #636366;

    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.15);

    --hover: rgba(255, 255, 255, 0.06);
    --sel: rgba(255, 255, 255, 0.10);

    --accent: #0A84FF;
    --accent-ink: #0A84FF;
    --on-accent: #FFFFFF;
    --accent-soft: rgba(10, 132, 255, 0.15);

    --ok: #30D158;
    --warn: #FF9F0A;
    --danger: #FF453A;

    --code-bg: #262628;
    --code-fg: #F5F5F7;
    --code-inline-bg: #262628;
    --code-inline-fg: #F5F5F7;

    --bubble-user: #2F2F32;
    --on-bubble-user: #F5F5F7;

    --syn-kw: #BF5AF2;
    --syn-str: #FF8170;

    --surface2: #2C2C2E;
    --text: #F5F5F7;
    --muted: #98989D;
    --line2: rgba(255, 255, 255, 0.15);
    --accentInk: #FFFFFF;
    --code: #262628;
    --bubbleA: #1E1E20;
    --bubbleU: #2F2F32;

    --side: rgba(40, 40, 43, 0.80);
    --bg2: #2C2C2E;
    --bg3: #3A3A3C;
    --t1: #F5F5F7;
    --t2: #98989D;
    --t3: #636366;
  }
}

/* --------------------------------------------------------------------------
   B. Type — SF Pro / Segoe UI Hierarchy
   -------------------------------------------------------------------------- */

html.phase5,
html.phase5 body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif !important;
  font-size: 13px !important;
  line-height: 18px !important;
  letter-spacing: -0.003em !important;
  -webkit-font-smoothing: antialiased !important;
}

html.phase5 :is(h1, h2, h3, h4, h5, h6, strong, b) {
  font-weight: 600 !important;
  letter-spacing: -0.003em !important;
}

html.phase5 :is(pre, code, kbd, samp, .mono) {
  font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace !important;
  font-size: 12px !important;
  line-height: 17px !important;
}

/* Meta typography */
html.phase5 :is(.s-meta, .turn-meta, .sess-v5-line2, .sess-sub-cwd) {
  font-size: 11px !important;
  line-height: 15px !important;
  color: var(--ink-2) !important;
}

/* --------------------------------------------------------------------------
   C. Sidebar — Rail + Panel Unified Translucent Surface (Defect 1 Fixed)
   -------------------------------------------------------------------------- */

/* Sidebar container, rail, and panel host share the EXACT same translucent background & blur */
html.phase5 #page-sessions,
html.phase5 .desktop-rail,
html.phase5 #desktop-panel-host {
  background: var(--side) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  backdrop-filter: blur(30px) saturate(180%) !important;
}

/* ALL child containers inside #page-sessions are transparent so colors do not stack/double */
html.phase5 #page-sessions :is(
  .pager-head,
  #sidebar-panel,
  #pane-sessions,
  #sess-list,
  .sess-v5-row-snap,
  #pane-files,
  #file-list,
  #pane-notes,
  #pane-subagents,
  #sub-list,
  .sublist,
  .sidebar-panel
) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Slim rail (~48px): transparent borders */
html.phase5 .desktop-rail {
  border-right: none !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  padding: 10px 0 !important;
  box-sizing: border-box !important;
}

/* Collapsible Panel host (~260px): NO border between rail and panel */
html.phase5 #desktop-panel-host {
  border-left: none !important;
}

html.phase5 #page-sessions:not(.desktop-panel-collapsed) #desktop-panel-host {
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  border-right: 0.5px solid var(--line2) !important;
  box-sizing: border-box !important;
}

/* Hairline placement on outer edge when panel is collapsed vs open */
html.phase5 #page-sessions.desktop-panel-collapsed .desktop-rail {
  border-right: 0.5px solid var(--line2) !important;
}
html.phase5 #page-sessions.desktop-panel-collapsed #desktop-panel-host {
  border-right: none !important;
}

/* Rail buttons: 32x32, radius 6px, no borders */
html.phase5 .desktop-rail-btn {
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  color: var(--ink-2) !important;
  box-shadow: none !important;
  padding: 0 !important;
  transition: background-color 150ms cubic-bezier(.25,.46,.45,.94), color 150ms cubic-bezier(.25,.46,.45,.94);
}

html.phase5 .desktop-rail-btn svg {
  width: 18px !important;
  height: 18px !important;
  color: inherit !important;
}

html.phase5 .desktop-rail-btn:hover {
  background: var(--hover) !important;
  color: var(--ink) !important;
  border: none !important;
}

html.phase5 .desktop-rail-btn.on {
  background: var(--sel) !important;
  color: var(--accent) !important;
  border: none !important;
  box-shadow: none !important;
}

html.phase5 .desktop-rail-btn.on svg {
  color: var(--accent) !important;
}

/* --------------------------------------------------------------------------
   D. Panel Head — 52px Header & Ghost Collapse Button
   -------------------------------------------------------------------------- */

html.phase5 .desktop-panel-host .pager-head {
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 0 12px 0 16px !important;
  background: transparent !important;
  border-bottom: none !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

html.phase5 .desktop-panel-host .pager-head strong,
html.phase5 .desktop-panel-host .pager-head .pager-head-title {
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}

/* Borderless ghost collapse button: 28px, radius 6px */
html.phase5 .desktop-panel-host .pager-head button.desktop-panel-close-btn {
  order: 2 !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  color: var(--ink-2) !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background-color 150ms cubic-bezier(.25,.46,.45,.94), color 150ms cubic-bezier(.25,.46,.45,.94);
}

html.phase5 .desktop-panel-host .pager-head button.desktop-panel-close-btn:hover {
  background: var(--hover) !important;
  color: var(--ink) !important;
}

html.phase5 .desktop-panel-host .pager-head button.desktop-panel-close-btn svg {
  width: 16px !important;
  height: 16px !important;
}

/* New chat button in panel head: ghost 28px */
html.phase5 .desktop-panel-host .pager-head #btn-new,
html.phase5 #page-sessions .pager-head #btn-new,
html.phase5 .desktop-panel-host .sess-head-new-btn {
  order: 1 !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  color: var(--ink-2) !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background-color 150ms cubic-bezier(.25,.46,.45,.94), color 150ms cubic-bezier(.25,.46,.45,.94);
}

html.phase5 .desktop-panel-host .pager-head #btn-new:hover,
html.phase5 #page-sessions .pager-head #btn-new:hover {
  background: var(--hover) !important;
  color: var(--ink) !important;
}

html.phase5 .desktop-panel-host .pager-head #btn-new svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

/* --------------------------------------------------------------------------
   E. Session List Rows & Toolbar Row (Defects 2 & 3 Fixed)
   -------------------------------------------------------------------------- */

html.phase5 #page-sessions #pane-sessions {
  background: transparent !important;
}

html.phase5 #page-sessions #sess-list {
  background: transparent !important;
  padding: 4px 0 16px !important;
  overflow-x: hidden !important;
}

/* Defect 2: Toolbar row fits inside 260px panel with 6px gap and no overflow */
html.phase5 .sess-seg {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 4px 10px 8px !important;
  width: auto !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  height: 28px !important;
  max-height: 28px !important;
}

/* Borderless ghost buttons in toolbar row */
html.phase5 .sess-seg :is(.sess-seg-btn, .sess-seg-ico) {
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  color: var(--ink-2) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: background-color 150ms ease, color 150ms ease;
}

html.phase5 .sess-seg :is(.sess-seg-btn, .sess-seg-ico):hover {
  background: var(--hover) !important;
  color: var(--ink) !important;
}

/* Ghost icon buttons: 28x28, radius 6px */
html.phase5 .sess-seg .sess-seg-ico {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 28px !important;
}

html.phase5 .sess-seg .sess-seg-ico svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

/* Folder chip: shrinkable with ellipsis (min-width: 0) */
html.phase5 .sess-seg #sess-tab-folder {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

html.phase5 .sess-seg #sess-tab-folder.on {
  background: var(--hover) !important;
  color: var(--ink) !important;
}

html.phase5 .sess-seg .sess-seg-folder-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}

html.phase5 .sess-seg .sess-seg-folder-ic {
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
}

html.phase5 .sess-seg .sess-seg-folder-ic svg {
  width: 14px !important;
  height: 14px !important;
}

html.phase5 .sess-seg .sess-seg-folder-name {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11px !important;
}

/* Recent button */
html.phase5 .sess-seg #sess-tab-recent {
  flex: 0 0 auto !important;
  padding: 0 6px !important;
  font-size: 11px !important;
}
html.phase5 .sess-seg #sess-tab-recent.on {
  background: var(--hover) !important;
  color: var(--ink) !important;
}

/* Defect 3: Equal 10px inset on BOTH sides for session rows (normal, hover, active) */
html.phase5 .sess-v5-row-snap {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100% !important;
  padding: 1px 0 !important;
  box-sizing: border-box !important;
}

html.phase5 .sess-v5-row {
  margin: 0 !important;
  margin-inline: 10px !important;
  width: auto !important;
  /* phase5.css sets min-width:100% + flex-basis 100% for the phone swipe row;
     without undoing both, the 10px inset pushes the row past the right edge. */
  min-width: 0 !important;
  flex: 1 1 auto !important;
  max-width: none !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  height: auto !important;
  min-height: 32px !important;
  max-height: none !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-left: none !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: background-color 150ms cubic-bezier(.25,.46,.45,.94), color 150ms cubic-bezier(.25,.46,.45,.94);
}

html.phase5 .sess-v5-row:hover {
  margin-inline: 10px !important;
  width: auto !important;
  background: var(--hover) !important;
}

/* Hide mobile stripe in desktop source-list */
html.phase5 .sess-v5-stripe {
  display: none !important;
}

/* Row Title */
html.phase5 .sess-v5-row .sess-v5-title {
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Row Meta */
html.phase5 .sess-v5-row .sess-v5-line2,
html.phase5 .sess-v5-row .sess-v5-time,
html.phase5 .sess-v5-row .sess-v5-line2-folder,
html.phase5 .sess-v5-row .sess-v5-cwd-chip {
  font-size: 11px !important;
  line-height: 15px !important;
  color: var(--ink-2) !important;
}

/* CURRENT / selected session row: macOS accent highlight with equal 10px insets */
html.phase5 .sess-v5-row.active {
  margin-inline: 10px !important;
  width: auto !important;
  background: var(--accent) !important;
  background-image: none !important;
  border-left: none !important;
  color: #FFFFFF !important;
}

html.phase5 .sess-v5-row.active .sess-v5-title {
  color: #FFFFFF !important;
  font-weight: 500 !important;
}

/* The redesigned row (project name, who, last-reply preview) must stay
   readable on the accent fill too; the project dot keeps its own colour. */
html.phase5 .sess-v5-row.active :is(.sess-v5-line2, .sess-v5-time, .sess-v5-line2-folder, .sess-v5-cwd-chip, .sess-v5-proj, .sess-v5-who, .sess-v5-preview, .sess-v5-line2-sep, .sess-v5-sublabel) {
  color: rgba(255, 255, 255, 0.85) !important;
}
html.phase5 .sess-v5-row.active .sess-v5-proj::before {
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
}
html.phase5 .sess-v5-row.active .sess-v5-avatar {
  color: var(--accent) !important;
  background: #FFFFFF !important;
}

html.phase5 .sess-v5-row.active .sess-v5-badges > * {
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

/* Group headers */
html.phase5 :is(.sess-v5-group-header, .ghead) {
  padding: 14px 20px 5px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 14px !important;
  color: var(--ink-2) !important;
  text-transform: none !important;
  letter-spacing: -0.003em !important;
}

html.phase5 .sess-v5-group-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--ink-2) !important;
  text-transform: none !important;
}

html.phase5 .sess-v5-group-count {
  font-size: 11px !important;
  color: var(--ink-3) !important;
  font-family: inherit !important;
}

/* --------------------------------------------------------------------------
   F. Chat Header (#hdr) — 52px Tall, Clean Hairline & Ghost Buttons
   -------------------------------------------------------------------------- */

html.phase5 #page-chat #hdr {
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  background: transparent !important;
  border-bottom: 0.5px solid var(--line2) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-sizing: border-box !important;
}

html.phase5 #page-chat #hdr .hin {
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 0 16px 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

html.phase5 #page-chat #hdr #btn-title,
html.phase5 #page-chat #hdr .htitle {
  order: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: default !important;
}

html.phase5 #page-chat #hdr #dot.off {
  display: none !important;
}

html.phase5 #page-chat #hdr #sess-title,
html.phase5 #page-chat #hdr .htitle-top-row {
  font-size: 13px !important;
  line-height: 16px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  text-align: left !important;
  letter-spacing: -0.003em !important;
}

html.phase5 #page-chat #hdr .sess-sub-cwd {
  font-size: 11px !important;
  line-height: 14px !important;
  color: var(--ink-2) !important;
  text-align: left !important;
  font-family: inherit !important;
}

/* Action buttons on far right */
html.phase5 #page-chat #hdr .desktop-hdr-actions {
  order: 1 !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Desktop header ghost buttons: 28px, radius 6px */
html.phase5 .desktop-hdr-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  color: var(--ink-2) !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background-color 150ms cubic-bezier(.25,.46,.45,.94), color 150ms cubic-bezier(.25,.46,.45,.94);
}

html.phase5 .desktop-hdr-btn:hover {
  background: var(--hover) !important;
  color: var(--ink) !important;
  border: none !important;
}

html.phase5 .desktop-hdr-btn:active {
  background: var(--sel) !important;
  color: var(--ink) !important;
}

html.phase5 .desktop-hdr-btn svg {
  width: 16px !important;
  height: 16px !important;
}

/* --------------------------------------------------------------------------
   G. Transcript — 720px Centered Column & Readable Body
   -------------------------------------------------------------------------- */

html.phase5 #page-chat,
html.phase5 #page-chat #main {
  background: var(--bg) !important;
}

html.phase5 #transcript {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow-y: auto !important;
  padding: 0 !important;
  background: var(--bg) !important;
}

html.phase5 #feed {
  width: 100% !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 22px 20px 24px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

/* User Message: bubble radius 14px (bottom-right 5px), padding 8px 12px */
html.phase5 .msg-user {
  align-self: flex-end !important;
  margin-left: auto !important;
  max-width: 520px !important;
  border-radius: 14px 14px 5px 14px !important;
  padding: 8px 12px !important;
  background: var(--bubble-user) !important;
  color: var(--on-bubble-user) !important;
  font-size: 14px !important;
  line-height: 21px !important;
  border: none !important;
  box-shadow: none !important;
  word-break: break-word !important;
  box-sizing: border-box !important;
}

/* Assistant Message: plain, no card */
html.phase5 .assistant,
html.phase5 .assistant.cardless {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 21px !important;
  color: var(--ink) !important;
  align-self: stretch !important;
}

html.phase5 .assistant .md {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  line-height: 21px !important;
  color: var(--ink) !important;
}

html.phase5 .assistant .md p {
  font-size: 14px !important;
  line-height: 21px !important;
  color: var(--ink) !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

html.phase5 .assistant .md p:last-child {
  margin-bottom: 0 !important;
}

/* Inline Code: mono 12px, code background, 0.5px line, radius 4px */
html.phase5 :is(.md, .assistant, .msg-user) code:not(pre code) {
  font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace !important;
  font-size: 12px !important;
  background: var(--code-bg) !important;
  color: var(--ink) !important;
  border: 0.5px solid var(--line) !important;
  border-radius: 4px !important;
  padding: 1px 5px !important;
}

/* --------------------------------------------------------------------------
   H. Tool Cards & Code Blocks (Defect 5 Fixed)
   -------------------------------------------------------------------------- */

/* Tool cards */
html.phase5 :is(.tool-card, #feed .tool-card, #feed > .tool-card) {
  display: block !important;
  border-radius: 8px !important;
  border: 0.5px solid var(--line2) !important;
  background: var(--surface) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
  margin: 10px 0 !important;
}

html.phase5:is([data-theme="kapur-night"], [data-theme="dark"]) :is(.tool-card, #feed .tool-card, #feed > .tool-card) {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

html.phase5 .tool-head {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  color: var(--ink-2) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  border: none !important;
}

html.phase5 .tool-card .tc-fill {
  display: none !important;
}

html.phase5 .tool-head :is(b, strong, .tname) {
  font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
}

html.phase5 .tool-head .targs {
  font-size: 12px !important;
  color: var(--ink-2) !important;
}

/* Tool card status markers */
html.phase5 .tool-card[data-st="ok"] .tstat,
html.phase5 .tool-head .sm-ok,
html.phase5 .tool-head .ok,
html.phase5 .tool-head .tc-ok {
  color: var(--ok) !important;
}

/* Tool body / output: Defect 5 clean first character */
html.phase5 .tool-body {
  display: block !important;
  background: var(--code-bg) !important;
  border-top: 0.5px solid var(--line) !important;
  padding: 10px 14px !important;
  text-indent: 0 !important;
  overflow-x: auto !important;
  position: relative !important;
}

html.phase5 .tool-body pre {
  font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace !important;
  font-size: 12px !important;
  line-height: 17px !important;
  color: var(--ink) !important;
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
  white-space: pre !important;
  overflow: visible !important;
}

html.phase5 .tool-body pre code {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
}

/* Defect 5: Ensure zero pseudo-elements or gutters overlap code glyphs */
html.phase5 .tool-body::before,
html.phase5 .tool-body::after,
html.phase5 .tool-body pre::before,
html.phase5 .tool-body pre::after,
html.phase5 .tool-body pre > span:first-child::before {
  content: none !important;
  display: none !important;
}

/* Code blocks */
html.phase5 :is(.codeblock, .md > pre) {
  border-radius: 8px !important;
  border: 0.5px solid var(--line2) !important;
  background: var(--surface) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
  margin: 10px 0 !important;
}

html.phase5:is([data-theme="kapur-night"], [data-theme="dark"]) :is(.codeblock, .md > pre) {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

html.phase5 .codeblock .code-head {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  color: var(--ink-2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: var(--surface) !important;
  border-bottom: 0.5px solid var(--line) !important;
}

html.phase5 .codeblock .code-lang {
  font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  text-transform: none !important;
}

html.phase5 .codeblock pre {
  background: var(--code-bg) !important;
  font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace !important;
  font-size: 12px !important;
  line-height: 17px !important;
  color: var(--ink) !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  text-indent: 0 !important;
}

html.phase5 .codeblock pre code {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* --------------------------------------------------------------------------
   I. Composer — 760px Centered Box, Sized Model Pill (Defect 4 Fixed)
   -------------------------------------------------------------------------- */

html.phase5 :is(#composer, #composer.collapsed, #composer.expanded) {
  /* Side gutters in a narrow window (the box touched the window edge). */
  width: calc(100% - 32px) !important;
  max-width: 760px !important;
  margin: 0 auto 18px !important;
  border-radius: 12px !important;
  border: 0.5px solid var(--line2) !important;
  background: var(--surface) !important;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.02), 0 4px 16px rgba(0, 0, 0, 0.07) !important;
  padding: 10px 12px 8px !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Composer shadow on dark themes */
html.phase5[data-theme="kapur-night"] :is(#composer, #composer.collapsed, #composer.expanded) {
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.04), 0 4px 16px rgba(0, 0, 0, 0.14) !important;
}

@media (prefers-color-scheme: dark) {
  html.phase5[data-theme="automatic"] :is(#composer, #composer.collapsed, #composer.expanded),
  html.phase5:not([data-theme]) :is(#composer, #composer.collapsed, #composer.expanded),
  html.phase5[data-theme=""] :is(#composer, #composer.collapsed, #composer.expanded) {
    box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.04), 0 4px 16px rgba(0, 0, 0, 0.14) !important;
  }
}

/* Reset inner .crow container so the outer box is the only styled surface */
html.phase5 #composer.collapsed .crow,
html.phase5 #composer.expanded .crow,
html.phase5 #composer .crow {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 6px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

html.phase5 #composer.collapsed #input,
html.phase5 #composer.expanded #input,
html.phase5 #composer #input {
  order: 1 !important;
  width: 100% !important;
  /* No fixed height: grow() sets it inline from the text. A 24px !important
     here beat that inline height, so a multi-line draft stayed one line. */
  min-height: 24px !important;
  max-height: 160px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  line-height: 18px !important;
  color: var(--ink) !important;
  padding: 2px 4px !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  resize: none !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

html.phase5 #composer #input::placeholder {
  color: var(--ink-3) !important;
  opacity: 1 !important;
}

/* Toolbar row below input */
html.phase5 #composer.collapsed #p4-toolbar,
html.phase5 #composer.expanded #p4-toolbar,
html.phase5 #composer #p4-toolbar {
  order: 2 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  height: 28px !important;
  min-height: 28px !important;
  width: 100% !important;
  gap: 6px !important;
}

/* Tool button (+) */
html.phase5 #composer.collapsed #btn-plus,
html.phase5 #composer.expanded #btn-plus,
html.phase5 #composer #btn-plus {
  order: 1 !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  color: var(--ink-2) !important;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
}

html.phase5 #composer #btn-plus:hover {
  background: var(--hover) !important;
  color: var(--ink) !important;
}

/* Defect 4: Model pill sizes to content up to max-width with ellipsis, never mid-glyph */
html.phase5 #composer .p4-meta-group,
html.phase5 #composer.collapsed .p4-meta-group,
html.phase5 #composer.expanded .p4-meta-group {
  order: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  max-width: 440px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  flex: 0 1 auto !important;
}

html.phase5 #composer .p4-model-chip,
html.phase5 #composer.collapsed .p4-model-chip,
html.phase5 #composer.expanded .p4-model-chip {
  width: auto !important;
  max-width: 380px !important;
  min-width: 0 !important;
  height: 24px !important;
  min-height: 24px !important;
  border-radius: 6px !important;
  background: var(--hover) !important;
  color: var(--ink-2) !important;
  font-size: 12px !important;
  line-height: 24px !important;
  padding: 0 9px !important;
  border: none !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  flex: 0 1 auto !important;
}

html.phase5 #composer #p4-model-name {
  display: inline-block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

html.phase5 #composer :is(.pill, .tray-run, .p4-action-tray button, #team-pill) {
  height: 24px !important;
  min-height: 24px !important;
  border-radius: 6px !important;
  background: var(--hover) !important;
  color: var(--ink-2) !important;
  font-size: 12px !important;
  line-height: 24px !important;
  padding: 0 9px !important;
  border: none !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer !important;
}

html.phase5 #composer.collapsed .p4-spacer,
html.phase5 #composer.expanded .p4-spacer,
html.phase5 #composer .p4-spacer {
  order: 3 !important;
  display: flex !important;
  flex: 1 1 auto !important;
}

/* Mic button */
html.phase5 #composer.collapsed #btn-mic,
html.phase5 #composer.expanded #btn-mic,
html.phase5 #composer #btn-mic {
  order: 4 !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  color: var(--ink-2) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
}

html.phase5 #composer #btn-mic:hover {
  background: var(--hover) !important;
  color: var(--ink) !important;
}

html.phase5 #composer #btn-mic svg {
  width: 16px !important;
  height: 16px !important;
}

/* Send button: 28px circle, accent, white arrow */
html.phase5 #composer.collapsed :is(#btn-send, #btn-stop),
html.phase5 #composer.expanded :is(#btn-send, #btn-stop),
html.phase5 #composer :is(#btn-send, #btn-stop) {
  order: 5 !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  opacity: 1 !important;
  transition: transform 150ms cubic-bezier(.25,.46,.45,.94), opacity 150ms ease;
}

html.phase5 #composer #btn-send svg {
  width: 14px !important;
  height: 14px !important;
  stroke: #FFFFFF !important;
  stroke-width: 2.2 !important;
}

html.phase5 #composer #btn-stop {
  background: var(--danger) !important;
}

html.phase5 #composer #btn-stop svg {
  width: 12px !important;
  height: 12px !important;
  fill: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   J. Sheets, Popovers & Menus
   -------------------------------------------------------------------------- */

/* Sheets: radius 12px, 0.5px strong line border */
html.phase5 .modal .sheet,
html.phase5 .sheet {
  border-radius: 12px !important;
  border: 0.5px solid var(--line2) !important;
  background: var(--surface) !important;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}

html.phase5[data-theme="kapur-night"] :is(.sheet, .modal .sheet) {
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.10), 0 8px 32px rgba(0, 0, 0, 0.45) !important;
}

/* Menus & Popovers: radius 8px, 0.5px strong line, backdrop blur */
html.phase5 :is(.sys-menu-pop, .sess-pop) {
  border-radius: 8px !important;
  border: 0.5px solid var(--line2) !important;
  background: var(--side) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 8px 32px rgba(0, 0, 0, 0.12) !important;
  padding: 4px !important;
}

html.phase5[data-theme="kapur-night"] :is(.sys-menu-pop, .sess-pop) {
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.10), 0 8px 32px rgba(0, 0, 0, 0.45) !important;
}

/* Menu rows: 28-30px, radius 6px */
html.phase5 :is(.sys-menu-pop, .sess-pop) .sess-pop-btn {
  height: 28px !important;
  min-height: 28px !important;
  max-height: 30px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  line-height: 18px !important;
  padding: 0 8px !important;
  gap: 8px !important;
  border: none !important;
  color: var(--ink) !important;
  transition: background-color 150ms cubic-bezier(.25,.46,.45,.94), color 150ms cubic-bezier(.25,.46,.45,.94);
}

html.phase5 :is(.sys-menu-pop, .sess-pop) .sess-pop-btn:hover {
  background: var(--hover) !important;
  color: var(--ink) !important;
}

html.phase5 :is(.sys-menu-pop, .sess-pop) .sess-pop-btn:active {
  background: var(--sel) !important;
  color: var(--ink) !important;
}

/* --------------------------------------------------------------------------
   K. Details — Scrollbars, Transitions & Focus Rings
   -------------------------------------------------------------------------- */

html.phase5 * {
  scrollbar-width: thin;
  scrollbar-color: var(--line2) transparent;
}

html.phase5 *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

html.phase5 *::-webkit-scrollbar-track {
  background: transparent;
}

html.phase5 *::-webkit-scrollbar-thumb {
  background-color: var(--line2);
  border-radius: 3px;
}

html.phase5 :focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

/* --------------------------------------------------------------------------
   L. Platform Class Tweaks
   -------------------------------------------------------------------------- */

html.phase5.win * {
  scrollbar-width: thin;
}

/* --------------------------------------------------------------------------
   M. Phone-redesign parity (2026-10-18)
   Panels and sheets the phone redesign restyled for 44px finger targets;
   on the 260px desktop side panel they need mouse-sized controls.
   -------------------------------------------------------------------------- */

/* Notes toolbar: one line per button ("Save to list" wrapped to two), each
   as wide as its words. */
html.phase5 #pane-notes .f-toolbar {
  display: flex !important;
  gap: 6px !important;
}
html.phase5 #pane-notes .f-toolbar button {
  flex: 1 1 auto !important;
  height: 30px !important;
  min-height: 30px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  padding: 0 6px !important;
}

/* Settings switches: Mac shape — white knob on a grey track when off (the
   phone's ink-black knob read as a broken control on the white sheet). */
html.phase5 input[switch] {
  width: 40px !important;
  height: 24px !important;
  background: var(--surface-3) !important;
  border-color: transparent !important;
}
html.phase5 input[switch]::before {
  width: 20px !important;
  height: 20px !important;
  top: 2px !important;
  left: 2px !important;
  background: #FFFFFF !important;
}
html.phase5 input[switch]:checked {
  background: var(--accent) !important;
}
html.phase5 input[switch]:checked::before {
  transform: translateX(16px) !important;
}

/* "Needs your input" bar: the phone pins it 8px above the composer across the
   whole width. The desktop composer floats 18px up and is 760px wide, so the
   bar covered its top edge. Same column as the composer, clear of it. */
html.phase4 .p4-needs-input {
  left: 16px !important;
  right: 16px !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  bottom: calc(var(--composer-h, 60px) + 18px + 10px) !important;
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 10px !important;
}
html.phase4:has(.p4-needs-input:not([hidden])) #feed,
html.phase4.has-needs-input #feed {
  /* The desktop transcript already ends at the composer; room for the bar only. */
  padding-bottom: 72px !important;
}

/* Continue (to the chat that is replying) is a phone shortcut back from the
   Sessions page; on desktop the chat is already beside the list. */
html.phase5 #btn-continue-chat {
  display: none !important;
}

/* --------------------------------------------------------------------------
   N. Desktop feel (owner 2026-10-19: "feels like an HTML page, not a desktop
   app"). Mouse-sized controls, regular-weight text, pop-overs, Settings with
   section tabs, one question banner, arrow cursor, chrome not selectable.
   -------------------------------------------------------------------------- */

/* Arrow cursor and no text selection on the app chrome, like a Mac app.
   Links and the transcript keep theirs. */
html.phase5 :is(button, [role="button"], [role="tab"], label, .sess-v5-row, .ospi-row-btn, .desktop-rail-btn, .menu-item, .sess-pop-btn) {
  cursor: default !important;
}
html.phase5 :is(#desktop-rail, .desktop-panel-host .pager-head, #sess-list, .sess-seg, #hdr, #composer .crow, #picker-sheet .m-title, .p5-row-text, .desk-set-nav, .ospi-pill-zone) {
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* One "Needs your input" banner: the side-panel strip repeats the bar above
   the composer (desktop shows both side by side). */
html.phase5 .side-ask-strip {
  display: none !important;
}

/* Chat rows: a "New reply · 2" badge no longer squeezes the title to
   "Ep 0…" — badges wrap under a title that keeps at least half the row; the
   peek (eye) button shows on hover. */
html.phase5 .sess-v5-headline {
  flex-wrap: wrap !important;
  row-gap: 2px !important;
}
html.phase5 .sess-v5-headline .sess-v5-title {
  flex: 1 1 0 !important;
  min-width: 55% !important;
}
html.phase5 .sess-v5-headline .sess-v5-badges:not(:has(> :not([hidden]))) {
  display: none !important;
}
html.phase5 .sess-v5-row:not(:hover) .sess-v5-peek {
  display: none !important;
}

/* Sheets: Mac-sized type and controls instead of the phone's 44px, bold. */
html.phase5 #picker-sheet .m-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
html.phase5 .p5-group-title {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ink-2) !important;
}
html.phase5 .p5-card {
  border-radius: 10px !important;
  border-color: var(--line2) !important;
}
html.phase5 .p5-row {
  min-height: 40px !important;
  padding: 8px 12px !important;
  border-bottom-color: var(--line) !important;
}
html.phase5 .p5-row-label {
  font-size: 13px !important;
  font-weight: 500 !important;
}
html.phase5 .p5-row-desc {
  font-size: 11.5px !important;
}
html.phase5 .p5-btn {
  min-height: 26px !important;
  min-width: 0 !important;
  padding: 0 12px !important;
  border-radius: 6px !important;
  border: 0.5px solid var(--line2) !important;
  background: var(--surface) !important;
  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.08) !important;
  font: 500 13px/1 system-ui, -apple-system, sans-serif !important;
}
html.phase5 .p5-btn:hover {
  background: var(--surface-2) !important;
}
html.phase5 #picker .m-dismiss {
  align-self: flex-end !important;
  width: auto !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 18px !important;
  margin: 6px 0 0 !important;
  border-radius: 6px !important;
  border: none !important;
  background: var(--accent) !important;
  color: #FFFFFF !important;
  font: 500 13px/28px system-ui, -apple-system, sans-serif !important;
}
html.phase5 #picker .btn-circle-refresh {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
}
html.phase5 #picker .btn-circle-refresh svg {
  width: 14px !important;
  height: 14px !important;
}
html.phase5 .ospi-textsize-btn {
  padding: 4px 10px !important;
  font-size: 12px !important;
}

/* Pop-over (picker.js anchorPickerTo): Usage and Notifications drop down from
   their header button; no dimmed window, no Done button (click outside / Esc). */
html.phase5 #picker.desk-pop {
  background: transparent !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  padding: 0 !important;
}
html.phase5 #picker.desk-pop > .sheet {
  position: absolute !important;
  top: var(--pop-top, 56px) !important;
  right: var(--pop-right, 12px) !important;
  width: 360px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(72vh, 600px) !important;
  padding: 12px 12px 10px !important;
  border-radius: 10px !important;
  background: var(--side, var(--surface)) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  backdrop-filter: blur(30px) saturate(180%) !important;
  animation: deskPopIn 0.14s ease-out !important;
}
html.phase5 #picker.desk-pop .m-dismiss {
  display: none !important;
}
html.phase5 #picker.desk-pop .m-title-row {
  padding: 0 0 6px !important;
}
@keyframes deskPopIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* Settings: section list on the left, one section at a time (sheets.js
   openSettingsSheet, .desk-settings). */
html.phase5 #picker .sheet.desk-settings {
  width: min(94vw, 720px) !important;
  height: min(86dvh, 560px) !important;
  min-height: min(86dvh, 560px) !important;
  max-height: min(86dvh, 560px) !important;
  padding: 14px 16px 12px !important;
  overflow: hidden !important;
}
html.phase5 .desk-set-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: 16px;
}
html.phase5 .desk-set-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-right: 12px;
  border-right: 0.5px solid var(--line2);
  overflow-y: auto;
}
html.phase5 .desk-set-tab {
  text-align: left;
  border: none;
  background: transparent;
  color: var(--ink);
  font: 400 13px/1.2 system-ui, -apple-system, sans-serif;
  padding: 6px 10px;
  border-radius: 6px;
}
html.phase5 .desk-set-tab:hover {
  background: var(--surface-2);
}
html.phase5 .desk-set-tab.on {
  background: var(--accent);
  color: #FFFFFF;
}
html.phase5 .desk-settings .p5-settings-list {
  overflow-y: auto;
  min-height: 0;
  padding-right: 2px;
}
html.phase5 .desk-settings .p5-group-title {
  font-size: 13px !important;
  color: var(--ink) !important;
  padding: 0 2px 4px !important;
}

/* Keyboard shortcuts sheet (pager.js openShortcutsSheet). */
html.phase5 #picker .sheet.desk-keys-sheet {
  width: 380px !important;
  height: auto !important;
  min-height: 0 !important;
}
html.phase5 .desk-keys {
  display: flex;
  flex-direction: column;
}
html.phase5 .desk-keys-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 2px;
  border-bottom: 0.5px solid var(--line);
  font-size: 13px;
}
html.phase5 .desk-keys-k {
  font: 500 12px/1 system-ui, -apple-system, sans-serif;
  padding: 4px 7px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 0.5px solid var(--line2);
}

/* Question card: desktop-sized choices instead of 44px finger buttons. */
html.phase5 .question-chip :is(.q-btn, .q-ghost) {
  min-height: 30px !important;
  padding: 5px 12px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}