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 */

// 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

// 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;
    // Positioning context for the onboarding prompt overlay, which is
    // detached from its template position and re-parented here so it
    // covers the Files/AI tab strip as well as the panel body.
    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;

    /* Onboarding-iframe theme variables — single source of truth for
       what gets forwarded to the iframe's `?configCSS=` param.
       AIChatPanel.js _buildOnboardingConfigCSS reads each of these via
       getComputedStyle and serialises them into a :root{...} block.
       To retheme the iframe, edit only this list. The names match the
       iframe's published contract (see ai-panel-onboarding README). */
    --bg-panel:              @bc-ai-sidebar-bg;
    --bg-card:               rgba(255, 255, 255, 0.04);
    --bg-card-hover:         rgba(255, 255, 255, 0.07);
    --bg-input:              rgba(255, 255, 255, 0.04);
    --bg-input-focus:        rgba(255, 255, 255, 0.06);
    --text-primary:          @project-panel-text-1;
    --text-secondary:        @project-panel-text-2;
    --text-muted:            rgba(168, 176, 180, 0.6);
    --border-subtle:         rgba(255, 255, 255, 0.12);
    --border-active:         rgba(107, 158, 255, 0.4);
    --border-focus:          rgba(107, 158, 255, 0.5);
    --accent-primary:        #6b9eff;
    --accent-primary-soft:   rgba(107, 158, 255, 0.12);
    --accent-primary-border: rgba(107, 158, 255, 0.3);
    --font-body:             14px;
    --font-secondary:        12px;
    --font-meta:             11px;
    --radius-md:             6px;
    --radius-lg:             8px;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.ai-chat-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 10px 10px 9px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;

    .ai-chat-title-group {
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: 2px 6px;
        border-radius: 6px;
        transition: background 0.15s ease;

        &:hover,
        &.dropdown-open {
            background: rgba(255, 255, 255, 0.06);
        }

        .ai-chat-title-chevron {
            margin-left: 5px;
            font-size: 9px;
            opacity: 0.5;
        }
    }

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

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

    .ai-chat-title {
        font-weight: 400;
        font-size: @label-font-size;
        color: @project-panel-text-2;
        line-height: 19px;
    }

    .ai-chat-header-actions {
        position: absolute;
        right: 10px;
        display: flex;
        align-items: center;
        gap: 2px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease;
    }

    /* Model switcher — hover-revealed like .ai-chat-header-actions
       (Claude Code CLI doesn't persistently show the model either). */
    .ai-model-select {
        position: absolute;
        left: 10px;
        display: flex;
        align-items: center;
        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 {
            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-new-session-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;
    }
}

/* ── 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-model-select,
    .ai-history-btn {
        display: none;
    }
}

.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-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;
    }
}

/* "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);
        }
    }
}

/* Show header actions on tab container hover */
.ai-tab-container:hover .ai-chat-header-actions {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.15s ease;
}

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

/* Left-align title when sidebar is narrow to free space for action buttons.
   The model switcher joins the flow so it can't overlap the title. */
@container (max-width: 380px) {
    .ai-chat-header {
        justify-content: flex-start;

        .ai-model-select {
            position: static;
            margin-right: 8px;
            padding-left: 0;
        }
    }
}

/* ── 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-permission-item-desc {
        display: block;
        font-size: @ai-text-meta;
        opacity: 0.7;
        padding-left: 17px;
        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;
}

.ai-auth-error-hint {
    margin-top: 6px;
    font-size: @ai-text-meta;
    color: @project-panel-text-2;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
}

/* One-time inline notice after switching model mid-conversation.
   Sentence-length status prose: secondary tier (12px), reading line-height,
   left-aligned — meta 11px/centered is for one-line stats, not sentences. */
.ai-model-switch-notice {
    padding: 8px 12px;
    margin: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    font-size: @ai-text-secondary;
    line-height: @ai-line-prose;
    color: @project-panel-text-2;
    white-space: normal;
    overflow-wrap: break-word;
}

/* ── Session history dropdown ──────────────────────────────────────── */
/* When history is open, hide chat content and show the dropdown instead.
   The dropdown is a sibling of .ai-chat-body-chat (the wrapper CLI mode
   toggles), and both are flex:1 — so the wrapper has to go out of the
   layout entirely, not just have its children hidden, or it keeps
   claiming half the panel height and the list stops halfway down. */
.ai-chat-panel.ai-history-open {
    > .ai-chat-body-chat {
        display: none !important;
    }
}

