/* Unified chat interface — the only UI surface in the product.
 *
 * Three rules govern everything below.
 *
 * 1. Contrast belongs in the reading column, not the furniture. Separators are
 *    hairlines, surfaces differ by a few percent of lightness, and nothing in
 *    the chrome is boxed unless the box carries meaning. Grouping is done with
 *    a faint fill rather than a border wherever a fill will do.
 * 2. One spatial rhythm: every gap, pad and control height is a multiple of
 *    4px, and the type runs on a fixed scale (11 / 12 / 13 / 14 / 15 / 17 /
 *    21 / 28) with tracking tightening as the size grows.
 * 3. Motion is a state change, never a flourish: 120–160ms, ease-out, opacity
 *    and colour only.
 */

:root {
    color-scheme: light;

    /* Surfaces. Each step is a few percent darker than the one above it, so
       stacking two of them reads as depth without a line between them. */
    --bg: #ffffff;
    --bg-subtle: #fbfbfc;
    --bg-sunken: #f4f4f6;
    --bg-hover: #f0f0f3;
    /* Anything that floats above the page: cards, popovers, the composer. In
       light this is plain white and a hairline does the separating; in dark it
       is a step lighter than the page, because dark surfaces gain elevation by
       getting brighter, not by casting a shadow nobody can see. */
    --bg-raised: #ffffff;

    /* Separators: hairlines, not rules. */
    --border: #ededf0;
    --border-strong: #e0e0e5;

    /* Text. */
    --text: #18181b;
    --text-muted: #70707a;
    --text-faint: #a1a1aa;

    --accent: #18181b;
    --accent-hover: #2c2c33;
    --accent-text: #ffffff;
    --knob: #ffffff;

    --focus: #4f46e5;
    --focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.16);
    --link: #4f46e5;

    --danger: #b42318;
    --danger-bg: #fdf4f3;
    --danger-border: #f6dedb;
    --ok: #067647;

    /* Soft accent used by @mention chips. */
    --tint-bg: #eef1fe;
    --tint-text: #4338ca;

    --ins-bg: #dcfae6;
    --del-bg: #fee4e2;

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;

    /* Shadows carry lift, never outline. Anything that needs an edge gets a
       hairline; the shadow only says "this floats". */
    --shadow-sm: 0 1px 2px rgba(18, 18, 23, 0.04);
    --shadow: 0 1px 2px rgba(18, 18, 23, 0.04), 0 8px 24px -14px rgba(18, 18, 23, 0.16);
    --shadow-lg: 0 1px 3px rgba(18, 18, 23, 0.06), 0 16px 48px -16px rgba(18, 18, 23, 0.20);

    --scrim: rgba(24, 24, 27, 0.32);

    --sidebar-width: 260px;
    --column: 720px;

    --ease: cubic-bezier(0.2, 0, 0, 1);

    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --bg: #0b0b0d;
        --bg-subtle: #111114;
        --bg-sunken: #1a1a1f;
        --bg-hover: #212127;
        --bg-raised: #161619;

        --border: #232329;
        --border-strong: #30303a;

        --text: #f2f2f4;
        --text-muted: #a1a1ac;
        --text-faint: #71717c;

        /* Inverted: the primary control is light on a dark ground. */
        --accent: #f2f2f4;
        --accent-hover: #ffffff;
        --accent-text: #131316;
        --knob: #8e8e99;

        --focus: #8b8bf5;
        --focus-ring: 0 0 0 3px rgba(139, 139, 245, 0.22);
        --link: #a5a5f8;

        --danger: #f97066;
        --danger-bg: #21100f;
        --danger-border: #40201d;
        --ok: #47cd89;

        --tint-bg: #23234a;
        --tint-text: #c7c7fb;

        --ins-bg: #123122;
        --del-bg: #3a1b18;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -14px rgba(0, 0, 0, 0.8);
        --shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.5), 0 16px 48px -16px rgba(0, 0, 0, 0.9);

        --scrim: rgba(0, 0, 0, 0.55);
    }
}

* { box-sizing: border-box; }

