/* =============================================================
   Kucatoo Kimi-Code — High-Contrast Theme + Layout
   - Dark mode (default) and Light mode, both high contrast
   - Header / 3-column main / footer grid layout
   - Rainbow counter-rotating hollow ellipses loader
   ============================================================= */

/* ------------------------------------------------------------- Reset / base */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;            /* scales with root font-size set by the JS controls */
    line-height: 1.45;
    overflow: hidden;           /* layout uses internal scroll areas */
    transition: background-color 200ms ease, color 200ms ease;
}

/* ------------------------------------------------------------- THEME tokens */
:root {
    --fs-base: 16px;
}

/* Dark — high contrast */
body.theme-dark,
html[data-theme="dark"] body {
    --bg-app:        #000000;
    --bg-header:     #0a0a0a;
    --bg-footer:     #0a0a0a;
    --bg-card:       #111111;
    --bg-input:      #000000;
    --bg-elev:       #1a1a1a;
    --bg-hover:      #1f1f1f;
    --border:        #ffffff;
    --border-soft:   #555555;
    --text:          #ffffff;
    --text-muted:    #cccccc;
    --accent:        #00ff7f;
    --accent-text:   #000000;
    --accent-glow:   rgba(0, 255, 127, 0.85);
    --danger:        #ff4d4d;
    --warning:       #ffd24d;
    --shadow:        0 0 0 1px #ffffff, 0 8px 24px rgba(0,0,0,0.7);
    /* Prompt/Response editing surfaces: dark, high-contrast. A dark grey
       slightly lighter than the pure-black app background so the editing
       area stays distinct. Used in both focused and unfocused states so
       Bootstrap's .form-control:focus never flashes them to white. */
    --bg-textarea:   #1e1e1e;
    --text-textarea: #f0f0f0;
}

/* Light — high contrast */
body.theme-light,
html[data-theme="light"] body {
    --bg-app:        #ffffff;
    --bg-header:     #f4f4f4;
    --bg-footer:     #f4f4f4;
    --bg-card:       #ffffff;
    --bg-input:      #ffffff;
    --bg-elev:       #fafafa;
    --bg-hover:      #ececec;
    --border:        #000000;
    --border-soft:   #444444;
    --text:          #000000;
    --text-muted:    #333333;
    --accent:        #006400;
    --accent-text:   #ffffff;
    --accent-glow:   rgba(0, 100, 0, 0.85);
    --danger:        #b00020;
    --warning:       #8a6d00;
    --shadow:        0 0 0 1px #000000, 0 8px 24px rgba(0,0,0,0.15);
    /* Prompt/Response editing surfaces: light grey, high-contrast dark
       text. Used in both focused and unfocused states. */
    --bg-textarea:   #e8e8e8;
    --text-textarea: #111111;
}

body {
    background-color: var(--bg-app);
    color: var(--text);
}

/* ------------------------------------------------------------- LAYOUT GRID */
body {
    display: grid;
    grid-template-rows: auto 1fr auto;   /* header / main / footer */
    height: 100vh;
}

/* Header */
.app-header {
    background: var(--bg-header);
    border-bottom: 2px solid var(--border);
    padding: 0.5rem 1rem;
    z-index: 5;
}