.ai-session-history-dropdown {
    display: none;
    flex-direction: column;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.15);
    flex-shrink: 1;
    min-height: 0;

    &.open {
        display: flex;
        flex: 1;
    }
}

.ai-history-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-left: 2px solid transparent;

    &:hover {
        background-color: rgba(255, 255, 255, 0.04);
    }

    &.ai-history-active {
        border-left-color: rgba(76, 175, 80, 0.5);
        background-color: rgba(76, 175, 80, 0.04);
    }

    .ai-history-item-info {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }

    .ai-history-item-title {
        font-size: @ai-text-body;
        color: @project-panel-text-1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ai-history-item-meta {
        display: flex;
        align-items: baseline;
        gap: 5px;
        min-width: 0;
    }

    .ai-history-item-time {
        font-size: @ai-text-meta;
        color: @project-panel-text-2;
        opacity: 0.6;
        flex-shrink: 0;
    }

    /* Claude's title for the session, revealed on hover: always-on it made
       a 50-entry list too dense to scan. It keeps its space in the row while
       hidden, so showing it shifts nothing. Empty when it would only repeat
       the headline, and the separator hangs off the text so nothing is
       drawn for those rows. */
    .ai-history-item-subtext {
        font-size: @ai-text-meta;
        color: @project-panel-text-2;
        // No transition: a fade here reads as lag when you are running the
        // pointer down the list looking for a session.
        opacity: 0;
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &:not(:empty)::before {
            content: "·";
            margin-right: 5px;
        }
    }

    &:hover .ai-history-item-subtext {
        opacity: 0.75;
    }

    .ai-history-item-delete {
        background: none;
        border: none;
        color: @project-panel-text-2;
        font-size: @ai-text-secondary;
        padding: 2px 4px;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.15s ease, color 0.15s ease;
        flex-shrink: 0;

        &:hover {
            opacity: 1;
            color: #e88;
        }
    }

    &:hover .ai-history-item-delete {
        opacity: 0.6;
    }
}

.ai-history-empty {
    padding: 16px 10px;
    text-align: center;
    font-size: @ai-text-secondary;
    color: @project-panel-text-2;
    opacity: 0.6;
}

.ai-history-clear-all {
    display: block;
    padding: 6px 10px;
    text-align: center;
    font-size: @ai-text-meta;
    color: @project-panel-text-2;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.15s ease;
    border-top: 1px solid rgba(255, 255, 255, 0.04);

    &:hover {
        opacity: 1;
    }
}

/* ── Session resumed indicator ─────────────────────────────────────── */
.ai-session-resumed-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: @ai-text-meta;
    color: @project-panel-text-2;
    opacity: 0.6;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);

    i {
        font-size: 10px;
    }
}

/* ── Onboarding iframe (guided AI starter) ──────────────────────────── */
/* The wrap sits where .ai-chat-messages would. When visible it claims
   the same flex slot — when hidden the chat takes that slot back. */
.ai-onboarding-wrap {
    flex: 1;
    min-height: 0;
    min-width: 0;
    position: relative;
    background-color: @bc-ai-sidebar-bg;

    .ai-onboarding-frame {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
    }
}

/* Prompt confirm overlay — top-level rule (NOT nested under
   .ai-onboarding-wrap) because at runtime _initOnboarding detaches
   the overlay element and re-parents it to .ai-tab-container so it
   covers the Files/AI tab strip in addition to the panel body.
   Neutral dark-panel chrome — no blue accent. Title strip + full-
   bleed textarea + bottom action row with Cancel and an icon-only
   send button that mirrors .ai-send-btn's transparent quiet style. */
