/* =====================================================================
   Brew — design system
   ===================================================================== */
:root {
    /* Dark is the default; the @media block overrides for light. */
    --bg: #0a0b0e;
    --bg-elev: #15171c;
    --bg-elev-2: #1d2026;
    --bg-glass: rgba(28, 31, 38, 0.6);
    --text: #e8eaed;
    --text-muted: #8e95a3;
    --text-faint: #5a6072;
    --border: #252830;
    --border-soft: #1c1f26;
    --accent: #60a5fa;
    --accent-soft: rgba(96, 165, 250, 0.14);
    --brew: #f47b30;
    --brew-soft: rgba(244, 123, 48, 0.12);
    --brew-glow: rgba(244, 123, 48, 0.35);
    --success: #34d399;
    --warning: #fbbf24;
    --danger: #f87171;
    --radius: 14px;
    --radius-lg: 18px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.35);
    /* Full fallback chain so any glyph the body font (Inter) doesn't
       ship resolves to something instead of the no-glyph "tofu" box:
       1. Latin fallbacks (system sans).
       2. Color-emoji fonts for 📊 📑 ✨ etc.
       3. Segoe UI Symbol / Historic for misc unicode symbols and arrows.
       4. CJK system fonts (Yu Gothic / Meiryo / MS Gothic on Windows;
          PingFang SC on macOS) so the model's 「 」『 』 brackets render.
       5. Noto Sans Symbols 2 (web-loaded) catches the long tail —
          math, geometric shapes, dingbats, miscellaneous symbols. */
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
            "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI Historic",
            "Yu Gothic", "Meiryo", "MS Gothic", "PingFang SC", "Hiragino Sans",
            "Noto Color Emoji", "Noto Sans Symbols 2", "Noto Sans",
            sans-serif;
    --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas,
            "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI Historic",
            "Yu Gothic", "Meiryo", "MS Gothic",
            "Noto Color Emoji", "Noto Sans Symbols 2",
            monospace;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #f6f7f9;
        --bg-elev: #ffffff;
        --bg-elev-2: #f1f3f6;
        --bg-glass: rgba(255, 255, 255, 0.75);
        --text: #131722;
        --text-muted: #5b6273;
        --text-faint: #9aa3b2;
        --border: #e3e6ec;
        --border-soft: #eef0f4;
        --accent: #2563eb;
        --accent-soft: rgba(37, 99, 235, 0.10);
        --brew: #ea6b1f;
        --brew-soft: rgba(234, 107, 31, 0.10);
        --brew-glow: rgba(234, 107, 31, 0.25);
        --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
        --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
        --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.10);
    }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    display: flex;
    height: 100vh;
}

/* HTML `hidden` must beat any `display: flex` we set in CSS. */
[hidden] { display: none !important; }

/* ---- BrandBrewAI animations ------------------------------------------
   Ported verbatim from BrandBrewAI.svg / BrandBrewAIIcon.tsx — the
   canonical brand loader. Applied to every `.brand-loader` instance
   (thinking pill, empty-state hero) so the flame curls upward, the
   aura breathes, and the cup stays put. */
.brand-loader .bl-flame-back,
.brand-loader .bl-flame-front {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    will-change: opacity, transform, clip-path;
}
.brand-loader .bl-flame-back {
    animation: bb-steam-rise-back 3.6s cubic-bezier(0.32, 0, 0.4, 1) infinite;
    animation-delay: 0.12s;
}
.brand-loader .bl-flame-front {
    animation: bb-steam-rise-front 3.6s cubic-bezier(0.32, 0, 0.4, 1) infinite;
}
.brand-loader .bl-aura {
    transform-origin: 187.5px 200px;
    animation: bb-aura-breath 3.6s ease-in-out infinite;
}
@keyframes bb-steam-rise-back {
    0%   { clip-path: inset(100% 0 0 0); opacity: 0; transform: translateY(8px); }
    18%  { opacity: 1; }
    42%  { clip-path: inset(0 0 0 0);    opacity: 1; transform: translateY(0); }
    62%  { clip-path: inset(0 0 0 0);    opacity: 1; transform: translateY(-2px); }
    80%  { clip-path: inset(0 0 60% 0);  opacity: 0; transform: translateY(-14px); }
    100% { clip-path: inset(100% 0 0 0); opacity: 0; transform: translateY(8px); }
}
@keyframes bb-steam-rise-front {
    0%   { clip-path: inset(100% 0 0 0); opacity: 0; transform: translateY(6px) rotate(-2deg); }
    15%  { opacity: 1; }
    45%  { clip-path: inset(0 0 0 0);    opacity: 1; transform: translateY(0) rotate(1.5deg); }
    65%  { clip-path: inset(0 0 0 0);    opacity: 1; transform: translateY(-3px) rotate(-1deg); }
    82%  { clip-path: inset(0 0 55% 0);  opacity: 0; transform: translateY(-16px) rotate(0); }
    100% { clip-path: inset(100% 0 0 0); opacity: 0; transform: translateY(6px) rotate(-2deg); }
}
@keyframes bb-aura-breath {
    0%, 100% { opacity: 0.18; transform: scale(0.9);  }
    45%      { opacity: 0.55; transform: scale(1.05); }
    80%      { opacity: 0.12; transform: scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
    .brand-loader .bl-flame-back,
    .brand-loader .bl-flame-front,
    .brand-loader .bl-aura {
        animation-duration: 7.2s;
    }
}

/* Ambient gradient backdrop. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle at 12% -10%, var(--brew-soft), transparent 45%),
        radial-gradient(circle at 92% 110%, var(--accent-soft), transparent 50%);
}

button { font-family: inherit; }
kbd {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: var(--font-mono);
    font-size: 11px;
}

/* =====================================================================
   Rail — narrow icon column on the far left
   ===================================================================== */
.rail {
    width: 56px;
    flex: 0 0 56px;
    height: 100vh;
    background: var(--bg-elev-2);
    border-right: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0 14px;
    gap: 6px;
}
.rail__brand {
    width: 36px;
    height: 36px;
    color: var(--brew);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 10px var(--brew-glow));
}
.rail__brand svg { width: 36px; height: 36px; overflow: visible; }
.rail__btn {
    background: transparent;
    color: var(--text-muted);
    border: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: color 0.12s, background 0.12s;
}
.rail__btn svg { width: 19px; height: 19px; }
.rail__btn:hover { color: var(--text); background: var(--bg-elev); }
.rail__btn.is-active {
    color: var(--brew);
    background: var(--brew-soft);
}
.rail__btn.is-active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: var(--brew);
}
.rail__spacer { flex: 1 1 auto; }
.rail__session {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rail__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
}