.header-row {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.header-section {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}
/* Never compress header controls (e.g. the Agent button) to fit;
   the sections size to their content and the row distributes the slack. */
.header-section > * { flex-shrink: 0; }
.header-left   { justify-content: flex-start; }
.header-center { justify-content: center; flex-direction: column; gap: 0.25rem; }
.header-right  { justify-content: flex-end; }

.header-logo {
    height: 36px;
    width: auto;
}
/* The logo is red+black on a solid white background with no alpha channel.
   On the near-black header the black shape would vanish into the background
   and the white field would read as a washed-out box. Wrap it in a light
   "chip" so it is seen as designed (a deliberate badge, not a stray blob)
   in both dark and light themes. */
.logo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff !important; /* force white even if a theme rule targets it */
    border-radius: 8px;
    padding: 4px 8px;
    min-width: 38px;   /* guarantees the chip is visibly white even if the img fails */
    min-height: 38px;
    box-shadow: 0 0 0 1px var(--border-soft), 0 1px 3px rgba(0,0,0,0.35);
    line-height: 0; /* avoids extra inline-gap below the img */
}
.logo-chip .header-logo {
    height: 30px; /* slightly smaller so the chip stays compact */
    width: auto;
}
.header-title {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Server control status dot (paired with the Start/Stop/Restart group) */
.server-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted); /* gray: manager offline / unknown */
    flex: none;
}
.server-status-dot.running { background: #2ecc40; }
.server-status-dot.stopped { background: #ff4136; }
.server-status-dot.unmanaged { background: #ff851b; }

/* Footer */
.app-footer {
    background: var(--bg-footer);
    border-top: 2px solid var(--border);
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}
.footer-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
}
.footer-stat { display: inline-flex; gap: 0.4rem; align-items: baseline; }
.footer-label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
}
.footer-value { font-weight: 700; }
.footer-brand {
    margin-left: auto;
    color: var(--text-muted);
    font-style: italic;
}

/* Main: 4 columns — model selector | prompt | response | capability console.
   The grid row `1fr` already handles the height; we just constrain it via
   `min-height: 0` so the columns can scroll independently. */
.app-main {
    --col1-w: 260px;   /* model selector */
    --col4-w: 336px;   /* capability console */
    display: grid;
    grid-template-columns: var(--col1-w) 1fr 1fr var(--col4-w);
    gap: 0.75rem;
    padding: 0.75rem;
    min-height: 0;
}

/* Large type (font size > 18, toggled by JS via the .font-wide class):
   the prompt/response columns give up a small amount of width so the
   capability console (column 4) has room for its tab bar and tool rows
   at large sizes — without this the console column was truncated off
   the right edge. The flexible width is (100% - col1 - col4):
     col2      -> 0.40
     col3      -> 0.45
     col1      -> + 0.05
     col4      -> + 0.05
   (Tracks sum to 0.95: the remaining 5% stays as unused space on the
   right rather than being re-allocated to another column.)
   Desktop only — tablet/phone collapse the grid entirely. */
@media (min-width: 1251px) {
    .app-main.font-wide {
        grid-template-columns:
            calc(var(--col1-w) + (100% - var(--col1-w) - var(--col4-w)) * 0.05)
            calc((100% - var(--col1-w) - var(--col4-w)) * 0.40 - 5px)
            calc((100% - var(--col1-w) - var(--col4-w)) * 0.45 - 5px)
            calc(var(--col4-w) + 74px + (100% - var(--col1-w) - var(--col4-w)) * 0.05);
    }
}

/* Files/Usage tabs active: the console column gets 4x the width of the
   prompt/response columns, which shrink proportionally. */
.app-main.files-active,
.app-main.usage-active {
    /* Console gets 4/6 of the flexible space (the old `4fr` share),
       minus 80px to keep the column narrower. */
    grid-template-columns: var(--col1-w) 1fr 1fr calc((100% - var(--col1-w)) * 0.6667 - 80px);
}

/* Voice commands in use (wake-armed or dictating): a voice column the
   width of the capability console slots in between the model selector
   and the prompt; the console hides to make room. */
.app-main.voice-active {
    grid-template-columns: var(--col1-w) var(--col4-w) 1fr 1fr;
}
.app-main.voice-active .app-col-console {
    display: none;
}

/* Model column hidden ("hide model" voice command): its track drops
   out of the grid… */
.app-main.model-hidden {
    grid-template-columns: 1fr 1fr var(--col4-w);
}
.app-main.model-hidden .app-col-models {
    display: none;
}
/* …and when the voice column is visible it widens into the freed
   space (col1 width + its own), shrinking back when the model column
   returns. */
.app-main.voice-active.model-hidden {
    grid-template-columns: calc(var(--col1-w) + var(--col4-w)) 1fr 1fr;
}

/* Examples mode (Tools/Skills panels): the Response column (col 3) hides
   and the runner side panel takes a flexible track to the right of the
   capability console (col 4). fr tracks absorb grid gaps and padding
   automatically, so the row fits the viewport at any font size (calc()
   with fr units is invalid CSS — keep the fr tracks plain). Shares of
   the flexible space: prompt 4fr, runner 3fr (25% narrower); the console
   is widened by a fixed 74px (same idiom as .font-wide). */
.app-main.examples-active,
.app-main.skill-examples-active {
    grid-template-columns:
        var(--col1-w)
        4fr
        calc(var(--col4-w) + 74px)
        3fr;
}
.app-main.examples-active .app-col-response,
.app-main.skill-examples-active .app-col-response {
    display: none;
}
.app-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Grid items default to min-width:auto (their content's min-width),
       which let the console column grow past its track and spill off the
       right edge at large font sizes. Allow columns to shrink to their
       track so inner width:100% fields and wrapping rows stay inside. */
    min-width: 0;
}

/* ------------------------------------------------------------- CARDS */
.card {
    background: var(--bg-card);
    color: var(--text);
    border: 2px solid var(--border);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.card-header {
    background: var(--bg-elev);
    border-bottom: 2px solid var(--border);
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.card-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.card-body {
    padding: 0.75rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}
.card-footer {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border-soft);
    background: var(--bg-elev);
}

/* ------------------------------------------------------------- MODEL LIST */
.model-card { transition: box-shadow 200ms ease, border-color 200ms ease; }

/* The model description used Bootstrap's .text-muted, whose !important
   color (a dark translucent grey) was nearly invisible on the dark card.
   Promote it to the primary text colour for high contrast. */
#modelDescription { color: var(--text); }

.model-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
}

.model-item {
    border: 2px solid var(--border-soft);
    border-radius: 6px;
    padding: 0.6rem 0.7rem;
    cursor: pointer;
    background: var(--bg-card);
    color: var(--text);
    transition: border-color 150ms ease, box-shadow 150ms ease,
                background-color 150ms ease;
}
.model-item:hover {
    background: var(--bg-hover);
    border-color: var(--border);
}
.model-item.selected {
    border-color: var(--accent);
    box-shadow:
        0 0 0 2px var(--accent),
        0 0 18px 4px var(--accent-glow),
        inset 0 0 12px rgba(0, 255, 127, 0.15);
}
.model-item .model-name {
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.model-item .model-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}
.model-item .model-temp {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-elev);
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
}
.model-item .model-nokey {
    color: var(--danger);
    font-weight: 700;
}

.badge-default {
    background: var(--accent);
    color: #000;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid var(--border);
}

/* ------------------------------------------------------------- PANELS (prompt/response) */
.panel-card { min-height: 0; }

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 📁 button inside .panel-actions, right after the save (💾) icon. The
   resolved save path is shown as its mouseover tooltip; clicking opens the
   folder in the OS file manager via POST /api/storage/open/<kind>.
   Visual styling comes from .btn-icon — nothing extra needed here. */
.save-dir-link { }

.panel-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    position: relative;  /* anchor for the voice cheat-sheet popover */
    /* When the panel header has no title element (e.g. Prompt), keep
       the actions hugging the right edge as they did with space-between. */
    margin-left: auto;
}

.panel-body {
    position: relative;
    padding: 0;
    min-height: 0;
}

.panel-textarea {
    width: 100%;
    height: 100%;
    resize: none;
    border: none;
    border-radius: 0;
    background: var(--bg-textarea);
    color: var(--text-textarea);
    padding: 0.75rem 1rem;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.95em;
    line-height: 1.5;
}
.panel-textarea:focus {
    outline: 3px solid var(--accent);
    outline-offset: -3px;
    /* Keep the themed surface on focus — override Bootstrap's
       .form-control:focus white background + blue ring. */
    background: var(--bg-textarea);
    color: var(--text-textarea);
    border-color: transparent;
    box-shadow: none;
}
body.theme-light .panel-textarea {
    background: var(--bg-textarea);
    color: var(--text-textarea);
}

/* ------------------------------------------------------------- THINKING BLOCK
   Collapsible reasoning stream shown above the response textarea while a
   thinking model reasons (SSE 'reasoning' events, direct mode). */
.response-panel-body {
    display: flex;
    flex-direction: column;
}
.response-panel-body .panel-textarea {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

.thinking-block {
    flex: 0 0 auto;
    border-bottom: 1px solid var(--border-soft);
    border-left: 3px solid var(--accent);
    background: var(--bg-elev);
}
.thinking-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.35rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.85em;
    cursor: pointer;
    text-align: left;
}
.thinking-header:hover {
    background: var(--bg-hover);
}
.thinking-title {
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.thinking-chevron {
    margin-left: auto;
}
.thinking-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    animation: thinking-pulse 1.1s ease-in-out infinite;
}
.thinking-indicator.done {
    animation: none;
    opacity: 0.45;
}
@keyframes thinking-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 4px 1px var(--accent-glow); }
    50%      { opacity: 0.35; box-shadow: none; }
}
.thinking-body {
    max-height: 10rem;
    overflow-y: auto;
    padding: 0.25rem 0.75rem 0.6rem 0.9rem;
    color: var(--text-muted);
    font-style: italic;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85em;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}
