Extn-AIChatPanel.less

/*
 * GNU AGPL-3.0 License
 *
 * Copyright (c) 2021 - present core.ai . All rights reserved.
 *
 * This program is free software: you can redistribute it and/or modify it
 * under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
 * for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program. If not, see https://opensource.org/licenses/AGPL-3.0.
 *
 */

/* AI Chat Panel — sidebar chat UI for Claude Code integration */

@import "Extn-AIImages.less";

// AI panel typography contract — every font-size below MUST use one of these
// (or a relative unit for headings). Centralising the scale here keeps the
// panel coherent across cards: tool indicators, diff cards, confirm dialogs,
// the proposed plan, etc. all read as one product instead of independently
// styled fragments. Body is 14px (one tick larger than Phoenix's 13px sidebar
// default) so prose breathes more — closer to what users get from Lovable
// /ChatGPT/Claude desktop. Secondary and meta stay at the smaller tiers.
@ai-text-body:      @menu-item-font-size;         // 14px — message content, tool labels, prose
@ai-text-secondary: @sidebar-small-font-size;     // 12px — in-card buttons, mono code, file paths
@ai-text-meta:      @sidebar-xs-font-size;        // 11px — stats, status, permission/context info
@ai-line-prose:     1.6;                          // multi-line body text — generous reading rhythm

// Dialog scale. The AI tiers above are sized for a ~300px sidebar column;
// a modal is not that, and Phoenix's own dialogs render body text at 14px.
// Reusing the sidebar tiers in a dialog made labels 12px and notes 11px —
// noticeably smaller than every other dialog in the app.
@ai-dialog-text:    @menu-item-font-size;         // 14px — matches a stock dialog body
@ai-dialog-note:    13px;                         // one tick down, still comfortably readable
@ai-line-compact:   1.4;                          // single-line UI elements

// Shared by the chat and CLI question composers, without sharing their event-target classes.
.ai-composer-wrap() {
    display: flex;
    align-items: flex-end;
    background-color: @bc-ai-input-bg;
    border: 1px solid @bc-ai-input-border;
    border-radius: 8px;
    transition: border-color 0.15s ease;
    overflow: hidden;

    &:focus-within {
        background-color: @bc-ai-input-bg-focused;
        border-color: @bc-ai-input-border-focus;
    }

    &.disabled { opacity: 0.5; }
}

.ai-composer-textarea() {
    flex: 1;
    min-width: 0;
    background: transparent !important;
    border: none !important;
    color: @project-panel-text-1;
    font-size: @ai-text-body;
    font-family: inherit;
    padding: 10px 0 10px 12px;
    margin: 0;
    resize: none;
    min-height: 24px;
    max-height: 120px;
    line-height: @ai-line-compact;
    outline: none !important;
    box-shadow: none !important;

    &:disabled { cursor: not-allowed; }
}

.ai-composer-send() {
    background: none;
    border: none;
    padding: 1px 6px;
    color: @project-panel-text-2;
    width: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: stretch;
    border-radius: 0 7px 7px 0;
    opacity: 0.5;
    transition: opacity 0.15s ease, color 0.15s ease;

    &:hover { opacity: 1; color: @project-panel-text-1; }
    &:disabled { opacity: 0.2; cursor: not-allowed; }
    i { font-size: @ai-text-body; }
}

// Warning-tone chrome (e.g. the CLI-mode "project switched" banner). Must
// stay fully opaque — it overlays live terminal output, so any see-through
// background would make its text unreadable against arbitrary content
// underneath. Rather than a flat saturated alert-box color (which reads as
// a foreign popup bolted onto the panel), @ai-warning-bg is the panel's own
// dark surface (@bc-ai-sidebar-bg, #252525) warmed toward amber — same
// elevation family, so it still reads as *this panel's* chrome. The amber
// accent (border stripe + icon + emphasized text) carries the "pay
// attention" cue instead of the fill color. The action button intentionally
// uses the panel's own blue accent, not amber — keeping "notice" and
// "actionable" visually distinct, same split the rest of the panel uses.
@ai-warning-bg:     #332a1f;
@ai-warning-accent: #e6a23c;
@ai-warning-text:   @project-panel-text-1;