/* =====================================================================
   Sidebar — secondary panel container; content swaps based on rail
   ===================================================================== */
.sidebar {
    width: 288px;
    flex: 0 0 288px;
    min-width: 220px;
    max-width: 520px;
    height: 100vh;
    background: var(--bg-elev-2);
    border-right: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: flex-basis 0.18s ease, width 0.18s ease;
}
/* When the rail toggle is flipped, the sidebar collapses out of view.
   The rail stays so the user has icons to bring it back. */
body.sidebar-collapsed .sidebar,
body.sidebar-collapsed #splitterLeft { display: none; }
/* During an active drag, suppress the smooth transition or it'll lag the cursor. */
body.is-resizing .sidebar,
body.is-resizing .preview { transition: none; }
body.is-resizing { cursor: ew-resize; user-select: none; }
body.is-resizing iframe { pointer-events: none; }

/* Vertical splitter — sits between two flex children, drag to resize. */
.splitter--vertical {
    flex: 0 0 4px;
    width: 4px;
    background: transparent;
    cursor: ew-resize;
    position: relative;
    z-index: 5;
}
.splitter--vertical::before {
    content: "";
    position: absolute;
    inset: 0 -2px;
    background: transparent;
    transition: background 0.12s;
}
.splitter--vertical:hover::before,
.splitter--vertical.is-active::before { background: var(--brew); opacity: 0.6; }

/* Bump the rail toggle so it visually reads as a collapse control. */
.rail__btn--toggle svg { transition: transform 0.2s; }
body.sidebar-collapsed .rail__btn--toggle svg { transform: rotate(180deg); }
.sb-panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.sb-panel[hidden] { display: none; }
.sb-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 8px;
}
.sb-panel__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    color: var(--text-faint);
}
.sb-panel__icon-btn {
    background: transparent;
    color: var(--text-faint);
    border: 0;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.12s, background 0.12s;
}
.sb-panel__icon-btn:hover { color: var(--text); background: var(--bg-elev); }
.sb-panel__icon-btn svg { width: 14px; height: 14px; }
.sb-panel__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 12px 10px;
    padding: 10px 14px;
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.sb-panel__cta:hover { border-color: var(--brew); background: var(--brew-soft); }
.sb-panel__cta svg { width: 15px; height: 15px; }
.sb-panel__hint {
    margin: 0 16px 10px;
    color: var(--text-faint);
    font-size: 11.5px;
    line-height: 1.5;
}
.sb-panel__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;  /* never let a wide card poke out sideways */
    padding: 0 12px 12px;
    min-height: 0;
}
.sb-panel__footer {
    margin-top: auto;
    padding: 8px 12px 12px;
    border-top: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-faint);
    font-size: 11px;
    font-family: var(--font-mono);
}
.sb-panel__footer-row {
    background: transparent;
    border: 0;
    color: var(--text-faint);
    cursor: pointer;
    text-align: left;
    font: inherit;
    font-family: var(--font-mono);
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 8px;
    transition: background 0.12s, color 0.12s;
}
.sb-panel__footer-row > span:not(.sb-panel__footer-action) {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sb-panel__footer-row:hover { background: var(--bg-elev); color: var(--text); }
.sb-panel__footer-row svg { width: 13px; height: 13px; flex: 0 0 auto; }
.sb-panel__footer-action {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--brew);
    opacity: 0;
    transition: opacity 0.15s;
}
.sb-panel__footer-row:hover .sb-panel__footer-action { opacity: 1; }
.sb-panel__session {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
}
.sb-panel__session-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    flex: 0 0 auto;
    box-shadow: 0 0 6px var(--success);
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 6px 4px;
}
.sidebar__mark {
    width: 30px;
    height: 30px;
    color: var(--brew);
    filter: drop-shadow(0 0 10px var(--brew-glow));
    overflow: visible;
}
.sidebar__title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}
.sidebar__badge {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-left: auto;
}

.sidebar__new {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.sidebar__new:hover {
    border-color: var(--brew);
    background: var(--brew-soft);
}
.sidebar__new svg { width: 16px; height: 16px; }

/* Secondary action below "New chat" — used for "Extensions" today, could
   host "Settings" / "Docs" in the future. Less prominent than the primary
   button so it doesn't compete for attention. */
.sidebar__ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.sidebar__ghost:hover {
    color: var(--text);
    background: var(--bg-elev);
    border-color: var(--border);
}
.sidebar__ghost svg { width: 15px; height: 15px; }

.sidebar__section {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 6px;
}
.sidebar__section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
}
.sidebar__refresh {
    background: transparent;
    border: 0;
    color: var(--text-faint);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: color 0.15s, background 0.15s;
}
.sidebar__refresh:hover { color: var(--text); background: var(--bg-elev); }
.sidebar__refresh svg { width: 13px; height: 13px; }

.sidebar__chats {
    list-style: none;
    margin: 0;
    padding: 0 12px 12px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar__chats li {
    padding: 8px 10px 8px 30px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.35;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    border: 1px solid transparent;
    position: relative;
}
/* Little chat-bubble glyph prefix so each row reads as a clickable
   conversation, not a static line of text. */
.sidebar__chats li::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 11px;
    width: 12px;
    height: 12px;
    border-radius: 4px 4px 4px 2px;
    background: currentColor;
    opacity: 0.4;
}
.sidebar__chats li:hover {
    background: var(--bg-elev);
    color: var(--text);
    border-color: var(--border);
}
.sidebar__chats li:hover::before { opacity: 0.7; }
.sidebar__chats li.is-current {
    background: var(--brew-soft);
    color: var(--text);
    border-color: rgba(244, 123, 48, 0.35);
    cursor: default;
}
.sidebar__chats li.is-current::before { background: var(--brew); opacity: 1; }
.sidebar__chats li .chat-preview {
    font-size: 13px;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar__chats li .chat-meta {
    font-size: 11px;
    color: var(--text-faint);
    font-family: var(--font-mono);
}
.sidebar__chats-empty {
    padding: 16px 10px;
    color: var(--text-faint);
    font-style: italic;
    font-size: 13px;
    text-align: center;
    cursor: default;
}
.sidebar__chats-empty:hover { background: transparent; color: var(--text-faint); }

.sidebar__footer {
    padding: 10px 0 0;
    border-top: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--text-faint);
    font-size: 11px;
    font-family: var(--font-mono);
}
/* Workspace row is now a real button — clicking opens File Explorer
   at that path. Hover lifts and reveals the ↗ to advertise the action. */