.thinking-body.collapsed {
    display: none;
}

/* ------------------------------------------------------------- BUTTONS */
.btn {
    border: 2px solid var(--border);
    background: var(--bg-elev);
    color: var(--text);
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease, transform 80ms ease,
                box-shadow 120ms ease;
}
.btn:hover  { background: var(--bg-hover); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.btn-icon {
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
    min-width: 2.2rem;
}
.btn-theme {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.btn-font {
    min-width: 2.2rem;
    font-weight: 800;
    padding: 0.25rem 0.6rem;
}

.btn-primary {
    background: var(--accent);
    color: #000;
    border-color: var(--border);
}
.btn-primary:hover {
    background: var(--accent);
    filter: brightness(1.15);
}
.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-run .run-spinner { display: none; }
.btn-run.running .run-label { display: none; }
.btn-run.running .run-spinner {
    display: inline-block;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Theme icon swap */
body.theme-dark  .theme-icon-light { display: inline; }
body.theme-dark  .theme-icon-dark  { display: none; }
body.theme-light .theme-icon-dark  { display: inline; }
body.theme-light .theme-icon-light { display: none; }

/* ------------------------------------------------------------- TEMPERATURE slider */
.temperature-label {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    display: inline-flex;
    gap: 0.5rem;
    align-items: baseline;
}
.temperature-value {
    color: var(--text);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 0.4rem;
    font-family: ui-monospace, monospace;
    font-size: 0.85rem;
}
.temperature-slider {
    width: min(360px, 40vw);
    accent-color: var(--accent);
}
.temperature-hint {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* ------------------------------------------------------------- Font-size controls */
.font-size-group {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--bg-elev);
    padding: 0.15rem 0.4rem;
    border: 2px solid var(--border);
    border-radius: 4px;
}
.font-size-value {
    min-width: 2ch;
    text-align: center;
    font-family: ui-monospace, monospace;
    font-weight: 700;
}

/* ------------------------------------------------------------- LOADER — crisp rainbow counter-rotating ellipses */
/* Compact badge pinned to the lower-right of the console column (column 4).
   pointer-events: none so it can never block clicks — e.g. the Approve
   button shown in the Response column during agent permission prompts. */
.loader-overlay {
    position: absolute;
    right: 0.75rem;
    /* 0.75rem (12px) default gap minus 1px = sits 11px above the card's
       bottom edge (raised 14px total from -3px per user request). */
    bottom: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.35rem;
    z-index: 10;
    pointer-events: none;
}
body.theme-light .loader-overlay {
    background: rgba(255, 255, 255, 0.65);
}

/* Stage holds the SVG and the centered timer. The timer is pulled up on
   top of the SVG via absolute positioning so it sits in the middle.
   Kept small — the loader is a corner badge, not a full-panel overlay. */
.loader-stage {
    position: relative;
    width: 110px;
    height: 63px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    /* Saturate + brighten the rainbow so all colours read as vivid, and
       add a soft glow that lifts the strokes off the overlay. */
    filter:
        saturate(1.5)
        brightness(1.1)
        drop-shadow(0 0 4px rgba(255, 255, 255, 0.35))
        drop-shadow(0 0 8px rgba(255, 255, 255, 0.15));
}

/* Counter-rotation: pure 2D rotate() keeps the ellipses clean (no
   squashing). `transform-box: fill-box` + `transform-origin: center`
   make each <g> spin around its own centre. */
.loader-svg .spin-cw {
    transform-box: fill-box;
    transform-origin: center;
    animation: spin-cw 1.8s linear infinite;
}
.loader-svg .spin-ccw {
    transform-box: fill-box;
    transform-origin: center;
    animation: spin-ccw 1.2s linear infinite;
}
@keyframes spin-cw  { to { transform: rotate(360deg); } }
@keyframes spin-ccw { to { transform: rotate(-360deg); } }

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .loader-svg .spin-cw,
    .loader-svg .spin-ccw { animation: none; }
}

.loader-timer {
    position: absolute;
    z-index: 2;
    color: var(--text);
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1;
    background: rgba(0, 0, 0, 0.6);
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    letter-spacing: 0.02em;
}
body.theme-light .loader-timer {
    background: rgba(255, 255, 255, 0.85);
    color: #000;
}

/* ------------------------------------------------------------- TOAST */
.toast-container {
    position: fixed;
    bottom: 4rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 100;
    pointer-events: none;
}
.toast {
    background: var(--bg-card);
    color: var(--text);
    border: 2px solid var(--border);
    padding: 0.5rem 0.9rem;
    border-radius: 4px;
    box-shadow: var(--shadow);
    pointer-events: auto;
    animation: toast-in 180ms ease;
    max-width: 320px;
}
.toast.toast-error  { border-color: var(--danger); }
.toast.toast-ok     { border-color: var(--accent);  }
@keyframes toast-in {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

/* ------------------------------------------------------------- RESPONSIVE */
@media (max-width: 900px) {
    .app-main,
    .app-main.files-active,
    .app-main.usage-active,
    .app-main.examples-active,
    .app-main.skill-examples-active {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(180px, auto);
    }
    .header-row {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }
    .header-section { justify-content: center; }
    .temperature-slider { width: min(280px, 80vw); }
}

/* ------------------------------------------------------------- SCROLLBARS (high contrast) */
*::-webkit-scrollbar         { width: 10px; height: 10px; }
*::-webkit-scrollbar-track   { background: var(--bg-elev); }
*::-webkit-scrollbar-thumb   {
    background: var(--border-soft);
    border: 2px solid var(--bg-elev);
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--border); }

/* ============================================================= */
/* EXTENSIONS — Model Harness capability UI                       */
/* (mode toggle, agent trace, capability console)                */
/* ============================================================= */

/* ---- Mode toggle (Direct / Agent) ---- */
.mode-group {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    margin-left: 0.5rem;
}
.btn-mode {
    background: transparent;
    color: var(--text-muted);
    border: none;
    border-right: 1px solid var(--border);
    padding: 0.25rem 0.7rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 120ms ease;
}
.btn-mode:last-child { border-right: none; }
.btn-mode:hover { background: var(--bg-hover); }
.btn-mode.active {
    background: var(--accent);
    color: var(--accent-text);
}

/* ---- Agent trace feed ---- */
.agent-trace {
    margin-top: 0.5rem;
    border-top: 1px solid var(--border-soft);
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
    max-height: 40%;
    min-height: 80px;
}
.agent-trace-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.agent-trace-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    flex: 1;
}
.agent-type-select {
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 0.15rem 0.3rem;
    font-size: 0.8rem;
}
.api-token-input {
    width: 9em;
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 0.15rem 0.3rem;
    font-size: 0.78rem;
}
.max-steps-label {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.max-steps-input {
    width: 3.2em;
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 0.1rem 0.25rem;
    font-size: 0.78rem;
    text-align: center;
}
.agent-trace-body {
    flex: 1;
    overflow-y: auto;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 0.78rem;
    background: var(--bg-input);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 0.4rem;
}
.trace-row {
    display: flex;
    gap: 0.4rem;
    padding: 0.15rem 0;
    border-bottom: 1px dotted var(--border-soft);
}
.trace-row:last-child { border-bottom: none; }
.trace-kind {
    flex: 0 0 70px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.68rem;
    color: var(--accent);
}
.trace-thought .trace-kind { color: var(--text-muted); }
.trace-tool .trace-kind   { color: var(--warning); }
.trace-obs .trace-kind    { color: var(--accent); }
.trace-failed .trace-kind { color: var(--danger); }
.trace-text {
    flex: 1;
    color: var(--text);
    word-break: break-word;
    white-space: pre-wrap;
}

/* ---- Capability console ---- */
.console-card { display: flex; flex-direction: column; min-height: 0; position: relative; }
.console-card .card-header { padding: 0; }
.console-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
}
.tab {
    flex: 1;
    background: transparent;
    color: var(--text-muted);
    border: none;
    padding: 0.55rem 0.4rem;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    border-right: 1px solid var(--border-soft);
    transition: background 120ms ease;
}
.tab:last-child { border-right: none; }
.tab:hover { background: var(--bg-hover); }
.tab.active {
    color: var(--accent);
    box-shadow: inset 0 -2px 0 var(--accent);
}
.console-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.6rem;
    /* Extra bottom clearance so scrolled content never hides behind the
       loader badge pinned to the lower-right corner of this column. */
    padding-bottom: 6rem;
    min-height: 0;
}
.tab-panel { display: none; }
.tab-panel.active {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* Tools tab: the tool list gets all spare vertical space (~80% of the
   console body); the runner + output below keep their natural height. */
.tab-panel[data-tab="tools"] .tool-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}
.tab-panel[data-tab="tools"] .tool-output {
    flex: 0 1 auto;
    margin-bottom: 0;
}
/* Skills tab: same vertical fill for the skill list. */
.tab-panel[data-tab="skills"] .skill-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}
/* Status tab: the output pre fills the remaining vertical space. */
.tab-panel[data-tab="status"] .tool-output {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}
/* History tab: the entry list fills the remaining vertical space. */
.tab-panel[data-tab="history"] .history-list {
    flex: 1 1 auto;
    min-height: 0;
}
/* Tool runner fields are multi-line textareas the user can drag taller. */
.tool-runner textarea.form-control {
    resize: vertical;
    line-height: 1.35;
}

