* { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --bg: #0d1117; --card: #161b22; --border: #30363d;
    --text: #e6edf3; --dim: #8b949e; --accent: #58a6ff;
    --green: #3fb950; --red: #f85149; --yellow: #d29922;
    --cyan: #39d2c0;
    --on-accent: #0d1117;
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
    --radius-control: 8px; --radius-dialog: 12px; --layer-dialog: 1100; --layer-confirmation: 1200;
    --control-height: 40px; --control-font: 0.9rem;
  }
  body { --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
  body.light {
    --bg: #ffffff; --card: #f6f8fa; --border: #d0d7de;
    --text: #1f2328; --dim: #656d76; --accent: #0969da;
    --green: #1a7f37; --red: #cf222e; --yellow: #9a6700;
    --cyan: #0550ae; --on-accent: #fff;
  }
  body.light .board-sortable-ghost { background: rgba(9,105,218,0.08) !important; }
  body.light .log-line { filter: none; }
  /* ── Light mode contrast fixes ── */
  /* Terminal output always dark regardless of theme — ANSI colors need dark bg */
  body.light .overlay-body {
    background: #1c2128 !important; color: #cdd9e5 !important;
    /* The terminal is dark in both themes, so it keeps the dark palette too.
       Without this, path links resolved to light-mode #0550ae: dark blue on a
       dark terminal (peek survey, 2026-09-27). */
    --text: #e6edf3; --dim: #8b949e; --accent: #58a6ff; --border: #30363d;
    --green: #3fb950; --red: #f85149; --yellow: #d29922; --cyan: #39d2c0;
  }
  body.light .peek-agent-nav button {
    background: #1c2128; border-color: rgba(255,255,255,0.2); color: #cdd9e5;
  }
  /* Connection status — hardcoded neon colors are invisible on white */
  body.light .conn-status.online  { color: #1a7f37; background: rgba(26,127,55,0.1); }
  body.light .conn-status.online::before  { background: #1a7f37; }
  body.light .conn-status.polling { color: #9a6700; background: rgba(154,103,0,0.1); }
  body.light .conn-status.polling::before { background: #9a6700; }
  body.light .conn-status.offline { color: #cf222e; background: rgba(207,34,46,0.1); }
  body.light .conn-status.offline::before { background: #cf222e; }
  /* Board empty placeholder — 50% transparent is invisible on white */
  body.light .board-empty { color: var(--dim) !important; }
  /* Board tag chips — very transparent bg needs a real border */
  body.light .board-card-tag { border: 1px solid var(--border); }
  /* Session card terminal preview — semi-transparent dark bg becomes gray in light mode */
  body.light .card-preview-lines {
    background: #1c2128; color: #cdd9e5;
  }
  /* Peek search highlight — white text on yellow bg fine in dark; fix for light terminal */
  body.light .peek-highlight { color: #fff; }
  /* Ac section headers */
  body.light .ac-section { background: var(--bg); }
  /* Workspace overlay + pane header/send area — hardcoded dark bg needs light override */
  body.light #grid-view { background: var(--bg); }
  body.light .gp-header { background: var(--card); }
  body.light .gp-send { background: var(--card); }
  body.light .gp-close, body.light .gp-peek-btn { color: var(--dim); }
  body.light #gridstack-container .grid-stack-item-content { background: var(--card); }
  body.light .gp-body { color: var(--text); }
  body.light .gp-send .chips .chip { background: var(--bg); color: var(--text); border-color: var(--border); }
  /* File/explore overlay — hardcoded near-black backdrop + body need light overrides */
  body.light .file-overlay { background: rgba(240,242,245,0.97); }
  body.light .file-overlay-header h2 { color: var(--text); }
  /* Directory listing body — light bg with readable text */
  body.light #explore-overlay .file-overlay-body { background: var(--bg); color: var(--text); }
  body.light .explore-name { color: var(--text); }
  body.light .explore-row:hover { background: var(--card); }
  /* File viewer body — keep dark for ANSI/code readability; use card bg for non-raw views */
  body.light #file-overlay .file-overlay-body { background: #1c2128; color: #cdd9e5; }
  body.light #file-overlay .file-overlay-body.file-image,
  body.light #file-overlay .file-overlay-body.file-video,
  body.light #file-overlay .file-overlay-body.file-pdf,
  body.light #file-overlay .file-overlay-body.markdown { background: var(--bg); color: var(--text); }
  body.light #file-overlay .file-overlay-body.file-video { background: #000; }
  /* ── Reports ── */
  .report-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
  .report-card-header { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--border); background:var(--bg); }
  .report-card-title { font-weight:600; font-size:0.85rem; flex:1; }
  .report-refresh-btn { background:none; border:none; cursor:pointer; color:var(--dim); font-size:0.85rem; padding:3px 7px; border-radius:4px; }
  .report-refresh-btn:hover { background:var(--card); color:var(--text); }
  .report-refresh-btn.spinning { animation: spin 1s linear infinite; }
  .report-del-btn { background:none; border:none; cursor:pointer; color:var(--dim); font-size:0.8rem; padding:3px 7px; border-radius:4px; }
  .report-del-btn:hover { background:rgba(248,81,73,0.1); color:#f85149; }
  .report-period-tabs { display:flex; gap:4px; }
  .report-period-tab { padding:3px 9px; border-radius:5px; border:1px solid var(--border); background:none; color:var(--dim); font-size:0.75rem; cursor:pointer; }
  .report-period-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); }
  .report-body { padding:14px; }
  .report-chart-wrap { position:relative; height:200px; margin-bottom:12px; }
  .report-table { width:100%; border-collapse:collapse; font-size:0.78rem; }
  .report-table th { text-align:left; color:var(--dim); font-weight:500; padding:4px 8px; border-bottom:1px solid var(--border); }
  .report-table td { padding:5px 8px; border-bottom:1px solid var(--border); }
  .report-table tr:last-child td { border-bottom:none; }
  .report-vendor-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
  .report-error { color:var(--dim); font-size:0.78rem; padding:4px 0; }
  .report-last-refresh { font-size:0.72rem; color:var(--dim); }
  .report-total { font-weight:600; }
  @keyframes spin { to { transform: rotate(360deg); } }
  html { font-size: 16px; overflow-x: clip; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    background: var(--bg); color: var(--text);
    min-height: 100vh; min-height: 100dvh;
    width: 100%; overflow-x: clip;
    padding: 16px; padding-top: max(16px, var(--chrome-tab-h, 0px), env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    -webkit-text-size-adjust: 100%;
  }
  h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: 16px; }
  h1 .dim { color: var(--dim); font-weight: 400; font-size: 0.85rem; }

  /* Session cards — list mode (default) */
  .cards { display: flex; flex-direction: column; gap: 10px; }
  /* Wide screens: the single-column list stretches cards absurdly — flow into
     a responsive column grid instead. The explicit tile view (.grid-mode)
     keeps its own denser packing; mobile stays a single column. */
  @media (min-width: 1100px) {
    .cards:not(.grid-mode) { display: grid; grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); gap: 12px; align-items: start; }
  }

  /* Layout view controls */
  .tile-controls { display: flex; gap: 4px; align-items: center; }
  .tile-btn { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--dim); cursor: pointer; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; }
  .tile-btn:hover { border-color: var(--accent); color: var(--text); }
  .tile-btn.active { background: var(--accent); color: #000; border-color: var(--accent); }
  .tile-grid-only { display: none; }
  @media (min-width: 900px) {
    .tile-grid-only { display: flex; align-items: center; justify-content: center; }
    .cards.grid-mode { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
  }
  /* Sortable drag feedback */
  body.session-dragging, body.session-dragging * { user-select: none !important; -webkit-user-select: none !important; cursor: grabbing !important; }
  body.session-dragging .card { transition: none !important; }
  .sortable-ghost { opacity: 0.35; background: rgba(88,166,255,0.07) !important; border: 2px dashed var(--accent) !important; border-radius: 10px; }
  .sortable-chosen { opacity: 0.7; box-shadow: none; }
  .sortable-drag { opacity: 0.96; box-shadow: 0 14px 36px rgba(0,0,0,0.45); transform: rotate(1deg) scale(1.02); border-radius: 10px; }
  .cards.grid-mode .card { cursor: grab; }
  .cards.grid-mode .card:active { cursor: grabbing; }

  .card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 10px; padding: 14px 16px; cursor: default;
    transition: border-color 0.15s; overflow: hidden;
    -webkit-tap-highlight-color: transparent; min-width: 0;
    user-select: text; -webkit-user-select: text;
  }
  /* In-flight destructive verb (archive/delete). The server does real work
     before it answers — capture the scrollback, stop the agent, kill tmux —
     and with no marker here the card sat looking untouched for seconds, which
     reads as the click having done nothing. */
  .card.card-busy { opacity: 0.55; pointer-events: none; position: relative; }
  .card.card-busy::after {
    content: attr(data-busy) "\2026";
    position: absolute; top: 8px; right: 10px;
    font-size: 0.7rem; letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--dim); background: var(--bg);
    border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px;
  }
  .card:active { border-color: var(--accent); }
  .card-header { display: flex; flex-direction: column; gap: 4px; position: relative; min-width: 0; cursor: default; }
  .card-header-top { display: flex; align-items: center; gap: 10px; width: 100%; }
  .card-drag-handle {
    flex-shrink: 0; width: 16px; height: 20px; display: flex; align-items: center; justify-content: center;
    cursor: default; color: var(--dim); opacity: 0; transition: opacity 0.15s; border-radius: 3px;
    user-select: none; -webkit-user-select: none; touch-action: none;
  }
  .card:hover .card-drag-handle { opacity: 0.7; cursor: grab; }
  .card-drag-handle:hover { opacity: 1 !important; cursor: grab; color: var(--fg); background: rgba(139,148,158,0.1); }
  .card-drag-handle:active { cursor: grabbing; }
  @media (hover: none) { .card-drag-handle { opacity: 0.6; cursor: grab; } }
  .card-header-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: 20px; min-width: 0; }
  /* The sched/doing counts get their OWN row under the status line (Ethan,
     2026-08-09). On one line they were the last item in a row that already
     carries a status badge, a queued badge and a relative timestamp, so on a
     narrow card they ran off the edge and rendered as "8 doi" — clipped, with
     no ellipsis to even signal truncation. flex-basis:100% forces the wrap
     deterministically instead of leaving it to whatever width happens to
     remain. */
  .card-header-meta .meta-count { flex: 0 0 100%; margin-left: 0; }
  .card-menu-btn {
    width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border);
    background: transparent; color: var(--dim); cursor: pointer;
    font-size: 1.2rem; font-weight: 700; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; -webkit-tap-highlight-color: transparent; letter-spacing: 1px;
  }
  .card-menu-btn:active { background: var(--border); color: var(--text); }

  /* Card dropdown menu */
  .card-menu {
    display: none; position: fixed;
    background: var(--card); border: 1px solid var(--border);
    /* TWO constraints, and only a value above BOTH satisfies them.
       1. Menus can open upward into the global approval strip (90), so a
          pending permission request must not make worker actions unclickable.
       2. The column ellipsis menu also opens INSIDE #peek-overlay, which is
          `.overlay { z-index: 100 }` a few hundred lines up. At 95 it paints
          underneath: the menu is built, populated and positioned correctly and
          the click does nothing. Measured with elementFromPoint at the menu's
          own corner, which returned the tab bar. It works on the global board,
          which is not inside an overlay, which is why 95 looks sufficient.
       310 clears the strip (90) and the overlay (100) and the modal backdrop
       (300), and stays under the toast/picker layers (2000+) that must cover
       it. 95 clears only the first. */
    border-radius: 10px; min-width: 200px; z-index: 310;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    overflow-x: hidden; overflow-y: auto; max-height: 500px;
  }
  .card-menu.open { display: block; }
  .card-menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; cursor: pointer; font-size: 0.88rem;
    border-bottom: 1px solid var(--border); color: var(--text);
    -webkit-tap-highlight-color: transparent;
  }
  .card-menu-item:last-child { border-bottom: none; }
  .card-menu-item:active { background: var(--border); }
  .card-menu-item .mi { width: 18px; text-align: center; flex-shrink: 0; font-size: 0.85rem; }
  .card-menu-item.danger { color: var(--red); }
  .card-menu-sep { height: 1px; background: var(--border); }

  /* Archived sessions */
  #archived-section { padding: 0 12px 12px; }
  /* Paused sits directly above Archived, below the worker cards (Ethan,
     2026-09-14), so it takes Archived's side padding and spaces itself from the
     cards above rather than below. */
  #project-workers-section, #review-section { padding: 0 12px; }
  #paused-section { padding: 0 12px; }
  #expired-section { padding: 0 12px; }
  .project-footer { display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--accent);border-radius:8px;color:var(--accent);background:var(--card);font-size:.82rem;font-weight:600;margin-top:8px; }
  .project-chevron { font-size:.65rem;transition:transform .15s; }
  .project-chevron.open { transform:rotate(90deg); }
  .project-workers-body { display:flex;flex-direction:column;gap:5px;margin-top:6px; }
  .project-worker-row { display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--card);min-width:0; }
  .project-worker-row-main { flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.8rem; }
  .project-worker-row-main strong { overflow-wrap:anywhere; }
  .project-worker-row p { flex:1;min-width:0;margin:0;color:var(--dim);font-size:.74rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
  .worker-group-footer { position:relative;min-height:44px;box-sizing:border-box; }
  .worker-group-toggle { flex:1;align-self:stretch;min-width:0;display:flex;align-items:center;gap:8px;border:0;background:transparent;color:inherit;text-align:left;font:inherit;font-weight:inherit;cursor:pointer; }
  .worker-group-menu { position:relative;margin-left:auto;color:var(--text); }
  .worker-group-menu summary { display:grid;place-items:center;width:40px;min-height:40px;list-style:none;border:1px solid var(--border);border-radius:8px;cursor:pointer;font-size:20px;line-height:1; }
  .worker-group-menu summary::-webkit-details-marker { display:none; }
  .worker-group-menu[open] summary { border-color:var(--accent); }
  .worker-group-dropdown { position:absolute;z-index:30;right:0;top:calc(100% + 4px);min-width:170px;display:flex;flex-direction:column;padding:4px;background:var(--card);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18); }
  .worker-group-dropdown button,.worker-group-dropdown span { width:100%;border:0;background:transparent;color:var(--text);text-align:left;padding:10px 12px;font:inherit;font-size:.8rem;cursor:pointer; }
  .worker-group-dropdown button:hover { background:var(--bg); }
  .worker-group-note { color:var(--dim) !important;cursor:default !important;font-size:.75rem !important; }
  .wsel { display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;flex:0 0 auto;cursor:pointer; }
  .wsel input { width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--accent); }
  .worker-selbar { position:fixed;left:12px;right:12px;margin:0 auto;width:fit-content;bottom:calc(12px + env(safe-area-inset-bottom));z-index:900;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;max-width:calc(100vw - 24px);box-sizing:border-box;padding:8px 12px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.25); }
  .worker-selbar-count { font-size:.85rem;font-weight:600;color:var(--text); }
  .worker-selbar-note { font-size:.8rem;color:var(--dim); }
  @media(max-width:600px) { .wsel { min-width:44px;min-height:44px; } .worker-selbar .btn { min-height:44px; } }
  @media(max-width:600px) { .project-worker-row { flex-wrap:wrap; }.project-worker-row-main,.project-worker-row p { flex-basis:100%; }.project-worker-row .btn { min-height:44px;width:100%; }.worker-group-menu summary { min-width:44px;min-height:44px; } }

  .review-footer {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border-radius: 8px; cursor: pointer;
    border: 1px solid #8b5cf6; color: #7c3aed;
    font-size: 0.82rem; font-weight: 600; user-select: none; margin-top: 8px;
    background: var(--card);
  }
  .review-footer:hover { border-color: #a78bfa; }
  .review-chevron { font-size: 0.65rem; transition: transform 0.15s; color: #7c3aed; }
  .review-chevron.open { transform: rotate(90deg); }
  .review-body { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; }
  .review-card {
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px 11px; border-radius: 8px; border: 1px solid color-mix(in srgb, #8b5cf6 40%, var(--border));
    background: var(--card); font-size: 0.8rem;
  }
  .review-card-top { display: flex; align-items: center; gap: 7px; min-width: 0; flex-wrap: wrap; }
  .review-card-name { font-weight: 600; color: var(--text); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .review-card-name:hover { color: #7c3aed; }
  .review-card-chip {
    font-size: 0.63rem; padding: 1px 6px; border-radius: 9px; flex-shrink: 0;
    background: var(--bg); border: 1px solid var(--border); color: var(--dim); white-space: nowrap;
  }
  .review-card-chip.model { color: var(--cyan, #39d2c0); }
  .review-card-spacer { flex: 1; min-width: 8px; }
  .review-card-meta {
    color: var(--dim); font-size: 0.7rem; display: flex; gap: 5px 10px; flex-wrap: wrap;
    align-items: center; min-width: 0;
  }
  .review-card-tag { color: #7c3aed; font-size: 0.68rem; }
  .review-card-preview {
    color: var(--dim); font-size: 0.72rem; line-height: 1.4; min-width: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .review-card-actions { display: flex; gap: 4px; flex-shrink: 0; }
  .review-open-btn {
    padding: 3px 10px; border-radius: 5px; font-size: 0.75rem; border: 1px solid #8b5cf6;
    color: #7c3aed; background: transparent; cursor: pointer; white-space: nowrap; min-height: 28px;
  }
  .review-open-btn:hover { background: #8b5cf6; color: #fff; }
  .review-archive-btn {
    padding: 3px 7px; border-radius: 5px; font-size: 0.75rem; border: 1px solid var(--border);
    color: var(--dim); background: transparent; cursor: pointer; min-height: 28px;
  }
  .review-archive-btn:hover { border-color: var(--red); color: var(--red); }
  @media (max-width: 600px) {
    .review-card { padding: 10px 12px; gap: 6px; }
    .review-card-top { gap: 6px; }
    .review-card-name { font-size: 0.85rem; max-width: calc(100% - 120px); }
    .review-open-btn { min-height: 44px; min-width: 44px; padding: 6px 14px; font-size: 0.82rem; }
    .review-archive-btn { min-height: 44px; min-width: 44px; padding: 6px 10px; font-size: 0.82rem; }
    .review-footer { min-height: 44px; padding: 10px 14px; font-size: 0.85rem; }
  }

  .paused-footer {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border-radius: 8px; cursor: pointer;
    border: 1px solid #d29922; color: #d29922;
    font-size: 0.82rem; font-weight: 600; user-select: none; margin-top: 8px;
    background: var(--card);
  }
  .paused-footer:hover { border-color: #e5a825; }
  .paused-chevron { font-size: 0.65rem; transition: transform 0.15s; color: #d29922; }
  .paused-chevron.open { transform: rotate(90deg); }
  .paused-body { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; }
  .paused-card {
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px 11px; border-radius: 8px; border: 1px solid color-mix(in srgb, #d29922 40%, var(--border));
    background: var(--card); font-size: 0.8rem;
  }
  .paused-card-top { display: flex; align-items: center; gap: 7px; min-width: 0; flex-wrap: wrap; }
  .paused-card-name { font-weight: 600; color: var(--text); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .paused-card-name:hover { color: #d29922; }
  .paused-card-chip {
    font-size: 0.63rem; padding: 1px 6px; border-radius: 9px; flex-shrink: 0;
    background: var(--bg); border: 1px solid var(--border); color: var(--dim); white-space: nowrap;
  }
  .paused-card-chip.model { color: var(--cyan, #39d2c0); }
  .paused-card-spacer { flex: 1; min-width: 8px; }
  .paused-card-meta {
    color: var(--dim); font-size: 0.7rem; display: flex; gap: 5px 10px; flex-wrap: wrap;
    align-items: center; min-width: 0;
  }
  .paused-card-tag { color: #d29922; font-size: 0.68rem; }
  .paused-card-preview {
    color: var(--dim); font-size: 0.72rem; line-height: 1.4; min-width: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .paused-card-actions { display: flex; gap: 4px; flex-shrink: 0; }
  .paused-resume-btn {
    padding: 3px 10px; border-radius: 5px; font-size: 0.75rem; border: 1px solid #d29922;
    color: #d29922; background: transparent; cursor: pointer; white-space: nowrap; min-height: 28px;
  }
  .paused-resume-btn:hover { background: #d29922; color: #000; }
  .paused-archive-btn {
    padding: 3px 7px; border-radius: 5px; font-size: 0.75rem; border: 1px solid var(--border);
    color: var(--dim); background: transparent; cursor: pointer; min-height: 28px;
  }
  .paused-archive-btn:hover { border-color: var(--red); color: var(--red); }
  @media (max-width: 600px) {
    .paused-card { padding: 10px 12px; gap: 6px; }
    .paused-card-top { gap: 6px; }
    .paused-card-name { font-size: 0.85rem; max-width: calc(100% - 120px); }
    .paused-resume-btn { min-height: 44px; min-width: 44px; padding: 6px 14px; font-size: 0.82rem; }
    .paused-archive-btn { min-height: 44px; min-width: 44px; padding: 6px 10px; font-size: 0.82rem; }
    .paused-footer { min-height: 44px; padding: 10px 14px; font-size: 0.85rem; }
  }

  /* Expired ephemeral workers */
  .expired-footer {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--red, #f85149); color: var(--red, #f85149);
    font-size: 0.82rem; font-weight: 600; user-select: none; margin-top: 8px;
    background: var(--card);
  }
  .expired-footer:hover { border-color: color-mix(in srgb, var(--red, #f85149) 80%, white); }
  .expired-chevron { font-size: 0.65rem; transition: transform 0.15s; color: var(--red, #f85149); }
  .expired-chevron.open { transform: rotate(90deg); }
  .expired-body { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; }
  @media (max-width: 600px) {
    .expired-footer { min-height: 44px; padding: 10px 14px; font-size: 0.85rem; }
  }

  /* Archived sessions */
  #archived-section { padding: 0 12px 12px; }
  .archived-footer {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--border); color: var(--text);
    font-size: 0.82rem; font-weight: 600; user-select: none; margin-top: 8px;
    background: var(--card);
  }
  .archived-footer:hover { border-color: var(--accent); }
  .archived-chevron { font-size: 0.65rem; transition: transform 0.15s; color: var(--dim); }
  .archived-chevron.open { transform: rotate(90deg); }
  .archived-body { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; }
  .archived-card {
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px 11px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--card); font-size: 0.8rem;
  }
  .archived-card-top { display: flex; align-items: center; gap: 7px; min-width: 0; flex-wrap: wrap; }
  .archived-card-name { font-weight: 600; color: var(--text); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .archived-card-name:hover { color: var(--accent); }
  .archived-card-chip {
    font-size: 0.63rem; padding: 1px 6px; border-radius: 9px; flex-shrink: 0;
    background: var(--bg); border: 1px solid var(--border); color: var(--dim); white-space: nowrap;
  }
  .archived-card-chip.model { color: var(--cyan, #39d2c0); }
  .archived-card-chip.provider-codex { color: #10b981; }
  .archived-card-chip.provider-gemini { color: #d29922; }
  .archived-card-spacer { flex: 1; min-width: 8px; }
  .archived-card-meta {
    color: var(--dim); font-size: 0.7rem; display: flex; gap: 5px 10px; flex-wrap: wrap;
    align-items: center; min-width: 0;
  }
  .archived-card-meta code { font-size: 0.68rem; background: var(--bg); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; color: var(--text); word-break: break-all; }
  .archived-card-tag { color: var(--accent); font-size: 0.68rem; }
  .archived-card-preview {
    color: var(--dim); font-size: 0.72rem; line-height: 1.4; min-width: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .archived-card-actions { display: flex; gap: 4px; flex-shrink: 0; }
  .archived-wake-btn {
    padding: 3px 10px; border-radius: 5px; font-size: 0.75rem; border: 1px solid var(--accent);
    color: var(--accent); background: transparent; cursor: pointer; white-space: nowrap; min-height: 28px;
  }
  .archived-wake-btn:hover { background: var(--accent); color: #000; }
  .archived-del-btn {
    padding: 3px 7px; border-radius: 5px; font-size: 0.75rem; border: 1px solid var(--border);
    color: var(--dim); background: transparent; cursor: pointer; min-height: 28px;
  }
  .archived-del-btn:hover { border-color: var(--red); color: var(--red); }
  @media (max-width: 600px) {
    .archived-card { padding: 10px 12px; gap: 6px; }
    .archived-card-top { gap: 6px; }
    .archived-card-name { font-size: 0.85rem; max-width: calc(100% - 120px); }
    .archived-wake-btn { min-height: 44px; min-width: 44px; padding: 6px 14px; font-size: 0.82rem; }
    .archived-del-btn { min-height: 44px; min-width: 44px; padding: 6px 10px; font-size: 0.82rem; }
    .archived-footer { min-height: 44px; padding: 10px 14px; font-size: 0.85rem; }
  }

  /* Edit modal */
  .edit-overlay {
    display: none; position: fixed; inset: 0; background: rgba(1,4,9,0.85);
    z-index: 300; align-items: center; justify-content: center; padding: 20px;
  }
  .edit-overlay.active { display: flex; }
  .edit-box {
    background: var(--card); border: 1px solid var(--border); border-radius: 12px;
    padding: 20px; width: 100%; max-width: 380px;
    /* 92dvh, not the full 100dvh-40px, so overflow ENGAGES BEFORE the content
       reaches the window edge (Ethan, 2026-08-27, screenshot of New worker).
       The bug is the boundary case, not tall content: measured at 620px of
       content in 634px of room, the box "fits", `overflow-y:auto` never turns
       on, and the box is NOT scrollable — while `.edit-actions` is an 85px
       STICKY footer that overlays the bottom of that content regardless. So
       the last field sits under the button bar with no way to scroll to it,
       which is exactly what the screenshot shows: `Use worktree` cut in half
       by the Cancel/Create bar. Content that is merely CLOSE to the limit is
       the dangerous size; content well past it always scrolled fine.
       Reserving 8dvh guarantees the scroll affordance exists whenever the
       content is anywhere near full height. */
    max-height: min(92dvh, calc(100dvh - 40px)); overflow-y: auto;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  .edit-box h3 { font-size: 1rem; margin-bottom: 14px; }

  /* Voice fleet orchestrator (AMUX-3074) */
  .orch-box { max-width: 460px; }
  .orch-step { display: flex; flex-direction: column; gap: 10px; }
  .orch-mic {
    width: 84px; height: 84px; border-radius: 50%; align-self: center; margin: 8px 0 4px;
    border: 2px solid var(--accent); background: rgba(88,166,255,0.10); color: var(--accent);
    font-size: 2rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: transform .12s, background .2s; }
  .orch-mic:hover { background: rgba(88,166,255,0.18); }
  .orch-mic.recording { background: #f85149; border-color: #f85149; color: #fff; animation: orch-pulse 1.1s infinite; }
  @keyframes orch-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(248,81,73,0.45); } 50% { box-shadow: 0 0 0 12px rgba(248,81,73,0); } }
  .orch-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 34px; }
  .orch-wave .dict-bar { width: 4px; height: 100%; border-radius: 2px; background: var(--accent);
    transform: scaleY(0.12); transform-origin: center; transition: transform .06s; }
  .orch-status { text-align: center; font-size: 0.82rem; color: var(--dim); min-height: 20px; }
  .orch-label { font-size: 0.8rem; font-weight: 600; color: var(--text); }
  .orch-textarea { width: 100%; font-size: 0.9rem; padding: 10px 12px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--bg); color: var(--text); font-family: inherit;
    box-sizing: border-box; resize: vertical; }
  .orch-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
  .orch-actions .btn { min-height: 40px; }
  .orch-plan-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
  .orch-plan-item { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--bg); }
  .orch-plan-item.excluded { opacity: 0.45; }
  .orch-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
  .orch-plan-inc { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; cursor: pointer; }
  .orch-plan-worker { font-weight: 600; color: var(--accent); }
  .orch-plan-why { font-size: 0.7rem; color: var(--dim); text-align: right; }
  /* WHICH ACTION this row is (AMUX-2984). The plan used to be send-only, so a
     row needed no type; now a card, a message and a `stop` sit in one list and
     the reader is approving all three from the same checkbox. `flex-shrink:0`
     because at 375px the why-text is what should wrap, not the verb. */
  .orch-plan-act { font-size: 0.68rem; color: var(--dim); background: var(--card);
    border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px;
    white-space: nowrap; flex-shrink: 0; }
  .orch-plan-msg { width: 100%; font-size: 0.85rem; padding: 6px 8px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--card); color: var(--text); font-family: inherit;
    box-sizing: border-box; resize: vertical; }
  .orch-res-row { font-size: 0.85rem; padding: 4px 2px; }
  .orch-res-row.ok { color: var(--green, #3fb950); }
  .orch-res-row.bad { color: #f85149; }
  @media (max-width: 600px) {
    .orch-box { max-width: 100%; }
    .orch-mic { width: 96px; height: 96px; }
    .orch-plan-list { max-height: 38vh; }
    .orch-actions .btn { min-height: 44px; flex: 1; }
  }
  .edit-box input, .edit-box select, .edit-box textarea {
    width: 100%; font-size: 0.95rem; padding: 10px 12px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--bg); color: var(--text);
    outline: none; margin-bottom: 14px; font-family: inherit; box-sizing: border-box;
  }
  .edit-box textarea { resize: vertical; min-height: 72px; }
  .edit-box select { -webkit-appearance: menulist; }
  .edit-box input:focus, .edit-box select:focus, .edit-box textarea:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88,166,255,0.12);
  }
  .edit-box .edit-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
  /* Labeled field groups */
  .field-group { margin-bottom: 14px; }
  .field-group > input, .field-group > textarea, .field-group > select,
  .field-group > .ac-wrap, .field-group > .ac-wrap > input { margin-bottom: 0; }
  .field-label { display: block; font-size: 0.72rem; color: var(--dim); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
  .field-optional { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.68rem; }
  /* Template accordion */
  .tmpl-accordion { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; max-height: 260px; overflow-y: auto; }
  .tmpl-item { border-bottom: 1px solid var(--border); }
  .tmpl-item:last-child { border-bottom: none; }
  .tmpl-item-hdr { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
  .tmpl-item-hdr:hover { background: var(--hover); }
  .tmpl-item-icon { font-size: 1rem; flex-shrink: 0; }
  .tmpl-item-label { font-size: 0.85rem; font-weight: 600; flex: 1; }
  .tmpl-item-chev { color: var(--dim); font-size: 0.7rem; transition: transform 0.15s; }
  .tmpl-item.open .tmpl-item-chev { transform: rotate(90deg); }
  .tmpl-item-body { display: none; padding: 0 12px 10px 36px; }
  .tmpl-item.open .tmpl-item-body { display: block; }
  .tmpl-item-desc { font-size: 0.8rem; color: var(--dim); margin-bottom: 8px; line-height: 1.45; }
  .tmpl-item-dirs { font-size: 0.72rem; color: var(--dim); margin-bottom: 8px; }
  .tmpl-item-dirs code { background: var(--card); border: 1px solid var(--border); border-radius: 3px; padding: 1px 4px; font-size: 0.7rem; }
  .tmpl-selected-chip { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--accent) 15%, var(--bg)); border: 1px solid var(--accent); color: var(--accent); border-radius: 14px; padding: 4px 10px 4px 8px; font-size: 0.8rem; }
  .tmpl-selected-chip button { background: none; border: none; cursor: pointer; color: var(--dim); font-size: 1rem; line-height: 1; padding: 0; margin: 0; }
  .dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  }
  .dot.running { background: var(--green); box-shadow: 0 0 6px var(--green); }
  .dot.stopped { background: var(--red); opacity: 0.5; }
  .card-name { font-weight: 600; font-size: 1.05rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .card-model-inline { flex-shrink: 0; font-size: 0.65rem !important; padding: 1px 6px !important; opacity: 0.7; }
  .card-dir { color: var(--dim); font-size: 0.82rem; margin-top: 4px; margin-left: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 5px; }
  .card-dir-path { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .card-dir-edit { flex-shrink: 0; opacity: 0.3; transition: opacity 0.15s; cursor: pointer; font-size: 0.85rem; padding: 0 2px; border-radius: 3px; }
  .card-dir-edit:hover { color: var(--accent); opacity: 1 !important; }
  .branch-badge {
    display: inline-flex; align-items: center; gap: 3px; font-size: 0.75rem;
    color: var(--dim); cursor: pointer; padding: 1px 6px; border-radius: 3px;
    border: 1px solid transparent; transition: border-color 0.15s, color 0.15s;
    flex-shrink: 0; white-space: nowrap; user-select: none;
  }
  .branch-badge:hover { border-color: var(--border); color: var(--fg); }
  .branch-badge.on-main { color: var(--yellow); }
  .branch-badge.on-branch { color: var(--green); }
  .branch-badge.conflict { color: var(--red) !important; }
  .branch-popover {
    position: fixed; z-index: 9999; width: 240px;
    background: var(--bg, #0d1117); border: 1px solid var(--border); border-radius: 8px;
    padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.7);
  }
  .branch-popover input { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
  .branch-popover-actions { display: flex; gap: 6px; }
  .card-preview { color: var(--dim); font-size: 0.78rem; margin-top: 4px; margin-left: 20px; font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .card-preview-lines {
    color: var(--dim); font-size: 0.75rem; font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
    white-space: pre; overflow: hidden;
    background: rgba(1,4,9,0.5); border-radius: 6px; padding: 8px 10px;
    margin-bottom: 8px; line-height: 1.4; max-height: 80px;
  }
  .badges { display: flex; gap: 6px; margin-top: 6px; margin-left: 20px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .badges::-webkit-scrollbar { display: none; }
  /* Group chip and model moved OFF the title row and onto this one, so the worker
     name gets the full card width. `.card-name` is `flex:1; min-width:0` with
     ellipsis, so anything sharing that row ate the name — `amux-rust` truncated
     while a group chip and CLAUDE-OPUS-4-6 sat beside it.
     Two fixes needed here, both because .badges is a nowrap flex strip and
     .grp-chip was written for inline flow inside the title:
       margin-left  — it carries its own 6px, which doubles this row's gap
       flex-shrink  — without it the chip is squeezed instead of scrolling, which
                      is the one thing this overflow-x strip exists to avoid */
  .badges .grp-chip { margin-left: 0; flex-shrink: 0; }
  .badge {
    font-size: 0.7rem; padding: 2px 7px; border-radius: 4px;
    font-weight: 600; text-transform: uppercase; white-space: nowrap; flex-shrink: 0;
  }
  .badge.yolo { background: rgba(210,153,34,0.2); color: var(--yellow); }
  .badge.worktree { background: rgba(45,212,191,0.15); color: #2dd4bf; border: 1px dashed rgba(45,212,191,0.4); }
  .badge.ephemeral { background: rgba(251,146,60,0.15); color: #fb923c; }
  .badge.worker-type { background: rgba(88,166,255,0.14); color: var(--accent); }
  /* Chat renderer (ACW-7): the peek body shows a transcript, not a terminal. */
  #peek-body.peek-chat {
    background: var(--bg) !important; color: var(--text) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    white-space: normal; font-size: 0.92rem; line-height: 1.5;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  }
  /* A chat body is not terminal output: in light mode it gets the light palette
     back. body.light .overlay-body keeps the dark palette for ANSI output, so
     the chat inherited --text #e6edf3 on a white --bg and assistant replies were
     near-white on white (2026-09-29, the worker page's Chat tab). */
  body.light #peek-body.peek-chat {
    --text: #1f2328; --dim: #656d76; --accent: #0969da; --border: #d0d7de;
    --green: #1a7f37; --red: #cf222e; --yellow: #9a6700; --cyan: #0550ae;
  }
  .chat-log { display: flex; flex-direction: column; gap: 12px; max-width: 860px; margin: 0 auto; }
  .chat-msg { display: flex; flex-direction: column; max-width: 88%; min-width: 0; }
  .chat-msg.chat-user { align-self: flex-end; align-items: flex-end; }
  .chat-msg.chat-assistant { align-self: flex-start; }
  .chat-bubble {
    padding: 8px 12px; border-radius: 12px; overflow-wrap: anywhere; min-width: 0; max-width: 100%;
    background: var(--card); border: 1px solid var(--border); color: var(--text);
  }
  .chat-user .chat-bubble { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
  .chat-bubble p { margin: 0 0 8px; } .chat-bubble p:last-child { margin-bottom: 0; }
  .chat-bubble pre { overflow-x: auto; max-width: 100%; white-space: pre; }
  .chat-bubble ol, .chat-bubble ul { padding-left: 1.5em; margin: 4px 0 8px; }
  .chat-meta { font-size: 0.7rem; color: var(--dim); margin-top: 3px; padding: 0 4px; }
  .chat-msg.is-error .chat-bubble { border-color: var(--red, #f85149); }
  .chat-error { display: block; color: var(--red, #f85149); font-weight: 600; margin-bottom: 4px; white-space: pre-wrap; }
  .chat-retry-btn { display: block; margin-top: 8px; font-size: 0.78rem; padding: 6px 14px; }
  /* Tool calls (AMUX-5263): one collapsible card per call, filled in live.
     The summary row is the 44px mobile hit area. */
  .chat-tools { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
  .chat-tools:empty { display: none; }
  .chat-tool { border: 1px solid var(--border); border-radius: 8px; background: rgba(127,127,127,0.05); min-width: 0; }
  .chat-tool > summary {
    display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; cursor: pointer;
    list-style: none; font-size: 0.78rem; color: var(--dim); min-width: 0;
  }
  .chat-tool > summary::-webkit-details-marker { display: none; }
  .chat-tool-name { font-weight: 600; color: var(--text); flex-shrink: 0; }
  .chat-tool-sum { font-family: var(--font-mono, monospace); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .chat-tool-icon { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--dim); }
  .chat-tool.is-running .chat-tool-icon { background: none; border: 2px solid var(--accent); border-right-color: transparent; animation: chat-spin 0.8s linear infinite; }
  .chat-tool.is-done .chat-tool-icon { background: var(--green, #3fb950); }
  .chat-tool.is-error .chat-tool-icon { background: var(--red, #f85149); }
  .chat-tool-body { padding: 0 10px 8px; }
  .chat-tool-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dim); margin: 4px 0 2px; }
  .chat-bubble .chat-tool-pre { margin: 0; max-height: 260px; overflow: auto; white-space: pre-wrap; font-size: 0.75rem; }
  .chat-tool-trunc { font-size: 0.7rem; color: var(--dim); font-style: italic; margin-top: 2px; }
  @keyframes chat-spin { to { transform: rotate(360deg); } }
  /* Thinking: collapsed by default; the label shimmers while it is live. */
  .chat-thinking { margin-bottom: 6px; font-size: 0.8rem; color: var(--dim); }
  .chat-thinking > summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; font-style: italic; list-style: none; }
  .chat-thinking > summary::before { content: '\25b8'; font-size: 0.65rem; margin-right: 6px; font-style: normal; }
  .chat-thinking[open] > summary::before { content: '\25be'; }
  .chat-thinking.is-live > summary { animation: chat-dot 1.4s infinite ease-in-out; }
  .chat-thinking-body { white-space: pre-wrap; border-left: 2px solid var(--border); padding: 2px 0 2px 8px; max-height: 240px; overflow: auto; }
  .chat-live-thinking:empty, .chat-live-limit:empty { display: none; }
  .chat-limit { border: 1px solid var(--yellow, #d29922); border-radius: 6px; padding: 6px 8px; margin-bottom: 6px; font-size: 0.8rem; }
  /* The live reply: a caret after the last streamed text. */
  /* After the last text, not after a block: inside the last list item, not
     on a new line below the list. */
  .is-streaming.has-text .md-tail > :last-child:not(ul):not(ol):not(table):not(pre)::after,
  .is-streaming.has-text .md-tail > :is(ul, ol):last-child > li:last-child::after,
  .is-streaming.has-text .md-tail:empty::after {
    content: ''; display: inline-block; width: 0.45em; height: 1em; margin-left: 2px; vertical-align: text-bottom;
    background: var(--accent); border-radius: 1px; animation: chat-caret 1s steps(2, start) infinite;
  }
  .is-streaming.has-text .chat-typing { display: none; }
  .chat-typing[hidden] { display: none; }
  @keyframes chat-caret { to { visibility: hidden; } }
  .md-blk > :last-child, .md-tail > :last-child { margin-bottom: 0; }
  .md-blk { margin-bottom: 8px; animation: chat-blk-in 0.25s ease-out; }
  @keyframes chat-blk-in { from { opacity: 0.35; } to { opacity: 1; } }
  .chat-meta .chat-stop {
    margin-left: 6px; min-height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--border);
    background: var(--card); color: var(--text); font-size: 0.75rem; cursor: pointer;
  }
  .chat-meta .chat-stop:disabled { opacity: 0.6; }
  .chat-msg.is-interrupted .chat-bubble { border-style: dashed; }
  .chat-jump {
    position: sticky; bottom: 8px; left: 50%; transform: translateX(-50%); display: block; margin: 8px auto 0;
    min-height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--border);
    background: var(--card); color: var(--text); font-size: 0.78rem; box-shadow: 0 2px 8px rgba(0,0,0,0.25); cursor: pointer;
  }
  .chat-jump[hidden] { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .chat-tool.is-running .chat-tool-icon, .chat-thinking.is-live > summary,
    .is-streaming.has-text .md-tail *::after, .is-streaming.has-text .md-tail::after, .md-blk { animation: none; }
  }
  .chat-empty, /* Chat offline parity: the saved-conversation note and offline sends. */
.chat-offline-note { margin:8px auto; padding:6px 10px; max-width:560px; border-radius:var(--radius-control, 8px); background:rgba(210,153,34,0.12); color:var(--yellow, #d29922); font-size:0.82rem; text-align:center; }
.chat-msg.chat-pending .chat-bubble { opacity:0.7; border-style:dashed; }
.chat-msg.chat-pending .chat-meta { color:var(--yellow, #d29922); }
.chat-queued { text-align: center; color: var(--dim); font-size: 0.85rem; padding: 16px 8px; }
  .chat-queued { padding: 4px; font-size: 0.75rem; }
  .chat-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
  .chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); animation: chat-dot 1.2s infinite ease-in-out; }
  .chat-typing i:nth-child(2) { animation-delay: 0.15s; } .chat-typing i:nth-child(3) { animation-delay: 0.3s; }
  @keyframes chat-dot { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
  @media (max-width: 600px) { .chat-msg { max-width: 94%; } #peek-body.peek-chat { padding: 10px 8px; } }
  /* Mobile hit area: expanded to ~32px, NOT the 44px the css-mobile rule asks
     for, and that is a deliberate deviation rather than an oversight. 44px-tall
     pills would push the task label and preview below the fold on a 375px card,
     which is the real estate Ethan asked to reclaim in the same breath. Vertical
     expansion only — going wider would overlap the neighbouring chip and turn a
     small target into a wrong one. Every destination here is also reachable from
     the Board tab, so a missed tap costs a tap, not the route. */
  @media (max-width: 600px) {
  }
  .sched-id-badge { font-size:0.6rem;padding:1px 5px;border-radius:4px;border:1px solid var(--border);background:var(--bg);color:var(--accent);font-family:monospace;cursor:pointer;flex-shrink:0;letter-spacing:0.02em; }
  .sched-id-badge:hover { border-color:var(--accent); }
  /* Copyable message id in the Messages/peek rows (AMUX-2970), same affordance
     as the scheduler's SCHED-N badge so the two read alike. */
  .msg-id-badge { font-size:0.6rem;padding:1px 5px;border-radius:4px;border:1px solid var(--border);background:var(--bg);color:var(--accent);font-family:monospace;cursor:pointer;flex-shrink:0;letter-spacing:0.02em;margin-right:6px; }
  .msg-id-badge:hover { border-color:var(--accent); }
  .sched-run-dot { display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0; }
  .sched-run-dot.ok { background:var(--green,#4ade80); }
  .sched-run-dot.done { background:var(--accent); }
  .sched-run-dot.err { background:var(--red,#f87171); }
  /* AMUX-2647: a run is no longer just pass/fail. `queued` is PENDING — it is
     hollow on purpose, because a filled dot reads as done and a scheduled
     command sitting in the steering queue is not done. `refused`/`skipped` are
     amber: nothing broke, nothing was delivered either, and colouring them red
     would train people to ignore red. `unknown` is every row written before the
     verdict existed — grey, never green, because "not recorded" is not "fine". */
  .sched-run-dot.queued { background:transparent;box-shadow:inset 0 0 0 1.5px var(--accent); }
  .sched-run-dot.running { background:var(--yellow,#fbbf24);animation:sched-running-pulse 1.2s ease-in-out infinite; }
  @keyframes sched-running-pulse { 50% { opacity:0.35;transform:scale(0.8); } }
  .sched-run-dot.warn { background:var(--yellow,#fbbf24); }
  .sched-run-dot.unknown { background:var(--dim,#6b7280);opacity:0.45; }
  .sched-sess-dot { display:inline-block;width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--dim); }
  .sched-sess-dot.active { background:var(--green,#4ade80); }
  .sched-expand-btn { background:transparent;border:1px solid var(--border);color:var(--dim);border-radius:5px;min-width:26px;height:24px;cursor:pointer;font-size:0.9rem;line-height:1;display:flex;align-items:center;justify-content:center;padding:0; }
  .sched-expand-btn:hover { border-color:var(--accent);color:var(--accent); }
  /* Scheduler action row. Pinned in both of this modal's two layouts:
     flex-shrink:0 for the desktop capped flex column, position:sticky for the
     mobile block-scroll layout (max-width:600px turns the box into the
     scroller). Without this the row was the last child of a 112px scroller
     and laid out below the fold — the "zoom out to reach Save" report. */
  .sched-modal-foot {
    flex-shrink: 0; position: sticky; bottom: 0; z-index: 3;
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 10px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: var(--card); border-top: 1px solid var(--border);
  }
  @media (max-width: 600px) { .sched-modal-foot .btn { min-height: 44px; } }
  .badge.auto-continue { background: rgba(98,160,234,0.2); color: #62a0ea; }
  .badge.model { background: rgba(57,210,192,0.2); color: var(--cyan); }
  .badge.effort { background: rgba(192,132,252,0.18); color: #c084fc; cursor: pointer; }
  .badge.provider { cursor: pointer; }
  .badge.claude { background: rgba(88,166,255,0.18); color: var(--accent); }
  .badge.codex { background: rgba(16,185,129,0.2); color: #10b981; }
  .badge.gemini { background: rgba(168,85,247,0.2); color: #c084fc; }
  .badge.ollama { background: rgba(251,191,36,0.2); color: #f59e0b; }
  .badge.iterm2 { background: rgba(0,200,160,0.18); color: #00c8a0; }
  .badge.herdr { background: rgba(140,120,255,0.18); color: #a89cff; }

  /* Expanded panel */
  .panel { display: none; margin-top: 12px; }
  .card.expanded .panel { display: block; }
  .panel-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
  .btn {
    font-size: var(--control-font); padding: var(--space-2) 14px; border-radius: var(--radius-control); border: 1px solid var(--border);
    background: var(--card); color: var(--text); cursor: pointer; font-weight: 500;
    -webkit-tap-highlight-color: transparent;
    min-height: var(--control-height);
  }
  .btn:active { background: var(--border); }
  .btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
  .btn.danger { border-color: var(--red); color: var(--red); }
  .provider-btn { flex:1; font-size:0.82rem; padding:7px 10px; transition: all 0.15s; }
  .provider-btn.selected { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:600; }
  .chips { display: flex; gap: 6px; flex-wrap: nowrap; margin-bottom: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x; overscroll-behavior-x: contain; }
  .chips::-webkit-scrollbar { display: none; }
  .chip {
    font-size: 0.78rem; padding: 6px 12px; border-radius: 16px;
    background: rgba(88,166,255,0.12); color: var(--accent);
    border: 1px solid rgba(88,166,255,0.25); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-height: 34px; display: flex; align-items: center;
    white-space: nowrap; flex-shrink: 0;
  }
  .chip:active { background: rgba(88,166,255,0.25); }
  .chip.danger { background: rgba(248,81,73,0.12); color: var(--red); border-color: rgba(248,81,73,0.25); }
  .chip.danger:active { background: rgba(248,81,73,0.25); }
  .chip.chip-add { background: rgba(139,148,158,0.10); color: var(--dim); border-color: rgba(139,148,158,0.25); font-size: 1rem; padding: 6px 10px; }
  .chip.chip-add:hover { background: rgba(139,148,158,0.2); color: var(--text); }
  .chip.chip-edit-toggle { background: none; border: 1px solid transparent; color: var(--dim); padding: 6px 8px; font-size: 0.85rem; }
  .chip.chip-edit-toggle:hover { color: var(--accent); }
  .chip.chip-edit-toggle.active { color: var(--accent); }
  .chips.editing { flex-wrap: wrap; overflow-x: visible; touch-action: none; gap: 8px; }
  .chips.editing .chip { cursor: grab; padding: 8px 12px; min-height: 40px; }
  .chips.editing .chip.dragging { opacity: 0.3; }
  .chips.editing .chip.drag-over { box-shadow: -3px 0 0 var(--accent); }
  .chips.editing .chip-drag-handle { margin-right: 4px; opacity: 0.4; font-size: 0.7rem; }
  .chips.editing .chip-remove-btn { display: inline-flex; margin-left: 6px; font-size: 0.8rem; opacity: 0.6; cursor: pointer; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(248,81,73,0.1); }
  .chips.editing .chip-remove-btn:hover { opacity: 1; color: var(--red); background: rgba(248,81,73,0.2); }
  .chip-remove-btn { display: none; }
  .chip-drag-handle { display: none; }
  .chip-picker-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 2000; display: flex; align-items: center; justify-content: center; }
  .chip-picker { background: var(--card); border: 1px solid var(--border); border-radius: 12px; width: 340px; max-height: 70dvh; display: flex; flex-direction: column; overflow: hidden; }
  .chip-picker-header { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
  .chip-picker-header input { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; color: var(--text); font-size: 0.85rem; outline: none; }
  .chip-picker-header input:focus { border-color: var(--accent); }
  .chip-picker-body { overflow-y: auto; padding: 8px 0; max-height: 50vh; }
  .chip-picker-section { padding: 4px 16px 2px; font-size: 0.7rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.05em; }
  .chip-picker-item { padding: 8px 16px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text); }
  .chip-picker-item:hover { background: rgba(88,166,255,0.1); }
  .chip-picker-item .cpd { color: var(--dim); font-size: 0.75rem; flex: 1; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* ── Persistent audio player bar ── */
  .amux-audio-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1500; background: var(--card); border-top: 1px solid var(--border); padding: 8px 14px; display: none; align-items: center; gap: 10px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .amux-audio-bar.visible { display: flex; }
  .amux-audio-bar .ab-info { flex: 1; min-width: 0; }
  .amux-audio-bar .ab-title { font-size: 0.8rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .amux-audio-bar .ab-time { font-size: 0.68rem; color: var(--dim); }
  .amux-audio-bar .ab-btn { background: none; border: none; color: var(--text); font-size: 1.3rem; cursor: pointer; padding: 2px 6px; line-height: 1; }
  .amux-audio-bar .ab-btn:hover { color: var(--accent); }
  .amux-audio-bar .ab-progress { flex: 2; min-width: 80px; }
  .amux-audio-bar .ab-progress input[type=range] { width: 100%; height: 4px; -webkit-appearance: none; appearance: none; background: var(--border); border-radius: 2px; outline: none; cursor: pointer; }
  .amux-audio-bar .ab-progress input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); cursor: pointer; }
  .amux-audio-bar .ab-state { color: var(--accent); margin-left: 4px; }
  .amux-audio-bar .ab-state[data-state="failed"], .amux-audio-bar .ab-state[data-state="error"] { color: var(--red); }
  /* Played, then buffered, then the rest of the track. */
  .amux-audio-bar .ab-progress input[type=range] { background: linear-gradient(to right, var(--accent) 0 var(--ab-pos, 0%), var(--dim) var(--ab-pos, 0%) var(--ab-buf, 0%), var(--border) var(--ab-buf, 0%)); }
  .amux-audio-bar .ab-speed { font-size: 0.7rem; color: var(--dim); cursor: pointer; border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; background: none; }
  @media (max-width: 600px) { .amux-audio-bar { padding: 6px 10px; padding-bottom: max(6px, env(safe-area-inset-bottom)); } .amux-audio-bar .ab-progress { flex: 1; } .amux-audio-bar .ab-btn, .amux-audio-bar .ab-speed { min-width: 44px; min-height: 44px; } }

  .tts-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 2000; display: flex; align-items: center; justify-content: center; }
  .tts-dialog { background: var(--card); border: 1px solid var(--border); border-radius: 14px; width: 420px; max-width: 92vw; max-height: 80dvh; display: flex; flex-direction: column; overflow: hidden; }
  .tts-header { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
  .tts-header h3 { font-size: 0.95rem; font-weight: 600; color: var(--text); margin: 0; }
  .tts-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
  .tts-body textarea { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; color: var(--text); font-size: 0.85rem; resize: vertical; min-height: 100px; font-family: inherit; outline: none; }
  .tts-body textarea:focus { border-color: var(--accent); }
  .tts-body select { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; color: var(--text); font-size: 0.85rem; outline: none; }
  .tts-footer { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
  .tts-btn { padding: 8px 18px; border-radius: 8px; border: none; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
  .tts-btn-primary { background: var(--accent); color: #fff; }
  .tts-btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
  .tts-audio-wrap { display: flex; align-items: center; gap: 10px; }
  .tts-audio-wrap audio { flex: 1; height: 36px; }
  /* Floating "generating audio" indicator — feedback for read-aloud triggers
     that have no button to spin (ellipsis actions). */
  .tts-loading { position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 10001;
    background: var(--accent); color: #fff; padding: 8px 16px; border-radius: 20px;
    font-size: 0.82rem; font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    display: flex; align-items: center; gap: 8px; }
  .tts-loading-spin { display: inline-block; animation: tts-spin 0.9s linear infinite; }
  /* Cancel/Stop control on the floating indicator (AMUX-3333). Touch-friendly. */
  .tts-cancel-btn { background: rgba(255,255,255,0.22); color: #fff; border: 1px solid rgba(255,255,255,0.5);
    border-radius: 14px; padding: 3px 12px; font-size: 0.78rem; font-weight: 600; cursor: pointer; margin-left: 2px; }
  .tts-cancel-btn:hover { background: rgba(255,255,255,0.34); }
  @keyframes tts-spin { to { transform: rotate(360deg); } }
  @media (max-width: 600px) { .tts-cancel-btn { min-height: 32px; padding: 6px 14px; } }
  /* Past read-alouds list (replay tab). */
  .ra-list { display: flex; flex-direction: column; }
  .ra-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    border-bottom: 1px solid var(--border); }
  .ra-play, .ra-del { flex: 0 0 auto; min-width: 44px; min-height: 44px; display: flex;
    align-items: center; justify-content: center; border: 1px solid var(--border);
    border-radius: 8px; background: var(--card); color: var(--text); cursor: pointer; font-size: 0.9rem; }
  .ra-play { color: var(--accent); }
  .ra-play:active { background: var(--accent); color: #fff; }
  .ra-del { color: var(--dim); }
  .ra-body { flex: 1; min-width: 0; }
  .ra-meta { font-size: 0.72rem; color: var(--dim); margin-bottom: 3px; }
  .ra-text { font-size: 0.85rem; color: var(--text); line-height: 1.4; word-break: break-word; }
  .send-row { display: flex; gap: 8px; min-width: 0; overflow: visible; position: relative; }
  .send-input {
    flex: 1; min-width: 0; font-size: 1rem; padding: 10px 14px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--bg); color: var(--text);
    outline: none; min-height: 44px; max-height: calc(1.4em * 10 + 28px);
    resize: none; overflow-x: hidden; overflow-y: auto; line-height: 1.4;
    font-family: inherit; field-sizing: content; word-break: break-word;
  }
  .send-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88,166,255,0.12); }

  /* Card-composer attachments: no paperclip button on the worker list (Ethan
     2026-08-19 — too bulky there); you attach by DRAGGING files onto the
     composer, and the chips bar reuses .peek-attach-bar / .peek-attach-chip.
     Paste still works too. The peek keeps its own paperclip. */
  .card-attach-bar { margin-top: 4px; }
  .send-row.card-drop-over { outline: 2px dashed var(--accent); outline-offset: 2px; border-radius: 8px; }

  /* Peek overlay */
  .overlay {
    position: fixed; top: max(var(--chrome-tab-h, 0px), env(safe-area-inset-top, 0px)); left: 0; right: 0; bottom: 0;
    background: var(--bg);
    z-index: 100; flex-direction: column;
  }
  /* iOS home-screen top inset — the overlay/header/list use env(safe-area-inset-top)
     via `top/padding-top: max(chrome, env(top))`. That's the ONLY stable choice:
     innerHeight oscillates 762<->812 in this host and is coupled to our layout, so any
     JS heuristic that zeroes or extends based on carve thrashes (v0.9.18/0.9.21). env(top)
     is constant (50) and keeps content clear of the clock. Do NOT reintroduce a
     body.no-top-inset / js-bottom-extend toggle — both were retired 2026-07-05. */
  /* board-detail sits above peek when opened from within it */
  #board-detail-overlay { z-index: 150; }
  /* NOTHING IN NORMAL FLOW MAY OUTRANK THESE TWO (AF-390). #email-approvals-banner
     carried z-index 200 inline and painted over both, and because it is an in-flow
     strip in the same screen band as these fixed overlays, it swallowed clicks on
     the peek tab bar once it grew tall enough. Its z-index is 90 now and the reason
     is written beside it in index.html. If you add another global strip, put it
     under 100 too. */
  .overlay {
    /* PLAIN 12px. The rule ~20 lines up already sets
       `top: max(var(--chrome-tab-h), env(safe-area-inset-top))`, so this
       element is ALREADY positioned below the carve. Adding the same inset as
       padding charged it twice: on an iPhone 17, env(safe-area-inset-top) is a
       constant 50px here, so the worker header started 100px down instead of
       50 and read as a dead band above the title.
       Nothing changes off-notch, where env(top) is 0 and max(12px, 0) was
       already 12px. */
    padding: 12px;
    overflow: hidden;
    display: flex; pointer-events: none; opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s, transform 0.25s cubic-bezier(.4,0,.2,1);
  }
  .overlay[hidden] { display: none !important; }
  .overlay.active { pointer-events: auto; opacity: 1; transform: none; }
  /* ── Generic centered modal (calendar event editor) ─────────────────────────
     These classes had NO rules — openEventModal's markup rendered as unstyled
     flow content stacked at the page bottom (the "Edit event at the bottom of
     the screen" bug, 2026-07-16). */
  .modal-overlay {
    position: fixed; inset: 0; z-index: var(--layer-dialog);
    background: rgba(0,0,0,0.55);
    display: none; align-items: center; justify-content: center;
    padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom));
    box-sizing: border-box;
  }
  .modal-overlay.active { display: flex; }
  .modal-overlay .modal {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-dialog);
    width: 100%; max-width: 440px; max-height: min(86dvh, 640px);
    display: flex; flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  }
  @media (max-width: 600px) {
    .modal-overlay {
      padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    }
    .modal-overlay .modal {
      max-height: calc(var(--dialog-viewport-height, 100dvh) - 16px);
    }
  }
  .modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  }
  .modal-header h3 { font-size: 1rem; }
  .modal-close {
    background: none; border: none; color: var(--dim); font-size: 1.3rem;
    cursor: pointer; min-width: 44px; min-height: 32px; line-height: 1;
  }
  .modal-body { padding: 14px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .input, .modal-body .input {
    width: 100%; box-sizing: border-box; padding: 8px 10px;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-control);
    min-height: var(--control-height); color: var(--text); font-size: var(--control-font); outline: none;
  }
  .modal-body input[type=date].input, .modal-body input[type=time].input { width: auto; flex: 1; min-width: 0; }
  .modal-footer { padding: 12px 16px; border-top: 1px solid var(--border); flex-shrink: 0; }
  .modal-footer .btn.danger { color: var(--red); border-color: var(--red); }

  /* ── Shared modal layout: the action row is ALWAYS reachable ──────────────
     THE BUG CLASS: a dialog taller than the viewport whose action row is the
     last child of a scrolling box. The box scrolls, so Save is *technically*
     reachable — but it starts BELOW the fold, and on a short viewport the user
     sees a form with no buttons and reaches for browser zoom. That is the
     reported symptom, on the scheduler editor: "I have to zoom out to scroll
     down to see the bottom."

     Measured before this rule (Save button bottom edge vs viewport height):
       1280x720   sched-overlay 753 / 720
       390x844    sched-overlay 868 / 844
       1280x600   board-edit 620/600 · gate-confirm 618/600 · sched 576/600
       844x390    create 396/390 · about 350/390 · map-pin 383/390
     Six dialogs, one shape — so this is one rule, not six patches.

     dvh, NOT vh: iOS Safari sizes vh to the toolbar-HIDDEN viewport, so a
     vh-capped modal puts its footer underneath the toolbar. That is this same
     bug in its mobile form, and it is invisible on desktop.

     position:sticky rather than a flex body/footer split, because these
     dialogs hand-roll their markup as a flat list of fields with the buttons
     last. A flex split needs a wrapper element around everything above the
     footer — i.e. a markup edit inside every dialog, including the ones
     app.js builds as template literals with no static markup to edit. sticky
     needs no wrapper, so one rule reaches all of them.

     --modal-pad is each box's own padding; the footer bleeds out by that much
     so content scrolling underneath does not show through beside it. */
  .edit-box       { --modal-pad: 20px; }
  .board-edit-box { --modal-pad: 16px; }
  .map-modal-box  { --modal-pad: 20px; }
  .queue-box      { --modal-pad: 20px; }
  .amux-modal     { --modal-pad: 18px; }

  /* Generic box for dialogs built in app.js (they have no shared class of
     their own). Pairs with .amux-modal-foot on the button row. */
  .amux-modal {
    max-height: min(90dvh, calc(100dvh - 24px));
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .edit-box .edit-actions,
  .board-edit-box .board-edit-actions,
  .map-modal-box .map-modal-actions,
  .queue-box .queue-actions,
  .amux-modal .amux-modal-foot {
    position: sticky; bottom: calc(-1 * var(--modal-pad)); z-index: 3; flex-shrink: 0;
    background: var(--card);
    border-top: 1px solid var(--border);
    /* 20px top margin, not 12px: the NEGATIVE bottom margin below pulls the
       footer flush with the box edge, and it shortens the scroller by exactly
       that much — so at full scroll the last field still sat 7px under the
       button bar (measured live, 2026-08-27). The bottom bleed is what makes
       the footer flush and is worth keeping; the top margin buys the scroll
       distance back without adding a gap under the buttons. */
    margin: 20px calc(-1 * var(--modal-pad)) calc(-1 * var(--modal-pad));
    padding: 10px var(--modal-pad);
    /* iPhone PWA: clear the home indicator (.claude/rules/css-mobile.md) */
    padding-bottom: max(var(--modal-pad), env(safe-area-inset-bottom));
  }
  /* .amux-modal-foot is a bare marker class on app.js-built dialogs, so it
     supplies its own row layout; the static classes above already have theirs. */
  .amux-modal .amux-modal-foot { display: flex; gap: 8px; align-items: center; }
  /* Buttons stay tappable at 44px on mobile even when the row is pinned. */
  @media (max-width: 600px) {
    .edit-box .edit-actions .btn,
    .board-edit-box .board-edit-actions button,
    .map-modal-box .map-modal-actions .btn,
    .queue-box .queue-actions .btn,
    .amux-modal .amux-modal-foot .btn { min-height: 44px; }
    .edit-overlay {
      padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    }
    .edit-box {
      max-height: calc(var(--dialog-viewport-height, 100dvh) - 16px);
    }
  }
  .overlay-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px; flex-shrink: 0;
  }
  .overlay-header h2 { font-size: 1.1rem; }
  .peek-output-wrap { position:relative; display:flex; flex-direction:column; flex:1; min-height:0; min-width:0; }
  .peek-output-controls {
    position:absolute; z-index:7; top:6px; right:6px; width:max-content;
    display:flex; align-items:center; justify-content:flex-end; gap:4px;
    padding:3px; background:rgba(13,17,23,0.94); border:1px solid rgba(255,255,255,0.12);
    border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.22);
  }
  #peek-body { touch-action:pan-x pan-y pinch-zoom; min-width:0; width:100%; box-sizing:border-box; border-radius:8px; padding-top:10px; }
  .overlay-body {
    flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto;
    /* Reserve the scrollbar's width. With pre-wrap text and overflow-y:auto,
       content near the fold made the scrollbar appear, narrowing the body,
       re-wrapping long lines, shrinking the content, hiding the scrollbar:
       the peek "kept expanding and contracting" (Ethan, 2026-10-06). */
    scrollbar-gutter: stable;
    background: #010409; border-radius: 8px;
    padding: 10px; font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
    font-size: 0.78rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word;
    -webkit-overflow-scrolling: touch;
    -webkit-user-select: text; user-select: text;
    -webkit-touch-callout: default; cursor: text;
    touch-action: pan-y;
  }
  /* The floating controls now hold only the subagent navigator; with it
     hidden there is nothing to float, and no box should show. */
  .peek-output-controls:not(:has(.peek-agent-nav:not([hidden]))) { display: none; }
  .peek-agent-nav {
    position: static;
    display: flex; gap: 4px;
  }
  .peek-agent-nav button {
    height: 28px; min-width: 32px; border-radius: 6px; padding: 0 6px;
    border: 1px solid rgba(255,255,255,0.15); background: #0d1117;
    color: var(--dim); font-size: 0.78rem; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: all 0.15s;
  }
  .peek-agent-nav button:active { background: var(--accent); color: #fff; }
  .peek-earlier-bar {
    text-align: center; color: var(--dim); font-size: 0.72rem;
    padding: 8px 0; cursor: pointer;
    border-bottom: 1px dashed rgba(255,255,255,0.15);
  }
  .peek-earlier-bar:active { color: var(--accent); }
  .peek-earlier-block {
    opacity: 0.75; white-space: pre-wrap;
    border-left: 2px solid rgba(255,255,255,0.12); padding-left: 6px;
  }
  /* The peek text flow is capped to the WORKER's pane width (--peek-cols, set
     per frame from the peek payload's pane_cols). Without it, prose written for
     a 154-column terminal re-wraps at ~224 characters on a wide desktop and the
     author's line breaks and spacing stop making sense. Falls back to 220, the
     spawn width, when a frame carries no pane_cols. */
  #pk-live { max-width: calc(var(--peek-cols, 220) * 1ch); }
  /* HISTORY IS FORMATTED FOR THE SCREEN (Ethan 2026-09-25: "shit should be
     formatted for the screen based on the screen resolution", with tables cut
     at 599px on a 1876px desktop). The transcript is not tmux output any more:
     the server lays its tables out at the viewer's measured columns. Prose keeps
     a readable measure (the pane width, never under 120 characters, which is
     what the cap above protected); tables and code blocks break out of it to
     the full width of the peek body (--peek-body-w, measured per render). */
  #pk-earlier, #pk-hist { max-width: calc(max(var(--peek-cols, 220), 120) * 1ch); }
  /* Never wider than the box's own container: a table inside an indented turn
     card (.ptc-body, overflow hidden) sized to the whole body width lost its
     rightmost ~57px with nothing to scroll to (2026-09-29, mixpeek-override). */
  #pk-earlier .peek-box, #pk-hist .peek-box { width: max-content; max-width: min(var(--peek-body-w, 100%), 100%); }
  .peek-rule {
    display: inline-flex; width: 100%; align-items: center; gap: 6px;
    height: 1.15em; vertical-align: middle;
  }
  .peek-rule::before { content: ''; flex: 1; border-top: 1px solid rgba(127,148,170,0.35); }
  .peek-rule::after { content: ''; width: 14px; border-top: 1px solid rgba(127,148,170,0.35); }
  .peek-rule:not(:has(.peek-rule-tag))::after { display: none; }
  .peek-rule-tag { color: var(--dim); font-size: 0.85em; white-space: nowrap; }
  .overlay-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
  .overlay-body a:active { color: #79c0ff; }
  .overlay-body .file-link { color: var(--cyan); text-decoration: none; border-bottom: 1px dashed var(--cyan); cursor: pointer; }
  .overlay-body .file-link:active { color: #79ead3; }
  .overlay-body button.file-link { appearance: none; -webkit-appearance: none; background: none; border-top: 0; border-right: 0; border-left: 0; padding: 0; font: inherit; }
  .overlay-body .md-link { color: var(--yellow); text-decoration: none; border-bottom: 1px dashed var(--yellow); cursor: pointer; }
  .overlay-body .md-link:active { color: #e8c547; }
  /* A markdown link to ANOTHER file — opens IN the viewer (renderMarkdown +
     _bindMdFileLinks). Distinguished from external links by the accent + a small
     document glyph, so a reader knows it navigates within, not to the browser. */
  .md-file-link { color: var(--accent); text-decoration: none; border-bottom: 1px dashed var(--accent); cursor: pointer; }
  .md-file-link::before { content: "\1F4C4\00A0"; font-size: 0.82em; opacity: 0.75; }
  .md-file-link:hover { border-bottom-style: solid; }
  .md-file-link:active { opacity: 0.7; }
  /* Box-drawing tables/frames: keep monospace alignment, scroll sideways instead
     of wrapping (which detached borders and shredded rows on narrow screens). */
  .overlay-body .peek-box { display: block; white-space: pre; overflow-x: auto; overflow-y: hidden; max-width: 100%;
    word-break: normal; overflow-wrap: normal; -webkit-overflow-scrolling: touch;
    /* Vertical swipes chain to the peek-body. touch-action names the pans the
       browser may perform for a touch that STARTS here, the parent's scroll
       included, so it must allow pan-y: it said `pan-x` alone, and a table
       filling the peek left nowhere to start a vertical swipe (Ethan,
       2026-10-03: "hard to scroll down/up when a table in peek mode is full
       height of peek"; e2e/peek-table-touch-scroll.spec.ts). The old trap,
       iOS keeping a vertical swipe that lands on a box (the ──── rules around
       every prompt), is prevented by overflow-y below. overflow-y:hidden is load-bearing: overflow-x:auto ALONE makes the browser
       COMPUTE overflow-y to `auto` (CSS spec), so a table TALLER than the viewport
       becomes a vertical scroll container that — with overscroll containment —
       swallows the wheel/swipe instead of chaining to peek-body ("can't scroll a
       very tall table", 2026-07-15). Boxes are content-height, so hidden clips
       nothing. Scope the overscroll containment to X so vertical still chains. */
    touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
  .overlay-body .peek-box::-webkit-scrollbar { height: 6px; }
  .overlay-body .peek-box::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 3px; }
  /* Emoji occupy exactly 2 monospace cells inside tables so borders stay aligned
     (browsers render them ~2.1ch, which otherwise detaches the right border). */
  .overlay-body .peek-box .pemoji { display: inline-block; width: 2ch; text-align: center; overflow: hidden; }
  /* Collapsible tool-call blocks in peek */
  .ptc { margin: 2px 0; }
  /* A block, never flex (Ethan, 2026-09-27, screenshot of "Bash" wrapped one
     letter per line): flex made every color span and linked path in the
     header its own column. The caret hangs in the left gutter and wrapped
     command text lines up under the tool name, as in the terminal. */
  .ptc-head { cursor: text; display: block; position: relative; -webkit-user-select: text; user-select: text;
    padding-left: calc(0.84em + 2ch); text-indent: -2ch; }
  .ptc-head:hover { background: rgba(255,255,255,0.04); border-radius: 4px; }
  .ptc-caret { cursor: pointer; -webkit-user-select: none; user-select: none; }
  .ptc-caret { position: absolute; left: 0; top: 0.35em; width: 1.2em; text-indent: 0; text-align: center; font-size: 0.7em; color: var(--dim); transition: transform 0.15s; }
  .ptc-caret::before { content: '\25BE'; }
  .ptc.collapsed .ptc-caret { transform: rotate(-90deg); }
  .ptc-body { overflow: hidden; }
  .ptc.collapsed .ptc-body { display: none; }
  .overlay-status { color: var(--dim); font-size: 0.68rem; margin-top: 2px; flex-shrink: 0; text-align: center; }
  /* The first successful peek response fills this after the terminal has
     painted. Reserve its one line up front so "Updated …" cannot steal 13px
     from the output viewport and make the terminal jump. */
  #peek-status { min-height: 1.4em; line-height: 1.4; }
  /* Peek 'Plan' strip — read-only view of the agent's Claude Code task list. */
  .peek-plan { border: 1px solid var(--border); border-radius: 8px; margin: 0 0 6px; background: var(--card); overflow: hidden; flex-shrink: 0; }
  .peek-plan-hdr { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: transparent; border: none; color: var(--text); cursor: pointer; font-size: 0.8rem; text-align: left; font-family: inherit; }
  .peek-plan-hdr:hover { background: rgba(255,255,255,0.03); }
  .peek-plan-hdr .pp-caret { color: var(--dim); transition: transform 0.15s; display: inline-block; }
  .peek-plan.open .pp-caret { transform: rotate(90deg); }
  .peek-plan .pp-title { font-weight: 600; flex-shrink: 0; }
  .peek-plan .pp-count { color: var(--dim); font-size: 0.74rem; flex-shrink: 0; }
  .peek-plan .pp-active { color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
  .peek-plan .pp-active.pp-active-done { color: #4ec9b0; }
  .peek-plan-list { max-height: 40vh; overflow-y: auto; border-top: 1px solid var(--border); padding: 4px 0; }
  .peek-plan-item { display: flex; gap: 8px; align-items: baseline; padding: 3px 12px; font-size: 0.76rem; line-height: 1.4; }
  .peek-plan-item .pp-ico { flex-shrink: 0; width: 14px; text-align: center; color: var(--dim); }
  .peek-plan-item .pp-txt { flex: 1; min-width: 0; word-break: break-word; }
  .peek-plan-item.completed { color: var(--dim); }
  .peek-plan-item.completed .pp-ico { color: #4ec9b0; }
  .peek-plan-item.in_progress .pp-ico { color: var(--accent); }
  .peek-plan-item.in_progress .pp-txt { color: var(--text); font-weight: 600; }
  .peek-plan-item .pp-blocked { color: #e0af68; font-size: 0.66rem; flex-shrink: 0; white-space: nowrap; }
  @media (max-width: 600px) { .peek-plan-hdr { min-height: 40px; } }
  .scroll-lock-badge {
    position: sticky; bottom: 8px; display: block; width: max-content;
    max-width: calc(100% - 16px); margin: 8px auto 0; text-align: center;
    padding: 6px 12px; border: 1px solid rgba(88,166,255,0.45); border-radius: 999px;
    background: rgba(13,17,23,0.96); box-shadow: 0 2px 10px rgba(0,0,0,0.28);
    color: var(--accent); font: inherit; font-size: 0.75rem; cursor: pointer;
    z-index: 8; pointer-events: auto;
  }
  body.light .scroll-lock-badge { background: rgba(255,255,255,0.97); }

  /* File preview overlay */
  .file-overlay {
    display: none; position: fixed; top: max(var(--chrome-tab-h, 0px), env(safe-area-inset-top, 0px)); left: 0; right: 0; bottom: 0; background: rgba(1,4,9,0.92);
    z-index: 200; flex-direction: column;
    padding: 12px; padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    box-sizing: border-box;
    max-height: var(--dialog-viewport-height, 100dvh);
  }
  /* The dimmed backdrop covers the whole screen even while the box itself is
     held above a keyboard, so the page never shows through beneath it. */
  .file-overlay.active::before { content: ''; position: fixed; inset: 0; z-index: -1; background: inherit; }
  .file-overlay.active { display: flex; }
  .file-overlay-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px; flex-shrink: 0; position: relative;
  }
  /* Title bar: file name on top, its folder path underneath, like a file manager. */
  .file-title-wrap { flex: 1; min-width: 0; margin-right: 8px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
  .file-overlay-header h2 { font-size: 1rem; margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
  .file-subpath { font-size: 0.68rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'SF Mono','Fira Code',monospace; }
  /* The folder line is the way back to the file browser (AMUX-3663). It has to
     LOOK clickable or it stays the dim label it has always been, and the
     rationale for opening files directly depends on this being findable.
     44px min-height is the mobile touch target; the rest of the row is short
     text, so without it this is an ~11px tap on a phone. */
  .file-subpath.clickable { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
  .file-subpath.clickable:hover { color: var(--accent); }
  @media (max-width: 600px) { .file-subpath.clickable { min-height: 44px; display: flex; align-items: center; } }
  .file-actions { display: none; position: absolute; top: calc(100% + 4px); right: 6px; flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,0.45);
    padding: 6px; z-index: 60; min-width: 170px; max-width: 78vw; max-height: 70vh; overflow-y: auto; }
  .file-actions.open { display: flex; }
  .file-actions .file-view-tab { width: 100%; justify-content: flex-start; text-align: left; border-radius: 8px; font-size: 0.82rem; padding: 7px 14px; flex-shrink: 0; }
  .file-menu-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; font-size: 1.15rem; line-height: 1; padding: 4px 8px; flex-shrink: 0; }
  .file-overlay-body {
    flex: 1; min-height: 0; overflow: auto; background: #010409; border: 1px solid var(--border); border-radius: 8px;
    padding: 14px; font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
    font-size: 0.78rem; line-height: 1.5; white-space: pre-wrap;
    word-break: break-word; -webkit-overflow-scrolling: touch;
  }
  .file-view-tabs { display: flex; gap: 3px; flex-shrink: 0; }
  .file-view-tab { padding: 4px 11px; border-radius: 6px; border: 1px solid var(--border);
    background: none; color: var(--dim); font-size: 0.78rem; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: all 0.15s; }
  .file-view-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
  .file-frontmatter { border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 12px; }
  .file-overlay-body.file-raw { white-space: pre-wrap; word-break: break-word; }
  /* Syntax-highlighted code preview (highlight.js). The theme stylesheet colors
     .hljs; we own layout + fill. */
  .file-overlay-body.file-code { padding: 0; }
  /* Gutter and code are SIBLINGS, never interleaved — see the note in
     _fileHighlightHTML: hljs spans straddle newlines, so per-line injection into
     the highlighted markup is malformed by construction. The two columns stay in
     register because they share font, size and line-height EXACTLY; changing one
     of those three here without the other breaks alignment silently, which is why
     they are declared adjacently. */
  .file-overlay-body.file-code .hljs-wrap { display: flex; align-items: flex-start;
    min-width: min-content; }
  .file-overlay-body.file-code .hljs-gutter { margin: 0; flex: 0 0 auto;
    padding: 12px 10px 12px 14px;
    /* sticky so the numbers stay put when a long line scrolls the code sideways */
    position: sticky; left: 0; z-index: 1; background: #010409;
    border-right: 1px solid var(--border);
    color: #484f58; text-align: right; user-select: none; -webkit-user-select: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem;
    line-height: 1.6; white-space: pre; }
  .file-overlay-body.file-code .hljs-pre { margin: 0; padding: 12px 14px; overflow: visible;
    flex: 1 1 auto; min-width: 0; }
  .file-overlay-body.file-code code.hljs { display: block; background: transparent; padding: 0;
    color: #c9d1d9;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem;
    line-height: 1.6; tab-size: 2; white-space: pre; }
  /* github-dark ships NO .hljs-punctuation rule, and hljs 11.9 emits exactly three
     classes for JSON: hljs-attr, hljs-string, hljs-punctuation. So every brace,
     bracket, colon and comma fell back to the base colour while keys and values
     were coloured — which is why a JSON file read as washed-out structure with
     bright text floating in it (Ethan's screenshot, 2026-08-06). Verified by
     running the shipped 11.9.0 build over real JSON and diffing the emitted
     classes against the theme's selectors.
     Dimmed deliberately rather than brightened: punctuation is scaffolding, so it
     should recede while staying legible. */
  .file-overlay-body.file-code .hljs-punctuation { color: #8b949e; }
  /* github-dark's own `.hljs-section` is #1f6feb, which MEASURES 3.49:1 against
     this viewer's light-mode body (#1c2128) and 4.0:1 against its dark one
     (#010409) — both under WCAG AA's 4.5:1 floor for body text. It is the
     section header in ini/toml/tf/hcl/cfg/conf, i.e. the most structural line
     in every config file this fleet opens, and it was the lowest-contrast class
     across all 61 code types measured. Lifted to GitHub's own accent blue,
     which measures 5.95:1 here. Same reasoning as the punctuation override
     above: the theme is a good default, not a per-surface answer. */
  .file-overlay-body.file-code .hljs-section { color: #58a6ff; }
  /* The light-mode file viewer keeps a DARK body (#1c2128, see the rule near the
     top of this file), so the gutter must match that, not the page background. */
  body.light .file-overlay-body.file-code .hljs-gutter { background: #1c2128; color: #6e7781; }
  /* Oversized audio/download cards must start inside the scrollport. Ordinary
     centering can put their first lines above scrollTop=0 in a short window. */
  .file-overlay-body.file-image { display:flex;align-items:safe center;justify-content:safe center;background:var(--bg);white-space:normal;position:relative; }
  /* Zoomable image preview (pinch / trackpad / double-tap). */
  .img-zoom-wrap { position:absolute;inset:0;overflow:hidden;touch-action:none;display:flex;align-items:center;justify-content:center; }
  .img-zoomable { max-width:100%;max-height:100%;height:auto;border-radius:4px;display:block;transform-origin:center center;will-change:transform;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;cursor:zoom-in; }
  .img-zoom-wrap.zoomed .img-zoomable { cursor:grab; }
  .file-overlay-body.file-video { display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000;padding:0;white-space:normal; }
  .file-video-player { max-width:100%;max-height:calc(100% - 36px);outline:none;display:block; }
  .file-video-meta { width:100%;box-sizing:border-box;padding:6px 14px;display:flex;align-items:center;gap:12px;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:0.72rem;color:var(--dim);flex-shrink:0;background:rgba(0,0,0,0.7); }
  .file-overlay-body.file-pdf { padding:0;background:var(--bg);white-space:normal;overflow:auto;-webkit-overflow-scrolling:touch; }
  /* AMUX-3068: pdf.js renders each page to a canvas, stacked and centered, so
     PDFs preview on iOS where the native <embed> is blank. Pages fit the
     viewport width, so nothing overflows a 375px phone. */
  .pdf-pages { display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 8px; }
  .pdf-page { max-width:100%;box-shadow:0 1px 8px rgba(0,0,0,0.35);border-radius:4px;background:#fff; }
  .pdf-note { padding:16px;color:var(--dim);font-size:0.82rem;text-align:center;line-height:1.5; }
  .file-overlay-body.file-csv { white-space:normal;overflow:hidden;display:flex;flex-direction:column;padding:0; }
  /* HTML preview: the iframe fills this box and scrolls its OWN content. Don't
     size the iframe to content height — a content-height iframe has no internal
     scroll, so wheel/touch over it scrolls nothing and never reaches the parent
     (the "locked, can't scroll" bug). */
  .file-overlay-body.file-html-preview { white-space:normal;padding:0;overflow:hidden;display:flex;flex-direction:column; }
  .csv-toolbar { display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap; }
  .csv-meta { font-size:0.75rem;color:var(--dim);flex:1;min-width:0; }
  .csv-search { flex:0 0 auto;padding:3px 8px;background:var(--input,var(--card));border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:0.78rem;width:160px;outline:none; }
  .csv-search:focus { border-color:var(--accent); }
  .csv-truncated { font-size:0.73rem;color:var(--yellow,#fbbf24);margin-left:4px; }
  /* Excel-style CSV preview — always light, regardless of theme */
  .csv-wrap { overflow:auto;flex:1;min-height:0;-webkit-overflow-scrolling:touch;background:#ffffff; }
  .csv-table { border-collapse:collapse;font-size:13px;table-layout:fixed;
    font-family:'Calibri','Segoe UI','Helvetica Neue',Arial,sans-serif;
    color:#000000;background:#ffffff; }
  .csv-table th,.csv-table td { border:1px solid #d4d4d4;padding:4px 8px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative; }
  .csv-table td { background:#ffffff;color:#000000; }
  .csv-table th { background:#f2f2f2;color:#444444;font-weight:600;position:sticky;top:0;z-index:2;user-select:none;
    border-color:#b8b8b8;text-align:center;font-size:12px; }
  .csv-table th .csv-th-text { cursor:pointer;display:block;overflow:hidden;text-overflow:ellipsis; }
  .csv-table th:hover { background:#e6e6e6; }
  .csv-table th.sort-asc .csv-th-text::after { content:' ▲';font-size:0.65rem;opacity:0.7; }
  .csv-table th.sort-desc .csv-th-text::after { content:' ▼';font-size:0.65rem;opacity:0.7; }
  .csv-table tr:hover td { background:#f5f9ff; }
  .csv-table td.csv-cell-active { outline:2px solid #217346;outline-offset:-2px;z-index:1;background:#e8f3ed !important; }
  .csv-row-hidden { display:none; }
  /* Column resize handle */
  .csv-resize { position:absolute;top:0;right:-3px;width:6px;height:100%;cursor:col-resize;z-index:3;user-select:none;-webkit-user-select:none; }
  .csv-resize:hover,.csv-resize.active { background:#217346;opacity:0.5; }
  /* Row number column — Excel-style gray gutter */
  .csv-table th.csv-rownum,.csv-table td.csv-rownum { width:42px;min-width:42px;max-width:42px;text-align:center;color:#444444;font-size:11px;padding:4px 4px;background:#f2f2f2;position:sticky;left:0;z-index:1;border-right:1px solid #b8b8b8;font-weight:400; }
  .csv-table th.csv-rownum { z-index:3;background:#e6e6e6;border-right:1px solid #b8b8b8; }
  /* Frozen first column */
  .csv-table.csv-frozen th:nth-child(2),.csv-table.csv-frozen td:nth-child(2) { position:sticky;left:42px;z-index:1;background:#ffffff;border-right:2px solid #b8b8b8; }
  .csv-table.csv-frozen th:nth-child(2) { z-index:3;background:#f2f2f2; }
  .csv-table tr:hover td.csv-rownum { background:#e6e6e6; }
  .csv-table.csv-frozen tr:hover td:nth-child(2) { background:#f5f9ff; }
  /* Cell expand popover — Excel-style */
  .csv-cell-pop { position:fixed;z-index:1000;background:#ffffff;color:#000000;border:1px solid #b8b8b8;border-radius:4px;padding:8px 12px;font-size:13px;font-family:'Calibri','Segoe UI','Helvetica Neue',Arial,sans-serif;max-width:90vw;max-height:50vh;overflow:auto;white-space:pre-wrap;word-break:break-word;box-shadow:0 4px 16px rgba(0,0,0,0.18);line-height:1.5; }
  /* Mobile: bigger touch targets */
  @media (max-width:600px) {
    .csv-table th,.csv-table td { padding:8px 10px;font-size:14px; }
    .csv-toolbar { padding:10px 12px;gap:6px; }
    .csv-search { width:100%;order:10; }
    .csv-resize { width:10px;right:-5px; }
    .csv-table th.csv-rownum,.csv-table td.csv-rownum { width:36px;min-width:36px;max-width:36px;padding:10px 4px; }
  }
  /* Phones: the multi-tab chrome strip is desktop furniture — it burned 54px
     at the top of every view (and pushed the peek down with it). Hide it and
     zero its offset (JS also forces --chrome-tab-h to 0 below 700px). */
  @media (max-width: 700px) {
    .chrome-tabs-bar, .chrome-tab-frames { display: none !important; }
    .overlay { top: env(safe-area-inset-top, 0px); }
  }
  @media (max-width: 600px) {
    /* Peek header title first (AMUX-2241, Ethan's iOS screenshot: the name
       ellipsized to "mixpeek-…" while WORKING + RATE-LIMITED-UNTIL badges and
       the model chip kept full width). The NAME is what identifies the peek —
       it gets a guaranteed floor and grows; badges/model wrap to a second
       line when the row is tight. Desktop keeps the one-line layout (this
       block is phone-only), and the badges remain fully visible — wrapped,
       never clipped. */
    /* REVERSED 2026-08-09 on Ethan's call: keep it to ONE row on phones too.
       The trade above was deliberate and is now decided the other way — a
       guaranteed 55% floor on the name is what FORCED the model chip onto a
       second line, costing a whole row of a 2436px-tall phone viewport for one
       chip. Name truncates with its existing ellipsis instead; the badges are
       short, fixed-width and the ones you scan for state, so they keep their
       space and the name yields. Do not restore the 55% floor without asking —
       the wrap it causes is the reported defect, not a side effect. */
    #peek-title-row { flex-wrap: nowrap; gap: 6px; justify-content: flex-start !important; }
    /* The NAME keeps a floor: with "rate limited" + "Rate-limited until …"
       both up, the status alone measured 324 of 378px and the name was 12px.
       The status group shrinks and clips its tail (the reset time) before the
       name gives up its 30%. Nothing wraps; the row stays one line. */
    #peek-title { flex: 1 1 auto; min-width: 30% !important; }
    #peek-session-status { flex: 0 1 auto !important; min-width: 0; overflow: hidden; }
    /* The model chip yields before the status does. Ethan's 2026-09-11 22:42
       screenshot: "mixpeek-orchestr" clipped and "RATE LIMITED" half hidden
       behind "claude-fable-5-1", because the row was centred and no chip
       would shrink. The h2 and the chip carry inline styles that outrank a
       plain rule, hence !important on exactly these. */
    #peek-model-badge { flex-shrink: 1 !important; min-width: 0; max-width: 34% !important; }
    .file-overlay-header { flex-wrap: nowrap; gap: 6px; }
    .file-overlay-header .file-title-wrap { flex: 1 1 auto; min-width: 0; max-width: none; margin-right: 4px; }
    .file-overlay-header h2 { font-size: 0.9rem; min-width: 0; max-width: none; }
    .file-overlay-header .btn { min-width: 40px; min-height: 40px; font-size: 0.95rem; padding: 6px 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .file-menu-btn { min-width: 40px; min-height: 40px; font-size: 1.35rem; }
    .file-actions .file-view-tab { min-height: 44px; font-size: 0.9rem; padding: 8px 14px; }
    #md-search-row { padding: 8px 4px; }
    #md-search-input { font-size: 16px; min-height: 40px; }
    #md-search-row .btn { min-width: 40px; min-height: 40px; }
  }
  /* Markdown in-page search */
  #md-search-row { display: none; align-items: center; gap: 6px; padding: 6px 2px; flex-shrink: 0; }
  #md-search-row.active { display: flex; }
  #md-search-input {
    flex: 1; min-width: 0; background: var(--input, var(--card));
    border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px;
    font-size: 0.85rem; color: var(--text); outline: none;
  }
  #md-search-input:focus { border-color: var(--accent); }
  #md-search-count { font-size: 0.72rem; color: var(--dim); white-space: nowrap; padding: 0 4px; min-width: 44px; text-align: right; }
  #md-search-row .btn { padding: 4px 10px; font-size: 0.78rem; }
  mark.md-search-hit { background: rgba(255, 215, 0, 0.35); color: inherit; border-radius: 2px; padding: 0 1px; }
  mark.md-search-hit.current { background: #ffb000; color: #000; }
  /* Unified markdown content styling — used everywhere renderMarkdown() output appears */
  .md-content { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 0.88rem; line-height: 1.6; }
  .md-content > *:first-child { margin-top: 0 !important; }
  .md-content > *:last-child { margin-bottom: 0 !important; }
  .md-content p { margin: 0 0 10px; }
  .md-content h1 { font-size: 1.25rem; font-weight: 700; margin: 16px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
  .md-content h2 { font-size: 1.05rem; font-weight: 700; margin: 14px 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--border); }
  .md-content h3 { font-size: 0.95rem; font-weight: 700; margin: 12px 0 5px; }
  .md-content h4, .md-content h5, .md-content h6 { font-weight: 700; margin: 10px 0 4px; }
  .md-content ul, .md-content ol { padding-left: 1.5em; margin: 0 0 10px; }
  .md-content li { margin-bottom: 3px; }
  .md-content li > p { margin-bottom: 4px; }
  .md-content code { font-family: "SF Mono","Fira Code",monospace; font-size: 0.85em; background: rgba(88,166,255,0.1); padding: 1px 5px; border-radius: 4px; }
  .md-content pre { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; overflow-x: auto; margin: 0 0 10px; }
  .md-content pre code { background: none; padding: 0; font-size: 0.9em; }
  .md-content blockquote { border-left: 3px solid var(--border); margin: 0 0 10px; padding: 2px 12px; color: var(--dim); }
  .md-content hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
  .md-content a { color: var(--accent); text-decoration: underline; }
  .md-content strong { font-weight: 700; }
  .md-content em { font-style: italic; }
  .md-content del { color: var(--dim); text-decoration: line-through; }
  .md-content img { max-width: 100%; border-radius: 6px; margin: 6px 0; display: block; }
  .md-content input[type="checkbox"] { margin-right: 5px; pointer-events: none; vertical-align: middle; }
  .md-content .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 10px; border-radius: 6px; border: 1px solid var(--border); }
  .md-content table { border-collapse: collapse; min-width: 100%; font-size: 0.85em; }
  .md-content thead { background: var(--card); }
  .md-content th { font-weight: 600; text-align: left; padding: 6px 10px; border: 1px solid var(--border); white-space: nowrap; }
  .md-content td { padding: 5px 10px; border: 1px solid var(--border); }
  .md-content tbody tr:nth-child(even) { background: rgba(88,166,255,0.04); }
  .md-content tbody tr:hover { background: rgba(88,166,255,0.08); }
  @media (max-width: 600px) {
    .md-content th, .md-content td { padding: 4px 7px; font-size: 0.8em; }
  }
  /* File overlay markdown: slightly larger font for full-width reading */
  .file-overlay-body.markdown.md-content { font-size: 0.92rem; }
  /* File edit textarea */
  #file-edit-wrap { display:none; flex:1; min-height:0; overflow:hidden; }
  .file-edit-ta {
    width:100%; height:100%; resize:none; border:1px solid var(--border);
    border-radius:8px; background:var(--bg); color:var(--text);
    font-family:"SF Mono","Fira Code","Cascadia Code",monospace; font-size:0.82rem;
    line-height:1.6; padding:14px; box-sizing:border-box; outline:none;
    -webkit-overflow-scrolling:touch; tab-size:2;
  }
  .file-edit-ta:focus { border-color:var(--accent); }
  #file-save-btn { font-size:0.72rem; padding:3px 10px; border:1px solid var(--green);
    border-radius:6px; color:var(--green); background:none; cursor:pointer;
    white-space:nowrap; flex-shrink:0; transition:all 0.15s; }
  #file-save-btn:hover { background:var(--green); color:#fff; }
  #file-save-btn.saving { opacity:0.5; pointer-events:none; }

  /* File explorer */
  .explore-breadcrumb { font-size: 0.8rem; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .explore-breadcrumb::-webkit-scrollbar { display: none; }
  .explore-crumb { color: var(--accent); cursor: pointer; }
  .explore-crumb:hover { text-decoration: underline; }
  .explore-row { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .explore-row:active { background: var(--hover); }
  .explore-icon { font-size: 1rem; flex-shrink: 0; line-height: 1; }
  .explore-name { font-size: 0.88rem; flex: 1; word-break: break-all; min-width: 0; }
  .explore-size { font-size: 0.72rem; color: var(--dim); flex-shrink: 0; }
  .explore-mtime { font-size: 0.68rem; color: var(--dim); flex-shrink: 0; }
  .explore-menu-btn { flex-shrink: 0; background: none; border: none; color: var(--dim);
    cursor: pointer; font-size: 1rem; padding: 2px 6px; border-radius: 4px; line-height: 1;
    opacity: 0.7; transition: opacity 0.15s; }
  .explore-row:hover .explore-menu-btn, .explore-menu-btn:focus { opacity: 1; }
  #files-body.files-drop-active { outline: 2px dashed var(--accent); outline-offset: -4px; background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
  /* File explorer redesign */
  .fe-toolbar {
    display: flex; align-items: center; gap: 4px; padding: 6px 10px; flex-wrap: wrap;
    border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--card);
  }
  #files-view > .fe-toolbar { flex-wrap: nowrap; min-width: 0; }
  #files-breadcrumb { flex-basis: 0; }
  .fe-tb-btn {
    background: none; border: 1px solid var(--border); border-radius: 5px;
    color: var(--dim); cursor: pointer; padding: 4px 8px; font-size: 0.75rem;
    line-height: 1; flex-shrink: 0; transition: background 0.12s, color 0.12s;
    display: flex; align-items: center; gap: 5px; white-space: nowrap;
  }
  .fe-tb-btn:hover { background: var(--hover); color: var(--text); }
  .fe-tb-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
  /* The labeled action row (Home / New Folder / New File / New .mdai / Upload /
     Refresh / Set dir) is collapsed into the ⋯ More menu on EVERY width (Ethan
     2026-08-19: "these take up too much space make it an ellipse dropdown"). The
     More menu already carries every one of these actions, so nothing is lost —
     the toolbar is just Back / Up / breadcrumb / ⋯ now. */
  .fe-tb-actions { display: none; }
  /* The More (ellipsis) menu is always available, on desktop and mobile. */
  .fe-tb-overflow { position: relative; flex-shrink: 0; display: flex; }
  .fe-tb-overflow-menu {
    display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 200;
    background: var(--card); border: 1px solid var(--border); border-radius: 8px;
    padding: 4px; min-width: 200px; box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    flex-direction: column; gap: 1px;
  }
  .fe-tb-overflow-menu.open { display: flex; }
  .fe-tb-oitem {
    display: flex; align-items: center; gap: 9px; padding: 9px 11px;
    border-radius: 5px; font-size: 0.82rem; color: var(--text); cursor: pointer;
    background: none; border: none; width: 100%; text-align: left;
  }
  .fe-tb-oitem:hover { background: var(--hover); }
  .fe-tb-oitem.active { background: var(--accent20,rgba(99,179,237,0.15)); }
  .fe-tb-oitem-session { color: var(--accent); font-weight: 600; }
  .fe-tb-odivider { height: 1px; background: var(--border); margin: 3px 0; }
  @media (max-width: 600px) {
    /* .fe-tb-actions is already display:none at every width (above); on a phone
       we also drop the "More" text so only the ⋯ icon remains, to fit 375px. */
    .fe-more-lbl { display: none; }
  }
  .fe-breadcrumb {
    flex: 1 1 180px; font-size: 0.8rem; font-family: 'SF Mono','Fira Code',monospace;
    overflow-x: auto; white-space: nowrap; padding: 3px 6px;
    background: var(--bg); border: 1px solid var(--border); border-radius: 5px;
    min-width: 0; scrollbar-width: none;
  }
  .fe-breadcrumb::-webkit-scrollbar { display: none; }
  .fe-crumb { color: var(--accent); cursor: pointer; }
  .fe-crumb:hover { text-decoration: underline; }
  .fe-crumb-sep { color: var(--dim); margin: 0 2px; }
  /* ONE scroll container for header + rows (both axes) with a STICKY header —
     header and rows share the exact same horizontal scroll, so columns can
     never desync (the two-container version misaligned on iOS). */
  .fe-scroll { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
  .fe-col-headers {
    display: grid; grid-template-columns: minmax(0,1fr) 60px 92px 30px;
    padding: 0 4px; border-bottom: 2px solid var(--border); flex-shrink: 0;
    position: sticky; top: 0; z-index: 2;
    background: var(--card);
  }
  .fe-col-hdr {
    padding: 5px 8px; font-size: 0.7rem; font-weight: 600; color: var(--dim);
    cursor: pointer; user-select: none; display: flex; align-items: center; gap: 3px;
    transition: color 0.12s;
  }
  .fe-col-hdr:hover { color: var(--text); }
  .fe-col-hdr.sorted { color: var(--accent); }
  .fe-sort-arrow { font-size: 0.65rem; opacity: 0.7; }
  .fe-col-hdr-actions { padding: 5px 4px; }
  .fe-row {
    display: grid; grid-template-columns: minmax(0,1fr) 60px 92px 30px;
    padding: 0 4px; border-bottom: 1px solid rgba(139,148,158,0.08);
    cursor: pointer; transition: background 0.08s;
    -webkit-tap-highlight-color: transparent;
  }
  .fe-row:hover { background: var(--hover, rgba(139,148,158,0.07)); }
  .fe-row:active { background: rgba(88,166,255,0.08); }
  /* Desktop single-click selection (double-click then opens the file). */
  .fe-row.fe-selected { background: color-mix(in srgb, var(--accent) 18%, transparent); }
  .fe-row.fe-selected:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
  .fe-row.fe-dir .fe-cell-name { font-weight: 500; }
  .fe-cell-name {
    display: flex; align-items: center; gap: 4px; padding: 4px 6px;
    min-width: 0; overflow: hidden;
  }
  /* "Downloaded on this device" badge — green ⤓ after a cached file's name. */
  .fe-dl-badge { color: #3fb950; font-size: 0.82rem; margin-left: 5px; flex-shrink: 0; line-height: 1; }
  /* Inline folder-expand chevron (accordion). Row still navigates on click. */
  .fe-expand { background: none; border: none; color: var(--dim); cursor: pointer; padding: 0;
    width: 18px; height: 22px; flex-shrink: 0; font-size: 1.05rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; transition: transform 0.12s; }
  .fe-expand:hover { color: var(--text); }
  .fe-expand.open { transform: rotate(90deg); }
  .fe-expand.loading { opacity: 0.4; }
  .fe-expand-spacer { display: inline-block; width: 18px; flex-shrink: 0; }
  .fe-row.fe-expanded > .fe-cell-name { color: var(--accent); }
  @media (max-width: 600px) { .fe-expand { width: 24px; font-size: 1.25rem; } .fe-expand-spacer { width: 22px; } }
  .fe-cell-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.83rem; }
  .fe-cell-size { padding: 4px 6px; font-size: 0.72rem; color: var(--dim); display: flex; align-items: center; }
  .fe-cell-date { padding: 4px 6px; font-size: 0.72rem; color: var(--dim); display: flex; align-items: center; }
  .fe-cell-actions { padding: 4px 2px; display: flex; align-items: center; justify-content: center; }
  .fe-menu-btn {
    background: none; border: none; color: var(--dim); cursor: pointer;
    font-size: 1rem; padding: 3px 5px; border-radius: 4px; opacity: 0;
    transition: opacity 0.12s; line-height: 1;
  }
  .fe-row:hover .fe-menu-btn, .fe-menu-btn:focus { opacity: 1; }
  .fe-status {
    padding: 4px 14px; font-size: 0.7rem; color: var(--dim); flex-shrink: 0;
    border-top: 1px solid var(--border); background: var(--card);
  }
  .lib-facet {
    background: var(--bg); border: 1px solid var(--border); border-radius: 5px;
    color: var(--text); font-size: 0.72rem; padding: 4px 6px; max-width: 130px;
    cursor: pointer; outline: none;
  }
  #lib-grid .lib-card:active { transform: scale(0.98); }
  #lib-grid .lib-card { transition: transform 0.08s; }
  .fe-back-row {
    display: grid; grid-template-columns: minmax(0,1fr) 60px 92px 30px;
    padding: 0 4px; border-bottom: 1px solid rgba(139,148,158,0.08);
    cursor: pointer;
  }
  .fe-back-row:hover { background: var(--hover, rgba(139,148,158,0.07)); }
  @media (max-width: 600px) {
    /* Keep every column on mobile and let the table scroll sideways (standard
       mobile data-table UX) instead of hiding Size/Modified. min-width forces
       the horizontal overflow #fe-scroll then scrolls; header stays aligned. */
    .fe-col-headers, .fe-row, .fe-back-row { min-width: 460px; }
    .fe-cell-name { padding: 7px 8px; }
    .fe-cell-name span { font-size: 0.9rem; }
    .fe-menu-btn { opacity: 0.5; font-size: 1.1rem; }
  }
  .explore-menu-popup { position: fixed; background: var(--card); border: 1px solid var(--border);
    border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.3); z-index: 900; min-width: 140px;
    overflow: hidden; }
  .explore-menu-item { display: block; width: 100%; background: none; border: none; text-align: left;
    padding: 11px 16px; font-size: 0.88rem; color: var(--text); cursor: pointer; }
  .explore-menu-item:active, .explore-menu-item:hover { background: var(--hover); }

  /* Connect session list */
  /* FullCalendar theme overrides */
  #fc-container { --fc-border-color: var(--border); --fc-button-bg-color: transparent; --fc-button-border-color: var(--border); --fc-button-text-color: var(--text); --fc-button-hover-bg-color: var(--hover); --fc-button-hover-border-color: var(--border); --fc-button-active-bg-color: var(--accent); --fc-button-active-border-color: var(--accent); --fc-today-bg-color: rgba(56,139,253,0.06); --fc-event-border-color: transparent; --fc-page-bg-color: var(--bg); --fc-neutral-bg-color: var(--bg); --fc-list-event-hover-bg-color: var(--hover); --fc-now-indicator-color: var(--accent); --fc-non-business-color: transparent; }
  #fc-container { font-family: inherit; font-size: 0.85rem; }
  #fc-container .fc-toolbar { padding: 8px 4px; gap: 8px; flex-wrap: wrap; }
  #fc-container .fc-toolbar-title { font-size: 1.05rem; font-weight: 600; }
  #fc-container .fc-button { font-size: 0.8rem; padding: 5px 12px; border-radius: 6px; font-weight: 500; font-family: inherit; text-transform: none; }
  #fc-container .fc-button:focus { box-shadow: none; }
  #fc-container .fc-button-group > .fc-button { border-radius: 0; }
  #fc-container .fc-button-group > .fc-button:first-child { border-radius: 6px 0 0 6px; }
  #fc-container .fc-button-group > .fc-button:last-child { border-radius: 0 6px 6px 0; }
  #fc-container .fc-button-active { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
  #fc-container .fc-col-header-cell { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding: 8px 0; }
  #fc-container .fc-daygrid-day-number { font-size: 0.8rem; padding: 4px 6px; color: var(--dim); }
  #fc-container .fc-daygrid-day.fc-day-today .fc-daygrid-day-number { background: var(--accent); color: #fff; border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
  #fc-container .fc-event { cursor: pointer; border-radius: 4px; font-size: 0.75rem; padding: 1px 4px; border-left-width: 3px; }
  #fc-container .fc-timegrid-slot { height: 2.5em; }
  #fc-container .fc-timegrid-slot-label { font-size: 0.72rem; color: var(--dim); }
  #fc-container .fc-scrollgrid { border: none; }
  #fc-container .fc-scrollgrid td { border-color: var(--border); }
  /* FullCalendar reserves a scrollbar-width gutter on the header row (day
     labels + all-day) so it stays pixel-aligned with the scrollable hour
     grid below — on themes with always-visible/classic scrollbars this
     renders as a phantom scroll affordance next to "all-day" even with
     nothing to scroll. Column widths come from the shared sync-table, not
     this gutter, so hiding it doesn't break alignment. */
  #fc-container .fc-scrollgrid-section-header .fc-scroller { overflow: hidden !important; }
  #fc-container .fc-daygrid-day-frame { min-height: 80px; }
  #fc-container .fc-subscribe-button { font-size: 0.78rem !important; padding: 4px 10px !important; }
  /* "+ Event" is the primary action — make it accent-colored so it stands out. */
  #fc-container .fc-addEvent-button { font-size: 0.8rem !important; padding: 5px 14px !important; font-weight: 600 !important;
    background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; margin-left: 8px; }
  #fc-container .fc-addEvent-button:hover { filter: brightness(1.08); }
  #fc-container .fc-eventsToggle-button,
  #fc-container .fc-schedToggle-button,
  #fc-container .fc-issuesToggle-button,
  #fc-container .fc-gcalToggle-button { font-size: 0.78rem !important; padding: 4px 10px !important; }
  /* On: a light accent-tinted fill so an active layer reads as "on" at a
     glance, not just "not dimmed". Off: dimmed, same as before — the label
     itself carries no glyph (see _fcLayerLabel), so this is the only signal. */
  #fc-container .fc-eventsToggle-button[aria-pressed="true"],
  #fc-container .fc-schedToggle-button[aria-pressed="true"],
  #fc-container .fc-issuesToggle-button[aria-pressed="true"],
  #fc-container .fc-gcalToggle-button[aria-pressed="true"] {
    background: color-mix(in srgb, var(--accent) 18%, transparent) !important;
    border-color: var(--accent) !important;
  }
  #fc-container .fc-eventsToggle-button[aria-pressed="false"],
  #fc-container .fc-schedToggle-button[aria-pressed="false"],
  #fc-container .fc-issuesToggle-button[aria-pressed="false"],
  #fc-container .fc-gcalToggle-button[aria-pressed="false"] { opacity: 0.55; }
  #fc-container .fc-footer-toolbar .fc-button { padding: 8px 10px; min-width: 44px; }
  #fc-container .fc-footer-toolbar .fc-addEvent-button { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-size: 1.2rem; }
  #fc-container .fc-footer-toolbar { padding: 6px 4px; margin-top: 6px !important; }
  @media (max-width: 600px) {
    #calendar-view { height: calc(100dvh - 60px); }
    #fc-container { padding: 0 !important; }
    #fc-container .fc-toolbar { padding: 8px 6px; gap: 4px; flex-wrap: wrap; justify-content: space-between; }
    #fc-container .fc-toolbar-chunk { display: flex; align-items: center; gap: 4px; }
    #fc-container .fc-toolbar-chunk:first-child { order: 1; }
    #fc-container .fc-toolbar-chunk:nth-child(2) { order: 0; width: 100%; justify-content: center; }
    #fc-container .fc-toolbar-chunk:last-child { order: 2; }
    #fc-container .fc-toolbar-title { font-size: 1.05rem; font-weight: 700; }
    #fc-container .fc-button { font-size: 0.78rem; padding: 8px 12px; min-height: 38px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
    #fc-container .fc-button-group { flex-wrap: nowrap; }
    /* The chunk reorder rules above are written for the 3-chunk header; the footer
       has 2 chunks and must keep its natural left/right layout. */
    #fc-container .fc-footer-toolbar { flex-wrap: nowrap; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
    #fc-container .fc-footer-toolbar .fc-toolbar-chunk { order: 0 !important; width: auto !important; }
    #fc-container .fc-footer-toolbar .fc-button { min-height: 44px; }
    #fc-container .fc-daygrid-day-frame { min-height: 52px; }
    #fc-container .fc-daygrid-day-number { font-size: 0.78rem; padding: 4px 6px; }
    #fc-container .fc-event { font-size: 0.75rem; padding: 3px 6px; min-height: 26px; line-height: 1.4; border-radius: 5px; }
    #fc-container .fc-col-header-cell { font-size: 0.68rem; padding: 6px 0; }
    #fc-container .fc-timegrid-slot { height: 3.5em; }
    #fc-container .fc-timegrid-event { min-height: 28px; }
    #fc-container .fc-scrollgrid { border: none; }
    #fc-container .fc-subscribe-button { display: none; }
    #fc-container .fc-list-event { font-size: 0.85rem; }
    #fc-container .fc-list-event td { padding: 10px 8px; }
    #fc-container .fc-list-day-cushion { padding: 8px; font-size: 0.82rem; }
    #fc-container .fc-list-empty-cushion { font-size: 0.85rem; padding: 40px 16px; }
  }
  /* Board collapse */
  .board-col-collapse { background: none; border: none; cursor: pointer; color: var(--dim);
    font-size: 0.65rem; padding: 4px 6px; border-radius: 3px; line-height: 1; flex-shrink: 0;
    -webkit-tap-highlight-color: transparent; transition: color 0.15s; min-width: 28px; min-height: 28px;
    display: flex; align-items: center; justify-content: center; }
  .board-col-collapse:hover { color: var(--text); }
  .board-col.col-collapsed { min-height: unset !important; }
  .board-col.col-collapsed > :not(.board-col-header) { display: none !important; }
  .skill-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 8px;
    padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
  }
  .skill-card-name { font-family: "SF Mono","Fira Code",monospace; font-size: 0.88rem; font-weight: 600; color: var(--accent); }
  .skill-card-desc { font-size: 0.85rem; color: var(--text); }
  .skill-card-hint { font-size: 0.75rem; color: var(--dim); font-family: "SF Mono","Fira Code",monospace; }
  /* Skills tab: list/grid of skills beside a usage column. */
  #skills-view { padding: 0 !important; }
  .sk-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
  .sk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
  .sk-main { min-width: 0; }
  .sk-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .sk-search { flex: 1; position: relative; min-width: 0; }
  .sk-search .search-input { padding-right: 44px; }
  .sk-kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 600 0.66rem ui-monospace, Menlo, monospace;
    color: var(--dim); border: 1px solid var(--border); border-radius: 5px; padding: 2px 5px; pointer-events: none; }
  .sk-count { font-size: 0.78rem; color: var(--dim); white-space: nowrap; }
  .sk-new { flex-shrink: 0; }
  .sk-filters { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
  .sk-select { width: auto; min-height: 36px; font-size: 0.78rem; padding: 4px 8px; }
  .sk-select-sm { min-height: 30px; font-size: 0.72rem; padding: 2px 6px; }
  .sk-viewtoggle { display: inline-flex; margin-left: auto; border: 1px solid var(--border); border-radius: var(--radius-control, 8px); overflow: hidden; }
  .sk-viewtoggle .btn { border: none; border-radius: 0; min-height: 34px; font-size: 0.76rem; padding: 4px 12px; background: transparent; }
  .sk-viewtoggle .btn.active { background: var(--accent); color: var(--on-accent); }
  .sk-section { margin-bottom: 16px; }
  .sk-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
  .sk-section-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--text); cursor: pointer;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 2px; min-height: 32px;
    text-align: left; min-width: 0; flex-wrap: wrap; }
  .sk-caret { color: var(--dim); width: 10px; display: inline-block; }
  .sk-section-count { font-weight: 600; color: var(--dim); border: 1px solid var(--border); border-radius: 999px; padding: 0 7px; font-size: 0.68rem; letter-spacing: 0; }
  .sk-viewall { background: none; border: none; color: var(--accent); font-size: 0.76rem; cursor: pointer; padding: 6px 4px; min-height: 32px;
    white-space: nowrap; flex-shrink: 0; }
  /* No overflow:hidden here: it would clip a row's open menu. The first and
     last rows carry the container's radius instead. */
  .sk-rows { border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
  .sk-rows .skill-card.sk-row { background: transparent; border: none; border-radius: 0; padding: 0; gap: 0; border-top: 1px solid var(--border); }
  .sk-rows .skill-card.sk-row:first-child { border-top: none; }
  .sk-rows:not(.sk-grid) .sk-row:first-child .sk-row-main { border-radius: 9px 9px 0 0; }
  .sk-rows:not(.sk-grid) .sk-row:last-child .sk-row-main { border-radius: 0 0 9px 9px; }
  .sk-rows:not(.sk-grid) .sk-row:only-child .sk-row-main { border-radius: 9px; }
  .sk-section-hint { text-transform: none; font-weight: 500; color: var(--dim); letter-spacing: 0; }
  .sk-row-main { display: grid; grid-template-columns: 32px minmax(110px, 0.9fr) minmax(0, 2fr) auto 52px 62px auto; align-items: center;
    gap: 10px; padding: 6px 10px; cursor: pointer; min-height: 44px; }
  .sk-row-main:hover { background: rgba(127,127,127,0.07); }
  .sk-pin { background: none; border: none; cursor: pointer; font-size: 0.85rem; opacity: 0.35; filter: grayscale(1); min-width: 32px; min-height: 32px; border-radius: 6px; }
  .sk-pin.active { opacity: 1; filter: none; }
  .sk-pin:hover { opacity: 0.8; }
  .sk-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sk-desc { font-size: 0.8rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .sk-badge { font-size: 0.68rem; font-weight: 600; border-radius: 999px; padding: 2px 9px; white-space: nowrap; justify-self: start; }
  .sk-badge-custom { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
  .sk-badge-project { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 14%, transparent); }
  .sk-badge-builtin { color: var(--dim); background: color-mix(in srgb, var(--dim) 16%, transparent); }
  .sk-uses { font-size: 0.78rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
  .sk-ago { font-size: 0.74rem; color: var(--dim); white-space: nowrap; text-align: right; }
  .sk-meta { display: contents; }
  .sk-actions { display: inline-flex; align-items: center; gap: 4px; }
  .sk-actions .btn { font-size: 0.72rem; padding: 3px 10px; min-height: 30px; }
  .sk-actions .sk-more, .sk-actions .sk-expand { padding: 3px 8px; min-width: 30px; }
  .sk-menu-wrap { position: relative; display: inline-flex; }
  .sk-menu { display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 200px; background: var(--card);
    border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.3); padding: 4px; }
  .sk-menu.open { display: block; }
  .sk-menu button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); font-size: 0.82rem;
    padding: 9px 10px; min-height: 40px; border-radius: 6px; cursor: pointer; }
  .sk-menu button:hover { background: rgba(127,127,127,0.12); }
  .sk-row .skill-expand { padding: 0 14px 12px 52px; }
  .sk-rows.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; border: none; background: none; overflow: visible; }
  .sk-rows.sk-grid .skill-card.sk-row { border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
  .sk-rows.sk-grid .sk-row-main { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "pin name badge" "desc desc desc" "meta meta actions";
    row-gap: 6px; padding: 10px 12px; align-items: center; }
  .sk-rows.sk-grid .sk-pin { grid-area: pin; }
  .sk-rows.sk-grid .sk-name { grid-area: name; }
  .sk-rows.sk-grid .sk-badge { grid-area: badge; justify-self: end; }
  .sk-rows.sk-grid .sk-desc { grid-area: desc; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.5em; }
  .sk-rows.sk-grid .sk-meta { grid-area: meta; display: inline-flex; gap: 10px; align-items: center; }
  .sk-rows.sk-grid .sk-uses, .sk-rows.sk-grid .sk-ago { text-align: left; }
  .sk-rows.sk-grid .sk-actions { grid-area: actions; justify-self: end; }
  .sk-rows.sk-grid .skill-expand { padding: 0 12px 12px; }
  .sk-empty { color: var(--dim); font-size: 0.82rem; padding: 14px 4px; }
  .sk-err { color: var(--red); }
  .sk-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; }
  .sk-panel { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
  .sk-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
  .sk-panel h3 { margin: 0; font-size: 0.86rem; font-weight: 700; }
  .sk-chart svg { width: 100%; height: 130px; display: block; }
  .sk-chart-total { font-size: 0.74rem; color: var(--dim); margin-bottom: 4px; }
  .sk-chart-total b { color: var(--text); font-size: 0.9rem; }
  .sk-bar { fill: var(--accent); }
  .sk-grid-line { stroke: var(--border); stroke-width: 1; }
  .sk-axis { fill: var(--dim); font-size: 8px; }
  .sk-top-list, .sk-groups { list-style: none; margin: 0; padding: 0; }
  .sk-top-item, .sk-group-item { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; color: var(--text);
    padding: 6px 4px; min-height: 36px; border-radius: 6px; cursor: pointer; font-size: 0.82rem; text-align: left; }
  .sk-top-item:hover, .sk-group-item:hover { background: rgba(127,127,127,0.1); }
  .sk-rank { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem;
    font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); flex-shrink: 0; }
  .sk-top-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "SF Mono","Fira Code",monospace; }
  .sk-top-n, .sk-group-n { color: var(--dim); font-size: 0.76rem; font-variant-numeric: tabular-nums; margin-left: auto; }
  .sk-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
  .sk-dot-pinned { background: var(--yellow); } .sk-dot-custom { background: var(--green); }
  .sk-dot-project { background: var(--cyan); } .sk-dot-builtin { background: var(--dim); }
  .sk-tip { position: relative; font-size: 0.78rem; color: var(--dim); background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
  .sk-tip-title { font-weight: 700; color: var(--text); margin-bottom: 4px; }
  .sk-tip-x { position: absolute; top: 4px; right: 4px; background: none; border: none; color: var(--dim); cursor: pointer; min-width: 32px; min-height: 32px; }
  @media (max-width: 900px) {
    .sk-layout { grid-template-columns: minmax(0, 1fr); }
    .sk-side { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  }
  @media (max-width: 600px) {
    .sk-scroll { padding: 10px 10px calc(16px + env(safe-area-inset-bottom)); }
    .sk-kbd, .sk-count { display: none; }
    .sk-top .search-input { min-height: 44px; }
    .sk-new { min-height: 44px; }
    .sk-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -10px 12px; padding: 0 10px 2px; }
    .sk-filters::-webkit-scrollbar { display: none; }
    .sk-select { min-height: 44px; flex-shrink: 0; }
    .sk-viewtoggle { flex-shrink: 0; margin-left: 0; }
    .sk-viewtoggle .btn { min-height: 44px; }
    .sk-row-main { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "pin name badge" "pin desc desc" "pin meta actions";
      row-gap: 2px; column-gap: 8px; padding: 8px 10px; }
    .sk-pin { grid-area: pin; align-self: start; min-width: 44px; min-height: 44px; }
    .sk-name { grid-area: name; }
    .sk-badge { grid-area: badge; justify-self: end; }
    .sk-desc { grid-area: desc; }
    .sk-meta { grid-area: meta; display: inline-flex; gap: 10px; align-items: center; min-width: 0; }
    .sk-uses, .sk-ago { text-align: left; }
    .sk-actions { grid-area: actions; justify-self: end; }
    .sk-actions .btn { min-height: 44px; min-width: 44px; }
    .sk-row .skill-expand { padding: 0 10px 12px; }
    .sk-rows.sk-grid { grid-template-columns: minmax(0, 1fr); }
    .sk-section-toggle, .sk-viewall { min-height: 44px; }
    .sk-section-hint { display: none; }
    .sk-top-item, .sk-group-item { min-height: 44px; }
    .sk-side { grid-template-columns: minmax(0, 1fr); }
    .sk-menu { min-width: 190px; }
  }
  .connect-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
    margin-bottom: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .connect-item:active { border-color: var(--accent); background: rgba(88,166,255,0.08); }
  .connect-item-info { flex: 1; min-width: 0; }
  .connect-item-name { font-weight: 600; font-size: 0.95rem; }
  .connect-item-dir { color: var(--dim); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .connect-empty { color: var(--dim); text-align: center; padding: 20px; font-size: 0.9rem; }

  /* Create session */
  .header-row {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: max(var(--chrome-tab-h, 0px), env(safe-area-inset-top, 0px)); z-index: 40;
    background: var(--bg); padding: 12px 16px;
    margin: 0 -16px 0 -16px;
    border-bottom: 1px solid var(--border);
  }
  .header-row h1 { margin-bottom: 0; }
  /* AMUX-4475 / AF-774: receipts belong inside Notifications. Keep the
     primary header free of a separate Actions control. */
  .header-row > #interaction-feedback { display: none; }
  .btn-create {
    font-size: 0.85rem; padding: 8px 14px; border-radius: 8px;
    border: 1px solid var(--accent); background: var(--accent); color: #fff;
    cursor: pointer; font-weight: 600; -webkit-tap-highlight-color: transparent;
  }
  .btn-create:active { opacity: 0.8; }

  /* Active sessions dropdown */
  .active-wrap { position: relative; }
  .btn-active {
    font-size: 0.85rem; padding: 8px 12px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--card); color: var(--text);
    cursor: pointer; font-weight: 500; -webkit-tap-highlight-color: transparent;
    min-height: 40px; display: flex; align-items: center; gap: 6px;
  }
  .btn-active:active { background: var(--border); }
  .btn-active .active-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--green); box-shadow: 0 0 5px var(--green);
  }
  .btn-active .active-count {
    font-variant-numeric: tabular-nums;
  }
  /* Fleet-wide rate-limit indicator */
  .btn-rate-limit {
    display: none; font-size: 0.78rem; padding: 6px 10px; border-radius: 8px;
    border: 1px solid rgba(248,81,73,0.45);
    background: rgba(248,81,73,0.12); color: #f85149;
    cursor: pointer; font-weight: 500; min-height: 40px;
    align-items: center; gap: 6px; font-variant-numeric: tabular-nums;
    -webkit-tap-highlight-color: transparent;
  }
  /* The header chips share one shape: text on desktop, count only on phones.
     The status and host chips were added without these rules and showed a
     stray count on desktop and overflowing text at 390px. */
  #rate-limit-pill-count, #telemetry-pill-count, #host-pressure-pill-count, #needs-input-pill-count { display:none; }
  .btn-rate-limit.show { display: flex; }
  .btn-rate-limit:active { background: rgba(248,81,73,0.22); }
  .active-dropdown {
    display: none; position: fixed; top: auto; right: 16px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 10px; min-width: 240px; max-width: 320px; z-index: 60;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4); overflow: hidden;
    max-height: 300px; overflow-y: auto;
  }
  .active-dropdown.open { display: block; }
  @media (max-width: 480px) {
    .active-dropdown { left: 16px; right: 16px; min-width: 0; max-width: none; }
  }
  .active-dropdown-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border);
    -webkit-tap-highlight-color: transparent;
  }
  .active-dropdown-item:last-child { border-bottom: none; }
  .active-dropdown-item:active { background: rgba(88,166,255,0.1); }
  .active-dropdown-item .adi-info { flex: 1; min-width: 0; }
  .active-dropdown-item .adi-name { font-weight: 600; font-size: 0.88rem; }
  .active-dropdown-item .adi-dir { color: var(--dim); font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .active-dropdown-item .adi-preview { color: var(--dim); font-size: 0.7rem; font-family: "SF Mono", "Fira Code", monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
  .active-dropdown-empty { color: var(--dim); text-align: center; padding: 16px; font-size: 0.85rem; }
  .active-dropdown-item .adi-arrow { color: var(--dim); font-size: 0.8rem; flex-shrink: 0; }

  /* Autocomplete dropdown */
  .ac-wrap { position: relative; }
  .ac-list {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
    background: var(--card); border: 1px solid var(--border); border-top: none;
    border-radius: 0 0 8px 8px; max-height: 180px; overflow-y: auto;
    display: none;
  }
  .ac-list.open { display: block; }
  .ac-list.slash-ac {
    top: auto; bottom: 100%; border-top: 1px solid var(--border); border-bottom: none;
    border-radius: 8px 8px 0 0; max-height: 220px;
  }
  .ac-close {
    position: sticky; bottom: 0; float: right; z-index: 1;
    background: var(--card); border: none; color: var(--dim); cursor: pointer;
    font-size: 1.1rem; line-height: 1; padding: 6px 10px; margin: 0;
  }
  .ac-close:hover { color: var(--text); }
  .ac-item .ac-desc { font-family: -apple-system, sans-serif; color: var(--dim); font-size: 0.75rem; margin-left: 8px; }
  .ac-item {
    padding: 8px 12px; font-size: 0.88rem; cursor: pointer;
    font-family: "SF Mono", "Fira Code", monospace; color: var(--text);
    border-bottom: 1px solid var(--border);
  }
  .ac-item:last-child { border-bottom: none; }
  .ac-item.ac-example { padding-left: 22px; }
  .ac-item .ac-eg { font-family: -apple-system, sans-serif; color: var(--dim); font-size: 0.7rem; margin-right: 6px; }
  .ac-item:active, .ac-item.selected { background: rgba(88,166,255,0.15); }
  .ac-section { padding: 4px 12px; font-size: 0.68rem; font-family: -apple-system, sans-serif;
    color: var(--dim); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border); background: var(--bg); pointer-events: none; }
  .at-item .at-at { color: var(--accent); }
  .at-item b { color: var(--accent); font-weight: 700; }

  /* Search input with clear button */
  .search-wrap {
    position: relative; display: flex; align-items: center;
  }
  .search-wrap { flex: 1; }
  .search-input {
    font-size: 0.85rem; padding: 8px 28px 8px 12px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--card); color: var(--text);
    outline: none; min-height: 40px; width: 100%; box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }
  .search-input::placeholder { color: var(--dim); }
  .search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88,166,255,0.12); }
  .search-clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; border-radius: 50%; border: none;
    background: var(--border); color: var(--dim); font-size: 0.7rem;
    cursor: pointer; display: none; align-items: center; justify-content: center;
    line-height: 1; -webkit-tap-highlight-color: transparent;
  }
  .search-clear:active { background: var(--dim); color: var(--text); }
  .search-wrap.has-value .search-clear { display: flex; }
  .search-count {
    position: absolute; right: 30px; top: 50%; transform: translateY(-50%);
    font-size: 0.65rem; color: var(--yellow); font-weight: 600;
    pointer-events: none; white-space: nowrap;
  }
  .card-log-hit {
    font-size: 0.72rem; padding: 2px 0; cursor: pointer; line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .card-log-hit:hover { opacity: 0.8; }
  .log-hit-loc { color: var(--accent); font-weight: 600; font-family: monospace; flex-shrink: 0; margin-right: 6px; }
  .log-hit-text { color: var(--dim); }
  .log-search-btn { width: auto; padding: 0 8px; gap: 4px; font-size: 0.75rem; white-space: nowrap; }
  .log-search-btn .log-search-icon { flex-shrink: 0; }
  .log-search-btn .log-search-label { display: inline; }
  @media (max-width: 480px) {
    .log-search-btn { width: 28px; padding: 0; }
    .log-search-btn .log-search-label { display: none; }
    .search-input { min-width: 0; }
    .search-input:focus { }
    /* The clear "x" renders as a 20px dot, which is well under the 44px touch
       minimum. Expand the HIT area with a pseudo-element instead of the box, so
       the target is thumb-sized without turning the dot into a grey blob. */
    .search-clear::before {
      content: ''; position: absolute; left: 50%; top: 50%;
      width: 44px; height: 44px; transform: translate(-50%, -50%);
    }
  }
  @media (max-width: 600px) {
    /* AF-779: seven 44px targets + 12px edge padding fit even at 320px.
       Keep one row through the full mobile breakpoint; spare width becomes
       space between controls, rather than a second row or clipped actions. */
    body { padding-top:max(var(--chrome-tab-h, 0px), env(safe-area-inset-top, 0px)); }
    .header-row { gap:0; padding:6px max(6px, env(safe-area-inset-right, 0px)) 6px max(6px, env(safe-area-inset-left, 0px)); flex-wrap:nowrap; justify-content:space-between; }
    .header-row > .header-brand, .header-row > .header-actions { display:contents !important; }
    .header-row #brand-header, .header-row #conn-status, .header-row #notif-btn,
    .header-row .header-add-btn, .header-row .settings-btn, .header-row .btn-active,
    .header-row .btn-rate-limit { flex:0 0 44px; width:44px; min-width:44px; height:44px; min-height:44px; box-sizing:border-box; justify-content:center; padding:4px; }
    .header-row #brand-header { font-size:1.25rem; }
    .header-row #brand-icon-header { display:none; }
    .header-row #brand-name-header { font-size:0; }
    .header-row #brand-name-header::after { content:'a'; font-size:1.25rem; }
    .header-row #conn-status { display:flex; font-size:0; gap:0; background:transparent; transition:color .2s,background-color .2s; }
    .header-row #conn-status::before { width:12px; height:12px; margin:0; }
    .header-row .active-wrap, .header-row .header-add-wrap, .header-row .settings-wrap { flex:0 0 auto; }
    .header-row .btn-active { gap:3px; font-size:0.85rem; }
    .header-row .btn-rate-limit { max-width:44px; overflow:visible; white-space:nowrap; }
    .header-row #rate-limit-pill-text, .header-row #telemetry-pill-text, .header-row #host-pressure-pill-text, .header-row #needs-input-pill-text { display:none; }
    .header-row #rate-limit-pill-count, .header-row #telemetry-pill-count, .header-row #host-pressure-pill-count, .header-row #needs-input-pill-count { display:inline-block; font-size:0.85rem; font-weight:600; }
    .header-row > #interaction-feedback { flex:0 0 44px; margin-left:auto; }
    .header-row > #interaction-feedback > summary { box-sizing:border-box; width:44px; height:44px; min-height:44px; padding:0; justify-content:center; }
    .header-row > #interaction-feedback > summary > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
    .header-row > #interaction-feedback > summary > svg:last-child { display:none; }

  }

  /* Header + dropdown */
  .header-add-wrap { position: relative; }
  .header-add-btn {
    font-size: 1.1rem; width: 40px; height: 40px; border-radius: 8px;
    border: 1px solid var(--accent); background: var(--accent); color: #fff;
    cursor: pointer; font-weight: 700; display: flex; align-items: center;
    justify-content: center; -webkit-tap-highlight-color: transparent;
  }
  .header-add-btn:active { opacity: 0.8; }
  .header-add-menu {
    display: none; position: absolute; top: calc(100% + 6px); right: 0;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 10px; min-width: 180px; z-index: 60;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4); overflow: hidden;
  }
  .header-add-menu.open { display: block; }
  .header-add-menu .card-menu-item { padding: 12px 16px; }

  /* Settings dropdown */

  /* ── Walkthrough ── */
  #wt-overlay {
    display: none; position: fixed; inset: 0; z-index: 8000;
  }
  #wt-overlay.open { display: block; }
  #wt-overlay.open + #wt-tooltip { display: block; }
  #wt-backdrop {
    position: fixed; inset: 0; z-index: 8001;
    transition: opacity 0.2s;
  }
  #wt-spotlight {
    position: fixed; z-index: 8002;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
    transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease;
    pointer-events: none;
  }
  #wt-tooltip {
    display: none;
    position: fixed; z-index: 8503;
    background: var(--bg, #fff); border: 1px solid var(--border, #e2e2e5);
    border-radius: 14px; padding: 20px 22px 16px;
    max-width: 340px; width: calc(100vw - 40px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    transition: top 0.3s ease, left 0.3s ease, opacity 0.2s;
  }
  .wt-step-num {
    display: inline-block; background: var(--accent, #0a0a0a); color: #fff;
    font-size: 0.7rem; font-weight: 700; width: 20px; height: 20px;
    border-radius: 50%; text-align: center; line-height: 20px; margin-right: 6px;
  }
  .wt-title {
    display: inline; font-size: 0.95rem; font-weight: 700; color: var(--text, #0a0a0a);
  }
  .wt-body {
    font-size: 0.85rem; color: var(--dim, #6b6b6b); margin-top: 8px; line-height: 1.55;
  }
  .wt-footer {
    display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 8px;
    flex-wrap: wrap;   /* narrow/zoomed screens: dots + buttons wrap instead of clipping */
  }
  .wt-dots { display: flex; gap: 5px; }
  .wt-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--border, #e2e2e5);
    transition: background 0.2s;
  }
  .wt-dot.active { background: var(--accent, #0a0a0a); }
  .wt-dot.done { background: var(--dim, #999); }
  .wt-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .wt-btn {
    padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border, #e2e2e5);
    background: none; color: var(--text, #0a0a0a); font-size: 0.82rem; font-weight: 600;
    cursor: pointer; transition: background 0.15s;
  }
  .wt-btn:hover { background: var(--surface, #f7f7f8); }
  .wt-btn-primary {
    background: var(--accent, #0a0a0a); color: #fff; border-color: var(--accent, #0a0a0a);
  }
  .wt-btn-primary:hover { opacity: 0.85; background: var(--accent, #0a0a0a); }
  .wt-skip {
    background: none; border: none; color: var(--dim, #6b6b6b); font-size: 0.78rem;
    cursor: pointer; padding: 4px 0; text-decoration: underline; text-underline-offset: 2px;
  }
  .wt-skip:hover { color: var(--text); }
  .wt-chapters { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
  .wt-chapter {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 11px 14px; min-height: 44px; border-radius: 10px; text-align: left;
    background: var(--bg, #fff); border: 1px solid var(--border, #ddd);
    color: var(--text, #111); font-size: 0.9rem; font-weight: 600; cursor: pointer;
  }
  .wt-chapter:hover { border-color: var(--accent, #0a0a0a); }
  .wt-chapter.done { opacity: 0.75; }
  /* Guided-build steps open REAL dialogs; lift them above the tour backdrop so
     the spotlighted form is actually visible + interactive during the tour. */
  #wt-overlay.open ~ #create-overlay.active, body:has(#wt-overlay.open) #create-overlay.active,
  body:has(#wt-overlay.open) #sched-overlay.active,
  body:has(#wt-overlay.open) #event-modal.active { z-index: 8002; }
  .wt-ch-check { color: var(--green, #2da44e); font-weight: 700; }
  @media (max-width: 600px) {
    #wt-tooltip { max-width: calc(100vw - 32px); padding: 16px; }
  }

  /* ── DevTools Panel ── */
  #devtools-panel {
    position: fixed; bottom: 0; left: 0; right: 0; height: 340px;
    background: #0d1117; border-top: 2px solid #30363d; z-index: 10000;
    display: none; flex-direction: column; font-family: "SF Mono","Fira Code","Cascadia Code",monospace;
    font-size: 12px; color: #c9d1d9; box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
  }
  #devtools-panel.open { display: flex; }
  .dt-resize-handle {
    height: 4px; cursor: ns-resize; background: transparent; flex-shrink: 0;
    border-bottom: 1px solid #30363d;
  }
  .dt-resize-handle:hover { background: var(--accent); }
  .dt-header {
    display: flex; align-items: center; gap: 0; padding: 0 8px;
    border-bottom: 1px solid #30363d; flex-shrink: 0; height: 32px;
  }
  .dt-tabs { display: flex; gap: 0; }
  .dt-tab {
    background: none; border: none; color: #8b949e; font-size: 11px; font-weight: 500;
    padding: 0 12px; height: 32px; cursor: pointer; border-bottom: 2px solid transparent;
    transition: color 0.15s; white-space: nowrap;
  }
  .dt-tab:hover { color: #c9d1d9; }
  .dt-tab.active { color: #58a6ff; border-bottom-color: #58a6ff; }
  .dt-toolbar { margin-left: auto; display: flex; gap: 4px; align-items: center; }
  .dt-toolbar-btn {
    background: none; border: none; color: #8b949e; font-size: 13px; padding: 3px 6px;
    cursor: pointer; border-radius: 4px; line-height: 1;
  }
  .dt-toolbar-btn:hover { background: #21262d; color: #c9d1d9; }
  .dt-panel { flex: 1; min-height: 0; display: none; flex-direction: column; }
  .dt-panel.active { display: flex; }
  .dt-log-area {
    flex: 1; overflow-y: auto; padding: 4px 0;
    scrollbar-width: thin; scrollbar-color: #30363d transparent;
  }
  .dt-log-area::-webkit-scrollbar { width: 6px; }
  .dt-log-area::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }
  .dt-entry {
    padding: 2px 10px; border-bottom: 1px solid rgba(48,54,61,0.3);
    white-space: pre-wrap; word-break: break-all; line-height: 1.5;
    display: flex; gap: 8px;
  }
  .dt-entry:hover { background: #161b22; }
  .dt-entry.error { color: #f85149; background: rgba(248,81,73,0.06); }
  .dt-entry.warn  { color: #d29922; background: rgba(210,153,34,0.06); }
  .dt-entry.info  { color: #58a6ff; }
  .dt-entry.debug { color: #6e7681; }
  .dt-ts { color: #6e7681; flex-shrink: 0; font-size: 10px; margin-top: 2px; }
  .dt-msg { flex: 1; min-width: 0; }
  .dt-repl-row {
    display: flex; align-items: center; gap: 6px; padding: 5px 8px;
    border-top: 1px solid #30363d; flex-shrink: 0; background: #0d1117;
  }
  .dt-prompt { color: #3fb950; font-weight: 700; flex-shrink: 0; }
  .dt-repl-input {
    flex: 1; background: none; border: none; color: #c9d1d9; font-family: inherit;
    font-size: 12px; outline: none; min-width: 0;
  }
  .dt-repl-input::placeholder { color: #484f58; }
  .dt-net-entry {
    padding: 3px 10px; border-bottom: 1px solid rgba(48,54,61,0.3);
    display: flex; gap: 10px; align-items: center; white-space: nowrap; overflow: hidden;
  }
  .dt-net-entry:hover { background: #161b22; }
  .dt-net-method { font-weight: 700; min-width: 42px; color: #58a6ff; }
  .dt-net-status { min-width: 36px; }
  .dt-net-status.ok { color: #3fb950; }
  .dt-net-status.error { color: #f85149; }
  .dt-net-status.err { color: #f85149; }
  .dt-net-status.pending { color: #6e7681; }
  .dt-net-ms { color: #6e7681; min-width: 52px; }
  .dt-net-url { overflow: hidden; text-overflow: ellipsis; color: #c9d1d9; }
  .dt-info-row { padding: 4px 10px; display: flex; gap: 8px; border-bottom: 1px solid rgba(48,54,61,0.3); }
  .dt-info-key { color: #58a6ff; min-width: 160px; flex-shrink: 0; }
  .dt-info-val { color: #c9d1d9; word-break: break-all; }
  .settings-wrap { position: relative; }
.settings-btn {
    font-size: 1.1rem; width: 40px; height: 40px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--card); color: var(--dim);
    cursor: pointer; display: flex; align-items: center;
    justify-content: center; -webkit-tap-highlight-color: transparent;
  }
  .settings-btn:active { background: var(--border); }
  .settings-menu {
    display: none; position: absolute; top: calc(100% + 6px); right: 0;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 10px; min-width: 260px; z-index: 60;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4); overflow-x: hidden; overflow-y: auto;
    max-height: calc(var(--dialog-viewport-height, 100dvh) - 80px);
    /* CAP THE WIDTH OR THE MENU GROWS OFF THE LEFT EDGE (Ethan, 2026-08-26,
       "fix this on mobile"). Measured at 375px: the menu was 490px wide at
       left:-146, so 146px of it — every row LABEL — was off-screen, while the
       right-hand values stayed visible. That is why the screenshot reads as
       text cut at the START rather than ellipsised at the end.
       `min-width: 260px` with no max lets content size the box, and `right: 0`
       anchors it to the gear, so all the growth goes leftward off-screen.
       `overflow-x: hidden` was already here and cannot help: it clips the
       PAINT, it does not stop the box sizing to its content.
       40px keeps ~9px of gutter at any phone width, because the wrapper's own
       offset from the viewport edge (gear + padding) is near-constant. */
    max-width: calc(100vw - 40px);
    padding: 10px 0;
  }
  .settings-menu.open { display: block; }
  /* MOBILE: the menu must ESCAPE the sticky .header-row stacking context.
     .header-row is position:sticky; z-index:40, which traps an absolutely
     positioned child: on a phone the dropdown painted BEHIND #session-view and
     the whole menu was invisible (Ethan, 2026-09-12: "when I press the settings
     button on mobile I don't see anything"). Verified: raising the menu's
     z-index or the header's does nothing; only leaving the context (fixed)
     works. Desktop keeps the absolute anchor, which is fine there. Anchored
     under the gear, capped to the viewport, scrolls internally. */
  @media (max-width: 600px) {
    .settings-menu {
      position: fixed;
      /* Under the header, centred across: it fits the phone with 16px margins
         and scrolls inside (f3441687), and the header stays uncovered so the
         gear can close it. Vertically centred, it sat over the gear and the
         settings tabs swallowed the tap (header, host-metrics and
         usage-recovery e2e, 2026-10-02). */
      top: var(--mobile-header-bottom, calc(max(var(--chrome-tab-h, 0px), env(safe-area-inset-top, 0px)) + 60px));
      left: 50%;
      transform: translateX(-50%);
      right: auto;
      max-width: calc(100vw - 32px);
      max-height: calc(var(--dialog-viewport-height, 100dvh) - var(--mobile-header-bottom, 60px) - 16px - env(safe-area-inset-bottom, 0px));
      z-index: 6000;
    }
  }
  /* AMUX-2975: the 17-section list is grouped into 5 tabs. The strip is sticky
     so it stays reachable while a panel scrolls, and overflow-x:auto so it never
     overflows the 260px menu on a 375px phone — it scrolls instead. */
  .settings-tabs {
    display: flex; gap: 2px; position: sticky; top: 0; z-index: 2;
    background: var(--card); padding: 0 8px 8px; margin: -2px 0 4px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .settings-tabs::-webkit-scrollbar { display: none; }
  .settings-tab-btn {
    flex: 1 0 auto; min-height: 44px; padding: 6px 10px;
    border: none; background: none; color: var(--dim);
    font-size: 0.78rem; font-weight: 600; cursor: pointer; border-radius: 8px;
    white-space: nowrap; -webkit-tap-highlight-color: transparent;
  }
  .settings-tab-btn:active { background: var(--border); }
  .settings-tab-btn.active { color: var(--text); background: var(--bg); }
  .settings-tab-panel { display: none; }
  .settings-tab-panel.active { display: block; }
  .settings-section { padding: 6px 14px; }
  .settings-section-label { font-size: 0.68rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; font-weight: 600; }
  #connection-security {
    display: flex; flex-direction: column; gap: 10px;
    line-height: 1.5; overflow-wrap: anywhere; min-width: 0;
  }
  #connection-security p,
  #connection-security details { font-size: 0.78rem; line-height: 1.5; margin: 0; }
  #connection-security .connection-help { font-size: 0.72rem; color: var(--dim); }
  #connection-security code { overflow-wrap: anywhere; }
  #connection-security-status {
    margin: 0; padding: 8px 10px; border: 1px solid var(--border);
    border-radius: 6px; background: var(--card); color: var(--text);
    font: 0.72rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  }
  #connection-security .connection-control {
    display: block; margin: 0; font-size: 0.78rem; line-height: 1.45; min-width: 0;
  }
  #connection-security .connection-control .search-input,
  #connection-security .connection-control input[type="file"] {
    display: block; width: 100%; max-width: 100%; min-width: 0;
    margin-top: 6px; box-sizing: border-box;
  }
  #connection-security .connection-control input[type="file"] {
    padding: 6px 0; color: var(--text); line-height: 1.35;
  }
  #connection-certificate-form {
    display: flex; flex-direction: column; gap: 10px;
    margin: 2px 0; padding: 10px; border: 1px solid var(--border);
    border-radius: 6px; min-width: 0;
  }
  #connection-certificate-form legend { padding: 0 4px; color: var(--dim); font-size: 0.72rem; }
  #connection-security-error {
    min-height: 1.5em; margin: 0; font-size: 0.78rem; line-height: 1.5;
    white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  }
  #connection-security .btn { align-self: flex-start; margin-top: 2px; }
  #connection-security details { margin-top: 2px; }
  #connection-security summary { cursor: pointer; line-height: 1.45; }
  @media (max-width: 600px) {
    #connection-security .btn { width: 100%; min-height: 40px; }
  }
  /* Four providers fit as four one-line summaries; only the tightest quota is
     expanded on open. Details retain every provider window and exact reset
     without turning the 260px Settings menu into a quota dashboard. */
  #settings-usage-body { display: grid; gap: 4px; }
  .usage-provider {
    border: 1px solid var(--border); border-radius: 7px; background: var(--bg);
    overflow: hidden;
  }
  .usage-provider summary {
    display: flex; align-items: center; gap: 5px; min-height: 30px;
    padding: 3px 7px; cursor: pointer; list-style: none;
    -webkit-tap-highlight-color: transparent;
  }
  .usage-provider summary::-webkit-details-marker { display: none; }
  .usage-provider summary::before {
    content: '›'; color: var(--dim); font-size: 0.9rem; line-height: 1;
    transform: rotate(0); transition: transform 0.12s ease;
  }
  .usage-provider[open] summary::before { transform: rotate(90deg); }
  .usage-provider-name {
    color: var(--fg); font-size: 0.78rem; font-weight: 600;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .usage-provider-plan {
    color: var(--dim); background: var(--card); border: 1px solid var(--border);
    border-radius: 999px; padding: 1px 5px; font-size: 0.61rem;
    text-transform: capitalize; white-space: nowrap;
  }
  .usage-provider-status {
    margin-left: auto; color: var(--dim); font-size: 0.69rem; white-space: nowrap;
  }
  .usage-provider-detail { padding: 1px 7px 7px 22px; }
  .usage-window { margin-top: 6px; }
  .usage-window-line { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
  .usage-window-label {
    color: var(--fg); font-size: 0.72rem; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .usage-window-value { color: var(--dim); font-size: 0.67rem; flex-shrink: 0; white-space: nowrap; }
  .usage-bar { height: 4px; margin-top: 3px; border-radius: 3px; background: var(--border); overflow: hidden; }
  .usage-bar > span { display: block; height: 100%; border-radius: inherit; }
  .usage-reset { color: var(--dim); font-size: 0.62rem; margin-top: 2px; white-space: normal; }
  .usage-unavailable { color: var(--dim); font-size: 0.68rem; line-height: 1.35; padding-top: 4px; }
  .usage-provider-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
  .usage-provider-meta > span {
    color: var(--dim); background: var(--card); border: 1px solid var(--border);
    border-radius: 999px; padding: 1px 5px; font-size: 0.61rem;
  }
  .settings-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .settings-row input {
    flex: 1; font-size: 0.78rem; padding: 6px 8px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg); color: var(--text);
    outline: none; box-sizing: border-box; min-width: 0;
  }
  .settings-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88,166,255,0.12); }
  .settings-row input::placeholder { color: var(--dim); }
  .settings-sep { height: 1px; background: var(--border); margin: 6px 0; }
  /* Theme toggle switch */
  .theme-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
  .theme-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
  .theme-track {
    width: 36px; height: 20px; background: var(--border); border-radius: 10px;
    transition: background 0.2s; display: flex; align-items: center; padding: 2px;
  }
  .theme-toggle input:checked + .theme-track { background: var(--accent); }
  .theme-thumb {
    width: 16px; height: 16px; background: #fff; border-radius: 50%;
    transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  }
  .theme-toggle input:checked + .theme-track .theme-thumb { transform: translateX(16px); }
  .settings-server-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 8px; border-radius: 6px; cursor: pointer; margin-bottom: 2px;
    transition: background 0.12s; -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .settings-server-item:active { background: rgba(88,166,255,0.1); }
  .settings-server-current { background: rgba(88,166,255,0.08); cursor: default; }
  .settings-server-name { font-size: 0.78rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .settings-server-url { font-size: 0.65rem; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .settings-server-badge { font-size: 0.6rem; color: var(--accent); flex-shrink: 0; margin-left: 6px; }

  /* Logs tab */
  .logs-toolbar { display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap; }
  .lf-btn { font-size:0.68rem;padding:2px 8px;border-radius:10px;border:1px solid var(--border);background:none;color:var(--dim);cursor:pointer;transition:all 0.15s; }
  .lf-btn:hover { color:var(--fg);border-color:var(--fg); }
  .lf-btn.active { background:var(--accent);color:#000;border-color:var(--accent); }
  .logs-subtabs { display:flex;gap:0;border-bottom:1px solid var(--border);flex-shrink:0; }
  .lst-btn { flex:1;text-align:center;padding:6px 0;font-size:0.72rem;border:none;background:none;color:var(--dim);cursor:pointer;border-bottom:2px solid transparent;transition:all 0.15s; }
  .lst-btn:hover { color:var(--fg); }
  .lst-btn.active { color:var(--accent);border-bottom-color:var(--accent); }
  .log-evt { padding:8px 0;border-bottom:1px solid var(--border-subtle,rgba(255,255,255,0.04)); display:flex;gap:10px;align-items:flex-start; }
  .log-evt-icon { width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:0.8rem;flex-shrink:0; }
  .log-evt-body { flex:1;min-width:0; }
  .log-evt-title { font-size:0.78rem;font-weight:500; }
  .log-evt-detail { font-size:0.68rem;color:var(--dim);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
  .log-evt-time { font-size:0.6rem;color:var(--dim);flex-shrink:0;white-space:nowrap; }
  .log-evt-cat { font-size:0.55rem;padding:1px 5px;border-radius:6px;border:1px solid var(--border);color:var(--dim);flex-shrink:0; }
  .stat-card { background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:8px; }
  .stat-card-label { font-size:0.7rem;color:var(--dim);margin-bottom:4px; }
  .stat-card-value { font-size:1.4rem;font-weight:600; }
  .stat-row { display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:0.72rem; }
  .stat-row-bar { height:4px;border-radius:2px;background:var(--accent);margin-top:2px; }

  /* One horizontal navigation row; Find expands only when it is needed. */
  .peek-toolbar { display: flex; align-items: center; gap: 4px; width: 100%; max-width: 520px; min-width: 0; }
  .peek-toolbar .peek-toolbar-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; padding: 0; color: var(--text); }
  .peek-toolbar .peek-toolbar-btn[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
  .peek-find-wrap { position: relative; display: flex; align-items: center; gap: 0; width: 100%; max-width: 520px; margin-top: 4px; }
  .peek-find-wrap[hidden] { display: none; }
  .peek-find-wrap .search-input { padding-right: 110px; min-width: 0; width: 100%; height: 44px; box-sizing: border-box; }
  .peek-find-wrap .search-input::-webkit-search-cancel-button { display: none; }
  .peek-find-count { position: absolute; right: 60px; font-size: 0.65rem; color: var(--dim); white-space: nowrap; pointer-events: none; }
  .peek-nav-btn { width: 22px; height: 22px; border: none; background: transparent; color: var(--dim); cursor: pointer; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; position: absolute; }
  .peek-nav-btn:hover { color: var(--text); }
  .peek-find-wrap .search-clear { position: absolute; right: 0; width: 44px; height: 44px; }
  .peek-find-wrap.has-value .search-clear { display: flex; }
  .peek-msg-nav { display: flex; flex: 1; min-width: 0; align-items: center; border: 1px solid var(--border); border-radius: 8px; }
  .peek-msg-nav .peek-nav-btn { position: static; flex: 0 0 44px; width: 44px; height: 44px; border-left: 1px solid var(--border); font-size: 1rem; color: var(--text); }
  .peek-msg-filter { position: relative; flex: 1; min-width: 0; height: 44px; }
  .peek-filter-btn { display:flex; align-items:center; gap:7px; width:100%; height:44px; padding:0 9px; border:0; border-radius:7px 0 0 7px; background:transparent; color:var(--text); cursor:pointer; text-align:left; }
  .peek-filter-btn > svg { flex-shrink:0; }
  .peek-filter-btn.active { color:var(--accent); background:var(--accent-bg,rgba(88,166,255,0.10)); }
  .peek-filter-caption { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; font:600 0.75rem/1.15 system-ui,sans-serif; }
  #peek-filter-summary { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--dim); font-size:0.62rem; font-weight:400; }
  .peek-msg-count { flex-shrink:0; color:var(--dim); font:500 0.65rem/1 system-ui,sans-serif; }
  @media (max-width: 480px) {
    /* THE CAPTION IS HIDDEN HERE, SO THE CONTROL MUST STOP CLAIMING ITS WIDTH.
       `.peek-msg-filter` is flex:1 inside `.peek-msg-nav`, which is itself
       flex:1 in the toolbar. With the caption gone the button still took its
       full share: measured 144px of a 378px toolbar at 390px wide, 38% of the
       row, holding a 17px funnel icon and a count. It read as an empty broken
       box (Ethan, 2026-09-10) — and emptier still while the count shows the
       provenance-pending ellipsis.
       Sizing it to its contents and letting the nav shrink puts that width
       back into the row instead of into a blank. */
    .peek-filter-caption { display:none; }
    .peek-filter-btn { justify-content:center; gap:5px; width:auto; padding:0 11px; }
    .peek-msg-filter { flex:0 0 auto; }
    /* SPREAD, DO NOT PARK. The first version of this shrank the nav and gave
       the reclaimed width to a `margin-right:auto`, which put a dead gap in
       the middle of the row and read as two disconnected clusters (Ethan,
       2026-09-10: "the toolbar on the top of the worker is wonky"). Even
       distribution uses the same width without inventing a void. */
    /* ONE STRIP, NOT FOUR BOXES (Ethan, 2026-09-11 22:42, the row circled).
       Three passes moved the same six controls around inside separate
       bordered boxes: a dead gap, then "spread", then still wonky. They are
       now one segmented control: the nav group, Find, ⋮ and Close share a
       single border and split the width evenly, every cell >= 44px. */
    .peek-msg-nav { flex:1 1 auto; border:0; border-radius:0; }
    .peek-msg-filter { flex:1 1 auto; }
    .peek-filter-btn { width:100%; }
    .peek-toolbar { justify-content:stretch; max-width:none; gap:0; border:1px solid var(--border); border-radius:8px; }
    .peek-toolbar .peek-toolbar-btn { flex:1 1 0; width:auto; min-width:44px; border:0; border-left:1px solid var(--border); border-radius:0; background:transparent; }
    .peek-toolbar > .peek-more-wrap { flex:1 1 0; display:flex; min-width:44px; border-left:1px solid var(--border); }
    .peek-toolbar > .peek-more-wrap .peek-toolbar-btn { flex:1 1 auto; width:100%; border-left:0; }
    .peek-toolbar .peek-nav-btn { flex:1 1 0; width:auto; min-width:44px; }
    #peek-close-btn { border-radius:0 7px 7px 0; }
  }
  .peek-filter-panel { position:absolute; top:calc(100% + 7px); left:0; width:min(320px,calc(100vw - 24px)); box-sizing:border-box; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--card); color:var(--text); box-shadow:0 10px 30px rgba(0,0,0,0.25); z-index:65; max-height:calc(100dvh - 180px); overflow-y:auto; }
  .peek-filter-panel[hidden] { display:none; }
  .peek-filter-heading, .peek-filter-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .peek-filter-heading strong { font-size:0.85rem; }
  .peek-filter-panel .btn { min-height:44px; min-width:44px; padding:4px 10px; }
  .peek-filter-panel fieldset { border:0; padding:0; margin:8px 0 12px; min-width:0; }
  .peek-filter-panel legend { font-size:0.7rem; color:var(--dim); padding:0 0 6px; }
  .peek-filter-options { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
  .peek-filter-option { display:flex; align-items:center; gap:7px; padding:5px 8px; min-height:44px; box-sizing:border-box; border:1px solid var(--border); border-radius:7px; font-size:0.72rem; cursor:pointer; }
  .peek-filter-option:has(input:checked) { color:var(--accent); background:var(--accent-bg,rgba(88,166,255,0.10)); border-color:var(--accent); }
  .peek-filter-option input { margin:0; accent-color:var(--accent); flex-shrink:0; }
  .peek-filter-footer { border-top:1px solid var(--border); padding-top:7px; }
  .peek-filter-footer > span { color:var(--dim); font-size:0.65rem; line-height:1.5; max-width:185px; }
  .peek-toolbar :is(button,input):focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
  .peek-prompt.peek-msg-current { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }
  .peek-more-wrap { position: relative; }
  .peek-more-dropdown { display: none; position: absolute; top: calc(100% + 4px); right: 0; background: var(--card); border: 1px solid var(--border); border-radius: 8px; min-width: 260px; max-width:min(340px,calc(100vw - 16px)); max-height:min(500px,calc(100dvh - 120px)); overflow-x:hidden; overflow-y:auto; z-index: 60; box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
  .peek-more-dropdown.open { display: block; }
  .peek-more-item { display: flex; align-items: center; gap: 8px; padding: 10px 14px; min-height: 44px; box-sizing: border-box; cursor: pointer; font-size: 0.85rem; color: var(--text); border-bottom: 1px solid var(--border); -webkit-tap-highlight-color: transparent; }
  /* 44px touch targets (css-mobile rule): items measured 42px on a phone. */
  .peek-more-item:last-child { border-bottom: none; }
  .peek-more-item:active { background: var(--border); }
  .peek-more-item .mi { width: 18px; text-align: center; flex-shrink: 0; }
  .peek-more-item.danger { color: var(--red); }
  .peek-more-sep { height:1px; background:var(--border); }
  /* Peek search highlight */
  .peek-highlight { background: rgba(210,153,34,0.35); color: #fff; border-radius: 2px; }
  .peek-highlight.current { background: rgba(210,153,34,0.85); color: #000; }
  .peek-prompt { display: block; border-left: 3px solid transparent; padding-left: 4px; margin-left: -7px; }
  .peek-prompt-human    { border-left-color: #58a6ff; background: rgba(88,166,255,0.09); }
  .peek-prompt-session  { border-left-color: #a78bfa; background: rgba(137,87,229,0.10); }
  .peek-prompt-schedule { border-left-color: #3fb950; background: rgba(63,185,80,0.08); }
  .peek-prompt-amux     { border-left-color: #8b949e; }
  .peek-prompt-unknown { border-left-color: #d29922; border-left-style: dotted; }
  .peek-queued-msg { margin:6px 0; padding:2px 8px; font:12px/1.4 monospace; white-space:pre-wrap; overflow-wrap:anywhere; color:#ccc; opacity:.75; }
  .peek-queued-prompt { color:#d8b365; font-weight:600; }
  .peek-worker-footer { opacity:.65; margin-top:8px; }
  .peek-prompt::before { content: attr(data-msg-label); display: block; font: 600 10px/1.6 system-ui, sans-serif; color: var(--dim); letter-spacing: 0.03em; }
  /* Reconciled raw-tmux injection (AMUX-2670): delivery UNVERIFIED and the
     origin is the CLI's claim, not a server stamp. Amber and dashed so it
     cannot be mistaken for an audited send at a glance — which is the exact
     failure the card names. */
  .peek-prompt-unstamped { border-left-color: #d29922; border-left-style: dashed; }

  /* Peek overlay — flush to the true screen bottom. In a toolbar-less standalone
     webview window.innerHeight IS the full visible height, so fixed bottom:0 already
     reaches the physical bottom (device beacon: ovBottom 762 == innerHeight); the
     cmd bar's own env(bottom) padding clears the home indicator. The retired
     js-bottom-extend mistook the TOP status-bar carve for a bottom dead strip and
     pushed the input 50px off-screen ("now it's cut off"). */
  /* The terminal is a viewport, not a modal card. The generic overlay entrance
     translated and scaled the entire terminal for 250ms, changing both the
     output box's top and height after content had already painted. That motion
     looked like streaming output was bouncing even when the DOM was stable. */
  #peek-overlay {
    padding-bottom: 0 !important; bottom: var(--sw-fail-h, 0px) !important;
    transform: none;
    transition: opacity 0.12s;
  }

  /* Peek focus mode — collapse everything above terminal on mobile */
  #peek-overlay.peek-focus .overlay-header,
  #peek-overlay.peek-focus .peek-tabs,
  #peek-overlay.peek-focus .peek-dir-bar { display: none !important; }
  #peek-overlay.peek-focus .peek-focus-bar {
    display: flex; align-items: center; gap: 8px; padding: 6px 12px;
    border-bottom: 1px solid var(--border); flex-shrink: 0;
  }
  .peek-focus-bar { display: none; }
  .peek-focus-bar h3 { margin: 0; font-size: 0.85rem; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Peek compact mode — when visual viewport is constrained (pinch zoom / keyboard) */
  .overlay.vv-compact .peek-cmd-row .chips { display: none !important; }
  .overlay.vv-compact .peek-dir-bar { display: none; }
  .overlay.vv-compact .peek-tabs { padding: 0 0 0 8px; }   /* right stays 0, see .peek-tabs */
  .overlay.vv-compact .peek-tab { padding: 4px 10px; font-size: 0.75rem; }
  .overlay.vv-compact .overlay-header { padding-bottom: 4px !important; gap: 2px !important; }
  .overlay.vv-compact .peek-cmd-toggle { padding: 3px; }
  .overlay.vv-compact .peek-cmd-row .send-input { min-height: 30px; padding: 4px 8px; font-size: 0.8rem; }
  .overlay.vv-compact .peek-cmd-row .btn { min-height: 30px; padding: 4px 10px; }
  .overlay.vv-compact .peek-attach-btn { min-height: 30px; }

  /* Peek command bar */
  .peek-cmd-bar { flex-shrink: 0; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
  /* Safari-iOS (browser tab, NOT the installed PWA): Safari overlays the
     bottom of the viewport with its toolbar/pill zone and consumes the first
     tap there to re-show its chrome — a dead Send tap that never reaches the
     page (device traces show zero events). Keep the controls clear of that
     zone; the installed PWA has no Safari chrome and stays flush. */
  body.safari-tab .peek-cmd-bar { padding-bottom: max(34px, env(safe-area-inset-bottom)); }
  /* ONE COMPOSER LINE ON THE PHONE: input, ⋮ and Send side by side.
     Ethan, 2026-09-11 22:42, screenshot with the composer circled: the input
     on its own row with the two buttons on a second row is the layout he
     called out. This rule shipped in acbad74e and was deleted nine minutes
     later by 241b92ac ("preserve mobile writing space"), so the phone went
     back to two rows. tests/dashboard_assets.rs now pins it; change it there,
     with him, not here alone. Measured 390x844: bar 200px -> ~150px. */
  @media (max-width: 600px) {
    .peek-cmd-toggle { font-size: 0.7rem; padding: 0; min-height: 0; line-height: 1.1; opacity: 0.75; }
    .peek-cmd-bar { padding-top: 2px; }
    .peek-cmd-row { gap: 4px; align-items: flex-end; }
    #peek-chips { margin-bottom: 4px; }
    .peek-cmd-row .ac-wrap { flex: 1 1 0; min-width: 0; }
    .peek-cmd-row .peek-more-wrap { flex: 0 0 44px; }
    .peek-cmd-row .send-split { flex: 0 0 auto; }
    .peek-cmd-row .send-split .btn { padding-left: 10px; padding-right: 6px; }
  }
  .peek-cmd-toggle {
    width: 100%; padding: 3px; border: none; background: transparent;
    color: var(--dim); font-size: 0.75rem; cursor: pointer; text-align: center;
    -webkit-tap-highlight-color: transparent;
  }
  .peek-cmd-toggle:active { color: var(--text); }
  .peek-cmd-row {
    display: none; gap: 8px; padding-top: 4px;
  }
  .peek-cmd-row.open { display: flex; min-width: 0; overflow: visible; position: relative; }
  .peek-cmd-row .send-input { font-size: 0.85rem; padding: 6px 10px; min-height: 30px; min-width: 0; }
  .peek-cmd-row .btn { min-height: 30px; padding: 5px 11px; font-size: 0.82rem; }
  .peek-composer-input { flex: 1; min-width: 0; position: relative; }
  .peek-composer-input .send-input { display: block; min-height: 44px; }
  .peek-cmd-row > .peek-more-wrap { align-self: flex-end; }
  .peek-cmd-row .peek-attach-btn { width: 44px; height: 44px; justify-content: center; }
  /* Mobile: 16px input font stops iOS Safari from zooming in on focus (both the
     peek command input and the session-card inputs share .send-input). */
  @media (max-width: 640px) {
    .send-input,
    .overlay.vv-compact .peek-cmd-row .send-input { font-size: 16px; }
  }
  .send-split { display: flex; flex-shrink: 0; align-self: flex-end; height: 44px; }
  .send-split-main { border-radius: 8px 0 0 8px; padding-right: 8px; }
  .send-split-arrow { border-radius: 0 8px 8px 0; padding: 6px 6px; border-left: 1px solid rgba(255,255,255,0.2); font-size: 0.55rem; min-width: 44px; min-height: 44px; }
  .send-split.mode-queue .send-split-main { background: var(--purple, #a371f7); border-color: var(--purple, #a371f7); }
  .send-split.mode-queue .send-split-arrow { background: var(--purple, #a371f7); border-color: var(--purple, #a371f7); }
  /* File attachment bar */
  .peek-attach-bar { display: none; gap: 6px; padding: 4px 0 2px; flex-wrap: wrap; width: 100%; }
  .peek-attach-bar.has-files { display: flex; }
  .peek-attach-chip {
    display: flex; align-items: center; gap: 5px; padding: 3px 6px 3px 5px;
    background: var(--card); border: 1px solid var(--border); border-radius: 20px;
    font-size: 0.72rem; max-width: 180px; user-select: none;
  }
  .peek-attach-chip.uploading { animation: none; }
  @keyframes chip-pulse { 0%,100% { opacity: 0.45; } 50% { opacity: 0.85; } }
  .peek-attach-chip img { width: 24px; height: 24px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
  .peek-attach-chip .chip-icon { font-size: 1rem; line-height: 1; flex-shrink: 0; }
  .peek-attach-chip .chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
  .peek-attach-chip .chip-remove { cursor: pointer; color: var(--dim); flex-shrink: 0; font-size: 1.1rem; line-height: 1; opacity: 0.7; }
  .peek-attach-chip .chip-remove:hover { color: var(--red); opacity: 1; }
  /* A FAILED CHIP MUST NOT PULSE (AF-235). `.uploading` animates opacity, which
     reads as "still working" — the exact wrong cue on a transfer that has
     stopped, and what kept the reporting user waiting. It gets a static red
     border instead, and the `!` / retry controls below were referenced by the
     card composer since AMUX-3372 with NO style ever defined, because the sole
     failure path dropped the chip so the branch could not render. */
  .peek-attach-chip.failed { border-color: var(--red); animation: none; opacity: 1; }
  .peek-attach-chip .chip-err { color: var(--red); font-weight: 700; flex-shrink: 0; line-height: 1; cursor: help; }
  .peek-attach-chip .chip-retry { cursor: pointer; color: var(--dim); flex-shrink: 0; font-size: 0.95rem; line-height: 1; opacity: 0.75; }
  .peek-attach-chip .chip-retry:hover { color: var(--accent); opacity: 1; }
  /* The escape hatch has to be PRESSABLE, or it is not one. Both controls sit on
     a 20px-tall chip, so without this they are ~12px targets on a phone. */
  @media (max-width: 600px) {
    .peek-attach-chip .chip-remove,
    .peek-attach-chip .chip-retry {
      min-width: 44px; min-height: 44px; display: inline-flex;
      align-items: center; justify-content: center; margin: 0;
    }
    .peek-attach-chip { max-width: 100%; }
  }
  .peek-attach-summary {
    display: flex; align-items: center; gap: 8px; padding: 6px 10px;
    background: var(--card); border: 1px solid var(--border); border-radius: 8px;
    font-size: 0.78rem; width: 100%; cursor: pointer; user-select: none;
  }
  .peek-attach-summary:hover { border-color: var(--accent); }
  .peek-attach-summary .chip-remove { cursor: pointer; color: var(--dim); margin-left: auto; font-size: 1.1rem; }
  .peek-attach-summary .chip-remove:hover { color: var(--red); }
  .peek-attach-btn { background: none; border: 1px solid var(--border); border-radius: 6px;
    color: var(--dim); cursor: pointer; padding: 0 8px; font-size: 1.1rem; min-height: 36px;
    display: flex; align-items: center; flex-shrink: 0; }
  .peek-attach-btn:hover { color: var(--text); border-color: var(--accent); }
  /* Combined attach + history "more" menu (frees width for the input) */
  .peek-more-wrap { position: relative; flex-shrink: 0; }
  .peek-more-menu { display: none; position: absolute; bottom: calc(100% + 6px); right: 0;
    background: var(--card); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35); padding: 4px; z-index: 60; min-width: 168px;
    max-height: calc(100dvh - 110px); overflow-y: auto; }
  .peek-more-menu.open { display: block; }
  .peek-more-menu button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    background: none; border: none; color: var(--text); font-size: 0.85rem; padding: 9px 10px;
    border-radius: 6px; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
  .peek-more-menu button:hover { background: var(--bg); }
  /* The one destructive entry. A rule above it rather than a colour alone,
     because on the phone this menu is a thumb-sized stack of near-identical
     rows and "Clear input" is the only one that throws work away. The tint is
     deliberately mild: this is not an error state, it is a reminder to aim. */
  .peek-more-menu button.peek-more-danger { color: var(--red, #d9534f); margin-top: 4px;
    padding-top: 11px; border-top: 1px solid var(--border); border-radius: 0 0 6px 6px; }
  .peek-more-menu button.peek-more-danger:hover { background: rgba(217,83,79,0.12); }
  /* 44px touch targets on the phone (.claude/rules/css-mobile.md). The desktop
     padding gives ~34px, which is under the minimum on exactly the surface this
     menu is mostly used from. */
  @media (max-width: 600px) {
    .peek-more-menu button { min-height: 44px; padding: 11px 12px; }
  }
  /* Expand-to-fullscreen affordance inside the input's top-right corner */
  #peek-cmd-input { padding-right: 30px; }
  .peek-input-expand { position: absolute; top: 5px; right: 5px; z-index: 3; line-height: 1;
    background: rgba(127,127,127,0.16); border: none; color: var(--dim); font-size: 0.82rem;
    padding: 3px 5px; border-radius: 5px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .peek-input-expand:hover { color: var(--text); background: rgba(127,127,127,0.3); }
  /* Phone composer menus open from the ⋮ and stay inside the viewport. (The
     full-row input rule that lived here is gone on purpose: see the ONE
     COMPOSER LINE block above.) */
  @media (max-width: 600px) {
    .peek-cmd-row > .send-split { margin-left: auto; }
    .peek-cmd-row .peek-more-menu,
    .peek-cmd-row .dict-popup { left: auto; right: 0; }
    .peek-cmd-row .peek-more-menu {
      max-width: calc(100vw - 24px);
    }
    #peek-cmd-input { padding-right: 48px; min-height: 44px; }
    #peek-overlay #peek-cmd-input { max-height: min(160px, 30dvh); }
    .peek-input-expand { top: 0; right: 0; width: 44px; height: 44px; }
  }
  /* Fullscreen compose overlay */
  .peek-input-fs { display: none; position: fixed; inset: 0; z-index: 600; background: var(--bg);
    flex-direction: column; gap: 8px; padding: 10px;
    padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .peek-input-fs.open { display: flex; }
  .peek-input-fs-bar { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .peek-input-fs-ta { flex: 1; width: 100%; resize: none; background: var(--bg); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px; padding: 12px; font-family: inherit;
    font-size: 1rem; line-height: 1.5; outline: none; }
  .peek-input-fs-ta:focus { border-color: var(--accent); }
  .peek-mic-btn { background: none; border: 1px solid var(--border); border-radius: 6px;
    color: var(--dim); cursor: pointer; padding: 0 8px; font-size: 1.1rem; min-height: 36px;
    display: flex; align-items: center; flex-shrink: 0; transition: all 0.2s; }
  .peek-mic-btn:hover { color: var(--text); border-color: var(--accent); }
  .peek-mic-btn.active { color: #fff; background: var(--red); border-color: var(--red); animation: mic-pulse 1.5s ease-in-out infinite; }
  @keyframes mic-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(248,81,73,0.4); } 50% { box-shadow: 0 0 0 8px rgba(248,81,73,0); } }
  .voice-status { font-size: 0.72rem; color: var(--dim); padding: 2px 8px; display: none; align-items: center; gap: 6px; }
  .voice-status.visible { display: flex; }
  /* Drag-over overlay */
  #peek-overlay.drag-over { outline: 2px dashed var(--accent); outline-offset: -3px; }
  #peek-overlay.drag-over .peek-drag-hint {
    display: flex !important; position: absolute; inset: 0; z-index: 200;
    align-items: center; justify-content: center; pointer-events: none;
    background: rgba(0,0,0,0.55); font-size: 1.3rem; color: var(--accent);
    border-radius: 12px; font-weight: 600; letter-spacing: 0.02em;
  }
  /* Peek tabs & memory panel */
  /* padding-RIGHT is 0 deliberately (AF-45): #peek-tab-customize below is
     position:sticky at right:0 of this scrollport, and a right padding is inside
     the scrollable area, so tabs render in that gap and bleed past the pinned
     button. The button carries its own padding, so nothing is lost. */
  /* RESERVE THE BUTTON'S LANE (Ethan, 2026-09-11: "fix the toolbar at top").
     `.tab-customize-btn` sits at the strip's right end while the strip itself
     scrolls underneath it, so the last tab ends up BEHIND the button: measured
     at 390px, strip scrollWidth 444 vs client 378, the button occupying
     x=324..384 and the last tab running to x=390. It renders as a tab sliced
     mid-word against a hard seam, and no amount of scrolling frees it because
     the button travels with the viewport.
     Padding on the scroll box gives the content somewhere to go — the last tab
     can now scroll clear of the button instead of stopping under it. */
  /* right padding 0 so the sticky ⊞ pins to the TRUE right edge, flush like
     the worker-list tab button (Ethan, 2026-09-12: "make this all the way on
     the right just like the worker list page"). It used to be 68px, which
     parked the button that far in from the edge on desktop. The button carries
     its own background + border-left + shadow, so a tab scrolling under it at
     the extreme right stays legible. */
  .peek-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; padding: 0 0 0 12px;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;
    overscroll-behavior-x: contain; touch-action: pan-x; }
  .peek-tabs::-webkit-scrollbar { display: none; }
  /* min-height 44px: these are the peek's PRIMARY navigation and measured 29px
     tall — 66% of the css-mobile 44px floor (AC-225 finding 1, corrected on
     review from its reported 15px, which was the label span inside the button).
     Padding grows the TAP TARGET; the visual line is still drawn by the
     bottom border, so the bar reads the same, just taller. */
  .peek-tab { padding: 5px 12px; min-height: 44px; font-size: 0.8rem; background: none; border: none;
    border-bottom: 2px solid transparent; color: var(--dim); cursor: pointer;
    margin-bottom: -1px; -webkit-tap-highlight-color: transparent; flex-shrink: 0; white-space: nowrap; }
  .peek-tab.active { color: var(--text); border-bottom-color: var(--accent); }
  .peek-tab:hover { color: var(--text); }
  .peek-tab-count { display: none; margin-left: 6px; font-size: 0.68rem; padding: 1px 6px;
    border-radius: 9px; background: rgba(88,166,255,0.14); color: var(--accent);
    border: 1px solid rgba(88,166,255,0.28); vertical-align: 1px; line-height: 1.2; }
  .peek-tab-count.has-count { display: inline-block; }
  /* Schedules badge: green when the session has ≥1 active schedule, grey when all inactive. */
  .peek-tab-count.sched-on { background: rgba(63,185,80,0.16); color: #3fb950; border-color: rgba(63,185,80,0.34); }
  .peek-tab-count.has-pending { background: rgba(210,153,34,0.16); color: #d29922; border-color: rgba(210,153,34,0.34); }
  .peek-tab-count.sched-off { background: rgba(139,148,158,0.14); color: var(--dim); border-color: rgba(139,148,158,0.28); }
  /* Schedules badge: two numbers — active (green) / inactive (red). */
  /* Schedule active/inactive pair. Selector-list rather than a
     .peek-tab-count prefix so the worker card and the peek badge share ONE
     colour definition — the JS helper (_schedCountHTML) emits the same markup
     for both, and a second CSS spelling is how the two would drift apart.
     .psc-zero: a count of zero is deliberately UNCOLOURED. Painting "0
     inactive" red announces a problem about the healthiest possible state, and
     a badge that shouts during normal operation stops being read. */
  .peek-tab-count .psc-on,  .meta-count .psc-on  { color: #3fb950; font-weight: 700; }
  .peek-tab-count .psc-off, .meta-count .psc-off { color: #f85149; font-weight: 700; }
  .peek-tab-count .psc-sep, .meta-count .psc-sep { color: var(--dim); margin: 0 3px; opacity: 0.7; }
  .peek-tab-count .psc-zero,.meta-count .psc-zero{ color: var(--dim); font-weight: 600; opacity: 0.75; }
  /* In-progress board issues for this worker: informational, so accent rather
     than a success/failure colour — it is a count, not a verdict. */
  .meta-count .mc-doing { color: var(--accent); font-weight: 700; }
  /* Todo is actionable but not running; later lifecycle states stay dimmer
     than .mc-doing so the running count remains the most urgent figure. The
     legacy class names remain for compatible themes; renderer-specific
     mc-todo/mc-backlog classes make the status semantics explicit. */
  .meta-count .mc-active { color: var(--green, #4ade80); font-weight: 700; }
  .meta-count .mc-total { color: var(--dim); font-weight: 600; }
  /* Session card: scrollback cached on this device (readable with no signal). */
  .card-offline-dot { color: #3fb950; font-size: 0.7rem; opacity: 0.8; }
  /* ISOLATED (AMUX-3232). A raw agent with the harness stripped and hidden from
     peers is a RARE, high-consequence state, and until now the only way to learn
     a worker was in it was to open its ⋯ menu and read a checkbox. A designation
     that changes what a worker can reach has to be visible where the worker is,
     not one interaction away.
     Deliberately a text chip rather than an emoji: this is read at a glance next
     to the name, and it is the one card-face marker whose meaning is not
     guessable from a glyph. Sized to sit inside the existing card-name line so
     it costs no vertical space at 375px, and it is not a touch target, so the
     44px rule does not apply.

     PREFIXED, like .pin-icon, and that is a bug fix rather than a style choice.
     `.card-name` is `overflow:hidden; text-overflow:ellipsis; white-space:nowrap`,
     so a SUFFIXED chip is what gets clipped when the name is long — measured at
     375px on `af246-isolation-probe`, the chip's right edge landed at 304px
     against a card edge of 289px and simply vanished. That loses exactly the
     wrong half: the name is long, guessable and already truncating, while the
     chip is the rare high-consequence fact the card exists to surface. Prefixing
     makes the NAME absorb the truncation and keeps the flag visible at every
     width. */
  .card-isolated { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em;
    color: var(--warn, #d29922); border: 1px solid currentColor; border-radius: 4px;
    padding: 0 4px; margin-right: 2px; vertical-align: middle; white-space: nowrap; }
  /* ── Dictation: compact recording popup (above the composer) ── */
  .dict-popup { display: none; position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 60;
    background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
    box-shadow: 0 10px 34px rgba(0,0,0,0.45); min-width: 250px; }
  .dict-popup.open { display: block; }
  .dict-popup-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 40px; margin-bottom: 8px; }
  .dict-popup-wave .dict-bar { width: 4px; height: 100%; border-radius: 2px; background: var(--accent);
    transform: scaleY(0.12); transition: transform .07s linear; will-change: transform; }
  .dict-popup-meta { display: flex; align-items: center; gap: 7px; font-size: 0.76rem; color: var(--dim); margin-bottom: 10px; }
  .dict-popup-dot { width: 8px; height: 8px; border-radius: 50%; background: #f85149; flex-shrink: 0;
    animation: dictblink 1.1s ease-in-out infinite; }
  @keyframes dictblink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
  .dict-popup-status { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
  .dict-popup-btns { display: flex; gap: 6px; justify-content: flex-end; }
  .dict-popup-btns .btn { font-size: 0.76rem; padding: 5px 12px; }
  /* ── Dictation tab ── */
  .dict-recbar { display: flex; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .dict-rec { width: 52px; height: 52px; min-width: 52px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--card); color: var(--text); font-size: 1.35rem; cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; transition: transform .12s, background .12s; }
  .dict-rec:hover { border-color: var(--accent); }
  .dict-rec.recording { background: #f85149; border-color: #f85149; color: #fff; animation: dictpulse 1.2s ease-in-out infinite; }
  @keyframes dictpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
  .dict-status { font-size: 0.85rem; color: var(--text); font-weight: 500; }
  .dict-hint { font-size: 0.72rem; color: var(--dim); margin-top: 2px; }
  .dict-total { font-size: 0.72rem; color: var(--dim); white-space: nowrap; align-self: flex-start; text-align: right; }
  .dict-pending { display: block; color: #d29922; margin-top: 2px; }
  .dict-subtabs { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .dict-subtab { background: none; border: none; color: var(--dim); font-size: 0.78rem; font-weight: 600;
    padding: 4px 10px; border-radius: 6px; cursor: pointer; }
  .dict-subtab.active { color: var(--text); background: var(--bg); }
  .dict-search { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 3px 9px;
    font-size: 0.76rem; color: var(--text); outline: none; max-width: 190px; }
  .dict-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 12px; }

  /* Pending dictation clips — 44px touch targets, readable on a 375px screen. */
  .dict-item-pending { border-left:3px solid var(--accent,#4a9eff); background:rgba(74,158,255,0.05); }
  .dict-item-head { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
  .dict-state { font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; }
  .dict-state-failed { color:#ff6b6b; }
  .dict-state-sending { color:var(--accent,#4a9eff); }
  .dict-state-offline, .dict-state-pending { color:var(--dim,#888); }
  .dict-err { font-size:0.75rem; color:#ff6b6b; margin:0.25rem 0; word-break:break-word; }
  .dict-actions { display:flex; gap:0.4rem; margin-top:0.45rem; flex-wrap:wrap; }
  .dict-actions .btn.small { min-height:44px; min-width:44px; padding:0 0.75rem; font-size:0.8rem; }
  @media (max-width: 600px) { .dict-actions .btn.small { flex:1 1 auto; } }
  .dict-empty { color: var(--dim); font-size: 0.85rem; text-align: center; padding: 34px 12px; line-height: 1.7; }
  .dict-day { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; color: var(--dim); margin: 14px 0 6px; }
  .dict-day:first-child { margin-top: 0; }
  .dict-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border: 1px solid var(--border);
    border-radius: 8px; margin-bottom: 6px; background: var(--card); }
  .dict-row:hover { border-color: var(--accent); }
  .dict-time { font-size: 0.7rem; color: var(--dim); white-space: nowrap; padding-top: 2px; min-width: 58px; }
  .dict-text { flex: 1; min-width: 0; font-size: 0.85rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
  .dict-aibadge { font-size: 0.64rem; color: #d29922; margin-left: 6px; white-space: nowrap; }
  .dict-acts { display: flex; gap: 2px; flex-shrink: 0; }
  .dict-acts button { background: none; border: none; color: var(--dim); cursor: pointer; font-size: 0.85rem;
    padding: 3px 5px; border-radius: 5px; min-width: 26px; min-height: 26px; }
  .dict-acts button:hover { background: var(--bg); color: var(--text); }
  .dict-acts button.danger:hover { color: #f85149; }
  .dict-dictbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .dict-dicthint { flex: 1; font-size: 0.76rem; color: var(--dim); line-height: 1.5; }
  .dict-wordrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
  .dict-word { flex: 1; min-width: 0; font-size: 0.85rem; word-break: break-word; }
  .dict-arrow { color: var(--dim); margin: 0 2px; }
  .dict-modal-input { background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 8px 11px;
    font-size: 0.86rem; color: var(--text); outline: none; font-family: inherit; }
  .dict-modal-input:focus { border-color: var(--accent); }
  .dict-modal-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
  .dict-modal-row label { font-size: 0.85rem; color: var(--text); }
  .dict-settings { font-size: 0.85rem; }
  .dict-set-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); }
  .dict-set-row span { color: var(--dim); }
  .dict-sethint { font-size: 0.76rem; color: var(--dim); line-height: 1.6; margin-top: 10px; }
  @media (max-width: 600px) {
    .dict-row { flex-wrap: wrap; }
    .dict-time { min-width: 0; }
    .dict-acts button { min-width: 34px; min-height: 34px; font-size: 0.95rem; }
    .dict-rec { width: 58px; height: 58px; min-width: 58px; }
    .dict-search { max-width: 130px; }
  }
  /* Saved-messages modal: scope tabs (this session / all) + per-session badge. */
  .sm-scope-tab { flex: 1; padding: 6px 10px; font-size: 0.8rem; background: var(--card); border: 1px solid var(--border); border-radius: 6px; color: var(--dim); cursor: pointer; font-family: inherit; min-height: 36px; }
  .sm-scope-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 500; }
  .sm-item .sm-sess { flex-shrink: 0; font-size: 0.66rem; color: var(--accent); background: rgba(88,166,255,0.12); border: 1px solid rgba(88,166,255,0.25); border-radius: 8px; padding: 1px 7px; white-space: nowrap; align-self: flex-start; }
  /* Long task labels scroll horizontally instead of truncating with an ellipsis. */
  #peek-task-label::-webkit-scrollbar { height: 0; }
  .peek-dir-bar { display: flex; align-items: center; gap: 8px; padding: 3px 14px;
    font-size: 0.75rem; color: var(--dim); border-bottom: 1px solid var(--border);
    flex-shrink: 0; min-width: 0; overflow: hidden; }
  .peek-dir-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-family: "SF Mono","Fira Code",monospace; }
  /* Git branch for the working directory — pushed to the right of the path. */
  .peek-dir-branch { margin-left: auto; flex-shrink: 0; cursor: pointer; overflow: visible; }
  .peek-dir-branch.on-main { color: var(--yellow); }
  .peek-dir-branch.on-branch { color: var(--green); }
  .peek-dir-branch.conflict { color: var(--red); }
  .peek-terminal-panel { min-width:0; display: flex; flex-direction: column; flex: 1; min-height: 0; }
  /* Mobile: reclaim peek chrome for the terminal logs. The task label is already
     on the session card and the header carries the name/status, so the task row
     is dropped; the directory row is KEPT (Ethan, 2026-07-18 — wanted it visible
     on the phone) but compacted so it costs minimal height. Focus mode and the
     keyboard-open (vv-compact) state still hide it — those are deliberate
     space-saving modes. */
  @media (max-width: 600px) {
    /* padding-top is a PLAIN 6px for the same reason as `.overlay` above: the
       element is already positioned at `top: max(--chrome-tab-h,
       env(safe-area-inset-top))`, so adding the inset again as padding put the
       worker title a full carve-height below where it belonged. This is the
       selector that actually governs the worker detail view on a phone; the
       `.overlay` rule is overridden here. */
    #peek-overlay { padding: 6px; }
    #peek-overlay .overlay-header { padding-bottom: 0 !important; gap: 2px !important; margin-bottom: 2px; }
    #peek-overlay #peek-task-row { display: none !important; }
    #peek-overlay .peek-dir-bar { padding: 1px 6px; font-size: 0.68rem; }
    #peek-overlay .peek-tabs { padding: 0 0 0 4px; }   /* right stays 0, see .peek-tabs */
    #peek-overlay .peek-tab { padding: 3px 8px; min-height: 36px; font-size: 0.75rem; }
    #peek-overlay .overlay-body { padding: 6px; }
    /* The terminal controls float inside the scroller. This selector must be
       more specific than the generic mobile body rule above or the 46px
       desktop clearance is collapsed to 6px and the first output row sits
       underneath the controls. */
    #peek-overlay #peek-body { padding: 6px; }
    #peek-overlay .peek-output-wrap:has(.peek-agent-nav:not([hidden])) #peek-body { padding-top: 60px; }
    /* Reclaim the "Updated … · vX" status line on mobile — its ~20px is
       better spent on the terminal. (The version/updated info is still
       visible on desktop and via the layout-debug tap on the body.) */
    #peek-overlay #peek-status { display: none !important; }
  }
  /* Split pane wrapper — reuses fe-row / fe-cell-* from the Files tab */
  .peek-split-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .peek-split-wrap.split-active { flex-direction: row; gap: 0; }
  .peek-split-wrap.split-active > .peek-terminal-panel { flex: 1; min-width: 0; }
  .peek-split-wrap.split-active > .peek-split-files { display: flex; flex: 1; min-width: 0; flex-direction: column;
    border-left: 1px solid var(--border); background: var(--bg); }
  .peek-split-files { display: none; }
  /* Drag handle between terminal and file browser */
  .peek-split-handle { display: none; }
  .peek-split-wrap.split-active > .peek-split-handle {
    display: block; width: 6px; flex-shrink: 0; cursor: col-resize;
    background: var(--border); transition: background 0.15s;
    position: relative; z-index: 2; touch-action: none;
  }
  .peek-split-wrap.split-active > .peek-split-handle::before {
    content: ''; position: absolute; inset: 0 -6px; cursor: col-resize;
  }
  .peek-split-wrap.split-active > .peek-split-handle:hover,
  .peek-split-handle.dragging { background: var(--accent); }
  body.split-dragging, body.split-dragging * { cursor: col-resize !important; user-select: none !important; -webkit-user-select: none !important; }
  /* An iframe under the cursor would take the drag's events. */
  body.split-dragging iframe { pointer-events: none !important; }
  .peek-split-files-header { display: flex; align-items: center; gap: 6px; padding: 6px 10px;
    border-bottom: 1px solid var(--border); flex-shrink: 0; font-size: 0.8rem; min-width: 0; }
  .peek-split-files-header .psf-crumb { color: var(--accent); cursor: pointer; white-space: nowrap; }
  .peek-split-files-header .psf-crumb:hover { text-decoration: underline; }
  .peek-split-files-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
  /* A file owns one bounded scrollport; listings continue scrolling normally. */
  .peek-split-files-body.psf-file-view { display:flex; flex-direction:column; overflow:hidden; }
  .psf-col-headers { flex-shrink: 0; }
  .peek-split-btn.active, #peek-split-toggle.active { background: var(--accent); color: #000; border-color: var(--accent); }
  /* Split pane file content — match the file preview overlay styles */
  #peek-split-files .file-overlay-body.markdown { background: var(--bg); color: var(--text); }
  #peek-split-files .file-overlay-body.file-image { background: var(--bg); }
  body.light #peek-split-files .file-overlay-body { background: #1c2128; color: #cdd9e5; }
  body.light #peek-split-files .file-overlay-body.markdown,
  body.light #peek-split-files .file-overlay-body.file-image { background: var(--bg); color: var(--text); }
  .peek-memory-editor { display: none; flex-direction: column; flex: 1; min-height: 0;
    padding: 14px 16px; gap: 10px; overflow: hidden; }
  .peek-memory-editor.active { display: flex; }
  .peek-git-panel { display: none; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .peek-git-panel.active { display: flex; }
  /* Commits panel */
  .peek-commits-panel { display: none; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .peek-commits-panel.active { display: flex; }
  .commits-layout { display: flex; flex: 1; min-height: 0; overflow: hidden; }
  .commits-sidebar { width: 280px; flex-shrink: 0; border-right: 1px solid var(--border); overflow-y: auto; background: var(--bg); }
  .commits-list { }
  .commits-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid rgba(139,148,158,0.08); transition: background 0.08s; }
  .commits-item:hover { background: rgba(139,148,158,0.06); }
  .commits-item.active { background: rgba(88,166,255,0.1); border-left: 3px solid var(--accent); }
  .commits-item-subject { font-size: 0.82rem; font-weight: 500; color: var(--text); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .commits-item-meta { display: flex; gap: 8px; margin-top: 4px; font-size: 0.7rem; color: var(--dim); align-items: center; flex-wrap: wrap; }
  .commits-item-hash { font-family: monospace; font-size: 0.7rem; color: var(--accent); opacity: 0.8; }
  .commits-sess-badge { font-size: 0.64rem; font-weight: 600; padding: 1px 7px; border-radius: 9px; white-space: nowrap; letter-spacing: 0.02em; }
  .commits-detail { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
  .commits-detail-empty { flex: 1; display: flex; align-items: center; justify-content: center; }
  .commits-back-btn { display: none; background: none; border: none; color: var(--accent); cursor: pointer; padding: 8px 14px; font-size: 0.82rem; text-align: left; border-bottom: 1px solid var(--border); }
  .commits-detail-header { padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .commits-detail-header h3 { margin: 0 0 6px; font-size: 0.95rem; font-weight: 600; color: var(--text); line-height: 1.4; }
  .commits-detail-header .commits-meta-row { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.75rem; color: var(--dim); }
  .commits-detail-header .commits-body-text { margin-top: 8px; font-size: 0.82rem; color: var(--text); white-space: pre-wrap; line-height: 1.5; }
  .commits-detail-header .commits-stat { margin-top: 10px; font-size: 0.78rem; font-family: monospace; color: var(--dim); white-space: pre-wrap; line-height: 1.4; }
  .commits-detail-diff { flex: 1; overflow: auto; background: #1e1e2e; padding: 0; }
  .commits-detail-diff pre { margin: 0; padding: 12px; font-size: 0.78rem; line-height: 1.5; color: #cdd6f4; white-space: pre; }
  .commits-detail-diff .diff-add { color: #a6e3a1; }
  .commits-detail-diff .diff-del { color: #f38ba8; }
  .commits-detail-diff .diff-hdr { color: #89b4fa; font-weight: 600; }
  .commits-detail-diff .diff-hunk { color: #cba6f7; }
  @media (max-width: 600px) {
    .commits-sidebar { width: 100%; position: absolute; top: 0; left: 0; bottom: 0; z-index: 10; transition: transform 0.2s ease; }
    .commits-layout { position: relative; }
    .commits-sidebar.hidden { transform: translateX(-110%); }
    .commits-back-btn { display: block; }
    .commits-detail-empty { display: none; }
  }
  .git-panel-header { display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap; }
  .git-panel-body { display:flex;flex:1;min-height:0;overflow:hidden;position:relative; }
  /* Left: collapsible dir tree (sidebar) */
  .git-tree-panel { width:200px;flex-shrink:0;border-right:1px solid #44475a;overflow-y:auto;padding:4px 0;background:#21222c;transition:transform 0.2s ease,opacity 0.2s ease;position:relative; }
  .git-tree-resize-handle { position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;z-index:3;background:transparent;transition:background 0.15s; }
  .git-tree-resize-handle:hover,.git-tree-resize-handle.dragging { background:var(--accent); }
  .git-tree-dir { display:flex;align-items:center;gap:4px;font-size:0.75rem;color:#6272a4;font-weight:600;cursor:pointer;user-select:none;padding:4px 8px;border-radius:3px;margin:0 4px; }
  .git-tree-dir:hover { color:#f8f8f2;background:rgba(68,71,90,0.5); }
  .git-tree-dir-chevron { font-size:0.5rem;transition:transform 0.12s;flex-shrink:0; }
  .git-tree-dir-chevron.open { transform:rotate(90deg); }
  .git-tree-dir-files { overflow:hidden; }
  .git-tree-file { display:flex;align-items:center;gap:6px;font-size:0.76rem;font-family:monospace;color:#f8f8f2;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:3px;margin:0 4px;transition:background 0.1s;padding:3px 8px; }
  .git-tree-file:hover { background:rgba(68,71,90,0.6); }
  .git-tree-file.active { background:rgba(189,147,249,0.18);color:#f8f8f2; }
  .git-tree-flag { font-size:0.65rem;font-weight:700;flex-shrink:0;width:10px; }
  .git-tree-flag.M { color:#8be9fd; } .git-tree-flag.A { color:#50fa7b; }
  .git-tree-flag.D { color:#ff5555; } .git-tree-flag.uu { color:#ffb86c; }
  .git-section-label { font-size:0.67rem;text-transform:uppercase;letter-spacing:0.07em;color:#6272a4;padding:8px 10px 3px;font-weight:600; }
  .git-no-changes { padding:16px 10px;color:#6272a4;font-size:0.8rem; }
  /* Right: diff viewer — Dracula theme */
  .git-diff-viewer { flex:1;overflow:hidden;padding:0;font-family:"Fira Code","SF Mono","Cascadia Code",monospace;font-size:0.78rem;line-height:1.55;display:flex;flex-direction:column;min-width:0;background:#282a36; }
  .git-diff-file-hdr { padding:5px 12px;font-size:0.73rem;font-family:monospace;color:#8be9fd;border-bottom:1px solid #44475a;background:#21222c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0; }
  .git-diff-scroll { flex:1;overflow:auto;background:#282a36; }
  .git-diff-empty { display:flex;align-items:center;justify-content:center;flex:1;color:#6272a4;font-size:0.85rem;background:#282a36; }
  .git-diff-hunk { display:block;color:#bd93f9;padding:2px 12px;background:#2d2b45; }
  .git-diff-add { display:block;color:#50fa7b;background:#1a3326;padding:0 12px; }
  .git-diff-del { display:block;color:#ff5555;background:#3b1f2b;padding:0 12px; }
  .git-diff-ctx { display:block;color:#f8f8f2;padding:0 12px;opacity:0.65; }
  .git-diff-hdr { display:block;color:#6272a4;padding:2px 12px;font-weight:600;border-bottom:1px solid #44475a;background:#21222c; }
  .git-diff-back-btn { display:none;align-items:center;gap:6px;padding:7px 12px;border-bottom:1px solid #44475a;font-size:0.8rem;color:#6272a4;cursor:pointer;flex-shrink:0;background:#21222c;user-select:none; }
  .git-diff-back-btn:hover { color:#f8f8f2; }
  @media (max-width: 600px) {
    .git-tree-panel {
      position: absolute; top: 0; left: 0; bottom: 0; z-index: 5;
      width: 100% !important; border-right: none;
    }
    .git-tree-panel.collapsed {
      transform: translateX(-110%); opacity: 0; pointer-events: none;
    }
    .git-tree-resize-handle { display: none; }
    .git-diff-viewer { width: 100%; }
    .git-diff-back-btn { display: flex !important; }
  }
  .peek-memory-textarea { flex: 1; width: 100%; font-size: 0.88rem; line-height: 1.65;
    font-family: "SF Mono","Fira Code",monospace; background: var(--bg);
    border: 1px solid var(--border); border-radius: 8px; color: var(--text);
    padding: 10px 12px; resize: none; outline: none; box-sizing: border-box; min-height: 0; }
  .peek-memory-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88,166,255,0.12); }
  /* Tasks panel */
  .peek-tasks-panel { display: none; flex-direction: column; flex: 1; min-height: 0; padding: 14px 16px; padding-bottom: max(14px, env(safe-area-inset-bottom)); gap: 10px; }
  .peek-tasks-panel.active { display: flex; }
  #peek-notes-panel.active { display: flex; padding: 0; gap: 0; }
  #peek-notes-panel .notes-sidebar { min-width: 160px; width: 220px; }
  #peek-notes-panel.sidebar-collapsed .notes-expand-btn { display: flex; }
  @media (max-width: 600px) {
    #peek-notes-panel .notes-sidebar {
      position: absolute; top: 0; left: 0; bottom: 0; z-index: 10;
      width: 100% !important; min-width: 0 !important; border-right: none;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }
    #peek-notes-panel .notes-sidebar.collapsed {
      width: 100% !important; transform: translateX(-110%); opacity: 0; pointer-events: none;
    }
    #peek-notes-panel .notes-editor-pane { width: 100%; }
    #peek-notes-panel .notes-expand-btn { display: flex !important; }
  }
  .peek-tasks-add { display: flex; gap: 8px; flex-shrink: 0; }
  .peek-tasks-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
  /* Kanban view of session issues: let the inner .board-columns scroll horizontally */
  .peek-tasks-list.peek-issues-kanban { overflow-y: auto; }
  .peek-tasks-list.peek-issues-kanban .board-columns { flex: 1; min-height: 0; }
  /* THE ACTIVITY BANNER MUST SCROLL WITH THE BOARD (Ethan, 2026-09-16:
     "I should be able to scroll this down. It should not be fixed.").
     `_renderBoardActivity` inserts the strip as a SIBLING BEFORE its host, and
     on this panel the host is `#peek-issues-list`, which is the element that
     carries `overflow-y: auto`. So the banner landed in the non-scrolling flex
     parent and stayed pinned while the cards scrolled underneath it, costing
     fixed vertical space on a phone. Moving the strip inside the list instead
     is not available: `renderPeekIssues` rewrites `list.innerHTML` at four
     points across two functions with early returns between them, so a child
     would be wiped on the next render.
     Scoped to this panel by id. Other `.peek-tasks-panel` tabs set their own
     inline `overflow-y: auto` and must keep scrolling themselves. */
  #peek-issues-panel { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #peek-issues-panel > .peek-tasks-list,
  #peek-issues-panel > .peek-tasks-list.peek-issues-kanban { overflow-y: visible; flex: 0 0 auto; }
  .peek-issue-item { display: flex; flex-shrink: 0; align-items: flex-start; gap: 8px; padding: 8px 10px;
    border-radius: 8px; border: 1px solid var(--border); cursor: pointer; transition: background 0.15s; }
  .peek-issue-item:hover { background: var(--hover); border-color: var(--accent); }
  .peek-issue-key { font-size: 0.72rem; color: var(--dim); font-family: monospace; flex-shrink: 0; margin-top: 2px; }
  .peek-issue-title { flex: 1; min-width: 0; font-size: 0.87rem; line-height: 1.45; word-break: break-word; }
  .peek-issue-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-direction: column; align-items: flex-end; }
  .peek-issue-due { font-size: 0.72rem; color: var(--dim); }

  /* Card stats */
  .card-stats {
    display: flex; gap: 14px; margin-top: 6px; margin-left: 20px;
    color: var(--dim); font-size: 0.75rem;
  }
  .card-stats span { display: flex; align-items: center; gap: 4px; }
  .card-timing {
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
    margin-top: 8px; padding: 8px 10px; border-radius: 8px;
    background: rgba(255,255,255,0.02); font-size: 0.75rem; color: var(--dim);
  }
  .card-timing .timing-item { display: flex; align-items: center; gap: 4px; }
  .card-timing .timing-label { opacity: 0.7; }
  .card-timing .timing-value { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
  .card-timing .timing-value.accent { color: var(--accent); }
  .card-task-name {
    font-size: 0.8rem; font-weight: 600; color: var(--text);
    margin-top: 8px; padding: 0 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* .tn-label removed with the "Task:" prefix (Ethan, 2026-08-10): the line
     under the worker name is obviously the task, and the label cost a third of
     a narrow phone row to say so. */
  .card-preview.task-stale, .card-task-name.task-stale { opacity: 0.6; }
  .task-stale-badge { color: #f0a020; font-weight: 600; font-size: 0.72rem; white-space: nowrap; }


  /* Claude status badge */
  .status-badge {
    font-size: 0.65rem; padding: 1px 6px; border-radius: 4px;
    font-weight: 600; text-transform: uppercase; flex-shrink: 0;
    letter-spacing: 0.3px;
  }
  button.status-badge {
    border: 0; cursor: pointer; font-family: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  button.status-badge:hover { filter: brightness(1.15); }
  .status-badge.active { background: rgba(63,185,80,0.2); color: var(--green); }
  .status-badge.blocked { background: rgba(227,134,37,0.22); color: #e38625; }
  .status-badge.waiting { background: rgba(210,153,34,0.2); color: var(--yellow); }
  .status-badge.review { background: rgba(139,92,246,0.16); color: #7c3aed; }
  .status-badge.idle { background: rgba(139,148,158,0.15); color: var(--dim); }
  .status-badge.steering { background: rgba(137,87,229,0.2); color: var(--purple,#8957e5); }
  .status-badge.rate-limited { background: rgba(248,81,73,0.18); color: #f85149; }
  .status-badge.work-queued-chip {
    border: 0; margin-left: 6px; cursor: pointer; font-family: inherit;
    white-space: nowrap; max-width: min(260px, 42vw); overflow: hidden;
    text-overflow: ellipsis; -webkit-tap-highlight-color: transparent;
  }
  .work-queued-short { display: none; }
  @media (max-width: 600px) {
    .work-queued-wide { display: none; }
    .work-queued-short { display: inline; }
    .status-badge.work-queued-chip { max-width: 170px; }
  }
  .last-active { font-size: 0.7rem; color: var(--dim); flex-shrink: 0; }
  .token-count { font-size: 0.65rem; color: var(--dim); flex-shrink: 0; font-family: "SF Mono","Fira Code",monospace; opacity: 0.7; }

  /* Tags */
  .tag {
    font-size: 0.68rem; padding: 4px 8px; border-radius: 4px;
    font-weight: 500; background: rgba(88,166,255,0.12); color: var(--accent);
    border: 1px solid rgba(88,166,255,0.2); white-space: nowrap; flex-shrink: 0;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .tag:active { background: rgba(88,166,255,0.25); }

  /* Tag filter bar */
  .tag-filters {
    display: flex; gap: 6px; flex-wrap: nowrap; margin-top: 8px; margin-bottom: 10px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .tag-filters::-webkit-scrollbar { display: none; }
  .tag-filters:empty { display: none; }
  .tag-filter {
    font-size: 0.72rem; padding: 4px 10px; border-radius: 12px;
    background: rgba(88,166,255,0.08); color: var(--dim);
    border: 1px solid var(--border); cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: all 0.15s;
    white-space: nowrap; flex-shrink: 0;
  }
  .tag-filter:active { background: rgba(88,166,255,0.15); }
  .tag-filter.active {
    background: rgba(88,166,255,0.2); color: var(--accent);
    border-color: var(--accent);
  }
  .tag-filter.hidden-tag {
    opacity: 0.55; text-decoration: line-through; border-style: dashed;
  }

  /* ── Filters button + modal + preview chips ── */
  .filters-btn { position: relative; }
  .filters-btn.active { color: var(--accent); border-color: var(--accent); }
  .filters-count {
    position: absolute; top: -5px; right: -5px;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 14px; height: 14px; padding: 0 3px;
    border-radius: 7px; background: var(--accent); color: #0d1117;
    font-size: 0.58rem; font-weight: 700; line-height: 1;
    box-shadow: 0 0 0 1.5px var(--bg);
  }
  .active-filters {
    display: none; gap: 6px; flex-wrap: wrap; align-items: center;
    margin: 6px 12px 2px;
  }
  .active-filter-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.72rem; padding: 4px 9px; border-radius: 12px;
    background: rgba(88,166,255,0.2); color: var(--accent);
    border: 1px solid var(--accent); cursor: pointer;
    -webkit-tap-highlight-color: transparent; white-space: nowrap;
  }
  .active-filter-chip .afx { font-size: 0.66rem; opacity: 0.75; }
  .active-filter-chip:active { background: rgba(88,166,255,0.32); }
  .active-filter-clear {
    font-size: 0.7rem; color: var(--dim); cursor: pointer; padding: 4px 6px;
    text-decoration: underline; -webkit-tap-highlight-color: transparent;
  }
  .filter-section { padding: 12px 2px; border-bottom: 1px solid var(--border); }
  .filter-section-title {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--dim); margin-bottom: 9px;
  }
  .filter-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 34px; padding: 6px 12px; border-radius: 16px;
    background: var(--bg); color: var(--text);
    border: 1px solid var(--border); cursor: pointer;
    font-size: 0.82rem; -webkit-tap-highlight-color: transparent; transition: all 0.15s;
  }
  .filter-chip:active { background: var(--border); }
  .filter-chip.on { background: rgba(88,166,255,0.18); color: var(--accent); border-color: var(--accent); }
  .filter-chip-n {
    font-size: 0.66rem; opacity: 0.6; background: rgba(128,128,128,0.18);
    border-radius: 8px; padding: 1px 6px; min-width: 14px; text-align: center;
  }
  .filter-chip.on .filter-chip-n { background: rgba(88,166,255,0.25); opacity: 0.9; }
  .filter-toggle-row {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    font-size: 0.9rem; min-height: 44px;
  }
  .filter-toggle-row input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--accent); }
  .filter-hint { font-size: 0.72rem; color: var(--dim); line-height: 1.45; margin-top: 4px; }
  .filter-modal-actions {
    display: flex; gap: 8px; padding-top: 12px; margin-top: 4px;
    border-top: 1px solid var(--border); flex-shrink: 0;
  }

  /* Card description */
  /* Rendered only on an EXPANDED card, so it shows the whole description:
     wrapped, line breaks kept, long words broken instead of overflowing the
     card. It used to be one ellipsized line, so an expanded card never showed
     more of the description than the collapsed one (Ethan, 2026-10-10). */
  .card-desc {
    color: var(--text); font-size: 0.82rem; margin-top: 4px; margin-left: 20px;
    white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4;
    opacity: 0.85;
  }

  .empty {
    text-align: center; color: var(--dim); padding: 40px 16px;
    font-size: 0.95rem; line-height: 1.6;
  }
  .empty code { color: var(--accent); }

  /* Sync activity banner */
  .sync-banner {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 450;
    background: var(--card); border-top: 1px solid var(--accent);
    padding: 10px 16px; font-size: 0.8rem;
    transform: translateY(100%); transition: transform 0.2s;
    max-height: 40vh; overflow-y: auto;
  }
  .sync-banner:not(.active) { display:none; }
  .sync-banner.active { transform: translateY(0); }
  .sync-banner .sync-title { font-weight: 600; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
  .sync-banner .sync-item { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 0.75rem; }
  .sync-banner .sync-item.pending { color: var(--dim); }
  .sync-banner .sync-item.running { color: var(--accent); }
  .sync-banner .sync-item.done { color: var(--green); }
  .sync-banner .sync-item.failed { color: var(--red); }

  /* Sending indicator */
  .sending-indicator {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    background: var(--accent); color: #fff; font-size: 0.7rem; font-weight: 600;
    padding: 3px 12px; border-radius: 12px; z-index: 10;
    animation: send-pulse 1s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes send-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
  /* "Loading latest…" cue on peek open — same top-pill spot as the send cue */
  .peek-loading-pill {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    background: var(--accent); color: #fff; font-size: 0.7rem; font-weight: 600;
    padding: 3px 12px 3px 9px; border-radius: 12px; z-index: 11;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  }
  .peek-spin {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
    animation: peek-spin 0.7s linear infinite;
  }
  @keyframes peek-spin { to { transform: rotate(360deg); } }
  /* Centered loader shown in the empty peek body before the first frame paints */
  .peek-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 44px 20px; color: var(--dim); font-size: 0.85rem;
  }
  .peek-loading .peek-spin-lg {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2.5px solid var(--border); border-top-color: var(--accent);
    animation: peek-spin 0.7s linear infinite;
  }

  /* Habits */
  .habit-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 12px;
    padding: 14px 16px; margin-bottom: 10px; transition: transform 0.12s, box-shadow 0.12s;
    -webkit-tap-highlight-color: transparent;
  }
  .habit-card:active { transform: scale(0.98); }
  .habit-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .habit-check {
    width: 36px; height: 36px; border-radius: 50%;
    border: 2.5px solid var(--border); background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    flex-shrink: 0; font-size: 1.1rem; color: transparent;
    -webkit-tap-highlight-color: transparent;
  }
  .habit-check.done {
    background: var(--green, #3fb950); border-color: var(--green, #3fb950);
    color: #fff; transform: scale(1.1);
  }
  .habit-check.done.pop { animation: habit-pop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
  @keyframes habit-pop {
    0% { transform: scale(0.6); } 50% { transform: scale(1.25); } 100% { transform: scale(1.1); }
  }
  .habit-name { font-weight: 600; font-size: 0.95rem; flex: 1; min-width: 0; }
  .habit-streak {
    font-size: 0.75rem; color: var(--dim); white-space: nowrap;
    display: flex; align-items: center; gap: 3px;
  }
  .habit-streak.fire { color: var(--orange, #d29922); font-weight: 600; }
  .habit-dots { display: flex; gap: 3px; }
  .habit-dot {
    width: 28px; height: 28px; border-radius: 5px;
    background: rgba(128,128,128,0.1); transition: background 0.15s;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.55rem; color: var(--dim);
  }
  .habit-dot.filled { background: var(--green, #3fb950); color: transparent; }
  .habit-dot.today { border: 1.5px solid var(--accent); }
  .habit-actions {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px; gap: 8px;
  }
  .habit-edit-btn {
    background: none; border: none; color: var(--dim); cursor: pointer;
    font-size: 0.72rem; padding: 4px 8px; border-radius: 4px;
    transition: color 0.12s;
  }
  .habit-edit-btn:hover { color: var(--text); }
  .habit-empty {
    text-align: center; color: var(--dim); padding: 60px 20px; font-size: 0.9rem;
  }
  @media (max-width: 600px) {
    .habit-dot { width: 24px; height: 24px; border-radius: 4px; }
    .habit-check { width: 40px; height: 40px; }
  }

  /* Toast notifications */
  .toast {
    position: fixed; bottom: 20px; right: 20px; z-index: 500;
    background: var(--card); border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 16px; font-size: 0.85rem; color: var(--text);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none; max-width: 320px;
  }
  .toast.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

  /* In-app notification banners */
  .notif-banners {
    position: fixed; top: calc(max(var(--chrome-tab-h, 0px), env(safe-area-inset-top, 0px)) + 8px); right: 12px; z-index: 1002;
    display: flex; flex-direction: column; gap: 6px; pointer-events: none;
    max-width: 360px; width: calc(100% - 24px);
  }
  .notif-banner {
    pointer-events: auto; display: flex; align-items: flex-start; gap: 8px;
    background: var(--card); border: 1px solid var(--border); border-radius: 10px;
    padding: 10px 12px; font-size: 0.82rem; color: var(--text);
    box-shadow: 0 4px 20px rgba(0,0,0,0.35); cursor: pointer;
    opacity: 0; transform: translateY(-20px);
    transition: opacity 0.25s, transform 0.25s;
  }
  .notif-banner.visible { opacity: 1; transform: translateY(0); }
  .notif-banner.removing { opacity: 0; transform: translateX(40px); }
  .notif-banner-icon { font-size: 1.1rem; flex-shrink: 0; line-height: 1.2; }
  .notif-banner-body { flex: 1; min-width: 0; }
  .notif-banner-title { font-weight: 600; font-size: 0.8rem; margin-bottom: 1px; }
  .notif-banner-text { color: var(--dim); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .notif-banner-close { background: none; border: none; color: var(--dim); cursor: pointer; padding: 0 2px; font-size: 0.9rem; line-height: 1; flex-shrink: 0; }
  .notif-banner-close:hover { color: var(--text); }

  /* Notification panel */
  .notif-panel {
    position: fixed; top: 80px; left: 12px; z-index: 510;
    width: min(340px, calc(100vw - 24px)); max-height: min(70dvh, 520px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--card); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    display: none; flex-direction: column;
  }
  .notif-panel.active { display: flex; }
  .notif-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 0.82rem; font-weight: 600;
  }
  .notif-panel-empty { color: var(--dim); font-size: 0.8rem; text-align: center; padding: 32px 12px; }
  .notif-panel-item {
    display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px;
    border-bottom: 1px solid var(--border); cursor: pointer;
    transition: background 0.12s;
  }
  .notif-panel-item:last-child { border-bottom: none; }
  .notif-panel-item:hover { background: rgba(128,128,128,0.08); }
  .notif-panel-item.unread { background: rgba(88,166,255,0.06); }
  .notif-panel-item .npi-icon { font-size: 1rem; flex-shrink: 0; line-height: 1.3; }
  .notif-panel-item .npi-body { flex: 1; min-width: 0; }
  .notif-panel-item .npi-title { font-weight: 600; font-size: 0.78rem; }
  .notif-panel-item .npi-text { color: var(--dim); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .notif-panel-item .npi-time { color: var(--dim); font-size: 0.65rem; white-space: nowrap; flex-shrink: 0; }
  .notif-badge {
    position: absolute; top: -4px; right: -4px;
    background: var(--red, #f85149); color: #fff; font-size: 0.55rem; font-weight: 700;
    min-width: 14px; height: 14px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center; padding: 0 3px;
    line-height: 1;
  }
  @media (max-width: 600px) {
    .notif-banners { right: 8px; max-width: calc(100% - 16px); }
    .notif-panel { width: calc(100vw - 24px); }
  }

  /* Needs You panel reuses .notif-panel/.notif-panel-item/.notif-badge (and
     their mobile rules above) — only the lane grouping header and the
     truncation note are new. */
  .needsyou-inline-count { align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px;
    margin-left:6px; border-radius:9px; background:var(--red, #f85149); color:#fff; font-size:0.66rem; font-weight:700; }
  .notif-feed-header { border-top:1px solid var(--border); }
  .needsyou-panel-lane {
    font-size: 0.68rem; font-weight: 700; color: var(--dim);
    padding: 8px 12px 2px; text-transform: uppercase; letter-spacing: 0.02em;
  }
  .needsyou-panel-note {
    color: var(--dim); font-size: 0.7rem; text-align: center; padding: 8px 12px;
    border-top: 1px solid var(--border);
  }

  /* Confirm / alert modal — replaces native confirm()/alert() which PWA blocks */
  .modal-backdrop {
    display: none; position: fixed; inset: 0; z-index: var(--layer-confirmation);
    background: rgba(0,0,0,0.6); align-items: center; justify-content: center;
    padding: 16px 12px;
  }
  .modal-backdrop.open { display: flex; }
  .modal-box {
    background: var(--card); border: 1px solid var(--border); border-radius: 12px;
    padding: 20px; max-width: min(480px, calc(100vw - 24px)); width: 100%; text-align: center;
    max-height: calc(var(--dialog-viewport-height, 100dvh) - 32px);
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  }
  .modal-box > .modal-msg, #bulk-actions-body {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; overflow-wrap: anywhere;
  }
  .modal-box > .modal-btns, #bulk-actions-overlay .modal-box > :first-child { flex-shrink: 0; }
  .modal-box input, .modal-box textarea, .modal-box select { min-width: 0; max-width: 100%; }
  @media (max-width: 600px) {
    .modal-box button { min-width: 44px; min-height: 44px; }
    #dictm-pair { flex-wrap: wrap; }
    #dictm-pair input { flex: 1 1 100px; width: 0; }
  }
  .modal-msg { font-size: 0.95rem; color: var(--text); margin-bottom: 20px; line-height: 1.5; }
  .modal-btns { display: flex; gap: 10px; justify-content: center; }
  .modal-btns .btn { min-width: 80px; }

  /* Channel drawer — Slack-style DM between two sessions */
  .channel-drawer {
    display: none; position: fixed; inset: 0; z-index: 700;
    background: rgba(0,0,0,0.55); align-items: stretch; justify-content: flex-end;
  }
  .channel-drawer.open { display: flex; }
  .channel-panel {
    background: var(--bg); border-left: 1px solid var(--border);
    width: min(440px, 100vw); height: 100%;
    display: flex; flex-direction: column;
    box-shadow: -8px 0 24px rgba(0,0,0,0.4);
  }
  .channel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--border);
    background: var(--card);
  }
  .channel-header-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.95rem; font-weight: 600; color: var(--text);
    min-width: 0;
  }
  .channel-header-icon {
    color: var(--accent); font-weight: 700; font-size: 1.05rem;
  }
  .channel-thread {
    flex: 1; overflow-y: auto; padding: 14px;
    display: flex; flex-direction: column; gap: 10px;
    background: var(--bg);
  }
  .channel-msg {
    display: flex; flex-direction: column; gap: 3px;
    max-width: 88%;
  }
  .channel-msg.mine { align-self: flex-end; align-items: flex-end; }
  .channel-msg.theirs { align-self: flex-start; align-items: flex-start; }
  .channel-msg-meta {
    font-size: 0.65rem; color: var(--dim); padding: 0 6px;
  }
  .channel-msg-bubble {
    padding: 8px 12px; border-radius: 14px; font-size: 0.88rem;
    line-height: 1.4; word-wrap: break-word; white-space: pre-wrap;
    border: 1px solid var(--border); background: var(--card); color: var(--text);
  }
  .channel-msg.mine .channel-msg-bubble {
    background: var(--accent); color: #fff; border-color: transparent;
  }
  .channel-empty {
    color: var(--dim); font-size: 0.85rem; text-align: center;
    padding: 30px 16px; line-height: 1.5;
  }
  .channel-input-row {
    display: flex; gap: 8px; padding: 10px 12px;
    border-top: 1px solid var(--border); background: var(--card);
    align-items: flex-end;
  }
  .channel-input {
    flex: 1; min-height: 36px; max-height: 140px; resize: none;
    padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg); color: var(--text); font: inherit; font-size: 0.88rem;
    outline: none;
  }
  .channel-input:focus { border-color: var(--accent); }
  #channel-send-btn { font-size: 0.85rem; padding: 8px 16px; }
  @media (max-width: 520px) {
    .channel-panel { width: 100vw; border-left: none; }
  }

  /* Connection status indicator — pill button */
  .conn-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.75rem; font-weight: 600; white-space: nowrap;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    flex-shrink: 0; transition: all 0.2s;
    padding: 4px 10px; border-radius: 12px; border: none;
    line-height: 1;
  }
  .conn-status::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0; transition: background 0.2s;
  }
  .conn-status.online {
    color: #4ade80; background: rgba(74,222,128,0.1);
  }
  .conn-status.online::before { background: #4ade80; }
  .conn-status.polling {
    color: #facc15; background: rgba(250,204,21,0.1);
  }
  .conn-status.polling::before { background: #facc15; }
  .conn-status.offline {
    color: #f87171; background: rgba(248,113,113,0.15);
  }
  .conn-status.offline::before { background: #f87171; }

  /* Loading spinner */
  @keyframes _spin { to { transform: rotate(360deg); } }
  .loading-spinner {
    width: 18px; height: 18px; border: 2px solid var(--border);
    border-top-color: var(--accent); border-radius: 50%;
    animation: _spin 0.8s linear infinite;
    display: inline-block; vertical-align: middle; margin-right: 8px;
  }

  /* Queue modal */
  .queue-overlay {
    display: none; position: fixed; inset: 0; background: rgba(1,4,9,0.85);
    z-index: 400; align-items: center; justify-content: center; padding: 20px;
  }
  .queue-overlay.active { display: flex; }
  .queue-box {
    background: var(--card); border: 1px solid var(--border); border-radius: 12px;
    padding: 20px; width: 100%; max-width: 420px; max-height: min(70dvh, calc(100dvh - 32px)); overflow-y: auto;
  }
  .queue-box h3 { font-size: 1rem; margin-bottom: 14px; }
  .queue-item {
    font-size: 0.78rem; padding: 8px 10px; border: 1px solid var(--border);
    border-radius: 6px; margin-bottom: 6px; font-family: "SF Mono", monospace;
    color: var(--dim); word-break: break-all;
  }
  .queue-item .queue-time { color: var(--yellow); font-size: 0.7rem; }
  .queue-empty { color: var(--dim); text-align: center; padding: 16px; font-size: 0.85rem; }

  /* Cached / draft indicators */
  .cached-badge, .draft-badge, .pending-badge {
    font-size: 0.6rem; padding: 1px 5px; border-radius: 3px;
    font-weight: 600; text-transform: uppercase; margin-left: 6px;
  }
  .cached-badge { background: rgba(139,148,158,0.15); color: var(--dim); }
  .draft-badge { background: rgba(210,153,34,0.2); color: var(--yellow); }
  .pending-badge { background: rgba(88,166,255,0.15); color: var(--accent); }
  .draft-prompt {
    font-size: 0.72rem; color: var(--dim); padding: 6px 8px; margin-top: 6px;
    background: rgba(139,148,158,0.06); border-radius: 5px;
    font-family: "SF Mono", "Menlo", monospace; white-space: pre-wrap;
    word-break: break-word; border-left: 2px solid var(--yellow);
  }

  /* Offline banner */
  .offline-banner {
    display: none; background: rgba(248,113,113,0.08);
    border: 1px solid rgba(248,113,113,0.25); border-radius: 10px;
    padding: 10px 14px; margin: 0 0 12px 0;
  }
  .offline-banner.active { display: block; }
  .offline-banner-header {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.82rem; font-weight: 600; color: #f87171;
  }
  .offline-banner-header .sync-btn {
    font-size: 0.72rem; padding: 3px 10px; border-radius: 6px;
    background: rgba(248,113,113,0.15); color: #f87171; border: 1px solid rgba(248,113,113,0.3);
    cursor: pointer; font-weight: 600;
  }
  .offline-banner-header .sync-btn:active { opacity: 0.7; }
  .offline-queue-ops {
    margin-top: 8px; display: flex; flex-direction: column; gap: 4px;
  }
  .offline-op {
    font-size: 0.72rem; color: var(--dim); padding: 4px 8px;
    background: rgba(139,148,158,0.06); border-radius: 5px;
    font-family: "SF Mono", "Menlo", monospace;
    display: flex; justify-content: space-between; align-items: center;
  }
  .offline-op .op-action { color: var(--text); font-weight: 500; }
  .offline-op .op-time { color: var(--yellow); font-size: 0.65rem; }
  .offline-op-dismiss { display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0; vertical-align: middle;
    background: none; border: 1px solid var(--border); border-radius: 6px;
    color: var(--dim); cursor: pointer; font-size: 1rem; }
  .offline-op .op-stale { color: var(--red); font-size: 0.65rem; font-style: italic; }
  /* Offline-queue accordion (AMUX-2976) */
  .offline-queue-toggle {
    width: 100%; text-align: left; margin-top: 6px;
    font-size: 0.72rem; font-weight: 600; color: #f87171;
    background: rgba(248,113,113,0.10); border: 1px solid rgba(248,113,113,0.25);
    border-radius: 6px; padding: 6px 10px; cursor: pointer;
  }
  .offline-queue-toggle:active { opacity: 0.7; }
  .offline-queue-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
  .offline-queue-list.collapsed { display: none; }
  @media (max-width: 600px) {
    /* 44px min touch target on mobile per css-mobile rule */
    .offline-queue-toggle { min-height: 44px; padding: 10px 12px; }
  }

  /* Tab bar */
  .tab-bar-outer {
    display: flex; align-items: stretch;
    margin: 0 -16px 12px -16px;
    border-bottom: 1px solid var(--border);
    position: relative; z-index: 39; background: var(--bg);
  }
  @media (max-width: 600px) {
    .header-row { position: relative !important; top: auto !important; }
    .tab-bar-outer { margin-bottom: 4px; }
    .board-session-group { margin-bottom: 2px; }
    .board-session-header { padding: 6px 10px; }
    .tag-group-body { padding: 0; }
  }
  .tab-bar {
    display: flex; gap: 0; padding: 0 0 0 16px; flex: 1;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; touch-action: pan-x; overscroll-behavior-x: contain;
  }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-bar button {
    flex: none; padding: 10px 14px; font-size: 0.85rem; font-weight: 600;
    background: none; border: none; border-bottom: 2px solid transparent;
    border-right: 1px solid var(--border);
    color: var(--dim); cursor: pointer; transition: color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent; white-space: nowrap;
  }
  .tab-bar button.active { color: var(--accent); border-bottom-color: var(--accent); }
  .tab-bar button:active { opacity: 0.7; }
  /* AMUX-4475 "weird blue highlighting": .tab-bar is overflow-x:auto, and per
     the CSS overflow spec that forces overflow-y to auto too, so a focused tab's
     focus ring has its top and bottom CLIPPED by the scroll box — what survives
     is two stray blue vertical bars flanking the tab. Inset the ring so it draws
     as a clean box inside the button and is never clipped; keep it keyboard-only
     via :focus-visible so a mouse click leaves no ring at all. */
  .tab-bar button:focus { outline: none; }
  .tab-bar button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 4px; }
  .tab-customize-wrap {
    position: relative; flex-shrink: 0; display: flex; align-items: center;
    padding: 0 10px; border-left: 1px solid var(--border);
  }
  .tab-customize-btn {
    background: none; border: none; cursor: pointer; font-size: 1rem; line-height: 1;
    color: var(--dim); padding: 4px 2px; transition: color 0.15s;
  }
  .tab-customize-btn:hover { color: var(--fg); }
  /* AF-45, the part three passes at this card kept missing: on a phone the peek's
     ⊞ is not merely SMALL, it is OFF-SCREEN. Measured 2026-09-04 on the shipped
     build, both mobile targets, peek open with the default tab set:
       iPhone 15 / WebKit  viewport 393  strip scrollWidth 1025  ⊞ at left=983
       Chromium 375        viewport 375  strip scrollWidth  985  ⊞ at left=943
     Nine of sixteen tabs and the ⊞ itself sit past the right edge. Reaching the
     customizer requires discovering that a strip with no scrollbar
     (`::-webkit-scrollbar{display:none}`) scrolls horizontally, and panning it
     ~590px. That is consistent with every report on this card and with either
     reading of "the box", so it needed no branch decision to fix.
     WHY THE E2E WENT GREEN THROUGH ALL OF IT, and this is the same shape as the
     44px comment above: Playwright scrolls an element into view before clicking
     it. `btn.click()` therefore tests a path the user cannot take. The check that
     discriminates is the button's rect against the viewport with NO scrolling,
     which is what tab-customizer.spec.ts now asserts.
     The main dashboard never had this bug because `.tab-bar-outer` keeps its
     `.tab-customize-wrap` OUTSIDE the scroller as a sibling. The peek's button is
     the last child INSIDE `.peek-tabs`. Sticky reproduces that pinning without
     restructuring a strip whose focus/compact/mobile rules select `.peek-tabs`
     by name in five places — a wrapper would have had to be added to each, and
     missing one hides the border or leaves a stray button in focus mode. */
  #peek-tab-customize {
    position: sticky; right: 0; z-index: 2;
    /* FLUSH RIGHT in both regimes (Ethan, 2026-09-12). When the strip does not
       overflow (wide desktop), sticky right:0 is inert and the button would sit
       right after the last tab; margin-left:auto eats the free space and pushes
       it to the edge, exactly like the worker-list `.tab-customize-wrap`. When
       the strip DOES overflow there is no free space, margin-left:auto is 0, and
       sticky keeps it pinned as you scroll. */
    margin-left: auto;
    background: var(--bg);
    border-left: 1px solid var(--border);
    box-shadow: -10px 0 10px -8px rgba(0, 0, 0, 0.45);
    min-width: 44px; min-height: 44px; font-size: 1.15rem; line-height: 1; white-space: nowrap; padding: 4px 6px;
  }
  /* AF-45. Ethan, three reports: "I click it and nothing happens. It doesn't show."
     Measured on his viewport (screenshot 1125x2436 @3x = 375x812) under WebKit: the
     button's box is 16.5 x 35. The MENU was never the bug — it opens correctly,
     position:fixed, z-index 4000, 15 rows, unclipped, on screen. The TARGET is.
     16.5px wide is a third of the 44x44 this repo already requires on mobile
     (.claude/rules/css-mobile.md), and it sits inside a horizontally scrolling tab
     strip, where iOS readily interprets a near-miss on a narrow child as a pan of
     the scroller instead of a tap on the child.
     Why every test passed anyway, including the ones I wrote to catch this: a
     synthetic click is a precise point and always lands. A thumb is ~9mm. The check
     that discriminates is the TARGET SIZE, not whether the menu renders — so that is
     what the e2e now asserts. */
  @media (max-width: 600px) {
    .tab-customize-btn {
      min-width: 44px; min-height: 44px;
      display: inline-flex; align-items: center; justify-content: center;
      padding: 4px;
    }
  }
  .tab-customizer-menu {
    position: absolute; right: 0; top: calc(100% + 2px);
    background: var(--card); border: 1px solid var(--border); border-radius: 6px;
    min-width: 150px; z-index: 200; padding: 6px 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    /* AC-403: 21 rows rendered 680px tall from an anchor at y=342 and ran 222px
       past an 800px fold. BODY computes to a clipper, so those rows were CLIPPED
       rather than merely scrolled past, and the menu's boundingBox still looked
       correct — which is how every box assertion passed while the last rows were
       invisible. The <=600px bottom-sheet below has had max-height since it was
       written; this rule never did.
       --tc-max-h is set from the live anchor by _capTabCustomizerHeight. The
       60vh fallback is for the no-JS path only and is NOT the fix: from that
       anchor it lands at 822, still 22px over, which is the number the e2e run
       reported. */
    max-height: var(--tc-max-h, 60vh); overflow-y: auto; overscroll-behavior: contain;
  }
  #peek-tab-customizer-menu { position: fixed; z-index: 300; }
  .tab-cust-search-wrap {
    padding: 6px 10px 4px; position: sticky; top: 0; background: var(--card); z-index: 1;
  }
  .tab-customizer-item {
    display: flex; align-items: center; gap: 8px; padding: 6px 14px;
    font-size: 0.82rem; cursor: pointer; color: var(--fg); user-select: none;
  }
  .tab-customizer-item:hover { background: var(--hover); }
  .tab-customizer-item.required { opacity: 0.45; cursor: not-allowed; }
  .tab-customizer-item input[type=checkbox] { accent-color: var(--accent); cursor: pointer; }

  /* MOBILE: the tab customizer as a bottom sheet. The desktop dropdown — the
     global one is `position:absolute` under a bar with `overflow-x:auto` (which
     forces overflow-y to auto, clipping anything dropping below it), and the
     peek one is `position:fixed` at coordinates computed from the button's rect
     (wrong the moment any ancestor has a transform) — rendered to nothing on a
     phone (Ethan, 2026-08-13: "I can't see anything"). A full-width bottom sheet
     can't be clipped by an overflow ancestor or knocked off-screen; `!important`
     overrides the inline top/left that togglePeekTabCustomizer sets. */
  @media (max-width: 600px) {
    .tab-customizer-menu, #peek-tab-customizer-menu {
      position: fixed !important;
      left: 8px !important; right: 8px !important;
      top: auto !important;
      bottom: calc(8px + env(safe-area-inset-bottom)) !important;
      width: auto !important; min-width: 0 !important; max-width: none !important;
      max-height: var(--tc-sheet-max, calc(var(--dialog-viewport-height, 100dvh) - 24px));
      overflow-y: auto;
      z-index: 4000; border-radius: 10px;
      box-shadow: 0 -6px 28px rgba(0,0,0,0.45);
    }
    .tab-customizer-item { padding: 12px 16px; min-height: 44px; }
  }

  /* Simple tab loading spinner (AMUX-3056) */
  .simple-spin {
    width: 12px; height: 12px; border: 2px solid var(--border);
    border-top-color: var(--accent); border-radius: 50%;
    display: inline-block; animation: simple-spin 0.7s linear infinite;
  }
  @keyframes simple-spin { to { transform: rotate(360deg); } }

  /* Messages: sticky calendar/day headers for reviewing history by time (Ethan
     2026-08-13). One header per calendar day sticks to the top of the scroll
     area as you scroll, and the date picker flashes the day it jumps to. */
  .msgs-date-header {
    position: sticky; top: 0; z-index: 5; flex-shrink: 0;
    background: var(--bg); color: var(--dim);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 7px 8px; margin: 2px 0; border-bottom: 1px solid var(--border);
  }
  .msgs-date-flash { animation: msgs-date-flash 1.4s ease; }
  @keyframes msgs-date-flash { 0%, 100% { background: var(--bg); } 30% { background: rgba(56,139,253,0.18); } }

  /* Chrome-style browser tabs */
  .chrome-tabs-bar {
    display: flex; align-items: flex-end;
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: color-mix(in srgb, var(--bg), black 12%);
    padding: max(6px, env(safe-area-inset-top)) 6px 0 10px;
    margin: 0;
    gap: 1px;
    overflow: visible;
  }
  .chrome-tab {
    display: flex; align-items: center; gap: 4px;
    padding: 7px 6px 7px 12px;
    background: transparent;
    border: 1px solid transparent; border-bottom: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-size: 0.78rem; font-weight: 500;
    color: var(--dim);
    max-width: 190px; min-width: 0;
    position: relative; user-select: none;
    white-space: nowrap; flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
  }
  .chrome-tab:hover { background: rgba(255,255,255,0.06); }
  .chrome-tab.active {
    background: var(--bg); color: var(--fg);
    border-color: var(--border);
    margin-bottom: -1px; padding-bottom: 8px;
  }
  .chrome-tab-label { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; pointer-events: none; }
  .chrome-tab-close {
    flex-shrink: 0; width: 18px; height: 18px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem; line-height: 1;
    color: var(--dim); cursor: pointer;
    opacity: 0; transition: opacity 0.12s, background 0.12s;
  }
  .chrome-tab:hover .chrome-tab-close,
  .chrome-tab.active .chrome-tab-close { opacity: 1; }
  .chrome-tab-close:hover { background: rgba(255,255,255,0.15); color: var(--fg); }
  .chrome-tab-add-wrap { position: relative; flex-shrink: 0; margin: 0 4px 4px 4px; }
  .chrome-tab-add {
    width: 28px; height: 28px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: none; border: none;
    color: var(--dim); cursor: pointer;
    font-size: 1.05rem; line-height: 1;
    transition: background 0.12s, color 0.12s;
  }
  .chrome-tab-add:hover { background: rgba(255,255,255,0.1); color: var(--fg); }
  .chrome-tab-menu {
    display: none; position: absolute; top: calc(100% + 4px); left: 0;
    background: var(--card); border: 1px solid var(--border); border-radius: 8px;
    min-width: 160px; z-index: 200; padding: 4px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  }
  .chrome-tab-menu.open { display: block; }
  .chrome-tab-menu-item {
    padding: 7px 14px; font-size: 0.82rem; cursor: pointer;
    color: var(--fg); white-space: nowrap;
  }
  .chrome-tab-menu-item:hover { background: var(--hover); }
  .chrome-tab-collapse {
    flex-shrink: 0; margin-left: auto; padding: 4px 10px;
    background: none; border: none; color: var(--dim); cursor: pointer;
    font-size: 0.7rem; line-height: 1; display: flex; align-items: center;
    transition: color 0.12s; min-width: 44px; min-height: 20px; justify-content: center;
  }
  .chrome-tab-collapse:hover { color: var(--fg); }
  .chrome-tabs-bar.collapsed .chrome-tab,
  .chrome-tabs-bar.collapsed .chrome-tab-add { display: none; }
  .chrome-tabs-bar.collapsed { padding: 0; height: 0; min-height: 0; overflow: visible; background: none; }
  .chrome-tabs-bar.collapsed .chrome-tab-collapse {
    position: absolute; top: env(safe-area-inset-top, 4px); right: 4px;
    opacity: 0.3; z-index: 1001; padding: 6px 10px;
  }
  .chrome-tabs-bar.collapsed .chrome-tab-collapse:hover { opacity: 1; }
  .chrome-tab-frames { position: fixed; top: var(--chrome-tab-h, 36px); left: 0; right: 0; bottom: 0; z-index: 999; display: none; }
  .chrome-tab-frames.active { display: block; }
  .chrome-tab-frames iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; background: var(--bg); }
  .chrome-tab-frames iframe.hidden { display: none; }
  body.in-tab .chrome-tabs-bar,
  body.in-tab .chrome-tab-frames { display: none !important; }
  body.in-tab { padding-top: 0 !important; }
  .chrome-tab-rename {
    background: transparent; border: none; outline: none;
    color: inherit; font: inherit; width: 100%;
    padding: 0; margin: 0; cursor: text;
  }
  body.light .chrome-tabs-bar { background: color-mix(in srgb, var(--bg), black 6%); }
  body.light .chrome-tab:hover { background: rgba(0,0,0,0.05); }
  body.light .chrome-tab-close:hover { background: rgba(0,0,0,0.1); }
  body.light .chrome-tab-add:hover { background: rgba(0,0,0,0.07); }
  @media (max-width: 600px) {
    .chrome-tab { padding: 8px 4px 8px 10px; font-size: 0.75rem; max-width: 140px; }
    .chrome-tab-add { width: 32px; height: 32px; min-height: 44px; }
  }

  /* Logs view */
  .logs-toolbar {
    display: flex; align-items: center; gap: 8px; padding: 7px 12px;
    border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap;
    background: var(--bg); position: sticky; top: 0; z-index: 10;
  }
  .logs-subtabs { display: flex; gap: 2px; flex-shrink: 0; }
  .logs-subtab {
    background: transparent; border: none; padding: 4px 11px; font-size: 0.78rem;
    cursor: pointer; color: var(--dim); border-radius: 6px; font-weight: 500;
    transition: background 0.12s, color 0.12s;
  }
  .logs-subtab.active { background: var(--card); color: var(--text); font-weight: 600; }
  .logs-subtab:hover:not(.active) { color: var(--text); }
  .logs-filter-bar { display: flex; gap: 3px; flex: 1; flex-wrap: wrap; min-width: 0; }
  .lf-btn {
    background: transparent; border: 1px solid transparent; padding: 2px 8px;
    font-size: 0.71rem; cursor: pointer; border-radius: 4px; color: var(--dim);
    transition: background 0.1s, border-color 0.1s, color 0.1s;
  }
  .lf-btn.active { border-color: var(--border); background: var(--card); color: var(--text); font-weight: 600; }
  .lf-btn:hover:not(.active) { color: var(--text); }
  .logs-search { width: 120px; font-size: 0.78rem; padding: 3px 8px; }
  .logs-panel { display: flex; flex-direction: column; }
  .logs-activity-body { padding: 6px 10px; display: flex; flex-direction: column; gap: 1px; }
  .log-evt {
    display: flex; align-items: flex-start; gap: 10px; padding: 6px 8px;
    border-radius: 6px; font-size: 0.8rem; cursor: default;
    transition: background 0.1s;
  }
  .log-evt:hover { background: var(--card); }
  .log-evt-icon { font-size: 0.88rem; width: 22px; text-align: center; flex-shrink: 0; padding-top: 1px; }
  .log-evt-body { flex: 1; min-width: 0; }
  .log-evt-title { font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .log-evt-meta { font-size: 0.69rem; color: var(--dim); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .log-evt-badge {
    display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 0.64rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  }
  .log-evt-ts { color: var(--dim); font-size: 0.69rem; min-width: 52px; text-align: right; flex-shrink: 0; }
/* Request/response payload accordion (AMUX-2281) */
.log-evt-x { cursor: pointer; }
.log-evt-x:hover { background: var(--hover, rgba(127,127,127,.07)); }
.log-evt-caret { display:inline-block; width:1em; color:var(--dim); font-size:.8em; }
.log-pay { display:none; margin:0 0 6px 40px; border-left:2px solid var(--border,#3334);
           padding-left:10px; }
.log-pay.open { display:block; }
.log-pay-h { font-size:.65rem; letter-spacing:.08em; color:var(--dim); margin:6px 0 2px; }
.log-pay-b { margin:0 0 4px; padding:8px 10px; background:var(--code-bg,rgba(127,127,127,.10));
             border-radius:6px; font-size:.72rem; line-height:1.45; white-space:pre-wrap;
             word-break:break-word; overflow-x:auto; max-height:340px; overflow-y:auto; }
@media (max-width: 600px) {
  .log-pay { margin-left:12px; }
  .log-pay-b { font-size:.68rem; max-height:240px; }
}
  .logs-day-divider {
    padding: 8px 8px 3px; font-size: 0.68rem; font-weight: 700; color: var(--dim);
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  .logs-raw-body {
    padding: 10px 14px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.71rem;
    line-height: 1.55; color: var(--text); white-space: pre-wrap; word-break: break-all; margin: 0;
  }
  .stats-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px;
  }
  .stat-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 13px 14px;
  }
  .stat-card-label { font-size: 0.69rem; color: var(--dim); margin-bottom: 5px; }
  .stat-card-value { font-size: 1.5rem; font-weight: 700; color: var(--text); }

  /* Worker request log (peek Logs tab) */
  .wlog-row {
    display: flex; align-items: center; gap: 6px; padding: 5px 12px;
    font-size: 0.76rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    border-bottom: 1px solid rgba(127,127,127,0.08);
  }
  .wlog-row-x { cursor: pointer; }
  .wlog-row-x:hover { background: var(--hover, rgba(127,127,127,.07)); }
  .wlog-err { background: rgba(248,81,73,0.06); }
  .wlog-slow { background: rgba(224,112,0,0.05); }
  .wlog-ts { display: flex; flex-direction: column; gap: 1px; min-width: 60px; flex-shrink: 0;
    font-size: 0.62rem; color: var(--dim); line-height: 1.2; }
  .wlog-method { font-weight: 700; min-width: 42px; flex-shrink: 0; font-size: 0.68rem; }
  .wlog-status { font-weight: 600; min-width: 28px; flex-shrink: 0; font-size: 0.72rem; }
  /* WRAPS, never ellipsizes. A truncated path is the one thing a request log
     cannot afford to lose — `/api/workers/amux-frustrations/send` and
     `/api/workers/amux-frustrations/peek` differ only past the point a narrow
     column cuts, so ellipsis turned distinct rows into identical ones. The
     title= tooltip that used to cover for it does not exist on touch.
     overflow-wrap:anywhere (not word-break:break-all) so breaks land at the
     path separators when they can, mid-token only when a segment genuinely
     exceeds the line. */
  .wlog-path { flex: 1; min-width: 0; color: var(--fg); font-size: 0.72rem;
    white-space: normal; overflow-wrap: anywhere; }
  .wlog-lat { min-width: 44px; text-align: right; flex-shrink: 0; color: var(--dim); font-size: 0.68rem; }
  .wlog-lat-slow { color: #e07000; font-weight: 600; }
  .wlog-caret { color: var(--dim); font-size: 0.7rem; flex-shrink: 0; width: 12px; text-align: center; }
  .wlog-meta { padding: 0 12px 4px 68px; font-size: 0.64rem; color: var(--dim);
    display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
  .wlog-payload { display: none; margin: 0 12px 6px 68px; border-left: 2px solid var(--border);
    padding-left: 10px; }
  .wlog-payload.open { display: block; }
  .wlog-pay-label { font-size: 0.62rem; letter-spacing: 0.06em; color: var(--dim); text-transform: uppercase;
    margin: 4px 0 2px; }
  .wlog-pay-body { margin: 0 0 4px; padding: 6px 8px; background: var(--code-bg, rgba(127,127,127,.10));
    border-radius: 5px; font-size: 0.68rem; line-height: 1.45; overflow-x: auto;
    max-height: 300px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; }
  @media (max-width: 600px) {
    .wlog-row { padding: 4px 8px; gap: 4px; }
    .wlog-ts { min-width: 50px; font-size: 0.58rem; }
    .wlog-method { font-size: 0.64rem; min-width: 36px; }
    .wlog-path { font-size: 0.68rem; }
    .wlog-meta { padding-left: 54px; }
    .wlog-payload { margin-left: 54px; }
  }

  /* Session sort dropdown */
  .sort-menu {
    position: absolute; right: 0; top: calc(100% + 5px); z-index: 60;
    min-width: 232px; padding: 5px;
    background: var(--card); border: 1px solid var(--border); border-radius: 9px;
    box-shadow: 0 8px 26px rgba(0,0,0,0.34);
  }
  .sort-opt {
    padding: 8px 9px; border-radius: 6px; cursor: pointer; font-size: 0.82rem;
    -webkit-tap-highlight-color: transparent;
  }
  .sort-opt:hover { background: var(--bg); }
  .sort-opt.active { background: var(--bg); }
  @media (max-width: 600px) {
    /* Thumb-sized rows, and anchored to the right edge so a 232px menu cannot
       run off a 375px screen. */
    .sort-opt { min-height: 44px; padding: 9px 10px; }
    .sort-menu { min-width: 210px; max-width: calc(100vw - 24px); }
  }

  /* Tab icons. Default is icon + label; body.tabs-icons hides the labels to
     buy back horizontal space once you know what the glyphs mean. The COUNT
     badge deliberately survives icon-only mode -- an unread count is the one
     thing you cannot infer from an icon. */
  .tab-ico { display: inline-block; margin-right: 5px; opacity: 0.85; font-size: 0.95em; }
  .tab-lbl { display: inline; }
  body.tabs-icons .tab-lbl { display: none; }
  /* Text-only: drop the glyph but keep the count badge — see note above. */
  body.tabs-text .tab-ico { display: none; }
  body.tabs-icons .tab-ico { margin-right: 0; font-size: 1.15em; opacity: 1; }
  /* Icon-only tabs must stay thumb-sized, not shrink to the glyph's width. */
  body.tabs-icons .tab-bar > button,
  body.tabs-icons .peek-tab { min-width: 40px; text-align: center; }
  @media (max-width: 600px) {
    body.tabs-icons .tab-bar > button,
    body.tabs-icons .peek-tab { min-width: 44px; min-height: 44px; }
  }

  /* Board */
  mark.search-hl { background: rgba(255,208,0,0.45); color: inherit; border-radius: 3px; padding: 0 1px; }
  /* ── Message accordion (Ethan: "each message should have an accordion i can
     click to contract it ... all messages should be expanded by default").
     Default is expanded because collapse state lives in an in-memory
     COLLAPSE set — anything unknown renders open. ── */
  .msg-caret {
    flex-shrink: 0; align-self: flex-start; margin-top: 1px;
    background: none; border: none; color: var(--dim); cursor: pointer;
    font-size: 0.7rem; line-height: 1; padding: 2px 4px;
    /* 28px keeps it comfortably tappable without stealing width from the text
       on a 375px screen, where the row already carries a checkbox and a menu. */
    min-width: 28px; min-height: 28px;
    -webkit-tap-highlight-color: transparent;
  }
  .msg-caret:hover { color: var(--text); }
  .msg-body.collapsed {
    /* Clamp rather than hide: a collapsed message still shows its first two
       lines, so the list stays scannable. display:none would turn the tab into
       a wall of metadata with no way to tell messages apart. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* A search hit inside a collapsed body cannot be reached by scrolling, so
     the renderer force-expands matching rows. This is the visual counterpart:
     if one ever renders collapsed WITH a hit, the mark still shows. */
  .msg-body.collapsed mark.search-hl { outline: 1px solid rgba(255,208,0,0.8); }
  .focus-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center; padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)); backdrop-filter: blur(3px); }
  .focus-card { background: var(--card); border: 1px solid var(--line-2, var(--border));
    border-radius: 16px; width: 100%; max-width: 560px; max-height: 88dvh; display: flex;
    flex-direction: column; box-shadow: 0 24px 64px rgba(0,0,0,0.5); overflow: hidden; }
  .focus-head { display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--border); }
  .focus-progress { font-size: 0.78rem; color: var(--dim); font-weight: 600; }
  .focus-x { background: none; border: none; color: var(--dim); font-size: 1.1rem; cursor: pointer;
    min-width: 44px; min-height: 44px; }
  .focus-body { padding: 18px 18px 8px; overflow-y: auto; flex: 1; }
  .focus-idrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
  .focus-id { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent);
    cursor: pointer; text-decoration: underline dotted; }
  .focus-sess { font-size: 0.74rem; color: var(--dim); cursor: pointer; margin-left: auto; }
  .focus-title { font-size: 1.15rem; font-weight: 700; line-height: 1.35; margin-bottom: 14px; }
  .focus-ask-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--accent); font-weight: 600; margin-bottom: 6px; }
  .focus-ask { font-size: 0.92rem; line-height: 1.55; color: var(--fg); white-space: pre-wrap;
    word-break: break-word; background: var(--surface-2, var(--bg-2)); border-radius: 10px; padding: 12px 14px; }
  .focus-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 16px;
    border-top: 1px solid var(--border); }
  .focus-actions .btn { min-height: 44px; flex: 1 1 auto; }
  @media (max-width: 600px) { .focus-actions .btn { flex: 1 1 40%; } .focus-title { font-size: 1.05rem; } }
  .msg-mode-btn { font-size:0.82rem; padding:6px 14px; border:1px solid var(--border); background:transparent; color:var(--dim); border-radius:8px; cursor:pointer; min-height:40px; }
  .msg-mode-btn.active { border-color:var(--accent); color:var(--accent); background:var(--accent-dim,rgba(199,91,46,0.12)); font-weight:600; }
  .tr-theme { border:1px solid var(--border); border-radius:10px; margin-bottom:8px; overflow:hidden; }
  .tr-theme-h { display:flex; align-items:center; gap:8px; padding:10px 12px; cursor:pointer; flex-wrap:wrap; }
  .tr-theme-h:hover { background:var(--surface-2,var(--bg-2)); }
  .tr-theme-x { width:18px; color:var(--dim); font-size:1rem; }
  .tr-theme-name { font-weight:700; font-size:0.9rem; }
  .tr-theme-meta { font-size:0.72rem; color:var(--dim); }
  .tr-theme-status { font-size:0.72rem; margin-left:auto; display:flex; gap:4px; flex-wrap:wrap; }
  .tr-theme-you { border-color: var(--red); }
  .tr-pill { font-size:0.66rem; border-radius:8px; padding:1px 7px; font-weight:600; }
  .tr-pill-v { background:rgba(63,185,80,0.15); color:var(--green); }
  .tr-pill-d { background:rgba(63,185,80,0.10); color:#3fb950; }
  .tr-pill-p { background:rgba(210,153,34,0.14); color:#d29922; }
  .tr-pill-y { background:rgba(248,81,73,0.16); color:var(--red); cursor:pointer; }
  .tr-pill-done { background:var(--border); color:var(--dim); }
  .tr-owners { padding:0 12px 10px 30px; font-size:0.74rem; }
  .tr-owners-l { color:var(--dim); }
  .tr-owners-meta { color:var(--dim); margin-left:6px; }
  .tr-answer { background:var(--surface-2,var(--bg-2)); border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:0.88rem; }
  .tr-sessions { display:flex; gap:5px; flex-wrap:wrap; padding:0 12px 10px; }
  .tr-sess { font-size:0.68rem; color:var(--accent); border:1px solid var(--border); border-radius:8px; padding:0 7px; cursor:pointer; }
  .tr-cards, .tr-evidence { padding:4px 12px 10px; background:var(--surface-2,var(--bg-2)); }
  .tr-sub { font-size:0.66rem; text-transform:uppercase; color:var(--dim); letter-spacing:0.05em; margin:8px 0 4px; }
  .tr-card { font-size:0.8rem; padding:4px 0; cursor:pointer; border-bottom:1px solid var(--border); }
  .tr-card:hover { color:var(--accent); }
  .tr-msg { padding:6px 0; border-bottom:1px solid var(--border); }
  .tr-msg-sess { font-size:0.68rem; color:var(--accent); font-weight:600; }
  .tr-msg-t { font-size:0.8rem; color:var(--fg); line-height:1.45; margin-top:2px; }
  .review-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; margin-bottom: 14px; }
  .rv-click { cursor: pointer; } .rv-click:hover { border-color: var(--accent); }
  .rv-clear { background: var(--surface-2,var(--bg-2)); border:1px solid var(--green); border-radius:10px; padding:12px 14px; color:var(--green); font-size:0.9rem; margin-bottom:12px; }
  .rv-unblock-all { width:100%; margin-bottom:12px; font-size:0.9rem; min-height:46px; }
  .rv-blockers { display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
  .rv-block { border:1px solid var(--border); border-radius:12px; padding:10px 12px; }
  .rv-block-needsyou { border-color: var(--red); background: rgba(248,81,73,0.05); }
  .rv-block-rot { border-color:#d29922; background: rgba(210,153,34,0.05); }
  .rv-block-h { font-weight:700; font-size:0.9rem; margin-bottom:8px; }
  .rv-block-n { font-size:0.72rem; color:var(--dim); font-weight:400; }
  .rv-brow { display:flex; gap:8px; align-items:baseline; padding:6px 4px; border-top:1px solid var(--border); cursor:pointer; flex-wrap:wrap; }
  .rv-brow:hover { background: var(--border); border-radius:6px; }
  .rv-bid { font-family:var(--font-mono); font-size:0.72rem; color:var(--accent); flex:0 0 auto; }
  .rv-btitle { font-size:0.82rem; flex:1; min-width:120px; }
  .rv-bsess { font-size:0.68rem; color:var(--dim); border:1px solid var(--border); border-radius:6px; padding:0 6px; cursor:pointer; }
  .rv-bwhy { font-size:0.72rem; color:var(--dim); flex-basis:100%; }
  .rv-h { margin:18px 0 8px; font-size:0.95rem; }
  .rv-lanes { display:flex; flex-direction:column; gap:8px; }
  .rv-lane { border:1px solid var(--border); border-radius:10px; overflow:hidden; }
  .rv-lane-h { display:flex; align-items:center; gap:8px; padding:9px 12px; cursor:pointer; flex-wrap:wrap; }
  .rv-lane-h:hover { background: var(--surface-2,var(--bg-2)); }
  .rv-dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
  .rv-dot-active { background: var(--green); } .rv-dot-idle { background: var(--dim); } .rv-dot-off { background: var(--red); opacity:0.6; }
  .rv-lane-name { font-weight:600; font-size:0.88rem; cursor:pointer; text-decoration:underline dotted; }
  .rv-lane-count { font-size:0.72rem; color:var(--dim); }
  .rv-lane-cost { font-size:0.7rem; color:var(--dim); margin-left:auto; font-family:var(--font-mono); }
  .rv-lane-x { font-size:1rem; color:var(--dim); width:20px; text-align:center; }
  .rv-flag { font-size:0.66rem; border-radius:8px; padding:0 6px; font-weight:600; }
  .rv-flag-you { background: rgba(248,81,73,0.15); color: var(--red); }
  .rv-flag-rot { background: rgba(210,153,34,0.15); color:#d29922; }
  .rv-flag-off { background: var(--border); color: var(--dim); }
  .rv-lane-cur { font-size:0.78rem; padding:4px 12px 8px; color:var(--fg); cursor:pointer; }
  .rv-lane-cur:hover { color: var(--accent); }
  .rv-lane-cards { padding:4px 12px 10px; background: var(--surface-2,var(--bg-2)); }
  .rv-lane-grp-h { font-size:0.66rem; text-transform:uppercase; color:var(--dim); margin:8px 0 3px; letter-spacing:0.05em; }
  .rv-lane-card { font-size:0.8rem; padding:4px 0; cursor:pointer; border-bottom:1px solid var(--border); }
  .rv-lane-card:hover { color: var(--accent); }
  .rv-digest { background: var(--surface-2,var(--bg-2)); border:1px solid var(--border); border-radius:10px; padding:12px 16px; }
  
  .bf-menu { position: fixed; z-index: 120; background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.45); padding: 10px 12px;
    max-height: 60vh; overflow-y: auto; min-width: 250px; max-width: 330px; }
  .bf-sheet { left: 0 !important; right: 0; top: auto !important; bottom: 0; max-width: none;
    border-radius: 16px 16px 0 0; max-height: 70vh; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .bf-sheet-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: 2px auto 10px; }
  .bf-grp { margin-bottom: 8px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
  .bf-grp:last-child { border-bottom: none; }
  .bf-grp-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); margin: 4px 0; }
  .bf-opt { padding: 8px 8px; border-radius: 6px; font-size: 0.82rem; cursor: pointer; min-height: 28px; }
  .bf-opt:hover { background: var(--border); }
  .bf-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem;
    border: 1px solid var(--accent); color: var(--accent); border-radius: 14px; padding: 3px 10px; }
  .bf-chip-neg { border-color: var(--red); color: var(--red); }
  .bf-chip-x { cursor: pointer; opacity: 0.7; padding: 2px 2px; }
  .bf-chip-x:hover { opacity: 1; }
  .board-search-wrap {
    position: relative; margin-bottom: 2px;
    display: flex; align-items: center; gap: 6px;
  }
  .board-search-wrap .search-input { flex: 1 1 auto; min-width: 0; }
  /* The peek Board tab reuses .board-search-wrap, but its panel is a flex
     COLUMN while the global board's header is a flex ROW. The mobile rule
     below sets `flex: 1 1 100%` so the search takes a full line in that row —
     in a column that means "grow to fill", and the wrap ate 603px of a 695px
     panel, starving the issue list to height:0. Six cards rendered into a box
     with no height, so the tab counted "6 issues" and showed nothing.
     Never grows here, in either axis. */
  #peek-issues-panel .board-search-wrap { flex: 0 0 auto !important; }

  /* Board controls at phone width — ONE ROW (Ethan, 2026-08-13: "make all this
     one row on mobile"). The prior fix gave the count AND the "+ New issue"
     button each their own line, so the controls spanned three rows. They fit a
     single row now because the two "+" buttons collapse to their glyph (.pbt-ico,
     ~44px each instead of ~64–100px) — the same trick the main board's
     .board-new-btn uses. Measured budget at 375px (~355px content): toggles ~94
     + scope ~74 + filter-icon 44 + count ~52 + new-icon 44 + gaps 24 = ~332 <
     355, and tap targets stay 44px. The count stays inline on purpose: it is the
     live FILTERED total, which the "Board N" tab badge (unfiltered) does not
     show. Search keeps its own full-width row — at the ~120px it would get
     inline it was unusable, which is why the earlier fix moved it off. */
  @media (max-width: 600px) {
    #peek-issues-panel .peek-tasks-add {
      flex-wrap: wrap; row-gap: 6px; column-gap: 6px; align-items: center;
    }
    #peek-issues-panel .peek-tasks-add > .board-view-toggle { order: 1; }
    #peek-issues-panel #piv-scope { order: 2; min-height: 44px; white-space: nowrap; }
    #peek-issues-panel #peek-issues-count {
      order: 3; flex: 0 0 auto; text-align: left; margin: 0; white-space: nowrap;
    }
    #peek-issues-panel #piv-filter { order: 4; }
    #peek-issues-panel .peek-tasks-add > .btn.primary {
      order: 5; margin-left: auto; white-space: nowrap;
    }
    /* Both "+" buttons: 44px tap target, glyph not label. */
    #peek-issues-panel .pbt-compact {
      min-height: 44px; min-width: 44px; padding: 6px 9px;
      display: inline-flex; align-items: center; justify-content: center;
    }
    #peek-issues-panel .pbt-text { display: none; }
    #peek-issues-panel .pbt-ico { display: inline-flex; align-items: center; justify-content: center; }
    #peek-issues-panel .board-view-toggle .bv-btn { min-width: 44px; min-height: 44px; }
    /* Search: its own full-width row below the controls. */
    #peek-issues-panel .peek-tasks-add > .board-search-wrap {
      order: 6; flex: 1 0 100% !important;
    }
    #peek-issues-panel .peek-tasks-add > .board-search-wrap .search-input { min-height: 40px; }
  }
  /* The merged single-row toolbar (Ethan: "put all of these ... on the same
     row"). Wrap is what makes the mobile rules above possible without a second
     markup path: same DOM, different layout. */
  .peek-board-toolbar { flex-wrap: wrap; align-items: center; padding: 8px 10px 6px; }
  .board-search-wrap .search-input { width: 100%; box-sizing: border-box; }
  .board-search-wrap .search-clear { display: none; }
  .board-search-wrap:has(.search-input:not(:placeholder-shown)) .search-clear { display: flex; }
  .board-columns {
    display: flex; gap: 12px; overflow-x: scroll;
    -webkit-overflow-scrolling: touch; padding-bottom: 16px; align-items: flex-start;
    min-height: 200px; touch-action: pan-x pan-y;
  }
  .board-col-header { cursor: grab; }
  .board-col-header:active { cursor: grabbing; }
  .board-col.sortable-ghost { opacity: 0.3; }
  .board-col.sortable-chosen { box-shadow: 0 8px 24px rgba(0,0,0,0.4); transform: rotate(0.8deg); }
  .board-columns::-webkit-scrollbar { display: none; }
  .board-col {
    flex: 1; min-width: 200px; max-width: 320px;
    display: flex; flex-direction: column; gap: 6px;
    background: rgba(255,255,255,0.02); border-radius: 10px; padding: 10px 8px;
    min-height: 80px; touch-action: pan-x pan-y;
  }
  .board-col-header {
    font-size: 0.72rem; font-weight: 600; color: var(--dim);
    text-transform: uppercase; letter-spacing: 0.06em;
    display: flex; justify-content: space-between; align-items: center;
    padding: 2px 4px 8px 4px; border-bottom: 1px solid var(--border); margin-bottom: 2px;
  }
  .board-col-header .col-count {
    font-weight: 500; font-size: 0.68rem; color: var(--dim);
    background: var(--border); border-radius: 8px; padding: 1px 6px;
  }
  .board-card-noexec { display:inline-block; font-size:0.62rem; font-weight:700; padding:1px 6px; margin-bottom:4px; margin-left:4px;
    border-radius:4px; background:rgba(224,85,91,0.18); color:#e0555b; border:1px solid rgba(224,85,91,0.45); }
  /* ISOLATED OWNER (AMUX-3728). Same shape as .board-card-noexec because it is
     the same class of fact — a routing instruction on this card is unfollowable
     — but AMBER rather than red: "no executor" is a problem to fix, this is a
     constraint to respect. The full owner_reach sentence rides the title, so the
     chip stays one line at 375px. */
  .board-card-isolated { display:inline-block; font-size:0.62rem; font-weight:700; padding:1px 6px; margin-bottom:4px; margin-left:4px;
    border-radius:4px; background:rgba(210,153,34,0.15); color:var(--warn,#d29922); border:1px solid rgba(210,153,34,0.45); }
  /* ARCHIVED WITH A LIVE STATUS (AF-460). Same shape and same amber as
     .board-card-isolated -- a constraint on what you can do with this card,
     not a bug on the card itself: it must be unarchived before any closing
     verb will touch it. */
  .board-card-archived-live { display:inline-block; font-size:0.62rem; font-weight:700; padding:1px 6px; margin-bottom:4px; margin-left:4px;
    border-radius:4px; background:rgba(210,153,34,0.15); color:var(--warn,#d29922); border:1px solid rgba(210,153,34,0.45); }
  .board-card-shepherd { font-size:0.62rem; padding:1px 6px; border-radius:4px; background:rgba(137,87,229,0.15);
    color:var(--purple,#8957e5); border:1px dashed rgba(137,87,229,0.5); }
  /* LEASE (RR-0052 / AMUX-4529). Same chip shape as its neighbours because it
     is the same class of fact: something about this card that decides whether
     the advice on it is followable. Neutral while the hold is alive, red once
     the lease has expired, because an expired hold and a healthy one looked
     identical in the column. */
  .board-card-lease { display:inline-block; font-size:0.62rem; font-weight:600; padding:1px 6px; margin-bottom:4px;
    border-radius:4px; background:rgba(88,166,255,0.12); color:var(--accent); border:1px solid rgba(88,166,255,0.35);
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .board-card-lease-stale { background:rgba(224,85,91,0.15); color:#e0555b; border-color:rgba(224,85,91,0.45); }
  .board-card-blocked { display:inline-block; font-size:0.62rem; font-weight:600; padding:1px 6px; margin-bottom:4px;
    border-radius:4px; background:rgba(210,153,34,0.15); color:var(--warn,#d29922); border:1px solid rgba(210,153,34,0.45);
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .board-card-rot { display:inline-block; font-size:0.62rem; font-weight:600; padding:1px 6px; margin-bottom:4px;
    border-radius:4px; background:rgba(240,160,32,0.16); color:#f0a020; border:1px solid rgba(240,160,32,0.35); }
  .board-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 8px; padding: 10px 12px;
    cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
    will-change: transform;
    position: relative;
    /* Offscreen cards skip layout/paint entirely; the intrinsic size keeps the
       scrollbar honest. On a 300-card column this is the difference between
       painting 300 cards and painting the ~8 visible ones. */
    content-visibility: auto;
    contain-intrinsic-size: auto 96px;
  }
  /* Kill all transitions while dragging so Sortable's JS animation is the sole driver */
  body.board-dragging .board-card { transition: none !important; }
  .board-card:active { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(88,166,255,0.2); }
  .board-card-pinned { border-color: rgba(88,166,255,0.35); box-shadow: 0 0 0 1px rgba(88,166,255,0.12); }
  /* Card the owning session is working on RIGHT NOW (doing + session active) */
  .board-card-live {
    border-color: rgba(63,185,80,0.55);
    box-shadow: 0 0 0 1px rgba(63,185,80,0.25), 0 0 14px rgba(63,185,80,0.12);
  }
  .board-live-dot {
    display:inline-block; width:7px; height:7px; border-radius:50%;
    background:var(--green,#3fb950); margin-right:5px; vertical-align:1px;
    animation: boardLivePulse 1.6s ease-in-out infinite;
  }
  .board-card-live-label {
    display:inline-flex; align-items:center; margin-left:8px; padding:1px 6px;
    border-radius:8px; color:var(--green,#3fb950); background:rgba(63,185,80,0.12);
    border:1px solid rgba(63,185,80,0.35); font-family:system-ui,sans-serif;
    font-size:0.62rem; font-weight:700; letter-spacing:0; text-transform:none;
  }
  .board-card-live-label .board-live-dot { flex:0 0 auto; }
  @keyframes boardLivePulse { 0%,100% { opacity:1; } 50% { opacity:0.35; } }
  .board-card-live .board-card-session { color: var(--green,#3fb950); border-color: rgba(63,185,80,0.4); }
  .board-card-llm-task { display:block; font-size:0.72rem; color:var(--dim); padding:2px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .card-task-board-ctx { margin-top:1px; }
  .card-task-desc { margin-top:1px; }
  .board-activity { display:flex; align-items:flex-start; gap:8px; overflow-x:auto; max-width:100%; padding:8px 2px; margin-bottom:8px; }
  .board-activity[hidden] { display:none; }
  .board-activity-item { display:flex; align-items:flex-start; gap:10px; flex:0 0 min(420px,92%); padding:10px 12px; border:1px solid rgba(63,185,80,0.45); border-radius:10px; background:var(--surface,var(--bg)); font-size:0.8rem; }
  .board-activity-copy { min-width:0; flex:1; }
  .board-activity-copy > span { color:var(--green,#3fb950); }
  .board-activity-task { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; max-width:100%; padding:4px 0 0; border:0; background:none; color:var(--accent); text-align:left; cursor:pointer; font:inherit; line-height:1.35; overflow-wrap:anywhere; }
  .board-activity-note { margin-top:4px; color:var(--dim); font-size:0.74rem; }
  .board-activity-unlinked, .board-card-observed { border-color:var(--yellow,#d29922); box-shadow:0 0 0 1px rgba(210,153,34,0.2); }
  .board-activity-unlinked .board-activity-copy > span, .board-card-observed .board-card-live-label { color:var(--yellow,#d29922); }
  .board-card-observed .board-card-live-label { background:rgba(210,153,34,0.1); border-color:rgba(210,153,34,0.35); }
  .peek-issue-item.board-card-live, .peek-issue-item.board-card-observed { border-radius:6px; }
  @media (max-width:600px) { .board-activity-item { flex-direction:column; gap:6px; } }
  .board-pin-btn {
    position: absolute; top: 6px; right: 30px;
    width: 22px; height: 22px; padding: 0; border: none; background: none;
    font-size: 0.72rem; cursor: pointer; opacity: 0;
    transition: opacity 0.15s; border-radius: 4px;
    color: var(--dim); display: flex; align-items: center; justify-content: center;
  }
  @media (hover: hover) { .board-card:hover .board-pin-btn { opacity: 0.7; } }
  .board-pin-btn:hover { opacity: 1 !important; background: rgba(139,148,158,0.12); }
  .board-pin-btn.active { opacity: 0.8 !important; color: var(--accent); }
  @media (hover: hover) { .board-card:hover .board-pin-btn.active { opacity: 1 !important; } }
  .board-drag-handle {
    position: absolute; top: 6px; right: 6px;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    cursor: default; color: var(--dim); opacity: 0;
    transition: opacity 0.15s;
    border-radius: 4px;
    touch-action: none;
  }
  @media (hover: hover) { .board-card:hover .board-drag-handle { opacity: 0.7; cursor: grab; } }
  .board-drag-handle:hover { opacity: 1 !important; cursor: grab; color: var(--fg); background: rgba(139,148,158,0.12); }
  .board-drag-handle:active { cursor: grabbing; }
  /* Safari consumes the first tap when hover reveals a hidden child. Touch
     controls must already be visible so that tap opens the card. */
  @media (hover: none) { .board-pin-btn { opacity: 0.7; } .board-drag-handle { opacity: 0.5; width: 32px; height: 32px; cursor: grab; } }
  /* ── Board mobile responsive ── */
  .board-new-btn { font-size: 0.8rem; padding: 5px 12px; white-space: nowrap; flex-shrink: 0; }
  .board-new-icon { display: none; }
  /* Peek board-toolbar "+" buttons (filter/new issue): show the full label on
     desktop; the @media (max-width:600px) block above swaps to the glyph
     (.pbt-ico) so the controls fit one row on a phone. */
  .pbt-ico { display: none; }
  @media (max-width: 640px) {
    .board-toolbar { flex-wrap: wrap; gap: 6px; }
    /* The [+ Filter | search] pair owns the full first row (AMUX-2569).
       width:100% rather than flex-basis:100%: desktop Chromium breaks the
       line on a percentage BASIS, real iOS WebKit does not (verified on the
       iPhone 17 Pro sim, 2026-08-08 — same CSS, one row crammed, and the
       driver browser at 390px looked fine, which is why phone-width driver
       checks don't certify Safari). An explicit width wraps in both. */
    #bf-add { font-size: 0.78rem; }
    .board-search-wrap { order: 1; flex: 1 1 auto !important; width: 100%; min-width: 0; }
    .board-new-btn { order: 2; padding: 6px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
    .board-new-label { display: none; }
    .board-new-icon { display: inline; font-size: 1.1rem; font-weight: 700; line-height: 1; }
    .board-owner-toggle { order: 3; flex: 1; }
    .board-owner-toggle .bv-btn { flex: 1; text-align: center; font-size: 0.78rem; padding: 6px 4px; }
    .board-view-toggle { order: 4; }
    .board-view-toggle .bv-btn { padding: 6px 8px; }
    /* Mobile kanban, the pattern every major board converged on: one column
       per swipe with scroll-snap and an ~12vw peek of the next column so the
       horizontal axis is discoverable. Fixed column width beats squeezed
       multi-column: 160px columns rendered 2.3 abreast and truncated every
       title. Snap is proximity, not mandatory — mandatory fights a drag in
       progress, and Sortable owns the gesture mid-drag. */
    .board-columns {
      gap: 10px; min-height: 160px;
      scroll-snap-type: x proximity;
      scroll-padding-left: 8px;
    }
    body.board-dragging .board-columns { scroll-snap-type: none; }
    .board-col {
      flex: 0 0 86vw; min-width: 86vw; max-width: 86vw;
      scroll-snap-align: start;
      padding: 8px 8px;
    }
    /* A collapsed column is a stub, not a screen. At 86vw the default-collapsed
       BACKLOG/TODO made the board's first paint an empty header over blank
       space — the real columns were two swipes away. And at a FIXED 120-136px
       the stub truncated its own label to "B.." while wasting the rest of the
       box on a floating Gate button and empty padding (AMUX-2569) — content-
       size it, show the full name, and drop the controls a collapsed column
       cannot use anyway. */
    .board-col.col-collapsed {
      flex: 0 0 auto; min-width: auto; max-width: 40vw; padding: 4px 8px;
    }
    .board-col.col-collapsed .col-gate-btn,
    .board-col.col-collapsed .col-more-btn,
    .board-col.col-collapsed .col-del-btn { display: none; }
    .board-col.col-collapsed .board-col-header {
      position: static; border-bottom: none; padding-bottom: 2px; margin-bottom: 0;
    }
    /* Column header stays visible while scrolling a tall column. */
    .board-col-header { position: sticky; top: 0; z-index: 2;
      background: var(--bg); border-radius: 6px; }
    .board-card { padding: 8px 10px; }
    .board-card-title { font-size: 0.82rem; }
    .board-card-desc { font-size: 0.7rem; }
    .board-card-footer { gap: 4px; }
    .board-card-footer span { font-size: 0.62rem !important; }
    .board-card-key { font-size: 0.58rem; }
    .board-filter-chip { font-size: 0.68rem; padding: 2px 8px; }
    .board-session-items { padding: 0 2px 4px 12px; }
    .board-session-name { font-size: 0.78rem; }
    .board-session-count { font-size: 0.62rem !important; padding: 1px 5px !important; }
  }
  @media (max-width: 400px) {
    /* (removed 2026-07-31: this later block re-clamped columns to 260px and
       silently beat the 86vw snap sizing above — one width authority only) */
    .board-card { padding: 7px 8px; }
    .board-card-title { font-size: 0.78rem; }
    .board-col-header { font-size: 0.66rem; padding: 2px 2px 6px 2px; }
    .board-owner-toggle .bv-btn { font-size: 0.72rem; }
  }
  .board-card.card-enter { animation: cardEnter 0.3s cubic-bezier(.4,0,.2,1) both; }
  .board-card.card-flip { transition: transform 0.35s cubic-bezier(.4,0,.2,1); }
  @keyframes cardEnter {
    from { opacity: 0; transform: scale(0.95) translateY(-6px); }
    to { opacity: 1; transform: none; }
  }
  .col-count { transition: transform 0.15s; }
  .col-count.bump { animation: countBump 0.25s; }
  @keyframes countBump { 50% { transform: scale(1.3); } }
  .board-card-title {
    font-size: 0.87rem; font-weight: 500; line-height: 1.35;
    word-break: break-word; margin-bottom: 4px;
  }
  .board-card-desc {
    font-size: 0.74rem; color: var(--dim); margin-bottom: 6px;
    word-break: break-word; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .board-card-footer {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-top: 6px;
  }
  .board-card-key { font-size: 0.62rem; color: var(--dim); font-family: "SF Mono","Fira Code",monospace; letter-spacing: 0.02em; white-space: nowrap; }
  .board-card-tag, .board-card-session {
    font-size: 0.62rem; border-radius: 4px; padding: 3px 6px; white-space: nowrap;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .board-card-tag { background: rgba(139,148,158,0.1); color: var(--dim); border: 1px solid rgba(139,148,158,0.15); }
  /* Tag input widget (used in add-issue modal and detail view) */
  .be-tag-wrap {
    display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
    padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px;
    min-height: 34px; cursor: text; background: var(--input-bg, var(--bg));
    transition: border-color 0.15s;
  }
  .be-tag-wrap:focus-within { border-color: var(--accent); }
  .be-tag-chip {
    display: inline-flex; align-items: center; gap: 3px;
    background: rgba(88,166,255,0.12); color: var(--accent);
    border: 1px solid rgba(88,166,255,0.25); border-radius: 4px;
    padding: 2px 6px; font-size: 0.7rem; white-space: nowrap;
  }
  .be-tag-chip-remove { cursor: pointer; opacity: 0.55; line-height: 1; padding: 0 1px; }
  .be-tag-chip-remove:hover { opacity: 1; }
  .be-tag-input {
    border: none; outline: none; background: none;
    color: var(--text); font-size: 0.82rem; min-width: 80px; flex: 1; padding: 0;
    font-family: inherit;
  }
  .be-tag-suggestions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
  .be-tag-suggestion {
    font-size: 0.7rem; padding: 2px 7px; border-radius: 4px; cursor: pointer;
    background: rgba(139,148,158,0.08); color: var(--dim);
    border: 1px solid rgba(139,148,158,0.12); transition: background 0.12s, color 0.12s;
  }
  .be-tag-suggestion:hover { background: rgba(88,166,255,0.1); color: var(--accent); border-color: rgba(88,166,255,0.2); }
  .board-card-session {
    background: rgba(88,166,255,0.08); color: var(--accent); font-weight: 500;
    border: 1px solid rgba(88,166,255,0.18); overflow: hidden; text-overflow: ellipsis; max-width: 90px;
  }
  .board-card-tag:active, .board-card-session:active { background: rgba(88,166,255,0.15); color: var(--accent); border-color: rgba(88,166,255,0.3); }
  .board-card-time { font-size: 0.62rem; color: var(--dim); margin-left: auto; white-space: nowrap; }
  .board-add-btn {
    width: 100%; padding: 7px 0; font-size: 0.8rem; font-weight: 500;
    border: 1px dashed rgba(255,255,255,0.08); border-radius: 8px;
    background: none; color: var(--dim); cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent; margin-top: 2px;
  }
  .board-add-btn:active { border-color: var(--accent); color: var(--accent); }
  .board-empty { text-align: center; color: rgba(139,148,158,0.5); font-size: 0.78rem; padding: 20px 0; }
  .board-card { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  /* Suppress all selection + set grab cursor while a board drag is in progress */
  body.board-dragging, body.board-dragging * { user-select: none !important; -webkit-user-select: none !important; cursor: grabbing !important; }
  /* Ghost = placeholder showing drop target */
  .board-sortable-ghost { opacity: 0.4; background: rgba(88,166,255,0.07) !important; border: 2px dashed var(--accent) !important; border-radius: 8px; }
  /* Chosen = original card while being held */
  .board-sortable-chosen { opacity: 0.7; box-shadow: none; }
  /* Drag = the floating clone following the pointer */
  .board-sortable-drag { opacity: 0.96; box-shadow: 0 14px 36px rgba(0,0,0,0.45); transform: rotate(1.2deg) scale(1.03); border-radius: 8px; }
  /* Column actions (AMUX-4044) — the ellipsis beside Gate. Same restrained
     weight as the gate button: it opens a menu, it does not act on its own.
     A 44px minimum so it is a real tap target on a phone, matching the
     css-mobile rule the gate button already follows. */
  .col-more-btn {
    background: none; border: 1px solid transparent; border-radius: 5px;
    color: var(--dim); cursor: pointer; font-size: 0.95rem; line-height: 1;
    padding: 2px 6px; opacity: 0.75;
    transition: opacity 0.15s, color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .col-more-btn:hover, .col-more-btn:active {
    opacity: 1; color: var(--text); border-color: var(--border);
  }
  @media (max-width: 600px) {
    .col-more-btn { min-width: 44px; min-height: 44px; }
  }
  /* Run-now on a system job (AMUX-4046). Quiet by default: this section is a
     health view first, and the button must not compete with the status word
     that says whether the job is alive. The disabled state stays visible
     rather than hidden, so "cannot be run on demand" reads as a deliberate
     refusal instead of a missing feature. */
  .sysjob-run {
    background: none; border: 1px solid var(--border); border-radius: 5px;
    color: var(--dim); cursor: pointer; font-size: 0.7rem; padding: 2px 8px;
    margin-right: 8px; line-height: 1.4; white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .sysjob-run:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
  .sysjob-run:disabled { opacity: 0.35; cursor: not-allowed; }
  @media (max-width: 600px) { .sysjob-run { min-height: 44px; padding: 2px 12px; } }
  .col-del-btn {
    background: none; border: none; color: var(--dim); cursor: pointer; font-size: 0.75rem;
    padding: 0 2px; line-height: 1; opacity: 0.5; transition: opacity 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .col-del-btn:hover, .col-del-btn:active { opacity: 1; color: var(--red); }
  /* Gate-edit button — its own style (NOT the red delete style) so it reads as an
     editable checklist, and a bigger tap target for mobile discoverability. */
  .col-gate-btn { background: none; border: 1px solid transparent; border-radius: 5px;
    color: var(--dim); cursor: pointer; font-size: 0.82rem; padding: 2px 5px; line-height: 1;
    opacity: 0.75; transition: opacity 0.15s, color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent; }
  .col-gate-btn:hover, .col-gate-btn:active { opacity: 1; color: var(--accent); border-color: var(--border); }
  .col-gate-btn.has-gate { color: var(--accent); opacity: 0.95; }
  .col-terminal-chip {
    font-size: 0.58rem; padding: 1px 5px; border-radius: 8px;
    background: rgba(139,148,158,0.15); color: var(--dim); white-space: nowrap;
    text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
  }
  @media (max-width: 600px) { .col-gate-btn { font-size: 0.9rem; padding: 5px 8px; } }
  /* Entry criteria shown ON the column (AMUX-2313) — deliberately always
     visible, not behind the Gate button. Kept visually quiet so it reads as
     the column's contract rather than competing with the cards. */
  /* Group chips on a worker card, and the panel they expand (AMUX-2362). */
  /* Scope config tiles: a horizontal, swipeable row rather than a vertical
     stack of full-width cards. On a phone the stack needed the whole screen to
     show five facts; the row shows all five and drills in on tap (AMUX-2362). */
  .scope-tiles { display:flex; gap:6px; overflow-x:auto; padding:2px 0 6px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .scope-tiles::-webkit-scrollbar { display:none; }
  .scope-tile { flex:0 0 auto; min-width:104px; max-width:150px; text-align:left;
    display:flex; flex-direction:column; gap:1px; padding:7px 9px; border-radius:9px;
    border:1px solid var(--border); background:var(--card); cursor:pointer;
    min-height:44px; -webkit-tap-highlight-color:transparent; }
  .scope-tile.sel { border-color:var(--accent); background:rgba(88,166,255,0.08); }
  .scope-tile-label { color:var(--text); font-weight:600; font-size:0.74rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .scope-tile-src { font-size:0.64rem; }
  .scope-tile-val { font-size:0.66rem; color:var(--dim);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .scope-detail { border-top:1px solid var(--border); padding-top:7px; margin-top:2px; }
  /* Browser profile access editor (AMUX-5307). Chips wrap, so a phone shows the
     whole profile list without a horizontal scroll; every control is 36px+. */
  .scope-bp { border-top:1px solid var(--border); margin-top:8px; padding-top:8px; }
  .scope-bp-head { color:var(--text); font-weight:600; font-size:0.8rem; margin-bottom:3px; }
  .scope-bp-count { color:var(--dim); font-weight:400; font-size:0.7rem; margin-left:6px; }
  .scope-bp-note { color:var(--dim); font-size:0.68rem; line-height:1.4; margin-bottom:6px; }
  .scope-bp-row { display:flex; gap:8px; align-items:flex-start; margin:4px 0; }
  .scope-bp-lbl { flex:0 0 44px; font-size:0.7rem; color:var(--dim); padding-top:6px; }
  .scope-bp-list { display:flex; flex-wrap:wrap; gap:4px; min-width:0; }
  .scope-bp-empty { font-size:0.7rem; color:var(--dim); font-style:italic; padding-top:6px; }
  .scope-bp-chip { display:inline-flex; align-items:center; gap:2px; font-size:0.72rem;
    border-radius:12px; padding:2px 2px 2px 9px; border:1px solid var(--border); }
  .scope-bp-chip.allow { background:rgba(63,185,80,0.12); color:var(--green); border-color:rgba(63,185,80,0.4); }
  .scope-bp-chip.deny { background:rgba(248,81,73,0.12); color:#f85149; border-color:rgba(248,81,73,0.4); }
  .scope-bp-chip button { background:none; border:0; color:inherit; font-size:0.9rem; cursor:pointer;
    min-width:28px; min-height:28px; }
  .scope-bp-add { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:8px 0 6px; }
  .scope-bp-seg { display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
  .scope-bp-seg button { background:transparent; border:0; color:var(--dim); font-size:0.7rem;
    padding:6px 10px; min-height:36px; cursor:pointer; }
  .scope-bp-seg button.sel { background:rgba(88,166,255,0.14); color:var(--accent); }
  .scope-bp-input { flex:1 1 150px; min-width:0; max-width:340px; min-height:36px; font-size:16px; padding:4px 8px;
    border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--text); }
  .scope-bp-add .btn, .scope-bp-foot .btn { min-height:36px; font-size:0.72rem; padding:5px 11px; }
  .scope-bp-profs { display:flex; flex-wrap:wrap; gap:4px; max-height:220px; overflow-y:auto; padding:2px 0; }
  .scope-bp-prof { font-size:0.7rem; border-radius:12px; padding:5px 9px; min-height:32px; cursor:pointer;
    border:1px solid var(--border); background:var(--card); color:var(--text); }
  .scope-bp-prof.no { color:var(--dim); text-decoration:line-through; opacity:0.75; }
  .scope-bp-prof.in-allow { border-color:var(--green); }
  .scope-bp-prof.in-deny { border-color:#f85149; }
  .scope-bp-foot { display:flex; justify-content:space-between; align-items:center; gap:8px;
    flex-wrap:wrap; margin-top:8px; }
  .scope-bp-msg { font-size:0.68rem; color:var(--dim); }
  .worker-config-intro { color:var(--dim); font-size:0.7rem; line-height:1.45; margin:0 0 9px; }
  .worker-config-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; margin-bottom:10px; }
  .worker-config-section { border:1px solid var(--border); background:color-mix(in srgb, var(--card) 72%, transparent); border-radius:10px; overflow:hidden; min-width:0; }
  .worker-config-section-head { padding:10px 11px 8px; background:color-mix(in srgb, var(--hover) 72%, transparent); border-bottom:1px solid var(--border); }
  .worker-config-section-title { color:var(--text); font-size:0.78rem; font-weight:700; }
  .worker-config-section-note { color:var(--dim); font-size:0.65rem; line-height:1.35; margin-top:2px; }
  .worker-config-section-rows { padding:0 11px; }
  .worker-config-row { display:flex; align-items:center; gap:8px; padding:9px 0; border-top:1px solid var(--border); }
  .worker-config-row:first-child { border-top:0; }
  .worker-config-copy { min-width:0; flex:1; }
  .worker-config-label { color:var(--text); font-size:0.74rem; font-weight:600; }
  .worker-config-note { color:var(--dim); font-size:0.66rem; line-height:1.35; overflow-wrap:anywhere; }
  .worker-config-actions { display:flex; align-items:center; gap:5px; flex:0 0 auto; }
  .worker-config-grid-board { margin-top:0; }
  @media (min-width: 980px) {
    #peek-scope-panel .worker-config-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    #peek-scope-panel .worker-config-grid-board { grid-template-columns:minmax(0,1fr); }
  }
  @media (max-width: 560px) {
    .worker-config-row { align-items:flex-start; flex-direction:column; }
    .worker-config-actions { width:100%; justify-content:flex-end; }
  }
  @media (max-width: 600px) {
    .scope-tile { min-width:118px; padding:9px 10px; }
    .scope-tile-label { font-size:0.8rem; }
    .scope-tile-src, .scope-tile-val { font-size:0.72rem; }
  }
  .grp-chip { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:10px;
    font-size:0.66rem; font-weight:600; cursor:pointer; vertical-align:middle;
    background:rgba(88,166,255,0.14); color:var(--accent); border:1px solid transparent;
    -webkit-tap-highlight-color:transparent; }
  .grp-chip:hover, .grp-chip:active { border-color:var(--accent); }
  /* Its own band between the pills and the worker list. It used to live INSIDE
     #cards, which on >=1100px is a grid — so the panel became a single grid
     cell, squeezed to one column's width beside a worker card, and it scrolled
     away with the list. Out here it spans the full width at every breakpoint. */
  #grp-scope-strip:empty { display:none; }
  #grp-scope-strip { margin:0 0 10px; }
  /* Groups overview (AMUX-2537) — collapsed by default so it costs nothing
     until asked for, and mobile-first: rows stack, nothing relies on hover. */
  /* Groups tab rows (AMUX-2568). The head/hint/who classes from the old
     overview band went with the band; rows/name/sum/links carry over. */
  #groups-view { padding: 0 12px calc(20px + env(safe-area-inset-bottom)); }
  .grp-ov-caret { width:9px; color:var(--dim); font-size:0.7rem; }
  .grp-ov-rows { display:flex; flex-direction:column; gap:1px;
    border:1px solid var(--border); border-radius:10px; overflow:hidden; }
  .grp-ov-row { padding:10px 12px; background:rgba(255,255,255,0.015);
    border-bottom:1px solid var(--border); }
  .grp-ov-row:last-child { border-bottom:none; }
  .grp-tab-row { cursor:pointer; user-select:none; min-height:44px;
    display:flex; flex-direction:column; justify-content:center; }
  .grp-tab-row:hover { background:rgba(255,255,255,0.04); }
  .grp-ov-r1 { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
  .grp-ov-name { font-weight:700; font-size:0.82rem; color:var(--accent); }
  .grp-ov-sum { font-size:0.7rem; color:var(--dim); display:flex; gap:8px;
    flex-wrap:wrap; }
  .grp-mem-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
  .grp-mem { display:inline-flex; align-items:center; gap:5px; font-size:0.72rem;
    color:var(--text); border:1px solid var(--border); border-radius:12px;
    padding:5px 10px; min-height:30px; cursor:pointer; }
  .grp-mem:hover, .grp-mem:active { border-color:var(--accent); }
  .grp-mem-dot { width:7px; height:7px; border-radius:50%; background:var(--dim);
    display:inline-block; flex:0 0 auto; }
  .grp-mem-dot.active { background:var(--green, #3fb950); }
  .grp-mem-dot.waiting { background:#d29922; }
  .grp-tab-empty { color:var(--dim); padding:18px 4px; font-size:0.85rem; }
  .grp-ov-links { display:flex; gap:6px; margin-top:8px; }
  .grp-ov-link { font-size:0.68rem; color:var(--dim); cursor:pointer;
    border:1px solid var(--border); border-radius:8px; padding:3px 9px;
    min-height:26px; display:inline-flex; align-items:center; }
  .grp-ov-link:hover, .grp-ov-link:active { color:var(--accent);
    border-color:var(--accent); }
  /* Bare per-card figures: schedules on/off and in-progress issues
     (AMUX-2552 — "just numbers no outline"). */
  .meta-count { color:var(--dim); font-size:0.7rem; white-space:nowrap; }
  .grp-scope-panel { border:1px solid var(--accent); border-radius:10px; padding:10px 12px;
    margin:0; background:var(--card); position:relative; }
  /* Horizontal on anything with room: identity on the left, configs taking the
     rest, actions trailing. Mobile keeps the stack — 375px cannot carry three
     columns without the tiles becoming unreadable (css-mobile rule). */
  @media (min-width: 760px) {
    .grp-scope-row { display:flex; align-items:center; gap:14px; }
    .grp-scope-row > .grp-scope-ident { flex:0 0 auto; max-width:34%; }
    .grp-scope-row > .grp-scope-tiles { flex:1 1 auto; min-width:0; }
  }
  /* Accordion toggle. Sits in flow at the top-right rather than overlapping the
     content the way the old absolute X did — it overlapped the member list, which
     is why the close control landed on top of the worker names. */
  .grp-scope-head { display:flex; align-items:center; justify-content:space-between;
    gap:10px; }
  .grp-scope-title { color:var(--text); font-weight:600; font-size:0.82rem;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* The at-a-glance line lives in the header so it reads in BOTH states — the
     collapsed bar was dead space (Ethan's screenshot). min-width:0 + ellipsis
     keeps it from pushing the Expand handle off a 375px screen. */
  .grp-scope-sum { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; font-size:0.7rem; color:var(--dim); margin:0 10px; }
  .grp-scope-sub { color:var(--dim); font-weight:400; }
  /* NOT float. A float is not contained by a parent whose only other child is
     display:none, so collapsing dropped the button out of the panel and left an
     empty bordered box (Ethan's screenshot). Flex keeps the handle in the box at
     both states. */
  .grp-scope-acc { flex:0 0 auto; background:none; border:1px solid var(--border);
    border-radius:6px; color:var(--dim); font-size:0.66rem; line-height:1;
    padding:6px 9px; min-height:32px; cursor:pointer; margin-left:8px;
    -webkit-tap-highlight-color:transparent; }
  .grp-scope-acc:hover, .grp-scope-acc:active { color:var(--text); border-color:var(--accent); }
  .grp-scope-close { position:absolute; top:4px; right:4px; background:none; border:none;
    color:var(--dim); font-size:1.1rem; line-height:1; cursor:pointer;
    min-width:44px; min-height:44px; -webkit-tap-highlight-color:transparent; }
  .grp-scope-close:hover, .grp-scope-close:active { color:var(--text); }
  .grp-scope-body { font-size:0.8rem; color:var(--dim); }
  /* Mobile sizing. The comment here used to claim it padded the HIT AREA to 44px
     "rather than the visual box" — it only ever set padding:4px 9px, i.e. ~26px.
     A comment asserting a property the rule does not implement is worse than no
     comment: it is what a reviewer greps for when checking the css-mobile rule,
     and it answers yes. The hit area is now actually expanded, below. */
  @media (max-width: 600px) {
    .grp-chip { font-size:0.72rem; padding:4px 9px; margin-left:5px; position:relative; }
    /* Real hit-area expansion, vertical only. Expanding horizontally too would
       overlap the adjacent chip (they sit 5px apart) and trade a small target
       for a wrong one. */
    .grp-chip::after { content:''; position:absolute; left:0; right:0; top:-9px; bottom:-9px; }
    .grp-scope-panel { padding:12px; }
  }
  .col-gate-crit { margin: 6px 0 8px; padding: 7px 9px; border-radius: 8px;
    border: 1px solid var(--border); background: rgba(255,255,255,0.02);
    font-size: 0.72rem; line-height: 1.35; color: var(--dim); }
  .col-gate-crit-h { color: var(--text); opacity: 0.85; margin-bottom: 4px; }
  .col-gate-crit-l { margin: 0 0 4px; padding-left: 15px; }
  .col-gate-crit-l li { margin: 1px 0; overflow-wrap: anywhere; }
  .col-gate-crit-n { font-style: italic; opacity: 0.7; margin-bottom: 4px; }
  .col-gate-crit-f { font-size: 0.66rem; opacity: 0.65; }
  .col-gate-optin { color: var(--accent); }
  /* Mobile is the constrained surface and amux is mobile-first: bump the type
     so the criteria stay legible at 375px rather than shrinking to decoration. */
  @media (max-width: 600px) {
    .col-gate-crit { font-size: 0.8rem; padding: 8px 10px; }
    .col-gate-crit-f { font-size: 0.72rem; }
  }
  .board-add-col-btn {
    flex-shrink: 0; align-self: flex-start; min-width: 120px; padding: 10px 14px;
    font-size: 0.8rem; font-weight: 500; border: 1px dashed rgba(255,255,255,0.1);
    border-radius: 10px; background: rgba(255,255,255,0.01); color: var(--dim);
    cursor: pointer; transition: border-color 0.15s, color 0.15s; white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  .board-add-col-btn:active { border-color: var(--accent); color: var(--accent); }
  .board-col-new { min-width: 180px; max-width: 220px; }
  .new-status-input {
    width: 100%; box-sizing: border-box; background: var(--input-bg, rgba(255,255,255,0.05));
    border: 1px solid var(--border); border-radius: 6px; color: var(--text);
    font-size: 0.85rem; padding: 6px 8px; outline: none; font-family: inherit;
    transition: border-color 0.15s;
  }
  .new-status-input:focus { border-color: var(--accent); }
  .board-filters { display: flex; gap: 6px; flex-wrap: nowrap; padding: 2px 0 4px; align-items: center; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .board-filters::-webkit-scrollbar { display: none; }
  /* Saved-view chips. Horizontally scrollable so 8 views don't wrap the board
     off-screen on a 375px phone; scrollbar hidden to match .board-filters. */
  .board-views { display: flex; gap: 6px; flex-wrap: nowrap; padding: 4px 0 2px; align-items: center;
                 overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .board-views::-webkit-scrollbar { display: none; }
  /* Message-kind filter chips (peek Messages tab + Message history modal).
     One shared class so the two surfaces cannot drift apart. Measured at 19px
     tall in WebKit before this existed — well under the 44px touch minimum, on
     the control that is now the primary way to read history on a phone. */
  .msg-kind-chip {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 600; white-space: nowrap;
    padding: 4px 11px; min-height: 26px; border-radius: 13px; cursor: pointer;
  }
  @media (max-width: 600px) {
    /* 44px tall AND 44px of tappable width, so a short label like "All" is
       still a full target rather than a sliver. */
    .msg-kind-chip { min-height: 44px; min-width: 44px; padding: 4px 10px;
                     font-size: 0.74rem; border-radius: 22px; flex: 0 0 auto; }
  }
  .board-view-chip {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    font-size: 0.72rem; padding: 5px 10px; border-radius: 999px; cursor: pointer;
    background: var(--card); color: var(--text); border: 1px solid var(--border);
  }
  .board-view-chip:hover { border-color: var(--dim); }
  .board-view-chip.active { background: rgba(88,166,255,0.15); color: var(--accent); border-color: rgba(88,166,255,0.45); }
  .board-view-chip.empty { color: var(--dim); }
  .board-view-chip.add { color: var(--dim); border-style: dashed; }
  .board-view-chip .bvc-n { font-size: 0.66rem; padding: 0 5px; border-radius: 999px;
                            background: rgba(139,148,158,0.18); color: var(--dim); }
  .board-view-chip.active .bvc-n { background: rgba(88,166,255,0.22); color: var(--accent); }
  .board-view-chip .bvc-x { opacity: 0.35; padding: 0 2px; font-size: 0.7rem; }
  .board-view-chip .bvc-x:hover { opacity: 1; color: #f85149; }
  @media (max-width: 600px) {
    /* 44px touch target without making the chips visually huge: the padding is
       vertical breathing room, the row keeps its compact look. */
    .board-view-chip { min-height: 34px; padding: 8px 12px; font-size: 0.74rem; }
    .board-view-chip .bvc-x { padding: 0 6px; font-size: 0.8rem; }
    .board-views { padding: 4px 0 4px; }
  }
  .board-filter-label { font-size: 0.68rem; color: var(--dim); white-space: nowrap; }
  .board-filter-chip {
    font-size: 0.72rem; padding: 3px 10px; border-radius: 12px;
    border: 1px solid var(--border); background: none; color: var(--dim);
    cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all 0.12s; white-space: nowrap;
  }
  .board-filter-chip.active { background: rgba(88,166,255,0.15); color: var(--accent); border-color: rgba(88,166,255,0.3); }
  .board-filter-chip.active-session { background: rgba(139,148,158,0.15); color: var(--text); border-color: var(--dim); }
  /* Board toolbar + view toggle */
  /* AT-A-GLANCE PROGRESS (AMUX-2506) + COLUMN PURPOSE (AMUX-2507).
     Mobile-first per .claude/rules/css-mobile.md: this is a horizontally
     scrollable rail, NOT a grid, so at 375px it stays one readable line instead
     of wrapping into a wall. Touch targets are not interactive here (read-only
     figures) so the 44px rule does not bind, but the rail keeps 44px height so it
     matches the toolbar it sits under. */
  .board-stats {
    display: flex; gap: 6px; align-items: stretch;
    margin: 0 0 4px; padding: 2px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .board-stats::-webkit-scrollbar { display: none; }
  .bstat {
    flex: 0 0 auto; min-width: 64px; padding: 5px 9px;
    border: 1px solid var(--border); border-radius: 7px;
    background: var(--panel); text-align: left;
  }
  .bstat-v { font-size: 0.92rem; font-weight: 650; line-height: 1.15; color: var(--fg); }
  .bstat-l {
    font-size: 0.62rem; color: var(--dim); margin-top: 1px;
    text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
  }
  .bstat.c-doing .bstat-v   { color: var(--yellow); }
  .bstat.c-review .bstat-v  { color: var(--accent); }
  .bstat.c-done .bstat-v    { color: var(--green, #3fb950); }
  .bstat.c-blocked .bstat-v { color: var(--red, #f85149); }
  /* NOT flex-greedy. `flex:1 1 auto` stretched this across the full board width
     and dwarfed the counts beside it — the opposite of an at-a-glance rail. */
  .bstat-prog { min-width: 146px; max-width: 210px; flex: 0 0 auto; }
  .bstat-prog .bstat-bar {
    height: 4px; border-radius: 2px; background: var(--border);
    overflow: hidden; margin-bottom: 5px;
  }
  .bstat-prog .bstat-bar > span {
    display: block; height: 100%; border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), var(--green, #3fb950));
    transition: width 0.3s ease;
  }
  .board-col-purpose {
    font-size: 0.68rem; color: var(--dim); padding: 0 2px 6px;
    line-height: 1.3; letter-spacing: 0.01em;
  }
  @media (max-width: 600px) {
    /* MOBILE BOARD DENSITY (AMUX-2506, from Ethan's 375px screenshot).
       The board stacked EIGHT bands of chrome above the first card — header, tabs,
       search, +Filter, owner toggle + view icons, chips, group, stats — and then
       column headers collided with their own Gate buttons. On a phone the content
       started below the fold and the columns were clipped mid-word.
       Everything here buys VERTICAL SPACE back; nothing hides information. */
    .board-stats { gap: 5px; margin-bottom: 6px; padding: 0; }
    /* flex-grow so the rail fills the row edge-to-edge instead of leaving a
       dead zone to the right of the last tile (AMUX-2569); overflow-x still
       scrolls when they genuinely don't fit. */
    .bstat { min-width: 0; padding: 5px 8px; border-radius: 7px; flex: 1 1 auto; }
    .bstat-v { font-size: 0.9rem; line-height: 1.1; }
    .bstat-l { font-size: 0.56rem; letter-spacing: 0.02em; }
    .bstat-prog { min-width: 104px; max-width: 132px; }
    .bstat-prog .bstat-bar { height: 3px; margin-bottom: 3px; }

    /* Column header: the collision. Label + count + Gate + delete were competing for
       ~150px, so the Gate button wrapped under the title and overlapped the next
       column. Let the title take the row and drop the Gate control to an icon — the
       criteria are still rendered in full underneath, which is where they are read. */
    .board-col-header { flex-wrap: nowrap; gap: 4px; min-height: 34px; }
    .board-col-header > span:first-child { min-width: 0; flex: 1 1 auto; }
    .board-col-header > span:first-child > span { overflow: hidden; text-overflow: ellipsis;
                                                  white-space: nowrap; font-size: 0.78rem; }
    .col-gate-btn { font-size: 0; padding: 6px; min-width: 34px; min-height: 34px;
                    line-height: 1; }
    .col-gate-btn::before { content: '\2611\FE0E'; font-size: 0.9rem; }
    .board-col-purpose { font-size: 0.62rem; padding: 0 2px 4px; line-height: 1.25; }

    /* WORKERS TAB DENSITY (Ethan's 12:14 screenshot). The group summary card spent
       ~600px before the first worker: a THREE-LINE list of member names, three config
       tiles clipped at the right edge, a hint line, and three action buttons on two
       rows. The member list is the worst offender because it is pure duplication —
       those exact workers are the cards immediately below it. */
    .grp-members { display: none; }              /* the cards below ARE the list */
    .grp-scope-row { gap: 6px; }
    .grp-scope-ident { font-size: 0.8rem !important; }
    .scope-tiles { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
                   scrollbar-width: none; }
    .scope-tiles::-webkit-scrollbar { display: none; }
    .scope-tile { flex: 0 0 auto; min-width: 96px; min-height: 44px; padding: 6px 9px; }
    .scope-tile-label { font-size: 0.68rem; }
    .scope-tile-val, .scope-tile-src { font-size: 0.64rem; }

    /* Toolbar: three separate rows became one scrollable row plus the search box. */
    .board-toolbar { gap: 5px; }
    .board-owner-toggle .bv-btn, .board-view-toggle .bv-btn { padding: 6px 10px; }
    .board-col-purpose { font-size: 0.64rem; }
  }
  .board-toolbar { display: flex; gap: 8px; align-items: center; }
  .board-owner-toggle { display: flex; gap: 2px; background: rgba(255,255,255,0.04); border-radius: 6px; padding: 2px; flex-shrink: 0; }
  .board-view-toggle { display: flex; gap: 2px; background: rgba(255,255,255,0.04); border-radius: 6px; padding: 2px; flex-shrink: 0; }
  .bv-btn {
    padding: 5px 8px; border: none; background: none; color: var(--dim);
    font-size: 0.85rem; cursor: pointer; border-radius: 4px;
    -webkit-tap-highlight-color: transparent; transition: all 0.12s; line-height: 1;
  }
  .bv-btn.active { background: rgba(88,166,255,0.15); color: var(--accent); }
  .bv-btn:active { background: rgba(88,166,255,0.1); }
  /* Session-grouped view */
  .board-session-group { margin-bottom: 8px; min-width: 0; }
  .board-session-header {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    border-radius: 8px; transition: background 0.12s; user-select: none;
  }
  .board-session-header:active { background: rgba(255,255,255,0.04); }
  .board-session-chevron {
    font-size: 0.6rem; color: var(--dim); transition: transform 0.2s; flex-shrink: 0; width: 12px;
  }
  .board-session-chevron.open { transform: rotate(90deg); }
  .board-session-name { font-size: 0.82rem; font-weight: 600; color: var(--text); }
  .board-session-counts {
    display: flex; gap: 6px; margin-left: auto; flex-shrink: 0;
  }
  .board-session-count {
    font-size: 0.62rem; padding: 2px 6px; border-radius: 8px; font-weight: 500;
  }
  .board-session-summary {
    color: var(--dim); font-size: 0.7rem; padding: 2px 10px 8px;
  }
  .board-session-count.todo { background: rgba(139,148,158,0.12); color: var(--dim); }
  .board-session-count.doing { background: rgba(210,153,34,0.15); color: var(--yellow); }
  .board-session-count.done { background: rgba(63,185,80,0.15); color: var(--green); }
  .board-session-items { padding: 0 4px 4px 20px; }
  .board-session-items .board-card { margin-bottom: 6px; }
  .tag-group-body { padding: 0 0 4px 0; min-width: 0; overflow: hidden; }
  .board-session-items .board-card .board-status-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; flex-shrink: 0;
  }
  .board-status-dot.backlog { background: var(--accent); }
  .board-status-dot.todo { background: var(--dim); }
  .board-status-dot.doing { background: var(--yellow); }
  .board-status-dot.done { background: var(--green); }
  .board-status-dot.discarded { background: rgba(139,148,158,0.4); }
  .board-session-empty { color: rgba(139,148,158,0.4); font-size: 0.75rem; padding: 10px 0; text-align: center; }
  .board-columns-list { display: block; padding-bottom: 16px; min-height: 200px; }
  /* Board card detail */
  .board-detail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0 12px; -webkit-overflow-scrolling: touch; }
  .board-detail-key { font-size: 0.72rem; color: var(--dim); font-family: "SF Mono","Fira Code",monospace; margin-bottom: 8px; }
  .board-detail-title-input {
    width: 100%; font-size: 1.25rem; font-weight: 700; background: none; border: none;
    color: var(--text); outline: none; padding: 0; margin-bottom: 10px;
    font-family: inherit; line-height: 1.35; box-sizing: border-box;
    resize: none; overflow: hidden; word-wrap: break-word;
  }
  .board-detail-title-input::placeholder { color: var(--dim); }
  .board-detail-title-input[readonly] { cursor: default; }
  .board-detail-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
  .board-detail-status-row { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
  .board-detail-status-btn {
    padding: 4px 13px; border-radius: 20px; font-size: 0.75rem; font-weight: 600;
    border: 1px solid var(--border); background: none; color: var(--dim);
    cursor: pointer; transition: all 0.15s; -webkit-tap-highlight-color: transparent;
  }
  .board-detail-status-btn.active-backlog { background: rgba(88,166,255,0.15); color: var(--accent); border-color: var(--accent); }
  .board-detail-status-btn.active-todo { background: rgba(139,148,158,0.15); color: var(--text); border-color: var(--dim); }
  .board-detail-status-btn.active-doing { background: rgba(210,153,34,0.15); color: var(--yellow); border-color: var(--yellow); }
  .board-detail-status-btn.active-done { background: rgba(63,185,80,0.15); color: var(--green); border-color: var(--green); }
  .board-detail-status-btn.active-discarded { background: rgba(139,148,158,0.08); color: rgba(139,148,158,0.5); border-color: rgba(139,148,158,0.2); }
  .board-detail-session-select {
    padding: 4px 8px; border-radius: 6px; font-size: 0.8rem;
    border: 1px solid var(--border); background: var(--card); color: var(--text);
    outline: none; font-family: inherit; max-width: 200px;
  }
  .board-detail-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 2px; }
  .board-detail-tab {
    padding: 6px 14px; font-size: 0.8rem; font-weight: 500; cursor: pointer;
    border: none; background: none; color: var(--dim); border-bottom: 2px solid transparent;
    margin-bottom: -1px; -webkit-tap-highlight-color: transparent;
  }
  .board-detail-tab.active { color: var(--text); border-bottom-color: var(--accent); }
  @media (max-width: 600px) {
    .board-detail-tab { min-height: 44px; }
  }
  .board-detail-desc-input {
    width: 100%; min-height: 200px; font-size: 0.92rem; background: none;
    border: none; color: var(--text); outline: none; padding: 10px 0;
    font-family: inherit; line-height: 1.65; resize: none; box-sizing: border-box;
  }
  .board-detail-log { margin-top: 10px; padding: 8px 10px; background: var(--panel2, rgba(255,255,255,0.03)); border-radius: 8px; font-size: 0.74rem; line-height: 1.5; color: var(--dim); max-height: 55vh; overflow-y: auto; }
  .board-detail-key { cursor: pointer; }
  .board-detail-key:hover { text-decoration: underline; }
  .bd-status-banner { background: var(--accent-dim, rgba(199,91,46,0.12)); border: 1px solid var(--accent);
    border-radius: 10px; padding: 10px 12px; margin: 4px 0 12px; }
  .bd-sb-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); font-weight: 600; margin-bottom: 4px; }
  .bd-sb-text { font-size: 0.9rem; line-height: 1.5; color: var(--fg); white-space: pre-wrap; word-break: break-word; }
  .bd-sb-empty { font-size: 0.82rem; color: var(--dim); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
  .bd-hist-n { font-size: 0.68rem; opacity: 0.7; }
  .bd-hist { display: flex; flex-direction: column; gap: 2px; }
  .bd-hist-row { display: flex; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--border); align-items: flex-start; }
  .bd-hist-row:last-child { border-bottom: none; }
  .bd-hist-ic { flex: 0 0 16px; text-align: center; font-size: 0.8rem; line-height: 1.5; }
  .bd-hist-b { flex: 1; min-width: 0; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
  .bd-hist-txt { font-size: 0.82rem; line-height: 1.5; word-break: break-word; }
  .bd-hist-ts { font-size: 0.68rem; color: var(--dim); flex: 0 0 auto; font-family: var(--font-mono); }
  .bd-hist-status .bd-hist-txt { font-weight: 600; }
  .bd-hist-warn .bd-hist-txt { color: var(--red); }
  .bd-log-title { font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; color: var(--dim); }
  .bd-log-line { white-space: pre-wrap; word-break: break-word; }
  .board-detail-desc-input::placeholder { color: var(--dim); }
  .board-detail-preview { min-height: 80px; font-size: 0.92rem; color: var(--text); padding: 10px 0; }
  .board-detail-meta { margin: 2px 0 16px; font-size: 0.78rem; color: var(--dim); display: flex; flex-direction: column; gap: 8px; }
  .board-detail-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .bd-card-facts { display:flex; flex-wrap:wrap; gap:5px 12px; padding:0 2px 2px; color:var(--dim); }
  .bd-card-section { border:1px solid var(--border); border-radius:9px; padding:10px 12px; background:var(--panel2, rgba(255,255,255,0.025)); display:flex; flex-direction:column; gap:6px; }
  .bd-card-section h4 { margin:0 0 2px; color:var(--text); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.055em; }
  .bd-link-chip { font:inherit; cursor:pointer; }
  .msg-card-chip { cursor:pointer; font:inherit; font-size:0.68rem; border:1px solid var(--border); border-radius:6px;
    padding:2px 8px; white-space:nowrap; background:var(--panel2, rgba(255,255,255,0.035)); font-weight:600; }
  .msg-card-chip:hover, .msg-card-chip:focus-visible { background:rgba(88,166,255,0.12); outline:2px solid var(--accent); outline-offset:1px; }
  .bd-retired-artifacts { opacity:0.78; }
  .bd-gate { padding:6px 0; border-top:1px solid var(--border); }
  .bd-gate:first-of-type { border-top:0; padding-top:0; }
  .bd-gate-head { display:flex; align-items:center; gap:7px; color:var(--dim); font-size:0.7rem; text-transform:uppercase; }
  .bd-gate ul { margin:5px 0 0; padding-left:20px; color:var(--text); }
  .bd-gate li { margin:3px 0; line-height:1.4; }
  .bd-activity-all { align-self:flex-start; border:0; background:none; color:var(--accent); padding:4px 0; cursor:pointer; font-size:0.76rem; }
  .bd-notes-empty { color:var(--dim); font-size:0.84rem; padding:12px 2px; line-height:1.5; }
  .board-detail-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; flex-shrink: 0; border-top: 1px solid var(--border); }


  /* Board inline edit */
  .board-edit-overlay {
    position: fixed; inset: 0; z-index: 600;
    background: rgba(0,0,0,0); align-items: center; justify-content: center;
    /* Bottom padding clears the sw-fail-bar (AMUX-2584). That bar is fixed at
       bottom:0 with z-index 9999, above this overlay, and the box's Save row is
       sticky bottom:0 INSIDE the box — so without this the bar covers exactly
       the strip Save lives in, and at 375px it wraps to 3-4 lines and hides the
       action row entirely. --sw-fail-h is published by the bar itself after it
       measures, and reset to 0px when dismissed; the fallback keeps this inert
       on every origin that installs its service worker normally. */
    padding: 16px 16px calc(16px + var(--sw-fail-h, 0px));
    display: flex; pointer-events: none;
    transition: background 0.25s;
  }
  .board-edit-overlay.active { background: rgba(0,0,0,0.6); pointer-events: auto; }
  .board-edit-overlay .board-edit-box {
    opacity: 0; transform: scale(0.95) translateY(8px);
    transition: opacity 0.25s, transform 0.25s cubic-bezier(.4,0,.2,1);
  }
  .board-edit-overlay.active .board-edit-box { opacity: 1; transform: none; }
  .board-edit-box {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; padding: 16px; width: 100%; max-width: 400px;
    /* Same subtraction as the overlay padding: the box must shrink, not just
       shift, or a tall card still runs its sticky footer under the bar. */
    max-height: calc(100dvh - 32px - var(--sw-fail-h, 0px)); overflow-y: auto;
  }
  @media (max-width: 600px) {
    .board-edit-overlay {
      padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) calc(max(8px, env(safe-area-inset-bottom)) + var(--sw-fail-h, 0px)) max(8px, env(safe-area-inset-left));
    }
    .board-edit-box {
      max-height: calc(var(--dialog-viewport-height, 100dvh) - 16px - var(--sw-fail-h, 0px));
    }
  }
  .board-edit-box input, .board-edit-box textarea, .board-edit-box select {
    width: 100%; padding: 8px 10px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--bg); color: var(--text);
    font-size: 0.85rem; font-family: inherit; margin-bottom: 8px;
    outline: none; box-sizing: border-box;
  }
  .board-edit-box textarea { resize: vertical; min-height: 60px; }
  .board-edit-box input:focus, .board-edit-box textarea:focus, .board-edit-box select:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88,166,255,0.12);
  }
  .board-edit-box .field-group { margin-bottom: 8px; }
  .board-edit-box .field-group > input, .board-edit-box .field-group > textarea,
  .board-edit-box .field-group > select { margin-bottom: 0; }
  .board-edit-actions {
    display: flex; gap: 8px; margin-top: 4px;
  }
  .board-edit-actions button {
    flex: 1; padding: 8px 0; border-radius: 8px; font-size: 0.82rem;
    font-weight: 600; cursor: pointer; border: 1px solid var(--border);
    -webkit-tap-highlight-color: transparent;
  }
  .board-edit-actions .be-cancel { background: var(--card); color: var(--dim); }
  .board-edit-actions .be-save { background: var(--accent); color: #fff; border-color: var(--accent); }
  .board-edit-actions .be-cancel:active { background: var(--border); }
  .board-edit-actions .be-save:active { opacity: 0.8; }

  /* ═══ Grid Mode ═══ */
  #grid-view {
    display: none; position: fixed; top: 56px; left: 0; right: 0; bottom: 0; z-index: 39;
    background: #0a0d12; flex-direction: column;
  }
  #grid-view.active { display: flex; }
  .grid-toolbar {
    display: flex; align-items: center; gap: 8px; padding: 6px 12px;
    border-bottom: 1px solid var(--border); flex-shrink: 0;
    background: var(--card); min-height: 44px;
  }
  .grid-toolbar-title { font-size: 0.78rem; font-weight: 600; color: var(--dim); flex-shrink: 0; margin-right: 4px; }
  #grid-chips { display: flex; gap: 5px; flex: 1; overflow-x: auto; align-items: center; padding: 2px 0; }
  #grid-chips::-webkit-scrollbar { display: none; }
  .gp-chip {
    padding: 3px 10px; border-radius: 10px; font-size: 0.73rem; cursor: pointer;
    border: 1px solid var(--border); background: transparent; color: var(--dim);
    white-space: nowrap; flex-shrink: 0; transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .gp-chip:hover { background: var(--hover); color: var(--text); }
  .gp-chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
  /* Pane open but its session stopped — still closable, visibly stale. */
  .gp-chip.gp-dead { opacity: 0.55; text-decoration: line-through; }
  .ws-profile-chip {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 8px; border-radius: 10px; font-size: 0.73rem; cursor: pointer;
    border: 1px solid var(--accent); background: rgba(88,166,255,0.08); color: var(--accent);
    white-space: nowrap; flex-shrink: 0; transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .ws-profile-chip:hover { background: rgba(88,166,255,0.2); }
  .ws-profile-del {
    background: none; border: none; color: inherit; opacity: 0.5; cursor: pointer;
    padding: 0 0 0 2px; font-size: 0.7rem; line-height: 1;
  }
  .ws-profile-del:hover { opacity: 1; }
  .ws-save-input {
    background: var(--input-bg, #0d1117); border: 1px solid var(--accent);
    border-radius: 6px; color: var(--text); font-size: 0.75rem;
    padding: 4px 8px; outline: none; width: 130px;
  }
  .ws-save-input::placeholder { color: var(--dim); }
  .ws-preset-dropdown {
    position: relative; display: inline-block;
  }
  .ws-preset-btn {
    font-size: 0.75rem; padding: 4px 10px; cursor: pointer;
    background: transparent; border: 1px solid var(--border); border-radius: 6px;
    color: var(--dim); white-space: nowrap;
  }
  .ws-preset-btn:hover { background: var(--hover); color: var(--text); }
  .ws-preset-menu {
    display: none; position: absolute; top: 100%; left: 0; margin-top: 4px;
    background: var(--card); border: 1px solid var(--border); border-radius: 8px;
    padding: 4px 0; z-index: 900; min-width: 160px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }
  .ws-preset-menu.open { display: block; }
  .ws-preset-menu button {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 12px;
    background: none; border: none; color: var(--text); font-size: 0.78rem;
    cursor: pointer; text-align: left;
  }
  .ws-preset-menu button:hover { background: var(--hover); }
  .ws-preset-menu button .preset-icon {
    font-size: 0.65rem; color: var(--dim); font-family: var(--mono); width: 32px;
    text-align: center; flex-shrink: 0;
  }
  #gridstack-container { flex: 1; overflow-y: auto; padding: 4px; }
  .gp-header {
    display: flex; align-items: center; padding: 0 10px; gap: 8px;
    background: #161b22; border-bottom: 1px solid var(--border);
    height: 32px; cursor: move; flex-shrink: 0;
    user-select: none; -webkit-user-select: none;
  }
  .gp-title { font-size: 0.78rem; font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
  .gp-dot { width: 7px; height: 7px; border-radius: 50%; background: #6e7681; flex-shrink: 0; transition: background 0.3s; }
  .gp-dot.working { background: #3fb950; }
  .gp-dot.waiting { background: #d29922; }
  .gp-dot.idle { background: #58a6ff; }
  .gp-close, .gp-peek-btn {
    background: none; border: none; color: var(--dim); cursor: pointer;
    font-size: 0.82rem; padding: 2px 5px; border-radius: 3px; line-height: 1;
    flex-shrink: 0; -webkit-tap-highlight-color: transparent;
  }
  .gp-close:hover { background: rgba(248,81,73,0.15); color: #f85149; }
  .gp-peek-btn:hover { background: rgba(88,166,255,0.12); color: #58a6ff; }
  /* Snap-to-fraction width presets in the pane header */
  .gp-size { display: flex; gap: 1px; flex-shrink: 0; }
  .gp-size-btn {
    background: none; border: none; color: var(--dim); cursor: pointer;
    font-size: 0.72rem; padding: 2px 4px; min-width: 18px; border-radius: 3px;
    line-height: 1; flex-shrink: 0; -webkit-tap-highlight-color: transparent;
  }
  .gp-size-btn:hover { background: rgba(88,166,255,0.12); color: #58a6ff; }
  .gp-size-btn.active { color: var(--accent); background: rgba(88,166,255,0.16); }
  /* Session panes embed the full peek view via an iframe (peek-embed mode) */
  .gp-peek-frame { flex: 1; min-height: 0; width: 100%; border: none; background: var(--bg); display: block; }
  /* peek-embed mode: this page is loaded inside a Workspace tile — show only the
     peek overlay, stripped of the app chrome, filling the iframe. Zoom out the
     embedded peek so the FULL session (terminal + command bar + message box) is
     visible by default in a workspace pane instead of being cut off. */
  body.peek-embed { padding: 0 !important; overflow: hidden; zoom: 0.8; }
  body.peek-embed .chrome-tabs-bar,
  body.peek-embed .chrome-tab-frames,
  body.peek-embed .header-row,
  body.peek-embed .tab-bar-outer,
  body.peek-embed #session-view,
  body.peek-embed #peek-close-btn,
  body.peek-embed #peek-focus-btn { display: none !important; }
  body.peek-embed #peek-overlay { top: 0 !important; padding-top: 0 !important; }
  /* Tile chrome diet: the pane header already names the session, so the peek's
     own header (title/status/find) + task/dir rows are dead space at tile size */
  body.peek-embed .overlay-header,
  body.peek-embed #peek-task-row,
  body.peek-embed .peek-dir-bar { display: none !important; }
  /* General view-embed mode: ?embed=<view> loads the app inside a dock/grid panel
     showing a single view, stripped of the app chrome and filling the iframe. */
  body.embed { padding: 0 !important; margin: 0 !important; overflow: hidden; height: 100dvh; }
  body.embed .chrome-tabs-bar,
  body.embed .chrome-tab-frames,
  body.embed .header-row,
  body.embed .tab-bar-outer,
  body.embed #tag-filters,
  body.embed #offline-banner,
  body.embed #pinned-notes-home { display: none !important; }
  /* The JS sizes the active view to fill the iframe (position:fixed inset:0). */
  body.embed .embed-filled { position: fixed !important; inset: 0 !important; height: 100dvh !important;
    max-height: none !important; margin: 0 !important; z-index: 30; }
  .gp-body {
    flex: 1; overflow: auto; padding: 10px;
    font-family: "SF Mono","Fira Code","Cascadia Code",monospace;
    font-size: 0.76rem; line-height: 1.45; white-space: pre;
    -webkit-overflow-scrolling: touch; color: #c9d1d9;
    user-select: text; -webkit-user-select: text; cursor: text;
  }
  /* Note pane overrides */
  .gp-note-body {
    flex: 1; overflow: auto; padding: 0; display: flex; flex-direction: column;
    background: var(--card); white-space: normal;
  }
  .gp-note-body textarea {
    flex: 1; border: none; outline: none; resize: none;
    background: var(--card); color: var(--text);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.82rem; line-height: 1.6; padding: 8px 12px;
  }
  .gp-note-body .ql-editor { padding: 12px 14px; min-height: 100%; }
  .gp-note-body .ql-editor.ql-blank::before { color: var(--dim); }
  .gp-note-status { font-size: 0.68rem; color: var(--dim); padding: 4px 10px; border-top: 1px solid var(--border); background: var(--card); flex-shrink: 0; }
  /* Override dark terminal bg for note panes */
  .grid-stack-item:has(.gp-note-body) .grid-stack-item-content { background: var(--card); }
  /* Workspace terminal pane */
  .gp-term-body { flex: 1; min-height: 0; background: #0d1117; }
  .grid-stack-item:has(.gp-term-body) .grid-stack-item-content { background: #0d1117; }
  .gp-term-reconnect { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(13,17,23,0.85); z-index: 10; }
  .gp-term-reconnect button { padding: 6px 16px; background: var(--accent); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 0.8rem; }
  /* Note picker dropdown */
  .ws-note-dropdown { position: relative; }
  .ws-note-menu {
    display: none; position: absolute; top: 100%; left: 0; z-index: 999;
    background: var(--card); border: 1px solid var(--border); border-radius: 6px;
    min-width: 220px; max-height: 300px; overflow-y: auto; padding: 4px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4); margin-top: 4px;
  }
  .ws-note-menu.open { display: block; }
  .ws-note-menu button {
    display: block; width: 100%; text-align: left; padding: 7px 12px;
    background: none; border: none; color: var(--text); font-size: 0.78rem;
    cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ws-note-menu button:hover { background: rgba(88,166,255,0.1); }
  .ws-note-menu .ws-note-menu-new { color: var(--accent); font-weight: 500; border-bottom: 1px solid var(--border); }
  #gridstack-container .grid-stack-item-content {
    border: 1px solid var(--border); border-radius: 6px;
    overflow: hidden; display: flex; flex-direction: column;
    background: #010409;
  }
  #gridstack-container .ui-resizable-handle { opacity: 0.3; }
  #gridstack-container .ui-resizable-handle:hover { opacity: 0.8; }
  .gp-send {
    display: flex; flex-direction: column; gap: 0; padding: 8px 10px 10px;
    border-top: 1px solid var(--border); flex-shrink: 0;
    background: #161b22;
  }
  /* chips row inside workspace panes — same as session cards */
  .gp-send .chips { margin-bottom: 8px; }
  /* send row inside workspace panes — same as session cards */
  .gp-send .send-row { gap: 8px; }
  #tab-grid { display: none; }
  @media (min-width: 769px) { #tab-grid { display: block; } }

  /* Notes view */
  #notes-view { height: calc(100vh - 110px); }
  .notes-sidebar {
    width: 240px; min-width: 180px; border-right: 1px solid var(--border);
    display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0;
    background: var(--bg); transition: width 0.2s ease, min-width 0.2s ease, border 0.2s ease;
  }
  .notes-sidebar.collapsed { width: 0; min-width: 0; border-right: none; }
  .notes-sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px 6px; flex-shrink: 0;
  }
  .notes-sidebar-actions { display: flex; gap: 4px; align-items: center; }
  .notes-source-indicator {
    flex-shrink: 0; display: flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-top: 1px solid rgba(139,148,158,0.12);
    font-size: 0.7rem; color: var(--dim); cursor: pointer;
    overflow: hidden; white-space: nowrap;
  }
  .notes-source-indicator:hover { background: rgba(139,148,158,0.1); color: var(--text); }
  .notes-source-indicator svg { flex-shrink: 0; opacity: 0.7; }
  .notes-source-indicator #notes-source-name { overflow: hidden; text-overflow: ellipsis; }
  .notes-toggle-btn {
    background: transparent; border: none; color: var(--dim); cursor: pointer;
    padding: 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  }
  .notes-toggle-btn:hover { background: rgba(139,148,158,0.12); color: var(--text); }
  .notes-new-btn {
    background: transparent; border: none; color: var(--dim); cursor: pointer;
    padding: 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  }
  .notes-new-btn:hover { background: rgba(139,148,158,0.12); color: var(--text); }
  /* Expand button shown in editor header when sidebar is collapsed */
  .notes-expand-btn {
    background: transparent; border: none; color: var(--dim); cursor: pointer;
    padding: 4px; border-radius: 4px; display: none;
    align-items: center; justify-content: center; flex-shrink: 0;
  }
  .notes-expand-btn:hover { background: rgba(139,148,158,0.12); color: var(--text); }
  #notes-view.sidebar-collapsed .notes-expand-btn { display: flex; }
  .notes-search-wrap { padding: 4px 8px 8px; flex-shrink: 0; }
  .notes-list { flex: 1; overflow-y: auto; }
  .notes-trash-section { flex-shrink: 0; border-top: 1px solid var(--border); }
  .notes-trash-header {
    display: flex; align-items: center; gap: 6px; padding: 7px 12px;
    cursor: pointer; font-size: 0.78rem; color: var(--dim); user-select: none;
    transition: color 0.12s;
  }
  .notes-trash-header:hover { color: var(--text); }
  .notes-trash-chevron { font-size: 0.6rem; transition: transform 0.15s; }
  .notes-trash-chevron.open { transform: rotate(90deg); }
  .notes-trash-body { overflow: hidden; }
  .notes-trash-item {
    display: flex; align-items: center; gap: 6px; padding: 6px 12px;
    font-size: 0.78rem; color: var(--dim); border-bottom: 1px solid rgba(139,148,158,0.08);
  }
  .notes-trash-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .notes-trash-restore { background: none; border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px; font-size: 0.7rem; color: var(--dim); cursor: pointer; white-space: nowrap; }
  .notes-trash-restore:hover { border-color: var(--accent); color: var(--accent); }
  .notes-trash-del { background: none; border: none; color: var(--dim); cursor: pointer; padding: 2px 4px; border-radius: 3px; font-size: 0.75rem; opacity: 0.5; }
  .notes-trash-del:hover { color: var(--red,#f85149); opacity: 1; }
  /* Mobile: sidebar overlays full width */
  @media (max-width: 600px) {
    #notes-view { position: relative; }
    .notes-sidebar {
      position: absolute; top: 0; left: 0; bottom: 0; z-index: 10;
      width: 100% !important; min-width: 0 !important; border-right: none;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .notes-sidebar.collapsed {
      width: 100% !important; transform: translateX(-110%); opacity: 0; pointer-events: none;
    }
    .notes-editor-pane { width: 100%; }
    .notes-expand-btn { display: flex !important; }
    #notes-view.sidebar-collapsed .notes-expand-btn { display: flex; }
  }
  .notes-list-item {
    padding: 5px 12px; cursor: pointer;
    font-size: 0.82rem; color: var(--text); line-height: 1.4;
    transition: background 0.08s; touch-action: manipulation; user-select: none; -webkit-user-select: none;
    border-radius: 4px; margin: 1px 6px;
  }
  .notes-list-item:hover { background: rgba(139,148,158,0.08); }
  .notes-list-item.active { background: rgba(88,166,255,0.12); color: var(--accent); }
  .notes-list-item .nli-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .notes-list-item .nli-date { display: none; }
  .notes-list-empty { padding: 16px 12px; color: var(--dim); font-size: 0.8rem; text-align: center; }
  .notes-folder-hdr {
    display: flex; align-items: center; gap: 5px; padding: 6px 10px 4px;
    font-size: 0.72rem; font-weight: 600; color: var(--dim); cursor: pointer;
    user-select: none; text-transform: uppercase; letter-spacing: 0.05em;
    transition: color 0.12s;
  }
  .notes-folder-hdr:hover { color: var(--text); }
  .notes-folder-hdr:hover .notes-folder-add { opacity: 1; }
  .notes-folder-chevron { flex-shrink: 0; transition: transform 0.15s; }
  .notes-folder-chevron.open { transform: rotate(90deg); }
  .notes-folder-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .notes-folder-count { font-size: 0.68rem; color: var(--dim); flex-shrink: 0; }
  .notes-folder-add {
    background: none; border: none; color: var(--dim); cursor: pointer; padding: 1px 3px;
    border-radius: 3px; display: flex; align-items: center; opacity: 0; transition: opacity 0.12s;
    flex-shrink: 0;
  }
  .notes-folder-add:hover { color: var(--accent); background: rgba(88,166,255,0.1); }
  .notes-folder-items .notes-list-item { padding-left: 24px; }
  .notes-folder-new-wrap { padding: 6px 10px; border-bottom: 1px solid rgba(139,148,158,0.1); }
  .notes-folder-input {
    width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--accent);
    border-radius: 5px; padding: 5px 8px; font-size: 0.8rem; color: var(--text); outline: none;
  }
  /* Drag-and-drop */
  .notes-list-item .nli-drag { width: 12px; flex-shrink: 0; color: transparent; display: flex; align-items: center; cursor: grab; }
  .notes-list-item:hover .nli-drag { color: var(--dim); }
  body.notes-dragging, body.notes-dragging * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
  .notes-list-item.notes-item-dragging { opacity: 0.35; background: rgba(88,166,255,0.06) !important; }
  .notes-folder-hdr.notes-drop-target { background: rgba(88,166,255,0.13); border-radius: 6px; color: var(--accent); outline: 2px dashed var(--accent); outline-offset: -2px; }
  .notes-root-drop { min-height: 6px; transition: min-height 0.15s, background 0.15s; border-radius: 5px; margin: 2px 6px; }
  .notes-root-drop.notes-drop-target { min-height: 32px; background: rgba(88,166,255,0.1); outline: 2px dashed var(--accent); outline-offset: -2px; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; color: var(--accent); }
  .notes-root-drop.notes-drop-target::after { content: "Move to root"; }
  .notes-editor-pane {
    flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative;
  }
  .notes-editor-header {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px 8px;
    flex-shrink: 0;
  }
  .notes-title-input {
    flex: 1; background: transparent; border: none; outline: none;
    color: var(--text); font-size: 1.15rem; font-weight: 700;
    font-family: inherit; letter-spacing: -0.01em;
  }
  .notes-delete-btn {
    background: transparent; border: none; color: var(--dim); cursor: pointer;
    padding: 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
    transition: background 0.12s, color 0.12s;
  }
  .notes-delete-btn:hover { background: rgba(248,81,73,0.12); color: var(--red,#f85149); }
  .notes-delete-btn.confirming { background: var(--red,#f85149); color: #fff; border-radius: 4px; padding: 3px 8px; font-size: 0.75rem; font-weight: 600; }
  /* Markdown textarea editor fills pane */
  .notes-editor-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
  .notes-editor-textarea {
    flex: 1; width: 100%; border: none; outline: none; resize: none;
    background: var(--bg); color: var(--text); font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.88rem; line-height: 1.7; padding: 12px 24px 80px;
    max-width: 740px; margin: 0 auto; box-sizing: border-box;
    tab-size: 2;
  }
  .notes-editor-textarea::placeholder { color: var(--dim); }
  .notes-list-item.pinned { border-left: 2px solid var(--accent); }
  /* Pin button in editor header */
  .notes-pin-btn {
    background: none; border: none; padding: 4px; border-radius: 4px; cursor: pointer;
    color: var(--dim); display: flex; align-items: center; justify-content: center;
    transition: background 0.12s, color 0.12s;
  }
  .notes-pin-btn:hover { background: rgba(139,148,158,0.12); color: var(--text); }
  .notes-pin-btn.pinned { color: var(--accent); }
  /* Pinned notes on home screen */
  .pinned-notes-home { padding: 0 12px; display: flex; flex-direction: column; gap: 8px; }
  .pinned-notes-home:empty { display: none; }
  .pinned-note-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 14px; cursor: pointer; position: relative;
    transition: border-color 0.15s;
  }
  .pinned-note-card:hover { border-color: var(--accent); }
  .pinned-note-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  }
  .pinned-note-header svg { color: var(--accent); flex-shrink: 0; }
  .pinned-note-title {
    font-weight: 600; font-size: 0.85rem; color: var(--text); flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .pinned-note-unpin {
    background: none; border: none; color: var(--dim); cursor: pointer; padding: 4px;
    border-radius: 4px; display: flex; align-items: center; opacity: 0; transition: opacity 0.15s;
  }
  .pinned-note-card:hover .pinned-note-unpin { opacity: 1; }
  .pinned-note-unpin:hover { color: var(--text); background: rgba(139,148,158,0.12); }
  .pinned-note-body {
    font-size: 0.8rem; color: var(--dim); max-height: 120px; overflow: hidden;
    line-height: 1.5; position: relative;
  }
  .pinned-note-body.md-content h1, .pinned-note-body.md-content h2, .pinned-note-body.md-content h3 { display: none; }
  .pinned-note-body.md-content ul, .pinned-note-body.md-content ol { padding-left: 18px; margin: 2px 0; }
  .pinned-note-body.md-content p { margin: 2px 0; }
  .pinned-note-body::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 30px;
    background: linear-gradient(transparent, var(--card));
  }
  @media (max-width: 600px) {
    .pinned-notes-home { padding: 0 8px; }
    .pinned-note-body { max-height: 80px; }
  }
  .notes-empty-state {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
  }
  /* Edit / Preview mode tabs */
  .notes-mode-tabs {
    display: flex; gap: 2px; padding: 3px 16px; flex-shrink: 0;
  }
  .notes-mode-tab {
    background: none; border: none; padding: 3px 10px; border-radius: 4px;
    font-size: 0.72rem; cursor: pointer; color: var(--dim); font-weight: 500;
    transition: background 0.1s, color 0.1s; text-transform: uppercase; letter-spacing: 0.04em;
  }
  .notes-mode-tab.active { background: rgba(88,166,255,0.12); color: var(--accent); }
  .notes-mode-tab:not(.active):hover { background: rgba(139,148,158,0.08); color: var(--text); }
  /* Preview pane — matches .ql-editor padding/max-width so content
     stays in the exact same position when toggling Edit ↔ Preview */
  .notes-preview {
    flex: 1; overflow-y: auto; padding: 12px 24px 80px; background: var(--bg);
    display: none; color: var(--text); font-size: 0.92rem; line-height: 1.75;
    box-sizing: border-box; cursor: text; width: 100%;
  }
  .notes-preview > * { max-width: 740px; margin-left: auto; margin-right: auto; }
  .notes-preview > h1:first-child, .notes-preview > h2:first-child { margin-top: 0; }
  .notes-preview.active { display: block; }
  .notes-preview > *:first-child { margin-top: 0; }
  .notes-preview h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 14px; }
  .notes-preview h2 { font-size: 1.15rem; font-weight: 600; margin: 20px 0 8px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
  .notes-preview h3 { font-size: 1rem; font-weight: 600; margin: 14px 0 6px; }
  .notes-preview blockquote { border-left: 3px solid var(--accent); padding: 2px 0 2px 14px; color: var(--dim); margin: 10px 0; }
  .notes-preview pre { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; overflow-x: auto; font-size: 0.82rem; margin: 10px 0; }
  .notes-preview code { background: var(--card); border-radius: 3px; padding: 1px 5px; font-size: 0.85em; }
  .notes-preview pre code { background: none; padding: 0; }
  .notes-preview a { color: var(--accent); }
  .notes-preview ul, .notes-preview ol { padding-left: 22px; margin: 6px 0; }
  .notes-preview li { margin: 3px 0; }
  /* Checklist items */
  .notes-preview li[data-list="checked"],
  .notes-preview li[data-list="unchecked"] { list-style: none; margin-left: -4px; padding-left: 4px; display: flex; align-items: baseline; gap: 8px; }
  .notes-preview li[data-list="checked"]::before,
  .notes-preview li[data-list="unchecked"]::before {
    content: ''; display: inline-block; flex-shrink: 0;
    width: 14px; height: 14px; border: 1.5px solid var(--dim);
    border-radius: 3px; background: transparent; margin-top: 2px;
    transition: background 0.1s, border-color 0.1s;
  }
  .notes-preview li[data-list="checked"]::before {
    background: var(--accent); border-color: var(--accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23000' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 10px; background-repeat: no-repeat; background-position: center;
  }
  .notes-preview li[data-list="checked"] > *:last-child { text-decoration: line-through; color: var(--dim); }
  .notes-preview p { margin: 0 0 10px; }
  .notes-preview p:last-child { margin-bottom: 0; }
  .notes-preview mark.search-hit { background: rgba(250,204,21,0.35); border-radius: 2px; padding: 0 1px; }
  .notes-preview mark.search-hit.current { background: rgba(250,204,21,0.7); outline: 2px solid rgba(250,204,21,0.9); }
  /* Mobile notes improvements — Bear/iA Writer inspired */
  @media (max-width: 600px) {
    #notes-view { height: calc(100dvh - 122px - var(--chrome-tab-h, 0px)); }
    /* Hide mode tabs entirely on mobile — preview is tap-to-edit */
    .notes-mode-tabs { display: none !important; }
    .notes-editor-header { padding: 10px 12px; min-height: 48px; }
    /* 16px minimum on inputs prevents iOS Safari auto-zoom on focus */
    .notes-title-input { font-size: 16px; }
    .notes-search-wrap input { font-size: 16px !important; padding: 10px 12px; }
    .notes-delete-btn, .notes-pin-btn { min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
    .notes-list-item { padding: 14px 14px; min-height: 56px; border-radius: 6px; }
    .notes-list-item .nli-title { font-size: 0.92rem; }
    .notes-list-item .nli-date { font-size: 0.74rem; }
    .notes-list { padding: 4px 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    .notes-editor-textarea { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; font-size: 16px; padding: 12px 16px 96px; }
    .notes-preview { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    .notes-list-item, .notes-delete-btn, .notes-pin-btn, .notes-new-btn, .notes-toggle-btn, .notes-expand-btn { touch-action: manipulation; }
    .notes-preview { padding: 16px 16px 96px; font-size: 16px; }
    .notes-new-btn { width: 36px; height: 36px; font-size: 1.3rem; }
  }

  /* ── Gmail / Email view ─────────────────────────────────────────────────── */
  #email-view { flex-direction: row !important; }
  #email-view.gmail-sidebar-collapsed .gmail-sidebar { width: 0; min-width: 0; border-right: none; overflow: hidden; }
  #email-view.gmail-sidebar-collapsed #gmail-expand-btn { display: flex !important; }
  .gmail-sidebar {
    width: 200px; min-width: 160px; border-right: 1px solid var(--border);
    display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0;
    background: var(--card); transition: width 0.2s ease, min-width 0.2s ease, border 0.2s ease;
  }
  .gmail-sidebar.collapsed { width: 0; min-width: 0; border-right: none; }
  .gmail-sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px 6px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  }
  .gmail-accounts-list { flex-shrink: 0; border-bottom: 1px solid var(--border); }
  .gmail-account-item {
    display: flex; align-items: center; gap: 8px; padding: 7px 12px;
    cursor: pointer; font-size: 0.8rem; color: var(--text);
    border-bottom: 1px solid rgba(139,148,158,0.08);
    transition: background 0.1s; touch-action: manipulation; user-select: none;
  }
  .gmail-account-item:hover { background: rgba(139,148,158,0.08); }
  .gmail-account-item.active { background: rgba(88,166,255,0.12); color: var(--accent); font-weight: 500; }
  .gmail-account-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
  }
  .gmail-labels-list { flex: 1; overflow-y: auto; }
  .gmail-label-item {
    display: flex; align-items: center; gap: 8px; padding: 6px 12px;
    cursor: pointer; font-size: 0.78rem; color: var(--text);
    transition: background 0.1s; touch-action: manipulation; user-select: none;
  }
  .gmail-label-item:hover { background: rgba(139,148,158,0.08); }
  .gmail-label-item.active { background: rgba(88,166,255,0.12); color: var(--accent); font-weight: 500; }
  .gmail-label-icon { width: 14px; text-align: center; flex-shrink: 0; font-size: 0.8rem; }
  .gmail-list-pane {
    width: 280px; min-width: 220px; flex-shrink: 0; display: flex;
    flex-direction: column; border-right: 1px solid var(--border); overflow: hidden;
  }
  .gmail-list-toolbar {
    display: flex; align-items: center; gap: 6px; padding: 6px 10px;
    border-bottom: 1px solid var(--border); flex-shrink: 0;
  }
  .gmail-search-input {
    flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    padding: 4px 8px; font-size: 0.78rem; color: var(--text); outline: none;
  }
  .gmail-search-input:focus { border-color: var(--accent); }
  .gmail-messages-list { flex: 1; overflow-y: auto; }
  .gmail-msg-item {
    padding: 9px 12px; cursor: pointer; border-bottom: 1px solid rgba(139,148,158,0.08);
    transition: background 0.1s; touch-action: manipulation; user-select: none;
  }
  .gmail-msg-item:hover { background: rgba(139,148,158,0.07); }
  .gmail-msg-item.active { background: rgba(88,166,255,0.1); }
  .gmail-msg-from { font-size: 0.8rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gmail-msg-item.unread .gmail-msg-from { color: var(--accent); }
  .gmail-msg-subject { font-size: 0.75rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
  .gmail-msg-snippet { font-size: 0.7rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
  .gmail-msg-date { font-size: 0.68rem; color: var(--dim); flex-shrink: 0; margin-left: auto; }
  .gmail-msg-row1 { display: flex; align-items: center; gap: 6px; }
  .gmail-unread-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
  .gmail-detail-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
  .gmail-detail-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .gmail-thread-subject {
    font-size: 1rem; font-weight: 700; padding: 12px 16px 8px;
    border-bottom: 1px solid var(--border); flex-shrink: 0; line-height: 1.4;
  }
  .gmail-thread-messages { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
  .gmail-msg-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 8px;
    overflow: hidden;
  }
  .gmail-msg-card-header {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    cursor: pointer; border-bottom: 1px solid var(--border-subtle, rgba(128,128,128,.1));
  }
  .gmail-msg-card-from { font-size: 0.82rem; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gmail-msg-card-date { font-size: 0.7rem; color: var(--dim); flex-shrink: 0; }
  .gmail-msg-card-body { padding: 12px 14px; font-size: 0.82rem; line-height: 1.6; overflow-x: auto; }
  .gmail-msg-card-body iframe { width: 100%; border: none; background: white; border-radius: 4px; }
  .gmail-msg-card.collapsed .gmail-msg-card-body { display: none; }
  .gmail-reply-box { padding: 10px 14px; border-top: 1px solid var(--border); flex-shrink: 0; background: var(--bg); }
  .gmail-reply-textarea {
    width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid var(--border);
    border-radius: 6px; padding: 8px 10px; font-size: 0.82rem; color: var(--text);
    resize: vertical; min-height: 80px; font-family: inherit; outline: none;
  }
  .gmail-reply-textarea:focus { border-color: var(--accent); }
  .gmail-detail-actions { display: flex; gap: 6px; padding: 8px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
  /* Mobile gmail layout */
  @media (max-width: 768px) {
    #email-view { position: relative; }
    .gmail-sidebar { position: absolute; left: 0; top: 0; bottom: 0; z-index: 10; width: 200px !important; box-shadow: 2px 0 8px rgba(0,0,0,0.2); }
    .gmail-sidebar.collapsed { width: 0 !important; box-shadow: none; }
    .gmail-list-pane { width: 100%; min-width: 0; border-right: none; }
    .gmail-detail-pane { display: none; position: absolute; inset: 0; z-index: 5; background: var(--bg); }
    .gmail-detail-pane.mobile-open { display: flex; }
  }
  @media (max-width: 480px) {
    .gmail-list-pane { min-width: 0; width: 100%; }
    .gmail-thread-subject { font-size: 0.9rem; padding: 10px 12px 6px; }
    .gmail-thread-messages { padding: 8px 10px; }
    .gmail-msg-card-body { font-size: 0.78rem; padding: 10px 12px; }
  }


  /* ── Map view ─────────────────────────────────────────────────────────────── */
  #map-view { height: calc(100vh - 110px); display: flex; flex-direction: row; overflow: hidden; position: relative; }
  .map-sidebar { width: 260px; min-width: 220px; border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; background: var(--card); transition: transform 0.25s ease; }
  .map-sidebar-hdr { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .map-sidebar-hdr-title { font-weight: 600; font-size: 0.85rem; }
  .map-sidebar-hdr-btns { display: flex; gap: 4px; align-items: center; }
  .map-sidebar-section { border-bottom: 1px solid var(--border); padding: 8px 10px; flex-shrink: 0; }
  .map-section-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 0.72rem; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: 0.03em; }
  .map-tag-chips { display: flex; flex-wrap: wrap; gap: 4px; }
  .map-tag-chip { padding: 2px 8px; border-radius: 12px; font-size: 0.72rem; font-weight: 500; cursor: pointer; border: 1px solid; background: transparent; transition: all 0.15s; white-space: nowrap; color: var(--dim); border-color: var(--border); }
  .map-tag-chip:hover { opacity: 0.85; }
  .map-tag-chip.all-active { background: var(--accent); color: #fff; border-color: transparent; }
  .map-tag-chip.tag-active { color: #fff; border-color: transparent; }
  .map-search-section { padding: 8px 10px; flex-shrink: 0; border-bottom: 1px solid var(--border); }
  .map-search-section input { width: 100%; box-sizing: border-box; padding: 5px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 0.8rem; outline: none; }
  .map-search-section input:focus { border-color: var(--accent); }
  .map-pin-list { flex: 1; overflow-y: auto; padding: 4px 0; }
  .map-pin-item { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; cursor: pointer; transition: background 0.1s; }
  .map-pin-item:hover { background: rgba(255,255,255,0.04); }
  .map-pin-item.active { background: rgba(88,166,255,0.1); }
  .map-pin-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; border: 1.5px solid rgba(255,255,255,0.25); }
  .map-pin-info { flex: 1; min-width: 0; }
  .map-pin-name { font-size: 0.82rem; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .map-pin-tagrow { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
  .map-pin-tag { font-size: 0.68rem; padding: 1px 5px; border-radius: 8px; border: 1px solid; font-weight: 500; }
  .map-pin-desc { font-size: 0.73rem; color: var(--dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .map-pin-edit-btn { opacity: 0; background: none; border: none; cursor: pointer; font-size: 0.75rem; padding: 2px 4px; flex-shrink: 0; color: var(--dim); transition: opacity 0.1s; line-height: 1; }
  .map-pin-item:hover .map-pin-edit-btn { opacity: 1; }
  .map-empty { padding: 20px 12px; text-align: center; font-size: 0.8rem; color: var(--dim); line-height: 1.5; }
  .map-open-btn { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1001; background: var(--card); border: 1px solid var(--border); border-left: none; color: var(--text); cursor: pointer; padding: 10px 6px; font-size: 0.85rem; border-radius: 0 6px 6px 0; display: none; box-shadow: 2px 0 8px rgba(0,0,0,0.3); }
  #map-view.sidebar-collapsed .map-open-btn { display: flex; align-items: center; justify-content: center; }
  .map-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; min-width: 0; }
  #map-container { flex: 1; z-index: 1; background: var(--bg); }
  .map-drop-hint { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.85); color: #fff; padding: 7px 18px; border-radius: 20px; font-size: 0.8rem; z-index: 1002; pointer-events: none; display: none; white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
  .map-pinbar { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .map-pinbar-spacer { flex: 1; }
  .map-sort-select { font-size: 0.72rem; padding: 2px 6px; border: 1px solid var(--border); border-radius: 5px; background: var(--card); color: var(--text); cursor: pointer; }
  .map-pinbar-btn { font-size: 0.85rem; line-height: 1; padding: 3px 8px; border: 1px solid var(--border); border-radius: 5px; background: transparent; color: var(--text); cursor: pointer; }
  .map-pinbar-btn:hover { border-color: var(--accent); color: var(--accent); }
  .map-pin-dist { font-size: 0.68rem; color: var(--dim); font-weight: 400; white-space: nowrap; }
  .map-toolbar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--card); border-top: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap; }
  .map-toolbar .map-base-select { width: auto; font-size: 0.78rem; padding: 3px 6px; }
  .map-coords { font-size: 0.71rem; color: var(--dim); font-family: monospace; margin-left: auto; }
  .map-drop-btn.dropping { background: var(--accent) !important; color: #fff !important; border-color: transparent !important; }
  .map-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 9100; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
  .map-modal-box { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; width: 360px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); max-height: min(90dvh, calc(100dvh - 32px)); overflow-y: auto; }
  .map-modal-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 2px; }
  .map-modal-input { width: 100%; padding: 7px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 0.85rem; outline: none; font-family: inherit; box-sizing: border-box; }
  .map-modal-input:focus { border-color: var(--accent); }
  .map-modal-textarea { width: 100%; padding: 7px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 0.85rem; outline: none; font-family: inherit; box-sizing: border-box; resize: vertical; min-height: 60px; }
  .map-modal-textarea:focus { border-color: var(--accent); }
  .map-modal-hint { font-size: 0.75rem; color: var(--accent); min-height: 1em; }
  .map-modal-row { display: flex; gap: 8px; }
  .map-modal-row .map-modal-input { flex: 1; min-width: 0; }
  .map-modal-label { font-size: 0.75rem; color: var(--dim); margin-bottom: -4px; }
  .map-modal-tags-row { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }
  .map-tag-check { display: flex; align-items: center; gap: 5px; font-size: 0.78rem; cursor: pointer; padding: 3px 9px; border-radius: 10px; border: 1px solid var(--border); transition: all 0.12s; user-select: none; }
  .map-tag-check input { display: none; }
  .map-tag-check.checked { color: #fff; border-color: transparent; }
  .map-tag-check .map-tag-swatch { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .map-tag-color-row { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--text); }
  .map-tag-color-row input[type=color] { width: 36px; height: 28px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; background: none; padding: 2px; }
  .map-modal-actions { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; align-items: center; }
  .map-btn-danger { background: var(--red) !important; color: #fff !important; border-color: transparent !important; }
  .map-btn-danger:hover { opacity: 0.85; }
  /* Geocoder search — lives inside sidebar, absolutely positioned over map on desktop */
  .map-geocoder-wrap { position: absolute; top: 12px; left: calc(50% + 130px); transform: translateX(-50%); z-index: 1003; width: min(420px, calc(100% - 292px)); }
  #map-view.sidebar-collapsed .map-geocoder-wrap { left: 50%; width: min(420px, calc(100% - 32px)); }
  .map-sidebar { overflow: visible; }
  .map-geocoder-input-row { display: flex; background: var(--card); border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.4); overflow: hidden; }
  .map-geocoder-input { flex: 1; padding: 9px 16px; background: transparent; border: none; color: var(--text); font-size: 0.88rem; outline: none; font-family: inherit; min-width: 0; }
  .map-geocoder-input::placeholder { color: var(--dim); }
  .map-geocoder-clear { background: none; border: none; color: var(--dim); cursor: pointer; padding: 0 12px; font-size: 1rem; display: none; }
  .map-geocoder-clear:hover { color: var(--text); }
  .map-geocoder-results { background: var(--card); border: 1px solid var(--border); border-radius: 12px; margin-top: 6px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.5); display: none; }
  .map-geocoder-result { padding: 9px 14px; cursor: pointer; font-size: 0.83rem; color: var(--text); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; transition: background 0.1s; }
  .map-geocoder-result:last-child { border-bottom: none; }
  .map-geocoder-result:hover, .map-geocoder-result.selected { background: rgba(255,255,255,0.06); }
  .map-geocoder-result-icon { font-size: 0.9rem; flex-shrink: 0; }
  .map-geocoder-result-text { flex: 1; min-width: 0; }
  .map-geocoder-result-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .map-geocoder-result-addr { font-size: 0.74rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .map-geocoder-result-save { background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 3px 9px; font-size: 0.72rem; cursor: pointer; flex-shrink: 0; white-space: nowrap; font-family: inherit; }
  .map-geocoder-result-save:hover { opacity: 0.85; }
  .map-geocoder-loading { padding: 10px 14px; font-size: 0.82rem; color: var(--dim); text-align: center; }
  .map-geocoder-attribution { padding: 4px 14px; font-size: 0.7rem; color: var(--dim); text-align: right; border-top: 1px solid var(--border); }
  .map-geocoder-preview { width: 72px; height: 52px; object-fit: cover; border-radius: 6px; flex-shrink: 0; border: 1px solid var(--border); }
  .map-geocoder-gmaps-link { font-size: 0.7rem; color: var(--accent); text-decoration: none; display: inline-block; margin-top: 2px; }
  .map-geocoder-gmaps-link:hover { text-decoration: underline; }
  @media (max-width: 600px) {
    #map-view { height: calc(100dvh - 122px - var(--chrome-tab-h, 0px)); background: var(--bg); }
    .map-sidebar { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1005; width: 100% !important; min-width: 0 !important; box-shadow: none; overflow: hidden; }
    .map-sidebar.hidden { transform: translateX(-110%); }
    .map-open-btn { display: flex; }
    .map-toolbar { gap: 4px; padding: 5px 8px; }
    .map-toolbar .map-base-select, #map-pins-btn { min-height: 44px; }
    /* On mobile: geocoder flows inside sidebar, not floating */
    .map-geocoder-wrap { position: relative !important; top: auto !important; left: auto !important; transform: none !important; width: 100% !important; padding: 8px 10px; box-sizing: border-box; z-index: auto; }
    .map-geocoder-wrap .map-geocoder-input-row { box-shadow: none; border-radius: 8px; }
    .map-geocoder-results { position: fixed; left: 0; right: 0; z-index: 2000; max-height: 50vh; overflow-y: auto; border-radius: 0 0 12px 12px; margin-top: 0; }
    #map-view.sidebar-collapsed .map-geocoder-wrap { display: none; }
  }

  /* ── Cost / observability view ─────────────────────────────────────────────── */
  .cost-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 18px; }
  .cost-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
  .cost-card-v { font-size: 1.4rem; font-weight: 700; color: var(--text); line-height: 1.1; }
  .cost-card-l { font-size: 0.68rem; color: var(--dim); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.03em; }
  .cost-section { margin-bottom: 20px; }
  .cost-section-h { font-size: 0.82rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
  .cost-row { padding: 6px 0; }
  .cost-row[onclick]:hover .cost-row-label { color: var(--accent); }
  .cost-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .cost-row-label { font-size: 0.83rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cost-row-cost { font-size: 0.83rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; flex-shrink: 0; }
  .cost-bar-track { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; margin: 4px 0 2px; }
  .cost-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--green)); border-radius: 3px; }
  .cost-row-sub { font-size: 0.68rem; color: var(--dim); }
  .cost-days-chart { display: flex; align-items: flex-end; gap: 2px; height: 70px; }
  .cost-day { flex: 1; height: 100%; display: flex; align-items: flex-end; }
  .cost-day-fill { width: 100%; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 3px; opacity: 0.8; }
  .cost-day-labels { display: flex; justify-content: space-between; font-size: 0.62rem; color: var(--dim); margin-top: 3px; }

  /* ── Metrics view ──────────────────────────────────────────────────────────── */
  #metrics-view { height: calc(100dvh - 110px); display: flex; flex-direction: row; overflow: hidden; position: relative; }
  .metrics-sidebar { width: 220px; min-width: 180px; border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; background: var(--card); transition: transform 0.2s ease, opacity 0.2s ease; }
  .metrics-sidebar.collapsed { transform: translateX(-110%); opacity: 0; pointer-events: none; position: absolute; }
  .metrics-sidebar-hdr { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .metrics-session-list { flex: 1; overflow-y: auto; padding: 4px 0; }
  .metrics-session-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; transition: background 0.1s; border-bottom: 1px solid rgba(255,255,255,0.03); }
  .metrics-session-item:hover { background: rgba(255,255,255,0.04); }
  .metrics-session-item.active { background: rgba(88,166,255,0.1); }
  .metrics-session-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
  .metrics-session-info { flex: 1; min-width: 0; }
  .metrics-session-name { font-size: 0.82rem; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .metrics-session-sub { font-size: 0.71rem; color: var(--dim); margin-top: 1px; }
  .metrics-main { flex: 1; overflow-y: auto; padding: 16px; min-width: 0; position: relative; }
  .metrics-expand-btn { display: none; position: absolute; top: 10px; left: 10px; z-index: 2; background: transparent; border: none; color: var(--dim); cursor: pointer; padding: 4px; border-radius: 4px; align-items: center; justify-content: center; }
  .metrics-expand-btn:hover { background: rgba(139,148,158,0.12); color: var(--text); }
  #metrics-view.sidebar-collapsed .metrics-expand-btn { display: flex; }
  .metrics-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
  .metrics-hdr-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .metrics-hdr-title { font-weight: 700; font-size: 1rem; }
  .metrics-hostname { font-size: 0.8rem; color: var(--dim); font-family: monospace; }
  .metrics-uptime { font-size: 0.78rem; color: var(--dim); background: var(--hover); border-radius: 4px; padding: 2px 7px; }
  .metrics-no-psutil { background: rgba(249,115,22,0.08); border: 1px solid rgba(249,115,22,0.2); border-radius: 8px; padding: 10px 14px; font-size: 0.8rem; color: var(--text); margin-bottom: 16px; line-height: 1.5; }
  .metrics-no-psutil code { font-size: 0.82rem; color: #f97316; }
  .metrics-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; margin-bottom: 20px; }
  .metrics-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
  .metrics-card-title { font-size: 0.68rem; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
  .metrics-card-value { font-size: 1.45rem; font-weight: 700; color: var(--text); line-height: 1; margin-bottom: 3px; }
  .metrics-card-value span { font-size: 0.65em; font-weight: 400; color: var(--dim); }
  .metrics-card-sub { font-size: 0.71rem; color: var(--dim); margin-bottom: 8px; }
  .metrics-gauge { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
  .metrics-gauge-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
  .metrics-gauge-fill.low { background: #3fb950; }
  .metrics-gauge-fill.mid { background: #f0a742; }
  .metrics-gauge-fill.high { background: #f85149; }
  .metrics-section-title { font-size: 0.7rem; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
  /* Metrics sub-tabs (System / Disk Cleanup) */
  .metrics-modebar { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
  .metrics-modebtn { background: var(--card); border: 1px solid var(--border); color: var(--dim); border-radius: 7px; padding: 6px 14px; font-size: 0.8rem; font-weight: 600; cursor: pointer; min-height: 34px; }
  .metrics-modebtn.active { color: var(--text); border-color: var(--accent, #58a6ff); background: rgba(88,166,255,0.10); }

  /* Disk Cleanup (reclaim) */
  .reclaim-empty { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 22px; }
  .reclaim-progress { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
  .reclaim-spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent, #58a6ff); border-radius: 50%; animation: reclaim-spin 0.8s linear infinite; flex-shrink: 0; margin-top: 2px; }
  @keyframes reclaim-spin { to { transform: rotate(360deg); } }
  .reclaim-curpath { font-family: var(--mono, monospace); font-size: 0.68rem; color: var(--dim); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .reclaim-warn { border: 1px solid var(--yellow, #e3b341); background: rgba(227,179,65,0.08); border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; font-size: 0.82rem; }
  .reclaim-code { display: block; margin-top: 6px; font-family: var(--mono, monospace); font-size: 0.74rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px; user-select: all; overflow-x: auto; }
  .reclaim-catcard { cursor: pointer; transition: border-color 0.12s ease; }
  .reclaim-catcard:hover { border-color: var(--accent, #58a6ff); }
  .reclaim-catcard.active { border-color: var(--accent, #58a6ff); background: rgba(88,166,255,0.08); }
  .reclaim-mapbar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
  .reclaim-mappath { font-family: var(--mono, monospace); font-size: 0.74rem; color: var(--text); word-break: break-all; flex: 1; min-width: 0; }
  .reclaim-map { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--card); }
  .reclaim-map .tm-cell { cursor: pointer; }
  .reclaim-map .tm-cell:hover rect { fill-opacity: 1; }
  .reclaim-legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 4px; font-size: 0.68rem; color: var(--dim); }
  .reclaim-legend-item { display: inline-flex; align-items: center; gap: 4px; }
  .reclaim-legend-item i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
  .reclaim-actionbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--card); border: 1px solid var(--accent, #58a6ff); border-radius: 8px; padding: 9px 12px; margin-bottom: 10px; font-size: 0.82rem; flex-wrap: wrap; }
  .reclaim-danger { border-color: var(--red, #f85149) !important; color: var(--red, #f85149) !important; }
  .reclaim-minibtn { font-size: 0.7rem !important; padding: 3px 9px !important; margin-left: 8px; text-transform: none; letter-spacing: 0; font-weight: 500; min-height: 28px; }
  .reclaim-upbtn { font-size: 0.74rem; padding: 4px 10px; min-height: 32px; }
  .reclaim-skips { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 16px; font-size: 0.78rem; }
  .reclaim-skip-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; flex-wrap: wrap; }
  .reclaim-skip-row code { font-family: var(--mono, monospace); font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; }
  .reclaim-skip-reason { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.04em; border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--dim); flex-shrink: 0; }
  .reclaim-skip-reason.bad { border-color: var(--yellow, #e3b341); color: var(--yellow, #e3b341); }
  .reclaim-skip-why { color: var(--dim); font-size: 0.72rem; flex: 1; min-width: 0; }
  .metrics-table td input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; }

  .metrics-load-row { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
  .metrics-load-block { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 16px; text-align: center; min-width: 72px; }
  .metrics-load-val { font-size: 1.05rem; font-weight: 700; line-height: 1; }
  .metrics-load-lbl { font-size: 0.65rem; color: var(--dim); margin-top: 3px; }
  .metrics-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 20px; }
  .metrics-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
  .metrics-table th { padding: 8px 12px; text-align: left; font-size: 0.68rem; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: 0.05em; background: var(--card); border-bottom: 1px solid var(--border); white-space: nowrap; }
  .metrics-table td { padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text); white-space: nowrap; }
  .metrics-table tr:last-child td { border-bottom: none; }
  .metrics-table tr:hover td { background: rgba(255,255,255,0.03); cursor: pointer; }
  .metrics-table tr.row-selected td { background: rgba(88,166,255,0.08); }
  .metrics-mini-bar { display: inline-block; width: 50px; height: 4px; background: var(--border); border-radius: 2px; vertical-align: middle; margin-left: 4px; overflow: hidden; }
  .metrics-mini-bar-fill { height: 100%; border-radius: 2px; }
  .metrics-speedtest { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 20px; }
  .metrics-speedtest-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
  .metrics-speedtest-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; text-align: center; }
  .metrics-speedtest-label { font-size: 0.65rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }
  .metrics-speedtest-value { font-size: 1.7rem; font-weight: 700; color: var(--accent); margin-top: 4px; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .metrics-speedtest-sub { font-size: 0.68rem; color: var(--dim); margin-top: 2px; }
  .metrics-speedtest-bar { width: 100%; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
  .metrics-speedtest-bar-fill { height: 100%; background: linear-gradient(90deg, #58a6ff, #3fb950); width: 0%; transition: width 0.2s ease; }
  .metrics-speedtest-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .metrics-speedtest-status { font-size: 0.78rem; color: var(--dim); }
  @media (max-width: 600px) {
    #metrics-view { height: calc(100dvh - 122px - var(--chrome-tab-h, 0px)); position: relative; }
    .metrics-sidebar { position: absolute; top: 0; left: 0; bottom: 0; z-index: 10; width: 100% !important; min-width: 0 !important; border-right: none; }
    .metrics-sidebar.collapsed { width: 100% !important; opacity: 0; pointer-events: none; position: absolute; }
    .metrics-main { width: 100%; padding: 40px 12px 12px; }
    .metrics-cards { grid-template-columns: repeat(2, 1fr); }
    .metrics-speedtest-cards { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .metrics-speedtest-value { font-size: 1.2rem; }
    .metrics-expand-btn { display: flex; }
    /* Disk Cleanup at phone width: the treemap needs real height to stay
       readable, and the action bar must not trap its buttons off-screen. */
    .metrics-modebtn { flex: 1; min-width: 0; min-height: 44px; }
    /* No fixed svg height here: the map is laid out at its real pixel size in
       _reclaimRender, so a CSS height that disagreed with the viewBox is what
       produced the letterboxed band at 390px. */
    .reclaim-actionbar { flex-direction: column; align-items: stretch; gap: 8px; }
    .reclaim-actionbar button { width: 100%; min-height: 44px; }
    .reclaim-legend { gap: 7px; }
    /* 44px on EVERY control in this tab, not just the ones in the action bar.
       Measured at 390px: Rescan came out 40px and the treemap "up" button 32px,
       both under the touch-target floor in .claude/rules/css-mobile.md. The
       inline padding these carry wins over a class rule, so the floor is set
       here on the container rather than per-button. */
    #reclaim-content button, .reclaim-minibtn, .reclaim-upbtn { min-height: 44px; }
  }

  /* ── Graph / Mind Map ── */
  #graph-view { height: calc(100vh - 110px); display: flex; flex-direction: row; overflow: hidden; background: var(--bg); }
  .graph-sidebar {
    width: 240px; min-width: 180px; border-right: 1px solid var(--border);
    display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0;
    background: var(--card); transition: width 0.2s ease, min-width 0.2s ease, border 0.2s ease;
  }
  .graph-sidebar.collapsed { width: 0; min-width: 0; border-right: none; overflow: hidden; }
  .graph-sidebar-hdr { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 6px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .graph-filters-sidebar { display: flex; gap: 4px; padding: 6px 10px; flex-wrap: wrap; border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .graph-filters-sidebar:empty { display: none; }
  .graph-filter-btn { padding: 3px 8px; font-size: 0.68rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--dim); cursor: pointer; transition: all 0.15s; white-space: nowrap; }
  .graph-filter-btn.active { color: #fff; border-color: transparent; }
  .graph-filter-btn.active[data-folder="Memories"] { background: #C97B3A; }
  .graph-filter-btn.active[data-folder="Patterns"] { background: #4A6FA5; }
  .graph-filter-btn.active[data-folder="Beliefs"] { background: #A54A4A; }
  .graph-filter-btn.active[data-folder="Behaviors"] { background: #4A9A6F; }
  .graph-filter-btn.active[data-folder="Relationship - Her"] { background: #7A4AA5; }
  .graph-filter-btn.active[data-folder="root"] { background: #666; }
  .graph-node-list { flex: 1; overflow-y: auto; }
  .graph-node-item { padding: 6px 12px; font-size: 0.78rem; cursor: pointer; border-bottom: 1px solid rgba(139,148,158,0.1); color: var(--fg); display: flex; align-items: center; gap: 6px; }
  .graph-node-item:hover { background: var(--hover); }
  .graph-node-item.active { background: var(--surface); border-left: 3px solid var(--accent); }
  .graph-node-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .graph-expand-btn { position: absolute; top: 10px; left: 10px; z-index: 16; background: var(--surface); border: 1px solid var(--border); color: var(--dim); cursor: pointer; padding: 6px; border-radius: 6px; display: none; align-items: center; justify-content: center; flex-shrink: 0; }
  .graph-expand-btn:hover { background: var(--hover); color: var(--text); }
  #graph-view.sidebar-collapsed .graph-expand-btn { display: flex; }
  #graph-view.sidebar-collapsed .graph-controls { left: 46px; }
  .graph-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }
  /* Graph source switch (Notes / Fleet). 44px min height keeps it a legal
     touch target on the phone, per .claude/rules/css-mobile.md. */
  .graph-switch-btn { flex:1; min-height:32px; padding:6px 10px; font-size:0.75rem; font-family:inherit;
    background:var(--bg); color:var(--dim); border:1px solid var(--border); border-radius:6px; cursor:pointer; }
  .graph-switch-btn.active { background:var(--accent); color:#fff; border-color:transparent; }
  @media (max-width: 600px) { .graph-switch-btn { min-height:44px; font-size:0.8rem; } }
  .graph-canvas { position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 24px 24px; cursor: grab; overflow: hidden; }
  .graph-canvas.grabbing { cursor: grabbing; }
  .graph-controls { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 3px; z-index: 15; background: var(--bg); border-radius: 8px; border: 1px solid var(--border); padding: 4px; }
  .graph-controls button { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--fg); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .graph-controls button:hover { background: var(--hover); }
  .graph-node { position: absolute; padding: 10px 16px; border-radius: 10px; font-size: 0.85rem; font-weight: 600; cursor: grab; user-select: none; border: 1.5px solid transparent; transition: box-shadow 0.15s, opacity 0.2s; white-space: nowrap; z-index: 2; }
  .graph-node:hover { box-shadow: 0 0 12px rgba(255,255,255,0.1); z-index: 5; }
  .graph-node.dragging { cursor: grabbing; z-index: 10; box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
  .graph-node.dimmed { opacity: 0.15; }
  .graph-node.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
  .graph-edge { pointer-events: stroke; }
  .graph-edge.dimmed { opacity: 0.05; }
  .graph-edge:hover { stroke-opacity: 1 !important; }
  .graph-side-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 320px; background: var(--surface); border-left: 1px solid var(--border); z-index: 20; display: none; flex-direction: column; overflow: hidden; }
  .graph-side-panel.open { display: flex; }
  .graph-side-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .graph-side-header .badge { font-size: 0.65rem; padding: 2px 8px; border-radius: 10px; color: #fff; }
  .graph-side-body { flex: 1; padding: 14px; overflow-y: auto; font-size: 0.82rem; line-height: 1.6; color: var(--fg); }
  .graph-side-body h1, .graph-side-body h2, .graph-side-body h3 { margin: 12px 0 6px; color: var(--fg); }
  .graph-side-body p { margin: 6px 0; }
  .graph-side-body blockquote { border-left: 3px solid var(--accent); padding-left: 12px; margin: 8px 0; color: var(--dim); font-style: italic; }
  .graph-side-body ul, .graph-side-body ol { padding-left: 20px; margin: 6px 0; }
  .graph-side-links { padding: 12px 14px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px; }
  .graph-side-links .chip { font-size: 0.7rem; padding: 3px 10px; border-radius: 10px; cursor: pointer; border: 1px solid var(--border); background: var(--bg); color: var(--fg); }
  .graph-side-links .chip:hover { background: var(--hover); }
  @media (max-width: 600px) {
    #graph-view { height: calc(100dvh - 122px - var(--chrome-tab-h, 0px)); position: relative; }
    .graph-sidebar {
      position: absolute; top: 0; left: 0; bottom: 0; z-index: 10;
      width: 100% !important; min-width: 0 !important; border-right: none;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .graph-sidebar.collapsed {
      width: 100% !important; transform: translateX(-110%); opacity: 0; pointer-events: none;
    }
    .graph-expand-btn { display: flex !important; }
    .graph-side-panel { width: 100%; }
  }

  /* ── Journal ── */
  #journal-view { height: calc(100vh - 110px); display: flex; flex-direction: row; overflow: hidden; }
  .jrnl-sidebar {
    width: 260px; min-width: 200px; border-right: 1px solid var(--border);
    display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0;
    background: var(--card); transition: width 0.2s ease, min-width 0.2s ease, border 0.2s ease;
  }
  .jrnl-sidebar.collapsed { width: 0; min-width: 0; border-right: none; overflow: hidden; }
  .jrnl-sidebar-hdr { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 6px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .jrnl-search-wrap { padding: 6px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .jrnl-search-wrap input { width: 100%; box-sizing: border-box; padding: 5px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--fg); font-size: 0.78rem; font-family: inherit; outline: none; }
  .jrnl-tags-bar { display: flex; gap: 4px; padding: 6px 10px; overflow-x: auto; flex-wrap: nowrap; border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .jrnl-tags-bar:empty { display: none; }
  .jrnl-tag-chip { padding: 2px 8px; font-size: 0.68rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--dim); cursor: pointer; white-space: nowrap; }
  .jrnl-tag-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
  .jrnl-entry-list { flex: 1; overflow-y: auto; }
  .jrnl-entry-card { padding: 10px 12px; border-bottom: 1px solid rgba(139,148,158,0.1); cursor: pointer; transition: background 0.1s; }
  .jrnl-entry-card:hover { background: var(--hover); }
  .jrnl-entry-card.active { background: var(--surface); border-left: 3px solid var(--accent); }
  .jrnl-entry-date { font-size: 0.68rem; color: var(--dim); margin-bottom: 2px; }
  .jrnl-entry-preview { font-size: 0.8rem; color: var(--fg); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .jrnl-entry-meta { display: flex; gap: 6px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
  .jrnl-entry-meta .loc { font-size: 0.65rem; color: var(--dim); }
  .jrnl-entry-meta .tag { font-size: 0.6rem; padding: 1px 6px; border-radius: 8px; background: rgba(63,185,80,0.15); color: var(--accent); }
  .jrnl-entry-meta .media-count { font-size: 0.6rem; color: var(--dim); }
  .jrnl-expand-btn { background: transparent; border: none; color: var(--dim); cursor: pointer; padding: 4px; border-radius: 4px; display: none; align-items: center; justify-content: center; flex-shrink: 0; }
  .jrnl-expand-btn:hover { background: rgba(139,148,158,0.12); color: var(--text); }
  #journal-view.sidebar-collapsed .jrnl-expand-btn { display: flex; }
  .jrnl-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
  .jrnl-sub-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); padding: 0 12px; align-items: center; }
  .jrnl-sub-tab { padding: 8px 16px; font-size: 0.78rem; background: none; border: none; color: var(--dim); cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; }
  .jrnl-sub-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
  .jrnl-sub-tab:hover { color: var(--fg); }
  .jrnl-content { flex: 1; overflow-y: auto; position: relative; }
  /* List/detail editor */
  .jrnl-editor { padding: 20px 24px; max-width: 720px; }
  .jrnl-editor-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--dim); font-size: 0.85rem; }
  .jrnl-editor label { font-size: 0.72rem; color: var(--dim); display: block; margin-bottom: 4px; margin-top: 14px; }
  .jrnl-editor textarea { width: 100%; min-height: 100px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--fg); font-size: 0.82rem; font-family: inherit; resize: vertical; line-height: 1.5; }
  .jrnl-editor textarea.prompt-area { min-height: 60px; }
  .jrnl-editor input[type="text"], .jrnl-editor input[type="date"] { width: 100%; padding: 6px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--fg); font-size: 0.8rem; font-family: inherit; }
  .jrnl-editor .jrnl-toolbar { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
  .jrnl-editor .jrnl-toolbar button { padding: 5px 12px; font-size: 0.75rem; border-radius: 6px; cursor: pointer; font-family: inherit; }
  .jrnl-editor .jrnl-save-btn { background: var(--accent); color: #fff; border: none; font-weight: 600; }
  .jrnl-editor .jrnl-del-btn { background: none; border: 1px solid var(--border); color: var(--dim); }
  .jrnl-editor .jrnl-del-btn:hover { border-color: #f85149; color: #f85149; }
  .jrnl-loc-btn { background: none; border: 1px solid var(--border); color: var(--dim); padding: 4px 10px; border-radius: 6px; font-size: 0.72rem; cursor: pointer; font-family: inherit; }
  .jrnl-loc-btn:hover { border-color: var(--accent); color: var(--accent); }
  .jrnl-media-grid { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
  .jrnl-media-thumb { width: 80px; height: 80px; border-radius: 6px; object-fit: cover; cursor: pointer; border: 1px solid var(--border); }
  .jrnl-media-upload { width: 80px; height: 80px; border: 2px dashed var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--dim); font-size: 1.2rem; }
  .jrnl-media-upload:hover { border-color: var(--accent); color: var(--accent); }
  /* Calendar view */
  .jrnl-cal { padding: 16px; }
  .jrnl-cal-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
  .jrnl-cal-nav button { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--fg); padding: 4px 10px; cursor: pointer; font-family: inherit; }
  .jrnl-cal-nav span { font-size: 0.9rem; font-weight: 600; min-width: 160px; text-align: center; }
  .jrnl-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
  .jrnl-cal-hdr { font-size: 0.68rem; color: var(--dim); text-align: center; padding: 6px 0; font-weight: 600; }
  .jrnl-cal-day { min-height: 80px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 4px; cursor: pointer; position: relative; }
  .jrnl-cal-day:hover { border-color: var(--accent); }
  .jrnl-cal-day.other { opacity: 0.3; }
  .jrnl-cal-day.today { border-color: var(--accent); }
  .jrnl-cal-day .day-num { font-size: 0.7rem; color: var(--dim); margin-bottom: 2px; }
  .jrnl-cal-day .day-dots { display: flex; flex-direction: column; gap: 2px; }
  .jrnl-cal-day .day-entry { font-size: 0.6rem; color: var(--fg); padding: 1px 4px; background: rgba(63,185,80,0.1); border-radius: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  /* Media gallery */
  .jrnl-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; padding: 16px; }
  .jrnl-gallery-item { aspect-ratio: 1; border-radius: 8px; overflow: hidden; cursor: pointer; position: relative; border: 1px solid var(--border); }
  .jrnl-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
  .jrnl-gallery-item .caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 6px 8px; background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: #fff; font-size: 0.68rem; }
  /* Map view */
  #jrnl-map-pane { height: 100%; }
  .jrnl-map-container { width: 100%; height: 100%; }
  @media (max-width: 600px) {
    #journal-view { height: calc(100dvh - 122px - var(--chrome-tab-h, 0px)); position: relative; }
    .jrnl-sidebar {
      position: absolute; top: 0; left: 0; bottom: 0; z-index: 10;
      width: 100% !important; min-width: 0 !important; border-right: none;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .jrnl-sidebar.collapsed {
      width: 100% !important; transform: translateX(-110%); opacity: 0; pointer-events: none;
    }
    .jrnl-expand-btn { display: flex !important; }
    .jrnl-cal-day { min-height: 50px; }
    .jrnl-gallery { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  }




/* Why a tag is being suggested (AMUX-2677): the cluster size behind it. Muted
   and small so it reads as evidence attached to the chip, not part of the tag
   name — a bare word asks for trust, "30 cards" is the reason. */
.be-tag-why {
  margin-left: 5px;
  opacity: 0.55;
  font-size: 0.78em;
  font-variant-numeric: tabular-nums;
}

/* ── System jobs (AMUX-2703) ─────────────────────────────────────────────────
   amux's OWN background loops, rendered below the user's schedules in the
   Scheduler tab. Two things this styling has to get right, both for the same
   reason (three loops were dead for hours and nothing said so):

   1. The section must not read as more schedules. Hence the rule above it, the
      distinct heading, and the flatter card — a user glancing at the tab must
      never mistake machinery for something they created and can delete.
   2. A stalled job must be impossible to read as a healthy one at a glance.
      Colour is NOT the only channel: `.sysjob.bad` also gets a left bar, a
      tinted background and an uppercase status word, so it survives a
      colour-blind reader, a greyscale screenshot and a phone in sunlight. */
.sysjob-section {
  border-top: 2px solid var(--border);
  margin-top: 6px;
  padding: 12px 12px 4px;
}
.sysjob-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sysjob-head-title {
  font-size: 0.68rem; font-weight: 700; color: var(--dim);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.sysjob-head-sub { font-size: 0.72rem; color: var(--dim); flex: 1; min-width: 0; }
.sysjob-head-count { font-size: 0.68rem; color: var(--dim); }
.sysjob-alarm { color: var(--red); font-weight: 700; }
.sysjob-head-note {
  font-size: 0.66rem; color: var(--dim); margin: 3px 0 8px; line-height: 1.45;
}
#system-jobs-list { display: flex; flex-direction: column; gap: 5px; }

.sysjob {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  background: var(--card);
}
.sysjob.ok   { border-left-color: var(--green); }
.sysjob.warn { border-left-color: var(--yellow); }
.sysjob.idle { border-left-color: var(--border); opacity: 0.72; }
.sysjob.bad  { border-left-color: var(--red); background: rgba(248,81,73,0.09); }

.sysjob-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sysjob-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--dim); }
.sysjob-dot.ok { background: var(--green); }
.sysjob-dot.warn { background: var(--yellow); }
.sysjob-dot.bad { background: var(--red); box-shadow: 0 0 6px var(--red); }
.sysjob-name { font-weight: 600; font-size: 0.83rem; }
.sysjob-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.62rem; color: var(--dim);
  border: 1px solid var(--border); border-radius: 4px; padding: 0 4px;
}
.sysjob-status {
  margin-left: auto; font-size: 0.63rem; font-weight: 700;
  letter-spacing: 0.04em; color: var(--dim); white-space: nowrap;
}
.sysjob-status.ok { color: var(--green); }
.sysjob-status.warn { color: var(--yellow); }
.sysjob-status.bad { color: var(--red); }
.sysjob-purpose { font-size: 0.71rem; color: var(--text); opacity: 0.82; margin: 3px 0 4px; line-height: 1.4; }
.sysjob-purpose.dim { color: var(--yellow); opacity: 1; }
.sysjob-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.66rem; color: var(--dim); font-variant-numeric: tabular-nums;
}
.sysjob-meta:empty { display: none; }
.sysjob-budget { color: var(--red); }
.sysjob-inflight { color: var(--yellow); }
.sysjob-outcome {
  font-size: 0.68rem; color: var(--dim); margin: 4px 0 3px;
  padding-left: 7px; border-left: 2px solid var(--border);
}
.sysjob-env {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.62rem; color: var(--dim);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 44x44 touch target on mobile without a 44px-tall row on desktop: the label
   is the hit area and the padding does the work (css-mobile rule). */
.sysjob-toggle { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; padding: 4px 2px; min-height: 28px; }
.sysjob-toggle input { width: auto; accent-color: var(--accent); }
.sysjob-toggle span { font-size: 0.64rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sysjob-env.off { border-color: var(--yellow); color: var(--yellow); }
.sysjob-detail { font-size: 0.64rem; color: var(--accent); text-decoration: none; }
.sysjob-empty { font-size: 0.72rem; color: var(--dim); padding: 6px 0; }

@media (max-width: 600px) {
  .sysjob-section { padding: 10px 10px 4px; }
  /* 390px: the status word must stay on the title row and never wrap under
     the id, or the one signal that matters lands below the fold of the card. */
  .sysjob-status { margin-left: auto; }
  .sysjob-id { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
  .sysjob-toggle { min-height: 44px; }
  .sysjob-detail { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ── Reusable themed calendar picker (AMUX-3070) ──────────────────────────────
   Replaces the visual rendering of every <input.amux-dp>. The native input is
   kept in the DOM as the value store but display:none'd; a themed trigger button
   drives a single shared popover. Themed only via existing CSS vars so light and
   dark both work. */
.amux-dp-native { display: none !important; }

.amux-dp-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; min-height: 34px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-family: inherit; font-size: 0.85rem; line-height: 1.2;
  text-align: left; cursor: pointer; outline: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.amux-dp-trigger::before {
  content: "📅"; font-size: 0.85em; opacity: 0.8; flex: 0 0 auto;
}
.amux-dp-trigger:hover { border-color: var(--accent); }
.amux-dp-trigger:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(88,166,255,0.35); }
.amux-dp-trigger.empty { color: var(--dim); }

.amux-dp-backdrop {
  display: none; position: fixed; inset: 0; z-index: 100000;
  background: rgba(0,0,0,0.45);
}
.amux-dp-pop {
  display: none; position: fixed; z-index: 100001;
  width: 288px; max-width: calc(100vw - 16px);
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  padding: 10px; color: var(--text); font-family: inherit;
  user-select: none; -webkit-user-select: none;
}
.amux-dp-head {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  margin-bottom: 8px;
}
.amux-dp-title { font-size: 0.9rem; font-weight: 600; text-align: center; flex: 1; }
.amux-dp-nav {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); cursor: pointer; font-size: 1rem; line-height: 1;
  width: 32px; height: 32px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
}
.amux-dp-nav:hover { border-color: var(--accent); color: var(--accent); }
.amux-dp-week {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
  margin-bottom: 4px;
}
.amux-dp-week span {
  text-align: center; font-size: 0.68rem; color: var(--dim);
  padding: 2px 0; text-transform: uppercase; letter-spacing: 0.02em;
}
.amux-dp-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.amux-dp-day {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 0; border: 1px solid transparent; border-radius: 6px;
  background: none; color: var(--text); font-family: inherit; font-size: 0.82rem;
  cursor: pointer; outline: none;
}
.amux-dp-day:hover { background: var(--bg); border-color: var(--border); }
.amux-dp-day.adjacent { color: var(--dim); opacity: 0.55; }
.amux-dp-day.today { border-color: var(--accent); font-weight: 600; }
.amux-dp-day.selected { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.amux-dp-day.selected:hover { background: var(--accent); }
.amux-dp-day:focus-visible { box-shadow: 0 0 0 2px rgba(88,166,255,0.55); }
.amux-dp-time {
  display: flex; align-items: center; gap: 6px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--border);
}
.amux-dp-time label { font-size: 0.78rem; color: var(--dim); margin-right: 2px; }
.amux-dp-time input {
  width: 48px; padding: 5px 6px; text-align: center;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-family: inherit; font-size: 0.85rem; outline: none;
}
.amux-dp-time input:focus { border-color: var(--accent); }
.amux-dp-colon { color: var(--dim); }
.amux-dp-done {
  margin-left: auto; padding: 5px 12px;
  background: var(--accent); border: 1px solid var(--accent); border-radius: 6px;
  color: #fff; font-family: inherit; font-size: 0.82rem; cursor: pointer;
}
.amux-dp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  margin-top: 8px;
}
.amux-dp-foot button {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--dim); font-family: inherit; font-size: 0.78rem;
  padding: 5px 12px; cursor: pointer; min-height: 32px;
}
.amux-dp-foot button:hover { border-color: var(--accent); color: var(--text); }

/* Mobile: bottom sheet pinned to the physical bottom edge, full width, with the
   dimmed backdrop. Touch targets grow to >=44px. Must fit a 375px screen. */
@media (max-width: 600px) {
  .amux-dp-pop.sheet {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; max-width: none;
    border-radius: 14px 14px 0 0; border-bottom: none;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  }
  .amux-dp-pop.sheet .amux-dp-nav { width: 44px; height: 44px; }
  .amux-dp-pop.sheet .amux-dp-day { min-height: 44px; font-size: 0.9rem; }
  .amux-dp-pop.sheet .amux-dp-time input { min-height: 44px; width: 56px; }
  .amux-dp-pop.sheet .amux-dp-done,
  .amux-dp-pop.sheet .amux-dp-foot button { min-height: 44px; }
  .amux-dp-trigger { min-height: 40px; }
}

/* ═══════ MDAI: computed markdown DAG nodes (.mdai) ═══════
   The global MDAI tab list, the node overlay (output + history + edit), and the
   Connect picker. Mobile-first: everything is width-fluid and wraps at 375px. */
#mdai-list { -webkit-overflow-scrolling: touch; }
.mdai-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border-bottom: 1px solid var(--border); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mdai-row:hover { background: var(--card); }
.mdai-row-icon { flex: 0 0 auto; display: flex; align-items: center; }
.mdai-row-main { flex: 1; min-width: 0; }
.mdai-row-title {
  font-size: 0.86rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mdai-row-path {
  font-size: 0.68rem; color: var(--dim); font-family: 'SF Mono','Fira Code',monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}
.mdai-row-meta { font-size: 0.7rem; color: var(--dim); margin-top: 3px; }
.mdai-row-go { flex: 0 0 auto; color: var(--dim); font-size: 1.1rem; line-height: 1; }

/* Viewer header actions: always visible, unlike the .file-actions dropdown. */
.mdai-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
@media (max-width: 600px) { .mdai-actions .file-view-tab, .mdai-actions .file-menu-btn { min-height: 44px; min-width: 44px; } }

/* Node overlay body (reuses .file-overlay chrome, but normal prose, not mono). */
.mdai-node-body {
  flex: 1; overflow: auto; background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px;
  -webkit-overflow-scrolling: touch;
}
.mdai-section { margin-bottom: 16px; }
.mdai-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.mdai-badge {
  font-size: 0.66rem; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border); white-space: nowrap;
}
.mdai-badge-fresh { color: var(--green); border-color: var(--green); }
.mdai-badge-cached { color: var(--dim); }
.mdai-badge-model { color: var(--purple, #a371f7); border-color: var(--purple, #a371f7); font-family: 'SF Mono','Fira Code',monospace; }
.mdai-meta-time { font-size: 0.7rem; color: var(--dim); }
.mdai-histnav { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.mdai-hbtn {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-size: 0.74rem; padding: 5px 10px; cursor: pointer;
  min-height: 32px;
}
.mdai-hbtn:disabled { opacity: 0.4; cursor: default; }
.mdai-hpos { font-size: 0.72rem; color: var(--dim); }
.mdai-output {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; overflow-wrap: anywhere;
}
.mdai-output > *:first-child { margin-top: 0; }
.mdai-output > *:last-child { margin-bottom: 0; }
.mdai-err {
  background: rgba(248,81,73,0.12); border: 1px solid var(--red); border-radius: 8px;
  color: var(--red); padding: 10px 12px; font-size: 0.82rem; margin-bottom: 14px;
  overflow-wrap: anywhere;
}
.mdai-err-cycle { margin-top: 6px; font-family: 'SF Mono','Fira Code',monospace; font-size: 0.72rem; }
.mdai-edit { border-top: 1px solid var(--border); padding-top: 12px; }
/* Bottom tabs: Diagram + List (AMUX-3322) */
.mdai-btabs { display: flex; gap: 4px; border-top: 1px solid var(--border); margin-top: 14px; padding-top: 10px; }
.mdai-btab { background: none; border: 1px solid var(--border); border-radius: 6px 6px 0 0; color: var(--dim); font-size: 0.78rem; font-weight: 600; padding: 7px 14px; cursor: pointer; min-height: 34px; }
.mdai-btab.active { background: var(--card-bg); color: var(--text); border-bottom-color: var(--card-bg); }
.mdai-btab-content { border: 1px solid var(--border); border-top: none; border-radius: 0 0 8px 8px; padding: 12px; }
.mdai-diagram { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; }
.mdai-dg-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mdai-dg-node { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; background: var(--bg); max-width: 460px; width: 100%; box-sizing: border-box; }
.mdai-dg-src { cursor: pointer; border-left: 3px solid var(--cyan, #2a9fd6); }
.mdai-dg-selffetch { border-left-style: dashed; }
.mdai-dg-synth { cursor: pointer; border-left: 3px solid var(--accent); }
.mdai-dg-out { border-left: 3px solid var(--green); }
.mdai-dg-kind { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dim); margin-bottom: 3px; }
.mdai-dg-title { font-size: 0.82rem; font-weight: 600; word-break: break-all; }
.mdai-dg-sub { font-size: 0.74rem; color: var(--dim); line-height: 1.4; word-break: break-word; }
.mdai-dg-arrow { color: var(--dim); font-size: 1.1rem; line-height: 1; }
@media (max-width: 600px) { .mdai-btab { min-height: 44px; } .mdai-dg-node { max-width: 100%; } }
.mdai-edit-h { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dim); margin-bottom: 8px; }
.mdai-note { font-size: 0.78rem; color: var(--dim); line-height: 1.5; margin-bottom: 8px; }
.mdai-note a { color: var(--accent); }
.mdai-edge { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 8px; }
.mdai-edge-path { font-size: 0.74rem; font-family: 'SF Mono','Fira Code',monospace; color: var(--purple, #a371f7); word-break: break-all; margin-bottom: 6px; }
/* The editable source path: same purple monospace token look as the read-only
   div, but a real input so it can be changed and saved with the edge. */
input.mdai-edge-path-input { display: block; width: 100%; box-sizing: border-box;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 8px; min-height: 34px; outline: none; }
input.mdai-edge-path-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88,166,255,0.12); }
.mdai-prompt, .mdai-body-ta {
  width: 100%; box-sizing: border-box; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px;
  font-size: 0.82rem; line-height: 1.45; resize: vertical; font-family: inherit;
  outline: none;
}
.mdai-prompt:focus, .mdai-body-ta:focus { border-color: var(--accent); }
.mdai-edge-prompt-ro { font-size: 0.8rem; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.mdai-edge-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.mdai-sbtn {
  background: var(--accent); color: #fff; border: none; border-radius: 6px;
  font-size: 0.74rem; font-weight: 600; padding: 6px 12px; cursor: pointer; min-height: 32px;
}
.mdai-sbtn-danger { background: none; color: var(--red); border: 1px solid var(--border); }

/* Connect picker (a modal list of .mdai targets). */
.mdai-picker-overlay {
  position: fixed; inset: 0; background: rgba(1,4,9,0.6); z-index: 400;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.mdai-picker {
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  width: 100%; max-width: 460px; max-height: 80vh; display: flex; flex-direction: column;
  overflow: hidden;
}
.mdai-picker-h {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 0.86rem;
}
.mdai-picker-h b { color: var(--purple, #a371f7); }
.mdai-picker-x { background: none; border: none; color: var(--dim); font-size: 1rem; cursor: pointer; padding: 4px 8px; min-height: 36px; min-width: 36px; }
.mdai-picker-list { overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.mdai-picker-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--border);
  padding: 11px 14px; cursor: pointer; color: var(--text);
}
.mdai-picker-item:hover { background: var(--card); }
.mdai-picker-item-main { flex: 1; min-width: 0; }
.mdai-picker-item-title { display: block; font-size: 0.84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdai-picker-item-path { display: block; font-size: 0.68rem; color: var(--dim); font-family: 'SF Mono','Fira Code',monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdai-picker-foot { padding: 10px 14px; border-top: 1px solid var(--border); }
@media (max-width: 600px) {
  .mdai-picker { max-height: 88vh; }
  .mdai-row { padding: 12px 12px; }
  /* Touch targets >= 44px on mobile (css-mobile rule). */
  .mdai-hbtn, .mdai-sbtn, .mdai-picker-x { min-height: 44px; }
  .mdai-edge-actions { gap: 8px; }
}

/* Uniform provider transcript (AMUX-3201): codex/ollama rendered Claude-like.
   Fluid width + word-break so it reads at 375px (css-mobile rule). */
.ut-wrap { font-size: 0.82rem; line-height: 1.5; color: var(--text); padding-bottom: 8px; }
.ut-user {
  background: var(--card); border-left: 3px solid var(--accent);
  border-radius: 4px; padding: 8px 10px; margin: 10px 0;
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
.ut-msg { display: flex; gap: 8px; margin: 8px 0; align-items: flex-start; }
.ut-tool-msg { flex-direction: column; gap: 4px; }
.ut-dot { flex: 0 0 auto; line-height: 1.5; font-size: 0.7rem; }
.ut-dot-a { color: var(--text); }
.ut-dot-t { color: #3fb950; }
.ut-body { flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.ut-reason {
  color: var(--dim); font-style: italic; margin: 6px 0 6px 4px;
  overflow-wrap: anywhere; word-break: break-word;
}
.ut-reason-lbl {
  font-style: normal; font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.06em; opacity: 0.7; margin-right: 4px;
}
.ut-toolhead { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.ut-tool { font-weight: 700; color: #3fb950; }
.ut-tool-arg {
  color: var(--dim); font-family: 'SF Mono','Fira Code',monospace; font-size: 0.74rem;
  overflow-wrap: anywhere; word-break: break-word;
}
.ut-out {
  margin: 2px 0 4px 16px; padding: 6px 8px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 4px;
  font-family: 'SF Mono','Fira Code',monospace; font-size: 0.72rem;
  color: var(--dim); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  max-height: 220px; overflow-y: auto;
}
.ut-code { font-family: 'SF Mono','Fira Code',monospace; font-size: 0.76rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 3px; padding: 0 3px; }
.ut-plan {
  border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin: 10px 0;
  background: var(--card);
}
.ut-plan-title {
  font-weight: 700; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--dim); margin-bottom: 6px;
}
.ut-plan-row { display: flex; gap: 8px; align-items: flex-start; margin: 3px 0;
  overflow-wrap: anywhere; word-break: break-word; }
.ut-plan-mark { flex: 0 0 auto; }
.ut-plan-done { color: var(--dim); text-decoration: line-through; }
.ut-plan-active { color: var(--text); font-weight: 600; }
@media (max-width: 600px) {
  .ut-wrap { font-size: 0.8rem; }
  .ut-out { margin-left: 8px; }
}

/* ===== Connectors (integrations) tab ===== */
.conn-empty { color: var(--dim); padding: 20px 4px; font-size: 0.85rem; }
.conn-origin { font-size: 0.75rem; color: var(--dim); line-height: 1.5; margin-bottom: 14px; }
.conn-origin code { background: var(--hover); padding: 1px 5px; border-radius: 4px; }
.conn-card { border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; background: var(--card-bg); }
.conn-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.conn-title { font-weight: 700; font-size: 0.98rem; }
.conn-cat { font-size: 0.68rem; color: var(--dim); background: var(--hover); padding: 2px 7px; border-radius: 10px; }
.conn-badge { color: #fff; font-size: 0.66rem; font-weight: 600; padding: 2px 8px; border-radius: 10px; margin-left: auto; }
.conn-note { font-size: 0.75rem; color: var(--dim); line-height: 1.5; margin: 8px 0 10px; }
.conn-creds { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin-bottom: 8px; }
.conn-field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 220px; min-width: 0; }
.conn-klabel { font-size: 0.68rem; color: var(--dim); font-family: var(--mono, monospace); }
.conn-klabel em { color: var(--green); font-style: normal; }
.conn-input { width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); font-size: 0.8rem; box-sizing: border-box; }
.conn-save, .conn-connect, .conn-scope-btn, .conn-copy { border: 1px solid var(--border); background: var(--hover); color: var(--text); border-radius: 5px; font-size: 0.72rem; padding: 7px 12px; cursor: pointer; white-space: nowrap; min-height: 34px; }
.conn-save { background: var(--accent); color: #000; border: none; font-weight: 600; }
.conn-save:disabled { opacity: 0.6; cursor: default; }
.conn-oauth { margin: 6px 0 10px; padding: 8px 10px; background: var(--hover); border-radius: 6px; }
.conn-redir { font-size: 0.72rem; color: var(--dim); line-height: 1.6; margin-bottom: 8px; word-break: break-all; }
.conn-redir code { background: var(--bg); padding: 1px 5px; border-radius: 4px; }
.conn-copy { padding: 2px 8px; min-height: 0; font-size: 0.66rem; margin-left: 4px; }
.conn-connect { background: var(--cyan, #2a9fd6); color: #000; border: none; font-weight: 600; }
.conn-test { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.conn-test-btn { background: var(--hover); color: var(--text); border: 1px solid var(--border); border-radius: 5px; font-size: 0.72rem; padding: 6px 12px; cursor: pointer; min-height: 32px; }
.conn-test-btn:disabled { opacity: 0.6; cursor: default; }
.conn-test-result { font-size: 0.74rem; }
.conn-test-result.ok { color: var(--green); }
.conn-test-result.bad { color: var(--red); }
.conn-scope { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 600px) { .conn-test-btn { min-height: 44px; } }
.conn-slabel { font-size: 0.72rem; color: var(--dim); }
.conn-scope-off { opacity: 0.75; }
/* Gmail accounts in the connector card (AMUX-3389): health + Reconnect/Add. */
.conn-gmail { margin: 6px 0 10px; padding: 8px 10px; background: var(--hover); border-radius: 6px; }
.conn-gmail-h { font-size: 0.72rem; font-weight: 600; color: var(--dim); margin-bottom: 6px; }
.conn-gmail-empty, .conn-gmail-loading { font-size: 0.74rem; color: var(--dim); padding: 2px 0; }
.conn-gmail-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; }
.conn-gmail-addr { font-family: 'SF Mono','Fira Code',monospace; font-size: 0.76rem; color: var(--text); word-break: break-all; }
.conn-gmail-badge { color: #fff; font-size: 0.62rem; font-weight: 600; padding: 2px 7px; border-radius: 9px; white-space: nowrap; }
.conn-gmail-btn { margin-left: auto; border: 1px solid var(--border); background: var(--card-bg, var(--card)); color: var(--text); border-radius: 5px; font-size: 0.7rem; padding: 5px 10px; cursor: pointer; min-height: 32px; white-space: nowrap; }
.conn-gmail-btn.conn-gmail-del { margin-left: 0; color: var(--red, #c0392b); }
.conn-gmail-add { margin-top: 8px; border: 1px dashed var(--border); background: none; color: var(--accent); border-radius: 5px; font-size: 0.72rem; padding: 6px 12px; cursor: pointer; min-height: 34px; }
@media (max-width: 600px) { .conn-gmail-btn { min-height: 44px; } .conn-gmail-btn { margin-left: 0; flex: 1 1 auto; } }
/* Scope picker: searchable dropdown over real workers/groups (AMUX-3350) */
.conn-picker-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 10050; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.conn-picker { background: var(--card); border: 1px solid var(--border); border-radius: 12px; width: min(92vw, 420px); max-height: 70vh; display: flex; flex-direction: column; box-shadow: 0 8px 40px rgba(0,0,0,0.5); overflow: hidden; }
.conn-picker-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.conn-picker-x { background: none; border: none; color: var(--dim); cursor: pointer; font-size: 1rem; }
.conn-picker-search { margin: 10px 14px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 0.9rem; outline: none; }
.conn-picker-list { overflow-y: auto; padding: 0 8px 10px; }
.conn-picker-item { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); padding: 9px 10px; border-radius: 6px; cursor: pointer; font-size: 0.85rem; }
.conn-picker-item:hover { background: var(--hover); }
.conn-picker-item mark { background: var(--accent); color: #000; border-radius: 2px; padding: 0 1px; }
.conn-picker-empty { color: var(--dim); font-size: 0.82rem; padding: 12px 10px; }
.conn-picker-use { background: var(--accent); color: #000; border: none; border-radius: 5px; padding: 4px 10px; cursor: pointer; font-size: 0.78rem; margin-left: 4px; }
@media (max-width: 600px) { .conn-picker-item { padding: 12px 10px; } .conn-picker-overlay { padding-top: 6vh; } }
@media (max-width: 600px) {
  .conn-field { flex: 1 1 100%; }
  .conn-save, .conn-connect, .conn-scope-btn { min-height: 44px; flex: 1 1 auto; }
  .conn-badge { margin-left: 0; }
}

/* ===== Spreadsheet (.xlsx) preview (AMUX-3343) ===== */
.xlsx-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.xlsx-tab { background: var(--hover); border: 1px solid var(--border); border-radius: 6px; color: var(--dim); font-size: 0.76rem; padding: 6px 12px; cursor: pointer; min-height: 34px; }
.xlsx-tab.active { background: var(--accent); color: #000; border-color: var(--accent); font-weight: 600; }
.xlsx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 8px; }
/* SheetJS sheet_to_html output (all <td>, no header row markup) */
.xlsx-scroll table { border-collapse: collapse; font-size: 0.8rem; min-width: 100%; }
.xlsx-scroll table td { border: 1px solid var(--border); padding: 5px 9px; text-align: left; white-space: pre-wrap; word-break: break-word; max-width: 360px; vertical-align: top; }
.xlsx-scroll table tr:nth-child(even) td { background: color-mix(in srgb, var(--hover) 40%, transparent); }
.xlsx-table { border-collapse: collapse; font-size: 0.8rem; min-width: 100%; }
.xlsx-table th, .xlsx-table td { border: 1px solid var(--border); padding: 5px 9px; text-align: left; white-space: pre-wrap; word-break: break-word; max-width: 360px; vertical-align: top; }
.xlsx-table th { background: var(--hover); font-weight: 600; position: sticky; top: 0; }
.xlsx-table tr:nth-child(even) td { background: color-mix(in srgb, var(--hover) 40%, transparent); }
.xlsx-empty { color: var(--dim); font-size: 0.85rem; padding: 16px 4px; }
.xlsx-trunc { color: var(--yellow, #d4a017); font-size: 0.76rem; margin-top: 10px; }
@media (max-width: 600px) { .xlsx-tab { min-height: 44px; } .xlsx-table th, .xlsx-table td { max-width: 220px; } }

/* ARCHIVED SECTION (AMUX-3715, requested by tubescience).
   Read-only and appended after the columns — never a drop target, because they
   archive deliberately via the CLI in bulk and a drag affordance would be a
   footgun for that usage. */
.board-archived-section {
  flex: 0 0 auto;
  width: 100%;
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.board-archived-header {
  /* 44px: this is the only control in the section and it is what a thumb hits. */
  min-height: 44px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 8px;
}
.board-archived-header:hover { color: var(--text); }
.board-archived-empty { color: var(--text-dim); font-size: 12px; padding: 6px 10px; }
.board-archived-group { margin: 6px 0 10px; }
.board-archived-group-h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-dim);
  padding: 4px 10px;
}
.board-archived-row {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  /* Wrap rather than overflow: a 375px screen must not scroll sideways. */
  overflow-wrap: anywhere;
}
.board-archived-row:hover { background: var(--bg-hover); }
.board-archived-id { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.board-archived-title { color: var(--text); }
/* The trigger is the field tubescience acts on: archiving DE-ARMS it, so for a
   card parked on a condition this is the only path back to it. Styled to be
   findable by eye when scanning, not decorative. */
.board-archived-trigger {
  margin-top: 3px;
  font-size: 11px;
  color: var(--amber, #d29922);
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .board-archived-section { margin-top: 8px; }
  .board-archived-row { padding: 10px; }
}

/* Declare-a-connector form (AMUX-3990). Grid collapses to one column under the
   existing 600px breakpoint; inputs are 44px tall so they are touch targets on
   the phone PWA, which is the primary surface. */
.conn-add { margin: 10px 0 14px; }
.conn-add-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 12px;
  margin-bottom: 8px;
}
.conn-add-grid label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: .85em; color: var(--dim);
}
.conn-add-grid input, .conn-add-grid select {
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  background: var(--bg2, #1a1a1a);
  color: inherit;
  font-size: .95em;
  min-width: 0;
}
@media (max-width: 600px) {
  .conn-add-grid { grid-template-columns: 1fr; }
}

/* Email tab layout (AMUX-3998).
   A flex item's default `min-width: auto` refuses to shrink below its content,
   so the long From addresses forced the wrapper to 432px inside a 343px parent
   and clipped the account and folder chips on the right at phone width. Measured
   at 390px: subtabs container 400px wide, chips cut off.
   `min-width: 0` is the fix that lets a flex child actually be narrower than its
   content; the ellipsis rules below then decide WHAT gets truncated, rather than
   the browser silently cutting whatever hangs past the edge. */
#email-view > div { min-width: 0; max-width: 100%; box-sizing: border-box; }
#email-subtabs, #email-folders { min-width: 0; max-width: 100%; }
#email-subtabs button, #email-folders button {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The row's text column has to be shrinkable too, or the same rule that clipped
   the chips clips the subject instead. */
#email-list > div > div { min-width: 0; }

/* Mail rows (AMUX-3998). Deliberately the conventions every mail client shares,
   because an inbox is a scanning surface: one line per message, sender in a
   fixed column, subject and preview on the same line, time right-aligned, unread
   in bold. The first version stacked five buttons under each row — a control
   panel, not an inbox. */
.mail-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-bottom: 1px solid var(--border);
  cursor: pointer; font-size: 0.84rem; min-height: 44px; box-sizing: border-box;
}
.mail-row:hover { background: var(--hover); }
.mail-row.unread .mail-from, .mail-row.unread .mail-subj { font-weight: 700; }
/* Read mail recedes; unread is the default weight. */
.mail-row:not(.unread) .mail-from, .mail-row:not(.unread) .mail-subj { opacity: 0.82; }
.mail-star {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 1rem; line-height: 1; color: var(--dim);
  min-width: 22px; min-height: 44px;
}
.mail-row.flagged .mail-star { color: #eab308; }
.mail-from { flex: 0 0 168px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* min-width:0 is what lets the middle column actually shrink; without it the
   long subject forces the row wider than its parent (the bug this tab already
   hit once at phone width). */
.mail-mid { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-snip { color: var(--dim); }
.mail-themes { margin-left: 8px; }
.mail-score { flex: 0 0 auto; color: var(--accent, #2563eb); font-weight: 700; min-width: 1.6em; text-align: right; }
.mail-when { flex: 0 0 74px; text-align: right; color: var(--dim); font-size: 0.76rem; }
/* SAME SLOT as the timestamp: hovering swaps them, so the row never reflows and
   the list does not jump under the cursor. */
.mail-actions { display: none; flex: 0 0 74px; gap: 2px; justify-content: flex-end; }
.mail-row:hover .mail-when { display: none; }
.mail-row:hover .mail-actions { display: flex; }
.mail-actions button {
  background: var(--hover); color: var(--text); border: 1px solid var(--border);
  border-radius: 4px; cursor: pointer; font-size: 0.72rem; padding: 2px 5px; min-height: 28px;
}
.mail-body {
  white-space: pre-wrap; word-break: break-word; background: var(--hover);
  padding: 10px 12px; font-size: 0.8rem; max-height: 420px; overflow: auto;
  border-bottom: 1px solid var(--border);
}

/* PHONE: the two-line stack every mobile mail app uses. Hover does not exist on
   touch, so the actions are always visible there — hiding them behind a hover
   that can never fire would make them unreachable, which is worse than the
   density cost. */
@media (max-width: 600px) {
  .mail-row { flex-wrap: wrap; padding: 8px 6px; }
  .mail-from { flex: 1 1 auto; order: 1; }
  .mail-when { order: 2; flex: 0 0 auto; }
  .mail-score { order: 3; }
  .mail-mid { order: 4; flex: 1 1 100%; white-space: normal; }
  .mail-actions { order: 5; display: flex; flex: 1 1 100%; justify-content: flex-start; margin-top: 4px; }
  .mail-actions button { min-height: 44px; min-width: 44px; }
  .mail-row:hover .mail-when { display: block; }
}

/* A failed worker read must resolve the loading screen (AMUX-4246). */
.session-read-notice { margin:10px 0; padding:14px; border:1px solid #f8514944; border-radius:10px; background:rgba(248,81,73,0.06); font-size:0.85rem; }
.session-read-notice p { margin:8px 0 14px; color:var(--dim); line-height:1.5; }
.session-read-notice button { min-height:44px; }
.session-read-notice details { margin-top:14px; color:var(--dim); font-size:0.78rem; }
.session-read-notice summary { cursor:pointer; }
.session-read-notice code { display:block; margin-top:8px; overflow-wrap:anywhere; }

/* AMUX-4361: the queue is a touch-friendly inspector over the worker, using
   board details for all mutations. Native dialog supplies focus containment. */
.work-queue-dialog { margin: auto; color: var(--text); background: var(--bg); border: 1px solid var(--border);
  border-radius: 14px; padding: 0; width: min(600px, calc(100vw - 24px)); max-height: calc(100dvh - 32px);
  box-sizing: border-box; overflow: auto; }
.work-queue-dialog::backdrop { background: rgba(0,0,0,.5); }
.work-queue-header { display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 16px; position: sticky; top: 0; background: var(--bg); border-bottom: 1px solid var(--border); }
.work-queue-header h2 { min-width: 0; font-size: 1rem; margin: 0; overflow-wrap: anywhere; }
.work-queue-dialog .btn { min-height: 44px; flex-shrink: 0; }
.work-queue-body { padding: 0 16px 16px; }
.work-queue-body p { color: var(--dim); font-size: .85rem; line-height: 1.5; }
.work-queue-body h3 { font-size: .85rem; margin: 20px 0 8px; }
.work-queue-card { display: flex; align-items: center; gap: 12px; justify-content: space-between;
  width: 100%; min-height: 52px; padding: 12px; margin: 8px 0; border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); background: var(--surface); text-align: left; cursor: pointer; font: inherit; }
.work-queue-card > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.work-queue-card-title { display: block; color: var(--dim); font-size: .8rem; line-height: 1.4; margin-top: 4px; }
.work-queue-open { color: var(--accent); font-size: .8rem; flex-shrink: 0; }
.work-queue-card:hover, .work-queue-card:focus-visible { border-color: var(--accent); }
.status-badge.work-queued-chip { min-height: 32px; text-decoration: underline dotted; text-underline-offset: 3px; }
@media (max-width: 600px) {
  .status-badge.work-queued-chip { min-height: 44px; }
  .work-queue-card { align-items: flex-start; flex-direction: column; gap: 6px; }
}

/* AMUX-4368: terminal agent controls remain usable on a phone. */
.peek-agent-nav[hidden] { display:none; }
.peek-agent-nav { align-items:center; }
#peek-agent-label { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.72rem; color:var(--dim); }
.peek-agent-nav button { min-width:44px; height:44px; }
.peek-agent-nav button:disabled { opacity:0.5; cursor:wait; }
.peek-agent-heading { color:var(--dim); font-weight:600; }
.peek-output-wrap:has(.peek-agent-nav:not([hidden])) #peek-body { padding-top:62px; }

/* AMUX-4374: the failed attachment has a named, keyboard-accessible action. */
.peek-attach-chip button.chip-retry { border:0; background:transparent; padding:4px; font:inherit; color:var(--accent); }

/* Outcome board and linked task record. Shared theme tokens keep both themes legible. */
.board-page-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 4px 14px; }
.board-page-heading h1 { margin:0; font-size:1.85rem; letter-spacing:-.045em; line-height:1.1; }
.board-page-heading p { margin:7px 0 0; color:var(--dim); font-size:.92rem; }
.board-page-heading > button { width:48px; height:48px; font-size:1.6rem; border-radius:14px; }
.board-quick-filters { display:flex; gap:8px; overflow-x:auto; padding:4px 0 16px; scrollbar-width:none; }
.board-quick-filters button { min-height:44px; flex-shrink:0; padding:8px 18px; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text); font:inherit; font-size:.85rem; cursor:pointer; }
/* Launch bar: type priorities, auto fan-out */
.board-launch-bar { margin:0 0 12px; border:1px solid var(--border); border-radius:14px; background:var(--surface); overflow:hidden; }
.launch-header { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; user-select:none; }
.launch-header:hover { background:var(--surface2); }
.launch-ico { font-size:1.1rem; }
.launch-title { font-weight:600; font-size:.88rem; flex:1; }
.launch-caret { font-size:.7rem; color:var(--dim); transition:transform .15s; }
.launch-caret.open { transform:rotate(90deg); }
.launch-body { padding:0 14px 14px; display:flex; flex-direction:column; gap:10px; }
.launch-textarea { font:inherit; font-size:.85rem; resize:vertical; min-height:80px; border-radius:10px; padding:10px 12px; }
.launch-controls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.launch-controls select { border-radius:10px; font-size:.82rem; }
.launch-roles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.launch-role { min-width:0; margin:0; border:1px solid var(--border); border-radius:12px; padding:12px; }
.launch-role legend { font-weight:600; padding:0 6px; }
.launch-role p { color:var(--dim); font-size:.8rem; margin:0 0 12px; }
.launch-profile-fields { display:grid; grid-template-columns:minmax(100px,1fr) minmax(110px,2fr); gap:10px; }
.launch-profile-fields label,.launch-workspace { display:flex; flex-direction:column; gap:6px; font-size:.82rem; min-width:0; }
.launch-profile-fields .input,.launch-workspace .input { width:100%; min-width:0; min-height:44px; box-sizing:border-box; }
#launch-overrides { font-size:.82rem; }
#launch-overrides summary { cursor:pointer; padding:8px 0; }
.launch-worker-profile { padding:12px 0; border-top:1px solid var(--border); }
.launch-worker-profile p { overflow-wrap:anywhere; margin:0 0 8px; }
.orch-role-profile { color:var(--dim); font-size:.72rem; overflow-wrap:anywhere; }
@media (max-width:600px) { .launch-roles { grid-template-columns:1fr; } }
.launch-status { font-size:.8rem; padding:6px 0; color:var(--dim); }
.launch-status.error { color:var(--danger); }
/* Fanout children in board detail */
.bd-fanout-child { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border); }
.bd-fanout-child:last-child { border-bottom:none; }
.bd-fanout-worker { font-size:.82rem; font-weight:500; cursor:pointer; text-decoration:underline; text-decoration-color:var(--dim); text-underline-offset:2px; }
.bd-fanout-status { font-size:.72rem; padding:2px 8px; border-radius:8px; }
.bd-fanout-status.running { background:rgba(34,197,94,0.15); color:#22c55e; }
.bd-fanout-status.idle { background:rgba(100,116,139,0.15); color:var(--dim); }
.bd-fanout-status.done { background:rgba(59,130,246,0.15); color:#3b82f6; }
/* Start a paused/archived/expired fan-out worker, inline beside its name
   (AMUX-4682, Ethan 2026-09-18: "I should be able to start workers that
   have been paused, archived or expired... from the accordions"). */
.bd-fanout-start-btn { font-size:.68rem; padding:2px 8px; border-radius:8px; border:1px solid var(--border); background:var(--surface2); color:var(--accent); cursor:pointer; line-height:1.6; }
.bd-fanout-start-btn:hover { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
/* Fanout peek panel items */
.fanout-worker-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
.fanout-worker-row:last-child { border-bottom:none; }
.fanout-worker-name { font-size:.84rem; font-weight:500; flex:1; cursor:pointer; }
.fanout-worker-name:hover { text-decoration:underline; }
.fanout-worker-card { font-size:.72rem; color:var(--dim); }
@media (max-width:600px) {
  .launch-controls { flex-direction:column; align-items:stretch; }
  .launch-controls select, .launch-controls button { width:100%; min-height:44px; }
}
/* Orchestrations tab */
.orch-filters { display:flex; gap:6px; flex-wrap:wrap; }
.orch-filter-pill { background:var(--surface2); border:1px solid var(--border); border-radius:16px; padding:4px 12px; font-size:.78rem; color:var(--dim); cursor:pointer; user-select:none; min-height:32px; display:inline-flex; align-items:center; gap:4px; }
.orch-filter-pill:hover { border-color:var(--accent); color:var(--text); }
.orch-filter-pill.active { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.orch-filter-count { font-size:.68rem; opacity:.7; }
.orch-tree { display:flex; flex-direction:column; gap:16px; }
.orch-node { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); }
.orch-node.expired { opacity:.75; }
.orch-node-header { display:flex; width:100%; align-items:center; gap:10px; padding:14px; border:0; text-align:left; color:var(--text); cursor:pointer; min-height:48px; background:var(--surface2); }
.orch-node-header:hover { background:var(--surface); }
.orch-node-chevron { color:var(--dim); width:14px; flex-shrink:0; }
.orch-node-title { font-weight:650; font-size:.95rem; flex:1; min-width:0; overflow-wrap:anywhere; }
.orch-node-count { font-size:.75rem; color:var(--dim); white-space:nowrap; }
.orch-epic-links { display:flex; flex-wrap:wrap; gap:4px 12px; padding:8px 16px; border-bottom:1px solid var(--border); }
.orch-worker { padding:12px 16px; border-top:1px solid var(--border); min-width:0; }
.orch-workers { margin-left:22px; border-left:2px solid var(--border); }
.orch-worker-heading,.orch-worker-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; }
.orch-worker-heading { min-height:32px; }
.orch-worker-role { font-size:.7rem; font-weight:650; padding:3px 7px; border:1px solid var(--border); border-radius:6px; }
.orch-worker-name,.orch-task-link { border:0; background:none; color:var(--accent); cursor:pointer; padding:4px 0; text-align:left; min-width:0; overflow-wrap:anywhere; }
.orch-worker-name { font-size:.9rem; font-weight:600; }
.orch-worker-name:hover,.orch-task-link:hover { text-decoration:underline; }
.orch-worker-status { font-size:.73rem; color:var(--dim); }
.orch-worker-meta { color:var(--dim); font-size:.75rem; margin-top:3px; }
.orch-tasks-toggle { border:0; background:none; color:var(--accent); cursor:pointer; padding:8px 0; font-size:.78rem; }
.orch-task { display:flex; gap:10px; align-items:center; border-top:1px solid var(--border); padding:6px 0; }
.orch-task-link { flex:1; font-size:.8rem; }
.orch-task .status-badge { font-size:.65rem; flex-shrink:0; }
.orch-active-task { display:flex; gap:8px; align-items:baseline; margin-top:6px; font-size:.8rem; }
.orch-active-task strong { color:var(--muted); flex-shrink:0; }
.orch-worker.working-now .orch-active-task strong { color:var(--green); }
.orch-worker.working-now { background:color-mix(in srgb,var(--accent) 5%,var(--surface)); }
.orch-task.working-now { border-left:3px solid var(--accent); padding-left:8px; }
.orch-empty,.orch-worker-empty { padding:8px 0; color:var(--dim); font-size:.8rem; }
.orch-node > .orch-empty { padding:12px 16px; }
.orch-integration,.orch-worktree { font-size:.72rem; color:var(--dim); overflow-wrap:anywhere; }
@media (max-width:600px) {
  .orch-node-header { flex-wrap:wrap; padding:12px; gap:8px; }
  .orch-node-title { flex-basis:calc(100% - 32px); }
  .orch-node-count { padding-left:22px; }
  .orch-workers { margin-left:12px; }
  .orch-worker { padding:10px 12px; }
  .orch-task,.orch-active-task { flex-wrap:wrap; }
  .orch-task-link { flex-basis:70%; }
  .orch-filter-pill,.orch-tasks-toggle,.orch-worker-name { min-height:44px; }
}
#board-view .board-toolbar { padding:10px 0 14px; }
#board-view .board-columns { gap:16px; align-items:flex-start; }
#board-view .board-col:not(.col-collapsed) { flex:0 0 310px; min-width:310px; max-width:360px; padding:10px; background:var(--surface2); border:1px solid var(--border); border-radius:16px; }
#board-view .board-col-header { min-height:48px; font-size:.95rem; padding:3px 4px 12px; }
#board-view .board-card { border-radius:14px; padding:15px; margin-bottom:10px; background:var(--surface); box-shadow:0 2px 8px rgba(0,0,0,.025); }
#board-view .board-card-title { font-size:1rem; font-weight:650; line-height:1.35; letter-spacing:-.02em; padding-top:7px; }
#board-view .board-card-desc { font-size:.86rem; line-height:1.45; margin:8px 0 12px; -webkit-line-clamp:3; }
#board-view .board-card-key { font-family:inherit; font-size:.72rem; }
#board-view .board-card-footer { gap:7px; }
#board-view .board-card-tag, #board-view .board-card-session { font-size:.75rem; border-radius:9px; padding:5px 8px; }
/* Compact global Board chrome: title row + one horizontally scrollable control row. */
#board-view .board-page-heading{padding:12px 4px 8px;gap:12px;min-height:0}
#board-view .board-page-heading>div{display:flex;align-items:center;gap:10px;min-width:0;flex:1;flex-wrap:wrap}
#board-view .board-page-heading h1{font-size:1.45rem;line-height:1;margin:0;display:flex;align-items:center;gap:8px}
#board-view .board-page-heading p{margin:0;font-size:.78rem;line-height:1.2;white-space:nowrap;color:var(--dim)}
#board-view .board-page-heading .btn.compact{min-height:28px;padding:3px 9px;font-size:.78rem;border-radius:7px}
#board-view .board-page-heading>button{width:42px;height:42px;min-height:42px;font-size:1.25rem;border-radius:12px;flex:0 0 auto}
#board-view .board-control-row{display:flex;align-items:center;gap:8px;overflow-x:auto;overflow-y:visible;white-space:nowrap;padding:2px 0 8px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
#board-view .board-control-row>*{flex:0 0 auto}
#board-view .board-quick-filters{display:flex;gap:6px;padding:0;overflow:visible;flex:0 0 auto}
#board-view .board-quick-filters button{min-height:34px;padding:6px 12px;border-radius:10px;font-size:.78rem}
#board-view .board-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;padding:0;min-width:max-content;flex:0 0 auto}
#board-view #bf-chips{flex:0 0 auto!important;flex-basis:auto!important;order:0!important;padding-top:0!important;max-width:260px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
#board-view #bf-chips::-webkit-scrollbar{display:none}
#board-view .board-search-wrap{width:clamp(260px,32vw,430px);flex:0 0 auto!important;display:flex;position:relative;min-width:260px}
#board-view #bf-add{min-height:34px!important;padding:5px 10px;font-size:.78rem}
#board-view #board-search{min-height:34px;height:34px;font-size:.78rem;padding-top:6px;padding-bottom:6px}
#board-view .board-new-btn{min-height:34px;padding:5px 10px;font-size:.78rem}
#board-view .board-owner-toggle,#board-view .board-view-toggle{height:34px;align-items:center}
#board-view .board-owner-toggle .bv-btn,#board-view .board-view-toggle .bv-btn{min-height:28px;padding:5px 8px;font-size:.78rem}
#board-view .board-views,#board-view .board-filters{display:flex;gap:6px;align-items:center;overflow:visible;padding:0;flex:0 0 auto;max-width:none}
#board-view .board-view-chip{min-height:30px;padding:5px 9px;font-size:.68rem}
#board-view .board-filter-label{display:none}
#board-view .board-filter-chip{min-height:30px;padding:5px 9px;font-size:.68rem;border-radius:999px}
#board-view #board-stats-mount{flex:0 0 auto}
#board-view #board-stats-mount .board-stats{margin:0;padding:0;gap:6px;overflow:visible;height:34px;align-items:stretch}
#board-view #board-stats-mount .bstat{min-width:52px;padding:4px 8px;border-radius:9px}
#board-view #board-stats-mount .bstat-prog{min-width:116px;max-width:136px}
#board-view #board-stats-mount .bstat-v{font-size:.78rem}
#board-view #board-stats-mount .bstat-l{font-size:.52rem}
@media(max-width:700px){#board-view .board-page-heading p{white-space:normal}#board-view .board-search-wrap{width:260px;min-width:260px}#board-view .board-new-label{display:none}#board-view .board-new-icon{display:inline}#board-view .board-page-heading>button{width:38px;height:38px;min-height:38px}}
.board-card-progress { display:flex; align-items:center; gap:10px; padding-top:12px; font-size:.75rem; color:var(--dim); }
.board-card-progress progress { width:100%; height:6px; border:0; border-radius:8px; overflow:hidden; accent-color:var(--accent); background:var(--border); }
.board-card-progress progress::-webkit-progress-bar { background:var(--border); border-radius:8px; }
.board-card-progress progress::-webkit-progress-value { background:var(--accent); border-radius:8px; }
.board-card-epic { font-size:.73rem; color:var(--dim); padding-top:9px; }
#board-detail-overlay { background:var(--bg); }
#board-detail-overlay > .overlay-header { background:var(--surface); border-bottom:1px solid var(--border); padding:12px max(16px, calc((100vw - 1060px)/2)); }
#board-detail-overlay .board-detail-body { box-sizing:border-box; width:100%; max-width:1060px; margin:0 auto; padding:24px 24px 100px; }
#board-detail-overlay .board-detail-title-input { font-size:1.7rem; line-height:1.2; font-weight:700; letter-spacing:-.035em; margin:0 0 14px; padding:0; border:0; background:transparent; }
.bd-record-tags { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.bd-record-tags > span { border-radius:9px; padding:6px 10px; font-size:.78rem; }
.bd-type-chip { color:var(--accent); background:var(--surface2); border:1px solid var(--border); }
.bd-record-properties { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px 0; margin:0 0 16px; }
.bd-record-properties > div { min-width:0; padding:0 16px; border-right:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.bd-record-properties > div:last-child { border:0; }
.bd-record-properties > div > span { font-size:.76rem; color:var(--dim); }
.bd-record-properties b { font-size:.86rem; font-weight:500; }
.bd-owner-link { display:flex; align-items:center; gap:8px; background:none; color:var(--text); border:0; padding:0; min-height:36px; text-align:left; overflow-wrap:anywhere; cursor:pointer; }
.bd-avatar { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; width:30px; height:30px; flex-shrink:0; color:var(--accent); background:var(--surface2); font-size:.67rem; font-weight:700; }
#board-detail-overlay .board-detail-status-row { overflow-x:auto; flex-wrap:nowrap; padding:0 0 12px; gap:6px; }
#board-detail-overlay .board-detail-status-btn { flex-shrink:0; min-height:36px; border-radius:10px; }
#board-detail-overlay .board-detail-tabs { display:flex; overflow-x:auto; gap:8px; margin-bottom:16px; padding:0; scrollbar-width:none; }
#board-detail-overlay .board-detail-tab { flex-shrink:0; font-size:.85rem; min-height:46px; padding:10px 12px; }
#board-detail-overlay .board-detail-tab > span { font-size:.72rem; padding:2px 6px; margin-left:4px; border-radius:7px; background:var(--surface2); }
#board-detail-overlay .bd-card-section { border:1px solid var(--border); border-radius:14px; background:var(--surface); margin:0 0 10px; overflow:hidden; }
#board-detail-overlay .bd-card-section[hidden] { display:none; }
#board-detail-overlay .bd-card-section > summary { display:flex; align-items:center; min-height:52px; gap:12px; padding:0 16px; cursor:pointer; list-style:none; }
#board-detail-overlay .bd-card-section > summary::-webkit-details-marker { display:none; }
#board-detail-overlay .bd-card-section > summary::after { content:'⌄'; color:var(--dim); margin-left:auto; }
#board-detail-overlay .bd-card-section[open] > summary::after { transform:rotate(180deg); }
#board-detail-overlay .bd-card-section h4 { color:var(--text); font-size:.93rem; font-weight:650; margin:0; text-transform:none; letter-spacing:-.01em; }
.bd-section-icon { font-size:1.2rem; width:20px; text-align:center; color:var(--text); }
#board-detail-overlay .bd-section-body { padding:0 16px 16px; font-size:.86rem; line-height:1.5; overflow-wrap:anywhere; }
#board-detail-overlay .board-detail-preview { margin:0; border:0; border-radius:0; background:none; }
#board-detail-overlay .board-detail-meta-row { padding:10px 0; border-bottom:1px solid var(--border); line-height:1.5; gap:8px; }
#board-detail-overlay .board-detail-meta-row:last-child { border-bottom:0; }
#board-detail-overlay .bd-card-facts { display:flex; flex-wrap:wrap; gap:6px 16px; padding:0 2px 12px; color:var(--dim); font-size:.72rem; }
#board-detail-overlay .bd-related-link { display:flex; align-items:center; gap:9px; width:100%; text-align:left; min-height:44px; padding:7px 0; border:0; background:transparent; color:var(--text); cursor:pointer; }
.bd-related-link > span:nth-child(2) { flex:1; }
.bd-related-link > span:last-child { margin-left:auto; color:var(--dim); }
#board-detail-overlay .task-id-chip, #board-detail-overlay .board-artifact-commit { color:var(--accent); cursor:pointer; border:0; background:transparent; font:inherit; padding:4px; }
#board-detail-overlay .board-artifact-file, #board-detail-overlay .board-artifact-commit { min-height:44px; overflow-wrap:anywhere; text-align:left; }
#board-detail-overlay .bd-gate { background:var(--surface2); border-radius:10px; padding:12px; margin-top:8px; }
.bd-muted { color:var(--dim); font-size:.8rem; }
.bd-evidence-text { line-height:1.6; white-space:normal; }
#board-detail-overlay .board-detail-footer { background:var(--surface); border-top:1px solid var(--border); padding:12px max(16px, calc((100vw - 1012px)/2)); }
@media (max-width:600px) {
  .board-page-heading { padding:12px 2px 10px; }
  .board-page-heading h1 { font-size:1.65rem; }
  #board-view .board-col:not(.col-collapsed) { flex-basis:82vw; min-width:82vw; max-width:82vw; }
  #board-detail-overlay .board-detail-body { padding:20px 14px 88px; }
  #board-detail-overlay .board-detail-title-input { font-size:1.4rem; }
  .bd-record-properties { grid-template-columns:1fr 1fr; padding:12px 0; }
  .bd-record-properties > div { padding:0 12px; }
  .bd-record-properties > div:last-child { grid-column:1/-1; border-top:1px solid var(--border); padding-top:10px; margin-top:12px; }
  #board-detail-overlay .board-detail-status-btn { min-height:44px; }
}

/* Keep all status and record actions visible at phone widths. */
@media (max-width:600px) {
  #board-detail-overlay .board-detail-status-row { flex-wrap:wrap; overflow:visible; }
  #board-detail-overlay .board-detail-status-btn { flex:1 1 28%; font-size:.75rem; }
  #board-detail-overlay .board-detail-tabs { flex-wrap:wrap; gap:0; overflow:visible; }
  #board-detail-overlay .board-detail-tab { flex:1 1 30%; padding:8px 5px; font-size:.78rem; }
}

/* Compact status editing keeps the task context above the fold on phones. */
#board-detail-overlay .board-detail-status-row { flex-wrap:nowrap; justify-content:space-between; align-items:center; }
.bd-status-control { display:flex; align-items:center; gap:10px; color:var(--dim); font-size:.8rem; }
#bd-status-select { min-height:40px; max-width:190px; border:1px solid var(--border); border-radius:9px; padding:6px 12px; font:inherit; }
#board-detail-overlay .bd-status-empty { background:none; border:0; padding:0 4px; margin:0 0 12px; }
#board-detail-overlay .bd-status-empty .bd-sb-empty { display:flex; align-items:center; gap:8px; font-size:.75rem; }
#board-detail-overlay .bd-status-empty button { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:65%; }
@media (max-width:600px) {
  #board-detail-overlay > .overlay-header { padding:8px 12px; }
  #board-detail-overlay .board-detail-body { padding-top:14px; }
  .bd-record-tags { margin-bottom:10px; }
  .bd-record-properties { margin-bottom:10px; }
  #board-detail-overlay .board-detail-tabs { margin-bottom:10px; }
}

/* Keep the status name readable beside terminal metadata and column actions. */
@media (max-width:600px) {
  #board-view .board-col:not(.col-collapsed) .board-col-identity { display:grid !important; grid-template-columns:24px minmax(0,1fr); row-gap:2px !important; }
  #board-view .board-col:not(.col-collapsed) .board-col-label { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; line-height:1.3; }
  #board-view .board-col:not(.col-collapsed) .col-terminal-chip { grid-column:2; justify-self:start; max-width:none; font-size:.58rem; overflow:visible; text-overflow:clip; }
}

/* Short landscape / keyboard viewports keep the composer inside the screen. */
@media (max-height: 480px) {
  #peek-overlay .peek-cmd-toggle { display:none; }
  #peek-overlay .peek-dir-bar { display:none; }
  #peek-overlay .peek-cmd-row .chips { display:none; }
  #peek-overlay #peek-cmd-input { max-height: min(96px, 24dvh); }
  #peek-overlay .peek-attach-bar { max-height:60px; overflow-y:auto; }
}

.peek-attach-chip button.chip-remove { border:0; padding:0; background:transparent; }
@media (pointer: coarse) {
  #peek-overlay .send-input { font-size:16px; }
}

.card-file-picker { min-width:44px; min-height:44px; margin-bottom:4px; }

/* AF-749: modal space is the visible viewport, including the software keyboard. */
.amux-dialog-viewport {
  /* AMUX-4642. THE CHROME TAB OFFSET HAS TO SURVIVE THIS RULE. AF-749 pins every
     dialog to the visual viewport, and `--dialog-viewport-top` is SET to
     `visualViewport.offsetTop` (app.js), which is 0 on a desktop with no
     keyboard. With `!important` that beat `.file-overlay`'s
     `top: max(var(--chrome-tab-h), ...)`, so the overlay started at y=0 and slid
     UNDER the 38px chrome tab bar, which is fixed at top:0 with z-index 1000.
     Measured in the browser at the failing click: --chrome-tab-h "38px", bar box
     0..38, overlay computed top "0px", the overlay's close button at y 12..52 and
     the bar's "Hide tabs" control at y 18..38, overlapping in both axes. The
     close button was unclickable, which is what reddened LC-LINKED-RECORD.
     max() keeps AF-749's behaviour when the keyboard shifts the viewport, and it
     costs nothing on phones, where the strip is display:none and the JS already
     forces --chrome-tab-h to 0. Same idiom as the .overlay rule below. */
  top: max(var(--dialog-viewport-top, 0px), var(--chrome-tab-h, 0px), env(safe-area-inset-top, 0px)) !important;
  /* Height is the REMAINING viewport below the effective top. Keeping a full
     viewport height after moving down for the tab strip puts the scrollbar's
     end off screen, even when scrollTop has reached its maximum. offsetTop
     belongs to the visual viewport: its bottom is offsetTop + height. */
  height: max(0px, calc(var(--dialog-viewport-height, 100dvh) + var(--dialog-viewport-top, 0px) - max(var(--dialog-viewport-top, 0px), var(--chrome-tab-h, 0px), env(safe-area-inset-top, 0px)))) !important;
  bottom: auto !important;
}
.amux-dialog-viewport > :is(.edit-box,.board-edit-box,.queue-box,.map-modal-box,.amux-modal,.modal) {
  max-height: calc(var(--dialog-viewport-height, 100dvh) - 40px) !important;
}
/* The board backdrop already reserves the warning's measured height in its
   bottom padding. Preserve that reservation when keyboard sizing overrides
   the board box's original max-height (AF-777). */
.amux-dialog-viewport > .board-edit-box {
  max-height: calc(var(--dialog-viewport-height, 100dvh) - 40px - var(--sw-fail-h, 0px)) !important;
}
.orch-heading { display:flex; align-items:center; gap:12px; justify-content:space-between; }
.orch-heading h3 { margin:0; }
.orch-heading button { flex-shrink:0; min-width:44px; min-height:44px; }
.orch-subtitle { color:var(--dim); font-size:0.8rem; margin:8px 0 16px; }

.amux-dialog-viewport:is(#team-scope-modal,#jrnl-config-overlay,#peek-lookup-modal,#conn-hist-modal) > div {
  max-height: calc(var(--dialog-viewport-height, 100dvh) - 40px) !important;
}

/* Connection modal: same dialog on desktop and phone.  The markup used to carry
   the sizing inline in app.js, so the global visual-viewport fixes could not be
   tested and narrow screens produced the cramped, clipped history view seen in
   AMUX-4808.  Keep the shape here so every modal guard can reason about it. */
#conn-hist-modal.conn-hist-overlay {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  box-sizing: border-box;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
}
#conn-hist-modal .conn-hist-box {
  width: min(440px, 100%);
  max-height: calc(var(--dialog-viewport-height, 100dvh) - 40px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
#conn-hist-modal .conn-hist-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -1.2rem -1.2rem 4px;
  padding: 1.2rem 1.2rem 10px;
  position: sticky;
  top: -1.2rem;
  z-index: 2;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
#conn-hist-modal .conn-hist-title { font-size: 1rem; flex: 1; min-width: 0; }
#conn-hist-modal .conn-hist-status { font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
#conn-hist-modal .conn-hist-close { flex-shrink: 0; min-width: 44px; min-height: 44px; }
#conn-hist-modal .conn-hist-subtitle { color: var(--dim); font-size: 0.76rem; margin-bottom: 10px; }
@media (max-width:600px) {
  #conn-hist-modal.conn-hist-overlay {
    align-items: stretch;
    justify-content: stretch;
    padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  }
  #conn-hist-modal .conn-hist-box {
    width: 100%;
    max-width: none;
    max-height: calc(var(--dialog-viewport-height, 100dvh) - 16px);
    border-radius: 14px;
    padding: 16px;
  }
  #conn-hist-modal .conn-hist-head {
    margin: -16px -16px 8px;
    padding: 12px 16px 10px;
    top: -16px;
  }
  #conn-hist-modal .conn-hist-title { font-size: 1rem; }
  #conn-hist-modal .conn-hist-status { max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
  #conn-hist-modal .conn-hist-subtitle { font-size: 0.82rem; line-height: 1.35; }
  #conn-hist-modal .btn { min-height: 44px; }
}
@media (max-width:600px) {
  .amux-dialog-viewport button { min-height:44px; min-width:44px; }
}

.chip-picker-header { display:flex; align-items:center; gap:8px; }
.chip-picker-header input { min-width:0; flex:1; }
.amux-dialog-viewport > :is(.chip-picker,.tts-dialog,.focus-card,.conn-picker,.mdai-picker) {
  max-height: calc(var(--dialog-viewport-height, 100dvh) - 40px) !important;
}
@media (max-width:600px) {
  .overlay-header button, .file-overlay-header button { min-height:44px; min-width:44px; }
}

@media (max-width:600px) {
  #scope-edit-backdrop button { min-height:44px !important; }
  .chip-picker { max-width:calc(100vw - 24px); }
}
#apikey-setup-modal > div {
  max-height:calc(var(--dialog-viewport-height, 100dvh) - 40px); overflow-y:auto; overscroll-behavior:contain;
}

.amux-dialog-backdrop > div, .amux-workspace-dialog > div {
  max-height:calc(var(--dialog-viewport-height, 100dvh) - 40px) !important;
}
.amux-dialog-viewport.overlay {
  top:max(var(--dialog-viewport-top, 0px),var(--chrome-tab-h, 0px),env(safe-area-inset-top, 0px)) !important;
}

#upgrade-modal > div { max-height:calc(var(--dialog-viewport-height, 100dvh) - 40px) !important; }
@media (max-width:600px) { #video-overlay button { min-width:44px; min-height:44px; } }

.vp-heading { display:flex; align-items:center; gap:12px; margin-bottom:8px; color:#fff; }
#vp-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.85rem; }
.vp-heading button { flex-shrink:0; min-width:44px; min-height:44px; background:#20242a; border:1px solid #59616d; border-radius:8px; color:#fff; cursor:pointer; }
@media (max-width:600px) {
  #vp-controls > div:last-child { flex-wrap:wrap; gap:4px !important; }
  #vp-volume { max-width:48px; }
  #teleprompter-overlay button { min-width:44px; min-height:44px; }
}
.conn-picker-overlay { align-items:center; padding:20px 12px; }

/* CSS zoom on <html> breaks position:fixed inset:0 geometry: the overlay
   fills the ZOOMED viewport (1.75x at 175%), so align-items:center puts
   the dialog 69% down the physical screen instead of 50%. Counter the
   root zoom on every fixed modal overlay, then re-apply it on the inner
   dialog box so content matches the rest of the page. */
.edit-overlay,
.modal-overlay,
.modal-backdrop,
.queue-overlay,
.board-edit-overlay,
.focus-overlay,
.map-modal,
.chip-picker-overlay,
.tts-overlay,
.mdai-picker-overlay,
.conn-picker-overlay,
#conn-hist-modal.conn-hist-overlay { zoom: calc(1 / var(--root-zoom, 1)); }

.edit-overlay > .edit-box,
.modal-overlay > .modal,
.modal-backdrop > .modal-box,
.queue-overlay > .queue-box,
.board-edit-overlay > .board-edit-box,
.focus-overlay > .focus-card,
.map-modal > .map-modal-box,
.chip-picker-overlay > .chip-picker,
.tts-overlay > .tts-dialog,
.mdai-picker-overlay > .mdai-picker,
.conn-picker-overlay > .conn-picker,
#conn-hist-modal > .conn-hist-box { zoom: var(--root-zoom, 1); }

.amux-dialog-backdrop,
.amux-workspace-dialog,
#upgrade-modal,
#apikey-setup-modal,
#team-scope-modal,
#jrnl-config-overlay,
#peek-lookup-modal,
[data-ical-modal] { zoom: calc(1 / var(--root-zoom, 1)); }

.amux-dialog-backdrop > div,
.amux-workspace-dialog > div,
#upgrade-modal > div,
#apikey-setup-modal > div,
#team-scope-modal > div,
#jrnl-config-overlay > div,
#peek-lookup-modal > div,
[data-ical-modal] > * { zoom: var(--root-zoom, 1); }

/* AF-750 / AF-751: balanced status controls at desktop and phone widths. */
.header-row { gap:12px; }
.header-row > .header-actions { margin-left:auto; }
.header-row > #interaction-feedback { margin-left:0; }
.header-row #brand-header { font-size:1.3rem; }
/* AMUX-4475: toolbar icon buttons get a consistent bordered box (Ethan,
   2026-09-12: "borders around buttons too" + "make the components all
   consistent"). Every header control now reads as the same boxed button. */
.header-row #notif-btn { width:44px; height:44px; min-width:44px; display:flex; align-items:center; justify-content:center; color:var(--dim); opacity:1 !important; border:1px solid var(--border); background:var(--card); border-radius:8px; }
.header-row #notif-badge { top:0; right:0; border:2px solid var(--bg); height:18px; min-width:18px; border-radius:10px; font-size:9px; }
.header-row .btn-active .active-dot { box-shadow:none; width:6px; height:6px; }
.header-row .btn-rate-limit { color:var(--red); border:1px solid rgba(248,81,73,0.45); background:rgba(248,81,73,0.12); }
/* Status coverage (MSG-69352): amber, it is a confidence warning, not an outage. */
.header-row .btn-telemetry { color:var(--yellow, #d29922); border-color:rgba(210,153,34,0.5); background:rgba(210,153,34,0.12); }
/* Agent state unknown: neutral grey, deliberately not the green of "working". */
.status-badge.unknown { background:rgba(139,148,158,0.18); color:var(--dim); border:1px dashed rgba(139,148,158,0.6); cursor:pointer; }
.status-badge.background { background:rgba(88,166,255,0.14); color:#58a6ff; }
.status-badge.telemetry-warn { background:rgba(210,153,34,0.14); color:var(--yellow, #d29922); margin-left:4px; }
/* Host guard (runtime_jobs/host_guard.rs): same chip as "N limited", amber
   while strained, red at critical, hidden when the host is ok. */
.header-row .btn-host-pressure.strained { color:var(--yellow, #d29922); border-color:rgba(210,153,34,0.5); background:rgba(210,153,34,0.12); }
.header-row .btn-active, .header-row .settings-btn { border:1px solid var(--border); background:var(--card); border-radius:8px; }
.header-row #settings-btn { color:var(--dim); }
.header-row svg { flex-shrink:0; }
.header-row #notif-btn:hover, .header-row .btn-active:hover, .header-row .settings-btn:hover { background:var(--border); }
.header-row .btn-rate-limit:hover { background:rgba(248,81,73,0.22); }
/* The amber chips keep amber when tapped: iOS leaves :hover applied after a
   tap, and the red hover above turned the status chip pink. */
.header-row .btn-telemetry:hover, .header-row .btn-telemetry:active,
.header-row .btn-host-pressure.strained:hover, .header-row .btn-host-pressure.strained:active { background:rgba(210,153,34,0.22); }
.status-why { margin:0 0 12px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-control, 8px); background:var(--bg); }
.status-why p { margin:0 0 6px; }
.status-why p:last-child { margin-bottom:0; }
.status-why-head { font-weight:600; font-size:1rem; }
.status-why-because { color:var(--dim); font-size:0.88rem; }
.status-why-action { font-size:0.9rem; }
details.status-evidence > summary { cursor:pointer; font-weight:600; margin:4px 0 8px; }
.chip-detail-list { list-style:none; margin:8px 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.chip-detail-list > li { padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-control, 8px); background:var(--bg); }
.chip-detail-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.chip-detail-list p { margin:4px 0 0; }
@media (min-width:601px) { .header-row .header-actions { gap:10px !important; } .header-row .settings-btn,.header-row .btn-active,.header-row .btn-rate-limit,.header-row .header-add-btn { min-height:44px; } }
@media (max-width:600px) {
 .header-row { gap:0; }
 .header-row > #interaction-feedback { margin-left:auto; }
 .header-row #conn-status::before { width:9px; height:9px; }
 .header-row #rate-limit-pill-count { font-size:0.85rem; }
 .header-row .header-add-btn { border-radius:12px; font-size:1.35rem; }
}

.header-row #notif-badge { background:#cf222e; }
.header-row :is(button,[role="button"]):focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:8px; }
@media (max-width:600px) {
  .tab-bar { min-width:0; padding-left:8px; }
  .tab-bar button { padding:10px 12px; font-size:0.8rem; min-height:44px; }
  .tab-customize-wrap { padding:0; }
  .tab-customize-btn { min-width:44px; min-height:44px; }
}

/* AF-754: production component contract; Settings → Style guide uses these classes. */
.btn:disabled { opacity:.55; cursor:not-allowed; }
.btn[aria-busy="true"] { cursor:progress; }
.btn:focus-visible, .input:focus-visible, .modal-close:focus-visible { outline:2px solid var(--accent); outline-offset:2px; box-shadow:var(--focus-ring); }
.input[aria-invalid="true"] { border-color:var(--red); }
select.input { height:var(--control-height); }
.ui-field { display:flex; flex-direction:column; gap:var(--space-2); min-width:0; font-size:var(--control-font); }
.ui-help { color:var(--dim); font-size:.8rem; line-height:1.5; }
.ui-error { color:var(--red); font-size:.8rem; }
.ui-guide.modal { max-width:960px; }
.ui-guide .modal-header { gap:var(--space-3); }
.ui-guide .modal-body { display:grid; gap:var(--space-6); }
.ui-guide-section { display:grid; gap:var(--space-3); min-width:0; }
.ui-guide-section h4 { font-size:1rem; }
.ui-guide-row { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); }
.ui-guide-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:var(--space-4); }
.ui-guide-swatch { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-control); }
.ui-guide-swatch i { width:24px; height:24px; border:1px solid var(--border); border-radius:50%; flex-shrink:0; }
.ui-guide code { color:var(--dim); font-size:.8rem; overflow-wrap:anywhere; }
.ui-guide-rule { padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-control); line-height:1.6; }
.ui-guide .modal-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-2); }
@media (max-width:600px) {
  :root { --control-height:44px; --control-font:16px; }
  .btn { min-width:44px; }
  .input, .modal-body .input { font-size:16px; }
}

/* Record tab (AMUX-4625) */
#tab-record.recording .tab-ico { color:var(--red); }
.recorder-wrap { display:flex; flex-direction:column; gap:var(--space-4); padding:var(--space-4); padding-bottom:calc(var(--space-6) + env(safe-area-inset-bottom)); overflow-y:auto; flex:1; min-height:0; max-width:760px; width:100%; box-sizing:border-box; margin:0 auto; }
.recorder-hero { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-4); background:var(--card); border:1px solid var(--border); border-radius:var(--radius-dialog); }
.recorder-btn { width:104px; height:104px; min-width:104px; border-radius:50%; border:3px solid var(--border); background:var(--bg); display:flex; align-items:center; justify-content:center; cursor:pointer; -webkit-tap-highlight-color:transparent; flex-shrink:0; }
.recorder-btn:focus-visible { outline:2px solid var(--accent); box-shadow:var(--focus-ring); }
.recorder-btn-dot { width:44px; height:44px; border-radius:50%; background:var(--red); transition:border-radius .15s ease, width .15s ease, height .15s ease; }
.recorder-btn.recording { border-color:var(--red); }
.recorder-btn.recording .recorder-btn-dot { width:36px; height:36px; border-radius:8px; }
.recorder-readout { display:flex; flex-direction:column; gap:var(--space-2); min-width:0; flex:1; }
.recorder-elapsed { font-size:2rem; font-weight:600; font-variant-numeric:tabular-nums; color:var(--text); line-height:1.1; }
.recorder-level { height:8px; border-radius:4px; background:var(--bg); border:1px solid var(--border); overflow:hidden; }
.recorder-level-fill { height:100%; width:100%; background:var(--green); transform:scaleX(0.02); transform-origin:left center; }
.recorder-status { color:var(--dim); font-size:.85rem; line-height:1.4; overflow-wrap:anywhere; }
.recorder-sync-row { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; justify-content:space-between; }
.recorder-sync-summary { color:var(--dim); font-size:.85rem; min-width:0; }
.recorder-list { display:flex; flex-direction:column; gap:var(--space-2); }
.recorder-note { overflow-wrap:anywhere; }
.recorder-empty { color:var(--dim); font-size:.9rem; padding:var(--space-4) 0; text-align:center; }
.recorder-day { color:var(--dim); font-size:.75rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-top:var(--space-2); }
.recorder-item { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-control); padding:var(--space-3); display:flex; flex-direction:column; gap:var(--space-1); min-width:0; }
.recorder-item-head { display:flex; align-items:baseline; gap:var(--space-2); flex-wrap:wrap; }
.recorder-when { font-weight:600; color:var(--text); }
.recorder-meta { color:var(--dim); font-size:.8rem; }
.recorder-sync { font-size:.85rem; overflow-wrap:anywhere; color:var(--text); }
.recorder-sync-failed { color:var(--red); }
.recorder-sync-recording { color:var(--red); }
.recorder-sync-local, .recorder-sync-syncing { color:var(--yellow); }
.recorder-sync-synced { color:var(--green); }
.recorder-sync-empty { color:var(--dim); }
.recorder-transcript-state { font-size:.8rem; color:var(--dim); }
.recorder-excerpt { font-size:.85rem; color:var(--text); line-height:1.45; overflow-wrap:anywhere; }
.recorder-actions { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-1); }
.recorder-settings { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-control); padding:var(--space-3); }
.recorder-settings summary { cursor:pointer; font-weight:600; min-height:44px; display:flex; align-items:center; }
.recorder-settings[open] summary { margin-bottom:var(--space-2); }
.recorder-dir-row { display:flex; gap:var(--space-2); align-items:center; }
.recorder-dir-row .input { flex:1; min-width:0; }
.recorder-check { display:flex; align-items:center; gap:var(--space-2); min-height:44px; margin:var(--space-2) 0; font-size:var(--control-font); }
.recorder-check input { width:22px; height:22px; }
.recorder-transcript { white-space:pre-wrap; overflow-wrap:anywhere; max-height:55vh; overflow-y:auto; margin-top:var(--space-2); line-height:1.5; }
@media (max-width: 600px) {
  .recorder-wrap { padding:var(--space-3); padding-bottom:calc(var(--space-6) + env(safe-area-inset-bottom)); }
  .recorder-hero { flex-direction:column; text-align:center; }
  .recorder-readout { width:100%; align-items:stretch; }
  .recorder-actions .btn { flex:1 1 auto; min-height:44px; }
  .recorder-sync-row .btn { min-height:44px; }
  .recorder-dir-row { flex-direction:column; align-items:stretch; }
  .recorder-dir-row .btn { min-height:44px; }
}


/* ── A message's context: inline chip + tap block (AMUX-4694) ──────────────
   The chip sits beside the time on every message row. 375px is the width that
   decides it: the meta line already carries a kind badge, a delivery chip, the
   session, the time and MSG-N, so a chip that does not shrink pushes the row
   to two lines and it does that on ALL 100 rows of a page at once, not one.
   Hence the ellipsis and the max-width rather than a fixed size. */
.msg-ctx-chip {
  display:inline-block; font-size:0.6rem; padding:1px 6px; margin-right:6px;
  border-radius:4px; border:1px solid var(--border); background:var(--bg);
  color:var(--dim); cursor:pointer; flex-shrink:0; vertical-align:baseline;
  max-width:11ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.msg-ctx-chip:hover, .msg-ctx-chip:focus-visible { border-color:var(--accent); color:var(--accent); }

.msg-ctx-box {
  background:var(--panel,var(--bg)); border:1px solid var(--border); border-radius:10px;
  padding:16px; min-width:min(320px,92vw); max-width:min(440px,94vw);
  color:var(--text); font-size:0.85rem; box-shadow:0 8px 32px rgba(0,0,0,0.35);
}
.msg-ctx-title { font-weight:600; margin-bottom:10px; font-size:0.9rem; }
.msg-ctx-row { display:flex; gap:10px; padding:5px 0; border-top:1px solid var(--border); }
.msg-ctx-row:first-of-type { border-top:none; }
.msg-ctx-k { color:var(--dim); flex:0 0 33%; min-width:0; word-break:break-word; }
.msg-ctx-v { flex:1; min-width:0; word-break:break-word; }
.msg-ctx-dim { color:var(--dim); font-size:0.75rem; }
.msg-ctx-close { margin-top:12px; width:100%; }

@media (max-width: 600px) {
  /* Touch target, per .claude/rules/css-mobile.md. The chip itself stays small
     because the row is a list item and a 44px chip would set the row height;
     the padding here buys the target without changing the visual size. */
  .msg-ctx-chip { padding:6px; margin:-5px 6px -5px 0; max-width:9ch; }
  .msg-ctx-close { min-height:44px; }
  .msg-ctx-k { flex-basis:38%; }
}

/* The project view keeps outcomes primary; executors are a detail of a task. */
.projects-view{flex:1;min-height:0;padding:24px;max-width:1800px;margin:0 auto;width:100%;box-sizing:border-box;overflow:auto}
.project-heading,.project-status,.project-send{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.project-heading h2{margin:0;font-size:24px}.project-heading p{color:var(--muted);margin:6px 0}.project-heading>div{flex:1}
.project-shell{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:20px;align-items:start}
.project-list{position:sticky;top:12px;display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 120px);overflow:auto}
.project-list-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:0 2px 2px}
.project-list-card{width:100%;text-align:left;display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);cursor:pointer;font:inherit}
.project-list-card:hover,.project-list-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent)}
.project-list-card span{font-size:12px;color:var(--muted);line-height:1.35;overflow:hidden;text-overflow:ellipsis}
.project-list-row{display:flex;align-items:center;gap:8px;justify-content:space-between}.project-list-row strong{min-width:0;overflow:hidden;text-overflow:ellipsis}
.project-pill{font-style:normal;font-size:11px;border-radius:999px;padding:2px 7px;border:1px solid var(--border);white-space:nowrap}.project-pill.active{color:#137333;background:#e7f6ec;border-color:#bbdfc6}.project-pill.paused,.project-pill.review{color:#8a5b00;background:#fff3cd;border-color:#f0d98c}.project-pill.disabled{color:var(--muted);background:var(--card-bg)}.project-pill.done{color:#0b6f3a;background:#e7f6ec;border-color:#bbdfc6}.project-pill.ready{color:var(--muted);background:var(--card-bg)}
.project-detail{min-width:0}.project-command-center{border:1px solid var(--border);border-radius:16px;background:var(--card-bg);padding:16px 18px;margin-bottom:18px}.project-command-center .project-status{margin-bottom:14px;justify-content:space-between}.project-eyebrow{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:4px}.project-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:10px 0 14px}.project-metrics>div{border:1px solid var(--border);border-radius:12px;background:var(--bg);padding:12px}.project-metrics strong{display:block;font-size:18px;line-height:1.2}.project-metrics span{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.project-tabs{display:flex;gap:6px;align-items:center;border-bottom:1px solid var(--border);margin:0 0 16px;overflow-x:auto;scrollbar-width:none}.project-tabs::-webkit-scrollbar{display:none}
.project-tab{appearance:none;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font:inherit;font-weight:600;font-size:13px;min-height:42px;padding:0 14px;cursor:pointer;white-space:nowrap}
.project-tab:hover{color:var(--text)}.project-tab.selected{color:var(--accent);border-bottom-color:var(--accent)}
.project-tab-panel[hidden]{display:none!important}
.project-overview-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;align-items:start}
.project-overview-grid>.project-empty{grid-column:1/-1}
.project-overview-grid>.project-section,.project-overview-grid>.project-evidence-intro,.project-overview-grid>.project-evidence-groups{grid-column:1/-1}
.project-overview-card{grid-column:span 4;border:1px solid var(--border);border-radius:14px;background:var(--card-bg);padding:14px;min-width:0;box-shadow:0 1px 4px rgba(0,0,0,.03)}
.project-overview-card.wide{grid-column:span 8}
.project-next{grid-column:span 5}.project-task-preview{grid-column:span 7}.project-evidence-preview{grid-column:1/-1}
.project-next strong{display:block;font-size:15px;line-height:1.35;margin-bottom:7px}.project-next p{margin-bottom:12px}
.project-task-preview .project-task-table td{overflow-wrap:anywhere}.project-task-preview>.project-muted{margin-top:8px}
.project-overview-grid>.project-section{border:1px solid var(--border);border-radius:12px;background:var(--card-bg);padding:0 14px;margin:0}
.project-overview-grid>.project-section summary{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600}
.project-overview-grid>.project-section .project-context{margin:16px 0}
.project-evidence-intro,.project-evidence-groups{border:1px solid var(--border);border-radius:14px;background:var(--card-bg);padding:16px;min-width:0}
.project-evidence-intro h3,.project-evidence-groups h3{margin:0 0 8px;font-size:16px}.project-evidence-intro p{line-height:1.45;overflow-wrap:anywhere}
.project-evidence-groups .project-section{margin:8px 0;padding:0 10px;border:1px solid var(--border);border-radius:9px}.project-evidence-groups .project-section summary{overflow-wrap:anywhere}
.project-asset-list{list-style:none;padding:0 0 10px;margin:0}.project-asset-list li{padding:7px 0;border-top:1px solid var(--border);overflow-wrap:anywhere}.project-asset-list .project-link{font-size:13px}
.project-update{border-top:1px solid var(--border);margin-top:12px;padding-top:4px}.project-update summary{min-height:44px;cursor:pointer;font-weight:600;color:var(--accent)}.project-update>p{font-size:13px;color:var(--muted);margin:4px 0 12px}
.project-outcome-counts{font-size:13px;color:var(--muted)!important}
.project-outcome{grid-column:1/-1;border:2px solid var(--border);border-radius:16px;background:var(--card-bg);padding:18px;min-width:0}
.project-outcome-passed{border-color:#72c691;background:color-mix(in srgb,#e7f6ec 72%,var(--card-bg))}.project-outcome-review{border-color:#e4b64c;background:color-mix(in srgb,#fff7df 74%,var(--card-bg))}.project-outcome-failed{border-color:#ef8b7f;background:color-mix(in srgb,#fff1ee 76%,var(--card-bg))}.project-outcome-running{border-color:var(--accent)}
.project-outcome-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.project-outcome-heading h3{font-size:20px;line-height:1.25;margin:0}.project-outcome>p{font-size:14px;line-height:1.5;color:var(--text);max-width:920px;margin:10px 0 0}
.project-outcome-badge{display:inline-flex;align-items:center;min-height:30px;border:1px solid currentColor;border-radius:999px;padding:2px 10px;white-space:nowrap;font-size:12px}.project-outcome-passed .project-outcome-badge{color:#137333}.project-outcome-review .project-outcome-badge{color:#8a5b00}.project-outcome-failed .project-outcome-badge{color:#b42318}.project-outcome-running .project-outcome-badge{color:var(--accent)}
.project-outcome-checklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px;list-style:none;padding:0;margin:14px 0 0}.project-outcome-checklist li{display:flex;align-items:flex-start;gap:9px;border:1px solid var(--border);border-radius:10px;background:var(--bg);padding:10px;min-width:0}.project-outcome-checklist li>div{min-width:0;overflow-wrap:anywhere}.project-outcome-checklist li>span{width:12px;height:12px;flex:0 0 12px;margin-top:3px;border-radius:50%;border:2px solid var(--border)}.project-outcome-checklist li.passed>span{border-color:#22a55a;background:#22a55a}.project-outcome-checklist li.failed>span{border-color:#dc3f36;background:#dc3f36}.project-outcome-checklist strong,.project-outcome-checklist small{display:block}.project-outcome-checklist strong{font-size:12px;line-height:1.35}.project-outcome-checklist small{color:var(--muted);font-size:11px;margin-top:3px}.project-outcome-warning{padding:10px 12px;border-radius:10px;background:var(--bg);color:#9a3412!important}.project-outcome-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.project-receipt-summary{margin:8px 0;padding:8px 10px;border:1px solid #b7dfc5;border-radius:8px;background:#f1fbf4;color:#14532d;font-size:12px;overflow-wrap:anywhere}
.project-overview-card h3{font-size:14px;line-height:1.25;margin:0 0 10px;color:var(--text)}
.project-overview-card p{font-size:13px;line-height:1.45;color:var(--muted);margin:0}
.project-card-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.project-card-heading h3{margin:0}
.project-link{appearance:none;border:0;background:transparent;color:var(--accent);font:inherit;font-size:12px;font-weight:600;padding:0;cursor:pointer;text-align:left}.project-link:hover{text-decoration:underline}
.project-timeline{display:grid;grid-template-columns:repeat(5,minmax(88px,1fr));gap:0;position:relative;overflow-x:auto;padding:4px 0 2px}
.project-timeline:before{content:"";position:absolute;left:20px;right:20px;top:15px;height:2px;background:var(--border)}
.project-timeline-step{position:relative;z-index:1;display:flex;flex-direction:column;gap:5px;align-items:flex-start;min-width:88px;color:var(--muted);font-size:12px}
.project-timeline-step span{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);background:var(--card-bg);box-shadow:0 0 0 4px var(--card-bg)}
.project-timeline-step.done span{border-color:#22a55a;background:#22a55a}
.project-timeline-step strong{font-size:12px;color:var(--text)}.project-timeline-step small{font-size:11px;color:var(--muted)}
.project-task-table{width:100%;border-collapse:collapse;font-size:12px}.project-task-table th{text-align:left;color:var(--muted);font-size:11px;font-weight:700;border-bottom:1px solid var(--border);padding:6px}.project-task-table td{border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent);padding:7px 6px;vertical-align:top}.project-task-table tr:last-child td{border-bottom:0}
.project-status-chip{display:inline-flex;align-items:center;border-radius:999px;padding:2px 7px;background:var(--bg);border:1px solid var(--border);font-size:11px;color:var(--muted);white-space:nowrap}.project-status-chip.working,.project-status-chip.verifying{color:#8a5b00;background:#fff7df;border-color:#f0d98c}.project-status-chip.verified{color:#137333;background:#e7f6ec;border-color:#bbdfc6}.project-status-chip.waiting{color:#9a3412;background:#fff1e8;border-color:#f3c2a5}
.project-worker-card{grid-column:span 6}
.project-worker-card .project-card-heading{min-width:0;flex-wrap:wrap}
.project-worker-card .project-card-heading h3{min-width:0;overflow-wrap:anywhere}
.project-worker-card .project-context{margin-bottom:12px}
.project-worker-card .project-context dd{word-break:break-word}
.project-worker-card .project-worker-actions{margin:10px 0}.project-worker-card .project-section{margin-bottom:0}.project-worker-card .project-section summary{min-height:44px}
.project-status-chip.active{color:#137333;background:#e7f6ec;border-color:#bbdfc6}
.project-status-chip.paused,.project-status-chip.review,.project-status-chip.archived{color:#8a5b00;background:#fff3cd;border-color:#f0d98c}
.project-status-chip.expired{color:#475569;background:#f1f5f9;border-color:#cbd5e1}
.project-status-chip.missing{color:#9a3412;background:#fff1e8;border-color:#f3c2a5}
@media(max-width:700px){.project-worker-card{grid-column:1/-1}}
.project-run-list,.project-evidence-summary{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.project-run-list li,.project-evidence-summary li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;font-size:12px;color:var(--muted);min-height:26px}
.project-run-list li>span:nth-child(3){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}.project-run-list small{font-size:11px;color:var(--muted)}
.project-run-dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--border);background:var(--bg)}.project-run-dot.ok{background:#22a55a;border-color:#22a55a}
.project-evidence-summary li{grid-template-columns:minmax(0,1fr) auto}.project-evidence-summary strong{font-size:13px;color:var(--text)}
.project-context{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 12px;margin:0;font-size:12px}.project-context dt{color:var(--muted)}.project-context dd{margin:0;color:var(--text);overflow-wrap:anywhere}
@media(max-width:900px){.project-shell{grid-template-columns:1fr}.project-list{position:static;max-height:none}.project-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1100px){.project-overview-card,.project-overview-card.wide{grid-column:span 6}.project-timeline{grid-template-columns:repeat(5,120px)}}
@media(max-width:700px){.project-overview-card,.project-overview-card.wide{grid-column:1/-1}}
@media(max-width:600px){.project-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.project-command-center{padding:14px}.project-select-control{width:100%}.project-tab{min-height:44px;padding:0 12px}.project-outcome{padding:14px}.project-outcome-heading{flex-direction:column}.project-outcome-badge{min-height:36px}.project-outcome-checklist{grid-template-columns:minmax(0,1fr)}.project-outcome-actions .btn{width:100%;min-height:44px}}
.projects-view label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.projects-view input,.projects-view select,.projects-view textarea{font:inherit;padding:11px;border:1px solid var(--border);border-radius:9px;background:var(--bg);color:var(--text);box-sizing:border-box;min-width:0}
.projects-view textarea{width:100%;resize:vertical;margin:8px 0}.project-composer-label{margin-top:20px}
.project-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.project-settings{padding:16px;border:1px solid var(--border);border-radius:12px;margin-top:20px}.project-settings summary{cursor:pointer;font-weight:600;margin-bottom:12px}
.project-draft-box{padding:14px;border:1px solid var(--accent);border-radius:12px;margin-bottom:20px;background:var(--card-bg)}.project-draft-box textarea{margin-top:6px}
.project-columns{display:flex;gap:16px;overflow-x:auto;padding:12px 0 20px}.project-column{flex:1;min-width:240px;max-width:360px}.project-column h3{font-size:13px;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between}
.project-card{padding:16px;margin-bottom:12px;border:1px solid var(--border);border-radius:12px;background:var(--bg)}.project-card h4{margin:8px 0;font-size:16px;line-height:1.4}.project-card p{font-size:13px;line-height:1.5}.project-card small,.project-empty,.project-usage{color:var(--muted)}
.project-working{border-color:#28a455;box-shadow:0 0 0 1px #28a455}.project-wait{color:#986000}.project-card pre,.project-settings pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}.project-intake{border-left:3px solid #d09515;padding:12px;margin-bottom:12px;background:var(--card-bg)}
#project-error{color:var(--error);white-space:pre-wrap}.project-card .btn{margin-top:8px}.project-usage{font-size:13px;line-height:1.6}
@media(max-width:600px){.projects-view{padding:16px}.project-heading{align-items:stretch}.project-heading>div{flex-basis:100%}.project-columns{flex-direction:column;overflow-x:visible}.project-column{min-width:0;max-width:none;width:100%}.project-form-grid{grid-template-columns:1fr}}

#orch-projects ul{padding-left:20px;overflow-wrap:anywhere}

[data-worker-action][aria-disabled="true"] { opacity: .55; cursor: wait; }

/* Project-first workspace: concise board cards, one task inspector (AAB-11) */
.project-summary{margin:0 0 16px}.project-progress{font-size:15px;font-weight:600}.project-acceptance{margin-top:4px;font-size:14px}.project-muted{color:var(--muted);font-size:13px}
.project-review-assets{margin:10px 0;padding:10px;border:1px solid var(--border);border-radius:8px}.project-review-assets>div{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.project-owner-notes p,.project-owner-notes li{font-size:12px;line-height:1.45;overflow-wrap:anywhere}.project-owner-notes ul{padding-left:20px;margin:8px 0 0}
.project-workspace{display:grid;grid-template-columns:minmax(0,3fr) minmax(320px,2fr);gap:20px;align-items:start}
.project-workspace .project-columns{flex-wrap:wrap}.project-workspace .project-column{min-width:200px}
.project-card-select{display:block;width:100%;min-height:44px;text-align:left;background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}.project-card-select strong{display:block;margin-top:6px;font-size:15px;line-height:1.4}.project-card-action{margin-top:8px;padding:5px 9px;font-size:12px;min-height:30px}
.project-card-select:focus-visible,.project-inspector:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.project-selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.project-inspector{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
.project-inspector h3{margin:0 0 6px;font-size:16px;line-height:1.4;overflow-wrap:anywhere}.project-inspector pre,.project-report{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.5;max-width:100%}
.project-section{margin:12px 0;border-top:1px solid var(--border);padding-top:10px}.project-section summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.project-criteria{padding-left:20px}.project-criteria li{margin-bottom:10px}.project-criteria small{display:block;overflow-wrap:anywhere}
.project-facts{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px}.project-facts dt{color:var(--muted)}.project-facts dd{margin:0;overflow-wrap:anywhere}
.project-failure{border-left:3px solid var(--error);padding:8px 12px;margin:8px 0;background:var(--card-bg)}.project-actions .btn{margin-top:8px;min-height:44px}
.project-error-box{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.project-legacy{margin-left:auto}#project-settings-state{color:var(--muted);font-size:13px}
.launch-legacy-note{font-size:.8rem;color:var(--dim);margin:0 0 8px}
@media(max-width:600px){.project-workspace{grid-template-columns:1fr}.project-inspector{position:static;max-height:none}.project-card-select,.project-legacy{min-height:44px}.project-facts{grid-template-columns:1fr}}
/* The project selector already provides navigation on narrow screens. Avoid
   repeating the full sidebar above the actual project work. */
@media(max-width:600px){.project-list{display:none}.project-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-bottom:14px}.project-hero>div{grid-column:1/-1}.project-hero p{display:none}.project-hero .project-select-control{min-width:0}.project-hero select{width:100%;max-width:100%}.project-hero>.btn{align-self:end;min-height:44px}}

.board-legacy-badge{font-size:.6em;font-weight:600;padding:2px 8px;border:1px solid var(--border);border-radius:999px;color:var(--muted);vertical-align:middle}
.project-diagnostic{max-height:320px;overflow:auto;border:1px solid var(--border);border-radius:8px;padding:8px}.project-cause{overflow-wrap:anywhere}

.offline-cache-gate, .offline-cache-banner { border:1px solid #f8514988; background:rgba(248,81,73,0.08); border-radius:12px; padding:16px; color:var(--text); }
.offline-cache-gate { display:flex; gap:16px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.offline-cache-gate p { margin:8px 0 0; color:var(--dim); line-height:1.45; }
.offline-cache-gate-meta { font-size:0.82rem; }
.offline-cache-gate-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.offline-cache-gate-actions .btn, .offline-cache-banner .btn { min-height:40px; display:inline-flex; align-items:center; text-decoration:none; }
.offline-cache-banner { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
@media (max-width: 640px) {
  .offline-cache-gate, .offline-cache-banner { padding:14px; }
  .offline-cache-gate-actions { width:100%; }
  .offline-cache-gate-actions .btn, .offline-cache-banner .btn { width:100%; justify-content:center; }
}

.project-closeout{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);border-radius:12px;background:rgba(34,197,94,.08);padding:12px;margin-top:12px;min-width:0}.project-overview-grid>.project-closeout{grid-column:1/-1}.project-closeout.compact{margin:10px 0 0}.project-closeout p{margin:3px 0 0;color:var(--muted);font-size:12px;line-height:1.35}.project-closeout .btn{white-space:normal;overflow-wrap:anywhere}@media(max-width:700px){.project-closeout{align-items:stretch;flex-direction:column}.project-closeout .btn{width:100%;min-height:44px}}
.project-path-link{appearance:none;border:0;background:transparent;color:var(--accent);font:inherit;text-align:left;padding:0;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:baseline}
.project-path-link:hover{text-decoration:underline}.project-path-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}.project-card-path{display:block;min-width:0}.project-card-path .project-path-link{display:block}

.peek-board-config{display:flex;flex-wrap:wrap;gap:4px 16px;padding:4px 10px 8px;font-size:0.78rem;color:var(--dim);}
.pbc-row{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:36px;cursor:pointer;flex:1 1 calc(50% - 16px);min-width:180px;}
.pbc-row input{width:18px;height:18px;margin:0;flex:0 0 auto;}
.pbc-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pbc-own{font-size:0.6rem;color:var(--accent);vertical-align:middle;}
.pbc-disabled{opacity:0.5;pointer-events:none;}
.pbc-note{flex-basis:100%;font-size:0.72rem;color:var(--dim);padding:2px 0;}
@media(max-width:600px){.pbc-row{flex-basis:100%;min-width:0;}}

/* Offline mode (service worker) unavailable: a dot on the connection badge, and
   the full reason inside the Connection modal. Replaces the fixed red bar. */
.conn-status.no-offline::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: var(--yellow, #d29922); vertical-align: middle; }
.conn-sw-notice { margin: 8px 0; padding: 8px 10px; border-radius: 8px; font-size: 0.8rem; line-height: 1.45; background: rgba(210,153,34,0.1); color: var(--text); }
.conn-sw-notice .btn { margin-left: 6px; min-height: 44px; }

/* Live reads failing: the cached fleet stays usable, its statuses read as last-known. */
.cards.workers-stale .status-badge { filter: grayscale(1); opacity: 0.55; }

/* "All shown (N)": acts on every worker the list is currently showing. */
/* Just after the last group pill, scrolling with the row (Ethan, 2026-09-24:
   "it should just be after the right most one"), not pinned to the edge. */
.tag-filter.bulk-visible-btn { font: inherit; font-size: 0.72rem; cursor: pointer; min-height: 32px; border-style: dashed; }
.tag-filter.bulk-visible-btn:disabled { opacity: 0.5; cursor: default; }
.bulk-visible-names { display: flex; flex-wrap: wrap; gap: 4px; max-height: 160px; overflow-y: auto; margin-bottom: 14px; }
.bulk-visible-names span { font-size: 0.78rem; padding: 2px 8px; border-radius: 6px; background: rgba(127,127,127,0.12); }
.bulk-visible-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.bulk-visible-actions .btn { min-height: 44px; }
@media (max-width: 600px) { .tag-filter.bulk-visible-btn { min-height: 44px; } }
/* The bulk button's 44px touch height must not stretch the group pills. */
.tag-filters { align-items: center; }

/* Hanging indent for wrapped peek lines: continuation lines sit under the
   text, not at the left edge, as they do in the terminal (see _hangIndent). */
.pk-hang { display: inline-block; max-width: 100%; box-sizing: border-box; vertical-align: top;
  padding-left: var(--h); text-indent: calc(-1 * var(--h)); }

/* Settings → Integrations → Vault */
.vault-item { border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin: 8px 0; font-size: 0.82rem; }
.vault-item-head { margin-bottom: 6px; overflow-wrap: anywhere; }
.vault-pending { color: var(--yellow, #d29922); }
.vault-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.vault-actions .btn { min-height: 44px; }
.vault-sub-label { margin-top: 14px; }
.scope-vault { margin-top: 10px; }
/* The failed-op dismiss moved from the homepage banner into the status modal
   (07b42586) as a bare glyph with 2px of padding; a phone needs 44px. */
.conn-op-dismiss { background: none; border: none; color: var(--dim); cursor: pointer; font-size: 0.9rem;
  min-width: 44px; min-height: 44px; margin: -12px -8px -12px 0; display: inline-flex; align-items: center; justify-content: center; }
.scope-vault-list { margin: 4px 0 8px; padding-left: 18px; font-size: 0.8rem; overflow-wrap: anywhere; }
.scope-vault .btn { min-height: 44px; }
.vault-secret-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 10px; align-items: end; margin-top: 10px; }
.vault-secret-form .input { min-height: 44px; width: 100%; box-sizing: border-box; }
.vault-secret-form .btn { min-height: 44px; }
.vault-secret-form .ui-error { grid-column: 1 / -1; margin: 0; }
.vault-secret-form .ui-error:empty { display: none; }
@media (max-width: 600px) { .vault-secret-form { grid-template-columns: 1fr; } }
.tag-filter.tag-reset-btn { font: inherit; font-size: 0.72rem; cursor: pointer; color: var(--accent); }
@media (max-width: 600px) { .tag-filter.tag-reset-btn { min-height: 44px; } }

/* Reconnect checklist: a checkbox per row that ticks as each write lands. */
.sync-item { display: flex; align-items: center; gap: 8px; padding: 3px 0; transition: opacity .2s; }
.sync-item .sync-box { flex: 0 0 auto; width: 16px; height: 16px; border: 1.5px solid var(--dim); border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; }
.sync-item.running .sync-box { border-color: var(--accent); border-top-color: transparent; border-radius: 50%; animation: sync-spin .8s linear infinite; }
.sync-item.done .sync-box { background: var(--green, #3fb950); border-color: var(--green, #3fb950); color: #fff; animation: sync-pop .25s ease-out; }
.sync-item.failed .sync-box { background: var(--red, #f85149); border-color: var(--red, #f85149); color: #fff; }
.sync-item.pending, .sync-item.waiting { opacity: .7; }
@keyframes sync-spin { to { transform: rotate(360deg); } }
@keyframes sync-pop { 0% { transform: scale(.4); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .sync-item .sync-box { animation: none !important; } }

/* Compact worker-group bars (project workers, paused, expired, archived):
   Ethan, 2026-09-24, "make these narrower". Desktop drops to ~34px; phones
   keep the 44px touch target the mobile rules require. */
.worker-group-footer { min-height: 34px; padding: 3px 6px 3px 12px; margin-top: 6px; }
.worker-group-menu summary { width: 30px; min-height: 26px; font-size: 16px; border-radius: 6px; }
@media (max-width: 600px) {
  .worker-group-footer { min-height: 44px; padding: 0 0 0 12px; }
  .worker-group-menu summary { width: 44px; min-width: 44px; min-height: 44px; }
}

/* Chat: media fits the bubble; code and tables scroll inside it, never widen it. */
.chat-bubble img, .chat-bubble video { max-width: 100%; height: auto; border-radius: 6px; display: block; margin: 6px 0; }
.chat-bubble audio { max-width: 100%; }
.chat-bubble pre { max-width: 100%; overflow-x: auto; }
.chat-bubble .table-scroll { max-width: 100%; overflow-x: auto; }
.chat-bubble a[href^="streamdown:"], .chat-bubble a:not([href]) { color: inherit; text-decoration: none; pointer-events: none; }
.chat-bubble pre { background: rgba(127,127,127,0.12); border-radius: 6px; padding: 8px 10px; font-size: 0.8rem; line-height: 1.45; }
.chat-bubble :not(pre) > code { background: rgba(127,127,127,0.14); border-radius: 4px; padding: 1px 4px; font-size: 0.88em; }
.chat-bubble table { border-collapse: collapse; margin: 6px 0; font-size: 0.85rem; }
.chat-bubble th, .chat-bubble td { border: 1px solid var(--border); padding: 4px 8px; text-align: left; vertical-align: top; }
/* The bubble wraps with overflow-wrap:anywhere, which lets a table cell's
   minimum width fall to one character: on a phone a table's first column came
   out one letter wide ("W o r k er", 2026-09-29). Cells break only between
   words; a table wider than the bubble scrolls sideways in .table-scroll. */
.chat-bubble th, .chat-bubble td { overflow-wrap: normal; word-break: normal; min-width: 4ch; }
.chat-bubble .table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chat-bubble th { background: rgba(127,127,127,0.08); }
.chat-bubble h1, .chat-bubble h2, .chat-bubble h3 { margin: 4px 0 6px; line-height: 1.25; }
.chat-bubble h1 { font-size: 1.15rem; } .chat-bubble h2 { font-size: 1.05rem; } .chat-bubble h3 { font-size: 0.98rem; }

/* Worker Shell tab: shell schedules run on this machine; their output streams here. */
.peek-shell-panel { padding: 10px 12px; gap: 10px; overflow-y: auto; }
.peek-shell-head { display: flex; flex-direction: column; gap: 2px; }
.peek-shell-sub, .peek-shell-meta, .peek-shell-empty { font-size: 0.75rem; color: var(--dim); }
.peek-shell-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.peek-shell-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; font-size: 0.85rem; }
.peek-shell-status { font-size: 0.7rem; font-weight: 600; padding: 1px 6px; border-radius: 3px; background: rgba(127,127,127,0.14); white-space: nowrap; }
.peek-shell-status.st-running { background: rgba(210,153,34,0.18); color: var(--yellow, #d29922); animation: peek-shell-pulse 1.4s ease-in-out infinite; }
.peek-shell-status.st-ok, .peek-shell-status.st-delivered { background: rgba(63,185,80,0.15); color: #3fb950; }
.peek-shell-status.st-error, .peek-shell-status.st-failed, .peek-shell-status.st-refused { background: rgba(248,81,73,0.15); color: #f85149; }
.peek-shell-cmd { overflow-wrap: anywhere; }
.peek-shell-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.peek-shell-actions .btn, .peek-shell-actions select { min-height: 36px; }
@media (max-width: 600px) { .peek-shell-actions .btn, .peek-shell-actions select { min-height: 44px; } }
.peek-shell-out { margin: 0; max-height: 360px; overflow: auto; background: #010409; color: #c9d1d9; border-radius: 6px; padding: 8px 10px; font-size: 0.74rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
@keyframes peek-shell-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* NEEDS INPUT (AMUX-5277): a worker blocked on the owner's own card. Orange,
   distinct from working (green), plain waiting (yellow), rate limited (red)
   and steering (purple). A 44px tap target because tapping it opens the card. */
.status-badge.needs-input { display:inline-flex; flex-direction:column; align-items:stretch; overflow:hidden; min-width:0; justify-content:center; min-height:44px; box-sizing:border-box; padding:4px 10px; max-width:min(100%, 320px); background:rgba(240,136,62,0.16); color:#f0883e; border:1px solid rgba(240,136,62,0.6); font-weight:600; cursor:pointer; text-align:left; line-height:1.25; font:inherit; font-size:0.78rem; }
.status-badge.needs-input .ni-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.status-badge.needs-input .ni-ask { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400; font-size:0.72rem; opacity:0.9; text-transform:none; letter-spacing:normal; }
.status-badge.needs-input:hover, .status-badge.needs-input:active { background:rgba(240,136,62,0.26); }
body.light .status-badge.needs-input { color:#bc4c00; border-color:rgba(188,76,0,0.5); background:rgba(188,76,0,0.1); }
#peek-session-status .status-badge.needs-input { max-width:min(46vw, 280px); }
.header-row .btn-needs-input { color:#f0883e; border:1px solid rgba(240,136,62,0.6); background:rgba(240,136,62,0.14); }
.header-row .btn-needs-input:hover, .header-row .btn-needs-input:active { background:rgba(240,136,62,0.26); }
body.light .header-row .btn-needs-input { color:#bc4c00; border-color:rgba(188,76,0,0.5); background:rgba(188,76,0,0.1); }

/* ── Needs-input triage sheet (AMUX-5286) ────────────────────────────────────
   One item at a time. Full screen on phones with the actions in the thumb
   zone at the bottom; a centered modal on desktop. Every control is 44px. */
.ni-overlay.modal-overlay {
  top: max(var(--chrome-tab-h, 0px), env(safe-area-inset-top, 0px));
}
.ni-overlay .ni-modal { max-width:620px; max-height:min(88dvh, 760px); }
.ni-head { display:flex; align-items:baseline; gap:10px; min-width:0; }
.ni-counter { color:var(--dim); font-size:0.85rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ni-nav { display:flex; align-items:center; gap:6px; }
.ni-nav .btn { min-width:44px; min-height:44px; padding:0 10px; font-size:1.3rem; line-height:1; }
.ni-nav .modal-close { min-height:44px; }
.ni-body { display:flex; flex-direction:column; gap:12px; flex:1; min-height:0; touch-action:pan-y; }
.ni-meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:0.8rem; }
.ni-meta > span { padding:3px 8px; border-radius:999px; border:1px solid var(--border); color:var(--dim); }
.ni-meta .ni-worker { color:var(--text); font-weight:600; }
.ni-meta .ni-card { font-family:var(--mono, ui-monospace, monospace); }
.ni-meta .ni-cat { color:#f0883e; border-color:rgba(240,136,62,0.6); background:rgba(240,136,62,0.12); font-weight:600; }
.ni-question { font-size:1.22rem; line-height:1.4; font-weight:600; color:var(--text); margin:0; overflow-wrap:anywhere; white-space:pre-wrap; }
.ni-unblocks, .ni-email { font-size:0.9rem; line-height:1.45; color:var(--text); overflow-wrap:anywhere; }
.ni-email { display:grid; gap:4px; }
.ni-label { color:var(--dim); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.04em; margin-right:4px; }
.ni-context summary { cursor:pointer; color:var(--dim); font-size:0.85rem; min-height:44px; display:flex; align-items:center; }
.ni-context pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:0.8rem; line-height:1.45; max-height:30dvh; overflow:auto; margin:0; padding:8px 10px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-control); }
.ni-panel { display:flex; flex-direction:column; gap:8px; }
.ni-panel textarea.input { font-size:16px; min-height:88px; resize:vertical; }
.ni-chips { display:flex; flex-wrap:wrap; gap:6px; }
.ni-chip { min-height:44px; }
.ni-footer { display:flex; flex-direction:column; gap:8px; padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
.ni-actions { display:flex; gap:8px; }
.ni-actions .btn { flex:1; min-height:44px; min-width:0; padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ni-actions:first-child .btn { min-height:52px; font-size:1rem; font-weight:600; }
.ni-approve { background:var(--green, #2ea043) !important; border-color:var(--green, #2ea043) !important; color:#fff !important; }
.ni-secondary .btn { font-size:0.85rem; }
.ni-wide { width:100%; min-height:52px; }
.ni-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; flex:1; padding:40px 0; color:var(--dim); font-size:1.1rem; }
.ni-empty-mark { font-size:2.4rem; color:var(--green, #2ea043); }
.ni-actions .btn:disabled { opacity:0.45; }
@media (max-width: 600px) {
  .ni-overlay.modal-overlay { padding:0; align-items:flex-start; background:var(--card); }
  .ni-overlay .ni-modal { max-width:none; max-height:none; height:var(--dialog-viewport-height, 100dvh); border-radius:0; border:none; padding-top:env(safe-area-inset-top); box-sizing:border-box; }
  .ni-secondary { flex-wrap:wrap; }
  .ni-secondary .btn { flex:1 1 calc(50% - 4px); }
}

/* "Show N older" (stale or stopped workers) beside the triage counter. */
.ni-older-toggle { margin-left: 8px; background: none; border: 1px solid var(--border); border-radius: 999px;
  color: var(--dim); font-size: 0.75rem; padding: 4px 10px; min-height: 32px; cursor: pointer; }
@media (max-width: 600px) { .ni-older-toggle { min-height: 44px; } }

/* Approve all: header button and the confirmation that replaces the footer. */
.ni-approve-all { margin-left: 8px; background: var(--green, #1a7f37); color: #fff; border: none; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; min-height: 32px; cursor: pointer; }
@media (max-width: 600px) { .ni-approve-all { min-height: 44px; } }
.ni-confirm-all p { margin: 0 0 10px; line-height: 1.45; }

/* Needs-input auto-approve (AMUX-5301): header toggle, policy rows, list. */
.ni-head { flex-wrap: wrap; row-gap: 4px; }
.ni-auto-btn { margin-left: 8px; background: none; border: 1px solid var(--border); border-radius: 999px;
  color: var(--dim); font-size: 0.75rem; padding: 4px 10px; min-height: 32px; cursor: pointer; }
.ni-auto-btn.on { color: var(--green, #2ea043); border-color: var(--green, #2ea043); }
@media (max-width: 600px) { .ni-auto-btn { min-height: 44px; } }
.ni-auto { display: flex; flex-direction: column; gap: 10px; font-size: 0.85rem; }
.ni-auto-summary { font-weight: 600; font-size: 0.95rem; line-height: 1.4; color: var(--text); margin: 0; }
.ni-auto-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ni-auto-copy { flex: 1; min-width: 0; }
.ni-auto-label { font-weight: 600; color: var(--text); }
.ni-auto-note { color: var(--dim); font-size: 0.75rem; line-height: 1.4; margin-top: 2px; }
.ni-auto-note.warn { color: #f0883e; }
.ni-auto-src { font-size: 0.65rem; color: var(--dim); margin-left: 4px; font-weight: 400; }
.ni-auto-src.here { color: var(--accent); }
.ni-auto-ctl { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.ni-auto-ctl .btn { min-height: 44px; min-width: 56px; font-size: 0.78rem; padding: 0 10px; }
.ni-auto-ctl input { width: 76px; min-height: 44px; font-size: 16px; padding: 0 8px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--card); color: var(--text); box-sizing: border-box; }
.ni-auto-list { display: flex; flex-direction: column; }
.ni-auto-item { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 0.78rem; line-height: 1.4; overflow-wrap: anywhere; }
.ni-auto-item .ni-auto-out { font-weight: 600; }
.ni-auto-item .ni-auto-out.approved { color: var(--green, #2ea043); }
.ni-auto-item .ni-auto-out.refused { color: #f85149; }
.ni-auto-h { font-weight: 600; font-size: 0.8rem; margin: 6px 0 0; color: var(--text); }

/* Video inside the file viewer: the header (name + folder path) stays above it. */
.file-overlay-body.file-video { display: flex; align-items: center; justify-content: center; padding: 12px; }
.file-video-wrap { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 1100px; }
.file-video { width: 100%; max-height: calc(100dvh - 220px); background: #000; border-radius: 8px; }
.file-video-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--dim); font-size: 0.8rem; }
.file-video-meta .btn { min-height: 44px; }
/* Continue/Enter/Up/Down are terminal keystrokes; the Chat tab has its own
   composer, so the terminal quick chips do not belong under it. */
#peek-overlay:has(#peek-body.peek-chat) #peek-chips { display: none; }
/* Says when the worker-list filters narrow a section ("3 paused (group amux · 22 total)"). */
.worker-group-scope { color: var(--dim); font-weight: 400; font-size: 0.85em; }
/* Needs-input ask: its own full-width row under the peek title (2026-10-01). */
.peek-needs-input-row { display: flex; justify-content: center; width: 100%; min-width: 0; }
.peek-needs-input-row[hidden] { display: none; }
.peek-needs-input-row .status-badge.needs-input { max-width: 100%; width: min(100%, 560px); }
.peek-needs-input-row .status-badge.needs-input .ni-ask { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Answer box at the top of a card waiting on the owner (2026-10-01). */
.bd-answer { margin: 8px 0 12px; padding: 12px; border: 1px solid rgba(240,136,62,0.6); background: rgba(240,136,62,0.10); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }
.bd-answer[hidden] { display: none; }
.bd-answer-head { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #f0883e; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bd-answer-x { background: none; border: none; color: var(--dim); width: 32px; height: 32px; margin: -6px -6px -6px 0; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.bd-answer-x:hover { color: var(--text); background: rgba(240,136,62,0.16); }
@media (max-width: 600px) { .bd-answer-x { width: 44px; height: 44px; } }
body.light .bd-answer-head { color: #bc4c00; }
.bd-answer-ask { font-size: 0.9rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.bd-answer-text { width: 100%; box-sizing: border-box; min-height: 72px; resize: vertical; font: inherit; }
.bd-answer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bd-answer-actions .btn { min-height: 44px; }
.bd-answer-to { font-size: 0.75rem; color: var(--dim); }
/* Worker Messages tab: Ask and Export sit in the row on wide screens and fold
   into an ellipsis menu on a phone. */
#peek-messages-panel .pm-more { display: none; margin-left: 0; flex: 0 0 auto; }
@media (max-width: 600px) {
  #peek-messages-panel .pm-wide { display: none; }
  #peek-messages-panel .pm-more { display: block; }
  #peek-messages-panel .pm-more summary { width: 44px; min-width: 44px; min-height: 44px; }
  /* The date picker moves into the menu too, so search gets the row. */
  /* The inline min-width:0 beat a plain rule; the count shrinks first instead. */
  #peek-messages-search { min-width: 150px !important; }
  #peek-messages-count { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  #peek-messages-panel .pm-date-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; font-size: .8rem; color: var(--text); min-height: 44px; }
  #peek-messages-panel .pm-date-item input { font-size: .8rem; padding: 4px 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
}

/* Map details tabs: Pins | Location history (AMUX-5458). */
.map-tabs { display: flex; gap: 4px; padding: 6px 10px 0; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.map-tab { flex: 1; min-height: 36px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--dim); font: inherit; font-size: 0.8rem; cursor: pointer; }
.map-tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.map-pins-pane, .map-loc-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.map-pins-pane[hidden], .map-loc-pane[hidden] { display: none; }
.map-loc-daypane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.map-loc-stats { flex: 1; min-height: 0; overflow-y: auto; }
.map-loc-daypane[hidden], .map-loc-stats[hidden], .map-loc-overview[hidden] { display: none; }
.map-loc-views { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.map-loc-view.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.map-loc-period { width: 100%; margin-bottom: 6px; }
.map-loc-stat-hdr { font-size: 0.75rem; font-weight: 600; color: var(--muted, #8b949e); text-transform: uppercase; letter-spacing: 0.04em; margin: 10px 0 4px; }
.map-loc-stat-row { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.map-loc-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--border, #30363d); }
.map-loc-bar > span { display: block; height: 100%; }
.map-loc-export { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0; font-size: 0.8rem; }
@media (max-width: 600px) {
  .map-loc-view, .map-loc-export .btn { min-height: 44px; min-width: 44px; }
  .map-loc-period { min-height: 44px; }
}
.map-loc-native { margin: 8px 10px 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.78rem; display: flex; flex-direction: column; gap: 6px; }
.map-loc-native[hidden] { display: none; }
.map-loc-native .map-loc-native-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.map-loc-native .map-loc-native-meta { color: var(--dim); font-size: 0.72rem; line-height: 1.4; }
.map-loc-day { display: flex; gap: 6px; align-items: center; padding: 8px 10px 4px; }
.map-loc-day .map-loc-date { flex: 1; min-width: 0; }
.map-loc-step { min-width: 34px; padding: 4px 8px; font-size: 1rem; line-height: 1; }
.map-loc-today { padding: 4px 8px; font-size: 0.75rem; }
.map-loc-range { padding: 0 10px 4px; font-size: 0.75rem; color: var(--dim); }
.map-loc-range summary { cursor: pointer; padding: 4px 0; }
.map-loc-range-row { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 4px; }
.map-loc-range-row .input { flex: 1; min-width: 120px; }
.map-loc-summary { padding: 4px 10px 6px; font-size: 0.74rem; color: var(--dim); border-bottom: 1px solid var(--border); }
.map-loc-list { flex: 1; overflow-y: auto; padding: 4px 0; }
.map-loc-row { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.map-loc-row:hover, .map-loc-row.active { background: var(--bg); }
.map-loc-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex: 0 0 auto; }
.map-loc-row-main { flex: 1; min-width: 0; }
.map-loc-row-title { display: block; font-size: 0.82rem; font-weight: 600; }
.map-loc-row-meta { display: block; font-size: 0.72rem; color: var(--dim); margin-top: 2px; }
.map-loc-empty { padding: 16px 12px; font-size: 0.8rem; color: var(--dim); line-height: 1.5; }
@media (max-width: 600px) {
  .map-tab { min-height: 44px; }
  .map-loc-step, .map-loc-today, .map-loc-row, .map-loc-native .btn { min-height: 44px; }
  .map-loc-step { min-width: 44px; }
}

/* Location history: recorder controls + export collapsed at the bottom. */
.map-loc-settings { border-top: 1px solid var(--border); padding: 6px 10px; flex-shrink: 0; }
.map-loc-settings > summary { cursor: pointer; font-size: 0.78rem; color: var(--dim); padding: 4px 0; min-height: 32px; display: flex; align-items: center; gap: 6px; list-style: none; }
.map-loc-settings > summary::-webkit-details-marker { display: none; }
.map-loc-settings > summary::before { content: '\25B8'; font-size: 0.7rem; }
.map-loc-settings[open] > summary::before { content: '\25BE'; }
.map-loc-settings-title { font-weight: 600; color: var(--text); }
.map-loc-settings .map-loc-native { margin: 4px 0 6px; }

/* Long lists collapsed by default (connection history, token breakdown). */
.list-acc { margin: 6px 0; }
.list-acc > summary { cursor: pointer; font-size: 0.8rem; color: var(--dim); min-height: 36px; display: flex; align-items: center; gap: 6px; list-style: none; }
.list-acc > summary::-webkit-details-marker { display: none; }
.list-acc > summary::before { content: '\25B8'; font-size: 0.7rem; }
.list-acc[open] > summary::before { content: '\25BE'; }

/* Location history overview (Ethan's mockup, 2026-10-03): light cards, mode
   switches, a segmented period control, distance per mode, Top Places. */
.map-loc-overview { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px 4px; display: flex; flex-direction: column; gap: 8px; }
/* Cards keep their height and the panel scrolls. As shrinking flex items on a
   short phone they collapsed (overflow:hidden makes their min-height 0) and the
   mode rows sat over the period control. */
.map-loc-overview > * { flex-shrink: 0; }
.map-loc-card { background: var(--card, #fff); border: 1px solid var(--border); border-radius: 12px; }
.map-loc-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; background: transparent; border: 0; }
.map-loc-mode-chip { --mc: var(--accent); display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 0; padding: 0 8px;
  border: 1.5px solid var(--border); border-radius: 10px; background: var(--card); color: var(--dim); font: inherit; font-size: 0.82rem; cursor: pointer; }
.map-loc-mode-chip.on { border-color: var(--mc); color: var(--text); background: color-mix(in srgb, var(--mc) 14%, var(--card)); font-weight: 600; }
.map-loc-mode-chip:not(.on) .map-loc-mode-ico { filter: grayscale(1); opacity: 0.55; }
.map-loc-mode-ico { font-size: 1rem; line-height: 1; }
.map-loc-mode-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-loc-seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bg2, rgba(127,127,127,0.12)); }
.map-loc-seg > button { flex: 1; min-height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--dim); font: inherit; font-size: 0.8rem; font-weight: 500; cursor: pointer; }
.map-loc-seg > button.active { background: var(--card, #fff); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.map-loc-dist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 6px; padding: 8px 12px; }
.map-loc-dist > .map-loc-empty { grid-column: 1 / -1; padding: 4px 0; }
.map-loc-dist-row { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.map-loc-dist-row .map-loc-dot { margin-top: 0; width: 8px; height: 8px; }
.map-loc-dist-label { display: flex; align-items: center; gap: 5px; font-size: 0.74rem; color: var(--dim); }
.map-loc-dist-val { font-size: 0.98rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-loc-none { font-weight: 400; color: var(--dim); font-size: 0.8rem; }
.map-loc-card-hdr { font-size: 0.9rem; font-weight: 700; margin: 2px 2px 6px; }
.map-loc-place { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 12px; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.map-loc-place + .map-loc-place { border-top: 1px solid var(--border); }
.map-loc-pin { color: var(--dim); display: flex; }
.map-loc-place-main { display: flex; flex-direction: column; min-width: 0; }
.map-loc-place-name { font-size: 0.86rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-loc-place-meta { font-size: 0.74rem; color: var(--dim); }
.map-loc-more { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; margin-top: 8px; padding: 0 14px; color: inherit; font: inherit; font-size: 0.86rem; cursor: pointer; }
.map-loc-more[hidden] { display: none; }
.map-loc-more > span { color: var(--dim); font-size: 1.1rem; }
.map-loc-measured { font-size: 0.7rem; color: var(--dim); text-align: center; padding: 0 4px 6px; }
.map-loc-back { align-self: flex-start; margin: 6px 10px 0; min-height: 36px; padding: 0 10px; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 0.82rem; cursor: pointer; }
.map-loc-legend { background: var(--card, #fff); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; min-width: 200px; font-size: 0.7rem; color: var(--dim); box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.map-loc-legend-ends { display: flex; justify-content: space-between; margin-bottom: 6px; }
.map-loc-legend-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.map-loc-legend-row .map-loc-dot { margin-top: 0; width: 8px; height: 8px; }
.map-loc-legend-bar { flex: 1; height: 7px; border-radius: 4px; }
@media (max-width: 600px) {
  .map-loc-seg > button, .map-loc-back { min-height: 44px; }
  .map-loc-legend { min-width: 160px; }
}

/* Multiplayer typing presence (AC-474): another account typing to this worker. */
.typing-ind {
  font-size: 12px;
  font-style: italic;
  color: var(--dim);
  padding: 2px 4px 0;
  min-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Spreadsheet editor (Univer). The grid owns the whole body: no padding, no
   monospace/pre-wrap inheritance, and an explicit height chain so the canvas
   can size itself on desktop and on a phone. */
.file-overlay-body.file-xlsx-editor { padding: 0; overflow: hidden; white-space: normal; font-family: inherit; display: flex; flex-direction: column; background: #fff; }
.file-xlsx-editor .xlsx-univer { flex: 1; min-height: 0; height: 100%; width: 100%; }
#file-save-btn.dirty { border-color: var(--accent); color: var(--accent); }
@media (max-width: 600px) {
  .file-overlay-body.file-xlsx-editor { border-radius: 0; border-left: 0; border-right: 0; }
  #file-save-btn { min-height: 44px; }
}

/* Scratchpad: its own toolbar class (.fe-tb-actions is hidden at every width,
   which hid New Note / New Folder / Refresh), and the paste-to-save box. */
.sp-actions { display:flex; gap:6px; flex-wrap:wrap; }
.sp-capture-row { display:flex; gap:8px; padding:8px 12px; align-items:stretch; }
.sp-capture { flex:1; min-height:44px; resize:vertical; font-family:inherit; font-size:0.85rem; }
.sp-capture-save { min-width:64px; min-height:44px; }
.sp-copy-btn { min-width:32px; }
@media (max-width: 600px) {
  .sp-actions .fe-tb-btn { min-height:44px; min-width:44px; }
  .sp-actions .fe-tb-btn span { display:none; }
  .sp-copy-btn { min-width:44px; min-height:44px; }
}
/* Scratchpad rows carry two actions (copy, menu); the shared 30px column
   overflowed every row by 10px and pushed both off-screen. */
#scratchpad-view .fe-row, #scratchpad-view .fe-col-headers, #scratchpad-view .fe-back-row {
  grid-template-columns: minmax(0,1fr) 60px 92px 72px;
}
#scratchpad-view .fe-cell-actions { display:flex; gap:4px; justify-content:flex-end; align-items:center; }
@media (max-width: 600px) {
  #scratchpad-view .fe-row, #scratchpad-view .fe-col-headers, #scratchpad-view .fe-back-row {
    grid-template-columns: minmax(0,1fr) 92px 96px;
  }
  #scratchpad-view .fe-cell-size { display:none; }
}

/* Peek side panel (Ethan, 2026-10-08): on desktop the split shows files,
   messages or chat beside the terminal. */
.psp-switch { display:flex; gap:4px; align-items:center; padding:6px 8px; border-bottom:1px solid var(--border); flex-shrink:0; }
.psp-opt { background:none; border:1px solid var(--border); color:var(--dim); border-radius:6px; padding:3px 10px; font-size:0.75rem; cursor:pointer; }
.psp-opt.active { color:var(--text); border-color:var(--accent); background:var(--surface); }
.psp-close { margin-left:auto; font-size:0.7rem; padding:2px 8px; }
.psp-frame { flex:1; min-height:0; width:100%; border:0; background:var(--bg); }
.peek-split-files.psp-embed .peek-split-files-header,
.peek-split-files.psp-embed .psf-col-headers,
.peek-split-files.psp-embed .peek-split-files-body { display:none !important; }
.psp-menu { position:fixed; z-index:9999; background:var(--card); border:1px solid var(--border); border-radius:8px; padding:4px; box-shadow:0 6px 24px rgba(0,0,0,0.35); display:flex; flex-direction:column; min-width:150px; }
.psp-menu button { background:none; border:0; color:var(--text); text-align:left; padding:8px 10px; border-radius:6px; font-size:0.85rem; cursor:pointer; }
.psp-menu button:hover, .psp-menu button:focus { background:var(--surface); outline:none; }

/* Chat copy buttons (Ethan, 2026-10-08) and room below a code block for its
   scrollbar, which sat on the next paragraph's first line. */
.chat-code { position:relative; margin:6px 0 12px; }
.chat-code pre { margin:0; padding-bottom:12px; }
.chat-code-copy { position:absolute; top:4px; right:4px; z-index:1; font-size:0.7rem; padding:2px 8px; border-radius:5px;
  border:1px solid var(--border); background:var(--card); color:var(--dim); cursor:pointer; opacity:0.85; }
.chat-code-copy:hover, .chat-code-copy:focus { opacity:1; color:var(--text); }
.chat-copy-btn { margin-left:6px; font-size:0.72rem; padding:1px 8px; border-radius:5px; border:1px solid var(--border);
  background:none; color:var(--dim); cursor:pointer; }
.chat-copy-btn:hover, .chat-copy-btn:focus { color:var(--text); }
@media (max-width: 600px) {
  .chat-code-copy, .chat-copy-btn { min-height:44px; min-width:44px; }
}
/* A worker's active Claude Code /goal (AMUX-5746). */
.badge.goal { color:var(--accent); border-color:var(--accent); }

/* Scratchpad files and expiry (Ethan, 2026-10-09). */
.sp-retain-wrap { display:flex; align-items:center; gap:4px; font-size:0.75rem; color:var(--dim); }
.sp-retain { padding:2px 6px; font-size:0.75rem; height:auto; }
#scratchpad-view.sp-drop { outline:2px dashed var(--accent); outline-offset:-6px; }
@media (max-width: 600px) { .sp-retain { min-height:44px; } }
/* The split-view control reads as one on desktop (Ethan, 2026-10-09: "I still
   dont see the Split View for chat, and others in place of just folder"); on a
   phone the same button opens the file explorer, so it keeps the folder. */
#peek-split-toggle { display:inline-flex; align-items:center; gap:4px; width:auto; padding-left:10px; padding-right:10px; }
#peek-split-toggle .psp-btn-lbl { font-size:0.8rem; font-weight:600; }
#peek-split-toggle .psp-btn-caret { font-size:0.65rem; opacity:0.7; }
#peek-split-toggle .psp-ico-folder { display:none; }
@media (max-width: 600px) {
  #peek-split-toggle .psp-ico-split, #peek-split-toggle .psp-btn-lbl, #peek-split-toggle .psp-btn-caret { display:none; }
  #peek-split-toggle .psp-ico-folder { display:inline; }
}

/* ── Connectors tab: card grid + detail drawer (2026-10-09) ── */
.cx-page { max-width: 980px; width: 100%; margin: 0 auto; padding: 16px 16px 40px; box-sizing: border-box; }
.cx-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.cx-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.cx-filter { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px; padding: 6px 14px; font-size: 0.8rem; cursor: pointer; min-height: 34px; }
.cx-filter.on { background: color-mix(in srgb, var(--accent) 16%, var(--card)); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.cx-search { margin-left: auto; max-width: 240px; flex: 1 1 160px; }
.cx-titlebar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cx-h1 { font-size: 1.15rem; font-weight: 700; margin-bottom: 2px; }
.cx-dim { color: var(--dim); font-size: 0.8rem; }
.cx-small { font-size: 0.75rem; line-height: 1.5; }
.cx-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 12px; margin-top: 4px; }
.cx-card { border: 1px solid var(--border); border-radius: var(--radius-dialog, 12px); background: var(--card); padding: 14px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-width: 0; transition: border-color .15s; }
.cx-card:hover, .cx-card:focus-visible { border-color: var(--accent); outline: none; }
.cx-card.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cx-head, .cx-dhead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cx-icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; background: #fff; border: 1px solid var(--border); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.cx-icon img { width: 24px; height: 24px; object-fit: contain; }
.cx-icon.cx-mono { background: var(--accent); border-color: transparent; color: var(--on-accent); font-weight: 800; font-size: 1rem; }
.cx-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cx-name { font-weight: 700; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-cat { color: var(--dim); font-size: 0.75rem; }
.cx-count { color: var(--dim); font-size: 0.75rem; white-space: nowrap; }
.cx-connect { flex: 0 0 auto; }
.cx-blurb { color: var(--dim); font-size: 0.78rem; line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cx-acct { display: flex; align-items: center; gap: 10px; padding: 4px 0; min-width: 0; }
.cx-avatar { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, var(--card)); color: var(--accent); font-weight: 700; font-size: 0.8rem; display: inline-flex; align-items: center; justify-content: center; }
.cx-acct-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cx-acct-name { font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-acct-sub { font-size: 0.7rem; color: var(--dim); }
.cx-pill { font-size: 0.7rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.cx-pill.cx-ok { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.cx-pill.cx-warn { color: var(--yellow); background: color-mix(in srgb, var(--yellow) 14%, transparent); }
.cx-pill.cx-bad { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
.cx-pill.cx-idle { color: var(--dim); border-color: var(--border); }
.btn.cx-mini { min-height: 28px; padding: 2px 10px; font-size: 0.72rem; }
.cx-add { align-self: flex-start; background: none; border: none; color: var(--accent); font-size: 0.82rem; font-weight: 600; padding: 4px 0; cursor: pointer; min-height: 32px; }
.cx-drawer-wrap { position: fixed; inset: 0; z-index: var(--layer-dialog, 1100); background: rgba(0,0,0,0.35); display: flex; justify-content: flex-end; }
.cx-drawer { width: min(480px, 100vw); height: 100%; background: var(--bg); border-left: 1px solid var(--border); display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(0,0,0,0.25); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; }
.cx-dhead { padding: 16px 16px 10px; }
.cx-x { background: none; border: none; color: var(--dim); font-size: 1.1rem; cursor: pointer; width: 36px; height: 36px; border-radius: 8px; }
.cx-x:hover { background: var(--card); color: var(--text); }
.cx-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
.cx-tabs::-webkit-scrollbar { display: none; }
.cx-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--dim); padding: 10px 10px; font-size: 0.82rem; cursor: pointer; white-space: nowrap; }
.cx-tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.cx-dbody { flex: 1; overflow-y: auto; padding: 14px 16px 24px; }
.cx-p { font-size: 0.85rem; line-height: 1.55; margin: 0 0 12px; }
.cx-cap { display: flex; gap: 10px; align-items: flex-start; font-size: 0.82rem; margin: 8px 0; }
.cx-cap-dot { color: var(--accent); font-size: 0.6rem; margin-top: 4px; }
.cx-sec { font-weight: 700; font-size: 0.85rem; margin: 18px 0 8px; }
.cx-test { font-size: 0.78rem; line-height: 1.5; word-break: break-word; }
.cx-test.ok { color: var(--green); }
.cx-test.bad { color: var(--red); }
.cx-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cx-dbody .cx-acct { border: 1px solid var(--border); border-radius: var(--radius-control, 8px); padding: 8px 10px; margin-bottom: 8px; background: var(--card); }
.cx-cfg { border: none; padding: 0; background: none; }
.cx-code { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; word-break: break-all; }
.cx-code code { background: var(--card); border: 1px solid var(--border); padding: 4px 8px; border-radius: 6px; flex: 1; }
.cx-scope code { font-size: 0.75rem; }
.cx-scope { padding: 3px 0; }
.cx-danger { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--red) 45%, var(--border)); border-radius: var(--radius-control, 8px); background: color-mix(in srgb, var(--red) 7%, transparent); font-size: 0.82rem; }
/* Google group: per-service chips and rows */
.cx-svcs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.cx-svc { font-size: 0.68rem; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.cx-svc.cx-ok { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.cx-svc.cx-warn { color: var(--yellow); background: color-mix(in srgb, var(--yellow) 12%, transparent); }
.cx-svc.cx-bad { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.cx-svcrow, .cx-perm { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.cx-perm { align-items: flex-start; }
.cx-perm .cx-title { gap: 3px; }
.cx-svcrow .cx-icon, .cx-perm .cx-icon { width: 32px; height: 32px; flex-basis: 32px; }
.cx-svcrow .cx-icon img, .cx-perm .cx-icon img { width: 20px; height: 20px; }
.cx-scopehead { font-size: 0.78rem; font-weight: 600; margin: 10px 0 4px; }
@media (max-width: 600px) {
  .cx-grid { grid-template-columns: minmax(0, 1fr); }
  .cx-search { max-width: none; margin-left: 0; flex-basis: 100%; }
  .cx-filter, .cx-add, .btn.cx-mini, .cx-tab { min-height: 44px; }
  .cx-x { width: 44px; height: 44px; }
  .cx-drawer { width: 100vw; border-left: none; }
  .cx-acct-name { white-space: normal; overflow-wrap: break-word; }
}

/* Scratchpad: the real folder path in the toolbar; phone actions behind "⋯" (2026-10-10) */
.sp-dir { font-family: var(--mono, ui-monospace, monospace); font-size: 0.8rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: text; }
.sp-more-btn { display: none; }
@media (max-width: 600px) {
  .sp-more-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 1.2rem; margin-left: auto; }
  #scratchpad-view .fe-toolbar { position: relative; }
  #sp-actions { display: none; position: absolute; right: 8px; top: calc(100% - 4px); z-index: 30; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px; min-width: 200px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-control, 8px); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
  #sp-actions.open { display: flex; }
  #sp-actions .fe-tb-btn { justify-content: flex-start; width: 100%; }
  #sp-actions .fe-tb-btn span { display: inline !important; }
  #sp-actions .sp-retain-wrap { justify-content: space-between; min-height: 44px; padding: 0 4px; }
}

/* ── Calendar: Google-Calendar look, mobile first (2026-10-10) ── */
#fc-container { color-scheme: dark; }
body.light #fc-container { color-scheme: light; }
#fc-container .fc { --fc-border-color: var(--border); --fc-today-bg-color: transparent; --fc-page-bg-color: var(--bg); --fc-neutral-bg-color: var(--card); --fc-list-event-hover-bg-color: var(--card); --fc-now-indicator-color: #ea4335; font-size: 0.8rem; }
#fc-container .fc-toolbar-title { font-size: 1.15rem; font-weight: 500; }
#fc-container .fc .fc-button { background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-weight: 500; text-transform: none; box-shadow: none; }
#fc-container .fc .fc-button-primary:not(:disabled).fc-button-active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); border-color: transparent; }
#fc-container .fc .fc-prev-button, #fc-container .fc .fc-next-button { border: none; border-radius: 50%; padding: 6px 10px; }
#fc-container .gc-dh { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; }
#fc-container .gc-dow { font-size: 0.68rem; font-weight: 600; color: var(--dim); letter-spacing: 0.04em; }
#fc-container .gc-dnum { font-size: 1.35rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text); }
#fc-container .gc-dnum.gc-today { background: #1a73e8; color: #fff; }
#fc-container .fc-col-header-cell { border-left: none; border-right: none; }
#fc-container .fc-col-header-cell-cushion { padding: 0; text-decoration: none; }
#fc-container .fc-timegrid-slot { height: 2.6em; }
#fc-container .fc-timegrid-slot-minor { border-top-style: none; }
#fc-container .fc-timegrid-slot-label-cushion { font-size: 0.68rem; color: var(--dim); }
#fc-container .fc-timegrid-event, #fc-container .fc-daygrid-block-event { border-radius: 6px; padding: 2px 4px; border-width: 1px; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
#fc-container .fc-timegrid-event .fc-event-title { font-weight: 600; }
#fc-container .fc-timegrid-event .fc-event-time { font-size: 0.72rem; opacity: 0.95; }
#fc-container .gc-declined { opacity: 0.55; }
#fc-container .gc-declined .fc-event-title { text-decoration: line-through; }
#fc-container .fc-timegrid-now-indicator-line { border-width: 2px 0 0; }
#fc-container .fc-timegrid-now-indicator-arrow { border: none; width: 10px; height: 10px; border-radius: 50%; background: #ea4335; margin-top: -5px; margin-left: -5px; }
.cal-panel { position: fixed; z-index: var(--layer-dialog, 1100); top: 110px; right: 16px; width: 320px; max-height: 70vh; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.3); padding: 8px 12px 12px; }
.cal-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 8px; }
.cal-x { background: none; border: none; color: var(--dim); font-size: 1rem; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; }
.cal-group { font-size: 0.72rem; font-weight: 600; color: var(--dim); margin: 10px 0 4px; overflow: hidden; text-overflow: ellipsis; }
.cal-row { display: flex; align-items: center; gap: 10px; padding: 6px 2px; font-size: 0.85rem; cursor: pointer; min-height: 36px; }
.cal-row input { position: absolute; opacity: 0; pointer-events: none; }
.cal-swatch { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 4px; border: 2px solid var(--sw); background: transparent; position: relative; }
.cal-row input:checked + .cal-swatch { background: var(--sw); }
.cal-row input:checked + .cal-swatch::after { content: ''; position: absolute; left: 4px; top: 0; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cal-row input:focus-visible + .cal-swatch { outline: 2px solid var(--accent); outline-offset: 2px; }
.cal-name { display: flex; flex-direction: column; min-width: 0; }
.cal-name small { color: var(--dim); font-size: 0.7rem; }
.cal-warn { font-size: 0.75rem; color: var(--yellow); margin-top: 8px; }
.gc-card .modal-header { gap: 12px; }
.gc-card-sq { width: 16px; height: 16px; flex: 0 0 16px; border-radius: 4px; }
@media (max-width: 600px) {
  #fc-container .fc-toolbar-title { font-size: 1rem; }
  #fc-container .fc .fc-button { padding: 8px 12px; min-height: 44px; }
  #fc-container .fc-footer-toolbar { padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); margin: 0; border-top: 1px solid var(--border); background: var(--bg); }
  #fc-container .gc-dnum { font-size: 1.1rem; width: 34px; height: 34px; }
  .cal-panel { top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 75vh; border-radius: 16px 16px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .cal-row { min-height: 44px; }
  #gcal-event-modal { align-items: flex-end; }
  #gcal-event-modal .modal { max-width: none !important; width: 100%; margin: 0; border-radius: 16px 16px 0 0; max-height: 85vh; padding-bottom: env(safe-area-inset-bottom); }
}

/* Map: "you are here" (2026-10-11) */
.map-me { position: relative; }
.map-me-dot { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #1a73e8; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.45); box-sizing: border-box; }
.map-me-pulse { position: absolute; left: -9px; top: -9px; width: 40px; height: 40px; border-radius: 50%; background: rgba(26,115,232,0.35); animation: map-me-pulse 2s ease-out infinite; }
@keyframes map-me-pulse { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map-me-pulse { animation: none; opacity: 0.35; } }

/* ── Messages: conversations (channels, people, workers) ───────────────── */
#cv-side { width:248px; flex:0 0 248px; display:flex; flex-direction:column; min-height:0;
  overflow-y:auto; border-right:1px solid var(--border); background:var(--card);
  padding:12px 8px calc(12px + env(safe-area-inset-bottom)); gap:2px; }
.cv-side-head { display:flex; align-items:center; padding:2px 8px 8px; }
.cv-side-title { font-weight:700; font-size:1.05rem; }
.cv-search { padding:0 4px 8px; }
.cv-search .input { width:100%; box-sizing:border-box; }
.cv-nav { display:flex; flex-direction:column; gap:1px; }
.cv-sec { font-size:0.68rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--dim); padding:12px 10px 4px; }
.cv-item { display:flex; align-items:center; gap:8px; width:100%; min-height:36px; padding:6px 10px;
  border:none; background:none; color:var(--text); font-size:0.86rem; text-align:left;
  border-radius:6px; cursor:pointer; }
.cv-item:hover { background:var(--hover, rgba(127,127,127,.12)); }
.cv-item.active { background:var(--accent); color:var(--on-accent, #fff); }
.cv-item.unread .cv-lbl { font-weight:700; }
.cv-ico { width:20px; flex:0 0 20px; text-align:center; opacity:0.85; }
.cv-lbl { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-badge { font-size:0.68rem; font-weight:700; min-width:18px; padding:1px 6px; border-radius:9px;
  text-align:center; background:var(--border); color:var(--text); }
.cv-badge:empty { display:none; }
.cv-badge-red { background:var(--red, #e5534b); color:#fff; }
.cv-dot { width:8px; height:8px; border-radius:50%; flex:0 0 8px; background:var(--border); }
.cv-dot.on { background:var(--green, #3fb950); }
.cv-av { width:22px; height:22px; flex:0 0 22px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; font-size:0.7rem; font-weight:700; color:#fff; }
/* SLACK LAYOUT (Ethan, 2026-10-11): the view is exactly the screen below its
   own top edge (set by _cvFit), so the sidebar, the posts and the log each
   scroll on their own and the composer stays at the bottom without scrolling
   the page. */
#messages-view { height:calc(100dvh - var(--mv-top, 160px)); overflow:hidden; }
#cv-pane { flex:1; min-width:0; min-height:0; flex-direction:column; overflow:hidden; }
#cv-pane.card-drop-over { outline:2px dashed var(--accent); outline-offset:-6px; }
.cv-attach { min-width:44px; min-height:44px; padding:0; font-size:1.1rem; }
.cv-attach-bar { padding:0 16px; flex-shrink:0; }
.cv-post.pending { opacity:0.65; }
.cv-post-tag { font-size:0.66rem; padding:1px 6px; border-radius:9px; border:1px solid var(--border); color:var(--dim); }
.msg-sender { font-size:0.7rem; font-weight:600; color:var(--text); margin-right:4px; overflow-wrap:anywhere; }
.msg-sender-arrow { font-size:0.7rem; color:var(--dim); margin-right:4px; }
.msg-sess-link { background:none; border:none; padding:0; margin-right:6px; font:inherit; font-size:0.7rem; color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.cv-head { display:flex; align-items:center; gap:10px; padding:10px 16px;
  border-bottom:1px solid var(--border); flex-shrink:0; }
.cv-back { display:none; min-width:44px; min-height:44px; font-size:1.3rem; }
.cv-head-main { flex:1; min-width:0; }
.cv-head-title { font-weight:700; font-size:1.05rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-head-meta { font-size:0.75rem; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-head-people { display:flex; align-items:center; gap:4px; font-size:0.75rem; color:var(--dim); }
.cv-head-people .cv-av { margin-left:-6px; border:2px solid var(--bg); }
.cv-posts { flex:1; min-height:0; overflow-y:auto; padding:8px 16px; -webkit-overflow-scrolling:touch; }
.cv-day { text-align:center; font-size:0.72rem; color:var(--dim); margin:12px 0 6px; }
.cv-post { display:flex; gap:10px; padding:6px 0; }
.cv-post .cv-av { width:34px; height:34px; flex-basis:34px; font-size:0.85rem; }
.cv-post-main { flex:1; min-width:0; }
.cv-post-head { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.cv-post-who { font-weight:700; font-size:0.88rem; }
.cv-post-ts { font-size:0.7rem; color:var(--dim); }
.cv-post-conv { font-size:0.7rem; color:var(--accent); cursor:pointer; }
.cv-post-body { font-size:0.88rem; line-height:1.45; white-space:pre-wrap; word-break:break-word; }
.cv-mention { background:rgba(88,166,255,0.16); color:var(--accent); border-radius:4px; padding:0 3px; }
.cv-mention.me { background:rgba(210,153,34,0.22); color:inherit; font-weight:600; }
/* Post bodies are rendered markdown (same pipeline as worker Chat): block
   whitespace collapses, text inside a paragraph keeps its line breaks. */
.cv-post-body.cv-md { white-space:normal; }
.cv-md p, .cv-md blockquote { white-space:pre-wrap; margin:0 0 6px; }
.cv-md p:last-child { margin-bottom:0; }
.cv-md pre { max-width:100%; overflow-x:auto; background:rgba(127,127,127,0.12); border-radius:6px; padding:8px 10px; font-size:0.8rem; }
.cv-md :not(pre) > code { background:rgba(127,127,127,0.14); border-radius:4px; padding:1px 4px; font-size:0.88em; }
.cv-md img, .cv-md video { max-width:100%; height:auto; border-radius:6px; }
.cv-md .file-link { color:var(--cyan); border-bottom:1px dashed var(--cyan); cursor:pointer; word-break:break-all; }
.cv-md .md-link { color:var(--yellow); border-bottom:1px dashed var(--yellow); cursor:pointer; word-break:break-all; }
.cv-thumbs { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.cv-md img.cv-thumb { max-width:220px; max-height:160px; object-fit:cover; border:1px solid var(--border); cursor:pointer; }
@media (max-width: 600px) { .cv-md img.cv-thumb { max-width:46vw; } }
.cv-deliv { display:flex; gap:6px; flex-wrap:wrap; margin-top:3px; }
.cv-deliv span { font-size:0.68rem; padding:1px 7px; border-radius:9px; border:1px solid var(--border); color:var(--dim); }
.cv-deliv span.ok { color:var(--green, #3fb950); border-color:rgba(63,185,80,.45); }
.cv-deliv span.bad { color:var(--red, #e5534b); border-color:rgba(229,83,75,.45); }
.cv-typing { min-height:18px; padding:0 16px; font-size:0.74rem; color:var(--dim); }
.cv-compose { position:relative; display:flex; gap:8px; align-items:flex-end; padding:6px 16px 4px; flex-shrink:0; }
.cv-compose textarea { flex:1; resize:none; font-family:inherit; max-height:160px; min-height:44px; box-sizing:border-box;
  font-size:0.9rem; line-height:1.4; }
.cv-send { min-width:44px; min-height:44px; }
.cv-hint { display:flex; gap:16px; padding:0 16px calc(8px + env(safe-area-inset-bottom));
  font-size:0.68rem; color:var(--dim); flex-wrap:wrap; }
.cv-ac { display:none; position:absolute; left:16px; bottom:100%; z-index:50; min-width:220px; max-width:calc(100% - 32px);
  max-height:240px; overflow-y:auto; background:var(--card); border:1px solid var(--border);
  border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.3); padding:4px; }
.cv-ac.open { display:block; }
.cv-ac button { display:flex; align-items:center; gap:8px; width:100%; min-height:40px; padding:6px 10px;
  border:none; background:none; color:var(--text); text-align:left; border-radius:6px; cursor:pointer; font-size:0.85rem; }
.cv-ac button.sel, .cv-ac button:hover { background:var(--hover, rgba(127,127,127,.14)); }
.cv-ac small { color:var(--dim); margin-left:auto; }
.cv-empty { color:var(--dim); font-size:0.85rem; padding:24px 8px; text-align:center; }
#msgs-log-pane { display:flex; flex-direction:column; flex:1; min-width:0; min-height:0; padding:12px 16px; overflow-y:auto; }
@media (max-width: 600px) {
  #cv-side { width:100%; flex:1 1 auto; border-right:none; }
  #messages-view.cv-open #cv-side { display:none; }
  #messages-view:not(.cv-open) #cv-pane, #messages-view:not(.cv-open) #msgs-log-pane { display:none !important; }
  .cv-back { display:inline-flex; align-items:center; justify-content:center; }
  .cv-item { min-height:44px; }
  .cv-head { padding:6px 10px; }
  .cv-posts { padding:8px 10px; }
  .cv-compose { padding:6px 10px 4px; }
  .cv-hint { display:none; }
  .cv-head-people { display:none; }
  #msgs-log-pane { padding:8px 10px; }
  /* The search takes its own row on a phone so the two filters below it get
     half the width each instead of being squeezed beside it to "All w". */
  #msgs-controls > .search-wrap { flex:1 1 100% !important; min-width:0 !important; }
  /* Worker and From filters share one row at 375px and stay 44px tall. */
  /* WebKit ignores min-height on a native menulist select, so the control
     drops its native chrome here and draws its own chevron. */
  #msgs-session-filter, #msgs-sender-filter { flex:1 1 calc(50% - 5px); min-width:0; max-width:none !important; min-height:44px; -webkit-appearance:none; appearance:none; padding-right:26px !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238b949e'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 10px center !important; }
  .cv-attach-bar { padding:0 10px; }
}

/* ── Converse tab (worker view): hands-free voice chat with the worker ──────
   Mobile-first: one column that scrolls; two columns from 900px. Every control
   is at least 44px on touch. Prefix vx- (the Messages tab owns cv-). */
.vx-panel { container-type:inline-size; padding:0; gap:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.vx-wrap { display:flex; flex-direction:column; gap:12px; padding:12px; padding-left:max(12px, env(safe-area-inset-left)); padding-right:max(12px, env(safe-area-inset-right)); padding-bottom:max(16px, env(safe-area-inset-bottom)); min-width:0; }
.vx-main, .vx-side { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px; min-width:0; }
.vx-main { display:flex; flex-direction:column; gap:12px; }
.vx-top { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:0.78rem; color:var(--dim); }
.vx-conn { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; border:1px solid var(--border); }
.vx-conn .vx-dot { width:8px; height:8px; border-radius:50%; background:var(--dim); }
.vx-conn.on { color:var(--green); border-color:color-mix(in srgb, var(--green) 45%, transparent); background:color-mix(in srgb, var(--green) 10%, transparent); }
.vx-conn.on .vx-dot { background:var(--green); }
.vx-powered b { color:var(--text); }
.vx-hero { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; }
.vx-avatar { width:104px; height:104px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--accent) 10%, transparent); box-shadow:0 0 0 12px color-mix(in srgb, var(--accent) 6%, transparent); color:var(--accent); transition:box-shadow .3s; margin:12px 0 4px; }
.vx-avatar-in { width:68px; height:68px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--accent) 16%, var(--card)); }
.vx-avatar.listening { animation:vx-pulse 1.8s ease-in-out infinite; }
.vx-avatar.speaking { box-shadow:0 0 0 14px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 0 26px color-mix(in srgb, var(--accent) 8%, transparent); }
@keyframes vx-pulse { 0%,100% { box-shadow:0 0 0 10px color-mix(in srgb, var(--accent) 6%, transparent); } 50% { box-shadow:0 0 0 20px color-mix(in srgb, var(--accent) 12%, transparent); } }
@media (prefers-reduced-motion: reduce) { .vx-avatar.listening { animation:none; } }
.vx-title { margin:6px 0 0; font-size:1.15rem; }
.vx-sub { margin:0; color:var(--dim); font-size:0.85rem; }
.vx-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:6px; }
.vx-chip { font-size:0.74rem; padding:5px 10px; border-radius:8px; border:1px solid var(--border); color:var(--dim); white-space:nowrap; }
.vx-wave-row { display:flex; align-items:center; gap:10px; min-width:0; }
.vx-elapsed { font-variant-numeric:tabular-nums; font-size:0.8rem; color:var(--dim); min-width:36px; }
.vx-wave { flex:1; min-width:0; width:100%; height:44px; }
.vx-state { font-size:0.75rem; padding:5px 10px; border-radius:999px; background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); white-space:nowrap; max-width:46%; overflow:hidden; text-overflow:ellipsis; }
.vx-live { max-height:200px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; font-size:0.85rem; }
.vx-hint { color:var(--dim); text-align:center; font-size:0.82rem; padding:4px 0; }
.vx-turn { display:flex; flex-direction:column; gap:2px; padding:8px 10px; border-radius:10px; background:var(--bg); border:1px solid var(--border); }
.vx-turn-user { border-color:color-mix(in srgb, var(--accent) 35%, var(--border)); }
.vx-turn-system { color:var(--dim); font-size:0.8rem; }
.vx-interim { opacity:.65; font-style:italic; }
.vx-who { font-size:0.74rem; font-weight:600; color:var(--text); }
.vx-who i { font-style:normal; font-weight:400; color:var(--dim); margin-left:4px; }
.vx-said { white-space:pre-wrap; word-break:break-word; line-height:1.45; }
.vx-controls { display:flex; justify-content:center; align-items:flex-start; gap:28px; }
.vx-ctl { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:0.78rem; color:var(--dim); }
.vx-round { width:52px; height:52px; min-width:44px; min-height:44px; border-radius:50%; border:1px solid var(--border); background:var(--card); color:var(--text); font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; }
.vx-round:disabled { opacity:.45; cursor:default; }
.vx-round:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.vx-round.on { background:color-mix(in srgb, var(--yellow) 18%, var(--card)); border-color:var(--yellow); }
.vx-call { width:64px; height:64px; font-size:1.5rem; background:var(--green); border-color:var(--green); color:#fff; }
.vx-call.vx-end { background:var(--red); border-color:var(--red); }
.vx-type { display:flex; gap:8px; }
.vx-type .input { flex:1; min-width:0; min-height:44px; }
.vx-type .btn { min-height:44px; }
.vx-settings { display:grid; grid-template-columns:1fr; gap:8px; }
.vx-settings.vx-collapsed { display:none; }
.vx-sel { display:flex; flex-direction:column; gap:4px; font-size:0.74rem; color:var(--dim); border:1px solid var(--border); border-radius:10px; padding:8px 10px; min-width:0; }
.vx-sel select { min-height:40px; width:100%; min-width:0; }
.vx-engine-note { font-size:0.76rem; color:var(--dim); display:flex; flex-direction:column; gap:4px; }
.vx-engine-note:empty { display:none; }
.vx-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:0.78rem; color:var(--dim); background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:8px 10px; }
.vx-foot .btn { min-height:44px; }
.vx-retention { font-size:0.8rem; color:var(--dim); display:flex; flex-direction:column; gap:8px; align-items:flex-start; padding:4px 2px; }
.vx-retention[hidden] { display:none; }
.vx-side { display:flex; flex-direction:column; gap:10px; }
.vx-side-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.vx-side-head h4 { margin:0; font-size:0.95rem; }
.vx-side-head .btn { min-height:44px; }
.vx-list { display:flex; flex-direction:column; gap:6px; }
.vx-empty { color:var(--dim); font-size:0.82rem; padding:8px 2px; }
.vx-row { position:relative; display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:10px; padding:6px; background:var(--card); }
.vx-row.selected { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--card)); }
.vx-row-play, .vx-row-more { flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--text); cursor:pointer; }
.vx-row-more { border:none; font-size:1.1rem; }
.vx-row-main { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px; background:none; border:none; color:var(--text); text-align:left; cursor:pointer; padding:2px 0; min-height:44px; justify-content:center; }
.vx-row-title { font-weight:600; font-size:0.85rem; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-row-meta, .vx-row-exp { font-size:0.72rem; color:var(--dim); }
.vx-menu { position:absolute; right:6px; top:calc(100% - 4px); z-index:5; display:flex; flex-direction:column; min-width:180px; background:var(--card); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.25); overflow:hidden; }
.vx-menu button { min-height:44px; padding:0 14px; text-align:left; background:none; border:none; color:var(--text); cursor:pointer; font-size:0.85rem; }
.vx-menu button:hover { background:var(--bg); }
.vx-menu .vx-danger { color:var(--red); }
.vx-more { align-self:center; background:none; border:none; color:var(--accent); cursor:pointer; min-height:44px; font-size:0.82rem; }
.vx-player:empty { display:none; }
.vx-player { border:1px solid var(--border); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.vx-ptitle { font-weight:600; }
.vx-pmeta { font-size:0.74rem; color:var(--dim); }
.vx-scrub { width:100%; accent-color:var(--accent); min-height:28px; }
.vx-ptimes { display:flex; justify-content:space-between; font-size:0.72rem; color:var(--dim); font-variant-numeric:tabular-nums; }
.vx-pctl { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.vx-pbtn { min-width:44px; min-height:44px; border-radius:22px; border:1px solid var(--border); background:var(--card); color:var(--text); cursor:pointer; font-size:0.8rem; }
.vx-pplay { width:52px; height:52px; border-radius:50%; background:var(--text); color:var(--card); border-color:var(--text); font-size:1rem; }
.vx-ptabs { display:flex; gap:4px; border-bottom:1px solid var(--border); }
.vx-ptab { min-height:44px; padding:0 12px; background:none; border:none; border-bottom:2px solid transparent; color:var(--dim); cursor:pointer; }
.vx-ptab.active { color:var(--accent); border-bottom-color:var(--accent); }
.vx-pbody { display:flex; flex-direction:column; gap:8px; max-height:320px; overflow-y:auto; font-size:0.84rem; }
.vx-pturn { display:flex; gap:8px; align-items:flex-start; padding:6px; border-radius:8px; cursor:pointer; }
.vx-pturn.active { background:color-mix(in srgb, var(--accent) 10%, transparent); }
.vx-pavatar { flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:700; background:var(--bg); border:1px solid var(--border); }
.vx-pavatar-worker { background:color-mix(in srgb, var(--accent) 16%, var(--card)); color:var(--accent); }
.vx-drow { display:flex; justify-content:space-between; gap:12px; font-size:0.78rem; border-bottom:1px dashed var(--border); padding:4px 0; }
.vx-drow span:first-child { color:var(--dim); flex:0 0 auto; }
.vx-drow span:last-child { text-align:right; word-break:break-word; min-width:0; }
/* Sized by the PANEL, not the viewport: the worker view can be a narrow
   column on a wide screen. */
@container (min-width: 600px) {
  .vx-settings { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 860px) {
  .vx-wrap { display:grid; grid-template-columns:minmax(0, 1fr) minmax(300px, 360px); align-items:start; }
  .vx-settings { grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
/* ── Scheduler page (redesign 2026-10-11): list, details, create ─────────────
   Theme tokens only, so light and dark both follow. Rows are a CSS grid that
   collapses to stacked rows through a CONTAINER query, so the same markup
   stacks at 375px AND in the narrow worker-peek Schedules tab. */
#scheduler-view { padding-bottom: env(safe-area-inset-bottom); }
.sx-head { display:flex; align-items:center; gap:12px; padding:14px 16px 8px; flex-wrap:wrap; }
.sx-head-title { display:flex; align-items:baseline; gap:12px; flex:1; min-width:0; flex-wrap:wrap; }
.sx-head-title h2 { font-size:1.15rem; font-weight:700; margin:0; }
.sx-summary { color:var(--dim); font-size:0.82rem; }
.sx-summary strong { color:var(--text); }
.sx-bad { color:var(--red) !important; }
.sx-dim { color:var(--dim); }
.sx-new { white-space:nowrap; }
.sx-pills { display:flex; gap:6px; padding:4px 16px 8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior-x:contain; }
.sx-pills::-webkit-scrollbar { display:none; }
.sx-pill-btn { flex-shrink:0; display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 14px; border-radius:999px;
  border:1px solid var(--border); background:var(--card); color:var(--text); font-size:0.84rem; font-weight:500; cursor:pointer; white-space:nowrap; font-family:inherit; }
.sx-pill-btn:hover { border-color:var(--accent); }
.sx-pill-btn.active { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.sx-pill-n { font-size:0.74rem; padding:1px 7px; border-radius:999px; background:color-mix(in srgb, var(--text) 10%, transparent); font-variant-numeric:tabular-nums; }
.sx-pill-btn.active .sx-pill-n { background:color-mix(in srgb, var(--on-accent) 22%, transparent); }
.sx-toolbar { display:flex; gap:8px; padding:0 16px 10px; flex-wrap:wrap; align-items:center; }
.sx-toolbar .sx-search { flex:1 1 240px; min-width:0; }
.sx-filter { width:auto !important; flex:0 1 auto; min-width:0; max-width:200px; }
.sx-bulk { display:flex; align-items:center; gap:8px; margin:0 16px 10px; padding:8px 12px; border:1px solid var(--accent);
  border-radius:var(--radius-control); background:color-mix(in srgb, var(--accent) 8%, var(--card)); flex-wrap:wrap; }
.sx-bulk[hidden] { display:none; }
.sx-bulk > span { font-weight:600; margin-right:auto; }
.sx-list { display:flex; flex-direction:column; gap:14px; padding:2px 16px 14px; }
#peek-schedules-list.sx-list, #peek-schedules-list { gap:12px; }
.sx-group { border:1px solid var(--border); border-radius:var(--radius-dialog); background:var(--card); overflow:hidden;
  /* Never shrink below its content: in the worker tab the list is a fixed-height
     flex column, and a long Inactive group squeezed Daily Routines to less than
     its own header, hiding the active schedules (Ethan, 2026-10-12). The list
     scrolls instead. */
  flex-shrink:0; }
.sx-group-head { display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--border); }
.sx-group-ico { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-size:1.05rem; background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); }
.sx-group[data-group="routine"] .sx-group-ico { background:color-mix(in srgb, var(--yellow) 14%, transparent); color:var(--yellow); }
.sx-group[data-group="weekly"] .sx-group-ico { background:color-mix(in srgb, var(--green) 14%, transparent); color:var(--green); }
.sx-group[data-group="inactive"] .sx-group-ico { background:color-mix(in srgb, var(--dim) 16%, transparent); color:var(--dim); }
.sx-group-text { flex:1; min-width:0; }
.sx-group-text h3 { font-size:0.95rem; margin:0; display:flex; align-items:center; gap:8px; }
.sx-group-text p { margin:2px 0 0; color:var(--dim); font-size:0.78rem; }
.sx-count { font-size:0.72rem; font-weight:600; padding:1px 8px; border-radius:999px; border:1px solid var(--border); color:var(--dim); }
.sx-viewall, .sx-showmore, .sx-linkbtn { background:none; border:none; color:var(--accent); cursor:pointer; font:inherit; font-size:0.84rem;
  font-weight:500; min-height:36px; padding:0 6px; white-space:nowrap; }
.sx-viewall:hover, .sx-showmore:hover, .sx-linkbtn:hover { text-decoration:underline; }
.sx-showmore { display:block; width:100%; text-align:center; border-top:1px solid var(--border); min-height:40px; }
.sx-group-empty { padding:14px; color:var(--dim); font-size:0.82rem; }
.sx-table { container-type:inline-size; container-name:sxt; }
.sx-row { display:grid; align-items:center; column-gap:10px; padding:8px 10px 8px 6px; border-bottom:1px solid var(--border);
  grid-template-columns:36px minmax(170px,2.4fr) minmax(120px,1.3fr) minmax(110px,1.1fr) 84px 92px 64px 92px 84px; font-size:0.84rem; }
.sx-scoped .sx-row { grid-template-columns:minmax(150px,2.4fr) minmax(110px,1.1fr) 84px 92px 64px 92px 84px; padding-left:12px; }
.sx-table > .sx-row:last-child { border-bottom:none; }
.sx-row.sched-item { cursor:pointer; overflow:hidden; }
.sx-row.sched-item:hover { background:color-mix(in srgb, var(--text) 4%, transparent); }
.sx-row.sched-item:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.sx-row.selected { background:color-mix(in srgb, var(--accent) 8%, transparent); }
.sx-row[data-status="paused"] .sx-title { color:var(--dim); }
.sx-row-head { font-size:0.7rem; color:var(--dim); font-weight:600; text-transform:uppercase; letter-spacing:0.04em; padding-top:6px; padding-bottom:6px;
  background:color-mix(in srgb, var(--text) 3%, transparent); }
.sx-cell { min-width:0; }
.sx-sel { display:flex; align-items:center; justify-content:center; min-height:36px; cursor:pointer; }
.sx-sel input { width:16px; height:16px; accent-color:var(--accent); margin:0; cursor:pointer; }
.sx-name { display:flex; align-items:center; gap:10px; }
.sx-name-text { display:flex; flex-direction:column; gap:2px; min-width:0; align-items:flex-start; }
.sx-title { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.sx-type-ico { width:26px; height:26px; border-radius:7px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  font-size:0.85rem; font-weight:700; font-family:var(--font-mono, ui-monospace, monospace); }
.sx-ico-shell { background:color-mix(in srgb, var(--yellow) 16%, transparent); color:var(--yellow); }
.sx-ico-tmux { background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); font-family:inherit; }
.sx-chip { display:inline-flex; align-items:center; gap:6px; max-width:100%; min-width:0; }
.sx-chip-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.sx-chip-none { color:var(--dim); font-size:0.8rem; font-style:italic; }
.sx-avatar { width:22px; height:22px; border-radius:50%; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  font-size:0.6rem; font-weight:700; color:#fff; background:hsl(var(--h,210) 52% 46%); }
.sx-freq { display:flex; flex-direction:column; gap:1px; overflow:hidden; }
.sx-freq > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sx-sub { font-size:0.72rem; line-height:1.35; }
.sx-freq .sx-sub { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sx-next { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.sx-dot { width:7px; height:7px; border-radius:50%; display:inline-block; flex-shrink:0; background:var(--green); }
.sx-dot.warn { background:var(--yellow); }
.sx-runs { display:flex; flex-direction:column; gap:3px; font-variant-numeric:tabular-nums; }
.sx-rpd.hot { color:var(--red); font-weight:700; }
.sx-share { font-size:0.7rem; color:var(--dim); }
.sx-rpd.hot .sx-share { color:var(--red); }
.sx-dots { display:flex; gap:2px; }
.sx-fail { font-variant-numeric:tabular-nums; color:var(--dim); }
.sx-fail.bad { color:var(--red); font-weight:700; }
.sx-pill { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:0.74rem; font-weight:600; white-space:nowrap;
  border:1px solid transparent; }
.sx-pill::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.sx-pill-running { color:var(--green); background:color-mix(in srgb, var(--green) 14%, transparent); }
.sx-pill-running::before { animation:sched-running-pulse 1.2s ease-in-out infinite; }
.sx-pill-scheduled { color:var(--accent); background:color-mix(in srgb, var(--accent) 13%, transparent); }
.sx-pill-failing { color:var(--red); background:color-mix(in srgb, var(--red) 13%, transparent); }
.sx-pill-overdue, .sx-pill-unparsed { color:var(--yellow); background:color-mix(in srgb, var(--yellow) 15%, transparent); }
.sx-pill-paused { color:var(--dim); background:color-mix(in srgb, var(--dim) 14%, transparent); }
.sx-morec { display:flex; justify-content:flex-end; }
.sx-more-btn { min-width:36px; min-height:36px; border-radius:8px; border:1px solid transparent; background:none; color:var(--dim);
  font-size:1.1rem; cursor:pointer; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.sx-more-btn:hover { border-color:var(--border); color:var(--text); }
.btn.sx-more-btn { border-color:var(--border); color:var(--text); }
.sx-empty { text-align:center; padding:40px 16px; color:var(--dim); display:flex; flex-direction:column; align-items:center; gap:8px; font-size:0.86rem; }
.sx-empty-ico { font-size:2rem; }
.sx-empty-title { font-weight:600; font-size:0.95rem; color:var(--text); }
.sx-empty-small { padding:28px 12px; }
.sx-fleet-run { display:flex; align-items:center; gap:8px; padding:4px 0; border-bottom:1px solid var(--border); font-size:0.75rem; min-width:0; }
.sx-fleet-run.clickable { cursor:pointer; }
.sx-fleet-run.clickable:hover { background:color-mix(in srgb, var(--text) 4%, transparent); }
@container sxt (max-width: 760px) {
  .sx-row-head { display:none; }
  .sx-row { display:flex; flex-wrap:wrap; align-items:center; column-gap:8px; row-gap:4px; padding:10px 6px 10px 12px; }
  .sx-row::after { content:''; order:4; flex-basis:100%; height:0; }
  .sx-row .sx-sel, .sx-row .sx-runs, .sx-row .sx-fails { display:none; }
  .sx-row .sx-name { order:1; flex:1 1 0; }
  .sx-row .sx-stat { order:2; }
  .sx-row .sx-morec { order:3; }
  .sx-row .sx-worker { order:5; padding-left:36px; max-width:50%; }
  .sx-row .sx-freq { order:6; color:var(--dim); font-size:0.8rem; }
  .sx-row .sx-freq .sx-sub { display:none; }
  .sx-row .sx-nextc { order:7; margin-left:auto; padding-right:8px; font-size:0.8rem; }
  .sx-scoped .sx-row .sx-freq { padding-left:36px; }
  .sx-more-btn { min-width:44px; min-height:44px; }
}
/* Row and detail "more" menu. */
.sx-menu { position:fixed; z-index:var(--layer-confirmation); min-width:200px; max-width:calc(100vw - 16px); padding:6px; background:var(--card);
  border:1px solid var(--border); border-radius:var(--radius-control); box-shadow:0 12px 32px rgba(0,0,0,0.35); display:flex; flex-direction:column; }
.sx-menu[hidden] { display:none; }
.sx-menu-item { text-align:left; background:none; border:none; color:var(--text); font:inherit; font-size:0.86rem; padding:0 12px; min-height:38px;
  border-radius:6px; cursor:pointer; }
.sx-menu-item:hover, .sx-menu-item:focus-visible { background:color-mix(in srgb, var(--text) 7%, transparent); outline:none; }
.sx-menu-item.danger { color:var(--red); }
/* Details: a side panel; a full-screen sheet on phones. */
.sx-detail-overlay { position:fixed; inset:0; top:var(--chrome-tab-h, 0px); z-index:550; display:flex; justify-content:flex-end; background:rgba(0,0,0,0); transition:background 0.2s;
  zoom:calc(1 / var(--root-zoom, 1)); }
.sx-detail-overlay[hidden] { display:none; }
.sx-detail-overlay.open { background:rgba(0,0,0,0.45); }
.sx-detail { zoom:var(--root-zoom, 1); width:min(500px, 100%); height:100%; box-sizing:border-box; background:var(--card); border-left:1px solid var(--border);
  display:flex; flex-direction:column; opacity:0; transform:translateX(24px); transition:opacity 0.2s, transform 0.2s;
  padding-top:env(safe-area-inset-top); box-shadow:-16px 0 48px rgba(0,0,0,0.3); }
.sx-detail-overlay.open .sx-detail { opacity:1; transform:none; }
.sx-detail-head { display:flex; align-items:center; gap:8px; padding:12px 12px 0 16px; }
.sx-detail-head .sched-id-badge { font-size:0.74rem; padding:2px 7px; }
.sx-detail-ico { width:30px; height:30px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:0.8rem;
  background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); }
.sx-detail-close { margin-left:auto; min-height:44px; }
.sx-detail-title { font-size:1.12rem; font-weight:700; margin:6px 16px 10px; overflow-wrap:anywhere; }
.sx-tabs { display:flex; gap:2px; padding:0 12px; border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none; flex-shrink:0; }
.sx-tabs::-webkit-scrollbar { display:none; }
.sx-tab { background:none; border:none; border-bottom:2px solid transparent; color:var(--dim); font:inherit; font-size:0.86rem; font-weight:600;
  padding:0 12px; min-height:42px; cursor:pointer; white-space:nowrap; }
.sx-tab.active { color:var(--text); border-bottom-color:var(--accent); }
.sx-detail-body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px 16px calc(20px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:12px; }
.sx-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.sx-actions .sx-linkbtn { margin-left:auto; }
.sx-dl { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:9px 16px; margin:0; font-size:0.86rem; }
.sx-dl dt { color:var(--dim); }
.sx-dl dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.sx-type-line { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sx-expr { display:inline-block; margin-top:4px; font-family:var(--font-mono, ui-monospace, monospace); font-size:0.78rem; padding:1px 6px;
  border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text); overflow-wrap:anywhere; }
.sx-desc { border:1px solid var(--border); border-radius:var(--radius-control); background:var(--bg); overflow:hidden; }
.sx-desc-head { display:flex; align-items:center; justify-content:space-between; padding:2px 6px 2px 12px; border-bottom:1px solid var(--border);
  font-size:0.76rem; color:var(--dim); font-weight:600; }
.sx-desc pre, .sx-log { margin:0; padding:10px 12px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:0.8rem; line-height:1.5; max-height:260px; overflow:auto;
  font-family:var(--font-mono, ui-monospace, monospace); color:var(--text); }
.sx-desc pre.sx-shell::before { content:'$ '; color:var(--dim); }
.sx-log { border:1px solid var(--border); border-radius:var(--radius-control); background:var(--bg); max-height:60dvh; }
.sx-log-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sx-log-bar select { width:auto !important; flex:1 1 200px; }
.sx-sec-head { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.sx-sec-head h4 { margin:0; font-size:0.9rem; }
.sx-runs-list { display:flex; flex-direction:column; }
.sx-run { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:7px 0; border-bottom:1px solid var(--border); font-size:0.8rem; min-width:0; }
.sx-run-pill { display:inline-flex; align-items:center; gap:5px; padding:1px 8px; border-radius:999px; font-weight:600; font-size:0.74rem; }
.sx-run-pill.tone-ok { color:var(--green); background:color-mix(in srgb, var(--green) 13%, transparent); }
.sx-run-pill.tone-err { color:var(--red); background:color-mix(in srgb, var(--red) 13%, transparent); }
.sx-run-pill.tone-warn, .sx-run-pill.tone-running { color:var(--yellow); background:color-mix(in srgb, var(--yellow) 14%, transparent); }
.sx-run-pill.tone-queued, .sx-run-pill.tone-done { color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
.sx-run-pill.tone-unknown { color:var(--dim); background:color-mix(in srgb, var(--dim) 14%, transparent); }
.sx-run-when { color:var(--dim); white-space:nowrap; }
.sx-run-extra { color:var(--dim); font-size:0.74rem; }
.sx-run-note { flex:1 1 100%; color:var(--dim); font-size:0.74rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sx-related { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--radius-control); overflow:hidden; }
.sx-rel { display:flex; justify-content:space-between; align-items:center; background:none; border:none; border-bottom:1px solid var(--border);
  color:var(--text); font:inherit; font-size:0.86rem; padding:0 14px; min-height:44px; cursor:pointer; text-align:left; }
.sx-rel:last-child { border-bottom:none; }
.sx-rel:hover { background:color-mix(in srgb, var(--text) 5%, transparent); }
.sx-rel span { color:var(--dim); }
.sx-rel.danger { color:var(--red); }
.sx-audit { display:flex; flex-direction:column; }
@media (max-width: 600px) {
  .sx-head { padding:12px 12px 6px; }
  .sx-pills { padding:4px 12px 8px; }
  .sx-pill-btn { min-height:44px; }
  .sx-toolbar { padding:0 12px 10px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); }
  .sx-toolbar .sx-search { grid-column:1 / -1; }
  .sx-filter { max-width:none; width:100% !important; }
  .sx-list { padding:2px 12px 14px; }
  .sx-bulk { margin:0 12px 10px; }
  .sx-group-head { padding:10px 12px; }
  .sx-viewall, .sx-showmore, .sx-linkbtn { min-height:44px; }
  .sx-detail { width:100%; border-left:none; box-shadow:none; padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
  .sx-tab { min-height:44px; }
  .sx-actions .btn { min-height:44px; }
  .sx-dl { grid-template-columns:minmax(96px, max-content) minmax(0,1fr); }
}
/* Create / edit modal. */
#sched-overlay .board-edit-box.sx-create { max-width:820px; width:100%; padding:0; display:flex; flex-direction:column; overflow:hidden;
  height:min(780px, calc(var(--dialog-viewport-height, 100dvh) - 32px - var(--chrome-tab-h, 0px) - var(--sw-fail-h, 0px))); max-height:none; }
#sched-overlay.board-edit-overlay { padding-top:calc(16px + var(--chrome-tab-h, 0px)); }
.sx-create input[type="radio"], .sx-create input[type="checkbox"] { width:auto; margin:0; padding:0; accent-color:var(--accent); }
.sx-create .input, .sx-create select { margin-bottom:0; }
.sx-create-head { display:flex; align-items:flex-start; gap:12px; padding:16px 16px 12px 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
.sx-create-head-text { flex:1; min-width:0; }
.sx-create-head h3 { margin:0; font-size:1.08rem; }
.sx-create-head p { margin:3px 0 0; color:var(--dim); font-size:0.84rem; }
.sx-create-head .modal-close { min-height:44px; }
.sx-create-main { flex:1; min-height:0; display:flex; }
.sx-create-nav { width:200px; flex-shrink:0; border-right:1px solid var(--border); padding:12px; display:flex; flex-direction:column; gap:4px; overflow-y:auto; }
.sx-create-nav [hidden] { display:none; }
.sx-nav-btn { display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left; padding:8px 10px; border-radius:8px; border:1px solid transparent;
  background:none; color:var(--text); font:inherit; cursor:pointer; min-height:44px; }
.sx-nav-btn b { font-size:0.86rem; }
.sx-nav-btn span { font-size:0.72rem; color:var(--dim); }
.sx-nav-btn:hover { background:color-mix(in srgb, var(--text) 5%, transparent); }
.sx-nav-btn.active { background:color-mix(in srgb, var(--accent) 12%, transparent); border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
.sx-create-body { flex:1; min-width:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 20px 20px; }
.sx-sec { display:flex; flex-direction:column; gap:16px; }
.sx-sec[hidden] { display:none; }
.sx-req { color:var(--red); }
.sx-type-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sx-type-card { display:flex; align-items:flex-start; gap:10px; padding:12px; border:1px solid var(--border); border-radius:var(--radius-control);
  cursor:pointer; background:var(--bg); min-height:44px; }
.sx-type-card:hover { border-color:color-mix(in srgb, var(--accent) 50%, var(--border)); }
.sx-type-card.active { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; background:color-mix(in srgb, var(--accent) 6%, var(--bg)); }
.sx-type-card input { margin-top:5px !important; flex-shrink:0; width:18px !important; height:18px; }
.sx-type-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.sx-type-text b { font-size:0.9rem; }
.sx-type-text span { font-size:0.76rem; color:var(--dim); line-height:1.4; }
.sx-cmd-bar { display:flex; align-items:center; gap:8px; }
.sx-cmd-bar .field-label { margin:0 auto 0 0; }
.sx-cmd-bar .notes-mode-tabs { margin:0; }
.sx-cmd-bar .notes-mode-tabs[hidden] { display:none; }
.sx-dim-sm { font-size:0.7rem; color:var(--dim); }
.sx-cmd-wrap { position:relative; display:flex; }
.sx-cmd-prefix { position:absolute; left:11px; top:10px; color:var(--dim); font-family:var(--font-mono, ui-monospace, monospace); font-size:0.86rem; pointer-events:none; }
.sx-cmd-prefix[hidden] { display:none; }
#sched-command { flex:1; width:100%; min-height:120px; max-height:50dvh; resize:vertical; box-sizing:border-box; margin:0; font-size:0.86rem; line-height:1.6; padding:10px 12px;
  font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); tab-size:2; }
.sx-cmd-wrap.sx-has-prefix #sched-command { padding-left:26px; }
.sx-cmd-preview { padding:10px 12px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-control); max-height:50dvh; overflow-y:auto; font-size:0.88rem; line-height:1.6; }
.board-edit-box.sx-create.sched-cmd-max #sched-command { min-height:55dvh; }
.sx-presets { display:flex; flex-wrap:wrap; gap:6px; }
.sx-preset { min-height:36px; padding:0 12px; border-radius:999px; border:1px solid var(--border); background:var(--bg); color:var(--text); font:inherit;
  font-size:0.82rem; cursor:pointer; }
.sx-preset:hover { border-color:var(--accent); }
.sx-preset.active { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.sx-preset-fields { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; }
.sx-pf { display:flex; align-items:center; gap:8px; font-size:0.84rem; color:var(--dim); }
.sx-pf[hidden] { display:none; }
.sx-pf .input { width:auto; color:var(--text); }
.sx-pf-wide { flex:1 1 260px; }
.sx-pf-wide .input { flex:1; min-width:0; }
.sx-num { width:84px !important; }
.sx-mono { font-family:var(--font-mono, ui-monospace, monospace); }
.sx-tz { flex-basis:100%; font-size:0.76rem; color:var(--dim); }
.sx-preview { padding:10px 12px; border-radius:var(--radius-control); border:1px dashed var(--border); background:var(--bg); font-size:0.86rem; display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.sx-check { display:flex; align-items:flex-start; gap:10px; cursor:pointer; min-height:44px; }
.sx-check input { margin-top:4px !important; width:18px !important; height:18px; }
.sx-check > span { display:flex; flex-direction:column; gap:2px; }
.sx-unsupported { padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-control); }
.sx-templates { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap:10px; }
.sx-template { display:flex; align-items:flex-start; gap:10px; text-align:left; padding:12px; border:1px solid var(--border); border-radius:var(--radius-control);
  background:var(--bg); color:var(--text); font:inherit; cursor:pointer; min-height:44px; }
.sx-template:hover { border-color:var(--accent); }
.sx-template > span:last-child { display:flex; flex-direction:column; gap:3px; }
.sx-template b { font-size:0.88rem; }
.sx-template span span { font-size:0.76rem; color:var(--dim); line-height:1.4; }
#sched-overlay .sched-modal-foot { position:static; padding:12px 20px; padding-bottom:max(12px, env(safe-area-inset-bottom)); }
@media (max-width: 600px) {
  #sched-overlay.board-edit-overlay { padding:0; align-items:stretch; }
  #sched-overlay .board-edit-box.sx-create { height:calc(var(--dialog-viewport-height, 100dvh) - var(--sw-fail-h, 0px)); max-width:none; border-radius:0; border:none;
    padding-top:env(safe-area-inset-top); padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
  .sx-create-head { padding:12px 8px 10px 16px; }
  .sx-create-main { flex-direction:column; }
  .sx-create-nav { width:auto; flex-direction:row; border-right:none; border-bottom:1px solid var(--border); padding:8px 12px; overflow-x:auto; overflow-y:hidden; flex-shrink:0; scrollbar-width:none; }
  .sx-create-nav::-webkit-scrollbar { display:none; }
  .sx-nav-btn { flex-shrink:0; padding:6px 12px; }
  .sx-nav-btn span { display:none; }
  .sx-create-body { padding:14px 16px 20px; }
  .sx-type-cards { grid-template-columns:1fr; }
  .sx-preset { min-height:44px; }
  .sx-pf .input { min-height:44px; }
  #sched-overlay .sched-modal-foot { padding:10px 16px; padding-bottom:max(10px, env(safe-area-inset-bottom)); }
  #sched-overlay .sched-modal-foot .btn { flex:1; min-height:48px; }
  .sched-expand-btn { min-width:44px; height:44px; }
}
/* Row enable switch: the one-tap pause/resume the old card had. */
.sx-morec { align-items:center; gap:2px; }
.sx-toggle { display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:36px; cursor:pointer; }
.sx-toggle input { -webkit-appearance:none; appearance:none; width:30px; height:18px; border-radius:999px; margin:0; cursor:pointer; position:relative;
  background:color-mix(in srgb, var(--dim) 45%, transparent); transition:background 0.15s; flex-shrink:0; }
.sx-toggle input::after { content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform 0.15s; }
.sx-toggle input:checked { background:var(--green); }
.sx-toggle input:checked::after { transform:translateX(12px); }
.sx-toggle input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@container sxt (max-width: 760px) { .sx-toggle { min-width:44px; min-height:44px; } }
.sysjob-section[hidden] { display:none; }
/* The body is a flex column that scrolls; children keep their height rather than shrinking (overflow:hidden children shrank to 2px). */
.sx-detail-body > * { flex-shrink:0; }
@container sxt (max-width: 760px) { .sx-row.sx-row-head { display:none; } }
/* Stacked rows: name and the row controls on line one; worker, frequency,
   next run and status on line two. The title may wrap to two lines rather
   than truncate to "sx-list-..." beside the controls. */
@container sxt (max-width: 760px) {
  .sx-row .sx-name { order:1; flex:1 1 0; align-items:flex-start; }
  .sx-row .sx-title { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
  .sx-row .sx-morec { order:2; }
  .sx-row::after { order:3; }
  .sx-row .sx-worker { order:4; padding-left:36px; max-width:45%; }
  .sx-row .sx-freq { order:5; }
  .sx-row .sx-nextc { order:6; margin-left:0; padding-right:0; }
  .sx-row .sx-stat { order:7; margin-left:auto; padding-right:6px; }
  .sx-scoped .sx-row .sx-freq { padding-left:36px; }
}
@media (max-width: 600px) {
  #sched-overlay.board-edit-overlay { padding:0 0 var(--sw-fail-h, 0px) 0; }
  #sched-overlay .board-edit-box.sx-create { height:auto; align-self:stretch; }
}
/* Phones: the create form is a full-screen sheet. The shared dialog-viewport
   guard caps every box 40px short of the viewport (with !important); this one
   is meant to fill it, keeping the guard's keyboard-aware height. */
@media (max-width: 600px) {
  #sched-overlay.amux-dialog-viewport > .board-edit-box.sx-create { max-height: calc(var(--dialog-viewport-height, 100dvh) - var(--sw-fail-h, 0px)) !important; }
}
.vx-lat { color:var(--accent) !important; margin-left:6px !important; }

/* Upload progress on a sync checklist row (2026-10-11). */
.sync-label { flex:1; min-width:0; }
.sync-progress { margin-top:4px; }
.sync-progress-text { font-size:0.75rem; color:var(--dim); }
.sync-progress-bar { height:4px; border-radius:2px; background:var(--border); overflow:hidden; margin-top:3px; }
.sync-progress-bar span { display:block; height:100%; background:var(--accent); transition:width .2s; }
/* AMUX-5865. Under "All" the system job list scrolls inside a bounded box.
   Expanded, its ~48 cards made the phone page ~11,000px tall, growing ~200px
   per job, which also broke WebKit's 32767px full-page capture at 3x. The
   System pill shows the list unbounded. Broken jobs sort first, so they are
   always in view without scrolling. */
.sysjob-viewall { display:none; margin-left:auto; align-items:center; text-decoration:none; }
#scheduler-view.sx-all .sysjob-viewall { display:inline-flex; }
#scheduler-view.sx-all #system-jobs-list { max-height:min(60dvh, 520px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain; border:1px solid var(--border); border-radius:var(--radius-control); padding:4px; }

/* ── Draw tab ─────────────────────────────────────────────────────────────
   amux chrome around the vendored Excalidraw editor (static/vendor/draw).
   Desktop: library left, canvas right. ≤700px: canvas fills the screen and the
   library is a bottom sheet. */
#draw-view { flex:1; min-height:0; min-width:0; flex-direction:row; position:relative; overflow:hidden;
  height:calc(100dvh - var(--draw-top, 0px)); min-height:320px; }
.draw-lib { width:264px; flex:0 0 264px; display:flex; flex-direction:column; gap:var(--space-2); min-height:0;
  border-right:1px solid var(--border); background:var(--bg); padding:var(--space-3) var(--space-3) 0; }
.draw-lib-head { display:flex; align-items:center; justify-content:space-between; }
.draw-lib-head h3 { font-size:1rem; font-weight:600; }
.draw-lib-search { width:100%; }
.draw-lib-tabs { display:flex; border-bottom:1px solid var(--border); }
.draw-lib-tabs button { flex:1; background:none; border:none; border-bottom:2px solid transparent; color:var(--dim);
  padding:8px 4px; font:inherit; font-size:0.86rem; cursor:pointer; min-height:36px; }
.draw-lib-tabs button.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.draw-lib-body { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.draw-lib-sub { font-size:0.78rem; font-weight:600; color:var(--dim); text-transform:uppercase; letter-spacing:0.04em; margin:var(--space-2) 0; }
.draw-lib-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-2); }
.draw-lib-item { display:flex; flex-direction:column; align-items:center; gap:4px; padding:var(--space-2); min-height:96px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-control); color:var(--text);
  font:inherit; font-size:0.78rem; cursor:grab; touch-action:manipulation; }
.draw-lib-item:hover, .draw-lib-item:focus-visible { border-color:var(--accent); }
.draw-lib-thumb { width:100%; height:56px; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.draw-lib-thumb svg { max-width:100%; max-height:100%; width:auto; height:auto; }
.draw-lib-name { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.draw-lib-foot { display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-2) 0 calc(var(--space-3) + env(safe-area-inset-bottom)); border-top:1px solid var(--border); }
.draw-lib-foot .btn { width:100%; justify-content:center; }
.draw-lib-save { border-style:dashed; }
.draw-empty { color:var(--dim); font-size:0.84rem; line-height:1.45; padding:var(--space-2) 0; }
.draw-recent { display:flex; align-items:center; gap:var(--space-2); width:100%; text-align:left; padding:6px; margin-bottom:6px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-control); color:var(--text); font:inherit; cursor:pointer; min-height:56px; }
.draw-recent.current, .draw-pop-row.current { border-color:var(--accent); }
.draw-recent-thumb { flex:0 0 76px; height:48px; border-radius:6px; background:#fff; overflow:hidden; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); }
.draw-recent-thumb img { max-width:100%; max-height:100%; }
.draw-recent-meta { display:flex; flex-direction:column; min-width:0; }
.draw-recent-title { font-size:0.86rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.draw-recent-when { font-size:0.76rem; color:var(--dim); }
.draw-lib-scrim { display:none; }

.draw-main { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; }
.draw-head { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); border-bottom:1px solid var(--border); min-width:0; }
.draw-icon-btn { min-width:36px; min-height:36px; display:inline-flex; align-items:center; justify-content:center; background:none;
  border:1px solid transparent; border-radius:var(--radius-control); color:var(--dim); font-size:1.1rem; cursor:pointer; }
.draw-icon-btn:hover { color:var(--text); border-color:var(--border); }
.draw-lib-open { display:none; }
#draw-view.draw-lib-hidden .draw-lib { display:none; }
#draw-view.draw-lib-hidden .draw-lib-open { display:inline-flex; }
.draw-title-wrap { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.draw-title-row { display:flex; align-items:center; gap:var(--space-2); min-width:0; }
.draw-title { font:inherit; font-size:1.1rem; font-weight:600; color:var(--text); background:none; border:1px solid transparent;
  border-radius:6px; padding:2px 6px; margin-left:-6px; min-width:0; width:100%; max-width:420px; text-overflow:ellipsis; }
.draw-title:hover { border-color:var(--border); }
.draw-title:focus { border-color:var(--accent); outline:none; box-shadow:var(--focus-ring); }
.draw-save-state { flex:0 0 auto; font-size:0.8rem; color:var(--dim); display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.draw-save-state:not(:empty)::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--dim); }
.draw-save-state[data-state="saved"]::before { background:var(--green); }
.draw-save-state[data-state="saving"]::before, .draw-save-state[data-state="dirty"]::before { background:var(--yellow); }
.draw-save-state[data-state="error"], .draw-save-state[data-state="conflict"], .draw-save-state[data-state="load-error"] { color:var(--red); }
.draw-save-state[data-state="error"]::before, .draw-save-state[data-state="conflict"]::before, .draw-save-state[data-state="load-error"]::before { background:var(--red); }
.draw-crumbs { display:flex; align-items:center; gap:2px; font-size:0.82rem; color:var(--dim); min-width:0; overflow-x:auto; white-space:nowrap; scrollbar-width:none; }
.draw-crumbs::-webkit-scrollbar { display:none; }
.draw-crumb-ico { margin-right:4px; }
.draw-crumb { background:none; border:none; color:var(--dim); font:inherit; padding:2px 4px; border-radius:4px; cursor:pointer; }
.draw-crumb:hover { color:var(--text); background:var(--card); }
.draw-crumb-sep { opacity:0.6; }
.draw-crumb-file { color:var(--text); margin-left:6px; padding-left:8px; border-left:1px solid var(--border); }
.draw-actions { display:flex; align-items:center; gap:var(--space-2); flex:0 0 auto; }
.draw-act { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.draw-act[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); }
.draw-act-ico { font-size:0.95rem; }
.draw-act-folder { display:none; }
.draw-menu-wrap { position:relative; }
.draw-menu { position:absolute; z-index:30; min-width:200px; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-control); box-shadow:0 8px 24px rgba(0,0,0,0.25); padding:4px; display:flex; flex-direction:column; }
.draw-menu[hidden] { display:none; }
#draw-export-menu { right:0; top:calc(100% + 4px); }
.draw-menu > button, .draw-pop-row { text-align:left; background:none; border:none; color:var(--text); font:inherit; font-size:0.86rem;
  padding:8px 10px; border-radius:6px; cursor:pointer; min-height:36px; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.draw-menu > button:hover, .draw-pop-row:hover { background:var(--bg); }
.draw-dir-pop { width:300px; max-width:calc(100% - 16px); max-height:min(60dvh, 420px); }
.draw-pop-path { font-size:0.76rem; color:var(--dim); padding:6px 10px; word-break:break-all; border-bottom:1px solid var(--border); }
.draw-pop-list { overflow-y:auto; min-height:0; flex:1; padding:4px 0; }
.draw-pop-empty { color:var(--dim); font-size:0.82rem; padding:8px 10px; }
.draw-pop-foot { display:flex; gap:var(--space-2); padding:6px; border-top:1px solid var(--border); }
.draw-pop-foot .btn { flex:1; justify-content:center; }
#draw-folder-list .draw-pop-row { border:1px solid transparent; }

.draw-conflict { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); padding:var(--space-2) var(--space-3);
  background:color-mix(in srgb, var(--yellow) 14%, var(--bg)); border-bottom:1px solid var(--border); font-size:0.86rem; }
.draw-conflict[hidden] { display:none; }
.draw-conflict span { flex:1; min-width:180px; }
.draw-canvas-wrap { position:relative; flex:1; min-height:0; overflow:hidden; }
.draw-host { position:absolute; inset:0; touch-action:none; overscroll-behavior:none; }
.draw-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--dim); font-size:0.9rem; padding:var(--space-4); text-align:center; }
.draw-loading[hidden] { display:none; }
.draw-snapbar { position:absolute; left:50%; transform:translateX(-50%); bottom:calc(var(--space-3) + env(safe-area-inset-bottom)); z-index:5;
  display:flex; align-items:center; gap:2px; padding:4px; background:var(--card); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,0.18); }
.draw-snap { display:inline-flex; align-items:center; gap:6px; background:none; border:none; color:var(--text); font:inherit; font-size:0.84rem;
  padding:6px 10px; border-radius:8px; cursor:pointer; min-height:36px; }
.draw-snap:hover { background:var(--bg); }
.draw-snap-ico { font-weight:700; color:var(--dim); }
.draw-snap-state { font-size:0.68rem; font-weight:700; padding:2px 6px; border-radius:999px; background:var(--bg); color:var(--dim); }
.draw-snap.on .draw-snap-state { background:color-mix(in srgb, var(--accent) 22%, transparent); color:var(--accent); }
.draw-snap.on .draw-snap-ico { color:var(--accent); }
.draw-snap-fs { border-left:1px solid var(--border); border-radius:0 8px 8px 0; }
.draw-selbar { position:absolute; right:var(--space-3); top:64px; z-index:5; display:flex; align-items:center; gap:var(--space-2);
  padding:6px; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:0 4px 14px rgba(0,0,0,0.18); }
.draw-selbar[hidden] { display:none; }
.draw-selbar-lbl { font-size:0.8rem; color:var(--dim); padding:0 4px; }
.draw-penbar { position:absolute; left:50%; transform:translateX(-50%); bottom:calc(var(--space-3) + env(safe-area-inset-bottom)); z-index:6;
  display:flex; align-items:center; gap:var(--space-2); padding:6px 8px; background:var(--card); border:1px solid var(--border);
  border-radius:14px; box-shadow:0 6px 20px rgba(0,0,0,0.25); max-width:calc(100% - 16px); overflow-x:auto; }
.draw-penbar[hidden] { display:none; }
.draw-pen-colors, .draw-pen-widths { display:flex; gap:4px; }
.draw-pen-color { width:32px; height:32px; border-radius:50%; background:var(--c); border:2px solid var(--card); outline:2px solid transparent; cursor:pointer; }
.draw-pen-color.on { outline-color:var(--accent); }
.draw-pen-width { width:36px; height:32px; display:inline-flex; align-items:center; justify-content:center; background:var(--bg); border:1px solid var(--border); border-radius:8px; cursor:pointer; }
.draw-pen-width span { display:block; width:18px; background:var(--text); border-radius:2px; }
.draw-pen-width.on { border-color:var(--accent); }
.draw-pen-tool { min-width:36px; height:36px; background:none; border:1px solid transparent; border-radius:8px; color:var(--text); font-size:1.05rem; cursor:pointer; }
.draw-pen-tool.on { border-color:var(--accent); color:var(--accent); }
.draw-status { display:flex; align-items:center; gap:var(--space-2); padding:4px var(--space-3); border-top:1px solid var(--border);
  font-size:0.78rem; color:var(--dim); min-height:28px; }
.draw-status-text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.draw-status-text[data-state="error"], .draw-status-text[data-state="conflict"], .draw-status-text[data-state="load-error"] { color:var(--red); }
.draw-status-retry { background:none; border:1px solid var(--border); border-radius:6px; color:var(--text); font:inherit; padding:2px 8px; cursor:pointer; }
.draw-status-retry[hidden] { display:none; }
/* Live mode: the canvas takes the whole screen with only the pen bar. */
#draw-view.draw-live { position:fixed; inset:0; height:auto; z-index:calc(var(--layer-dialog) - 1); background:var(--bg); }
#draw-view.draw-live .draw-lib, #draw-view.draw-live .draw-head, #draw-view.draw-live .draw-status,
#draw-view.draw-live .draw-snapbar, #draw-view.draw-live .draw-selbar, #draw-view.draw-live .draw-lib-scrim { display:none !important; }
#draw-view:fullscreen { height:100%; }
/* No page scroll behind the canvas (on <html>: body is not a scroll container,
   so the sticky header keeps its offset). */
html.draw-active { overflow:hidden; }
/* Excalidraw inherits the amux font stack for its UI chrome, not the canvas. */
#draw-host .excalidraw { --ui-font: inherit; }

@media (max-width: 700px) {
  .draw-lib { position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; flex:none; max-height:72dvh; z-index:calc(var(--layer-dialog) - 2);
    border-right:none; border-top:1px solid var(--border); border-radius:16px 16px 0 0; box-shadow:0 -10px 30px rgba(0,0,0,0.3);
    transform:translateY(105%); transition:transform 0.2s ease; padding-left:max(var(--space-3), env(safe-area-inset-left)); padding-right:max(var(--space-3), env(safe-area-inset-right)); }
  #draw-view.draw-lib-sheet .draw-lib { transform:none; }
  #draw-view.draw-lib-sheet .draw-lib-scrim { display:block; position:fixed; inset:0; z-index:calc(var(--layer-dialog) - 3); background:rgba(0,0,0,0.35); }
  .draw-lib-open, #draw-view.draw-lib-hidden .draw-lib-open { display:inline-flex; }
  #draw-view.draw-lib-hidden .draw-lib { display:flex; }
  .draw-head { gap:var(--space-2); padding:6px max(var(--space-2), env(safe-area-inset-right)) 6px max(var(--space-2), env(safe-area-inset-left)); }
  .draw-icon-btn, .draw-act { min-width:44px; min-height:44px; }
  .draw-act { padding:0 10px; justify-content:center; }
  .draw-act-lbl { display:none; }
  .draw-actions > .draw-act:first-child { display:none; }
  .draw-title { font-size:1rem; }
  /* One header row on a phone: the folder lives behind its own button. */
  .draw-crumbs { display:none; }
  .draw-act-folder { display:inline-flex; }
  .draw-title-wrap { min-width:72px; }
  /* The save state is a dot on a phone; a failure still says so in words. */
  .draw-save-state[data-state="saved"], .draw-save-state[data-state="saving"], .draw-save-state[data-state="dirty"],
  .draw-save-state[data-state="new"], .draw-save-state[data-state="loading"] { font-size:0; gap:0; }
  .draw-penbar { flex-wrap:wrap; justify-content:center; width:calc(100% - 16px); overflow:visible; }
  .draw-status { display:none; }
  .draw-lib-tabs button, .draw-crumb, .draw-menu > button, .draw-pop-row, .draw-snap, .draw-pen-tool, .draw-pen-color, .draw-pen-width, .draw-lib-head .draw-icon-btn { min-height:44px; }
  .draw-pen-color { width:44px; height:44px; }
  .draw-pen-width, .draw-pen-tool { min-width:44px; }
  /* Excalidraw's phone UI owns the top and bottom edges (shape toolbar, menu,
     undo) and a right-hand column, so the snap toggles are a column on the left. */
  .draw-snapbar { top:50%; bottom:auto; left:max(6px, env(safe-area-inset-left)); transform:translateY(-50%); flex-direction:column; padding:3px; }
  .draw-snap { min-width:44px; padding:0; justify-content:center; flex-direction:column; gap:1px; font-size:0.9rem; }
  .draw-snap-lbl { display:none; }
  .draw-snap-state { font-size:0.56rem; padding:1px 4px; }
  .draw-snap-fs { border-left:none; border-top:1px solid var(--border); border-radius:0 0 8px 8px; }
  .draw-main { padding-bottom:env(safe-area-inset-bottom); }
  .draw-selbar { top:auto; bottom:calc(76px + env(safe-area-inset-bottom)); right:var(--space-2); }
  .draw-selbar .btn { min-height:44px; }
  .draw-dir-pop { left:8px !important; right:8px; width:auto; }
}