.sidebar__workspace {
    background: transparent;
    border: 0;
    color: var(--text-faint);
    cursor: pointer;
    text-align: left;
    font: inherit;
    font-family: var(--font-mono);
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 8px;
    transition: background 0.12s, color 0.12s;
}
.sidebar__workspace > span:not(.sidebar__workspace-action) {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar__workspace:hover { background: var(--bg-elev); color: var(--text); }
.sidebar__workspace:hover .sidebar__workspace-action { opacity: 1; transform: translateX(0); }
.sidebar__workspace svg { width: 13px; height: 13px; flex: 0 0 auto; }
.sidebar__workspace-action {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--brew);
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity 0.15s, transform 0.15s;
}
.sidebar__session {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar__session-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    flex: 0 0 auto;
    box-shadow: 0 0 6px var(--success);
}

/* =====================================================================
   Main column
   ===================================================================== */
.main {
    flex: 1 1 auto;
    height: 100vh;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    background: var(--bg);
}

.topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg);
}
.topbar__menu {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: none;
    align-items: center;
}
.topbar__menu svg { width: 18px; height: 18px; }
.topbar__menu:hover { color: var(--text); background: var(--bg-elev); }
.topbar__title { display: flex; flex-direction: column; gap: 0; }
.topbar__name { font-size: 15px; font-weight: 600; color: var(--text); }
.topbar__sub { font-size: 12px; color: var(--text-faint); }
.topbar__spacer { flex: 1 1 auto; }

/* ---- Model picker --------------------------------------------------- */
.model-picker { position: relative; }
.model-picker__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.model-picker__btn:hover { border-color: var(--accent); }
.model-picker__btn svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--brew); }
.model-picker__chev { width: 12px !important; height: 12px !important; color: var(--text-muted) !important; }
.model-picker__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 320px;
    max-height: 70vh;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.model-picker__search {
    padding: 10px;
    border-bottom: 1px solid var(--border-soft);
}
.model-picker__search input {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 7px 10px;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    outline: none;
}
.model-picker__search input:focus { border-color: var(--accent); }
.model-picker__list {
    list-style: none;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    flex: 1 1 auto;
}
.model-picker__list li {
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.1s;
}
.model-picker__list li:hover { background: var(--bg-elev-2); }
.model-picker__list li.is-selected {
    background: var(--brew-soft);
    color: var(--text);
}
.model-picker__list li.is-selected::after {
    content: "✓";
    margin-left: auto;
    color: var(--brew);
    font-weight: 700;
}
.model-picker__empty {
    padding: 16px;
    color: var(--text-faint);
    font-style: italic;
    text-align: center;
    cursor: default;
}
.model-picker__empty:hover { background: transparent; }
.model-picker__footer {
    padding: 8px;
    border-top: 1px solid var(--border-soft);
    display: flex;
    justify-content: flex-end;
}
.model-picker__reset {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.model-picker__reset:hover { color: var(--text); background: var(--bg-elev-2); }

/* =====================================================================
   Chat scroll area
   ===================================================================== */
.chat {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 28px 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    scroll-behavior: smooth;
}
.chat > * { max-width: 760px; width: 100%; margin: 0 auto; }
/* When the sidebar is collapsed, fill the freed real estate with the
   chat instead of leaving big blank stripes. `width: auto` is critical
   — without it the inherited `width: 100%` would add to the margins
   and force a horizontal scrollbar. Symmetric 48px gutters on each
   side. */
body.sidebar-collapsed .chat > * {
    width: auto;
    max-width: none;
    margin-left: 48px;
    margin-right: 48px;
}
body.sidebar-collapsed .composer__card {
    width: auto;
    max-width: none;
    margin-left: 48px;
    margin-right: 48px;
}

/* ===== Hero empty-state ============================================== */
.empty-state {
    margin: auto;
    max-width: 640px;
    padding: 32px 24px;
    text-align: center;
    color: var(--text-muted);
    animation: empty-fade 0.45s ease-out;
}
@keyframes empty-fade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.empty-state__halo {
    position: relative;
    width: 88px;
    height: 88px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 60%, var(--brew-soft), transparent 70%);
}
.empty-state__halo::before {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--brew-glow), transparent 65%);
    animation: halo-pulse 4s ease-in-out infinite;
    opacity: 0.35;
}
@keyframes halo-pulse {
    0%, 100% { transform: scale(1); opacity: 0.35; }
    50% { transform: scale(1.18); opacity: 0.7; }
}
.empty-state__brand {
    width: 78px;
    height: 78px;
    color: var(--brew);
    position: relative;
    z-index: 1;
    overflow: visible;
}
@media (prefers-reduced-motion: reduce) {
    .empty-state__halo::before { animation: none; }
}

.empty-state__greeting {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--text), var(--brew));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.empty-state__sub {
    margin: 6px 0 28px;
    font-size: 15px;
    color: var(--text-muted);
}
.empty-state__sub strong { color: var(--text); font-weight: 600; }
.empty-state__hint {
    font-size: 12px;
    color: var(--text-faint);
    margin-top: 28px;
}

.suggestions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 auto;
    max-width: 560px;
}
.suggestion {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    font: inherit;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s, background 0.15s, box-shadow 0.15s;
}
.suggestion:hover {
    border-color: var(--brew);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background: var(--bg-elev);
}
.suggestion__icon { font-size: 22px; flex: 0 0 auto; }
.suggestion__text { display: block; line-height: 1.4; font-size: 13px; }
.suggestion__text strong { display: block; color: var(--text); font-size: 14px; font-weight: 600; margin-bottom: 1px; }
.suggestion__text span { color: var(--text-muted); }
@media (max-width: 560px) { .suggestions { grid-template-columns: 1fr; } }