.panel-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0 0 0.5rem 0;
}

/* ---- Tool list + runner ---- */
.tool-list, .skill-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.6rem;
    max-height: 220px;
    overflow-y: auto;
}
.tool-item, .skill-item {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.3rem;
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    background: var(--bg-input);
    cursor: pointer;
}
.tool-item:hover { background: var(--bg-hover); }
.tool-item input[type="checkbox"] {
    margin-top: 0.2rem;
    accent-color: var(--accent);
}
.tool-name, .skill-name {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--text);
}
/* ---- Role/quota badges + Guests card ---- */
.role-badge, .quota-badge {
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.role-badge.owner { color: var(--accent); border-color: var(--accent); }
.quota-badge { color: var(--warning); }
.guests-card {
    margin-top: 1rem;
    border-top: 1px solid var(--border-soft);
    padding-top: 0.6rem;
}
.guests-title { font-size: 0.95rem; color: var(--accent); margin: 0.3rem 0; }
.guests-form {
    display: grid;
    grid-template-columns: 2fr 0.7fr 0.9fr 1fr auto;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}
.guests-form .form-control { font-size: 0.78rem; padding: 0.3rem; }
.guest-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    background: var(--bg-input);
    font-size: 0.78rem;
    margin-bottom: 0.3rem;
}
.guest-row .guest-label { font-weight: 600; color: var(--text); }
.guest-row .guest-usage { color: var(--text-muted); font-size: 0.72rem; flex: 1; }
.guest-row .guest-expired { color: var(--danger); font-size: 0.72rem; }
.guest-row .btn { padding: 0.1rem 0.45rem; font-size: 0.72rem; }

/* Examples mode: tool names become clickable example loaders. */

/* Anchor for the Sites-panel spinner badge (.loader-overlay is absolute). */
#sitesPanel { position: relative; }

/* ---- Sites panel (run control + staging) ---- */
.sites-toolbar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.sites-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 0.5rem;
}
.site-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    background: var(--bg-input);
    font-size: 0.8rem;
}
.site-row:hover { background: var(--bg-hover); }
.site-backup-check { accent-color: var(--accent); flex-shrink: 0; margin: 0; }
.site-status {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-muted);   /* grey: offline */
    flex-shrink: 0;
}
.site-status.on {
    background: var(--accent);       /* green: port answers */
    box-shadow: 0 0 4px 1px var(--accent-glow);
}
.site-name { font-weight: 600; color: var(--text); white-space: nowrap; }
.site-meta {
    color: var(--text-muted);
    font-size: 0.72rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.site-stage-badge {
    padding: 0 0.3rem;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    font-size: 0.68rem;
    color: var(--text-muted);
}
.site-stage-badge.present { color: var(--accent); border-color: var(--accent); }
.site-row .btn { padding: 0.1rem 0.45rem; font-size: 0.75rem; }.tool-examples-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
}
.tool-examples-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    color: var(--text);
}
.tool-examples-toggle input[type="checkbox"] { accent-color: var(--accent); }
#toolsPanel.examples-on .tool-name { color: var(--accent); cursor: pointer; }
#toolsPanel.examples-on .tool-name:hover { text-decoration: underline; }
#skillsPanel.examples-on .skill-name { color: var(--accent); cursor: pointer; }
#skillsPanel.examples-on .skill-name:hover { text-decoration: underline; }
.tool-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
    display: block;
}
.tool-runner, .skill-runner {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.4rem;
}
/* Anchor for the skill-run spinner badge (.loader-overlay is absolute). */
.skill-runner { position: relative; }
.tool-runner .form-control, .skill-runner .form-control {
    width: 100%;
    font-size: 0.78rem;
    padding: 0.3rem;
}
.tool-output {
    background: var(--bg-input);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 0.4rem;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.75rem;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 600px;
    overflow-y: auto;
    margin: 0;
}

