@layer pages {
    .workspace-shell {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr) 320px;
        height: 100vh;
        min-height: 680px;
        overflow: hidden;
        background: var(--bg);
    }

    .workspace-shell > *,
    .chat-pane > *,
    .transcript-wrap,
    .transcript > *,
    .inspector-section > * {
        min-width: 0;
        max-width: 100%;
    }

    .session-rail,
    .inspector {
        background: var(--surface-rail);
        border-color: var(--border);
        border-style: solid;
        min-width: 0;
    }

    /* min-height: 0 because this is a grid item, and a grid item's automatic minimum size is its
       content's min-content height. Without it the rail grows past the 100vh row instead of
       letting .session-list scroll, and .workspace-shell's overflow:hidden clips the excess. */
    .session-rail {
        display: flex;
        flex-direction: column;
        gap: 18px;
        min-height: 0;
        padding: 20px 16px;
        border-width: 0 1px 0 0;
    }

    .inspector {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 20px 18px;
        border-width: 0 0 0 1px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .brand-row {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .brand-mark {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        background: transparent;
    }

    .brand-mark img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .brand-row h1 {
        margin: 0;
        font-size: 17px;
        line-height: 1.1;
        letter-spacing: 0;
    }

    .brand-row p,
    .inspector-section p {
        margin: 4px 0 0;
        color: var(--text-muted);
        font-size: 12px;
        line-height: 1.45;
    }

    .session-list {
        display: grid;
        gap: 8px;
        overflow: auto;
    }

    .session-scope-toggle {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        padding: 4px;
        border: 1px solid var(--border);
        border-radius: 9px;
        background: var(--surface-muted);
    }

    .session-scope-toggle button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        min-width: 0;
        padding: 7px 8px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 800;
    }

    .session-scope-toggle button.active {
        background: var(--surface);
        color: var(--text);
    }

    .session-scope-toggle button small {
        color: inherit;
        font-size: 10px;
        font-variant-numeric: tabular-nums;
    }

    .session-empty {
        margin: 0;
        padding: 10px;
        color: var(--text-muted);
        font-size: 12px;
        text-align: center;
    }

    .session-item {
        display: grid;
        gap: 4px;
        width: 100%;
        padding: 11px;
        text-align: left;
    }

    .session-item.active {
        border-color: var(--accent-border);
        background: var(--accent-bg);
    }

    .session-item span {
        font-size: 13px;
        font-weight: 800;
    }

    .session-item small {
        color: var(--text-muted);
        font-size: 11px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .session-owner {
        color: var(--accent);
    }

    .session-working {
        color: var(--success-fg);
        font-weight: 800;
    }

    /* Flex rather than fixed grid rows: the OAuth panel is conditional, and with explicit rows its
       absence handed the 1fr to the composer, which then filled half the pane. */

    /* Same grid-item rule as .session-rail: without min-height:0 the pane sizes to the whole
       transcript, pushing the composer below the clipped edge of the shell. The min-height:0 on
       .transcript-wrap and .transcript cannot help — the chain breaks here, one level above them. */
    .chat-pane {
        display: flex;
        flex-direction: column;
        min-width: 0;
        min-height: 0;
        background: var(--surface);
        container-type: inline-size;
    }

    .transcript-wrap {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        min-width: 0;
    }

    .topbar {
        position: sticky;
        top: 0;
        z-index: 20;
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        min-height: 68px;
        padding: 14px 20px;
        border-bottom: 1px solid var(--border);
        background: var(--surface);
    }

    .operator-banner {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 10px;
        padding: 8px 20px;
        border-bottom: 1px solid var(--accent-border);
        background: color-mix(in srgb, var(--accent) 8%, var(--surface));
        color: var(--text-muted);
        font-size: 12px;
    }

    .operator-banner > span {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 8px;
        min-width: 0;
    }

    .operator-banner strong {
        color: var(--accent);
    }

    .project-picker {
        flex: 1 1 auto;
        min-width: 0;
    }

    .project-picker span {
        display: block;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .project-picker strong {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
    }

    .topbar-actions {
        display: flex;
        gap: 10px;
        align-items: center;
        min-width: 0;
    }

    .compact-quota {
        display: none;
        align-items: center;
        gap: 10px;
    }

    .compact-quota > span {
        display: grid;
        line-height: 1.1;
    }

    .compact-quota small {
        color: var(--text-muted);
        font-size: 10px;
        font-weight: 700;
    }

    .compact-quota strong {
        font-size: 12px;
    }

    .compact-quota .ample { color: var(--success-fg); }
    .compact-quota .low { color: var(--warning-fg); }
    .compact-quota .critical { color: var(--danger-fg); }

    .user-identity {
        max-width: 140px;
        overflow: hidden;
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .logout-form {
        display: contents;
    }

    .model-select {
        height: 38px;
        max-width: 210px;
        min-width: 0;
        padding: 0 10px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        color: var(--text);
        font-size: 13px;
        font-weight: 700;
    }

    .oauth-panel {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin: 16px 20px 0;
        padding: 16px;
        border: 1px solid var(--warning-border);
        border-radius: 8px;
        background: var(--warning-bg);
    }

    .oauth-panel h2,
    .empty-state h2,
    .inspector-section h2 {
        margin: 0;
        font-size: 18px;
        line-height: 1.2;
        letter-spacing: 0;
    }

    .device-flow {
        display: grid;
        gap: 8px;
        min-width: 250px;
    }

    .device-flow a {
        color: var(--accent);
        font-size: 12px;
        font-weight: 700;
    }

    .device-code {
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 22px;
        font-weight: 800;
        letter-spacing: 0;
        text-align: center;
    }

    .transcript {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 14px;
        min-height: 0;
        padding: 20px;
        overflow-x: hidden;
        overflow-y: auto;
        overflow-anchor: none;
        scroll-behavior: smooth;
        background: var(--surface);
    }

    .jump-latest {
        position: absolute;
        left: 50%;
        bottom: 16px;
        transform: translateX(-50%);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 32px;
        padding: 0 12px;
        border: 1px solid var(--border-strong);
        border-radius: 999px;
        background: var(--surface);
        color: var(--text);
        font-size: 12px;
        font-weight: 700;
        box-shadow: var(--shadow);
    }

    .jump-latest[hidden] {
        display: none;
    }

    .empty-state {
        width: min(620px, 100%);
        margin: auto;
        padding: 28px;
        border: 1px dashed var(--border-strong);
        border-radius: 8px;
        background: var(--surface-muted);
        text-align: center;
    }

    .empty-state p {
        margin: 8px 0 0;
        color: var(--text-muted);
        font-size: 13px;
    }

    .message {
        display: grid;
        gap: 6px;
        max-width: 820px;
        min-width: 0;
    }

    /* fit-content, not a fixed width: a bubble that does not follow its content is just a coloured
       band, and a two-letter message filled 720px of it. The cap keeps a long message from running
       the width of the pane, where lines get too long to track. */
    .message.user {
        align-self: flex-end;
        width: fit-content;
        max-width: min(720px, 86%);
    }

    .message.assistant {
        align-self: flex-start;
        width: fit-content;
        max-width: min(820px, 92%);
    }

    .message-meta {
        display: flex;
        align-items: baseline;
        gap: 8px;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 800;
    }

    /* Upper-casing is for the role label only. A model id such as gpt-5.3-codex-spark is a literal
       string, so it keeps its own casing and drops to the monospace face. */
    .meta-role {
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .meta-origin {
        min-width: 0;
        overflow: hidden;
        font-family: var(--font-mono);
        font-size: 10.5px;
        font-weight: 500;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .message.user .message-meta {
        justify-content: flex-end;
        text-align: right;
    }

    .message-body {
        min-width: 0;
        max-width: 100%;
        padding: 13px 14px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface-muted);
        color: var(--text);
        font-size: 14px;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }

    /* pre-wrap belongs only to content that is literal text. An assistant reply arrives as HTML, and
       under pre-wrap every newline Markdig writes between tags rendered as a real line break — which
       is what put a blank line after each paragraph and list item. */
    .message.user .message-body,
    .message.streaming .message-body {
        white-space: pre-wrap;
    }

    .message.user .message-body {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--text-on-accent);
    }

    .message-text {
        white-space: pre-wrap;
    }

    .message-attachments {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 8px;
        min-width: min(520px, 70vw);
        margin-bottom: 9px;
        white-space: normal;
    }

    .message-attachments:last-child {
        margin-bottom: 0;
    }

    .attachment-image {
        display: grid;
        gap: 6px;
        min-width: 0;
        padding: 6px;
        border: 1px solid color-mix(in srgb, var(--text-on-accent) 35%, transparent);
        border-radius: 7px;
        color: inherit;
        text-decoration: none;
    }

    .attachment-image img {
        width: 100%;
        max-height: 260px;
        object-fit: contain;
        border-radius: 5px;
        background: color-mix(in srgb, var(--surface) 85%, transparent);
    }

    .attachment-image span {
        overflow: hidden;
        font-size: 11px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .attachment-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        min-width: 0;
        padding: 9px;
        border: 1px solid color-mix(in srgb, var(--text-on-accent) 35%, transparent);
        border-radius: 7px;
        color: inherit;
        text-decoration: none;
    }

    .attachment-card > span {
        display: grid;
        min-width: 0;
    }

    .attachment-card strong,
    .attachment-card small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .attachment-card small {
        opacity: 0.75;
    }

    .attachment-card.private {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .message.streaming .message-body {
        border-color: var(--success-border);
        background: var(--success-bg);
    }

    .cursor {
        display: inline-block;
        width: 7px;
        height: 1em;
        margin-left: 3px;
        transform: translateY(2px);
        background: var(--success-fg);
        animation: blink 1s step-end infinite;
    }

    @keyframes blink {
        50% {
            opacity: 0;
        }
    }

    .tool-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .read-only-label {
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 800;
    }

    .composer {
        display: grid;
        gap: 10px;
        padding: 14px 20px 18px;
        border-top: 1px solid var(--border);
        background: var(--surface-composer);
        min-width: 0;
    }

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

    .steer-queue {
        display: grid;
        gap: 6px;
        padding: 9px;
        border: 1px solid var(--accent-border);
        border-radius: 8px;
        background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    }

    .steer-queue-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .steer-queue-item {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        min-width: 0;
        padding: 6px 7px;
        border: 1px solid var(--border);
        border-radius: 7px;
        background: var(--surface);
        font-size: 12px;
    }

    .steer-queue-item > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pending-attachment {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        max-width: min(320px, 100%);
        padding: 7px 8px;
        border: 1px solid var(--border);
        border-radius: 7px;
        background: var(--surface-muted);
    }

    .pending-attachment > span {
        display: grid;
        min-width: 0;
    }

    .pending-attachment strong,
    .pending-attachment small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pending-attachment strong {
        font-size: 12px;
    }

    .pending-attachment small {
        color: var(--text-muted);
        font-size: 10px;
    }

    .attachment-error {
        margin: 0;
        color: var(--danger-fg);
        font-size: 12px;
        font-weight: 700;
    }

    .composer textarea {
        width: 100%;
        min-height: 76px;
        max-height: 180px;
        resize: vertical;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--text);
        background: var(--surface);
        font-size: 14px;
        line-height: 1.45;
    }

    .composer textarea:focus {
        border-color: var(--accent-border);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
    }

    .composer-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-width: 0;
    }

    .active-run-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .composer-leading-actions {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
        flex-wrap: wrap;
    }

    .attachment-input {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .attachment-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 9px;
        border: 1px solid var(--border);
        border-radius: 7px;
        background: var(--surface);
        color: var(--text-muted);
        cursor: pointer;
        font-size: 12px;
        font-weight: 800;
    }

    .attachment-button:hover {
        border-color: var(--accent-border);
        color: var(--text);
    }

    .attachment-input:disabled + .attachment-button {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .inspector-section {
        display: grid;
        gap: 10px;
        padding: 14px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        min-width: 0;
    }

    .inspector-section dl {
        display: grid;
        grid-template-columns: 80px minmax(0, 1fr);
        gap: 8px;
        margin: 0;
        font-size: 12px;
    }

    .inspector-section dt {
        color: var(--text-muted);
        font-weight: 800;
    }

    .inspector-section dd {
        min-width: 0;
        margin: 0;
        overflow-wrap: anywhere;
    }

    .quota {
        display: grid;
        gap: 5px;
        padding: 10px 11px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
    }

    .quota + .quota {
        margin-top: 8px;
    }

    .quota-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        font-size: 12px;
        font-weight: 800;
    }

    .quota-head strong {
        font-size: 15px;
        font-variant-numeric: tabular-nums;
    }

    .quota-track {
        height: 6px;
        overflow: hidden;
        border-radius: 999px;
        background: var(--surface-muted);
    }

    .quota-fill {
        height: 100%;
        border-radius: inherit;
    }

    .quota-fill.ample { background: var(--success-fg); }
    .quota-fill.low { background: var(--warning-fg); }
    .quota-fill.critical { background: var(--danger-fg); }

    .quota-head .ample { color: var(--success-fg); }
    .quota-head .low { color: var(--warning-fg); }
    .quota-head .critical { color: var(--danger-fg); }

    .quota small,
    .quota-note {
        color: var(--text-muted);
        font-size: 11px;
    }

    .quota-note {
        margin: 8px 0 0;
    }

    /* No border and no box: these rows say what the model may call, they are not buttons. Giving
       them the shape of the one real control beside them offered six invitations to click that go
       nowhere. */
    .account-id {
        display: block;
        overflow: hidden;
        font-size: 11px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tool-granted {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 700;
    }

    .tool-granted svg {
        flex: none;
        color: var(--success-fg);
    }

    /* The only pressable thing in this section, and now the only one shaped like it. */
    .auto-approve {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 34px;
        margin-top: 10px;
        padding: 0 10px;
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        background: var(--surface);
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 700;
        text-align: left;
        cursor: pointer;
    }

    .auto-approve:hover {
        border-color: var(--border-strong);
        color: var(--text);
    }

    .auto-approve.on {
        border-color: var(--warning-border);
        background: var(--warning-bg);
        color: var(--warning-fg);
    }

    .auto-approve-state {
        margin-left: auto;
        font-variant-numeric: tabular-nums;
        opacity: 0.8;
    }

    .policy-notice.warn {
        align-items: flex-start;
        margin: 0;
        color: var(--warning-fg);
        font-size: 11px;
        line-height: 1.45;
    }

    .policy-notice.warn svg {
        flex: none;
        margin-top: 2px;
    }

    .events {
        gap: 8px;
    }

    /* Blocks that are worth a glance but not a permanent panel: the summary carries the one line
       that matters and the rest folds away. */
    details.folding > summary {
        display: grid;
        gap: 6px;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        cursor: pointer;
        list-style: none;
    }

    details.folding > summary::-webkit-details-marker {
        display: none;
    }

    /* The chevron is the only thing saying this opens, so it is visible without hovering. */
    details.folding > summary .section-label::after {
        content: "▸";
        margin-left: 6px;
        font-size: 10px;
    }

    details.folding[open] > summary .section-label::after {
        content: "▾";
    }

    details.folding > summary:focus-visible {
        outline: 2px solid var(--focus-ring);
        outline-offset: 3px;
        border-radius: 4px;
    }

    .fold-latest {
        display: flex;
        gap: 8px;
        min-width: 0;
        max-width: 100%;
        color: var(--text-muted);
        font-size: 11px;
        font-variant-numeric: tabular-nums;
    }

    .fold-latest-message {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .fold-latest.success .fold-latest-message { color: var(--success-fg); }
    .fold-latest.warning .fold-latest-message { color: var(--warning-fg); }
    .fold-latest.error { color: var(--danger-fg); }
    .fold-latest.error .fold-latest-message { color: var(--danger-fg); }

    details.folding[open] > dl,
    details.folding[open] > .secondary-button {
        margin-top: 10px;
    }

    details.folding[open] .event-row:first-of-type {
        border-top: 1px solid var(--border);
        margin-top: 10px;
    }

    .event-row {
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 8px;
        padding: 8px 0;
        border-top: 1px solid var(--border);
        min-width: 0;
    }

    .event-row:first-of-type {
        border-top: 0;
    }

    .event-row span {
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 800;
    }

    .event-row p {
        margin: 0;
        color: var(--text);
        font-size: 12px;
        line-height: 1.35;
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .event-row.error p {
        color: var(--danger-fg);
    }

    .event-row.warning p {
        color: var(--warning-fg);
    }

    .event-row.success p {
        color: var(--success-fg);
    }

    /* ---------- session rail ---------- */

    .rail-nav {
        display: grid;
        gap: 2px;
    }

    .rail-link {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        min-height: var(--control-h-md);
        padding: 0 var(--space-2);
        border-radius: var(--radius-lg);
        color: var(--text-muted);
        font-size: var(--text-sm);
        font-weight: var(--weight-bold);
        text-decoration: none;
    }

    .rail-link:hover {
        color: var(--text);
        background: var(--surface-muted);
    }

    .rail-link .count-badge.pending {
        margin-left: auto;
        background: var(--warning-bg);
        color: var(--warning-fg);
    }


    .session-filter {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 34px;
        padding: 0 10px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        color: var(--text-muted);
    }

    .session-filter input {
        width: 100%;
        min-width: 0;
        border: 0;
        outline: none;
        background: none;
        color: var(--text);
        font-size: 13px;
    }

    .session-row {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 4px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
    }

    .session-row.active {
        border-color: var(--accent-border);
        background: var(--accent-bg);
    }

    .session-row .session-item {
        border: 0;
        background: none;
        grid-column: 1;
    }

    .session-actions {
        display: flex;
        gap: 2px;
        grid-column: 2;
        padding-right: 6px;
        opacity: 0;
    }

    .session-row:hover .session-actions,
    .session-row:focus-within .session-actions {
        opacity: 1;
    }

    .session-rename {
        grid-column: 1 / -1;
        width: 100%;
        height: 38px;
        padding: 0 10px;
        border: 1px solid var(--accent-border);
        border-radius: 8px;
        outline: none;
        background: var(--surface);
        color: var(--text);
        font-size: 13px;
        font-weight: 700;
    }

    .session-confirm {
        grid-column: 1 / -1;
        padding: 10px;
        border-top: 1px solid var(--border);
    }

    .session-confirm p {
        margin: 0 0 8px;
        color: var(--text);
        font-size: 12px;
        line-height: 1.4;
    }

    .session-confirm-actions {
        display: flex;
        gap: 6px;
    }

    .session-confirm-actions button {
        flex: 1 1 0;
        min-height: 30px;
        font-size: 12px;
    }

    /* ---------- reasoning effort picker ---------- */

    .effort-picker {
        position: relative;
        flex: none;
    }

    /* Deliberately not a fixed width: labels come from the backend and can be anything, including a
       raw identifier the app has never seen. */

    .effort-trigger {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 38px;
        min-width: 96px;
        max-width: 220px;
        padding: 0 10px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        color: var(--text);
        font-size: 13px;
    }

    .effort-trigger-label {
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .effort-trigger strong {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 700;
    }

    .effort-panel {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        z-index: 50;
        display: grid;
        gap: 2px;
        width: 300px;
        max-height: 380px;
        padding: 6px;
        overflow-y: auto;
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        background: var(--surface);
        box-shadow: var(--shadow);
    }

    .effort-option {
        display: grid;
        gap: 2px;
        padding: 8px 10px;
        border: 0;
        border-radius: 6px;
        background: none;
        color: var(--text);
        text-align: left;
    }

    .effort-option:hover:not(:disabled) {
        background: var(--surface-muted);
    }

    .effort-option.blocked {
        opacity: 1;
        color: var(--text-muted);
        background: repeating-linear-gradient(
            135deg,
            transparent,
            transparent 6px,
            var(--hatch) 6px,
            var(--hatch) 12px);
    }

    .effort-option-head {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .effort-option-label {
        font-size: 13px;
        font-weight: 700;
    }

    .effort-check {
        margin-left: auto;
        color: var(--accent);
    }

    .effort-option-note {
        color: var(--text-muted);
        font-size: 12px;
        line-height: 1.35;
    }

    .effort-empty {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        max-width: 260px;
        min-height: 38px;
        padding: 0 10px;
        border: 1px solid var(--warning-border);
        border-radius: 8px;
        background: var(--warning-bg);
        color: var(--warning-fg);
        font-size: 12px;
        font-weight: 700;
    }

    .effort-empty span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

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

    .transcript-note {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        width: min(820px, 100%);
        padding: 12px 14px;
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        background: var(--surface-muted);
        color: var(--text);
        font-size: 13px;
    }

    .transcript-note.error {
        border-color: var(--danger-border);
        background: var(--danger-bg);
        color: var(--danger-fg);
    }

    .transcript-note p {
        flex: 1 1 auto;
        margin: 0;
        line-height: 1.45;
    }

    .transcript-note small {
        display: block;
        margin-top: 3px;
        color: var(--text-muted);
        font-size: 11px;
    }

    .transcript-note .secondary-button {
        flex: none;
        min-height: 30px;
        font-size: 12px;
    }

    .thinking {
        color: var(--text-muted);
        font-size: 13px;
        font-weight: 700;
    }

    .dots::after {
        content: "...";
        animation: thinking-dots 1.4s steps(4, end) infinite;
    }

    @keyframes thinking-dots {
        0% { clip-path: inset(0 100% 0 0); }
        100% { clip-path: inset(0 0 0 0); }
    }

    /* ---------- tool cards ---------- */

    /* Tool activity is a one-line transcript entry until the person asks for its details. This
       keeps model prose visually primary while preserving arguments, sources, images and output. */
    .tool-card {
        display: block;
        width: min(820px, 100%);
        max-width: 100%;
        min-width: 0;
        padding: 0;
        border: 0;
        border-radius: 6px;
        background: transparent;
        box-sizing: border-box;
        overflow: hidden;
    }

    .tool-card.state-pendingapproval {
        border: 1px solid var(--warning-border);
        background: var(--warning-bg);
        box-shadow: var(--shadow);
    }

    .tool-card.state-failed {
        color: var(--danger-fg);
    }

    .tool-card-header {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 8px;
        min-height: 34px;
        min-width: 0;
        padding: 5px 4px;
        border-radius: 6px;
        cursor: pointer;
        color: var(--text-muted);
        list-style: none;
    }

    .tool-card-header::-webkit-details-marker {
        display: none;
    }

    .tool-card-header:hover {
        background: var(--surface-muted);
        color: var(--text);
    }

    .state-pendingapproval > .tool-card-header {
        padding-right: 10px;
        padding-left: 10px;
    }

    .tool-card-title {
        display: flex;
        align-items: baseline;
        gap: 7px;
        min-width: 0;
        overflow: hidden;
    }

    .tool-card-title strong {
        min-width: 0;
        max-width: 42%;
        flex: 0 1 auto;
        overflow: hidden;
        color: var(--text);
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tool-card-title span {
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
        color: var(--text-muted);
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 12px;
        line-height: 1.45;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tool-state {
        flex: none;
        padding: 0;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 800;
        white-space: nowrap;
    }

    .tool-card-chevron {
        width: 14px;
        height: 14px;
        transition: transform 140ms ease;
    }

    .tool-card[open] > .tool-card-header .tool-card-chevron {
        transform: rotate(180deg);
    }

    .tool-card-body {
        display: grid;
        gap: 10px;
        min-width: 0;
        padding: 7px 4px 5px 26px;
    }

    .state-pendingapproval > .tool-card-body {
        padding: 7px 12px 12px;
    }

    .state-pendingapproval .tool-state {
        color: var(--warning-fg);
    }

    .state-approved .tool-state {
        color: var(--accent);
    }

    .state-completed .tool-state {
        color: var(--success-fg);
    }

    .state-running .tool-state {
        color: var(--accent);
        animation: working-pulse 1.8s ease-in-out infinite;
    }

    @keyframes working-pulse {
        50% { opacity: 0.55; }
    }

    .state-failed .tool-state,
    .state-denied .tool-state {
        color: var(--danger-fg);
    }

    .tool-card pre {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        max-height: 320px;
        margin: 0;
        padding: 12px;
        overflow-x: hidden;
        overflow-y: auto;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        color: var(--code-fg);
        font-size: 12px;
        line-height: 1.5;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .tool-output,
    .tool-output > * {
        min-width: 0;
        max-width: 100%;
    }

    .tool-output summary {
        cursor: pointer;
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 700;
    }

    .tool-output pre {
        margin-top: 8px;
    }

    .tool-error {
        margin: 0;
        color: var(--danger-fg);
        font-size: 12px;
        line-height: 1.45;
    }

    .web-search-result {
        display: grid;
        gap: 10px;
    }

    .web-source-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        color: var(--text-muted);
        font-size: 12px;
    }

    .web-source-heading span {
        padding: 2px 7px;
        border-radius: 999px;
        background: var(--surface);
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .web-source-list {
        display: grid;
        gap: 6px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .web-source-list li {
        display: grid;
        gap: 4px;
        padding: 9px 10px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
    }

    .web-source-list a {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        min-width: 0;
        color: var(--accent);
        font-size: 12px;
        font-weight: 750;
        text-decoration: none;
    }

    .web-source-list a:hover {
        text-decoration: underline;
    }

    .web-source-list a span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .web-source-list a small {
        flex: none;
        color: var(--text-muted);
        font-size: 10px;
        font-weight: 650;
    }

    .web-source-list p {
        display: -webkit-box;
        margin: 0;
        overflow: hidden;
        color: var(--text-muted);
        font-size: 11px;
        line-height: 1.4;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    /* The browser image tools return only a private image id in their persisted result. The PNG is
       loaded separately through the authenticated content endpoint, so no multi-megabyte base64
       payload is placed in the Blazor render tree or the transcript database. */
    .generated-image {
        display: grid;
        gap: 10px;
        width: fit-content;
        max-width: 100%;
        margin: 0;
    }

    .generated-image-preview {
        display: block;
        width: fit-content;
        max-width: 100%;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 8px;
        background:
            linear-gradient(45deg, var(--surface-muted) 25%, transparent 25%),
            linear-gradient(-45deg, var(--surface-muted) 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, var(--surface-muted) 75%),
            linear-gradient(-45deg, transparent 75%, var(--surface-muted) 75%),
            var(--surface);
        background-position: 0 0, 0 6px, 6px -6px, -6px 0;
        background-size: 12px 12px;
    }

    .generated-image-preview:focus-visible {
        outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
        outline-offset: 2px;
    }

    .generated-image img {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: min(720px, 65vh);
        object-fit: contain;
    }

    .generated-image figcaption {
        display: grid;
        gap: 6px;
        color: var(--text-muted);
        font-size: 12px;
        line-height: 1.45;
    }

    .generated-image figcaption p {
        max-width: 72ch;
        margin: 0;
        color: var(--text-secondary);
        overflow-wrap: anywhere;
    }

    .generated-image-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 5px 12px;
    }

    .generated-image-meta a {
        color: var(--accent);
        font-weight: 700;
    }

    .generated-image-download {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .generated-image-download svg {
        width: 14px;
        height: 14px;
    }

    /* ---------- markdown ---------- */

    .message.assistant .message-body > :first-child {
        margin-top: 0;
    }

    .message.assistant .message-body > :last-child {
        margin-bottom: 0;
    }

    .message-body h1,
    .message-body h2,
    .message-body h3,
    .message-body h4 {
        margin: 18px 0 8px;
        font-size: 15px;
        line-height: 1.3;
    }

    .message-body h1 {
        font-size: 18px;
    }

    .message-body h2 {
        font-size: 16px;
    }

    .message-body p {
        margin: 0 0 10px;
    }

    .message-body ul,
    .message-body ol {
        margin: 0 0 10px;
        padding-left: 22px;
    }

    .message-body li {
        margin-bottom: 4px;
    }

    /* A blank line between list items makes Markdig emit a loose list, wrapping each item's content
       in <p>. Left alone, the paragraph margin stacks with the item margin and the nested list
       margin, which spaced items ~26px apart. A loose list should read like a tight one. */
    .message-body li > p {
        margin: 0;
    }

    /* An item that genuinely holds several paragraphs still needs separation between them. */
    .message-body li > p + p {
        margin-top: 8px;
    }

    .message-body li > ul,
    .message-body li > ol {
        margin: 4px 0 0;
    }

    .message-body a {
        color: var(--accent);
        text-decoration: underline;
    }

    .message.user .message-body a {
        color: var(--text-on-accent);
    }

    .message-body blockquote {
        margin: 0 0 10px;
        padding-left: 12px;
        border-left: 3px solid var(--border-strong);
        color: var(--text-muted);
    }

    .message-body :not(pre) > code {
        padding: 0.12em 0.36em;
        border: 1px solid var(--border);
        border-radius: 4px;
        background: var(--surface);
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 0.88em;
        overflow-wrap: anywhere;
    }

    .message-body table {
        width: 100%;
        margin: 0 0 10px;
        border-collapse: collapse;
        font-size: 13px;
        table-layout: fixed;
    }

    .message-body th,
    .message-body td {
        padding: 6px 8px;
        border: 1px solid var(--border);
        text-align: left;
        overflow-wrap: anywhere;
    }

    .message-body img {
        max-width: 100%;
        height: auto;
    }

    .code-block {
        position: relative;
        margin: 0 0 10px;
        padding: 0;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        max-width: 100%;
        min-width: 0;
    }

    .code-block-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 10px;
        border-bottom: 1px solid var(--border);
        background: var(--surface-muted);
    }

    .code-block-language {
        color: var(--text-muted);
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 11px;
        font-weight: 700;
        text-transform: lowercase;
    }

    .code-block-copy {
        padding: 2px 8px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface);
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
    }

    .code-block-copy:hover {
        color: var(--text);
    }

    .code-block > code {
        display: block;
        padding: 12px;
        overflow-x: auto;
        color: var(--code-fg);
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 12.5px;
        line-height: 1.55;
        white-space: pre;
    }

    .composer-status {
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    .context-compact {
        padding-left: 9px;
        border-left: 1px solid var(--border);
        color: var(--text-muted);
        font-size: 11px;
        font-variant-numeric: tabular-nums;
        font-weight: 700;
        white-space: nowrap;
    }

    .usage-section {
        gap: 8px;
    }

    .context-head,
    .usage-block-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        min-width: 0;
        font-size: 12px;
        font-variant-numeric: tabular-nums;
    }

    .context-head strong,
    .usage-block-head strong {
        overflow-wrap: anywhere;
    }

    .context-head span,
    .usage-block-head span {
        flex: none;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 800;
    }

    .context-track {
        height: 7px;
        overflow: hidden;
        border-radius: 999px;
        background: var(--surface-muted);
    }

    .context-fill {
        height: 100%;
        min-width: 0;
        border-radius: inherit;
    }

    .context-fill.ample { background: var(--success-fg); }
    .context-fill.low { background: var(--warning-fg); }
    .context-fill.critical { background: var(--danger-fg); }

    .usage-remaining,
    .usage-empty,
    .usage-disclaimer {
        margin: 0 !important;
        overflow-wrap: anywhere;
    }

    .usage-block {
        display: grid;
        gap: 3px;
        padding-top: 8px;
        border-top: 1px solid var(--border);
        min-width: 0;
    }

    .usage-block p,
    .usage-block small {
        margin: 0;
        overflow-wrap: anywhere;
        font-variant-numeric: tabular-nums;
    }

    .usage-block small {
        color: var(--text-muted);
        font-size: 10.5px;
    }

    .inspector-section dl.usage-cost-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
        margin: 3px 0 1px;
        min-width: 0;
        font-size: 10.5px;
        font-variant-numeric: tabular-nums;
    }

    .usage-cost-grid > div {
        display: grid;
        grid-template-columns: minmax(70px, 1fr) auto;
        gap: 4px;
        align-items: baseline;
        min-width: 0;
    }

    .usage-cost-grid dt,
    .usage-cost-grid dd {
        min-width: 0;
        margin: 0;
        overflow-wrap: anywhere;
    }

    .usage-cost-grid dt {
        color: var(--text-muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .usage-cost-grid dd {
        color: var(--text);
        text-align: right;
        white-space: nowrap;
    }

    .usage-note.warning {
        color: var(--warning-fg);
    }

    .usage-disclaimer {
        padding-top: 7px;
        border-top: 1px dashed var(--border);
        font-size: 10px !important;
    }

    @container (max-width: 820px) {
        .topbar {
            align-items: stretch;
            flex-direction: column;
            gap: 10px;
        }

        .topbar-actions {
            flex-wrap: wrap;
            width: 100%;
        }

        .model-select {
            order: 0;
            flex: 1 1 190px;
            min-width: 150px;
            max-width: none;
        }

        .effort-picker,
        .effort-empty {
            order: 0;
            flex: 0 1 160px;
            min-width: 130px;
        }

        .topbar-actions .icon-button,
        .user-identity {
            order: 1;
        }

        .user-identity {
            margin-left: auto;
        }
    }

    @container (max-width: 560px) {
        .tool-card-header {
            gap: 6px;
        }

        .tool-card-title {
            gap: 5px;
        }

        .tool-card-title strong {
            max-width: 46%;
        }

        .tool-state {
            font-size: 10px;
        }

        .tool-card-body {
            padding-left: 22px;
        }
    }
}