/* =====================================================================
   Messages
   ===================================================================== */
.msg {
    word-wrap: break-word;
    animation: msg-in 0.22s ease-out;
}
@keyframes msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* User: branded right-aligned pill. Width auto so short messages stay
   compact — the `.chat > *` rule above would otherwise force 100%. */
.msg--user {
    align-self: flex-end;
    background: var(--brew-soft);
    border: 1px solid rgba(244, 123, 48, 0.22);
    color: var(--text);
    padding: 12px 16px;
    border-radius: 18px 18px 4px 18px;
    width: auto;
    max-width: min(76%, 540px);
    margin-left: auto;
    margin-right: 0;
    white-space: pre-wrap;
    box-shadow: var(--shadow-sm);
}
@media (prefers-color-scheme: light) {
    .msg--user { background: var(--brew-soft); border-color: rgba(234, 107, 31, 0.22); }
}

/* Assistant: full-width glass card, no avatar bubble around it. */
.msg--assistant {
    align-self: stretch;
    width: 100%;
    background: transparent;
    padding: 4px 2px;
}
.msg__role {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 10px;
    letter-spacing: 0.01em;
}
.role-icon {
    width: 36px;
    height: 36px;
    color: var(--brew);
    flex: 0 0 36px;
    filter: drop-shadow(0 0 10px var(--brew-glow));
}
.role-icon.brand-brew { overflow: visible; }
.msg__body { color: var(--text); font-size: 15px; line-height: 1.65; }
.msg__body > *:first-child { margin-top: 0; }
.msg__body > *:last-child { margin-bottom: 0; }
.msg__body p { margin: 0 0 0.85em; }
/* Inline-rendered image (image-gen, screenshots, charts). Caps to bubble
   width, soft border, clickable to open full size in a new tab. */
.msg__body img.chat-img,
.chat-img {
    display: block;
    max-width: 100%;
    max-height: 520px;
    border-radius: 12px;
    border: 1px solid var(--border);
    margin: 8px 0 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
    cursor: zoom-in;
}
.msg__body h1, .msg__body h2, .msg__body h3, .msg__body h4 {
    margin: 1em 0 0.4em;
    line-height: 1.25;
    color: var(--text);
    font-weight: 600;
}
.msg__body h1 { font-size: 1.35em; }
.msg__body h2 { font-size: 1.2em; }
.msg__body h3 { font-size: 1.08em; }
.msg__body h4 { font-size: 1em; }
.msg__body ul, .msg__body ol { margin: 0 0 0.85em; padding-left: 1.5em; }
.msg__body li { margin: 0.2em 0; }
.msg__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.msg__body blockquote {
    margin: 0.6em 0;
    padding: 8px 14px;
    border-left: 3px solid var(--brew);
    background: var(--brew-soft);
    border-radius: 0 8px 8px 0;
    color: var(--text-muted);
}
.msg__body code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 1px 6px;
    background: var(--bg-elev);
    border-radius: 4px;
    color: var(--text);
}
.msg__body pre.code {
    margin: 0.5em 0 1em;
    padding: 14px 16px;
    background: var(--bg-elev);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    overflow-x: auto;
    box-shadow: var(--shadow-sm);
}
.msg__body pre.code code {
    background: transparent;
    padding: 0;
    font-size: 13px;
}
.code-lang {
    font-size: 11px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    font-family: var(--font-mono);
}

.msg--error {
    align-self: stretch;
    background: rgba(248, 113, 113, 0.08);
    color: var(--danger);
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: 12px;
    padding: 12px 16px;
    white-space: pre-wrap;
}
/* Neutral notice — for expected end-of-turn states (deny / interrupt /
   empty stream). Reads as "FYI, here's what happened" instead of
   "something broke". */
.msg--notice {
    align-self: stretch;
    background: var(--bg-elev);
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px;
    white-space: pre-wrap;
}

.msg__images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.msg__images img {
    max-width: 240px;
    max-height: 200px;
    border-radius: 8px;
    border: 1px solid var(--border);
}
.msg__files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg__file {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--bg-elev);
    border: 1px solid var(--border-soft);
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-muted);
}

/* ===== Thinking indicator =========================================== */
/* Wrapper keeps the pill + the escalating "why is it slow" hint together
   so they share alignment and animate in/out as one unit. */
.thinking-wrap {
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: auto;
    margin-right: auto;
    animation: msg-in 0.22s ease-out;
}
.thinking {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    background: var(--brew-soft);
    border: 1px solid rgba(244, 123, 48, 0.22);
    border-radius: 999px;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    box-shadow: 0 2px 12px var(--brew-glow);
    width: auto;
}
/* Three pulsing dots — the universal "I'm working" indicator. Sized
   to read at every distance, brand orange, staggered cubic. */
