/* Terminal Bridge CSS - Extracted from terminal_bridge.html */
/* Generated: 2026-01-04 */

/* VS Code Default Light Modern Theme Colors */
:root {
    /* env() is CSS-only, so publish the bottom inset as a variable the FAB
       positioner can read (it sets inline style.bottom, which no stylesheet
       rule can override). 0px on desktop and on any device without an inset. */
    --tb-safe-bottom: env(safe-area-inset-bottom, 0px);
    /* Terminal Colors (Custom Settings) */
    --terminal-background: #ffffff;
    /* White background */
    --terminal-foreground: #000000;
    /* Black text */
    --terminal-ansi-black: #000000;
    /* Pure black */
    --terminal-ansi-white: #1a1a1a;
    /* Dark text for light theme (ANSI white = readable on white bg) */
    --terminal-ansi-bright-black: #424242;
    /* Dark gray - better iPhone readability */
    --terminal-ansi-bright-white: #333333;
    /* Dark gray for light theme (readable on white bg) */

    /* Default Light Modern Theme Colors */
    --background: #ffffff;
    /* Main background */
    --foreground: #000000;
    /* Primary text */
    --secondary-foreground: #424242;
    /* Secondary text - improved contrast for mobile */
    --border: #e5e5e5;
    /* Borders */
    --hover: #f3f3f3;
    /* Hover states */
    --selection: #0078d4;
    /* Selection blue */
    --selection-background: #e3f2fd;
    /* Selection background */

    /* Status Colors */
    --success: #16a085;
    /* Success green */
    --warning: #f39c12;
    /* Warning orange */
    --error: #e74c3c;
    /* Error red */
    --info: #3498db;
    /* Info blue */

    /* UI Elements */
    --button-primary: #0078d4;
    /* Primary button */
    --button-primary-hover: #106ebe;
    /* Primary button hover */
    --button-secondary: #f3f3f3;
    /* Secondary button */
    --input-background: #ffffff;
    /* Input fields */
    --input-border: #cccccc;
    /* Input borders */
    --scrollbar: #c1c1c1;
    /* Scrollbars */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    background: var(--background);
    color: var(--foreground);
    font-family: "SF Mono", "Menlo", "Consolas", "Courier New", monospace;
    height: 100vh;
    height: -webkit-fill-available;
    /* PWA fix for iPhone */
    max-height: -webkit-fill-available;
    /* Ensure it does not exceed viewport */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: fixed;
    /* PWA fix */
    width: 100%;
    /* Prevent iOS native swipe gestures - critical for PWA mode */
    overscroll-behavior-x: contain;
    overscroll-behavior-y: contain;
    -webkit-overscroll-behavior-x: contain;
    -webkit-overscroll-behavior-y: contain;
    top: 0;
    left: 0;
}

#header {
    background: #1e3a5f;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #16304d;
    font-size: 12px;
    color: #ffffff;
    gap: 10px;
}


/* Layout wrapper — must be flex for all agent types (not just planning) */
.planning-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.planning-layout #terminal-container {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

#terminal-container {
    flex: 1;
    background: var(--terminal-background);
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

/* Fix Bug #5: Prevent iPhone shake undo dialog on UI controls only */
button, nav, .hamburger-btn, .planning-panel, #command-input-container,
input[type="range"], label, a, .menu-overlay {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Allow text selection in terminal output and markdown viewer (default for iOS) */
#terminal-output,
#terminal-output *,
.terminal-message,
.terminal-message *,
.markdown-viewer-content,
.markdown-viewer-content * {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
}

/* Loop Register / planning panel: let item TITLE + NOTES text be selected.
   The panel root is user-select:none above (iOS shake-undo guard) which
   cascades onto these, so opt them back in. Status toggling lives on the
   check-icon + item menu (not the text body), so freeing the text for
   drag-select / green-mic readback doesn't steal taps. (2026-06-15) */
.task-title,
.task-notes {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
    cursor: text;
}

/* Disable shake gestures on the entire body */
body,
html {
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: contain;
}

/* VS Code style scrollbars */
#terminal-container::-webkit-scrollbar {
    width: 12px;
    background: var(--background);
}

#terminal-container::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
    border-radius: 6px;
}

#terminal-container::-webkit-scrollbar-thumb:hover {
    background: #999999;
}

#terminal-output {
    padding: 16px;
    padding-right: 12px; /* Slightly less right padding for more text room */
    max-width: 100%; /* Fill container width — container flex layout prevents overly long lines */
    box-sizing: border-box;
    font-family: "SF Mono", "Menlo", "Consolas", "Courier New", monospace;
    font-size: 14px;
    font-weight: normal; /* Was bold — changed so ANSI bold ([1m) is visually distinct */
    line-height: 1.5; /* Good readability for prose */
    text-decoration: none; /* Prevent browser underline on contenteditable */
    /* Enhanced text selection support for all platforms */
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;

    /* iOS-specific text selection enhancements */
    -webkit-touch-callout: default !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none !important;
    touch-action: auto;

    /* Prevent selection interference */
    pointer-events: auto;

    /* Ensure text selection works at any scroll position */
    position: relative;
    overflow-anchor: none;

    /* Text wrapping - prose-optimized for reflowed content */
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word; /* Only break mid-word as last resort */
    word-break: normal; /* Do not break words arbitrarily */
    hyphens: none; /* Don't hyphenate technical terms */

    background: var(--terminal-background);
    color: var(--terminal-foreground);
    font-feature-settings: "liga" 0; /* Disable ligatures that might affect box chars */
    text-decoration: none !important;
}

/* Ensure ALL child elements in terminal output are selectable */
#terminal-output *,
#terminal-output span,
#terminal-output div,
#terminal-output p,
.terminal-message,
.terminal-message *,
.ansi-black,
.ansi-red,
.ansi-green,
.ansi-yellow,
.ansi-blue,
.ansi-magenta,
.ansi-cyan,
.ansi-white,
.ansi-bright-black,
.ansi-bright-red,
.ansi-bright-green,
.ansi-bright-yellow,
.ansi-bright-blue,
.ansi-bright-magenta,
.ansi-bright-cyan,
.ansi-bright-white {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
}

/* Clickable URLs must be TAPPABLE, not selectable. The `#terminal-output *`
   rule above forces user-select:text on every descendant — including links —
   so on iOS a tap on a link places a text caret instead of opening it. This
   rule is more specific (#terminal-output a) and overrides it for anchors only,
   so a tap fires the link's onclick. (2026-06-22, T1 — API/doc URL clickability) */
#terminal-output a,
#terminal-output a * {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: default !important;
    cursor: pointer;
    pointer-events: auto !important;
}

