/* ===========================================
   Smart guide: the Assistant page, the drawer on every project page and the
   pieces they share (thread, change cards, activity, composer).
   Markup: templates/partials/assistant/*; behaviour: js/assistant.js.
   Theme tokens only — no literal colors.
   =========================================== */

/* The [hidden] attribute wins over the display rules below. */
.asst-page [hidden], .asst-drawer [hidden] { display: none !important; }

/* ---------- page: chat column + side column (v6) ---------- */
.asst-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    height: calc(100vh - var(--topbar-h) - 3rem);
    min-height: 32rem;
}
.asst-main { display: flex; flex-direction: column; min-height: 0; }
.asst-head { margin-bottom: 14px; flex-wrap: nowrap; }
.asst-head-title { min-width: 0; }
/* Once a conversation runs a line closes the head: the thread never slides under loose text. */
.asst-page:has(.asst-thread:not([hidden])) .asst-head { margin-bottom: 0; padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); }
.asst-page .asst-thread:not([hidden]) { padding-top: 16px; }
.asst-head .page-head-actions { gap: 6px; flex-wrap: nowrap; }
.asst-history { position: relative; }
.asst-page .asst-convo-btn { max-width: none; margin: 0; padding: 0 9px; border-color: var(--hairline); background: var(--fill-1); font: 500 12px var(--font); }
.asst-page .asst-convo-btn svg { width: 12px; height: 12px; stroke: var(--label-3); }
.asst-page .asst-convo-btn[aria-expanded="true"] { background: var(--fill-2); }
.asst-page .asst-convo-title, .asst-new-plus { display: none; }
/* In a conversation the History button carries its title. */
.asst-page .asst-convo-btn.is-titled { max-width: 300px; }
.asst-page .asst-convo-btn.is-titled .asst-history-label { display: none; }
.asst-page .asst-convo-btn.is-titled .asst-convo-title { display: inline; min-width: 0; }
.asst-history .asst-pop { top: calc(100% + 6px); left: auto; right: 0; }
.asst-spacer { flex: 1; }
.asst-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* A conversation reads in one centred column; the composer stays under it. */
.asst-page .asst-thread { padding-inline: max(0.25rem, calc((100% - 860px) / 2)); }
.asst-page .asst-chat > :is(.asst-applyall, .asst-composer, .asst-under) { width: 100%; max-width: 860px; margin-inline: auto; }

/* ---------- thread ---------- */
.asst-thread { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; padding: 0.25rem 0.25rem 1rem; }
/* The thread scrolls; its messages never shrink to fit (a long chat would squash them). */
.asst-thread > * { flex-shrink: 0; }
.asst-msg-user {
    align-self: flex-end;
    max-width: 78%;
    background: var(--surface-alt);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    border-radius: 14px 14px 4px 14px;
    padding: 0.6rem 0.85rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 18rem;
    overflow-y: auto;
}
.asst-msg-bot { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0.65rem; align-items: start; }
.asst-ava { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c-special-ghost); }
.asst-ava svg { width: 16px; height: 16px; }
.asst-body { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; color: var(--text-body); line-height: 1.55; }
.asst-body p, .asst-body ul, .asst-body ol { margin: 0; }
.asst-body ul, .asst-body ol { padding-left: 1.2rem; }
.asst-body code { font-family: var(--font-mono); font-size: 0.85em; background: var(--inset); border-radius: var(--r-sm); padding: 0 0.25rem; }
.asst-msg-bot + .asst-msg-bot .asst-ava { visibility: hidden; }
.asst-typing { color: var(--text-muted); font-size: 0.85rem; }
.asst-typing::after { content: "…"; animation: asst-dots 1.2s steps(4, end) infinite; display: inline-block; width: 1em; overflow: hidden; vertical-align: bottom; }
@keyframes asst-dots { from { width: 0; } to { width: 1em; } }