/* ---- Memory panel ---- */
.memory-search, .memory-remember {
    display: flex;
    flex-direction: column;   /* button on its own line below the textarea */
    align-items: stretch;
    gap: 0.3rem;
    margin-bottom: 0.4rem;
}
.memory-search .form-control, .memory-remember .form-control {
    width: 100%;
    min-width: 0;
    font-size: 0.8rem;
    padding: 0.3rem;
    resize: vertical;
}
.memory-search .btn, .memory-remember .btn {
    align-self: flex-end;   /* right-aligned on its own line — can't truncate */
}
.memory-results {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    /* Fill the tab's remaining vertical space (was a fixed 260px cap). */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.memory-item {
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--accent);
    border-radius: 3px;
    padding: 0.35rem;
    background: var(--bg-input);
}
.memory-content {
    font-size: 0.78rem;
    color: var(--text);
    word-break: break-word;
}
.memory-meta {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

/* ---- History panel ---- */
.history-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    overflow-y: auto;
}
.history-item {
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--accent);
    border-radius: 3px;
    padding: 0.35rem;
    background: var(--bg-input);
    cursor: pointer;
}
.history-item:hover { background: var(--bg-hover); }
.history-prompt {
    font-size: 0.78rem;
    color: var(--text);
    word-break: break-word;
    /* Clamp long prompts to two lines in the list. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.history-meta {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.history-mode {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.62rem;
    color: var(--accent);
}
.history-empty {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* ============================================================= */
/* AGENT MODE SYSTEM UI                                          */
/* (agent mode selector, capability controls, interaction cards) */
/* ============================================================= */

/* The [hidden] attribute must win over the display rules below
   (class selectors would otherwise override the UA hidden rule). */
[hidden] { display: none !important; }

/* ---- Agent mode selector (Explore / Plan / Write & Test) ---- */
.agent-mode-group.disabled { opacity: 0.45; }
.agent-mode-group.disabled .btn-mode { cursor: not-allowed; }
.agent-mode-badge {
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    align-self: center;
}

/* ---- Prompt options row (attach / effort / thinking) ---- */
.prompt-options {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}
.prompt-options:empty { margin-top: 0; }
.model-options { flex-wrap: wrap; }
.model-options[hidden] { display: none !important; }
.options-caption {
    width: 100%;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.effort-select {
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 0.2rem 0.35rem;
    font-size: 0.8rem;
}
.thinking-label,
.auto-approve-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    cursor: pointer;
}

/* ---- Image preview strip ---- */
.image-preview-strip {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.4rem;
    flex-wrap: wrap;
}
.image-thumb {
    position: relative;
    width: 56px;
    height: 56px;
    border: 2px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.image-thumb-remove {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--danger);
    color: #fff;
    border: none;
    width: 18px;
    height: 18px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

/* ---- Interaction area (permission cards + question forms) ---- */
.interaction-area { margin-top: 0.5rem; }
.interaction-area:empty { display: none; }

/* ---- Mid-run instruction injection bar ---- */
.inject-bar {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
    align-items: center;
}
.inject-bar[hidden] { display: none; }
.inject-bar input { flex: 1; }

.interaction-card {
    border: 2px solid var(--border);
    border-radius: 6px;
    background: var(--bg-elev);
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.5rem;
}
.interaction-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--warning);
    margin-bottom: 0.25rem;
}
.question-card .interaction-title { color: var(--accent); }
.interaction-text {
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
    white-space: pre-wrap;
    word-break: break-word;
}
.interaction-detail {
    font-size: 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 0.3rem;
    margin: 0.25rem 0;
    max-height: 120px;
    overflow: auto;
    white-space: pre-wrap;
}
.interaction-waiting {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-style: italic;
    margin: 0.25rem 0;
}
.interaction-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.3rem;
}
.btn-deny {
    border: 2px solid var(--danger);
    background: transparent;
    color: var(--danger);
}
.btn-deny:hover { background: var(--danger); color: #fff; }
.interaction-card.answered-approved { border-color: var(--accent); }
.interaction-card.answered-denied {
    border-color: var(--danger);
    opacity: 0.75;
}
.interaction-form {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
}
.interaction-choice {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
}
.interaction-answer-input { font-size: 0.82rem; width: 100%; }

/* ============================================================= */
/* HELP PAGE                                                     */
/* ============================================================= */

/* The help page overrides the app grid: it's a single scrollable column. */
.help-page {
    overflow-y: auto;          /* the whole page scrolls */
    overflow-x: hidden;
}
.help-page .app-main,
.help-page .help-main { display: block; } /* defeat any inherited grid */

.help-head .header-row {
    /* keep the header compact on the help page */
    grid-template-columns: 1fr 1fr;
}

.help-main {
    max-width: 820px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
    color: var(--text);
    line-height: 1.6;
}
.help-main h1 {
    font-size: 1.8rem;
    margin: 0 0 0.5rem;
    color: var(--text);
    border-bottom: 2px solid var(--accent);
    padding-bottom: 0.4rem;
}
.help-lede {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}
.help-main h2 {
    font-size: 1.25rem;
    margin: 2rem 0 0.6rem;
    color: var(--accent);
    scroll-margin-top: 5rem; /* anchors land below the fixed-ish header */
}
.help-main h3 {
    font-size: 1.02rem;
    margin: 1.2rem 0 0.4rem;
    color: var(--text);
}
.help-main p { margin: 0.5rem 0; }
.help-main ul, .help-main ol { margin: 0.4rem 0 0.6rem 1.4rem; }
.help-main li { margin: 0.25rem 0; }
.help-main code {
    background: var(--bg-input);
    border: 1px solid var(--border-soft);
    border-radius: 3px;
    padding: 0.05rem 0.3rem;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.85em;
    color: var(--accent);
}
.help-main kbd {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 0.05rem 0.4rem;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.8em;
    color: var(--text);
}

/* Table of contents */
.help-toc {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    padding: 0.8rem 1.2rem;
    margin: 1rem 0 2rem;
}
.help-toc h2 {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    color: var(--text);
    border: none;
    padding: 0;
}
.help-toc ul { margin: 0; list-style: none; padding-left: 0; }
.help-toc a {
    color: var(--accent);
    text-decoration: none;
}
.help-toc a:hover { text-decoration: underline; }

/* Wide viewports: the Contents floats as a fixed column on the right of the
   main content so it stays in view while scrolling. The content column is
   max 820px and centered, so a 240px fixed panel only fits without overlap
   above ~1350px — below that the TOC stays in the normal flow (above). */
@media (min-width: 1350px) {
    .help-toc {
        position: fixed;
        top: 5rem;   /* level with the content, below the header */
        right: 1rem;
        width: 240px;
        max-height: calc(100vh - 6.5rem);
        overflow-y: auto;
        margin: 0;
        z-index: 20;
    }
}

/* Inline tags (like the "default" / "confirm" badges) */
.tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--bg-elev);
    color: var(--text-muted);
    border: 1px solid var(--border-soft);
    border-radius: 3px;
    padding: 0.05rem 0.35rem;
    vertical-align: middle;
}
.tag-warn {
    color: var(--warning);
    border-color: var(--warning);
}