/* ============================================================
   TUI-TERMINAL MODE (T8 / `claude agents`) — render-width fix
   ============================================================
   The default #terminal-output is white-space:pre-wrap (right for T1-T6's
   reflowed prose). But the native `claude agents` TUI draws a FIXED-WIDTH grid:
   every list row, separator and the right-edge timing column are laid out to the
   full 215-column pane width. When the browser renders #terminal-output at FEWER
   than 215 columns (any viewport under ~1670px, or the panel open), pre-wrap
   wraps each 215-wide row onto a second visual line — the "double-lines
   overlapping at the bottom, timing line wrapping under itself" garble.

   Fix (viewport-INDEPENDENT, so it can't be "verified at the wrong width"):
   for the TUI terminal, render the grid 1:1 with white-space:pre and let it
   scroll horizontally if the viewport is ever narrower than the grid — never
   wrap. At Mark's desktop sizes (215-col grid fits in 247 cols @1920 / 331 @2560)
   no scrollbar appears at all; below ~1670px a scrollbar replaces the garble.
   Scoped to body.tui-terminal (set by serve_terminal_interface tui_mode=True for
   T8) so T1-T6 prose wrapping is untouched. See T8_TERMINAL_RENDER_FIX_2026-06-10.md

   2026-06-11 (Mark re-spec): the no-wrap is now ALSO gated on body.av-list-active
   (toggled in terminal-bridge.js's AV LIST FAST PATH from window._avListActive).
   Verbatim no-wrap is RIGHT for the roster grid, but WRONG when you drill into a
   worker — that stream is reflowable prose and must wrap to the phone exactly like
   T1-T6. So: list screen → pre + h-scroll; inside a worker → falls back to the
   default #terminal-output pre-wrap. "Why can't the other terminals' code be used
   on this screen" — now it is. */
body.tui-terminal.av-list-active #terminal-output {
    white-space: pre;
    word-wrap: normal;
    overflow-wrap: normal;
    word-break: normal;
    overflow-x: auto;
}
body.tui-terminal.av-list-active #terminal-output *,
body.tui-terminal.av-list-active #terminal-output div,
body.tui-terminal.av-list-active #terminal-output span,
body.tui-terminal.av-list-active #terminal-output p {
    white-space: pre;
    word-wrap: normal;
    overflow-wrap: normal;
}

/* Terminal prompt styling */
.terminal-prompt {
    color: var(--info);
    font-weight: 600;
}

.terminal-error {
    color: var(--error);
}

.terminal-warning {
    color: var(--warning);
}

.terminal-success {
    color: var(--success);
}

.terminal-info {
    color: var(--info);
}