.asst-tool { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--text-muted); }
.asst-tool svg { width: 14px; height: 14px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; }
.asst-tool b { color: var(--text-secondary); font-weight: 500; }
.asst-tool.failed, .asst-tool.blocked, .asst-tool.invalid { color: var(--c-danger-bold); }
.asst-tool .asst-tool-error { color: var(--text-muted); }
/* Steps in a row read as one block. */
.asst-msg-bot:has(> .asst-body > .asst-tool:only-child) + .asst-msg-bot:has(> .asst-body > .asst-tool:only-child) { margin-top: -0.65rem; }
.asst-caret { display: inline-grid; place-items: center; width: 14px; height: 14px; flex-shrink: 0; color: var(--text-faint); transform: rotate(-90deg); }
.asst-caret svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
/* The "3 steps" line (js/assistant.js foldSteps): phones only. */
.asst-msg-bot.asst-steps-row { display: none; }
.asst-steps-row .asst-ava { visibility: visible; }
.asst-steps { display: inline-flex; align-items: center; gap: 4px; width: auto; margin: 0; padding: 2px 0; background: none; border: 0; box-shadow: none; color: var(--text-muted); font-size: 13px; cursor: pointer; }
.asst-steps[aria-expanded="true"] .asst-caret { transform: none; }
.asst-steps-fail { color: var(--c-danger-bold); }