/* Callout note box */
.help-main .note {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--warning);
    border-radius: 4px;
    padding: 0.6rem 0.9rem;
    margin: 0.8rem 0;
}

/* small icon span (copy/save glyphs in prose) */
.help-main .ic {
    display: inline-block;
    border: 1px solid var(--border-soft);
    border-radius: 3px;
    padding: 0 0.25rem;
    background: var(--bg-input);
}

/* "Back to app" link at the bottom */
.help-back {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-soft);
}
.help-back a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.help-back a:hover { text-decoration: underline; }

/* The Help button in the header sits next to the mode toggle. */
#helpBtn {
    margin-left: 0.5rem;
    text-decoration: none;
    cursor: pointer;
}


/* =============================================================
   Assisted dictation (Prompt panel)
   ============================================================= */
#dictateBtn {
    position: relative;
}
#speakBtn.active {
    color: var(--accent);
}
/* Alert toggles (beep / verbal) in the Response header: accent when on,
   dimmed when off. */
.alert-toggle.active {
    color: var(--accent);
}
.alert-toggle:not(.active) {
    opacity: 0.4;
}

/* =============================================================
   Voice commands (wake chip, status line, cheat sheet, card hints)
   ============================================================= */
.vc-wake-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-size: 0.75rem;
    cursor: pointer;
    background: transparent;
    color: inherit;
    white-space: nowrap;
}
.vc-wake-chip .vc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
}
.vc-wake-chip.armed {
    border-color: var(--accent);
    color: var(--accent);
}
.vc-wake-chip.armed .vc-dot {
    background: var(--accent);
    animation: thinking-pulse 1.6s infinite;
}
.vc-wake-chip.captured {
    border-color: var(--danger);
    color: var(--danger);
}
.vc-wake-chip.captured .vc-dot {
    background: var(--danger);
}

/* status line at the top of the dictation panel */
.vc-status-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    padding: 0.25rem 0.1rem 0.5rem;
}
.vc-status-line .vc-state { font-weight: 600; }
.vc-status-line .vc-state.ok { color: var(--accent); }
.vc-status-line .vc-state.err { color: var(--danger); }
.vc-status-line .vc-heard { opacity: 0.7; font-style: italic; }

/* cheat-sheet popover (Prompt header "?" button) */
.vc-popover {
    position: absolute;
    z-index: 60;
    top: 2.2rem;
    right: 0;
    width: 340px;
    max-height: 420px;
    overflow: auto;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    font-size: 0.82rem;
}
.vc-popover h3 { margin: 0.2rem 0 0.4rem; font-size: 0.9rem; }
.vc-popover .vc-popover-sub { opacity: 0.6; font-weight: normal; }
.vc-popover .vc-note { opacity: 0.7; margin-top: 0.4rem; }

/* command sheet table — shared by the "?" popover and the voice column
   (content rendered from VoiceCommands.CHEAT_SHEET) */
.vc-sheet table { width: 100%; border-collapse: collapse; }
.vc-sheet td { padding: 0.08rem 0.3rem; vertical-align: top; line-height: 1.25; }
.vc-sheet td:first-child { white-space: nowrap; color: var(--accent); }
/* Section cells are also td:first-child (same specificity class), so
   this selector must include the element to win source order. */
.vc-sheet td.vc-section {
    color: var(--warning);
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 0.45rem;
}

/* voice commands column (between model selector and prompt) */
.vc-col-body {
    padding: 0.5rem 0.6rem;
    overflow: auto;  /* last resort only — the sheet is sized to fit */
}
.vc-col-state { font-size: 0.78rem; opacity: 0.75; }
.vc-col-status {
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}
.vc-col-sheet td { font-size: 0.77rem; }

/* "?" button doubles as the voice-view preset/reset toggle */
.vc-help-btn.active {
    color: var(--accent);
}

/* ---- Phrase review (draft split into keep/remove phrases) ---- */
.phrase-review {
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 0.4rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 0;
}
.phrase-review-head {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
}
.phrase-review-title { color: var(--accent); font-weight: 600; }
.phrase-review-hint { opacity: 0.65; font-style: italic; }
.phrase-review-list {
    overflow-y: auto;
    max-height: 12rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.phrase-row {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.85rem;
    padding: 0.15rem 0.2rem;
    border-radius: 4px;
}
.phrase-row:hover { background: var(--bg-hover); }
.phrase-row .phrase-num {
    color: var(--warning);
    font-weight: 700;
    min-width: 1.4em;
    text-align: right;
}
.phrase-row .phrase-text { flex: 1; }
.phrase-row.stray .phrase-text { opacity: 0.55; font-style: italic; }
.phrase-row.stray .phrase-num::after {
    content: ' ⚠';
    font-size: 0.75em;
}
.phrase-row input[type="checkbox"] { margin-top: 0.2rem; }
.phrase-row:not(.kept) .phrase-text { text-decoration: line-through; opacity: 0.45; }
.phrase-review-actions { display: flex; gap: 0.4rem; }

/* voice hint on approval/question cards */
.vc-card-hint {
    font-size: 0.78rem;
    opacity: 0.75;
    margin-top: 0.3rem;
}
/* marker when a card was answered by voice */
.interaction-card .vc-via-voice {
    color: var(--accent);
    font-weight: 600;
}
#dictateBtn .rec-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
    animation: thinking-pulse 1.1s ease-in-out infinite;
}
.dictation-panel {
    flex: 0 0 auto;
    margin-top: 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.6rem;
}
/* The prompt panel body is a flex column (same pattern as
   .response-panel-body): the textarea flexes to fill and the dictation
   panel stays visible beneath it. Without this, the textarea's
   height:100% pushes the panel below the visible area of the
   fixed-height card. */