/* Several rules below set display on elements toggled with the hidden
   attribute, which would otherwise win. */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
    width: 18px;
    height: 18px;
    flex: none;
    display: block;
    stroke-width: 1.6;
}

/* Focus: one ring everywhere, offset so it never crops a glyph. The outline
   inherits each element's own corner radius, so nothing is restyled on focus —
   setting a radius here would visibly reshape controls as you tab through. */
:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* Thin, unobtrusive scrollbars — the default chunky grey bar is the loudest
   thing on an otherwise quiet page. */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; }

::selection { background: var(--tint-bg); color: var(--tint-text); }

/* ---------- shared controls ---------- */

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-faint);
    text-decoration: none;
    transition: background 0.12s var(--ease), color 0.12s var(--ease);
}

.icon-btn .icon { width: 16px; height: 16px; }
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }

.ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    transition: background 0.12s var(--ease), color 0.12s var(--ease);
}

.ghost-btn .icon { width: 15px; height: 15px; }
.ghost-btn:hover { background: var(--bg-hover); color: var(--text); }

.app { display: flex; height: 100dvh; overflow: hidden; background: var(--bg); }

/* ---------- sidebar ---------- */

.sidebar {
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width);
    border-right: 1px solid var(--border);
    background: var(--bg-subtle);
    display: flex;
    flex-direction: column;
    min-height: 0;
    transition: margin-left 0.2s var(--ease);
}

.app.sidebar-collapsed .sidebar { margin-left: calc(-1 * var(--sidebar-width)); }

.sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    flex: none;
    padding: 0 12px 0 16px;
}

.brand {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-sm);
    text-decoration: none;
    opacity: 0.92;
    transition: opacity 0.12s var(--ease);
}

.brand:hover { opacity: 1; }
.brand img { width: 22px; height: 22px; border-radius: 6px; display: block; }

.sidebar-top { padding: 0 12px 4px; display: flex; flex-direction: column; gap: 4px; }

/* Settings pages put their section links where the chat puts conversations, so
   the two rails have the same three bands: head, list, account. */
.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-sep { height: 1px; margin: 6px 8px; background: var(--border); flex: none; }

/* The only outlined control in the sidebar, so it reads as the one thing to
   press without needing a fill. It sits at the foot: the list above it is what
   you scroll, and the one button that is always in the same place is the one
   that starts something new. */
.new-chat {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg-raised);
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    transition: background 0.12s var(--ease), border-color 0.12s var(--ease);
}

.new-chat .icon { width: 15px; height: 15px; color: var(--text-muted); }
.new-chat:hover { background: var(--bg-hover); border-color: var(--border-strong); }

/* Chromeless until it is used: no box, no fill, just the field. */
.sidebar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 10px;
    border-radius: var(--radius);
    color: var(--text-faint);
    transition: background 0.12s var(--ease), box-shadow 0.12s var(--ease);
}

.sidebar-search .icon { width: 15px; height: 15px; }
.sidebar-search:hover { background: var(--bg-hover); }

.sidebar-search:focus-within {
    background: var(--bg-raised);
    box-shadow: var(--focus-ring);
    color: var(--text-muted);
}

.sidebar-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    outline: none;
    font: inherit;
    font-size: 13px;
    color: var(--text);
}

.sidebar-search input::placeholder { color: var(--text-faint); }
.sidebar-search input::-webkit-search-cancel-button { display: none; }

.conversations {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 12px 16px;
}

.group-label {
    padding: 16px 8px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.conversations > .group-label:first-child { padding-top: 8px; }

.conv {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 4px 0 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-muted);
    transition: background 0.12s var(--ease), color 0.12s var(--ease);
}

.conv:hover { background: var(--bg-hover); color: var(--text); }
.conv.active { background: var(--bg-hover); color: var(--text); }
.conv.active .title { font-weight: 500; }

.conv .title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.conv .icon-btn { width: 22px; height: 22px; opacity: 0; }
.conv .icon-btn .icon { width: 14px; height: 14px; }
.conv:hover .icon-btn, .conv .icon-btn:focus-visible { opacity: 1; }