/* ---------- change cards ---------- */
.asst-change { background: var(--card); border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden; }
.asst-change-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border-subtle); }
.asst-change-head .t { color: var(--text-primary); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.asst-change-head .cat { margin-left: auto; color: var(--text-faint); font-size: 12px; flex-shrink: 0; }
/* The folded row's parts (phones). */
.asst-change-head .sum, .asst-change-toggle { display: none; }
.asst-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-warning);
    box-shadow: 0 0 0 3px var(--c-warning-ghost);
    flex-shrink: 0;
}
.asst-diff { font: 13.5px/1.65 var(--font-mono); padding: 0.45rem 0; max-height: 22rem; overflow-y: auto; }
.asst-diff div { padding: 0 0.85rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.asst-diff .ln { color: var(--text-faint); display: inline-block; min-width: 2.4em; user-select: none; }
.asst-diff .ctx, .asst-diff .gap { color: var(--text-faint); }
.asst-diff .del { background: var(--c-danger-ghost); color: var(--c-danger-bold); }
.asst-diff .add { background: var(--c-success-ghost); color: var(--c-success-bold); }
/* The words that changed within a removed / added pair. */
.asst-diff mark { color: inherit; border-radius: 3px; padding: 0 1px; }
.asst-diff .del mark { background: color-mix(in srgb, var(--c-danger) 32%, transparent); text-decoration: line-through; }
.asst-diff .add mark { background: color-mix(in srgb, var(--c-success) 32%, transparent); color: var(--text-primary); }
.asst-fields { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; padding: 0.6rem 0.85rem; font-size: 0.85rem; align-items: baseline; }
.asst-fields .k { color: var(--text-muted); }
.asst-fields .old { color: var(--text-muted); text-decoration: line-through; }
.asst-fields .new { color: var(--text-primary); font-weight: 600; }
.asst-fields .arrow { color: var(--text-faint); margin: 0 0.2rem; }
.asst-week { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.3rem 0.6rem; padding: 0.3rem 0.85rem 0.7rem; font-size: 0.72rem; color: var(--text-muted); align-items: center; }
.asst-bar { height: 8px; border-radius: 4px; background: var(--c-secondary); position: relative; overflow: hidden; }
.asst-bar i { position: absolute; top: 0; bottom: 0; background: var(--c-success); }
.asst-bar.was { opacity: 0.35; }
.asst-change-warning { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0.85rem 0.6rem; padding: 0.45rem 0.65rem; border-radius: var(--r-md); background: var(--c-warning-ghost); color: var(--c-warning-bold); font-size: 0.8rem; line-height: 1.45; }
.asst-change-warning .asst-dot { position: relative; top: -1px; }
.asst-change-note { padding: 0 0.85rem 0.6rem; font-size: 0.74rem; color: var(--text-muted); }
.asst-change-foot { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; padding: 8px 12px; border-top: 1px solid var(--border-subtle); flex-wrap: wrap; }
.asst-change-foot .note { font-size: 0.76rem; color: var(--text-muted); margin-right: auto; }
.asst-change-foot .asst-change-link { margin-right: auto; }
.asst-change-link .full { display: none; }
.asst-change-acts { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.asst-change-acts .asst-outcome { margin-right: 0; }
.asst-page-link { align-self: flex-start; }
.asst-change-foot .btn { flex-shrink: 0; }
.asst-outcome { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; margin-right: auto; }
.asst-outcome svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.asst-outcome.applied { color: var(--c-success-bold); }
.asst-outcome.discarded, .asst-outcome.undone { color: var(--text-muted); }
.asst-outcome.failed { color: var(--c-danger-bold); font-weight: 500; }

.asst-applyall {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem 0.5rem 0.85rem;
    margin-bottom: 0.6rem;
    border-radius: 10px;
    background: var(--surface-alt);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    font-size: 13px;
    white-space: nowrap;
}
.asst-applyall .btn { flex-shrink: 0; }

/* ---------- composer ---------- */
.asst-composer { border: 1px solid var(--border); background: var(--input-bg); border-radius: 14px; padding: 0.55rem 0.75rem 0.5rem; box-shadow: var(--shadow-sm); }
/* The global input focus (action blue + soft ring), not the brand grey, which glares. */
.asst-composer:focus-within { border-color: var(--c-secondary); box-shadow: var(--focus-ring-primary); }
.asst-input {
    width: 100%;
    min-height: 2.6rem;
    max-height: 14rem;
    resize: none;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    line-height: 1.5;
    padding: 0.1rem 0;
    margin: 0;
    box-shadow: none;
}
.asst-input::placeholder { color: var(--text-faint); }
/* The composer draws the field; the textarea itself stays bare (Pico styles textarea:focus). */
.asst-input, .asst-input:focus, .asst-input:focus-visible { border: none; box-shadow: none; outline: none; background: transparent; }
.asst-composer-foot .preset-tabs { flex-shrink: 0; }
[data-asst-wait] { white-space: nowrap; }
.asst-composer-foot { display: flex; align-items: center; gap: 0.5rem; font-size: 0.74rem; color: var(--text-muted); }
.asst-composer-foot .asst-spacer { flex: 1; }
/* Under the box: the hint and the rate; the countdown alone where there's no room for it. */
.asst-under { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 6px; color: var(--text-faint); font-size: 11.5px; }
.asst-drawer .asst-under:not(.is-waiting), .asst-drawer .asst-hint { display: none; }
.asst-send { width: 32px; height: 32px; border-radius: 50%; border: none; display: grid; place-items: center; background: var(--c-secondary); color: var(--c-text-on-dark); flex-shrink: 0; cursor: pointer; padding: 0; }
.asst-send:disabled { background: var(--surface-alt); color: var(--text-faint); cursor: default; }
.asst-send svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.asst-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.5rem; border-radius: var(--r-pill); background: var(--surface-alt); border: 1px solid var(--border-light); color: var(--text-secondary); font-size: 0.72rem; white-space: nowrap; }

/* ---------- Members named by a tool call ---------- */
.asst-members { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.asst-member { padding: 0.15rem 0.55rem 0.15rem 0.2rem; font-size: 0.78rem; text-decoration: none; max-width: 100%; }
.asst-member:hover { border-color: var(--border); color: var(--text-primary); }
.asst-member-ava { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; object-fit: cover; display: inline-grid; place-items: center; background: var(--surface); color: var(--text-muted); font-size: 0.62rem; font-weight: 600; }
.asst-member-name { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; }
.asst-member-note { color: var(--text-muted); }
.asst-change-members { padding: 0.6rem 0.85rem 0; }
.asst-change-members .asst-members { margin-top: 0; }

/* ---------- FAQ review ---------- */
.asst-review-banner { display: flex; align-items: center; gap: 0.6rem; width: 100%; max-width: 540px; margin-bottom: 1rem; padding: 0.6rem 0.85rem; border-radius: 10px; border: 1px solid var(--c-warning-dim); background: var(--c-warning-ghost); color: var(--text-primary); text-decoration: none; text-align: left; font-size: 0.86rem; }
.asst-review-banner .asst-review-open { margin-left: auto; color: var(--c-warning-bold); font-weight: 600; flex-shrink: 0; }

/* ---------- empty state ---------- */
.asst-empty { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; padding: 1.5rem 0 1rem; }
.asst-empty > * { flex-shrink: 0; }
.asst-empty h2 { margin: 0; font-size: 1.45rem; font-weight: 500; color: var(--text-primary); }
.asst-empty p { margin: 0; color: var(--text-secondary); max-width: 520px; }
/* One quiet line at the end. */
.asst-beta-note { display: flex; justify-content: center; width: 100%; margin: 14px auto 0; color: var(--text-faint); font-size: 12px; line-height: 1.45; text-align: center; }
.asst-beta-note b { color: var(--text-faint); font-weight: 400; }
/* Suggestions: category pills over one list of one-liners; the sentence is the tooltip. */
.asst-suggest { width: 100%; margin-top: 14px; text-align: left; }
.asst-cats { display: flex; justify-content: center; margin-bottom: 12px; gap: 8px; }
.asst-cats > button { height: 30px; padding: 0 14px; border: 1px solid var(--hairline); border-radius: 999px; font-size: 13px; }
.asst-cats > button.is-on { border-color: var(--sel-line); }
.asst-suggest-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.asst-suggest-list[hidden] { display: none; }
.asst-suggest .content-card { display: block; width: 100%; margin: 0; padding: 9px 14px; border: 0; border-radius: 0; box-shadow: none; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.asst-suggest .content-card + .content-card { border-top: 1px solid var(--border-subtle); }
.asst-suggest .content-card:hover { background: var(--fill-2); }
.asst-suggest b { color: var(--text-body); font-size: 13.5px; font-weight: 400; }

/* ---------- the page's new chat (v6) ----------
   One centred column: headline, the composer, suggestions as one list, the own-AI link,
   recent conversations, the beta note as a footnote. The empty state's box steps aside
   (display: contents) so the composer, a sibling, can sit between its parts; the first
   message removes the empty state and the composer drops to the bottom. Desktop only:
   phones keep the composer at the bottom. */
@media (min-width: 769px) {
    .asst-page .asst-chat:has(> .asst-empty) { overflow-y: auto; justify-content: safe center; padding: 16px 0; }
    .asst-page .asst-chat > .asst-empty { display: contents; }
    .asst-page .asst-chat:has(> .asst-empty) > *,
    .asst-page .asst-empty > * { flex-shrink: 0; width: 100%; max-width: 760px; margin-inline: auto; }
    .asst-page .asst-chat:has(> .asst-empty) > .asst-composer { order: 4; margin-top: 4px; }
    .asst-page .asst-chat:has(> .asst-empty) > .asst-under { order: 4; }
    .asst-page .asst-empty > .asst-review-banner { order: 1; margin-bottom: 14px; }
    .asst-page .asst-empty > h2 { order: 2; }
    .asst-page .asst-empty > .asst-lede { order: 3; margin: 6px auto 16px; }
    .asst-page .asst-empty > .asst-suggest { order: 5; }
    .asst-page .asst-empty > .asst-ai-apps { order: 6; }
    .asst-page .asst-empty > .asst-recent { order: 7; }
    .asst-page .asst-empty > .asst-beta-note { order: 8; }
}
.asst-page .asst-empty h2 { margin: 0 auto; color: var(--label-1); font: 600 24px/1.2 var(--font); letter-spacing: -0.01em; text-align: center; }
.asst-page .asst-lede { max-width: 760px; color: var(--label-2); font-size: 13.5px; text-align: center; }
.asst-page .asst-composer { border: 1px solid var(--hairline); border-radius: 16px; background: var(--surface-1); box-shadow: var(--shadow-float); padding: 12px 10px 10px 14px; }
.asst-page .asst-composer:focus-within { border-color: var(--line-strong); box-shadow: var(--shadow-float); }
.asst-page .asst-input { min-height: 3.2rem; color: var(--label-1); font-size: 14px; }
.asst-page .asst-input::placeholder { color: var(--label-3); }
.asst-page .asst-composer-foot { gap: 10px; color: var(--label-3); font-size: 12px; }
.asst-page .asst-send { width: 28px; height: 28px; background: var(--accent); }
.asst-page .asst-send:disabled { background: var(--fill-2); color: var(--label-3); }
.asst-page .asst-send svg { width: 14px; height: 14px; }
.asst-page .asst-ai-apps { margin: 16px auto 0; color: var(--label-2); font-size: 13px; text-align: center; }
.asst-page .asst-ai-apps a { color: var(--accent-text); font-weight: 500; }
.asst-recent { width: 100%; max-width: 760px; margin-top: 20px; text-align: left; }
.asst-recent-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.asst-page .asst-review-banner { max-width: 760px; border-color: color-mix(in srgb, var(--amber) 35%, transparent); background: var(--amber-tint); color: var(--label-1); }
.asst-page .asst-review-banner .asst-review-open { color: var(--amber); }

/* ---------- side column: recent activity ---------- */
.asst-side { display: flex; flex-direction: column; gap: var(--gap); min-height: 0; }
.asst-side-card { display: flex; flex-direction: column; min-height: 0; }
.asst-side-card .card-head { padding-bottom: 10px; }
/* The rail hugs its rows; only a long list scrolls. */
.asst-side-activity { flex: 0 1 auto; min-height: 0; }
.asst-rail-list { flex: 1; min-height: 0; overflow-y: auto; }
.asst-side .none { padding: 12px 0 2px; border-top: 1px solid var(--hairline); color: var(--label-3); font-size: 13px; }
/* A row of activity: status dot, what (and who), time on the right */
.asst-act { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--hairline); font-size: 12.5px; color: inherit; text-decoration: none; }
.asst-act .tm { order: 3; color: var(--label-3); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.asst-act .what { color: var(--label-2); line-height: 1.45; overflow-wrap: anywhere; }
.asst-act .what b { color: var(--label-1); font-weight: 500; }
.asst-act .dot { align-self: center; }
/* What the assistant only read folds into one row. */
.asst-reads { border-top: 1px solid var(--hairline); }
.asst-reads summary { display: flex; align-items: center; gap: 8px; padding: 9px 0; color: var(--text-faint); font-size: 12.5px; cursor: pointer; list-style: none; }
.asst-reads summary::-webkit-details-marker { display: none; }
.asst-reads summary .asst-caret { margin-left: -4px; }
.asst-reads[open] summary .asst-caret { transform: none; }
/* Recent conversations (empty state): title, then its state as quiet text */
.asst-act.conv { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 7px 0; border-top-color: var(--border-subtle); font-size: 13px; }
.asst-act.conv .what b { display: block; overflow: hidden; color: var(--text-body); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.asst-state { color: var(--text-faint); font-size: 12px; white-space: nowrap; }
.asst-state.wait { color: var(--c-warning-bold); }
a.asst-act:hover .what b { color: var(--accent-text); }

/* ---------- conversation switcher ---------- */
.asst-convo-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.55rem 0.3rem 0.7rem;
    border-radius: var(--r-md);
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-primary);
    font: 500 0.88rem var(--font);
    max-width: 340px;
    cursor: pointer;
    margin: 0;
    width: auto;
}
.asst-convo-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asst-convo-btn svg { width: 14px; height: 14px; stroke: var(--text-muted); fill: none; stroke-width: 2; flex-shrink: 0; }
.asst-convo-btn[aria-expanded="true"] { background: var(--surface-hover); }
.asst-pop { position: absolute; top: 2.9rem; left: 0; width: 380px; max-width: calc(100vw - 2rem); background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-popover); padding: 0.5rem; z-index: 20; }
.asst-pop[hidden] { display: none; }
.asst-pop-list { max-height: 60vh; overflow-y: auto; }
.asst-pop-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 0.6rem; padding: 0.45rem 0.55rem; border-radius: var(--r-md); color: inherit; text-decoration: none; }
.asst-pop-item:hover, .asst-pop-item.active { background: var(--surface-hover); }
.asst-pop-item b { color: var(--text-primary); font-weight: 500; font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asst-pop-item small { grid-column: 1; color: var(--text-muted); font-size: 0.74rem; }
.asst-pop-item .asst-state { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.asst-pop-new { margin-bottom: 0.25rem; border-bottom: 1px solid var(--border-subtle); border-radius: var(--r-md) var(--r-md) 0 0; }
.asst-pop-new b { color: var(--c-secondary-bold); }
.asst-pop .none { color: var(--text-faint); font-size: 0.82rem; padding: 0.8rem 0.55rem; }

/* ---------- superadmin model picker ---------- */
.asst-model { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.74rem; color: var(--c-warning-bold); }
.asst-model input {
    width: 15rem;
    margin: 0;
    padding: 0.25rem 0.5rem;
    height: auto;
    font: 0.78rem var(--font-mono);
    background: var(--input-bg);
    border: 1px dashed var(--c-warning-dim);
    border-radius: var(--r-sm);
    color: var(--text-primary);
}
.asst-cost { font: 0.78rem var(--font-mono); color: var(--c-warning-bold); padding: 0.15rem 0.45rem; border: 1px dashed var(--c-warning-dim); border-radius: var(--r-sm); }
.asst-model-row { padding: 0.45rem 1rem; border-bottom: 1px solid var(--border-subtle); }

/* ---------- locked ---------- */
.overview-card.asst-locked { max-width: 560px; margin: 4rem auto 0; align-items: center; gap: 6px; padding: 32px; text-align: center; }
.asst-locked-ic { width: 40px; height: 40px; }
.asst-locked-ic svg { width: 18px; height: 18px; }
.asst-locked h2 { margin: 8px 0 0; font-size: 20px; font-weight: 600; color: var(--label-1); }
.asst-locked p { margin: 0 0 10px; color: var(--label-2); }
.asst-locked ul { max-width: 380px; margin: 0 auto 14px; padding-left: 1.2rem; color: var(--label-2); line-height: 1.8; text-align: left; }

/* ---------- drawer on every project page ---------- */
/* v6: a small round button; the label slides open on hover, in one piece */
.asst-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 890; /* below the setup guide widget and dialogs */
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    color: var(--label-1);
    font: 500 13.5px var(--font);
    box-shadow: var(--shadow-float);
    cursor: pointer;
    width: auto;
    margin: 0;
    white-space: nowrap;
}
.asst-fab > svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--ai); }
.asst-fab-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 0;
    margin-left: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width var(--dur-base) ease, margin-left var(--dur-base) ease, opacity var(--dur-fast) ease;
}
.asst-fab:hover .asst-fab-label,
.asst-fab:focus-visible .asst-fab-label { max-width: 170px; margin-left: 8px; opacity: 1; }
.asst-fab-count { position: absolute; top: -6px; right: -6px; }
.asst-fab kbd { font: 500 11px var(--font-mono); color: var(--label-3); border: 1px solid var(--hairline); border-radius: 4px; padding: 1px 4px; background: transparent; }
/* Make room for the floating setup guide and the dirty-state save bar. */
body:has(.setup-guide) .asst-fab { right: calc(24px + 20.5rem + 0.75rem); }
body:has(.save-bar.show) .asst-fab { display: none; }
body.asst-drawer-open .asst-fab { display: none; }