.app-col-prompt .panel-body {
    display: flex;
    flex-direction: column;
}
.app-col-prompt .panel-textarea {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}
/* Column 2 Prompt/Trace swap (agent mode): the prompt editor is wrapped in
   .prompt-view; the `show-trace` class on the column hides it and shows the
   trace full-height instead. Direct mode never gets the class. */
.prompt-view {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.app-col-prompt .agent-trace {
    display: none;
}
.app-col-prompt.show-trace .prompt-view {
    display: none;
}
.app-col-prompt.show-trace .agent-trace {
    display: flex;
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
    margin-top: 0.5rem;
}
.dictation-panes {
    display: flex;
    gap: 0.6rem;
}
.dictation-pane {
    flex: 1 1 0;
    min-width: 0;
}
.dictation-label {
    display: block;
    font-size: 0.8rem;
    opacity: 0.75;
    margin-bottom: 0.25rem;
}
.dictation-text {
    width: 100%;
    resize: vertical;
}
.dictation-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}
.dictation-hint {
    font-size: 0.8rem;
    opacity: 0.7;
}
.dictation-panel.command-mode {
    border-color: var(--accent);
}

/* =============================================================
   MOBILE / TABLET OPTIMIZATIONS  —  REVERT POINT
   Everything between this banner and the "END MOBILE" banner
   below is additive responsive CSS: it only applies under the
   stated max-width media queries and never affects desktop
   widths. To revert all phone/tablet behavior, delete this
   whole block (or restore style.css from version control).
   ============================================================= */

/* ---- Tablet: 901–1250px — two columns instead of four ------- */
@media (max-width: 1250px) and (min-width: 901px) {
    .app-main,
    .app-main.files-active,
    .app-main.usage-active {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: minmax(260px, auto);
    }
    /* Conversation first: prompt + response on the top row. */
    .app-col-prompt   { order: 1; }
    .app-col-response { order: 2; }
    .app-col-console  { order: 3; }
    .app-col-models   { order: 4; }
}

/* ---- Phone: ≤900px — single column, touch-friendly ---------- */
@media (max-width: 900px) {

    /* The desktop shell is a fixed 100vh grid with internal
       scroll areas; on a phone let the page itself scroll. */
    body {
        height: auto;
        min-height: 100dvh;
        overflow: auto;
    }
    .app-main,
    .app-main.files-active,
    .app-main.usage-active {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    /* Conversation first: Prompt → Response → Console → Models. */
    .app-col-prompt   { order: 1; }
    .app-col-response { order: 2; }
    .app-col-console  { order: 3; }
    .app-col-models   { order: 4; }

    /* Panels size to content instead of fixed viewport fractions. */
    .app-col, .card {
        min-height: 0;
        height: auto;
    }
    .console-body {
        max-height: 60dvh;
    }

    /* Finger-sized touch targets (desktop keeps compact buttons). */
    .btn, .tab, .mode-group .btn-mode {
        min-height: 40px;
    }
    .tab {
        padding: 0.7rem 0.9rem;
    }

    /* ≥16px inputs stop iOS/Safari from auto-zooming on focus. */
    input, textarea, select {
        font-size: 16px;
    }

    /* Tab bar scrolls horizontally instead of wrapping. */
    .console-tabs {
        overflow-x: auto;
        scrollbar-width: none;              /* Firefox */
    }
    .console-tabs::-webkit-scrollbar {      /* Chrome/Safari */
        display: none;
    }
    .tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    /* Dictation panes stack vertically on narrow screens. */
    .dictation-panes {
        flex-direction: column;
    }
}

/* ======================= END MOBILE OPTIMIZATIONS ============ */


/* =============================================================
   Workspace bar (header second row)
   ============================================================= */
.workspace-bar {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border-soft);
}
.ws-label {
    font-size: 0.82rem;
    color: var(--text-muted);
}
.ws-select {
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    font-size: 0.85rem;
    max-width: 260px;
}
.ws-mode-toggle {
    display: inline-flex;
    gap: 2px;
}
.ws-mode-toggle .btn.active {
    border-color: var(--accent);
    color: var(--accent-text);
}
.ws-stats-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    align-items: baseline;
    margin-top: 0.35rem;
    padding: 0.35rem 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.ws-stat b { color: var(--text); }
.ws-providers {
    flex-basis: 100%;
    color: var(--accent);
}

/* =============================================================
   Context files: drop zone + chips
   ============================================================= */
.prompt-drop-zone { position: relative; }
.prompt-drop-zone.drag-over {
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
}
.prompt-drop-zone.drag-over .panel-textarea {
    border-color: var(--accent);
}
.drop-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: var(--accent);
    font-weight: 700;
    z-index: 3;
    pointer-events: none;  /* let dragleave/drop reach the zone */
    border-radius: 4px;
}
.context-chips {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.4rem;
}
.context-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--bg-elev);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 0.1rem 0.35rem 0.1rem 0.55rem;
    font-size: 0.78rem;
    max-width: 320px;
}
.context-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: rtl;         /* keep the filename end visible on overflow */
    text-align: left;
}
.context-chip-remove {
    background: none;
    border: none;
    color: var(--danger);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.15rem;
}
.context-chip-remove:hover { color: var(--text); }

/* =============================================================
   Modal dialogs (file picker, restore)
   ============================================================= */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}