.thinking-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.thinking-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brew);
    opacity: 0.3;
    animation: dot-pulse 1.2s ease-in-out infinite;
}
.thinking-dots .dot:nth-child(2) { animation-delay: 0.18s; }
.thinking-dots .dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes dot-pulse {
    0%, 70%, 100% { opacity: 0.3; transform: scale(0.85); }
    35%           { opacity: 1;   transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
    .thinking-dots .dot { animation-duration: 2.4s; }
}
.thinking-hint {
    max-width: 460px;
    padding: 2px 14px 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
    animation: hint-fade 0.3s ease-out;
}
@keyframes hint-fade {
    from { opacity: 0; transform: translateY(-2px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Thinking pill loader — same BrandBrewAI mark, sized for inline use. */
.smoke,
.brand-loader.smoke {
    width: 32px;
    height: 32px;
    color: var(--brew);
    flex: 0 0 32px;
    overflow: visible;
}

/* ===== Tool cards =================================================== */
.tool {
    align-self: stretch;
    width: 100%;
    background: var(--bg-elev);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 0;
    font-family: var(--font);
    font-size: 13px;
    overflow: hidden;
}
.tool summary {
    cursor: pointer;
    list-style: none;
    color: var(--text);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}
.tool summary::-webkit-details-marker { display: none; }
.tool summary::before {
    content: "›";
    color: var(--text-faint);
    font-size: 16px;
    width: 14px;
    transition: transform 0.15s;
    flex: 0 0 14px;
    line-height: 1;
}
.tool[open] summary::before { transform: rotate(90deg); }
.tool__icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-family: var(--font-mono);
    color: #fff;
    flex: 0 0 22px;
    background: var(--accent);
}
.tool--read .tool__icon { background: #3b82f6; }
.tool--write .tool__icon { background: #10b981; }
.tool--edit .tool__icon { background: #f59e0b; }
.tool--bash .tool__icon { background: #8b5cf6; }
.tool--grep .tool__icon,
.tool--glob .tool__icon { background: #06b6d4; }
.tool--web .tool__icon { background: #ec4899; }
.tool__label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.tool__status {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    font-size: 11px;
    font-weight: 700;
    background: var(--border);
    color: var(--text-faint);
}
.tool[data-status="ok"] .tool__status { background: var(--success); color: #fff; }
.tool[data-status="error"] .tool__status { background: var(--danger); color: #fff; }
.tool--error summary .tool__label { color: var(--danger); }
.tool__output {
    margin: 0;
    max-height: 360px;
    overflow: auto;
    padding: 12px 14px;
    background: var(--bg);
    border-top: 1px solid var(--border-soft);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
}
.tool__open {
    display: inline-block;
    margin: 0 14px 12px;
    background: transparent;
    color: var(--brew);
    border: 1px solid var(--brew);
    border-radius: 8px;
    padding: 6px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, filter 0.15s;
}
.tool__open:hover { background: var(--brew-soft); }
/* Download is the primary action for Office files — give it a solid
   brew-orange fill so it's obvious the file is ready to grab. */
.tool__open--download {
    background: var(--brew);
    color: #fff;
    border-color: var(--brew);
    box-shadow: 0 4px 14px var(--brew-glow);
}
.tool__open--download:hover {
    background: var(--brew);
    filter: brightness(1.08);
}

/* Static brand mark — used for sidebar logo + assistant role icon.
   Ensures no animation leaks onto static instances of the SVG. */
.brand-brew:not(.brand-loader) path,
.brand-brew:not(.brand-loader) ellipse { animation: none !important; }

/* ===== Permission prompts ========================================== */
.msg--permission {
    align-self: stretch;
    width: 100%;
    background: linear-gradient(135deg, var(--accent-soft), var(--brew-soft));
    border: 1px solid var(--accent);
    color: var(--text);
    padding: 14px 16px;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}

/* Once Allow/Deny is clicked, collapse the prompt into a compact one-liner
   so the chat doesn't end up with a wall of identical-looking cards. */
.msg--permission-resolved {
    background: var(--bg-elev);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 6px 14px;
    box-shadow: none;
    width: auto;
    align-self: flex-start;
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.msg--permission-resolved.is-allow { color: var(--success); border-color: rgba(52, 211, 153, 0.3); }
.msg--permission-resolved.is-deny { color: var(--danger); border-color: rgba(248, 113, 113, 0.3); }
.msg__actions { margin-top: 10px; display: flex; gap: 8px; }
.msg__actions button {
    background: var(--accent);
    color: white;
    border: 0;
    border-radius: 8px;
    padding: 6px 16px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    transition: filter 0.15s;
}
.msg__actions button:hover { filter: brightness(1.1); }
.msg__actions button.secondary {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.msg__actions button:disabled { opacity: 0.5; cursor: not-allowed; }

/* =====================================================================
   Composer
   ===================================================================== */
.composer {
    padding: 0 24px 22px;
    background: linear-gradient(to bottom, transparent, var(--bg) 30%);
}
.composer__card {
    max-width: 760px;
    margin: 0 auto;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 10px 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
    position: relative;
}
/* ---- Slash command palette ----------------------------------------- */
.slash-palette {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 6px);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    padding: 6px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 50;
}
.slash-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text);
}
.slash-item:hover,
.slash-item.is-active { background: var(--brew-soft); }
.slash-item__cmd {
    font-family: var(--font-mono, ui-monospace, monospace);
    color: var(--brew);
    font-weight: 600;
    flex: 0 0 auto;
    min-width: 80px;
}
.slash-item__desc {
    color: var(--text-muted);
    font-size: 13px;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slash-item__hint {
    color: var(--text-muted);
    font-size: 11px;
    flex: 0 0 auto;
}
.slash-empty { padding: 14px; color: var(--text-muted); font-size: 13px; text-align: center; }
.composer__card:focus-within {
    border-color: var(--brew);
    box-shadow: 0 0 0 4px var(--brew-soft);
}
.composer__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 4px 8px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 6px;
}
.composer__input {
    width: 100%;
    background: transparent;
    color: var(--text);
    border: 0;
    padding: 8px 6px;
    font: inherit;
    font-size: 15px;
    line-height: 1.5;
    resize: none;
    max-height: 240px;
    outline: none;
}
.composer__input::placeholder { color: var(--text-faint); }
.composer__input:disabled { opacity: 0.6; cursor: not-allowed; }

.composer__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 2px 2px;
}
.composer__spacer { flex: 1 1 auto; }
.composer__icon {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.composer__icon:hover:not(:disabled) {
    color: var(--text);
    background: var(--bg-elev-2);
    border-color: var(--border);
}
.composer__icon:disabled { opacity: 0.4; cursor: not-allowed; }
.composer__icon svg { width: 18px; height: 18px; }

/* Voice input — recording: red, pulsing. transcribing: dimmed, breathing. */
.composer__icon--recording {
    color: var(--danger, #e85a5a);
    border-color: var(--danger, #e85a5a);
    animation: mic-pulse 1.2s ease-in-out infinite;
}
.composer__icon--recording:hover:not(:disabled) {
    background: rgba(232, 90, 90, 0.1);
}
.composer__icon--transcribing {
    color: var(--text-muted, #888);
    animation: mic-breathe 1.4s ease-in-out infinite;
}
@keyframes mic-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}
@keyframes mic-breathe {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

/* Hands-free voice mode — active: accent color, gentle pulse. */
.composer__icon--active {
    color: var(--accent, #f47b30);
    border-color: var(--accent, #f47b30);
    background: rgba(244, 123, 48, 0.1);
    animation: mic-pulse 1.6s ease-in-out infinite;
}
/* Voice / language picker — compact, sits inline in the composer bar. */
.composer__voice {
    max-width: 160px;
    height: 30px;
    margin: 0 2px;
    padding: 0 6px;
    font-size: 12px;
    color: var(--text);
    background: var(--bg-elev-2, #1c1c1c);
    border: 1px solid var(--border, #333);
    border-radius: 8px;
    cursor: pointer;
}
.composer__voice:focus { outline: none; border-color: var(--accent, #f47b30); }

/* Spoken reply — subtle, clickable pill (auto-plays once; click to replay). */
.chat-audio-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 12px;
    padding: 5px 12px;
    font-size: 12px;
    color: var(--accent, #f47b30);
    background: rgba(244, 123, 48, 0.10);
    border: 1px solid rgba(244, 123, 48, 0.35);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s;
}
.chat-audio-pill:hover { background: rgba(244, 123, 48, 0.18); }

.composer__stop {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
    border-radius: 10px;
    padding: 6px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.composer__stop:hover { background: rgba(248, 113, 113, 0.1); }
.composer__stop svg { width: 14px; height: 14px; }

.composer__send {
    background: var(--brew);
    color: #fff;
    border: 0;
    border-radius: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: filter 0.15s, transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 14px var(--brew-glow);
}
.composer__send:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.composer__send:active:not(:disabled) { transform: translateY(0); }
.composer__send:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.composer__send svg { width: 18px; height: 18px; }

/* Attachment thumbnails inside the composer attachments strip. */
.attachment {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg);
}
.attachment img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attachment .remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    padding: 0;
}
.attachment .remove:hover { background: rgba(0, 0, 0, 0.9); }
.attachment--file {
    width: auto;
    height: 32px;
    min-width: 120px;
    max-width: 220px;
    padding: 0 6px 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    background: var(--bg);
    color: var(--text);
}
.attachment--file .attachment__icon { font-size: 14px; flex: 0 0 auto; }
.attachment--file .attachment__label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
}
.attachment--file .remove {
    position: static;
    width: 18px;
    height: 18px;
    line-height: 18px;
    background: transparent;
    color: var(--text-muted);
}
.attachment--file .remove:hover { color: var(--danger); background: transparent; }

/* =====================================================================
   Preview pane (artifacts)
   ===================================================================== */
.preview {
    width: 480px;
    flex: 0 0 480px;
    min-width: 320px;
    max-width: 70vw;
    height: 100vh;
    background: var(--bg-elev-2);
    border-left: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    transition: flex-basis 0.18s ease, width 0.18s ease;
}
.preview__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-soft);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
}
.preview__title {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}
.preview__actions { display: flex; gap: 4px; }
.preview__btn {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 9px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
}
.preview__btn:hover { color: var(--text); border-color: var(--brew); }
.preview__body { flex: 1 1 auto; overflow: hidden; background: #fff; }
.preview__frame { width: 100%; height: 100%; border: 0; display: block; }
@media (prefers-color-scheme: dark) { .preview__body { background: #ffffff; } }

/* =====================================================================
   Drop overlay
   ===================================================================== */
.drop-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 11, 14, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: drop-fade 0.18s ease-out;
}
@keyframes drop-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.drop-overlay__card {
    padding: 40px 56px;
    border: 2px dashed var(--brew);
    border-radius: 24px;
    background: rgba(21, 23, 28, 0.85);
    color: #fff;
    text-align: center;
    box-shadow: var(--shadow-lg);
}
.drop-overlay__icon {
    font-size: 56px;
    line-height: 1;
    color: var(--brew);
    margin-bottom: 12px;
    animation: drop-bounce 1.2s ease-in-out infinite;
}
@keyframes drop-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}
.drop-overlay__title { font-size: 22px; font-weight: 600; margin-bottom: 6px; }
.drop-overlay__sub { font-size: 13px; opacity: 0.75; }

/* =====================================================================
   Legacy popup — kept hidden, sidebar replaces it
   ===================================================================== */
.history { display: none; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 980px) {
    .sidebar { display: none; }
    body.sidebar-show .sidebar {
        display: flex;
        position: fixed;
        top: 0; left: 0; bottom: 0;
        z-index: 50;
        box-shadow: var(--shadow-lg);
    }
    .topbar__menu { display: inline-flex; }
}
@media (max-width: 900px) {
    .preview { width: 100%; flex: 0 0 50vh; height: 50vh; border-left: 0; border-top: 1px solid var(--border-soft); }
    body { flex-direction: column; }
    body:has(.preview:not([hidden])) .main { height: 50vh; }
}

/* =====================================================================
   Modal (Extensions browser)
   ===================================================================== */
.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    animation: drop-fade 0.16s ease-out;
}
.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 11, 14, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}
.modal__card {
    position: relative;
    width: min(900px, 100%);
    max-height: 88vh;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modal-pop 0.18s ease-out;
}
@keyframes modal-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid var(--border-soft);
}
.modal__title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}
.modal__subtitle {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}
.modal__close {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 8px;
    transition: background 0.12s, color 0.12s;
}
.modal__close:hover { color: var(--text); background: var(--bg-elev-2); }
.modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px 24px 24px;
}

/* ---- Mermaid diagrams (auto-rendered from ```mermaid blocks) ----- */
.diagram {
    margin: 0.5em 0 1em;
    background: var(--bg-elev);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    overflow: hidden;
}
.diagram--pending { padding: 24px; text-align: center; }
.diagram__loading { color: var(--text-muted); font-size: 13px; font-style: italic; }
.diagram__card {
    background: #ffffff;
    padding: 18px;
    overflow-x: auto;
    display: flex;
    justify-content: center;
}
.diagram__card svg {
    max-width: 100%;
    height: auto;
    display: block;
}
.diagram__bar {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid var(--border-soft);
    background: var(--bg-elev);
    flex-wrap: wrap;
}
.diagram__btn {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 10px;
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
}
.diagram__btn:hover { color: var(--text); border-color: var(--brew); }

.diagram__theme {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px 3px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 11.5px;
    color: var(--text-muted);
}
.diagram__select {
    background: transparent;
    color: var(--text);
    border: 0;
    font: inherit;
    font-size: 11.5px;
    outline: none;
    cursor: pointer;
    padding: 1px 4px;
    text-transform: capitalize;
}
.diagram__select option { background: var(--bg-elev); color: var(--text); }

/* Animated flow on diagram edges — toggle on with `.diagram--animated`.
   Mermaid versions vary wildly in the SVG class names they emit for
   edges (`.edgePath`, `.flowchart-link`, `.messageLine0`, `.transition`,
   `.relation`, etc.), so cast a wide net and use !important to beat
   any inline stroke-dasharray Mermaid wrote into the path itself. */
.diagram--animated .diagram__card .edgePath path,
.diagram--animated .diagram__card .edgePath .path,
.diagram--animated .diagram__card path.flowchart-link,
.diagram--animated .diagram__card path[class*="flowchart-link"],
.diagram--animated .diagram__card g.edge path,
.diagram--animated .diagram__card line.messageLine0,
.diagram--animated .diagram__card line.messageLine1,
.diagram--animated .diagram__card path.transition,
.diagram--animated .diagram__card path.relation,
.diagram--animated .diagram__card path.relationLine,
.diagram--animated .diagram__card .edge-thickness-normal,
.diagram--animated .diagram__card .edge-thickness-thick {
    stroke-dasharray: 8 5 !important;
    animation: diagram-flow 1.2s linear infinite !important;
}
@keyframes diagram-flow {
    to { stroke-dashoffset: -13; }
}
@media (prefers-reduced-motion: reduce) {
    .diagram--animated .diagram__card * { animation-duration: 4s !important; }
}

/* Diagram fullscreen mode — uses the native Fullscreen API. While
   fullscreen, the white card fills the screen and the SVG centers
   itself with room to breathe. */
.diagram__card:fullscreen {
    background: #ffffff;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.diagram__card:fullscreen svg {
    max-width: 92vw;
    max-height: 88vh;
    height: auto;
    width: auto;
}
.diagram__source {
    margin: 0;
    padding: 12px 14px;
    background: var(--bg);
    border-top: 1px solid var(--border-soft);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text);
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-x: auto;
}
.diagram--error { background: rgba(248, 113, 113, 0.06); border-color: rgba(248, 113, 113, 0.3); }
.diagram__error {
    padding: 12px 14px;
    color: var(--danger);
    font-size: 13px;
    font-family: var(--font-mono);
}

/* ---- Files-changed card (auto-rendered after each turn) ----------- */
.files-card {
    align-self: stretch;
    width: 100%;
    background: linear-gradient(135deg, var(--brew-soft), var(--bg-elev));
    border: 1px solid rgba(244, 123, 48, 0.28);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 4px 18px rgba(244, 123, 48, 0.12);
    animation: msg-in 0.22s ease-out;
}
.files-card__head { margin-bottom: 8px; }
.files-card__title {
    font-size: 13px;
    color: var(--text);
    font-weight: 600;
}
.files-card__title code {
    background: var(--bg);
    border: 1px solid var(--border-soft);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--text);
}
.files-card__list { display: flex; flex-direction: column; gap: 6px; }
.files-card__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-elev);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
}
.files-card__meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.files-card__name {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.files-card__tag {
    font-size: 11px;
    color: var(--text-faint);
    font-family: var(--font-mono);
}
.files-card__actions { display: flex; gap: 6px; flex: 0 0 auto; }
.files-card__btn {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 5px 12px;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.files-card__btn:hover { color: var(--text); border-color: var(--brew); }
.files-card__btn--primary {
    background: var(--brew);
    color: #fff;
    border-color: var(--brew);
}
.files-card__btn--primary:hover {
    background: var(--brew);
    color: #fff;
    filter: brightness(1.08);
}

/* ---- Extension cards ---------------------------------------------- */
.ext-group { margin-bottom: 26px; }
.ext-group:last-child { margin-bottom: 0; }
.ext-group__title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
    margin: 0 0 12px;
}
.ext-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
/* When the cards live in a wider container (modal/main area), allow
   a multi-column layout. In the sidebar they stay single-column. */
.modal__body .ext-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.ext-card {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.15s, transform 0.15s;
}
.ext-card:hover { border-color: var(--border); transform: translateY(-1px); }
.ext-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.ext-card__icon { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.ext-card__title {
    flex: 1 1 auto;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}
.ext-card__status {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.ext-card__status--installed {
    background: rgba(52, 211, 153, 0.14);
    color: var(--success);
    border: 1px solid rgba(52, 211, 153, 0.3);
}
.ext-card__status--missing {
    background: var(--bg);
    color: var(--text-faint);
    border: 1px solid var(--border);
}
.ext-card__summary {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.5;
    flex: 1 1 auto;
}
.ext-card__action {
    margin-top: 4px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--brew);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.15s;
}
.ext-card__action:hover { filter: brightness(1.08); }
.ext-card__action--ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.ext-card__action--ghost:hover { color: var(--text); border-color: var(--accent); }
.ext-card__action:disabled { opacity: 0.5; cursor: not-allowed; }
.ext-card__hint {
    margin: 0;
    font-size: 11px;
    color: var(--text-faint);
    font-family: var(--font-mono);
}
.ext-loading {
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

/* ---- Live workspace tree (Files panel) --------------------------- */
.ws-tree { list-style: none; margin: 0; padding: 4px 6px 10px; }
.ws-tree__children { list-style: none; margin: 0; padding: 0; }
.ws-tree__row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 4px 8px;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    font: inherit;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ws-tree__row:hover { background: var(--bg-elev); }
.ws-tree__row svg { flex: 0 0 14px; width: 14px; height: 14px; color: var(--text-muted); }
/* Base SVG points right (▸). Expanded folder rotates it down (▾);
   collapsed leaves it pointing right. */
.ws-tree__row--folder svg.ws-tree__chev { transition: transform 0.15s; transform: rotate(90deg); }
.ws-tree__row--folder.is-collapsed svg.ws-tree__chev { transform: rotate(0deg); }
.ws-tree__row--file:hover svg { color: var(--brew); }
.ws-tree__name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.ws-tree__size {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.ws-tree__row.is-touched {
    background: var(--brew-soft);
    animation: ws-touched 2.6s ease-out;
}
.ws-tree__empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: 13px; }
@keyframes ws-touched {
    0%   { background: var(--brew); color: #fff; }
    25%  { background: var(--brew-soft); }
    100% { background: transparent; }
}

/* ---- Modal header actions (extra buttons next to close) ---------- */
.modal__head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.modal__cta {
    background: var(--brew);
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 7px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s;
}
.modal__cta:hover { filter: brightness(1.08); }
.modal__cta--ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.modal__cta--ghost:hover { color: var(--text); border-color: var(--accent); }

/* ---- Workflow cards & list ----------------------------------------
   Cards are vertical so they fit cleanly in the narrow sidebar panel
   (~288 px). Icon + title on row 1, description, meta line, then a
   right-aligned actions row at the bottom. */
.wf-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wf-card {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    transition: border-color 0.15s, transform 0.15s;
}
.wf-card:hover { border-color: var(--border); transform: translateY(-1px); }
.wf-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.wf-card__icon { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.wf-card__title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}
.wf-card__cat {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 1px 7px;
    border: 1px solid var(--border);
    border-radius: 4px;
}
.wf-card__desc {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.45;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.wf-card__meta {
    font-size: 11px;
    color: var(--text-faint);
    font-family: var(--font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wf-card__actions {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 2px;
}
.wf-card__action {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 8px;
    padding: 5px 12px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s, filter 0.15s;
}
.wf-card__action:hover { color: var(--text); border-color: var(--accent); }
.wf-card__action--run {
    background: var(--brew);
    color: #fff;
    border-color: var(--brew);
    font-weight: 600;
    flex: 1 1 auto;       /* run is the primary; let it take width */
    text-align: center;
}
.wf-card__action--run:hover { filter: brightness(1.08); border-color: var(--brew); color: #fff; }
/* Edit / Delete reduce to compact icon-buttons so they don't crowd Run. */
.wf-card__action--icon {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex: 0 0 30px;
}
.wf-card__action--danger:hover { color: var(--danger); border-color: var(--danger); }

/* ---- Workflow editor / run form ----------------------------------- */
.wf-form { display: flex; flex-direction: column; gap: 14px; }
.wf-form__row { display: flex; flex-direction: column; gap: 4px; }
.wf-form__row label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}
.wf-form__row input,
.wf-form__row textarea {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    padding: 9px 12px;
    font: inherit;
    font-size: 14px;
    outline: none;
}
.wf-form__row input:focus,
.wf-form__row textarea:focus { border-color: var(--accent); }
.wf-form__row textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.wf-form__row .wf-form__hint {
    font-size: 11px;
    color: var(--text-faint);
}
.wf-form__inputs-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    margin-top: 6px;
}
.wf-form__input-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    align-items: center;
}
.wf-form__input-row input { font-size: 13px; padding: 7px 10px; }
.wf-form__remove {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 14px;
}
.wf-form__remove:hover { color: var(--danger); border-color: var(--danger); }
.wf-form__add {
    background: transparent;
    color: var(--accent);
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 7px 12px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    align-self: flex-start;
}
.wf-form__add:hover { border-color: var(--accent); }
.wf-form__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--border-soft);
    padding-top: 14px;
}

/* ─── Mode toggle: Agentic vs Auto-route (intelligence layer) ─── */
.mode-toggle {
    display: inline-flex;
    background: var(--bg-soft, rgba(255,255,255,0.04));
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 8px;
    padding: 2px;
    margin-right: 8px;
    gap: 0;
}
.mode-toggle__btn {
    background: transparent;
    color: var(--text-muted, rgba(255,255,255,0.55));
    border: none;
    padding: 5px 12px;
    border-radius: 6px;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms, color 120ms;
}
.mode-toggle__btn:hover {
    color: var(--text, rgba(255,255,255,0.9));
}
.mode-toggle__btn--active {
    background: var(--accent, #ff9a3c);
    color: #0c0c10;
}
.mode-toggle__btn--active:hover {
    color: #0c0c10;
}
.msg__route-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255,154,60,0.18);
    color: var(--accent, #ff9a3c);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    vertical-align: middle;
    text-transform: uppercase;
}

.msg__feedback {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    opacity: 0.45;
    transition: opacity 0.15s ease;
}
.msg--assistant:hover .msg__feedback,
.msg__feedback:focus-within {
    opacity: 1;
}
.msg__feedback-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 2px 8px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.2;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.msg__feedback-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}
.msg__feedback-btn.is-active {
    background: rgba(255, 154, 60, 0.18);
    border-color: var(--accent, #ff9a3c);
}

/* ---------------------------------------------------------------------------
 * Connectors panel — sidebar card list.
 *
 * Visual goal: dense, scannable rows that look like installed packages but
 * with a clear on/off affordance. Core packs render with a locked-on toggle
 * so the user can see they exist without being able to break them.
 * ------------------------------------------------------------------------ */

.connector-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    margin: 0 12px 8px;
}
.connector-card[data-status="disabled"] {
    opacity: 0.65;
}
.connector-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.connector-card__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.connector-card__icon {
    font-size: 20px;
    line-height: 1;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--bg-elev);
}
.connector-card__title-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.connector-card__title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.connector-card__sub {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 1px;
}
.connector-card__desc {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.4;
}
.connector-card__meta {
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 0.2px;
}

/* Toggle — pill switch. `.is-on` slides the thumb right + colours the track. */
.connector-card__toggle {
    flex: 0 0 auto;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.connector-card__toggle:disabled {
    cursor: not-allowed;
}
.connector-card__toggle-track {
    width: 32px;
    height: 18px;
    border-radius: 999px;
    background: var(--border);
    position: relative;
    transition: background 0.15s ease-in-out;
}
.connector-card__toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease-in-out;
}
.connector-card__toggle.is-on .connector-card__toggle-track {
    background: var(--brew, #d97706);
}
.connector-card__toggle.is-on .connector-card__toggle-thumb {
    transform: translateX(14px);
}
.connector-card__toggle.is-locked .connector-card__toggle-track {
    background: var(--brew-soft, rgba(217, 119, 6, 0.35));
}