.ai-tab-container {
    display: flex;
    flex-direction: column;
    -webkit-box-flex: 1;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.ai-chat-panel {
    position: relative; // anchors .ai-scroll-to-bottom-btn
    display: flex;
    flex-direction: column;
    -webkit-box-flex: 1;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background-color: @bc-ai-sidebar-bg;
    color: @project-panel-text-1;
    font-size: @ai-text-body;
    container-type: inline-size;

    // Match Layers' dark sidebar scrollbars, including Windows light-theme hover.
    #sidebar & {
        .ai-chat-messages,
        .ai-chat-start,
        .ai-session-history-dropdown {
            &::-webkit-scrollbar {
                width: 9px;
                height: 9px;
                background-color: transparent;
            }

            &::-webkit-scrollbar-thumb {
                border-radius: 999px;
                background-color: rgba(255, 255, 255, 0.12);
                background-clip: padding-box;
                border: 2px solid transparent;
            }
        }
    }
}

/* ── Header ─────────────────────────────────────────────────────────── */
.ai-chat-header {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
    align-items: center;
    gap: 6px;
    position: relative;
    padding: 10px 10px 9px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;

    .ai-chat-title-group {
        display: flex;
        align-items: center;
        flex: 0 1 auto;
        min-width: 0;
        margin: 0 auto;
    }

    .ai-chat-title-icon {
        display: inline-flex;
        align-items: center;
        flex: none;
        margin-right: 5px;
        opacity: 0.6;
        color: @project-panel-text-2;

        svg {
            width: 16px;
            height: 16px;
        }
    }

    .ai-chat-title,
    .ai-chat-history-title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font: inherit;
        color: inherit;
    }

    .ai-chat-history-title {
        display: none;
    }

    .ai-chat-header-actions {
        display: flex;
        align-items: center;
        flex: none;
        justify-self: end;
        gap: 2px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease;
    }

    /* Keep both control groups in the layout even while faded out, so
       revealing them cannot cover the title or move it under the pointer. */
    .ai-chat-header-left {
        display: flex;
        align-items: center;
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
        justify-self: start;
        gap: 4px;
    }

    /* The way home: in the CLI modes, and in the chat once it has started.
       Hover-revealed like .ai-chat-header-actions, and shown while it has
       keyboard focus. */
    .ai-back-btn {
        display: none;
        flex: none;
        align-items: center;
        gap: 5px;
        height: 26px;
        margin: 0;
        padding: 0 8px 0 6px;
        background: transparent;
        color: @project-panel-text-2;
        font-family: inherit;
        font-size: @menu-item-font-size;
        line-height: 1;
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease;

        i {
            font-size: 11px;
        }

        &:focus-visible {
            outline: none;
            border-color: fade(@ai-start-accent, 60%);
            opacity: 1;
            pointer-events: auto;
            transition: opacity 0.15s ease;
        }
    }

    /* Model switcher — hover-revealed like .ai-chat-header-actions
       (Claude Code CLI doesn't persistently show the model either). */
    .ai-model-select {
        display: flex;
        align-items: center;
        min-width: 0;
        gap: 5px;
        height: 26px;
        padding: 0 6px;
        color: @project-panel-text-2;
        font-size: @label-font-size;
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease;

        .ai-model-select-label {
            max-width: 120px; // model names are short; raw ids may ellipsize
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        i {
            flex: none;
            font-size: 9px;
            opacity: 0.7;
        }
    }

    .ai-history-btn,
    .ai-settings-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        color: @project-panel-text-2;
        font-size: @menu-item-font-size;
        width: 26px;
        height: 26px;
        cursor: pointer;
    }

    .ai-history-btn.active {
        color: @ai-start-accent;
        background-color: fade(@ai-start-accent, 15%);
        border-color: fade(@ai-start-accent, 35%);
    }

    .ai-new-session-btn,
    .ai-stop-cli-btn {
        display: flex;
        align-items: center;
        gap: 4px;
        color: @project-panel-text-2;
        font-size: @menu-item-font-size;
        height: 26px;
        padding: 0 8px;
        cursor: pointer;
    }

    // Connection to Phoenix of the CLI on screen; shown by the panel only in the CLI modes,
    // and only when the CLI was launched with one. The button opens its details and power control.
    .ai-cli-connector-badge {
        display: none;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 4px;
        background: transparent;
        font-size: @menu-item-font-size;
        color: @project-panel-text-2;
        cursor: pointer;

        &:hover,
        &[aria-expanded="true"] {
            background: rgba(255, 255, 255, 0.09);
        }

        &:focus-visible {
            outline: 2px solid @ai-start-accent;
            outline-offset: -2px;
        }

        &.ai-cli-connector-visible {
            display: flex;
        }
        &[data-state="connecting"] {
            opacity: 0.6;
        }
        &[data-state="connected"] {
            color: #66bb6a;
        }
        &[data-state="paused"] {
            color: #e0a84c;
        }
        &[data-state="ended"] {
            color: #e57373;
        }
    }

    // Stop ends a running CLI, so it exists only in the CLI modes (below).
    .ai-stop-cli-btn {
        display: none;

        // At 11px the square's ink centers on the label's cap height, level
        // with New's plus; smaller, it sinks onto the baseline.
        i {
            font-size: 11px;
        }
    }
}