.sidebar-foot {
    flex: none;
    border-top: 1px solid var(--border);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.foot-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    text-align: left;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 13px;
    transition: background 0.12s var(--ease), color 0.12s var(--ease);
}

.foot-link .icon { width: 16px; height: 16px; flex: none; }
.foot-link:hover { background: var(--bg-hover); color: var(--text); }
.foot-link.active { background: var(--bg-hover); color: var(--text); font-weight: 500; }

.foot-link.account { height: 44px; gap: 10px; }

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    background: var(--bg-sunken);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.foot-link.account:hover .avatar { background: var(--accent); color: var(--accent-text); }

.account-text { min-width: 0; display: block; flex: 1; }

.account-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 13px;
    line-height: 1.35;
}

.account-meta {
    display: block;
    font-size: 11px;
    color: var(--text-faint);
    line-height: 1.35;
}

/* ---------- account menu ---------- */

/* Everything that is not a conversation hangs off this one chip: the account
   page, the org's users, credits, feedback, signing out. They used to be a rail
   link each plus two buttons in the topbar, which spent a lot of chrome saying
   what one press of your own name can say. */
.account-menu { position: relative; }

.foot-link .account-caret {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--text-faint);
    transition: transform 0.14s var(--ease);
}

#account-btn[aria-expanded="true"] { background: var(--bg-hover); }
#account-btn[aria-expanded="true"] .account-caret { transform: rotate(180deg); }

.account-popover {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 40;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-raised);
    box-shadow: var(--shadow-lg);
    animation: pop 0.14s var(--ease);
}

.account-item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 32px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-muted);
    font-size: 13px;
    transition: background 0.12s var(--ease), color 0.12s var(--ease);
}

.account-item .icon { width: 16px; height: 16px; flex: none; }
.account-item:hover { background: var(--bg-hover); color: var(--text); }
.account-sep { height: 1px; margin: 6px 8px; background: var(--border); }

.sidebar-scrim { display: none; }

/* ---------- main ---------- */

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 12px 0 16px;
    flex: none;
}

/* The sidebar carries its own collapse control, so the topbar's expand button is
   only meaningful once the sidebar is gone. */
#expand-sidebar { display: none; }
.app.sidebar-collapsed #expand-sidebar { display: inline-flex; }

.conv-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

.topbar-actions { display: flex; align-items: center; gap: 2px; }