.ai-onboarding-prompt-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: ai-onboarding-overlay-fade 0.15s ease-out;

    .ai-onboarding-prompt-card {
        width: 100%;
        max-width: 440px;
        border: 1px solid @bc-ai-input-border;
        border-radius: 8px;
        background: @bc-ai-sidebar-bg;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
        animation: ai-onboarding-card-pop 0.18s ease-out;
    }

    .ai-onboarding-prompt-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 8px 8px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .ai-onboarding-prompt-title {
        flex: 1;
        min-width: 0;
        font-size: @ai-text-body;
        font-weight: 600;
        color: @project-panel-text-1;
        line-height: 1.3;
    }

    .ai-onboarding-prompt-close {
        background: none;
        border: 0;
        color: @project-panel-text-2;
        width: 26px;
        height: 26px;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.55;
        flex-shrink: 0;
        transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;

        i { font-size: 0.95em; }

        &:hover {
            opacity: 1;
            color: @project-panel-text-1;
            background: rgba(255, 255, 255, 0.05);
        }
    }

    .ai-onboarding-prompt-text {
        // display: block + width: 100% + box-sizing makes the textarea
        // span the card's full inner width regardless of the rows attr
        // or the browser's textarea default width.
        display: block;
        width: 100%;
        box-sizing: border-box;
        background: @bc-ai-input-bg;
        border: 0;
        border-radius: 0;
        color: @project-panel-text-1;
        font-size: @ai-text-body;
        line-height: @ai-line-prose;
        padding: 12px 14px;
        resize: vertical;
        min-height: 110px;
        max-height: 260px;
        outline: none;
        box-shadow: none;

        // Phoenix's global textarea focus rule paints a border + shadow
        // that shifts the dialog by ~2px and reads as a flicker. Force
        // the no-chrome focus state so only the bg darkening signals
        // focus.
        &:focus,
        &:focus-visible {
            background: @bc-ai-input-bg-focused;
            border: 0;
            outline: none;
            box-shadow: none;
        }
    }

    .ai-onboarding-prompt-images {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        background: @bc-ai-input-bg;

        .ai-image-thumb {
            position: relative;

            img {
                display: block;
                max-width: 64px;
                max-height: 48px;
                object-fit: cover;
                border-radius: 4px;
                border: 1px solid rgba(255, 255, 255, 0.12);
                cursor: pointer;
            }

            .ai-image-remove {
                position: absolute;
                top: -6px;
                right: -6px;
                width: 18px;
                height: 18px;
                border-radius: 50%;
                background: rgba(0, 0, 0, 0.7);
                border: 1px solid rgba(255, 255, 255, 0.3);
                color: #fff;
                font-size: 11px;
                line-height: 1;
                padding: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
            }
        }
    }

    .ai-onboarding-prompt-actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 4px;
        padding: 6px 8px 6px 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .ai-onboarding-prompt-cancel {
        background: transparent;
        border: 0;
        color: @project-panel-text-2;
        font-size: @ai-text-secondary;
        line-height: @ai-line-compact;
        padding: 6px 10px;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.15s ease, color 0.15s ease;

        &:hover {
            background: rgba(255, 255, 255, 0.05);
            color: @project-panel-text-1;
        }
    }

    .ai-onboarding-prompt-send {
        background: none;
        border: 0;
        color: @project-panel-text-2;
        width: 32px;
        height: 28px;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.6;
        transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;

        i { font-size: 0.95em; }

        &:hover {
            opacity: 1;
            color: @project-panel-text-1;
            background: rgba(255, 255, 255, 0.05);
        }
    }
}

/* ── Message list ───────────────────────────────────────────────────── */
.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 14px;
    min-height: 0;
    min-width: 0;
    -webkit-user-select: text;
    user-select: text;
    cursor: default;
    background-color: @bc-ai-sidebar-bg;
}

// Floating "scroll to bottom" control over the lower right of the message
// list; shown by AIChatPanel._updateScrollToBottomBtn while the list is
// scrolled away from its end (top is set from the list's bottom edge).
.ai-scroll-to-bottom-btn {
    position: absolute;
    right: 18px;
    z-index: 5;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: #3a3a3a;
    color: @project-panel-text-1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: @ai-text-secondary;
    opacity: 0.9;

    &:hover {
        opacity: 1;
        background-color: #454545;
    }
}

/* ── Individual messages ────────────────────────────────────────────── */
.ai-msg {
    margin-bottom: 16px;
    max-width: 100%;
    // Skip layout / paint for messages that are far off-screen. For a large
    // chat history (>1k messages, >10k DOM nodes), showing the sidebar after
    // it was `display: none` otherwise costs ~750ms of synchronous reflow.
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;

    // A message appended at the bottom is laid out as the 300px placeholder
    // for one frame before it renders, which makes a bottom-pinned list
    // jolt on every new card or bubble. The newest messages are on screen
    // anyway, so render them normally; once older, they carry a remembered
    // size and switch to `auto` without a size change.
    &:nth-last-child(-n + 5) {
        content-visibility: visible;
    }

    .ai-msg-label {
        font-size: @ai-text-meta;
        color: @project-panel-text-2;
        margin-bottom: 3px;
        font-weight: 600;
        opacity: 0.6;
    }

    .ai-msg-content {
        font-size: @ai-text-body;
        line-height: @ai-line-prose;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: anywhere;