in a flex `.app-shell` (sidebar + main). This full-height lock predates that wrapper and only bounded +

; the un-bounded `.app-shell` in between stretched to the sidebar's tall flowing menu (the sidebar scrolls with the page everywhere else), dragging the composer below the clipped viewport — the input "disappeared". Make the shell the flex-growing row that fills the remaining column height, and let the sidebar scroll internally on THIS page only. */ body:has(.bandeja-shell) .app-shell { flex: 1; min-height: 0; overflow: hidden; } body:has(.bandeja-shell) .app-sidebar { min-height: 0; overflow-y: auto; } main.container-fluid:has(> .bandeja-shell) { flex: 1; min-height: 0; padding: 0 !important; max-width: none; overflow: hidden; } /* Belt-and-suspenders: the page footprint is fixed by base.html's layout lock, but if any descendant misbehaves we'd rather get a tiny inner scroll than a full-page horizontal scroll on mobile. */ .bandeja-shell, .bandeja-main, .bandeja-messages { overflow-x: hidden; } /* Hide the global "predloghi-uluchshenie" floating lightbulb on BandejaGPT — it overlaps the composer / follow-up chips on mobile and is purely a noise-button for this page. */ body:has(.bandeja-shell) [x-data*="improveWidget"] { display: none !important; } /* Reusable padel-racket icon — used in the brand mark and as the assistant avatar. Inherits `currentColor` for tinting. */ .bandeja-racket { display: inline-block; vertical-align: -0.18em; flex-shrink: 0; } .bandeja-shell { --bandeja-line: var(--bp-line); --bandeja-paper: var(--bp-paper); --bandeja-paper-deep: var(--bp-paper-2); --bandeja-ink: var(--bp-ink); --bandeja-ink-soft: var(--bp-ink-soft); --bandeja-muted: var(--bp-muted); --bandeja-blue: var(--bp-blue); --bandeja-blue-ink: var(--bp-blue-ink); --bandeja-blue-tint: var(--bp-blue-tint); --bandeja-green: var(--bp-green); --bandeja-green-tint: var(--bp-green-tint); --bandeja-stamp: var(--bp-stamp-red); position: relative; display: grid; grid-template-columns: 1fr; height: 100%; min-height: 0; background: var(--bandeja-paper); color: var(--bandeja-ink); font-family: var(--ff-body); } .bandeja-shell::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient( 115deg, transparent 0, transparent 38px, rgba(23, 24, 26, 0.025) 38px, rgba(23, 24, 26, 0.025) 39px ); pointer-events: none; z-index: 0; } .bandeja-shell > * { position: relative; z-index: 1; } /* Модалка таблицы результата — не часть слоя чата с decorативным фоном: без этого правило выше топит её под подложку (`position: relative` вместо `fixed` у Bootstrap), и модалка рисуется под своим же backdrop. */ #aiTableModal { position: fixed; z-index: var(--bs-modal-zindex, 1055); } /* Desktop layout: persistent sidebar + main */ @media (min-width: 901px) { .bandeja-shell { grid-template-columns: 280px 1fr; } } /* ============================================================ SIDEBAR (drawer on mobile) ============================================================ */ .bandeja-sidebar { background: var(--bandeja-paper-deep); border-right: 1px solid var(--bandeja-line); padding: 1rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.85rem; overflow-y: auto; } /* On mobile the sidebar slides in from the left as a drawer. */ @media (max-width: 900px) { .bandeja-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: min(82vw, 320px); z-index: 1500; transform: translateX(-105%); transition: transform 0.22s ease; box-shadow: 6px 0 20px -10px rgba(23, 24, 26, 0.35); padding-top: calc(env(safe-area-inset-top) + 1rem); } .bandeja-sidebar.is-open { transform: translateX(0); } } .bandeja-scrim { display: none; } @media (max-width: 900px) { .bandeja-scrim { display: block; position: fixed; inset: 0; background: rgba(23, 24, 26, 0.4); z-index: 1400; opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } .bandeja-scrim.is-open { opacity: 1; pointer-events: auto; } } .bandeja-brand { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding-bottom: 0.85rem; border-bottom: 2px solid var(--bandeja-ink); } .bandeja-brand-mark { font-family: var(--ff-display); font-weight: 900; font-size: 1.55rem; letter-spacing: -0.02em; color: var(--bandeja-ink); line-height: 1; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.5rem; } .bandeja-brand-mark em { font-style: normal; color: var(--bandeja-blue); } /* Racket inherits the ink color of the wordmark — full contrast on paper background. Dot pattern + frame stay legible regardless of theme. */ .bandeja-brand-mark .bandeja-racket { color: var(--bandeja-ink); } .bandeja-brand-tag { font-family: var(--ff-ui); font-size: 0.62rem; letter-spacing: 0.01em; color: var(--bandeja-muted); } .bandeja-sidebar-close { background: transparent; border: none; color: var(--bandeja-ink); font-size: 1.3rem; line-height: 1; padding: 0; display: none; } @media (max-width: 900px) { .bandeja-sidebar-close { display: inline-flex; } } .bandeja-new-btn { width: 100%; background: var(--bandeja-blue); color: var(--bp-sheet); border: none; padding: 0.7rem 0.85rem; border-radius: var(--bp-radius-sm); font-family: var(--ff-body); font-weight: 600; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; gap: 0.4rem; transition: transform 0.15s ease, background 0.15s ease; } .bandeja-new-btn:hover:not(:disabled) { background: var(--bandeja-blue-ink); transform: translateY(-1px); } .bandeja-new-btn:disabled { opacity: 0.55; cursor: wait; } .bandeja-section-label { font-family: var(--ff-ui); font-size: 0.66rem; letter-spacing: 0.01em; color: var(--bandeja-muted); margin: 0.25rem 0 -0.25rem; } .bandeja-conv-list { display: flex; flex-direction: column; gap: 0.2rem; } .bandeja-conv-item { display: block; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--bp-radius-sm); padding: 0.55rem 0.6rem; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; } .bandeja-conv-item:hover { background: var(--bandeja-paper); border-color: var(--bandeja-line); } .bandeja-conv-item.is-active { background: var(--bandeja-paper); border-color: var(--bandeja-ink); } .bandeja-conv-title { font-size: 0.88rem; font-weight: 600; line-height: 1.3; color: var(--bandeja-ink); /* Up to 2 lines, then ellipsis. On mobile there's no hover for the `title` attribute, so wrapping shows much more of the question than a single-line truncation. */ display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .bandeja-conv-meta { font-family: var(--ff-mono); font-size: 0.66rem; letter-spacing: 0.05em; color: var(--bandeja-muted); margin-top: 0.15rem; } /* Sidebar conversation item — owner + share flags + tokens + cost. */ .bandeja-conv-byline { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin-top: 0.3rem; font-family: var(--ff-ui); font-size: 0.66rem; letter-spacing: 0.01em; color: var(--bandeja-muted); } .bandeja-conv-author { display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0; } .bandeja-conv-author > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bandeja-conv-item.is-shared-in .bandeja-conv-author { color: var(--bandeja-blue); font-weight: 700; } .bandeja-conv-share-flags { display: inline-flex; gap: 0.25rem; color: var(--bandeja-green); flex-shrink: 0; } .bandeja-conv-share-flags .bi { font-size: 0.85rem; } .bandeja-conv-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.6rem; margin-top: 0.3rem; font-family: var(--ff-mono); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--bandeja-ink-soft); } .bandeja-conv-stat { display: inline-flex; align-items: center; gap: 0.22rem; white-space: nowrap; } .bandeja-conv-stat .bi { font-size: 0.75rem; opacity: 0.7; } .bandeja-conv-stat.is-cost { background: var(--bandeja-paper); border: 1px solid var(--bandeja-line); border-radius: 999px; padding: 0.05rem 0.45rem; color: var(--bandeja-blue-ink); font-weight: 700; } .bandeja-conv-stat.is-date { margin-left: auto; color: var(--bandeja-muted); } .bandeja-conv-item.is-shared-out { background: linear-gradient( to right, var(--bandeja-green-tint) 0, var(--bandeja-green-tint) 3px, transparent 3px ); } .bandeja-conv-item.is-shared-in { background: linear-gradient( to right, var(--bandeja-blue-tint) 0, var(--bandeja-blue-tint) 3px, transparent 3px ); } .bandeja-conv-item.is-shared-out.is-active, .bandeja-conv-item.is-shared-in.is-active { background: var(--bandeja-paper); } .bandeja-empty-side { font-size: 0.82rem; color: var(--bandeja-muted); padding: 1rem 0.25rem; font-style: italic; line-height: 1.4; } /* Account balance pill — compact, lives next to the catalog link in the topbar. Deliberately label-less (no provider name) so the chat surface doesn't advertise which router we use. */ .bandeja-balance-pill { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--ff-mono); font-size: 0.78rem; font-weight: 700; text-decoration: none; color: var(--bandeja-ink); padding: 0.3rem 0.6rem; border-radius: var(--bp-radius-sm); border: 1px solid var(--bandeja-line); background: var(--bandeja-paper-deep); transition: border-color 0.15s ease, background 0.15s ease; } .bandeja-balance-pill:hover { text-decoration: none; border-color: var(--bandeja-blue); color: var(--bandeja-ink); } .bandeja-balance-pill.is-low { background: var(--bp-warning-tint); border-color: var(--bp-warning-fill); color: var(--bp-warning-deep); } .bandeja-balance-pill .bi { font-size: 0.85rem; } /* ============================================================ MAIN PANEL ============================================================ */ .bandeja-main { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; min-width: 0; } .bandeja-topbar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.6rem 1rem; border-bottom: 1px solid var(--bandeja-line); background: var(--bandeja-paper); } @media (min-width: 901px) { .bandeja-topbar { padding: 0.7rem 1.5rem; gap: 0.75rem; } } .bandeja-burger { background: var(--bandeja-paper-deep); border: 1px solid var(--bandeja-line); border-radius: var(--bp-radius-sm); padding: 0.35rem 0.55rem; font-size: 1rem; line-height: 1; color: var(--bandeja-ink); } @media (min-width: 901px) { .bandeja-burger { display: none; } } .bandeja-topbar-title { font-family: var(--ff-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; font-size: 1.05rem; color: var(--bandeja-ink); } .bandeja-topbar-title em { font-style: normal; color: var(--bandeja-blue); } .bandeja-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.55rem; background: var(--bandeja-paper-deep); border: 1px solid var(--bandeja-line); border-radius: 999px; font-family: var(--ff-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--bandeja-ink-soft); } .bandeja-pill.is-beta { background: var(--bandeja-green-tint); color: var(--bandeja-green); border-color: transparent; font-weight: 700; } /* ============================================================ SHARE GROUP — two custom checkbox-toggles in the topbar. Sits right of the token pills, before the model picker. ============================================================ */ .bandeja-share-group { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0.45rem; background: var(--bandeja-paper-deep); border: 1px solid var(--bandeja-line); border-radius: 999px; flex-wrap: wrap; } .bandeja-share-toggle { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.65rem 0.25rem 0.45rem; border-radius: 999px; cursor: pointer; font-family: var(--ff-ui); font-size: 0.7rem; letter-spacing: 0.01em; color: var(--bandeja-ink-soft); user-select: none; transition: background 0.15s ease, color 0.15s ease; margin: 0; } .bandeja-share-toggle input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .bandeja-share-mark { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bp-sheet); border: 1.5px solid var(--bandeja-line); color: var(--bandeja-muted); font-size: 0.85rem; line-height: 1; flex-shrink: 0; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease; } .bandeja-share-toggle.is-on { color: var(--bandeja-ink); } .bandeja-share-toggle.is-on .bandeja-share-mark { background: var(--bandeja-blue); border-color: var(--bandeja-blue); color: var(--bp-sheet); } .bandeja-share-toggle:hover .bandeja-share-mark { border-color: var(--bandeja-ink); } .bandeja-share-toggle.is-busy { opacity: 0.55; cursor: wait; } .bandeja-share-toggle.is-busy .bandeja-share-mark { transform: scale(0.92); } /* Distinct accent per flag so they aren't visually identical at a glance */ .bandeja-share-toggle:nth-child(1).is-on .bandeja-share-mark { background: var(--bandeja-blue); border-color: var(--bandeja-blue); } .bandeja-share-toggle:nth-child(2).is-on .bandeja-share-mark { background: var(--bandeja-green); border-color: var(--bandeja-green); } /* Hide labels on small screens — icons + tooltips do the work */ @media (max-width: 720px) { .bandeja-share-label { display: none; } .bandeja-share-toggle { padding: 0.2rem; } } .bandeja-share-copy { background: transparent; border: 1px dashed var(--bandeja-line); color: var(--bandeja-blue); width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .bandeja-share-copy:hover { background: var(--bandeja-blue-tint); border-style: solid; border-color: var(--bandeja-blue); } .bandeja-readonly-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.7rem; background: var(--bandeja-blue-tint); border: 1px solid var(--bandeja-blue); border-radius: 999px; font-family: var(--ff-ui); font-size: 0.7rem; letter-spacing: 0.01em; color: var(--bandeja-blue-ink); font-weight: 700; } .bandeja-readonly-badge .bi { font-size: 0.85rem; } /* Toast slides in below the topbar; mono caps for the «коуч на бровке» vibe */ .bandeja-share-toast { position: absolute; top: 100%; right: 1rem; margin-top: 0.4rem; background: var(--bandeja-ink); color: var(--bandeja-paper); padding: 0.45rem 0.85rem; border-radius: var(--bp-radius-sm); font-family: var(--ff-ui); font-size: 0.75rem; letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 0.45rem; box-shadow: var(--bp-shadow-pop); z-index: 60; } .bandeja-share-toast .bi { color: var(--bandeja-green); } .bandeja-topbar { position: relative; } .bandeja-model-picker { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; flex-wrap: wrap; } .bandeja-model-label { font-family: var(--ff-ui); font-size: 0.66rem; letter-spacing: 0.01em; color: var(--bandeja-muted); } @media (max-width: 600px) { .bandeja-model-label { display: none; } } .bandeja-model-select { font-family: var(--ff-mono); font-size: 0.78rem; background: var(--bandeja-paper-deep); border: 1px solid var(--bandeja-line); border-radius: var(--bp-radius-sm); padding: 0.3rem 0.55rem; color: var(--bandeja-ink); min-width: 0; max-width: 100%; flex: 1 1 160px; text-overflow: ellipsis; } @media (max-width: 600px) { .bandeja-model-select { max-width: 50vw; flex: 1 1 auto; } } .bandeja-model-select:focus { outline: 2px solid var(--bandeja-blue); outline-offset: 1px; border-color: var(--bandeja-blue); } .bandeja-catalog-link { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--ff-ui); font-size: 0.72rem; text-decoration: none; color: var(--bandeja-blue); padding: 0.3rem 0.55rem; border-radius: var(--bp-radius-sm); border: 1px dashed var(--bandeja-line); transition: background 0.12s ease; } .bandeja-catalog-link:hover { background: var(--bandeja-blue-tint); text-decoration: none; } /* ============================================================ MESSAGE THREAD ============================================================ */ .bandeja-messages { overflow-y: auto; padding: 1.25rem max(1rem, env(safe-area-inset-right)) 1.5rem max(1rem, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 1.4rem; min-height: 0; -webkit-overflow-scrolling: touch; } @media (min-width: 901px) { .bandeja-messages { padding-left: 3.5rem; padding-right: 3.5rem; } } .bandeja-msg-row { display: grid; grid-template-columns: 32px 1fr; gap: 0.6rem; max-width: 760px; margin: 0 auto; width: 100%; align-items: flex-start; } @media (min-width: 901px) { .bandeja-msg-row { grid-template-columns: 36px 1fr; gap: 0.75rem; } } /* Critical: grid cells default to `min-width: auto`, which lets a wide

 SQL block or table push the row past the viewport. Forcing
       min-width: 0 makes the cell shrink to its parent and lets inner
       overflow-x: auto actually clip. */
    .bandeja-msg-row > * { min-width: 0; }
    .bandeja-msg-row > * > * { min-width: 0; max-width: 100%; }
    .bandeja-msg-row.is-user .bandeja-avatar {
        background: var(--bandeja-blue);
        color: white;
    }
    .bandeja-msg-row.is-assistant .bandeja-avatar {
        background: var(--bandeja-ink);
        color: var(--bandeja-paper);
        font-family: var(--ff-display);
    }
    .bandeja-msg-row.is-tool .bandeja-avatar {
        background: var(--bandeja-paper-deep);
        color: var(--bandeja-ink);
        border: 1px dashed var(--bandeja-line);
    }
    .bandeja-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 700;
        flex-shrink: 0;
    }
    @media (min-width: 901px) {
        .bandeja-avatar { width: 36px; height: 36px; font-size: 0.95rem; }
    }

    .bandeja-msg-content {
        font-size: 0.95rem;
        line-height: 1.55;
        color: var(--bandeja-ink);
        word-break: break-word;
        overflow-wrap: anywhere;
        min-width: 0;
        max-width: 100%;
    }
    .bandeja-msg-row.is-user .bandeja-msg-content { font-weight: 600; }
    .bandeja-msg-author {
        font-family: var(--ff-ui);
        font-size: 0.66rem;
        letter-spacing: 0.01em;
        color: var(--bandeja-muted);
        margin-bottom: 0.35rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .bandeja-token-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.05rem 0.4rem;
        background: var(--bandeja-paper-deep);
        border: 1px solid var(--bandeja-line);
        border-radius: 999px;
        color: var(--bandeja-ink-soft);
        letter-spacing: 0.04em;
        font-size: 0.62rem;
        cursor: help;
    }
    .bandeja-status-strip {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.4rem 0.7rem;
        background: var(--bandeja-paper-deep);
        border: 1px solid var(--bandeja-line);
        border-radius: var(--bp-radius-sm);
        font-family: var(--ff-ui);
        font-size: 0.78rem;
        color: var(--bandeja-ink-soft);
        margin-bottom: 0.5rem;
    }
    .bandeja-status-elapsed {
        font-variant-numeric: tabular-nums;
        color: var(--bandeja-blue);
        font-weight: 700;
        padding-left: 0.3rem;
        border-left: 1px solid var(--bandeja-line);
    }

    /* Markdown blocks rendered inside assistant content */
    .bandeja-msg-content p { margin: 0 0 0.7rem; }
    .bandeja-msg-content p:last-child { margin-bottom: 0; }
    .bandeja-msg-content strong { color: var(--bandeja-blue-ink); }
    .bandeja-msg-content em { font-style: italic; color: var(--bandeja-ink-soft); }
    .bandeja-msg-content a {
        color: var(--bandeja-blue);
        text-decoration: underline;
        text-underline-offset: 2px;
    }
    .bandeja-md-code {
        background: var(--bandeja-paper-deep);
        border: 1px solid var(--bandeja-line);
        border-radius: 0.25rem;
        padding: 0.05rem 0.35rem;
        font-family: var(--ff-mono);
        font-size: 0.85em;
        color: var(--bandeja-ink);
    }
    .bandeja-md-pre {
        background: var(--bandeja-ink);
        color: var(--bp-blue-tint);
        padding: 0.7rem 0.85rem;
        border-radius: var(--bp-radius-sm);
        font-family: var(--ff-mono);
        font-size: 0.82rem;
        line-height: 1.45;
        overflow-x: auto;
        margin: 0.5rem 0;
    }
    .bandeja-md-pre code { font-family: inherit; background: none; padding: 0; border: 0; }
    .bandeja-md-ul, .bandeja-md-ol {
        margin: 0.4rem 0 0.7rem;
        padding-left: 1.4rem;
    }
    .bandeja-md-ul li, .bandeja-md-ol li { margin: 0.15rem 0; }
    .bandeja-md-heading {
        font-family: var(--ff-display);
        font-weight: 900;
        font-size: 0.95rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--bandeja-blue-ink);
        margin: 0.85rem 0 0.4rem;
        padding-bottom: 0.25rem;
        border-bottom: 1px solid var(--bandeja-line);
    }
    .bandeja-md-table {
        margin: 0.5rem 0 0.8rem;
        max-width: 100%;
        overflow-x: auto;
        border: 1px solid var(--bandeja-line);
        border-radius: var(--bp-radius-sm);
        /* `background-color`, не шорткат `background`: на телефоне этот же
           узел несёт `data-bp-scroll` (markdown.js) — кит рисует тень краёв
           через `background-image`, а шорткат сбросил бы её в `none`. */
        background-color: var(--bandeja-paper-deep);
        -webkit-overflow-scrolling: touch;
    }
    .bandeja-md-table table {
        width: 100%;
        border-collapse: collapse;
        font-family: var(--ff-mono);
        font-size: 0.8rem;
    }
    .bandeja-md-table th {
        background: var(--bp-sheet);
        text-align: left;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--bandeja-ink-soft);
        padding: 0.45rem 0.6rem;
        border-bottom: 1px solid var(--bandeja-line);
        white-space: nowrap;
    }
    .bandeja-md-table td {
        padding: 0.4rem 0.6rem;
        border-bottom: 1px solid var(--bandeja-line);
        color: var(--bandeja-ink);
        vertical-align: top;
    }
    .bandeja-md-table tr:last-child td { border-bottom: none; }
    .bandeja-md-table tr:hover td { background: rgba(255, 255, 255, 0.5); }

    /* Follow-up chips ("Спросите ещё") — clickable next-step questions */
    .bandeja-followups-block {
        margin: 1rem 0 0.25rem;
        padding-top: 0.85rem;
        border-top: 1px dashed var(--bandeja-line);
    }
    .bandeja-followups-label {
        font-family: var(--ff-ui);
        font-size: 0.66rem;
        letter-spacing: 0.01em;
        color: var(--bandeja-muted);
        margin-bottom: 0.55rem;
    }
    .bandeja-followups {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }
    .bandeja-followup-btn {
        background: var(--bp-sheet);
        border: 1px solid var(--bandeja-line);
        border-radius: var(--bp-radius-sm);
        padding: 0.55rem 0.75rem;
        text-align: left;
        font-family: var(--ff-body);
        font-size: 0.88rem;
        line-height: 1.35;
        color: var(--bandeja-ink);
        display: inline-flex;
        align-items: flex-start;
        gap: 0.55rem;
        cursor: pointer;
        transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
    }
    .bandeja-followup-btn:hover {
        border-color: var(--bandeja-blue);
        background: var(--bandeja-blue-tint);
        transform: translateY(-1px);
    }
    .bandeja-followup-btn:active { transform: translateY(0); }
    .bandeja-followup-btn .bi {
        color: var(--bandeja-blue);
        flex-shrink: 0;
        line-height: 1.5;
    }
    .bandeja-followup-btn[disabled] { opacity: 0.5; cursor: wait; }
    @media (min-width: 901px) {
        .bandeja-followups {
            flex-direction: row;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        .bandeja-followup-btn { max-width: 100%; }
    }

    /* Tool playbook card */
    .bandeja-playbook {
        margin-top: 0.4rem;
        background: var(--bandeja-paper-deep);
        border: 1px solid var(--bandeja-line);
        border-left: 3px solid var(--bandeja-green);
        border-radius: var(--bp-radius-sm);
        font-size: 0.85rem;
        min-width: 0;
        max-width: 100%;
    }
    .bandeja-playbook-body { min-width: 0; max-width: 100%; }
    .bandeja-playbook summary {
        cursor: pointer;
        list-style: none;
        padding: 0.55rem 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        user-select: none;
        flex-wrap: wrap;
    }
    .bandeja-playbook summary::-webkit-details-marker { display: none; }
    .bandeja-playbook summary::before {
        content: "▸";
        font-family: var(--ff-mono);
        color: var(--bandeja-green);
        transition: transform 0.15s ease;
        display: inline-block;
        flex-shrink: 0;
    }
    .bandeja-playbook[open] summary::before { transform: rotate(90deg); }
    .bandeja-playbook-tag {
        font-family: var(--ff-ui);
        font-size: 0.66rem;
        letter-spacing: 0.01em;
        color: var(--bandeja-green);
        font-weight: 700;
        flex-shrink: 0;
    }
    .bandeja-playbook-snippet {
        font-family: var(--ff-mono);
        font-size: 0.78rem;
        color: var(--bandeja-ink-soft);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1 1 auto;
        min-width: 0;
    }
    .bandeja-playbook-meta {
        font-family: var(--ff-mono);
        font-size: 0.7rem;
        color: var(--bandeja-muted);
        margin-left: auto;
        flex-shrink: 0;
    }
    .bandeja-playbook-body {
        padding: 0 0.75rem 0.75rem;
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
    }
    .bandeja-playbook-sql {
        margin: 0;
        background: var(--bandeja-ink);
        color: var(--bp-blue-tint);
        padding: 0.7rem 0.8rem;
        border-radius: 0.35rem;
        font-family: var(--ff-mono);
        font-size: 0.78rem;
        line-height: 1.45;
        overflow-x: auto;
        /* `pre` would force the row to grow horizontally; we want long
           SQL to wrap on small screens and only scroll-X if a single
           token (e.g. a quoted string) is too long. */
        white-space: pre-wrap;
        word-break: break-word;
        max-width: 100%;
    }
    .bandeja-playbook-table {
        overflow-x: auto;
        border: 1px solid var(--bandeja-line);
        border-radius: 0.35rem;
        background: var(--bandeja-paper);
        -webkit-overflow-scrolling: touch;
    }
    .bandeja-playbook-table table {
        margin: 0;
        font-size: 0.78rem;
        font-family: var(--ff-mono);
        width: 100%;
        border-collapse: collapse;
    }
    .bandeja-playbook-table th {
        background: var(--bandeja-paper-deep);
        color: var(--bandeja-ink-soft);
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        padding: 0.4rem 0.55rem;
        position: sticky;
        top: 0;
        border-bottom: 1px solid var(--bandeja-line);
        text-align: left;
    }
    .bandeja-playbook-table td {
        padding: 0.35rem 0.55rem;
        border-bottom: 1px solid var(--bandeja-line);
        color: var(--bandeja-ink);
        white-space: nowrap;
    }
    .bandeja-playbook-error {
        font-family: var(--ff-mono);
        color: var(--bandeja-stamp);
        font-size: 0.82rem;
        padding: 0.5rem 0.7rem;
        background: var(--bp-sheet);
        border-radius: 0.3rem;
        border: 1px solid var(--bandeja-stamp);
    }

    /* Empty hero */
    .bandeja-hero {
        max-width: 760px;
        margin: 2vh auto 0;
        text-align: center;
        padding: 1rem 0.5rem;
    }
    @media (min-width: 901px) {
        .bandeja-hero { margin-top: 4vh; padding: 2rem 1rem; }
    }
    .bandeja-hero-mark {
        font-family: var(--ff-display);
        font-weight: 900;
        font-size: clamp(2rem, 8vw, 3.6rem);
        line-height: 0.95;
        letter-spacing: -0.02em;
        text-transform: uppercase;
        color: var(--bandeja-ink);
    }
    .bandeja-hero-mark em { font-style: normal; color: var(--bandeja-blue); }
    .bandeja-hero-line {
        height: 4px;
        width: 56px;
        background: var(--bandeja-green);
        margin: 1rem auto;
        border-radius: 2px;
    }
    .bandeja-hero-tagline {
        font-family: var(--ff-ui);
        font-size: 0.74rem;
        letter-spacing: 0.01em;
        color: var(--bandeja-muted);
    }
    .bandeja-hero-sub {
        margin-top: 1.25rem;
        font-size: 0.95rem;
        line-height: 1.5;
        color: var(--bandeja-ink-soft);
    }

    .bandeja-suggestions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 0.55rem;
        max-width: 760px;
        margin: 1.5rem auto 0;
    }
    .bandeja-suggestion {
        text-align: left;
        background: var(--bp-sheet);
        border: 1px solid var(--bandeja-line);
        border-radius: var(--bp-radius-sm);
        padding: 0.75rem 0.85rem;
        font-family: var(--ff-body);
        font-size: 0.86rem;
        color: var(--bandeja-ink);
        cursor: pointer;
        transition: transform 0.15s ease, border-color 0.15s ease;
        line-height: 1.4;
    }
    .bandeja-suggestion:hover {
        border-color: var(--bandeja-blue);
        transform: translateY(-2px);
    }
    .bandeja-suggestion-label {
        font-family: var(--ff-ui);
        font-size: 0.6rem;
        letter-spacing: 0.01em;
        color: var(--bandeja-blue);
        font-weight: 700;
        display: block;
        margin-bottom: 0.3rem;
    }

    .bandeja-streaming-cursor {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--bandeja-green);
        margin-left: 4px;
        vertical-align: baseline;
        animation: bandeja-pulse 0.8s ease-in-out infinite;
    }

    /* Живой трейс рассуждения модели: приглушённый, сворачиваемый. */
    .bandeja-reasoning {
        margin: 0.35rem 0 0.5rem;
        border-left: 2px solid var(--bandeja-line, #e2e6ee);
        background: var(--bandeja-paper-2, #f6f8fb);
        border-radius: 6px;
        overflow: hidden;
    }
    .bandeja-reasoning-head {
        cursor: pointer;
        user-select: none;
        font-size: 0.78rem;
        color: #7a828f;
        padding: 0.3rem 0.6rem;
        display: flex;
        gap: 0.35rem;
        align-items: center;
    }
    .bandeja-reasoning-head:hover { color: #4a5262; }
    .bandeja-reasoning-body {
        font-size: 0.78rem;
        line-height: 1.45;
        color: #6b7280;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        max-height: 9rem;
        overflow-y: auto;
        padding: 0 0.6rem 0.5rem;
    }
    @keyframes bandeja-pulse {
        0%, 100% { opacity: 0.25; transform: scale(0.85); }
        50%      { opacity: 1;    transform: scale(1.15); }
    }

    .bandeja-error-strip {
        max-width: 760px;
        margin: 0 auto;
        background: var(--bp-sheet);
        border: 1px solid var(--bandeja-stamp);
        color: var(--bandeja-stamp);
        padding: 0.6rem 0.85rem;
        border-radius: var(--bp-radius-sm);
        font-size: 0.85rem;
    }

    /* End-of-conversation feedback. Discreet by design — no large
       headers, no modals; fits in the natural flow of the message list. */
    .bandeja-feedback {
        max-width: 760px;
        margin: 0.4rem auto 0;
        padding: 0.85rem 0;
        border-top: 1px dashed var(--bandeja-line);
    }
    .bandeja-feedback-row {
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
        align-items: flex-start;
    }
    @media (min-width: 700px) {
        .bandeja-feedback-row {
            flex-direction: row;
            align-items: center;
            gap: 0.85rem;
        }
    }
    .bandeja-feedback-q {
        font-family: var(--ff-ui);
        font-size: 0.72rem;
        letter-spacing: 0.01em;
        color: var(--bandeja-muted);
    }
    .bandeja-feedback-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .bandeja-feedback-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        background: var(--bp-sheet);
        border: 1px solid var(--bandeja-line);
        border-radius: 999px;
        padding: 0.35rem 0.75rem;
        font-family: var(--ff-body);
        font-size: 0.82rem;
        color: var(--bandeja-ink);
        cursor: pointer;
        transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
    }
    .bandeja-feedback-btn:hover:not(:disabled) {
        border-color: var(--bandeja-blue);
        background: var(--bandeja-blue-tint);
        transform: translateY(-1px);
    }
    .bandeja-feedback-btn.is-bad:hover:not(:disabled) {
        border-color: var(--bandeja-stamp);
        background: var(--bp-red-tint);
    }
    .bandeja-feedback-btn[disabled] { opacity: 0.55; cursor: wait; }
    .bandeja-feedback-btn .bi { font-size: 0.95rem; }

    .bandeja-feedback-thanks {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.85rem;
        color: var(--bandeja-ink-soft);
        font-style: italic;
    }
    .bandeja-feedback-thanks .bi {
        font-size: 1rem;
        font-style: normal;
    }
    .bandeja-feedback-thanks.is-good .bi { color: var(--bandeja-green); }
    .bandeja-feedback-thanks.is-meh .bi { color: var(--bp-warning-deep); }
    .bandeja-feedback-thanks.is-bad .bi { color: var(--bandeja-stamp); }
    .bandeja-feedback-undo {
        background: transparent;
        border: none;
        font-family: var(--ff-ui);
        font-size: 0.7rem;
        letter-spacing: 0.01em;
        color: var(--bandeja-blue);
        text-decoration: underline;
        cursor: pointer;
        padding: 0;
    }

    /* ============================================================
       COMPOSER  (sticky bottom + iOS safe area)
       ============================================================ */
    .bandeja-composer-wrap {
        padding: 0.85rem clamp(0.75rem, 3vw, 1.5rem)
                calc(env(safe-area-inset-bottom) + 2rem);
        background: linear-gradient(to bottom, transparent, var(--bandeja-paper) 28%);
    }
    @media (min-width: 901px) {
        .bandeja-composer-wrap {
            padding-bottom: calc(env(safe-area-inset-bottom) + 1.6rem);
        }
    }
    .bandeja-composer {
        max-width: 760px;
        margin: 0 auto;
        background: var(--bp-sheet);
        border: 1px solid var(--bandeja-line);
        border-radius: var(--bp-radius-lg);
        padding: 0.5rem 0.55rem 0.45rem 0.95rem;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.4rem;
        align-items: end;
        box-shadow: var(--bp-shadow-pop);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .bandeja-composer:focus-within {
        border-color: var(--bandeja-ink);
        box-shadow: 0 8px 30px -16px rgba(4, 65, 132, 0.3);
    }
    .bandeja-composer textarea {
        border: none;
        outline: none;
        resize: none;
        background: transparent;
        font-family: var(--ff-body);
        font-size: 1rem; /* iOS: 1rem prevents auto-zoom on focus */
        line-height: 1.45;
        color: var(--bandeja-ink);
        max-height: 180px;
        padding: 0.45rem 0;
    }
    .bandeja-composer textarea::placeholder { color: var(--bandeja-muted); }
    .bandeja-send {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--bandeja-blue);
        color: var(--bp-sheet);
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.05rem;
        align-self: end;
        margin-bottom: 2px;
        transition: background 0.15s ease, transform 0.15s ease;
    }
    .bandeja-send:hover:not(:disabled) {
        background: var(--bandeja-blue-ink);
        transform: translateY(-1px);
    }
    .bandeja-send:disabled {
        background: var(--bandeja-muted);
        cursor: not-allowed;
    }

    .bandeja-composer-foot {
        max-width: 760px;
        margin: 0.55rem auto 0;
        padding-bottom: 0.25rem;
        font-family: var(--ff-ui);
        font-size: 0.66rem;
        letter-spacing: 0.01em;
        color: var(--bandeja-muted);
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
    }
    .bandeja-composer-hint {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    @media (max-width: 600px) {
        .bandeja-composer-hint { display: none; }
        .bandeja-composer-foot { justify-content: flex-end; }
    }

    /* The lightbulb improve-widget button can overlap the composer on
       small screens — push it up when BandejaGPT is the active page. */
    .bandeja-shell ~ * .position-fixed[style*="bottom: 24px"] {
        bottom: calc(env(safe-area-inset-bottom) + 88px) !important;
    }

    /* ── Телефон (≤767.98px) ────────────────────────────────────────────────
       Экран-приложение: документ залочен во весь экран, единственный скроллер —
       лента сообщений. Значит всё, что стоит над ней, вычитается из рабочей
       области напрямую: топбар в три ряда и полоса выручки отняли у ленты
       352px из 844. Постраничный адаптив живёт в самой странице. */
    @media (max-width: 767.98px) {
        /* Процент плана продаж в чате бесполезен, а 32px ленте нужны.
           Подвал на этой странице прячется тем же приёмом (выше по файлу). */
        body:has(.bandeja-shell) .revenue-bar-slot {
            display: none;
            height: 0;
        }

        /* Топбар — одна строка-лента вместо трёх рядов: токены, стоимость,
           «поделиться» и бейдж «только чтение» остаются доступными свайпом,
           а не вычитаются из переписки. */
        .bandeja-topbar {
            flex-wrap: nowrap;
            overflow-x: auto;
            overscroll-behavior-x: contain;
            gap: 0.5rem;
            padding: 0.4rem 0.6rem;
        }
        .bandeja-topbar > * {
            flex: 0 0 auto;
        }
        /* Бургер — вход в список бесед: он обязан оставаться на месте, даже
           когда ленту топбара увели вбок. */
        .bandeja-burger {
            position: sticky;
            left: 0;
            z-index: 1;
            min-height: 40px;
            background: var(--bandeja-paper);
        }
        /* 195×31 с обрезанной подписью: цель ниже пальца, а какая модель
           выбрана — не прочитать. Ширину даёт содержимое, лента прокрутится. */
        .bandeja-model-select {
            min-height: 40px;
            max-width: none;
        }

        /* Таблица результата инструмента — кнопка вместо инлайн-рендера
           (сама таблица открывается в #aiTableModal, см. шаблон). */
        .bandeja-table-trigger {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            min-height: 44px;
            padding: 0.5rem 0.9rem;
            border: 1px dashed var(--bandeja-line);
            border-radius: var(--bp-radius-sm);
            background: var(--bp-sheet);
            color: var(--bandeja-blue);
            font-family: var(--ff-body);
            font-size: 0.85rem;
            cursor: pointer;
        }
        .bandeja-table-trigger .bi { font-size: 1rem; }

        /* Оценка беседы — три кнопки без подписи (см. `bp-m-hide` в
           шаблоне), иначе в строку не помещались. Круглая тач-цель 44px
           вместо вытянутой пилюли под текст. */
        .bandeja-feedback-actions {
            flex-wrap: nowrap;
        }
        .bandeja-feedback-btn {
            min-width: 44px;
            min-height: 44px;
            padding: 0;
            justify-content: center;
        }
        .bandeja-feedback-btn .bi {
            font-size: 1.15rem;
        }
    }