.thread { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

/* Both the divider and the panel are children of .app rather than of .main, so
   the panel runs the whole height of the window and its header sits level with
   the topbar instead of starting a row below it. */
.stage-divider { width: 1px; flex: none; background: var(--border); }

/* ---------- transcript ---------- */

.transcript { flex: 1; min-height: 0; overflow-y: auto; scroll-behavior: smooth; }
.transcript:has(> .empty) { display: flex; }

.transcript-inner {
    width: 100%;
    max-width: var(--column);
    margin: 0 auto;
    padding: 24px 24px 8px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-size: 15px;
    line-height: 1.68;
}

.msg { display: flex; flex-direction: column; gap: 12px; }
.msg.user { align-items: flex-end; }

.msg.user .bubble {
    max-width: 78%;
    padding: 10px 16px;
    border-radius: 16px;
    background: var(--bg-sunken);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.msg.assistant .bubble { max-width: 100%; }

.bubble > :first-child { margin-top: 0; }
.bubble > :last-child { margin-bottom: 0; }

.bubble h1, .bubble h2, .bubble h3, .bubble h4 {
    margin: 1.7em 0 0.6em;
    font-weight: 600;
    line-height: 1.3;
}

.bubble h1 { font-size: 1.4em; letter-spacing: -0.021em; }
.bubble h2 { font-size: 1.2em; letter-spacing: -0.016em; }
.bubble h3 { font-size: 1.05em; letter-spacing: -0.011em; }
.bubble h4 { font-size: 1em; letter-spacing: -0.006em; }

.bubble p { margin: 0 0 1em; }
.bubble ul, .bubble ol { margin: 0 0 1em; padding-left: 1.35em; }
.bubble li { margin: 0.3em 0; padding-left: 0.15em; }
.bubble li > ul, .bubble li > ol { margin: 0.3em 0 0; }
.bubble li::marker { color: var(--text-faint); font-size: 0.92em; }
.bubble strong { font-weight: 600; }

.bubble a {
    color: var(--link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent);
    transition: text-decoration-color 0.12s var(--ease);
}

.bubble a:hover { text-decoration-color: currentColor; }

.bubble hr { margin: 1.8em 0; border: 0; border-top: 1px solid var(--border); }

.bubble blockquote {
    margin: 0 0 1em;
    padding-left: 16px;
    border-left: 2px solid var(--border-strong);
    color: var(--text-muted);
}

.bubble code {
    font-family: var(--mono);
    font-size: 0.86em;
    padding: 0.15em 0.4em;
    border-radius: 5px;
    background: var(--bg-sunken);
}

/* Code sits in a filled well rather than an outlined box: one fewer line on
   the page, and the fill already says "not prose". */
.bubble pre {
    margin: 0 0 1em;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--bg-sunken);
    overflow-x: auto;
}

.bubble pre code {
    padding: 0;
    background: none;
    font-size: 13px;
    line-height: 1.6;
}

/* Horizontal hairlines only — no outer frame, no vertical rules, cells flush
   with the text column so the table sits inside the prose instead of on it. */
.bubble table {
    width: 100%;
    margin: 0.4em 0 1.2em;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
}

.bubble th, .bubble td {
    padding: 9px 16px 9px 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.bubble th {
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border-strong);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.bubble th:last-child, .bubble td:last-child { padding-right: 0; }
.bubble tbody tr:last-child td { border-bottom: 0; }

.cursor {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 2px;
    border-radius: 1px;
    vertical-align: -0.18em;
    background: var(--text);
    animation: blink 1.1s steps(2, start) infinite;
}

@keyframes blink { to { visibility: hidden; } }

/* ---------- empty state ---------- */

.empty {
    margin: auto;
    width: 100%;
    max-width: var(--column);
    padding: 24px 24px 40px;
    text-align: center;
}

.empty h1 {
    margin: 0 0 8px;
    font-size: clamp(25px, 2.5vw, 30px);
    font-weight: 600;
    letter-spacing: -0.028em;
    line-height: 1.2;
}

.empty p {
    margin: 0 auto 32px;
    max-width: 52ch;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-muted);
}

.suggestions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    text-align: left;
}

.suggestion {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 34px 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-raised);
    text-align: left;
    transition: background 0.14s var(--ease), border-color 0.14s var(--ease);
}

.suggestion:hover { background: var(--bg-subtle); border-color: var(--border-strong); }

/* A chevron that only appears on hover: the affordance is there when wanted
   and absent from the resting composition. */
.suggestion::after {
    content: "";
    position: absolute;
    top: 19px;
    right: 16px;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid var(--text-faint);
    border-right: 1.5px solid var(--text-faint);
    transform: rotate(45deg) translate(-2px, 2px);
    opacity: 0;
    transition: opacity 0.14s var(--ease), transform 0.14s var(--ease);
}

.suggestion:hover::after { opacity: 1; transform: rotate(45deg) translate(0, 0); }

.suggestion strong { font-size: 14px; font-weight: 550; letter-spacing: -0.006em; }
.suggestion span { font-size: 13px; color: var(--text-muted); line-height: 1.45; }

/* ---------- activity, plan, notices ---------- */

/* Grouped by fill, not by outline, and sized to its content so a finished run
   collapses to a chip rather than a band across the column. */
.activity {
    width: fit-content;
    max-width: 100%;
    border-radius: var(--radius);
    background: var(--bg-sunken);
    font-size: 13px;
}

.activity summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    cursor: pointer;
    color: var(--text-muted);
    list-style: none;
    border-radius: var(--radius);
    transition: color 0.12s var(--ease);
}

.activity summary:hover { color: var(--text); }
.activity summary::-webkit-details-marker { display: none; }
.activity summary > span { flex: 1; min-width: 0; }