.asst-drawer {
    position: fixed;
    top: var(--topbar-h);
    right: 0;
    bottom: 0;
    width: 460px;
    max-width: 100vw;
    z-index: 950;
    background: var(--card);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
body.asst-drawer-open .asst-drawer { transform: none; visibility: visible; transition: transform var(--dur-base) var(--ease-out); }
.asst-drawer-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.asst-drawer-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); position: relative; }
.asst-drawer-head > svg { width: 20px; height: 20px; flex-shrink: 0; }
.asst-drawer-head .asst-convo-btn { max-width: 240px; min-width: 0; padding-inline: 6px 4px; border-color: transparent; }
.asst-drawer-head .asst-pop { top: 3rem; left: 0.75rem; }
.asst-drawer .asst-thread { padding: 1rem; }
.asst-drawer .asst-applyall { margin: 0 1rem 0.6rem; }
.asst-drawer .asst-composer { margin: 0 1rem 1rem; }
/* The start screen sits on the composer. */
.asst-drawer .asst-empty { justify-content: flex-end; align-items: stretch; text-align: left; padding: 1rem; }
.asst-drawer .asst-empty h2 { font-size: 19px; font-weight: 600; }
.asst-drawer .asst-lede { color: var(--text-muted); font-size: 13px; }
.asst-drawer .asst-beta-note { justify-content: flex-start; margin: 12px 0 0; text-align: left; }
.asst-drawer .asst-composer { box-shadow: none; }
.asst-drawer .asst-input { min-height: 2rem; }
.asst-drawer .asst-under { margin: -0.6rem 1rem 0.6rem; }
.asst-drawer .asst-change-head .t { font-size: 0.88rem; }
.asst-icobtn { width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--border-light); background: transparent; color: var(--text-secondary); display: grid; place-items: center; flex-shrink: 0; cursor: pointer; padding: 0; margin: 0; }
.asst-icobtn:hover { color: var(--text-primary); background: var(--surface-hover); }
.asst-icobtn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.asst-drawer .asst-icobtn { border-color: transparent; color: var(--text-muted); }