.modal-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: var(--shadow);
    width: min(560px, 92vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 0.8rem;
    gap: 0.5rem;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.modal-title { font-weight: 700; }
.modal-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
.fp-list {
    max-height: 50vh;
    min-height: 120px;
}

/* =============================================================
   Files tab
   ============================================================= */
.files-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    margin-bottom: 0.4rem;
}
.files-toolbar .btn {
    font-size: 0.78rem;
    padding: 0.2rem 0.5rem;
}
.files-select-all {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.files-breadcrumbs {
    flex-shrink: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
    overflow-x: auto;
    white-space: nowrap;
}
.breadcrumb-btn {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: inherit;
    padding: 0;
}
.breadcrumb-btn:hover { text-decoration: underline; }
.files-split {
    display: flex;
    gap: 0.6rem;
    min-height: 0;
    flex: 1 1 auto;
}
.files-list {
    flex: 0 0 45%;
    min-width: 0;
    overflow-y: auto;
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 0.3rem;
    background: var(--bg-input);
}
.files-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.3rem;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.85rem;
}
.files-row:hover { background: var(--bg-hover); }
.files-row .files-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.files-dir .files-name { color: var(--accent); }
.files-meta {
    flex: 0 0 auto;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.files-meta.files-date {
    min-width: 7.2rem;
    text-align: right;
}
.files-viewer {
    flex: 1 1 55%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.files-viewer-head {
    font-size: 0.78rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-editor {
    flex: 1 1 auto;
    min-height: 160px;
    resize: none;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.8rem;
}
.file-image-view {
    max-width: 100%;
    max-height: 45vh;
    object-fit: contain;
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    background: var(--bg-input);
}
.files-viewer-actions {
    display: flex;
    justify-content: flex-end;
}

/* Narrow screens: stack the files panes. */
@media (max-width: 900px) {
    .files-split { flex-direction: column; }
    .files-list { flex: 0 0 auto; max-height: 35vh; }
}

/* ---- Usage panel ---- */
.usage-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0.4rem 0;
}
.usage-summary b { color: var(--text); }
.usage-breakdown { margin-bottom: 0.5rem; }
.usage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
}
.usage-table th,
.usage-table td {
    text-align: left;
    padding: 0.2rem 0.35rem;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text);
}
.usage-table th {
    color: var(--text-muted);
    font-weight: 700;
}
.usage-table td.num,
.usage-table th.num { text-align: right; }
.usage-projects { margin: 0.4rem 0 0.6rem; }
.usage-projects-toggle { font-size: 0.7rem; margin-bottom: 0.2rem; text-align: right; }
.usage-projects-toggle a { color: var(--text-muted, #999); }
.usage-project-row { cursor: pointer; }
.usage-project-row:hover td { background: var(--bg-hover, rgba(127, 127, 127, 0.08)); }
.usage-project-row.viewing td { background: var(--bg-active, rgba(80, 140, 255, 0.12)); }
.usage-project-row.active td:first-child { font-weight: 700; }

/* ---- Workspace tree picker ---- */
.ws-tree-wrap { position: relative; display: inline-block; }
.ws-tree-btn { min-width: 10rem; text-align: left; }
.ws-tree-caret { float: right; margin-left: 0.5rem; }
.ws-tree-panel {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 60;
    min-width: 16rem;
    max-width: 26rem;
    max-height: 22rem;
    overflow: auto;
    background: var(--bg-panel, #1e1e1e);
    border: 1px solid var(--border-soft, #444);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    padding: 0.25rem 0;
    font-size: 0.78rem;
}
.ws-tree-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem 0.15rem 0.3rem;
    cursor: pointer;
    white-space: nowrap;
    color: var(--text, #ddd);
}
.ws-tree-row:hover { background: var(--bg-hover, rgba(127, 127, 127, 0.12)); }
.ws-tree-row.active { background: var(--bg-active, rgba(80, 140, 255, 0.14)); }
.ws-tree-toggle { width: 0.9rem; text-align: center; color: var(--text-muted, #999); }
.ws-tree-name { overflow: hidden; text-overflow: ellipsis; }
.usage-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    overflow-y: auto;
}
.usage-item {
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--accent);
    border-radius: 3px;
    padding: 0.35rem;
    background: var(--bg-input);
    cursor: pointer;
}
.usage-item:hover { background: var(--bg-hover); }
.usage-item-head {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: var(--text);
}
.usage-item-meta {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.usage-mode {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.62rem;
    color: var(--accent);
}
.usage-detail {
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: var(--text);
}
.usage-detail pre {
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 3px;
    padding: 0.3rem;
    margin: 0.2rem 0;
    max-height: 220px;
    overflow-y: auto;
}
.usage-detail .usage-settings {
    color: var(--text-muted);
    font-size: 0.68rem;
}
.usage-empty {
    font-size: 0.78rem;
    color: var(--text-muted);
}
#usageLoadMoreBtn { margin-top: 0.4rem; }

/* ── Trace analysis side panel ─────────────────────────────────── */
.trace-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 90vw;
    height: 100vh;
    background: var(--bg-primary, #1e1e2e);
    border-left: 1px solid var(--border-color, #444);
    display: flex;
    flex-direction: column;
    z-index: 1050;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.3);
}
.trace-panel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color, #444);
    flex-shrink: 0;
}
.trace-panel-title {
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}
.trace-model-select {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    padding: 0.15rem 0.3rem;
    background: var(--bg-secondary, #2a2a3a);
    color: var(--text-primary, #eee);
    border: 1px solid var(--border-color, #555);
    border-radius: 4px;
}
.trace-include {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    color: var(--text-primary, #eee);
    white-space: nowrap;
    cursor: pointer;
}
.trace-include input { accent-color: var(--accent); }
.trace-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.trace-msg {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 50vh;
    overflow-y: auto;
}
.trace-msg-user {
    background: var(--accent-dim, #2a3a5a);
    align-self: flex-end;
    max-width: 85%;
}
.trace-msg-assistant {
    background: var(--bg-secondary, #2a2a3a);
    align-self: flex-start;
    max-width: 95%;
}
.trace-msg-system {
    background: transparent;
    color: var(--text-muted, #999);
    font-style: italic;
    align-self: center;
    font-size: 0.75rem;
}
.trace-panel-input {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border-color, #444);
    flex-shrink: 0;
}
.trace-question-input {
    flex: 1;
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    background: var(--bg-secondary, #2a2a3a);
    color: var(--text-primary, #eee);
    border: 1px solid var(--border-color, #555);
    border-radius: 4px;
}
.trace-question-input:focus {
    outline: none;
    border-color: var(--accent, #7aa2f7);
}