.activity summary::after {
    content: "";
    width: 6px;
    height: 6px;
    flex: none;
    margin-right: 3px;
    border-bottom: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(-45deg) translate(-1px, -1px);
    opacity: 0.65;
    transition: transform 0.16s var(--ease);
}

.activity[open] summary::after { transform: rotate(45deg) translate(-1px, -1px); }
.activity .steps { padding: 2px 12px 12px; display: flex; flex-direction: column; gap: 8px; }

/* One step is one line: a fixed status slot, the tool name at its natural
   width, then the live detail taking whatever is left and ellipsing. The name
   must never be the thing that wraps — "load tools" breaking into "load" /
   "tools" is what makes a run log read as debug output. */
.step {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--text-muted);
    line-height: 1.45;
}

.step .icon, .step .spinner { width: 14px; height: 14px; flex: none; }
.step .icon { color: var(--ok); }

.step .name {
    flex: none;
    white-space: nowrap;
    font-weight: 500;
    color: var(--text);
}

/* The JS hands us "document search"; a capital makes it interface copy rather
   than a function signature. */
.step .name::first-letter { text-transform: uppercase; }

.step .detail {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--text-faint);
}

.step .detail:not(:empty)::before {
    content: "·";
    margin-right: 6px;
    color: var(--border-strong);
}

/* A failed step reads as one red line, not a red icon beside black text. */
.step.error, .step.error .name, .step.error .detail { color: var(--danger); }
.step.error .icon { color: var(--danger); }
.step.error .detail::before { color: currentColor; opacity: 0.5; }

.spinner {
    width: 14px;
    height: 14px;
    flex: none;
    border: 1.5px solid var(--border-strong);
    border-top-color: var(--text-muted);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.plan {
    padding-left: 16px;
    border-left: 1px solid var(--border-strong);
    font-size: 14px;
}

.plan ol { margin: 0; padding-left: 1.2em; color: var(--text-muted); }
.plan li { margin: 0.25em 0; }
.plan li::marker { color: var(--text-faint); }
.plan li.done { color: var(--text-faint); text-decoration: line-through; }
.plan li.current { color: var(--text); font-weight: 500; }

.notice {
    padding: 11px 14px;
    border: 1px solid var(--danger-border);
    border-radius: var(--radius);
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 14px;
}

.question {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-raised);
}

.question .q { font-weight: 500; margin-bottom: 12px; font-size: 14px; }
.question .options { display: flex; flex-wrap: wrap; gap: 6px; }

.question .option {
    height: 30px;
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--bg-raised);
    font-size: 13px;
    transition: background 0.12s var(--ease), border-color 0.12s var(--ease);
}

.question .option:hover { background: var(--bg-sunken); border-color: var(--text-faint); }

/* ---------- attachments and artifacts ---------- */

.attachments { display: flex; flex-wrap: wrap; gap: 8px; }

.attachment, .artifact-card {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 340px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-raised);
    text-align: left;
    color: inherit;
}

.artifact-card { cursor: pointer; transition: background 0.14s var(--ease), border-color 0.14s var(--ease); }
.artifact-card:hover { background: var(--bg-subtle); border-color: var(--border-strong); }

.attachment-glyph, .artifact-card-glyph {
    width: 30px;
    height: 30px;
    padding: 7px;
    flex: none;
    border-radius: 8px;
    background: var(--bg-sunken);
    color: var(--text-muted);
}

.attachment .meta, .artifact-card .meta { min-width: 0; flex: 1; }

.attachment .name, .artifact-card .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
}

.attachment .sub, .artifact-card .sub {
    font-size: 12px;
    color: var(--text-faint);
    line-height: 1.4;
}

.attachment-actions { display: flex; gap: 2px; }
.artifact-card-chevron { width: 15px; height: 15px; color: var(--text-faint); }
.artifact-card:hover .artifact-card-chevron { color: var(--text-muted); }

.inline-image-btn { padding: 0; border: 0; background: none; border-radius: var(--radius); }

.inline-image {
    max-width: 100%;
    max-height: 380px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: block;
}