/* ── CLI mode ───────────────────────────────────────────────────────── */
/* History and the model switcher are chat-UI-only concerns — the embedded
   CLI terminal has its own session/model handling. New + Settings stay. */
.ai-chat-panel.ai-mode-cli {
    .ai-chat-header-left {
        flex: none;
    }

    .ai-model-select,
    .ai-history-btn {
        display: none;
    }

    .ai-back-btn,
    .ai-stop-cli-btn {
        display: flex;
    }
}

.ai-chat-panel.ai-chat-started:not(.ai-mode-cli):not(.ai-home) .ai-back-btn,
.ai-chat-panel.ai-history-open .ai-back-btn {
    display: flex;
}

.ai-chat-panel.ai-history-open .ai-chat-title-group {
    pointer-events: none;

    .ai-chat-title,
    .ai-chat-title-icon,
    .ai-chat-title-chevron {
        display: none;
    }

    .ai-chat-history-title {
        display: inline;
    }
}

.ai-chat-panel.ai-history-open .ai-model-select {
    display: none;
}

/* Home: the start screen laid over a chat that has started. The chat keeps
   running underneath, its messages and input out of sight until it is
   picked again. */
.ai-chat-panel.ai-home {
    .ai-model-select {
        display: none;
    }

    // The chat shows and hides these inline as it streams, so only
    // !important keeps them out of home.
    .ai-chat-input-area,
    .ai-chat-status,
    .ai-chat-quota-bar,
    .ai-scroll-to-bottom-btn {
        display: none !important;
    }
}