@media (max-width: 1100px) {
    .asst-page { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 56px - 2rem); }
    .asst-side { display: none; }
}

.asst-menu-btn { display: none; }

@media (max-width: 768px) {
    /* Phones: the chat is the whole screen — no top nav, project picker or page title;
       a menu button opens the sidebar over it. Fixed to the dynamic viewport, with the
       composer kept clear of the system bars (safe-area insets). */
    .asst-page {
        position: fixed;
        inset: 0;
        z-index: 999; /* above the top nav and phone app bar (998), below the sidebar (1000) */
        height: auto;
        min-height: 0;
        padding: calc(0.5rem + env(safe-area-inset-top)) 0.6rem calc(0.5rem + env(safe-area-inset-bottom));
        background: var(--c-bg);
    }
    body:has(.asst-page) .burger-menu,
    body:has(.asst-page) .mobile-appbar,
    body.asst-drawer-open .burger-menu { display: none; }
    /* The menu button opens the left sidebar over the chat: lift the sidebar, its scrim
       (a tap outside closes it) and the burger (closes it too) above the chat (999). */
    body:has(.asst-page) .sidebar { z-index: 1001; }
    body:has(.asst-page) .mobile-scrim { z-index: 1000; }
    body:has(.asst-page).sidebar-open .burger-menu { display: inline-flex; position: fixed; }
    .asst-head { flex-wrap: nowrap; gap: 0.45rem; margin-bottom: 0.5rem; }
    .asst-head-title, .asst-new-label, .asst-hint { display: none; }
    .asst-menu-btn { display: grid; }
    /* Phones: the header is the menu button, the conversation's title (opens History) and + */
    .asst-head .page-head-actions { flex: 1; min-width: 0; margin-left: 0; }
    .asst-history { flex: 1; min-width: 0; }
    .asst-page .asst-convo-btn { width: 100%; height: 30px; justify-content: space-between; font-size: 13px; }
    .asst-page .asst-history-label { display: none; }
    .asst-page .asst-convo-title, .asst-new-plus { display: inline; }
    .asst-history .asst-pop { left: 0; right: 0; width: auto; }
    .asst-page .asst-composer-foot { flex-wrap: nowrap; }
    .asst-new-btn { padding: 0.3rem 0.65rem; flex-shrink: 0; }
    .asst-thread { padding: 0.25rem 0 0.75rem; gap: 0.8rem; }
    .asst-page .asst-composer, .asst-drawer .asst-composer { padding: 8px 8px 8px 12px; }
    .asst-page .asst-input { min-height: 1.8rem; }
    .asst-page .asst-applyall { margin-bottom: 6px; padding: 6px 6px 6px 12px; }
    .asst-page .asst-under:not(.is-waiting) { display: none; }
    .asst-msg-user { max-width: 88%; }
    /* The start screen sits on the composer; recent chats are behind the title button. */
    .asst-page .asst-empty { justify-content: flex-end; align-items: stretch; text-align: left; padding: 0.5rem 0.1rem 0.75rem; }
    .asst-page .asst-empty h2 { margin: 0; font-size: 20px; text-align: left; }
    .asst-page .asst-lede { text-align: left; }
    .asst-page .asst-beta-note { justify-content: flex-start; margin: 12px 0 0; text-align: left; }
    .asst-page .asst-ai-apps { margin: 12px 0 0; text-align: left; }
    .asst-page .asst-recent { display: none; }
    .asst-fab { padding: 0.65rem; right: 1rem; bottom: 1rem; }
    .asst-fab .asst-fab-label, .asst-fab kbd { display: none; }
    body:has(.setup-guide) .asst-fab { right: 1rem; bottom: 4.5rem; }
    .asst-drawer {
        top: 0;
        width: 100vw;
        z-index: 1001; /* the whole screen, over the top nav and app bar */
        border-left: none;
        padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
    }
    .asst-drawer .asst-thread { padding: 0.8rem; gap: 0.8rem; }
    .asst-drawer .asst-composer { margin: 0 0.6rem 0.7rem; }
    .asst-drawer .asst-applyall { margin: 0 0.6rem 0.6rem; }
    .asst-drawer .asst-under { margin: -0.4rem 0.6rem 0.5rem; }
    .asst-chip[data-asst-page] { display: none; }
    .asst-change-foot .note { display: none; }
    /* A message or feedback card keeps its form, and its note on a line of its own. */
    .asst-feedback-card .asst-change-foot .note { display: block; flex-basis: 100%; margin: 0; }

    /* Change cards are small rows: title and what it does, the actions beside them; a tap
       opens the body. One markup with the wide card: the foot steps aside (display: contents)
       so the actions can sit in the first row. */
    :is(.asst-page, .asst-drawer) .asst-change:not(.asst-feedback-card) { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
    :is(.asst-page, .asst-drawer) .asst-change:not(.asst-feedback-card) > * { grid-column: 1 / -1; }
    :is(.asst-page, .asst-drawer) .asst-change:not(.asst-feedback-card) > .asst-change-head {
        grid-column: 1;
        grid-row: 1;
        display: grid;
        grid-template-columns: 14px minmax(0, 1fr);
        align-items: center;
        gap: 0 8px;
        min-height: 40px;
        padding: 6px 8px 6px 12px;
        border-bottom: 0;
        cursor: pointer;
    }
    :is(.asst-page, .asst-drawer) .asst-change-head .t,
    :is(.asst-page, .asst-drawer) .asst-change-head .sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    :is(.asst-page, .asst-drawer) .asst-change-head .sum { display: block; grid-column: 2; color: var(--text-muted); font-size: 13px; }
    :is(.asst-page, .asst-drawer) .asst-change-head .sum:empty { display: none; }
    :is(.asst-page, .asst-drawer) .asst-change-head[data-asst-toggle] .cat { display: none; }
    :is(.asst-page, .asst-drawer) .asst-change-toggle { display: inline-grid; grid-row: 1 / span 2; place-items: center; width: 14px; height: 14px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
    :is(.asst-page, .asst-drawer) .asst-change.is-open .asst-change-toggle .asst-caret { transform: none; }
    :is(.asst-page, .asst-drawer) .asst-change:not(.asst-feedback-card) > .asst-change-foot { display: contents; }
    :is(.asst-page, .asst-drawer) .asst-change:not(.asst-feedback-card) .asst-change-acts { grid-column: 2; grid-row: 1; align-self: center; padding-right: 10px; }
    :is(.asst-page, .asst-drawer) .asst-change:is([data-status="failed"], [data-status="blocked"]) .asst-change-acts { grid-column: 1 / -1; grid-row: 5; padding: 0 12px 8px; }
    :is(.asst-page, .asst-drawer) .asst-change-body { display: none; grid-row: 2; border-top: 1px solid var(--border-subtle); }
    :is(.asst-page, .asst-drawer) .asst-change.is-open .asst-change-body { display: block; }
    :is(.asst-page, .asst-drawer) .asst-change-warning { grid-row: 3; margin-top: 0.1rem; }
    :is(.asst-page, .asst-drawer) .asst-change:not(.asst-feedback-card) .asst-change-link { display: none; grid-column: 1 / -1; grid-row: 4; justify-self: start; margin: 0 12px 8px; }
    :is(.asst-page, .asst-drawer) .asst-change.is-open .asst-change-link { display: inline-flex; }
    :is(.asst-page, .asst-drawer) .asst-change-link .short { display: none; }
    :is(.asst-page, .asst-drawer) .asst-change-link .full { display: inline; }
    /* A run of tool lines folds into one (js/assistant.js foldSteps). */
    :is(.asst-page, .asst-drawer) .asst-msg-bot.asst-steps-row { display: grid; }
    :is(.asst-page, .asst-drawer) .asst-msg-bot.is-folded { display: none; }
    /* iOS Safari zooms the page into any field under 16px when it gets focus. */
    .asst-input, .asst-page .asst-input { font-size: 16px; }
    /* The keyboard covers the bottom of the layout viewport on iOS: fit the full-screen chat
       to the visible part (js/assistant.js sets the visual viewport's height and offset). */
    .asst-page,
    .asst-drawer {
        top: var(--asst-vv-top, 0px);
        bottom: auto;
        height: var(--asst-vv-height, 100dvh);
    }
}

/* "Prefer your own AI?" link to the AI apps page (empty chat, locked card). */
.asst-ai-apps { margin: 0.75rem 0 0; font-size: 0.82rem; color: var(--text-muted); }
.asst-ai-apps .nav-warning { margin-left: 0.25rem; }