/* ---------- artifact panel ---------- */

.artifact {
    width: min(46vw, 620px);
    flex: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg);
}

.artifact-head {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 10px 0 20px;
    border-bottom: 1px solid var(--border);
    flex: none;
}

.artifact-kind {
    padding: 3px 7px;
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1;
    color: var(--text-muted);
    text-transform: uppercase;
}

.artifact-kind:empty { display: none; }

.artifact-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
}

.artifact-actions { display: flex; gap: 2px; }
.artifact-body { flex: 1; min-height: 0; overflow: auto; background: var(--bg); }
.artifact-frame { width: 100%; height: 100%; border: 0; display: block; }
.artifact-image { display: block; margin: 24px auto; max-width: calc(100% - 48px); }

.artifact-html {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 28px 48px;
    font-size: 15px;
    line-height: 1.65;
}

.artifact-html > :first-child { margin-top: 0; }

.artifact-html h1, .artifact-html h2, .artifact-html h3 {
    margin: 1.6em 0 0.5em;
    font-weight: 600;
    line-height: 1.25;
}

.artifact-html h1 { font-size: 1.5em; letter-spacing: -0.024em; }
.artifact-html h2 { font-size: 1.2em; letter-spacing: -0.016em; }
.artifact-html h3 { font-size: 1.05em; letter-spacing: -0.01em; }
.artifact-html p { margin: 0 0 1em; }
.artifact-html ul, .artifact-html ol { margin: 0 0 1em; padding-left: 1.35em; }

.artifact-html table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.4em 0 1.2em;
    font-size: 14px;
}

.artifact-html td, .artifact-html th {
    border: 1px solid var(--border);
    padding: 8px 12px;
    text-align: left;
}

.artifact-html th { background: var(--bg-subtle); font-weight: 600; }
.artifact-html ins { background: var(--ins-bg); text-decoration: none; }
.artifact-html del { background: var(--del-bg); }

/* ---------- composer ---------- */

.composer-wrap { flex: none; padding: 8px 24px 24px; }

.composer {
    position: relative;
    width: 100%;
    max-width: var(--column);
    margin: 0 auto;
    padding: 10px 10px 8px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--bg-raised);
    box-shadow: var(--shadow);
    transition: border-color 0.14s var(--ease), box-shadow 0.14s var(--ease);
}

.composer:focus-within {
    border-color: var(--text-faint);
    box-shadow: var(--shadow-lg);
}

.composer.dragover { border-color: var(--focus); box-shadow: var(--focus-ring); }

.composer-input {
    max-height: 260px;
    overflow-y: auto;
    padding: 5px 6px 3px;
    outline: none;
    font-size: 15px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.composer-input.is-empty::before {
    content: attr(data-placeholder);
    color: var(--text-faint);
    pointer-events: none;
}

.mention {
    display: inline-block;
    padding: 1px 7px;
    margin: 0 1px;
    border-radius: 6px;
    background: var(--tint-bg);
    color: var(--tint-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    user-select: all;
}

.composer-actions { display: flex; align-items: center; gap: 4px; padding-top: 6px; }
.composer-actions .spacer { flex: 1; }

.send-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-text);
    transition: background 0.12s var(--ease), color 0.12s var(--ease);
}

.send-btn .icon { width: 17px; height: 17px; stroke-width: 2; }
.send-btn:hover:not(:disabled) { background: var(--accent-hover); }
.send-btn:disabled { background: var(--bg-sunken); color: var(--text-faint); cursor: default; }
.send-btn.stop .icon { fill: currentColor; stroke-width: 1.5; }

.pending-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 6px 8px; }

.pending-file {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 3px 0 9px;
    border-radius: 999px;
    background: var(--bg-sunken);
    font-size: 12px;
    color: var(--text-muted);
}

.pending-file .icon { width: 14px; height: 14px; }
.pending-file .icon-btn { width: 20px; height: 20px; }
.pending-file .icon-btn .icon { width: 13px; height: 13px; }
.pending-file .icon-btn:hover { background: var(--bg-hover); }