.ai-chat-body-chat,
.ai-chat-body-cli {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.ai-chat-body-cli {
    display: none;
    position: relative;

    // Fixed dark terminal palette — deliberately NOT wrapped in a `.dark &`
    // guard. TerminalInstance reads --terminal-* off its own container
    // (see TerminalInstance.js#_getThemeFromCSS); without these declared
    // here it falls back to the bottom Terminal panel's singleton
    // .terminal-panel-container (present in the DOM even when that panel
    // is never opened), which IS light/dark-theme-aware — flipping the
    // embedded CLI terminal to a white background in light theme even
    // though this sidebar is always-dark. Values match
    // ".dark .terminal-panel-container" in styles/Extn-Terminal.less.
    --terminal-background:          #1e1e1e;
    --terminal-foreground:          #cccccc;
    --terminal-cursor:              #ffffff;
    --terminal-selection:           rgba(255, 255, 255, 0.2);
    --terminal-scrollbar-thumb:      rgba(255, 255, 255, 0.24);
    --terminal-ansi-black:          #000000;
    --terminal-ansi-red:            #cd3131;
    --terminal-ansi-green:          #0dbc79;
    --terminal-ansi-yellow:         #e5e510;
    --terminal-ansi-blue:           #2472c8;
    --terminal-ansi-magenta:        #bc3fbc;
    --terminal-ansi-cyan:           #11a8cd;
    --terminal-ansi-white:          #e5e5e5;
    --terminal-ansi-bright-black:   #666666;
    --terminal-ansi-bright-red:     #f14c4c;
    --terminal-ansi-bright-green:   #23d18b;
    --terminal-ansi-bright-yellow:  #f5f543;
    --terminal-ansi-bright-blue:    #3b8eea;
    --terminal-ansi-bright-magenta: #d670d6;
    --terminal-ansi-bright-cyan:    #29b8db;
    --terminal-ansi-bright-white:   #ffffff;
}

.ai-chat-panel.ai-mode-cli {
    .ai-chat-body-chat {
        display: none;
    }

    .ai-chat-body-cli {
        display: flex;
    }
}

/* One slot per embedded CLI, both living inside the single
   .ai-chat-body-cli so they share its --terminal-* palette by inheritance
   (TerminalInstance reads those off its own container). Only the active
   mode's slot is shown; the other keeps its PTY running off-screen.

   `position: relative` is load-bearing, not decoration: it anchors this
   session's .terminal-instance-container (absolute; inset:0) and its
   .ai-cli-stale-banner (absolute; bottom:0). Without it both sessions'
   terminals and banners would position against the shared body and stack
   on top of each other. */
.ai-cli-session {
    display: none;
    position: relative;
    flex: 1;
    min-height: 0;

    &.active {
        display: flex;
        flex-direction: column;
    }
}

/* Cover the waiting terminal with its question; the CLI toolbar remains visible above it. */
.ai-cli-rich-question {
    position: absolute;
    inset: 0;
    z-index: 7;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: @bc-ai-sidebar-bg;
    color: @project-panel-text-1;

    &:empty {
        display: none;
    }
}

.ai-rich-frame-panel {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    min-width: 0;
}
.ai-rich-frame-header {
    display: flex;
    flex: none;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
    h2 { margin: 0; font: inherit; font-weight: 600; color: inherit; overflow-wrap: anywhere; }
}
.ai-rich-frame-heading { flex: 1; min-width: 0; }
.ai-rich-frame-context { font-size: @ai-text-secondary; opacity: 0.65; margin-bottom: 4px; overflow-wrap: anywhere; }
.ai-rich-frame-close {
    flex: none;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    padding: 4px 6px;
    opacity: 0.7;
    &:hover:not(:disabled), &:focus-visible { opacity: 1; }
    &:disabled { cursor: default; opacity: 0.3; }
}
.ai-rich-frame-close { font-size: 22px; line-height: 1; }
.ai-rich-frame-footer {
    flex: none;
    padding: 10px 12px;
    border-top: 1px solid rgba(128, 128, 128, 0.25);
}
.ai-rich-frame-reply {
    .ai-composer-wrap();
    padding: 0;
    textarea { .ai-composer-textarea(); }
}
.ai-rich-frame-send { .ai-composer-send(); }
.ai-rich-frame-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    .ai-rich-frame-source { flex: 1; }
    .ai-rich-source-actions { justify-content: flex-start; }
    .ai-rich-source-status:empty { display: none; }
    .ai-rich-see-code { margin-left: 0; }
    [hidden] { display: none; }
}

.ai-rich-summary {
    margin-bottom: 10px;
    line-height: @ai-line-prose;
}