/* Claude Code Question Block Styling (AskUserQuestion tool) */
.claude-question-block {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
    border: 2px solid #3b82f6;
    border-radius: 12px;
    padding: 16px 20px;
    margin: 16px 0;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.claude-question-header {
    font-size: 16px;
    font-weight: 700;
    color: #1e40af;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.claude-question-header::before {
    content: "❓";
    font-size: 18px;
}

.claude-question-text {
    font-size: 15px;
    color: #1f2937;
    margin-bottom: 16px;
    line-height: 1.5;
}

.claude-question-option {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 8px 0;
    transition: all 0.2s ease;
}

.claude-question-option:hover {
    border-color: #3b82f6;
    background: #f8fafc;
}

.claude-question-option.selected {
    border-color: #3b82f6;
    background: #eff6ff;
    border-width: 2px;
}

.claude-question-option-number {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    font-weight: 600;
    font-size: 12px;
    margin-right: 12px;
}

.claude-question-option-label {
    font-weight: 600;
    color: #1f2937;
}

.claude-question-option-desc {
    color: #6b7280;
    font-size: 13px;
    margin-left: 36px;
    margin-top: 4px;
}

.claude-question-hint {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    font-size: 12px;
    color: #6b7280;
    text-align: center;
}

.claude-question-hint kbd {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 2px 6px;
    font-family: inherit;
    font-size: 11px;
}

/* Tappable question options */
.claude-question-option[onclick] {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(59, 130, 246, 0.2);
}

.claude-question-option[onclick]:active {
    transform: scale(0.98);
    background: #dbeafe;
}

/* Navigation buttons for interactive menu selection */
.nav-menu-btn {
    height: 36px;
    width: 36px;
    background: #eff6ff;
    color: #3b82f6;
    border: 2px solid #3b82f6;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.nav-menu-btn:hover {
    background: #3b82f6;
    color: white;
}

.nav-menu-btn:active {
    transform: scale(0.92);
}

.nav-ok-btn {
    width: auto;
    padding: 0 12px;
    background: #3b82f6;
    color: white;
    font-size: 13px;
}

/* Box-drawing table styling - preserve and display nicely */
.box-table {
    font-family: "SF Mono", "Menlo", "Consolas", "Courier New", monospace;
    white-space: pre;
    line-height: 1.2;
    background: #f8fafc;
    border-radius: 8px;
    padding: 12px;
    margin: 12px 0;
    overflow-x: auto;
}

/* Claude Code v2.1.x welcome banner — replaces the wrap-breaking ASCII box */
.cc-welcome-banner {
    background: linear-gradient(135deg, #fef3e2 0%, #fde8d4 100%);
    border: 1px solid #f0c896;
    border-radius: 10px;
    margin: 12px 0 12px 0;
    padding: 14px 18px;
    /* Leave room for the right-side floating control rail (mic / settings) */
    margin-right: 72px;
    color: #3f2810;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(63, 40, 16, 0.06);
}
.cc-wb-title {
    font-weight: 700;
    font-size: 15px;
    color: #b35a18;
    border-bottom: 1px solid #f0c896;
    padding-bottom: 8px;
    margin-bottom: 10px;
    letter-spacing: 0.2px;
}
.cc-wb-ver {
    font-weight: 500;
    color: #8a6235;
    margin-left: 6px;
    font-size: 13px;
}
.cc-wb-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 2fr;
    gap: 18px;
    align-items: start;
}
.cc-wb-left { color: #3f2810; }
.cc-wb-welcome {
    font-weight: 700;
    font-size: 14.5px;
    color: #2c1808;
    margin-bottom: 8px;
}
.cc-wb-id {
    color: #6e4d29;
    font-size: 12.5px;
    margin: 2px 0;
    word-break: break-word;
}
.cc-wb-right {}
.cc-wb-rh {
    font-weight: 700;
    color: #b35a18;
    margin-bottom: 6px;
    font-size: 13.5px;
}
.cc-wb-bullets {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}
.cc-wb-bullets li {
    margin: 4px 0;
    color: #4a311a;
}
.cc-wb-code {
    background: rgba(179, 90, 24, 0.12);
    color: #8a3d05;
    padding: 1px 5px;
    border-radius: 4px;
    font-family: "SF Mono", "Menlo", "Consolas", monospace;
    font-size: 12px;
}
@media (max-width: 700px) {
    .cc-wb-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ============================================================
   Post-/clear restart landing card — TB-rendered "ready to go"
   header (logo + Claude Code + MAX + identity + recent activity).
   Self-contained so it survives Claude Code banner format changes.
   ============================================================ */
.cc-restart {
    background: linear-gradient(135deg, #fef3e2 0%, #fde8d4 100%);
    border: 1px solid #f0c896;
    border-radius: 12px;
    margin: 10px 72px 12px 0;   /* right gap clears the floating mic/settings rail */
    max-width: 80ch;            /* no wider than the TTS-version box (Mark, 2026-06-15) */
    padding: 16px 20px 14px;
    color: #3f2810;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
    box-shadow: 0 2px 6px rgba(63, 40, 16, 0.08);
    /* UX-fix3: card content wraps cleanly when the Agents panel narrows the pane */
    overflow-wrap: break-word;
    word-break: break-word;
    box-sizing: border-box;
}
.cc-restart .cc-rs-titlerow {
    flex-wrap: wrap;
    min-width: 0;
}
.cc-restart .cc-rs-title {
    overflow-wrap: anywhere;
}
.cc-rs-head {
    display: flex;
    align-items: center;
    gap: 13px;
}
.cc-rs-logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* The real Claude Code block-art logo on a small dark chip — orange glyphs
       on dark, exactly like the tmux banner, so the quadrant blocks' negative
       space reads as the carving instead of bleeding the peach card through. */
    background: radial-gradient(120% 120% at 30% 25%, #241a12 0%, #140f0a 100%);
    border: 1px solid #f0c896;
    border-radius: 10px;
    padding: 8px 11px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(63, 40, 16, 0.10);
}
.cc-rs-logo-art {
    font-family: "Cascadia Code", "Cascadia Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
    font-size: 13px;
    line-height: 1.0;
    letter-spacing: 0;
    white-space: pre;
    color: #e08a5e;  /* warm clay-orange, matches the terminal salmon on dark */
    text-shadow: 0 0 6px rgba(224, 138, 94, 0.35);
}
/* Gemma gem logo for the DiffusionGemma / Qwen harness panels (dg/qwe kinds) */
.cc-rs-logo-gem { padding: 6px 8px; }
.cc-rs-logo-gem svg { display: block; width: 30px; height: 30px; }
/* Z.ai mark for the GLM harness panel (glm kind) — the official logo SVG has
   white + dark-grey fills and the flame gradient, drawn for a LIGHT ground, so
   the chip is soft white rather than the Claude dark chip. */
.cc-rs-logo-glm {
    padding: 5px 7px;
    background: #ffffff;
    border: 1px solid #d9ceb9;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(63, 40, 16, 0.08);
}
.cc-rs-logo-glm img { display: block; width: 32px; height: 32px; }
/* OpenAI mark for the /gpt (Codex) landing card — loop #2923. The official
   knot is a single dark path drawn for a LIGHT ground, so the chip is soft
   white like the GLM one rather than the Claude dark chip. */
.cc-rs-logo-openai {
    padding: 6px 8px;
    background: #ffffff;
    border: 1px solid #d3cbe4;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(40, 26, 70, 0.10);
}
.cc-rs-logo-openai svg { display: block; width: 30px; height: 30px; }
/* "Claude Code Harness vX" sub-badge sitting beside the model name */
.cc-rs-harness {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    color: #2b62b8;
    background: rgba(26, 115, 232, 0.10);
    border: 1px solid rgba(26, 115, 232, 0.28);
    padding: 1px 7px;
    border-radius: 5px;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
/* Cooler card chrome for dg/qwe so the blue gem reads as intentional, not a clash
   with the Claude clay palette — still the same shipshape card shape as T1-T6. */
.cc-restart-dg, .cc-restart-qwe {
    background: linear-gradient(135deg, #eef3fb 0%, #e1eaf7 100%) !important;
    border-color: #c6d6ee !important;
}
.cc-restart-dg .cc-rs-title, .cc-restart-qwe .cc-rs-title { color: #15233e; }
.cc-restart-dg .cc-rs-meta b, .cc-restart-qwe .cc-rs-meta b { color: #2f4860; }
.cc-restart-dg .cc-rs-meta, .cc-restart-qwe .cc-rs-meta { color: #5a708f; }
.cc-restart-dg .cc-rs-activity, .cc-restart-qwe .cc-rs-activity { border-top-color: #c6d6ee; }
.cc-restart-dg .cc-rs-act-label, .cc-restart-qwe .cc-rs-act-label { color: #2b62b8; }
.cc-restart-dg .cc-rs-act-term, .cc-restart-qwe .cc-rs-act-term { color: #2b62b8; }
.cc-restart-dg .cc-rs-act-task, .cc-restart-qwe .cc-rs-act-task { color: #2c3a4d; }
.cc-restart-dg .cc-rs-act-time, .cc-restart-qwe .cc-rs-act-time { color: #7088a5; }
/* GLM card — Z.ai-flavoured warm-neutral: quiet grey ground with the flame-orange
   accent on the harness badge, distinct from Claude peach and DG/QWE blue. */
.cc-restart-glm {
    background: linear-gradient(135deg, #f5f5f4 0%, #ebeae7 100%) !important;
    border-color: #d6d3cd !important;
}
.cc-restart-glm .cc-rs-title { color: #26221c; }
.cc-restart-glm .cc-rs-meta b { color: #4a443b; }
.cc-restart-glm .cc-rs-meta { color: #78716a; }
.cc-restart-glm .cc-rs-harness {
    color: #c2410c;
    background: rgba(251, 121, 39, 0.10);
    border-color: rgba(251, 121, 39, 0.32);
}
/* Codex card (loop #2923) — the same deep violet the /gpt top bar wears
   (config/tb_profiles.json "accent"), so the room reads as one thing from the
   bar down. Static fills only: no animation, nothing for dwm to composite. */
.cc-restart-codex {
    background: linear-gradient(135deg, #f3f0fa 0%, #e8e3f5 100%) !important;
    border-color: #d3cbe4 !important;
}
.cc-restart-codex .cc-rs-title { color: #241a3d; }
.cc-restart-codex .cc-rs-meta b { color: #3d2a6b; }
.cc-restart-codex .cc-rs-meta { color: #6f6392; }
.cc-restart-codex .cc-rs-harness {
    color: #3d2a6b;
    background: rgba(61, 42, 107, 0.10);
    border-color: rgba(61, 42, 107, 0.30);
}
.cc-rs-titlewrap { flex: 1 1 auto; min-width: 0; }
.cc-rs-titlerow {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.cc-rs-title {
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.2px;
    color: #2c1808;
    line-height: 1.1;
}
.cc-rs-max {
    display: inline-block;
    background: #D97757;
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    padding: 2px 8px;
    border-radius: 5px;
    text-transform: uppercase;
    box-shadow: 0 1px 1px rgba(63, 40, 16, 0.18);
}
/* Loop #2041: the MAX chip shrunk to sit inside the 12.5px meta line. */
.cc-rs-max-meta {
    font-size: 9px;
    letter-spacing: 1.1px;
    padding: 1px 6px;
}
.cc-rs-meta {
    margin-top: 4px;
    font-size: 12.5px;
    color: #8a6235;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cc-rs-meta .cc-rs-sep { opacity: 0.45; }
/* Loop #3239 — the /gpt card's one meta line, in two widths. Codex's start-up
   box, composer footer row and weekly-limit sentence all fold in here, so the
   line has more to say than it used to: the desktop variant carries model ·
   effort · permissions · pot · host · thread, the phone variant keeps the model
   (minus its `gpt-N-` generation prefix), the effort and the pot. Swapped by
   width alone — no JS, no rebuild on rotate. Claude cards emit neither span. */
.cc-rs-cx-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.cc-rs-cx-short { display: none; }
@media (max-width: 480px) {
    .cc-rs-cx-full { display: none; }
    .cc-rs-cx-short { display: inline-flex; }
}
/* The weekly pot, amber — the one figure on this card that is a warning. */
.cc-restart-codex .cc-rs-pot {
    color: #8a5a00;
    background: rgba(217, 138, 0, 0.14);
    border: 1px solid rgba(217, 138, 0, 0.32);
    border-radius: 5px;
    padding: 1px 6px;
    font-weight: 700;
    font-size: 11px;
    white-space: nowrap;
}
.cc-rs-meta b { color: #6e4d29; font-weight: 700; }
.cc-rs-status {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #2f7d32;
    white-space: nowrap;
}
.cc-rs-status .cc-rs-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3aa544;
    box-shadow: 0 0 0 3px rgba(58, 165, 68, 0.18);
}
/* "What this session is working on" — one-line footer tucked at the BOTTOM of the
   last TTS box (.tts-narrow-block). Smaller than the reply, NOT bold, quiet amber,
   one line ellipsised; a thin separator sets it off from the spoken text. */
#terminal-output .tts-narrow-block .cc-session-task {
    display: block;
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px solid rgba(245, 158, 11, 0.35);
    font: inherit;                    /* same monospace font as the pane / box */
    font-size: 0.82em;                /* smaller than the reply text */
    font-weight: 400;                 /* not bold */
    color: #9a6a2a;                   /* muted amber — quiet, not deflecting */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Opus Overwatch verdict — a small line under DG's reply showing the master's
   check ("👍 all good" green / "🔧 fixing" amber). Visual label only; stripped
   from spoken TTS in _ttsBlockText(). Mirrors the .cc-session-task footer. */
#terminal-output .tts-narrow-block .dg-overwatch-verdict {
    display: block;
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px solid rgba(16, 185, 129, 0.35);
    font: inherit;
    font-size: 0.82em;
    font-weight: 400;
    color: #2e8b6f;                   /* quiet green — reassuring, not loud */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#terminal-output .tts-narrow-block .dg-overwatch-verdict.fail {
    border-top-color: rgba(245, 158, 11, 0.40);
    color: #9a6a2a;                   /* amber while Opus is fixing it */
}

/* Ghost cards (loop #1281) — machine FYI pings that never entered the session.
   Instrument, not speech: muted slate with a thin neutral left rule, so they
   read as distinct from Mark-blue (.user-speech-block), TTS-orange
   (.tts-narrow-block) and the filled quote-grey card (.quote-bar-block). They
   sit OUTSIDE .tts-narrow-block, so the TTS layer never speaks them. No
   animation — they repaint only when a value actually changes (dwm GPU). */
#terminal-output .tb-ghost-stack {
    display: block;
    margin: 10px 0 2px 0;
    /* The fixed STT/TTS FAB column lives at right:16px, 56px wide (= a 72px
       lane on the right edge). Ghost cards run full width and their right-side
       "Hand to T<n>" / dismiss buttons landed UNDER that column — unreachable
       on a phone (Mark, 2026-07-21). Reserve the lane + an 8px gap so the
       buttons always sit clear of the FABs, at every viewport width. */
    padding-right: 80px;
    /* Loop #2283 — Mark reads this as the BOTTOM-OF-SCREEN ticker, but the
       stack is the last child of #terminal-output, i.e. scroll CONTENT. Any
       reader not pinned to the exact bottom (the normal state on a phone) had
       it below the fold and saw no ticker at all, while the card sat happily
       in the store and in /api/terminal/attention. Sticking it to the
       scrollport bottom keeps it in flow — the height never changes, so the
       #2266/#2267 scroll-anchoring work is untouched — while guaranteeing it
       is on screen. */
    position: sticky;
    /* The loop #2379 pending-drafts bar is the tail-most sticky element, so
       the ticker rides ABOVE it. --tb-wa-bar-h is that bar's measured height,
       set on #terminal-output while it is shown and cleared when it goes. */
    bottom: var(--tb-wa-bar-h, 0px);
    z-index: 3;
    background: var(--terminal-background, #ffffff);
    border-top: 1px solid var(--border, #e2e8f0);
    padding-top: 4px;
}
/* Loop #2379 — the PERSISTENT pending-drafts chip. The per-bubble chip rides
   the historic bubble that quoted "Draft #N STAGED", which is far up in
   scrollback: a refresh lands Mark at the tail with nothing saying a draft is
   waiting (screenshot-verified 21 Aug, draft #6 staged, tail bare). Same
   position:sticky mechanism as .tb-ghost-stack above — last child of
   #terminal-output, so it stays scroll CONTENT and the #2266/#2267 anchoring
   work is untouched — but pinned below the ticker so both are readable at
   once. Present only while a draft is staged; the row is removed otherwise,
   so it costs no height in the normal case. No animation: this repaints only
   when the staged-id set actually changes. */
#terminal-output .tb-wa-pending {
    display: block;
    margin: 2px 0 0 0;
    /* Same FAB-lane reserve as .tb-ghost-stack — right:16px, 56px wide, 8px
       gap — so the chip never lands under the STT/TTS column on a phone. */
    padding: 4px 80px 3px 0;
    position: sticky;
    bottom: 0;
    z-index: 4;
    background: var(--terminal-background, #ffffff);
    border-top: 1px solid var(--border, #e2e8f0);
}
#terminal-output .tb-wa-pending .tb-wa-pending-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid #25d366;
    background: rgba(37, 211, 102, 0.10);
    color: #128c4a;
    font: inherit;
    font-size: 0.78em;
    line-height: 1.4;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#terminal-output .tb-wa-pending .tb-wa-pending-chip:hover {
    background: rgba(37, 211, 102, 0.18);
}
#terminal-output .tb-wa-pending .tb-wa-pending-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#terminal-output .tb-ghost-card {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0 3px 10px;
    border-left: 2px solid #cbd5e1;
    font: inherit;
    font-size: 0.80em;
    line-height: 1.45;
    color: #64748b;
}
#terminal-output .tb-ghost-card.done {
    border-left-color: #a7c4b5;
}
/* Loop #1739 — the job STOPPED without finishing. Mark: "I need some red arrow
   or red tick or something red that indicates to me that it has stopped."
   Deliberately static: a thicker red border, a flat tint and a darker text
   colour. No animation, no transition, no gradient — the stack repaints only on
   a signature change and this must not give the compositor a reason to. */
#terminal-output .tb-ghost-card.stopped {
    border-left-color: #dc2626;
    border-left-width: 3px;
    background: #fef2f2;
    color: #b91c1c;
}
#terminal-output .tb-ghost-card.stopped .tb-ghost-btn {
    border-color: #fca5a5;
    color: #b91c1c;
}
#terminal-output .tb-ghost-card.stopped .tb-ghost-btn:hover {
    border-color: #dc2626;
    color: #991b1b;
}
/* DEVIATION NOTE: static/css/terminal-bridge.css is not in the loop #1758
   means list (templates/terminal_bridge.html is) — but every sibling ghost-
   card style (.stopped, .sleeping) lives HERE, not inline in the template, so
   the amber rule follows the same home rather than forking the styling
   convention. Loop #1758 — a DEAD job a known schedule says is between runs (a cron
   restart PC1's crontab confirms, or an explicit --schedule on its registry
   entry). Distinct from .sleeping below: that is a job PARKING ITSELF ahead
   of a window it knows about; this is one that already died with nobody
   telling the ticker it would be back. Sits between .sleeping's calm and
   .stopped's alarm — visible enough that "between runs" is not invisible,
   calm enough that it does not train Mark to ignore it like a nightly red
   false-positive did. Static, for the same compositor reason as the others. */
#terminal-output .tb-ghost-card.waiting {
    border-left-color: #d97706;
    border-left-width: 3px;
    background: #fffbeb;
    color: #92400e;
}
/* Loop #1745 — parked on a scheduled window (the night gear, a cron slot).
   Deliberately the CALMEST card on the bar: the ordinary ghost-card colour with
   a cooler border, no tint and no weight change. It must not read as a problem,
   because it isn't one — red is reserved for broken. Static like .stopped, for
   the same compositor reason. */
#terminal-output .tb-ghost-card.sleeping {
    border-left-color: #94a3b8;
    border-left-style: dashed;
}
#terminal-output .tb-ghost-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#terminal-output .tb-ghost-btn {
    flex: 0 0 auto;
    padding: 1px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    font-size: 0.92em;
    color: #64748b;
    cursor: pointer;
}
#terminal-output .tb-ghost-btn:hover { border-color: #94a3b8; color: #475569; }
#terminal-output .tb-ghost-btn[disabled] { opacity: 0.5; cursor: default; }
/* Phone: the card must not force a horizontal scroll or shove the button off. */
@media (max-width: 640px) {
    #terminal-output .tb-ghost-card { font-size: 0.86em; gap: 6px; }
    #terminal-output .tb-ghost-btn { padding: 1px 6px; }
}

.cc-rs-activity {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f0c896;
}
.cc-rs-act-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #b35a18;
    margin-bottom: 6px;
}
.cc-rs-act-table { border-collapse: collapse; width: 100%; }
.cc-rs-act-table td { padding: 3px 12px 3px 0; font-size: 13.5px; line-height: 1.4; vertical-align: top; }
.cc-rs-act-table .cc-rs-act-term { color: #b35a18; font-weight: 700; white-space: nowrap; }
.cc-rs-act-table .cc-rs-act-time { color: #a07a4a; white-space: nowrap; }
.cc-rs-act-table .cc-rs-act-task { color: #4a311a; width: 100%; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 700px) {
    .cc-restart { margin-right: 14px; }
    .cc-rs-status { margin-left: 0; }
}

/* Plan box — Claude Code plan approval cards */
.plan-box {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border: 1px solid #334155;
    border-radius: 10px;
    margin: 12px 0;
    padding: 16px;
    color: #e2e8f0;
    font-size: 14px;
    line-height: 1.6;
    overflow-x: auto;
}

.plan-box-title {
    font-size: 17px;
    font-weight: 700;
    color: #60a5fa;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #334155;
}

.plan-box-section {
    font-size: 15px;
    font-weight: 600;
    color: #93c5fd;
    margin: 14px 0 6px 0;
}

.plan-box-text {
    margin: 4px 0;
    color: #cbd5e1;
}

.plan-box-kv {
    margin: 3px 0;
    color: #cbd5e1;
}

.plan-box-kv strong {
    color: #e2e8f0;
}

.plan-box-bullet {
    margin: 3px 0 3px 8px;
    color: #cbd5e1;
}

.plan-box-code {
    background: #020617;
    border: 1px solid #1e293b;
    border-radius: 6px;
    padding: 10px 12px;
    margin: 8px 0;
    font-family: "SF Mono", "Menlo", "Consolas", monospace;
    font-size: 12px;
    color: #a5b4fc;
    overflow-x: auto;
    white-space: pre;
}

.plan-box .md-table {
    margin: 8px 0;
    font-size: 13px;
}

/* Fenced code blocks — converted from ```lang ... ``` by convertFencedCodeBlocks */
.md-codeblock {
    background: #1e293b;
    color: #e5e7eb;
    padding: 12px 14px;
    margin: 10px 0;
    border-radius: 6px;
    overflow-x: auto;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 12.5px;
    line-height: 1.45;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
}
.md-codeblock code {
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    white-space: pre !important;
}

/* Markdown tables - converted to HTML for better display */
.md-table {
    border-collapse: collapse;
    width: 100%;
    margin: 12px 0;
    font-size: 13px;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.md-table th {
    background: #1e40af;
    color: white !important;
    font-weight: 600;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 2px solid #1e3a8a;
}

.md-table td {
    padding: 8px 14px;
    border-bottom: 1px solid #e5e7eb;
    color: #1f2937 !important;
}

/* Override any ANSI color spans inside table cells */
.md-table th span,
.md-table td span {
    color: inherit !important;
}

.md-table tbody tr:nth-child(even) {
    background: #f9fafb;
}

.md-table tbody tr:hover {
    background: #f3f4f6;
}

.md-table tbody tr:last-child td {
    border-bottom: none;
}

/* Mobile-friendly word breaking for long paths and URLs */
@media (max-width: 500px) {
    #terminal-output p {
        word-break: break-word;
        overflow-wrap: anywhere;
        hyphens: none;  /* Don't hyphenate technical terms */
    }

    /* ASCII box-drawing tables MUST scroll horizontally, never wrap */
    .box-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: pre;
        max-width: 100%;
        display: block;
        font-size: 11px;  /* Smaller font to fit more on mobile */
        padding: 8px;
        background: #f8fafc;
        border-radius: 6px;
        margin: 8px 0;
    }

    /* Markdown tables on mobile - smaller and scrollable */
    .md-table {
        font-size: 12px;
        display: block;
        overflow-x: auto;
    }

    .md-table th, .md-table td {
        padding: 6px 8px;
        white-space: nowrap;
    }
}

#input-container {
    background: var(--background);
    padding: 12px 16px;
    padding-bottom: 12px;
    display: flex;
    gap: 8px;
    border-top: 1px solid var(--border);
    align-items: center;
    min-height: 56px;
    position: relative;
    bottom: 0;
    /* Add safe area padding for iPhone notch/home indicator */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
}

input {
    flex: 1;
    background: var(--input-background);
    color: var(--terminal-foreground);
    border: 1px solid var(--input-border);
    padding: 8px 12px;
    border-radius: 4px;
    font-family: "SF Mono", "Menlo", "Consolas", "Courier New", monospace;
    /* 16px, not 14px: iOS zooms the page on focus for anything under 16px and
       does not zoom back out. The composer textarea is already 16px for this
       reason; this rule covers the doc-viewer find box and every other input. */
    font-size: 16px;
    height: 36px;
    line-height: 1;
    transition: border-color 0.2s;
}

input:focus {
    outline: none;
    border-color: var(--selection);
}

button {
    background: var(--button-primary);
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    transition: background-color 0.2s;
}

button:hover {
    background: var(--button-primary-hover);
}

button:active {
    transform: translateY(1px);
}

.status {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e74c3c;
    /* Red = Disconnected/Error */
    border: 2px solid rgba(231, 76, 60, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.status.connected {
    background: #16a085;
    /* Green = Connected & Healthy */
    border-color: rgba(22, 160, 133, 0.3);
    box-shadow: 0 0 8px rgba(22, 160, 133, 0.4);
}

.status.warning {
    background: #f39c12;
    /* Amber = Connected with warnings */
    border-color: rgba(243, 156, 18, 0.3);
    box-shadow: 0 0 8px rgba(243, 156, 18, 0.4);
}

/* Enhanced processing feedback states */
.status.processing {
    background: #007acc;
    /* Blue = Processing */
    border-color: rgba(0, 122, 204, 0.3);
    box-shadow: 0 0 8px rgba(0, 122, 204, 0.6);
    animation: pulse 1s infinite;
}

.status.chunking {
    background: #9c27b0;
    /* Purple = Chunking large content */
    border-color: rgba(156, 39, 176, 0.3);
    box-shadow: 0 0 8px rgba(156, 39, 176, 0.6);
    animation: pulse 0.8s infinite;
}

.status.search-performed {
    background: #9c27b0;
    /* Purple = Search performed */
    border-color: rgba(156, 39, 176, 0.3);
    box-shadow: 0 0 8px rgba(156, 39, 176, 0.6);
}

.status.socket-method {
    background: #ff9800;
    /* Orange = Socket method */
    border-color: rgba(255, 152, 0, 0.3);
    box-shadow: 0 0 8px rgba(255, 152, 0, 0.6);
}


@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Terminal bridge message styles */
.terminal-message {
    padding: 8px 12px;
    margin: 4px 0;
    border-radius: 4px;
    font-family: "SF Mono", "Menlo", "Consolas", "Courier New", monospace;
    font-size: 13px;
    border-left: 4px solid;
    transition: opacity 0.3s ease;
}

.terminal-message.bridge-info {
    background-color: rgba(0, 122, 204, 0.1);
    border-left-color: #007acc;
    color: #007acc;
}

.terminal-message.search-info {
    background-color: rgba(156, 39, 176, 0.1);
    border-left-color: #9c27b0;
    color: #9c27b0;
}


.terminal-message.socket-info {
    background-color: rgba(255, 152, 0, 0.1);
    border-left-color: #ff9800;
    color: #ff9800;
}

/* Tooltip for status orb */
.status:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 120%;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
}

/* ANSI color classes - optimized for light theme */
.ansi-black {
    color: var(--terminal-ansi-black);
}

.ansi-red {
    color: #cd3131;
}

.ansi-green {
    color: #1a7a1a; /* Darkened from #00bc00 for readability on light backgrounds */
}

.ansi-yellow {
    color: #949800;
}

.ansi-blue {
    color: #1a1a1a;
}

.ansi-magenta {
    color: #bc05bc;
}

.ansi-cyan {
    color: #0598bc;
}

.ansi-white {
    color: var(--terminal-ansi-white);
}

.ansi-bright-black {
    color: var(--terminal-ansi-bright-black);
}

.ansi-bright-red {
    color: #f14c4c;
}

.ansi-bright-green {
    color: #1e8c1e; /* Darkened from #00c900 for readability on light backgrounds */
}

.ansi-bright-yellow {
    color: #a8a800;
}

.ansi-bright-blue {
    color: #0067c7;
}

.ansi-bright-magenta {
    color: #d670d6;
}

.ansi-bright-cyan {
    color: #06b6d4;
}

.ansi-bright-white {
    color: var(--terminal-ansi-bright-white);
}

.ansi-bold {
    font-weight: normal; /* v5.0: Claude Code uses ANSI bold on most output text — rendering it as bold makes everything heavy and unreadable. Keep normal weight in raw mode. */
}

/* Mark 6 Sep 2026 (T3): bold IS honoured inside the spoken (orange TTS) box.
   Raw-mode .ansi-bold stays normal weight everywhere else (Claude Code bolds
   most of its output), but the ⟦TTS⟧ block is the one Mark reads, and the
   finish markers (ROOM X AVAILABLE / STUCK / GRILL NEEDED) live on its last
   line — they must show. Covers both routes bold arrives by: Claude Code's
   ANSI bold (ansi-bold span) and literal **stars** (strong). */
.tts-narrow-block .ansi-bold,
.tts-narrow-block strong,
.tts-narrow-block b {
    font-weight: 800 !important;
}

.ansi-underline {
    text-decoration: underline;
}

/* Prevent clickable URL links from bleeding style to surrounding text */
#terminal-output a {
    color: #0078d4;
    text-decoration: underline;
}
#terminal-output a:visited {
    color: #0078d4;
}
/* Phase 1 iOS Rotation & Performance Fixes (P1.15) */
html,
body,
#terminal-output,
#command-input {
    -webkit-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}
/* Formatted View Styles - Matching Raw mode readability */
.formatted-view {
    font-family: "SF Mono", "Menlo", "Consolas", "Courier New", monospace;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.5;
    padding: 16px;
    overflow-y: auto;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    color: #000000;
}

/* Bold/strong text */
.formatted-view strong, .formatted-view b {
    font-weight: bold;
    color: #000000;
}

/* ANSI color classes for formatted view */
.formatted-view .ansi-red { color: #cd3131 !important; }
.formatted-view .ansi-green { color: #1a7a1a !important; }
.formatted-view .ansi-yellow { color: #949800 !important; }
.formatted-view .ansi-blue { color: #1a1a1a !important; }
.formatted-view .ansi-magenta { color: #bc05bc !important; }
.formatted-view .ansi-cyan { color: #0598bc !important; }
.formatted-view .ansi-bright-red { color: #f14c4c !important; }
.formatted-view .ansi-bright-green { color: #1e8c1e !important; }
.formatted-view .ansi-bright-yellow { color: #e5e510 !important; }
.formatted-view .ansi-bright-blue { color: #0067c7 !important; }
.formatted-view .ansi-bright-magenta { color: #d670d6 !important; }
.formatted-view .ansi-bright-cyan { color: #06b6d4 !important; }
.formatted-view .ansi-bold { font-weight: 800 !important; }

.formatted-view h1, .formatted-view h2, .formatted-view h3 {
    color: #000000;
    margin: 16px 0 8px 0;
    font-weight: 700;
}

.formatted-view h1 { font-size: 1.3em; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.formatted-view h2 { font-size: 1.2em; }
.formatted-view h3 { font-size: 1.1em; }

/* TTS Version heading — amber + bold so Mark can spot the selection boundary */
.formatted-view h2.tts-heading {
    color: #f59e0b;
    font-size: 1.5em;
    font-weight: 800;
    margin-top: 20px;
}

.formatted-view p { margin: 8px 0; }

/* TTS narrow column — terminal view (live ANSI render).
   parseANSI wraps the TTS section in .tts-narrow-block. Two visual cues:
   - max-width: 60ch caps the column on wide screens (desktop)
   - left amber border + indent marks the section on any viewport (phone too,
     where 60ch already exceeds the viewport so max-width alone does nothing) */
#terminal-output .tts-narrow-block {
    display: block;
    max-width: 80ch !important;
    border-left: 4px solid #f59e0b !important;
    border-radius: 4px !important;
    padding: 10px 14px 10px 16px !important;
    margin: 12px 0 !important;
    background: rgba(245, 158, 11, 0.10) !important;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.2) !important;
    /* pre-line: drop the leading spaces from the hidden TTS-Version label so the
       first word is flush, not indented; keep paragraph breaks (Mark, 2026-06-15).
       Also collapses Grok TUI multi-space holes inside the orange box (UX-fix3). */
    white-space: pre-line !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}
#terminal-output .tts-narrow-block * {
    white-space: inherit;
}

/* TTS prose sections — formatted view (markdown render).
   max-width forces a narrow readable column regardless of viewport width;
   unwrapTTSProse() strips source-side hard wraps so the column is the only
   reliable narrow-column signal. */
.formatted-view .tts-prose,
.formatted-view .tts-prose p {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.7;
    letter-spacing: 0.01em;
    max-width: 60ch !important;
}

/* Inline code inside TTS prose — backticked tokens get skipped by the TTS
   pre-processor, so they're visual-only signposts. Keep them subtle so the
   section doesn't read as two-toned. Same colour + font as surrounding prose,
   just a faint background to mark the boundary. */
.formatted-view .tts-prose code,
.formatted-view .tts-prose p code {
    background: #f5f5f5;
    color: inherit !important;
    font-family: inherit;
    font-size: 0.95em;
    padding: 0 2px;
    border-radius: 2px;
    text-decoration: none;
}
.formatted-view .tts-prose a,
.formatted-view .tts-prose a code,
.formatted-view .tts-prose code a {
    color: inherit !important;
    text-decoration: none;
}

.formatted-view ul, .formatted-view ol {
    margin: 8px 0;
    padding-left: 24px;
}

.formatted-view li { margin: 4px 0; }
.formatted-view li p { margin: 0; }

.formatted-view code {
    background: #f0f0f0;
    padding: 1px 3px;
    border-radius: 2px;
    font-family: "SF Mono", "Menlo", "Consolas", "Courier New", monospace;
    font-size: inherit;
}

.formatted-view pre {
    background: #f5f5f5;
    color: var(--foreground);
    padding: 4px 6px;
    margin: 3px 0;
    border-radius: 3px;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.formatted-view pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

.formatted-view table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 14px;
}

.formatted-view th, .formatted-view td {
    border: 1px solid var(--border);
    padding: 8px 12px;
    text-align: left;
}

.formatted-view th {
    background: #ffffff;
    font-weight: 700;
    color: #000000;
}

.formatted-view blockquote {
    border-left: 3px solid var(--selection);
    margin: 4px 0;
    padding-left: 10px;
    color: var(--secondary-foreground);
}

.formatted-view a { color: var(--selection); }

.formatted-view hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 6px 0;
}

#formatted-output {
    display: none;
    background: var(--background);
    min-height: 100%;
    max-width: 100%; /* Fill container width — container flex layout prevents overly long lines */
    box-sizing: border-box;
    /* Let container handle scrolling, not this element */
    overflow-y: visible;
    overflow-x: hidden;
    padding: 8px;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

#formatted-output.active { display: block; }
#terminal-output.hidden { display: none; }

/* Markdown table styling for Fmt mode */
#formatted-output table {
    border-collapse: collapse;
    width: 100%;
    margin: 16px 0;
    font-size: 14px;
    overflow-x: auto;
    display: block;
}

#formatted-output th,
#formatted-output td {
    border: 1px solid #d1d5db;
    padding: 10px 14px;
    text-align: left;
    white-space: nowrap;
}

#formatted-output th {
    background: #1e40af;
    color: white;
    font-weight: 600;
}

#formatted-output tr:nth-child(even) {
    background: #f3f4f6;
}

#formatted-output tr:hover {
    background: #e5e7eb;
}

/* Pre-formatted text (code blocks, tables that did not parse) */
#formatted-output pre {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 12px;
    overflow-x: auto;
    white-space: pre;
    font-family: "SF Mono", "Menlo", "Consolas", "Courier New", monospace;
}

/* =============================================== */
/* Additional CSS from inline style block          */
/* =============================================== */

/* Add hover styles for menu links */
#side-menu a:hover {
    background-color: var(--hover);
}

/* Terminal cursor animation */
@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

/* Selection mode textarea styling */
#selection-textarea {
    /* iOS-specific fixes */
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
    -webkit-appearance: none;
    font-size: 16px !important;
    /* Minimum to prevent zoom */
}

.terminal-cursor {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background: var(--terminal-foreground);
    animation: blink 1s infinite;
    vertical-align: text-bottom;
}

/* Header button icons — dark on white button backgrounds */
#header button i {
    color: #333333 !important;
}

/* === PHONE D-PAD (auto shows on Claude Code menu prompts) ===
   Diamond cluster bottom-left. Phone-only via JS isMobile gate.
   To remove: delete this block + the HTML in terminal_bridge.html +
   the setDpadActive/positioner in terminal-bridge.js. */
#tb-dpad {
    position: fixed;
    right: 12px;
    top: 110px; /* below header + T1-AGY pill bar (Mark 2026-05-21: was 70, overlapped the pill row on desktop) */
    width: 168px;
    height: 168px;
    z-index: 1000;
    pointer-events: none; /* children re-enable */
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
#tb-dpad.tb-dpad-show {
    opacity: 0.96;
    transform: translateY(0);
}
#tb-dpad .tb-dpad-btn {
    position: absolute;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: var(--button-primary, #1e40af);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
#tb-dpad .tb-dpad-btn[data-dpad="up"]    { top: 0;    left: 58px; }
#tb-dpad .tb-dpad-btn[data-dpad="left"]  { top: 58px; left: 0; }
#tb-dpad .tb-dpad-btn[data-dpad="ok"]    { top: 58px; left: 58px; background: #16a085; font-size: 15px; }
#tb-dpad .tb-dpad-btn[data-dpad="right"] { top: 58px; left: 116px; }
#tb-dpad .tb-dpad-btn[data-dpad="down"]  { top: 116px; left: 58px; }
#tb-dpad .tb-dpad-btn.tb-dpad-flash {
    background: #fbbf24 !important;
    color: #111 !important;
    transition: background 0.05s linear, color 0.05s linear;
}

/* ==========================================================================
   FAB + D-pad horizontal drift on planning-panel open (PC browser only).
   Mobile (≤768px) keeps buttons anchored at right:16px — planning panel
   takes the whole screen on phone via its own breakpoint.
   Added 2026-05-18 with the blue-mic + TTS-append work.
   ========================================================================== */

#tb-dpad,
#stt-record-btn,
#stt-tmux-btn,
#tts-play-btn,
#stt-settings-btn,
#jump-to-bottom {
    transition: right 0.2s ease;
}

@media (min-width: 769px) {
    body.planning-panel-open #tb-dpad,
    body.planning-panel-open #stt-record-btn,
    body.planning-panel-open #stt-tmux-btn,
    body.planning-panel-open #tts-play-btn,
    body.planning-panel-open #stt-settings-btn,
    body.planning-panel-open #jump-to-bottom {
        /* !important needed: the FAB markup declares right:16px in inline
           styles, which would otherwise win on CSS specificity against
           this class-cascade rule. 2026-05-18.
           #stt-settings-btn (the cog) added 2026-06-01 — it was the one FAB
           left behind at right:16px when the panel opened, so it fell out of
           line with the rest of the stack. */
        right: calc(var(--planning-panel-width, 280px) + 16px) !important;
    }
}

/* Mobile (≤768px): the panel is a full-width overlay, so there's nowhere
   to shift the FAB stack to — hide it while the panel is open instead.
   Found by av-panel-verify 2026-06-10: FABs sat z-order above the open
   panel, obscuring "tap to read" badges and reader text. */
@media (max-width: 768px) {
    body.planning-panel-open #tb-dpad,
    body.planning-panel-open #stt-record-btn,
    body.planning-panel-open #stt-tmux-btn,
    body.planning-panel-open #tts-play-btn,
    body.planning-panel-open #stt-settings-btn,
    body.planning-panel-open #jump-to-bottom {
        display: none !important;
    }
}

/* Match the transition under !important too so the drift animation
   isn't fought by inline-style specificity on hover/refresh. */
#tb-dpad,
#stt-record-btn,
#stt-tmux-btn,
#tts-play-btn,
#stt-settings-btn,
#jump-to-bottom {
    transition: right 0.2s ease !important;
}

/* Slim dialog accent — replaces the retired heavy card. Just a left rail
   so the user knows where the dialog content starts; no background fill, no
   border radius, no tab pills. Mark 2026-05-21. */
#terminal-output .tb-dialog {
    display: block;
    border-left: 3px solid #3b82f6;
    padding: 4px 0 4px 10px;
    margin: 6px 0;
}

/* Active tab indicator — Claude TUI marks the selected tab with ANSI bg
   colour 105. parseANSI tags those spans with .tb-active-tab. Render as a
   solid blue pill with white text so the active tab is obvious across all
   /status / /model / /mcp panels. 2026-05-21. */
#terminal-output .tb-active-tab {
    background: #1e40af !important;
    color: #ffffff !important;
    padding: 1px 8px;
    border-radius: 3px;
    font-weight: 700;
}

/* Green speaker (#tts-play-btn) pulses while text is selected, cueing
   "click me to read the selection aloud" (Mark, 2026-06-15). */
@keyframes tbSelectionPulse {
  0%   { box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 0   rgba(39,174,96,0.6); }
  70%  { box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 14px rgba(39,174,96,0); }
  100% { box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 0   rgba(39,174,96,0); }
}
#tts-play-btn.tb-selection-pulse {
  animation: tbSelectionPulse 1.2s ease-out infinite;
}

/* Phone (≤768px): the transcript runs full-width under the FAB stack, so the
   buttons sit over prose. Mark reads by TTS not by eye there, so the stack
   goes translucent at rest and solid the moment it matters (touch, recording,
   selection pulse). Static opacity only — no animation (idle-GPU rule).
   Mark, 2026-08-05: "a bit see-through or something". */
@media (max-width: 768px) {
    #stt-record-btn,
    #stt-tmux-btn,
    #tts-play-btn,
    #stt-settings-btn,
    #jump-to-bottom {
        opacity: 0.8;  /* Mark tuning by eye, 5 Aug: 0.38 barely visible, 0.6 still light */
    }
    #stt-record-btn:active, #stt-record-btn.stt-recording,
    #stt-tmux-btn:active,   #stt-tmux-btn.stt-recording,
    #tts-play-btn:active,   #tts-play-btn.tb-selection-pulse,
    #stt-settings-btn:active,
    #jump-to-bottom:active {
        opacity: 1;
    }
}

/* The input placeholder ("Message Claude...") wraps at phone width and the
   second line clips mid-glyph against the textarea's single-line min-height.
   Keep it to one cropped line instead — real typed text still wraps normally.
   2026-08-05, from Mark's iPhone screenshots. */
#command-input::placeholder {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- WP2f: GROK RE-LOGIN banner only (slash-bar + TTS drift-nudge removed UX-fix 2026-07-09) ---- */
.tb-grok-relogin {
  background: #7f1d1d;
  color: #fecaca;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 6px 10px;
  border-bottom: 1px solid #991b1b;
}
.tb-grok-relogin[hidden] { display: none !important; }

/* ---- Phone tap targets (loop: TB phone-usability bundle, 2026-08-16) ----
   ESC and Send carry inline height:36px in the template, so a phone override
   has to out-specify an inline style. Scoped to the phone query only — the
   desktop bar keeps its slim 36px row. */
@media (max-width: 600px) {
    #esc-btn,
    #send-btn {
        height: 44px !important;
        min-height: 44px;
    }
}

/* The drawer close X was 4px/8px padding on a 1.2em glyph — a ~27x33px target
   sitting one thumb-width from the 44px menu links the bundle already fixed.
   Sized everywhere (not phone-only): it is an isolated corner button, so a
   square target costs the desktop drawer nothing. */
#side-menu-close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    -webkit-tap-highlight-color: rgba(96, 165, 250, 0.25);
}

/* menu-btn is 38x38 inline (terminal_bridge.html:2549). Phone-scoped bump only —
   the desktop header row is sized around 38px and grows if this leaks. */
@media (max-width: 600px) {
    #menu-btn {
        width: 44px !important;
        height: 44px !important;
    }
}