.pending-name {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- mention popup ---------- */

.mention-popup {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 10px);
    max-height: 306px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-raised);
    box-shadow: var(--shadow-lg);
    z-index: 30;
    animation: pop 0.14s var(--ease);
}

@keyframes pop { from { opacity: 0; transform: translateY(4px); } }

.mention-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.1s var(--ease);
}

.mention-item.active { background: var(--bg-hover); }

.mention-glyph {
    width: 28px;
    height: 28px;
    padding: 6px;
    flex: none;
    border-radius: 7px;
    background: var(--bg-sunken);
    color: var(--text-muted);
}

.mention-item.active .mention-glyph { background: var(--bg-raised); color: var(--text); }
.mention-item > div { min-width: 0; }
.mention-item .label { font-size: 14px; font-weight: 500; line-height: 1.35; }

.mention-item .desc {
    font-size: 12px;
    color: var(--text-faint);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- connectors drawer ---------- */

.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: var(--scrim);
    display: flex;
    justify-content: flex-end;
    z-index: 60;
    animation: fade 0.16s var(--ease);
}

@keyframes fade { from { opacity: 0; } }

/* A floating sheet rather than a full-bleed panel: the inset and the radius
   keep it reading as an object over the app, not a second application. */
.drawer {
    width: min(420px, 100%);
    margin: 12px 12px 12px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-raised);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: slide 0.2s var(--ease);
}

@keyframes slide { from { transform: translateX(16px); opacity: 0; } }

.drawer-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: none;
    padding: 20px 12px 16px 20px;
    border-bottom: 1px solid var(--border);
}

.drawer-heading { flex: 1; min-width: 0; }

.drawer-heading h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
}

.drawer-heading p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 12px 16px; }

.connector-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius);
    transition: background 0.12s var(--ease);
}

.connector-row:hover { background: var(--bg-subtle); }

.connector-glyph {
    width: 32px;
    height: 32px;
    padding: 8px;
    flex: none;
    border-radius: 8px;
    background: var(--bg-sunken);
    color: var(--text-muted);
}

.connector-row .info { flex: 1; min-width: 0; }
.connector-row .label { font-size: 14px; font-weight: 550; line-height: 1.4; }
.connector-row .desc { margin-top: 1px; font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.connector-row .count { margin-top: 6px; font-size: 11px; color: var(--text-faint); }

.switch {
    position: relative;
    width: 34px;
    height: 20px;
    flex: none;
    margin-top: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--border-strong);
    transition: background 0.16s var(--ease);
}

.switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--knob);
    box-shadow: 0 1px 2px rgba(18, 18, 23, 0.2);
    transition: transform 0.16s var(--ease);
}

.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(14px); background: var(--accent-text); }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
    .artifact { width: min(52vw, 560px); }
}

@media (max-width: 860px) {
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 70;
        margin-left: calc(-1 * var(--sidebar-width));
        box-shadow: var(--shadow-lg);
    }

    .app.sidebar-open .sidebar { margin-left: 0; }

    /* On a phone the sidebar is an overlay, so the topbar control is the only
       way back to it whatever the collapsed preference says. */
    #expand-sidebar { display: inline-flex; }

    .app.sidebar-open .sidebar-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 65;
        background: var(--scrim);
    }

    .topbar { padding-left: 8px; padding-right: 8px; }
    .transcript-inner { padding: 16px 16px 8px; gap: 20px; }
    .composer-wrap { padding: 8px 12px 16px; }
    .empty { padding: 16px 16px 40px; }
    .suggestions { grid-template-columns: 1fr; }
    .msg.user .bubble { max-width: 88%; }

    .drawer { margin: 0; border: 0; border-radius: 0; width: 100%; }

    /* The panel takes the screen; the thread is one swipe away behind it. */
    .app.with-artifact .main, .app.with-artifact .stage-divider { display: none; }
    .artifact { width: 100%; }
    .artifact-html { padding: 24px 20px 40px; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    .transcript { scroll-behavior: auto; }
    .spinner { animation: spin 0.7s linear infinite !important; }
}