/* Local transfer feedback: stays inside the terminal and lets typing/clicks pass through. */
.hud-overlay.ai-cli-transfer-hud {
    position: absolute;
    top: auto;
    bottom: 72px;
    transform: translateX(-50%);
    z-index: 6;
    width: max-content;
    max-width: calc(100% - 32px);
    height: auto;
    box-sizing: border-box;
    flex-direction: row;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid fade(@ai-start-accent, 48%);
    border-radius: 10px;
    background: rgba(35, 45, 63, 0.97);
    color: #e5efff;
    box-shadow: 0 0 18px fade(@ai-start-accent, 16%), 0 6px 24px rgba(0, 0, 0, 0.3);
    animation: ai-cli-transfer-hud 3s ease both;

    i {
        flex-shrink: 0;
        font-size: 18px;
        margin: 0;
        color: @ai-start-accent;
    }

    .hud-label {
        min-width: 0;
        font-size: @ai-text-body;
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: normal;
        white-space: normal;
        overflow-wrap: break-word;
    }
}

@keyframes ai-cli-transfer-hud {
    0%, 100% { opacity: 0; }
    8%, 85% { opacity: 1; }
    15% { box-shadow: 0 0 24px fade(@ai-start-accent, 30%), 0 6px 24px rgba(0, 0, 0, 0.3); }
    50%, 85% { box-shadow: 0 0 18px fade(@ai-start-accent, 16%), 0 6px 24px rgba(0, 0, 0, 0.3); }
}

@media (prefers-reduced-motion: reduce) {
    .hud-overlay.ai-cli-transfer-hud { animation: none; }
}

/* "Project switched" banner over the embedded CLI terminal — a dark,
   warm-tinted card in the panel's own elevation family (see @ai-warning-bg)
   with a left amber stripe + icon carrying the "pay attention" cue, rather
   than a flat saturated alert-box color that would read as a foreign popup
   bolted onto the panel. Body text is @ai-text-body (not the smaller
   -secondary tier) — this is a message the user needs to actually read,
   not incidental chrome. Docked to the BOTTOM, not the top: that's where
   the user's eyes/cursor already are while typing into the terminal (the
   same spot the chat input box occupies in chat mode), so it can't be
   missed the way a top banner easily could be while scrolled/typing. */
.ai-cli-stale-banner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px 8px 9px;
    background: @ai-warning-bg;
    border-left: 3px solid @ai-warning-accent;
    box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.35);
    font-size: @ai-text-body;
    color: @ai-warning-text;

    .ai-cli-stale-banner-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .ai-cli-stale-banner-icon {
        flex-shrink: 0;
        color: @ai-warning-accent;
    }

    .ai-cli-stale-banner-text {
        flex: 1;
        min-width: 0;
        white-space: normal; // .sidebar.panel sets nowrap; this needs to wrap
        overflow-wrap: break-word;

        // Explicit color: a global `b, strong { color: #333 }` base rule
        // (from brackets_patterns_override.less) directly targets <b>, and
        // a directly-matching rule always wins over inherited color no
        // matter how much higher the ancestor's specificity is — inheriting
        // @ai-warning-text from .ai-cli-stale-banner-text here would lose.
        b {
            color: @ai-warning-accent;
            font-weight: 600;
        }
    }

    // Two explicit, equally-weighted choices rather than one CTA + a small
    // close icon — every option here resolves the staleness one way or
    // the other, so there's nothing left over to "dismiss". Right-aligned
    // and ordered secondary-then-primary, same convention as
    // .modal-footer's Cancel/OK (see widgets/Dialogs.js showConfirmDialog)
    // — the primary action sits rightmost. flex-wrap lets the pair drop
    // to its own line on a narrow sidebar; each button's own max-width +
    // ellipsis (below) is what actually bounds an unpredictably long
    // project name, not wrapping.
    .ai-cli-stale-banner-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
    }

    // Project names are user-controlled and unbounded in length — cap
    // both buttons the same width and ellipsis rather than letting one
    // balloon the whole banner or wrap into a multi-line button.
    .ai-cli-stale-banner-btn,
    .ai-cli-stale-banner-btn-secondary {
        max-width: 180px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    // Renders as Phoenix's standard .btn.btn-primary (color/hover/active
    // come from the shared rule above, keyed off this container class —
    // same mechanism the placeholder screens' CTAs use) rather than a
    // one-off custom button style. The accent stripe/icon already carries
    // "notice", so the button itself stays "actionable" — the panel's
    // usual primary-action blue, not amber.
    .ai-cli-stale-banner-btn {
        padding: 4px 10px !important;
        font-size: @ai-text-secondary !important;
    }

    // Secondary choice — same transparent/outlined language as
    // .ai-placeholder-cta-secondary elsewhere in this panel, sized down
    // to match the primary button here instead of that CTA's full-width
    // proportions.
    .ai-cli-stale-banner-btn-secondary {
        padding: 4px 10px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 4px;
        background: transparent;
        color: @ai-warning-text;
        font-family: inherit;
        font-size: @ai-text-secondary;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.15s ease, border-color 0.15s ease;

        &:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.32);
        }
    }
}

/* Keep header actions visible while History or connection details are open. */
.ai-tab-container:hover .ai-chat-header-actions,
.ai-chat-header:focus-within .ai-chat-header-actions,
.ai-chat-panel.ai-history-open .ai-chat-header-actions,
.ai-chat-header.ai-cli-connection-open .ai-chat-header-actions {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.15s ease;
}

/* A body-mounted popover can extend below the header without clipping the terminal. */
.ai-cli-connection-popover {
    position: fixed;
    z-index: 1000;
    box-sizing: border-box;
    max-width: calc(100vw - 16px);
    padding: 16px;
    overflow: auto;
    background: #303030;
    color: @project-panel-text-1;
    border: 1px solid #515151;
    border-radius: 8px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.44);
    font-size: @ai-text-body;
    line-height: @ai-line-compact;
    outline: none;

    .ai-cli-connection-heading { display: flex; align-items: center; gap: 10px; }
    #ai-cli-connection-title { font-weight: 600; }
    .ai-cli-connection-symbol {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 32px;
        height: 32px;
        border-radius: 6px;
        background: rgba(67, 133, 72, 0.14);
        color: #8bd090;
        font-size: 16px;
    }
    .ai-cli-connection-client,
    .ai-cli-connection-description,
    .ai-cli-connection-detail,
    .ai-cli-connection-note {
        color: #b6b6b6;
        font-size: @ai-text-secondary;
        line-height: 1.45;
        margin-top: 3px;
    }
    .ai-cli-connection-status {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #a0d9a4;
        margin: 15px 0 14px;
        font-size: @ai-text-secondary;
    }
    .ai-cli-connection-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
    .ai-cli-connection-capability {
        display: flex;
        gap: 10px;
        margin: 12px 0;
        > i { flex: none; width: 18px; padding-top: 3px; color: #b6c0c5; text-align: center; }
    }
    .ai-cli-connection-footer { border-top: 1px solid #4a4a4a; margin: 16px -16px -16px; padding: 13px 16px 14px; }
    .ai-cli-connection-power {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        border: 1px solid #666;
        background: #393939;
        color: #eee;
        border-radius: 5px;
        padding: 7px 10px;
        font-family: inherit;
        font-size: @ai-text-body;
        line-height: @ai-line-compact;
        cursor: pointer;
        &:hover:not(:disabled) { background: #454545; border-color: #888; }
        &:disabled { opacity: 0.5; cursor: default; }
        &:focus-visible { outline: 2px solid @ai-start-accent; outline-offset: 2px; }
    }
    .ai-cli-connection-note { text-align: center; margin-top: 8px; }
    .ai-cli-connection-error { color: #efaaaa; font-size: @ai-text-secondary; margin-top: 8px; }
    &:not([data-state="connected"]) .ai-cli-connection-status { color: #b6b6b6; }
    &[data-state="paused"] .ai-cli-connection-status { color: #e0a84c; }
    &.ai-cli-connection-off {
        .ai-cli-connection-symbol { background: rgba(255, 255, 255, 0.04); color: #aaa; }
        .ai-cli-connection-capability { opacity: 0.45; }
    }
}

.ai-tab-container:hover .ai-model-select,
.ai-tab-container:hover .ai-back-btn,
.ai-chat-header:focus-within .ai-model-select,
.ai-chat-header:focus-within .ai-back-btn,
.ai-tab-container .ai-model-select.dropdown-open {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.15s ease;
}

/* Compact both sides together so the title stays at the panel's centre. */
@container (max-width: 560px) {
    .ai-chat-header {
        .ai-model-select {
            padding-left: 0;

            .ai-model-select-label {
                max-width: 72px;
            }
        }
    }

    .ai-chat-header .ai-back-btn {
        padding: 0 6px;

        .ai-back-text {
            display: none;
        }
    }
}

/* When the header runs short, its whole action group keeps only icons, so
   Stop and New match History and Settings; their tooltips still name them. */
@container (max-width: 560px) {
    .ai-chat-header-actions {
        .ai-new-session-btn,
        .ai-stop-cli-btn {
            justify-content: center;
            width: 26px;
            padding: 0;
        }

        .ai-header-btn-label {
            display: none;
        }
    }
}

/* Below this width a centred title and both control groups cannot share
   one row. Keep the title centred above them instead of covering it. */
@container (max-width: 400px) {
    .ai-chat-header {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 4px;

        .ai-chat-title-group {
            grid-column-start: 1;
            grid-column-end: -1;
            grid-row: 1;
            max-width: 100%;
        }

        .ai-chat-header-left,
        .ai-chat-header-actions {
            grid-row: 2;
        }

        .ai-chat-header-left {
            grid-column: 1;
        }

        .ai-chat-header-actions {
            grid-column: 2;
        }
    }
}

/* ── Model selector dropdown ───────────────────────────────────────── */
/* Rendered by the standard DropdownButton widget (native Phoenix dropdown
   look) — only the two-line item layout needs styling here. */
.dropdownbutton-popup.ai-model-dropdown-popup {
    min-width: 220px;
    max-width: 320px;
    max-height: 420px; // global 160px cap scrolls 5 two-line items

    li a {
        white-space: normal;
        overflow-wrap: break-word;
    }

    .ai-model-item-name {
        display: block;
    }

    .ai-model-item-desc {
        display: block;
        font-size: @ai-text-meta;
        opacity: 0.7;
        padding-left: 17px;
        line-height: @ai-line-compact;
    }
}

/* ── Permission-mode dropdown ──────────────────────────────────────── */
/* Same DropdownButton widget as the model selector above, with an added
   colored dot per item matching .ai-permission-dot's mode-* colors. */
.dropdownbutton-popup.ai-permission-dropdown-popup {
    min-width: 220px;
    max-width: 320px;
    // Override the shared .dropdownbutton-popup.dropdown-menu 160px cap
    // (brackets_patterns_override.less) — 4 two-line items run ~200px,
    // past that cap, which forced a scrollbar for a list that otherwise
    // fits easily. Cap against the viewport instead so it only scrolls
    // if it would genuinely run past the screen.
    max-height: 90vh;

    li a {
        white-space: normal;
        overflow-wrap: break-word;
    }

    .ai-permission-item-name {
        display: flex;
        align-items: center;
        gap: 6px;

        .ai-dropdown-check {
            flex: 0 0 11px;
        }
    }

    .ai-permission-item-desc {
        display: block;
        font-size: @ai-text-meta;
        opacity: 0.7;
        padding-left: 25px;
        line-height: @ai-line-compact;
    }
}

/* Auth-error action block: button with its /login hint stacked below —
   tells the user the one thing to do next at a glance. */
.ai-auth-error-actions {
    flex-direction: column;
    align-items: center;
    gap: 0;