/* ChatCitation.razor.css.rz.scp.css */
.citation[b-e1b402fxr8] {
    display: inline-flex;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    margin-top: 1rem;
    margin-right: 1rem;
    border-bottom: 2px solid #a770de;
    gap: 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    background-color: #ffffff;
}

    .citation[href]:hover[b-e1b402fxr8] {
        outline: 1px solid #865cb1;
    }

    .citation svg[b-e1b402fxr8] {
        width: 1.5rem;
        height: 1.5rem;
    }

    .citation:active[b-e1b402fxr8] {
        background-color: rgba(0,0,0,0.05);
    }

.citation-content[b-e1b402fxr8] {
    display: flex;
    flex-direction: column;
}

.citation-file[b-e1b402fxr8] {
    font-weight: 600;
}

/* ChatDelegationView.razor.css.rz.scp.css */
.delegation-message[b-xv8re7e0f7] {
    margin: 12px 0;
    border: 1px solid var(--neutral-stroke-divider);
    border-radius: 8px;
    background: var(--neutral-layer-floating);
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.delegation-header[b-xv8re7e0f7] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    background: var(--neutral-layer-card-hover);
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--neutral-stroke-divider);
}

.delegation-header:hover[b-xv8re7e0f7] {
    background: var(--neutral-layer-card-pressed);
}

.delegation-icon[b-xv8re7e0f7] {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    color: var(--accent-foreground-rest);
    flex-shrink: 0;
}

.delegation-icon svg[b-xv8re7e0f7] {
    width: 100%;
    height: 100%;
}

.delegation-title[b-xv8re7e0f7] {
    flex: 1;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    font-size: 14px;
    line-height: 1.4;
}

.delegation-title strong[b-xv8re7e0f7] {
    color: var(--accent-foreground-rest);
    font-weight: 600;
}

.delegation-expand-icon[b-xv8re7e0f7] {
    width: 16px;
    height: 16px;
    color: var(--neutral-foreground-hint);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.delegation-expand-icon svg[b-xv8re7e0f7] {
    width: 100%;
    height: 100%;
}

.delegation-expand-icon.expanded[b-xv8re7e0f7] {
    transform: rotate(180deg);
}

.delegation-content[b-xv8re7e0f7] {
    padding: 16px;
    background: var(--neutral-layer-card);
    border-top: 1px solid var(--neutral-stroke-divider);
}

.delegation-message-label[b-xv8re7e0f7] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.delegation-message-text[b-xv8re7e0f7] {
    padding: 12px;
    background: var(--neutral-layer-floating);
    border: 1px solid var(--neutral-stroke-divider);
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--neutral-foreground-rest);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.delegation-feedback-notice[b-xv8re7e0f7] {
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--accent-layer-card-default);
    border: 1px solid var(--accent-stroke-control-default);
    border-radius: 6px;
    display: flex;
    align-items: center;
    font-size: 13px;
    color: var(--accent-foreground-rest);
}

.delegation-feedback-notice svg[b-xv8re7e0f7] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    flex-shrink: 0;
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
    .delegation-message[b-xv8re7e0f7] {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
}

/* ChatLayoutAreaView.razor.css.rz.scp.css */
.layout-area-message[b-to00ol2kvi] {
    margin: 12px 0;
    border: 1px solid var(--neutral-stroke-divider);
    border-radius: 8px;
    background: var(--neutral-layer-floating);
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.layout-area-header[b-to00ol2kvi] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--neutral-layer-card-hover);
    border-bottom: 1px solid var(--neutral-stroke-divider);
}

.layout-area-icon[b-to00ol2kvi] {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    color: var(--accent-foreground-rest);
    flex-shrink: 0;
}

.layout-area-icon svg[b-to00ol2kvi] {
    width: 100%;
    height: 100%;
}

.layout-area-title[b-to00ol2kvi] {
    flex: 1;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    font-size: 14px;
    line-height: 1.4;
}

.layout-area-title strong[b-to00ol2kvi] {
    color: var(--accent-foreground-rest);
    font-weight: 600;
}

.layout-area-id[b-to00ol2kvi] {
    color: var(--neutral-foreground-hint);
    font-weight: normal;
    font-size: 13px;
}

.layout-area-content[b-to00ol2kvi] {
    padding: 16px;
    background: var(--neutral-layer-card);
    min-height: 200px;
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
    .layout-area-message[b-to00ol2kvi] {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
}

/* ChatMessageItem.razor.css.rz.scp.css */
.user-message[b-thi8tx8f54] {
    background: rgb(182 215 232);
    align-self: flex-end;
    min-width: 25%;
    max-width: calc(100% - 5rem);
    padding: 0.5rem 1.25rem;
    border-radius: 0.25rem;
    /* Kept as a fixed PAIR: this bubble sets its own background, so it must set its own ink.
       Theming only one half is how the rest of this file broke. */
    color: #1F2937;
    white-space: pre-wrap;
}

.assistant-message[b-thi8tx8f54],
.assistant-function[b-thi8tx8f54] {
    display: grid;
    grid-template-rows: min-content;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.25rem;
}

.assistant-message-header[b-thi8tx8f54] {
    font-weight: 600;
}

.assistant-message-text[b-thi8tx8f54] {
    grid-column-start: 2;
}

.assistant-message-icon[b-thi8tx8f54] {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    width: 1.5rem;
    height: 1.5rem;
    color: #ffffff;
    background: #9b72ce;
}

.assistant-message-icon svg[b-thi8tx8f54] {
    width: 1rem;
    height: 1rem;
}

.assistant-function[b-thi8tx8f54] {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.assistant-function-icon[b-thi8tx8f54] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
}

.assistant-search-icon svg[b-thi8tx8f54] {
    width: 1rem;
    height: 1rem;
}

.assistant-function-content[b-thi8tx8f54] {
    align-content: center;
}

.assistant-function-phrase[b-thi8tx8f54] {
    font-weight: 600;
}

/* Default styling for markdown-formatted assistant messages */
[b-thi8tx8f54] ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    padding-left: 0;
}

[b-thi8tx8f54] ol {
    list-style-type: decimal;
    margin-left: 1.5rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    padding-left: 0;
}

[b-thi8tx8f54] li {
    margin: 0.125rem 0;
    line-height: 1.4;
}

[b-thi8tx8f54] li+li {
    margin-top: 0.125rem;
}

[b-thi8tx8f54] strong {
    font-weight: 600;
}

[b-thi8tx8f54] h3 {
    margin: 1rem 0;
    font-weight: 600;
}

[b-thi8tx8f54] p+p {
    margin-top: 0.5rem;
}

[b-thi8tx8f54] p+ul,
[b-thi8tx8f54] p+ol {
    margin-top: 0.25rem;
}

[b-thi8tx8f54] ul+p,
[b-thi8tx8f54] ol+p {
    margin-top: 0.25rem;
}

[b-thi8tx8f54] table {
    margin: 1rem 0;
}

[b-thi8tx8f54] th {
    text-align: left;
    border-bottom: 1px solid silver;
}

[b-thi8tx8f54] th,
[b-thi8tx8f54] td {
    padding: 0.1rem 0.5rem;
}

[b-thi8tx8f54] th,
[b-thi8tx8f54] tr:nth-child(even) {
    /* A black wash disappears on a dark surface; the divider token reads on both. */
    background-color: var(--neutral-fill-stealth-hover, rgba(0, 0, 0, 0.05));
}

[b-thi8tx8f54] pre>code {
    /* 🚨 Themed, not white. A hardcoded white background with NO foreground inherits the theme's
       text colour — near-white in dark mode — so every code block rendered white on white. That is
       what a /code answer is mostly MADE of, which is why it read as "the chat is blank". Any
       background here must state its own foreground; the two travel together or not at all. */
    background-color: var(--neutral-fill-secondary-rest, #f6f8fa);
    color: var(--neutral-foreground-rest, #24292e);
    display: block;
    padding: 0.5rem 1rem;
    margin: 1rem 0;
    overflow-x: auto;
}

/* Incomplete code block styling */
.incomplete-code-block[b-thi8tx8f54] {
    border: 1px solid #e1e5e9;
    border-radius: 6px;
    margin: 1rem 0;
    background-color: #f8f9fa;
}

.code-block-header[b-thi8tx8f54] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: #f1f3f4;
    border-bottom: 1px solid #e1e5e9;
    border-radius: 6px 6px 0 0;
    font-size: 0.875rem;
}

.code-language[b-thi8tx8f54] {
    font-weight: 600;
    color: #586069;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

/* New centered loading area */
.code-loading-area[b-thi8tx8f54] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    background-color: var(--neutral-fill-secondary-rest, #ffffff);
    color: var(--neutral-foreground-rest, #24292e);
    border-radius: 0 0 6px 6px;
    min-height: 120px;
}

.centered-spinner[b-thi8tx8f54] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.spinner-container[b-thi8tx8f54] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Pulsing background circle */
.pulse-spinner[b-thi8tx8f54] {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(155, 114, 206, 0.1);
    animation: pulse-b-thi8tx8f54 2s ease-in-out infinite;
}

/* Rotating spinner SVG */
.rotating-spinner[b-thi8tx8f54] {
    position: relative;
    z-index: 1;
    color: #9b72ce;
    animation: rotate-b-thi8tx8f54 1.5s linear infinite;
}

.spinner-track[b-thi8tx8f54] {
    opacity: 0.25;
}

.spinner-fill[b-thi8tx8f54] {
    animation: dash-b-thi8tx8f54 1.5s ease-in-out infinite;
}

/* Loading text with animated dots */
.loading-text[b-thi8tx8f54] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
}

.typing-dots[b-thi8tx8f54] {
    color: #374151;
}

.dots[b-thi8tx8f54] {
    display: flex;
    gap: 0.125rem;
}

.dot[b-thi8tx8f54] {
    animation: bounce-b-thi8tx8f54 1.4s ease-in-out infinite both;
    color: #9b72ce;
    font-weight: bold;
}

.dot:nth-child(1)[b-thi8tx8f54] { animation-delay: -0.32s; }
.dot:nth-child(2)[b-thi8tx8f54] { animation-delay: -0.16s; }
.dot:nth-child(3)[b-thi8tx8f54] { animation-delay: 0s; }

/* Animations */
@keyframes pulse-b-thi8tx8f54 {
    0%, 100% {
        transform: scale(1);
        opacity: 0.1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.2;
    }
}

@keyframes rotate-b-thi8tx8f54 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes dash-b-thi8tx8f54 {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

@keyframes bounce-b-thi8tx8f54 {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Legacy code content styles (for completed blocks) */
.code-content[b-thi8tx8f54] {
    padding: 0.75rem 1rem;
    margin: 0;
    background-color: var(--neutral-fill-secondary-rest, #ffffff);
    border-radius: 0 0 6px 6px;
    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--neutral-foreground-rest, #24292e);
    overflow-x: auto;
    white-space: pre-wrap;
}

.code-content code[b-thi8tx8f54] {
    background: none;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

/* ChatMessageList.razor.css.rz.scp.css */
.message-list-container[b-u3cq2go1gw] {
    padding: 2rem 1.5rem;
    flex-grow: 1;
    overflow: hidden;
    box-sizing: border-box;
}

.message-list[b-u3cq2go1gw] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.no-messages[b-u3cq2go1gw] {
    text-align: center;
    font-size: 1.25rem;
    color: #999;
    margin-top: calc(40vh - 18rem);
}

chat-messages>[b-u3cq2go1gw]  div:last-of-type {
    /* Adds some vertical buffer to so that suggestions don't overlap the output when they appear */
    margin-bottom: 2rem;
}

/* ChatSidePanel.razor.css.rz.scp.css */
.chat-side-panel[b-cz1ryzahom] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.chat-header[b-cz1ryzahom] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 12px;
    border-bottom: 1px solid var(--neutral-stroke-divider);
    background-color: var(--neutral-layer-2);
    flex-shrink: 0;
    min-height: 48px;
}

.chat-title[b-cz1ryzahom] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.chat-actions[b-cz1ryzahom] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.chat-content[b-cz1ryzahom] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* NodePreviewDialog.razor.css.rz.scp.css */
/* #131 node-preview modal body: give the embedded layout area a bounded, scrollable box so a
   large node view (dashboards, long documents) stays within the dialog instead of overflowing. */
.node-preview-dialog-body[b-a10o4hqzs2] {
    height: 80vh;
    max-height: 80vh;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

/* ReferenceChipCollection.razor.css.rz.scp.css */
.reference-chip-collection[b-bsy5ul765e] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0;
    min-height: 32px;
}

.reference-chip[b-bsy5ul765e] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 16px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    max-width: 200px;
}

.reference-chip:hover[b-bsy5ul765e] {
    background: var(--neutral-layer-3);
    border-color: var(--neutral-stroke-hover);
}

.reference-chip.context-chip[b-bsy5ul765e] {
    background: var(--accent-fill-subtle);
    border-color: var(--accent-stroke-rest);
}

.reference-chip.context-chip:hover[b-bsy5ul765e] {
    background: var(--accent-fill-subtle-hover);
}

.chip-text[b-bsy5ul765e] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

.chip-remove[b-bsy5ul765e] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    margin: -2px -4px -2px 2px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.chip-remove:hover[b-bsy5ul765e] {
    opacity: 1;
    background: var(--neutral-layer-4);
}

/* ThreadChatView.razor.css.rz.scp.css */
.thread-chat-container[b-4tr0j081n7] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Dashboard compact mode — flow normally instead of absolute positioning */
.thread-chat-container.compact-mode[b-4tr0j081n7] {
    position: static;
    inset: unset;
    overflow: visible;
    width: 100%;
}

/* No-messages (new-chat) landing. The composer is height:100% of its slot a priori; the
   Thread view controls how big that slot is by collapsing the empty message history and
   letting the bottom block flex-fill. The fill propagates down the chain (bottom → footer →
   input-area → input-content → editor) so the input field grows to occupy the space rather
   than sitting as a thin bar. With messages present this class is absent, so the history
   takes flex:1 and the composer reverts to its natural bottom-bar height. */
.thread-chat-container.no-messages .thread-chat-messages[b-4tr0j081n7] {
    flex: 0 1 auto;
    min-height: 0;
}
/* 🚨 Fill chain scoped to :not(.compact-mode) — same reason as the monaco override below: in
   compact mode the composer must SIZE TO CONTENT (#178 auto-grow). The unscoped fill is what
   turned the compact composer into a viewport-height empty gray box whenever a page gave the
   container a definite height (the Threads app page regression). */
.thread-chat-container.no-messages:not(.compact-mode) .thread-chat-bottom[b-4tr0j081n7],
.thread-chat-container.no-messages:not(.compact-mode) .thread-chat-footer[b-4tr0j081n7],
.thread-chat-container.no-messages:not(.compact-mode) .thread-chat-input-area[b-4tr0j081n7],
.thread-chat-container.no-messages:not(.compact-mode) .thread-chat-input-content[b-4tr0j081n7],
.thread-chat-container.no-messages:not(.compact-mode) .input-container[b-4tr0j081n7] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* New-chat composer fills the tall slot instead of sitting as a thin ~80px bar (issue #458).
   The MonacoEditorView AutoGrow container carries an INLINE `height:80px; min-height:80px`
   that is load-bearing for the with-messages case (#178 auto-grow) and the #199 hit-target
   fix — so it wins over the `.no-messages` fill intent above. Override it to fill ONLY here,
   scoped to `.no-messages`, keeping the inline `max-height` cap + Monaco's internal scroll.
   `::deep` reaches the child component's root; `!important` beats the inline height (and the
   JS grow-writes, which we don't want in the fill state anyway). The with-messages composer
   has no `.no-messages` class, so its #178 auto-grow is completely untouched.
   🚨 Scoped to :not(.compact-mode): in compact-mode (the dashboard/user-activity composer)
   the container is `position: static` and the whole chain sizes to CONTENT — there is no
   definite height to fill, so `height: 100%` resolves against an auto-height parent,
   collapses to the 80px min, AND its `!important` blocks the auto-grow height writes.
   In compact-mode the composer must rely on #178 auto-grow instead of the fill. */
.thread-chat-container.no-messages:not(.compact-mode) .input-container[b-4tr0j081n7]  .monaco-editor-container {
    height: 100% !important;
}

.thread-chat-messages[b-4tr0j081n7] {
    flex: 1;
    min-height: 0;
    min-width: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 24px;
    /* Flex column so the bubble's `align-self: flex-end` (user)
       puts user bubbles flush right while assistant stays left. */
    display: flex;
    flex-direction: column;
}

/* ─── Hero header (full-page chat) ─────────────────────────────────────
   Rendered NATIVELY as the first child of the scrollable message list, so it
   flows ABOVE the conversation (no overlap) and scrolls away with it. Compact /
   narrow: a top row (starting-point context chip + Mark Done) then a click-to-edit
   title and a smaller click-to-edit description. `flex: 0 0 auto` so it reserves its
   own height and is never squeezed into the messages below. Hidden inside the side
   panel via SidePanel.razor.css (`.thread-full-header { display:none }`). */
.thread-full-header[b-4tr0j081n7] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 4px 14px 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, var(--neutral-stroke-rest));
    min-width: 0;
}

.thread-full-header-toprow[b-4tr0j081n7] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 24px;
}

/* Starting-point context chip — pill on the RIGHT of the top row, clickable to open the
   full context object the thread was started from. */
.thread-context-chip[b-4tr0j081n7] {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 60%;
    padding: 3px 11px 3px 8px;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--accent-fill-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-fill-rest) 30%, transparent);
    transition: background 150ms ease;
}
.thread-context-chip:hover[b-4tr0j081n7] {
    background: color-mix(in srgb, var(--accent-fill-rest) 18%, transparent);
}
.thread-context-chip-text[b-4tr0j081n7] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Editing a message: the inline Edit composer renders INSIDE the message bubble, which for a user
   message is width-constrained (right-aligned chat bubble). While editing, stretch the bubble to the
   full column width so the composer is 100% wide — you're editing, not reading a chat bubble. */
.thread-msg-bubble.thread-msg-editing[b-4tr0j081n7] {
    max-width: 100%;
    width: 100%;
    align-self: stretch;
}

/* Title — nice headline; click-to-edit. The -6px side margins let the hover
   background bleed slightly past the text without shifting the layout. */
.thread-header-title[b-4tr0j081n7] {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--neutral-foreground-rest);
    word-break: break-word;
    border-radius: 6px;
    padding: 2px 6px;
    margin: 0 -6px;
}
.thread-header-title.editable[b-4tr0j081n7] {
    cursor: text;
    transition: background 120ms ease;
}
.thread-header-title.editable:hover[b-4tr0j081n7] {
    background: var(--neutral-fill-stealth-hover);
}
.thread-header-title.untitled[b-4tr0j081n7] {
    color: var(--neutral-foreground-hint);
    font-style: italic;
}
.thread-header-title-input[b-4tr0j081n7] {
    width: 100%;
}

/* Description — smaller abstract; click-to-edit. */
.thread-header-desc[b-4tr0j081n7] {
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--neutral-foreground-hint);
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: 6px;
    padding: 2px 6px;
    margin: 0 -6px;
}
.thread-header-desc.editable[b-4tr0j081n7] {
    cursor: text;
    transition: background 120ms ease;
}
.thread-header-desc.editable:hover[b-4tr0j081n7] {
    background: var(--neutral-fill-stealth-hover);
}
.thread-header-desc.placeholder[b-4tr0j081n7] {
    font-style: italic;
    opacity: 0.7;
}
.thread-header-desc-input[b-4tr0j081n7] {
    width: 100%;
}

/* Loading skeleton lines — shown when a message's satellite cell hasn't
   delivered content yet through the IMeshNodeStreamCache subscription. */
.thread-msg-skeleton-line[b-4tr0j081n7] {
    height: 13px;
    border-radius: 6px;
    background: var(--neutral-stroke-rest);
    margin: 4px 0;
    width: 60%;
    animation: thread-msg-skeleton-pulse-b-4tr0j081n7 1.4s ease-in-out infinite;
}
@keyframes thread-msg-skeleton-pulse-b-4tr0j081n7 {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 0.15; }
}

/* Execution status bar above chat input. `flex: 0 1 auto` + `min-height: 0`
   lets it shrink (and scroll internally) when the bottom bar runs out of room,
   so it yields space to the always-visible input footer rather than pushing it
   off the bottom. */
.thread-exec-bar[b-4tr0j081n7] {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--accent-fill-rest) 8%, var(--neutral-layer-2));
    border-top: 2px solid var(--accent-fill-rest);
    max-height: 200px;
    overflow-y: auto;
}
.thread-exec-header[b-4tr0j081n7] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.thread-exec-preview[b-4tr0j081n7] {
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
    white-space: pre-wrap;
    overflow: hidden;
    max-height: 80px;
    line-height: 1.4;
}
.thread-exec-tools[b-4tr0j081n7] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.thread-exec-tool[b-4tr0j081n7] {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--neutral-layer-4);
    color: var(--neutral-foreground-hint);
}
.thread-exec-tool.pending[b-4tr0j081n7] {
    color: var(--accent-fill-rest);
}
.thread-exec-tool.done[b-4tr0j081n7] {
    color: var(--neutral-foreground-hint);
}
.thread-exec-star[b-4tr0j081n7] {
    font-size: 1.2rem;
    display: inline-block;
}
.thread-exec-status[b-4tr0j081n7] {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent-fill-rest);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.thread-exec-elapsed[b-4tr0j081n7] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-hint);
    padding: 2px 8px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    background: var(--neutral-layer-1);
    flex: 0 0 auto;
}
.thread-exec-cancel[b-4tr0j081n7] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: transparent;
    color: var(--neutral-foreground-rest);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s;
}
.thread-exec-cancel:hover[b-4tr0j081n7] {
    background: var(--neutral-layer-4);
}

/* Pending-inbox section inside the executing-progress strip.
   Shows messages the user typed during the in-flight turn
   that the agent has NOT yet pulled via check_inbox. */
.thread-exec-pending-inbox[b-4tr0j081n7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    margin-top: 6px;
    border: 1px dashed color-mix(in srgb, var(--accent-fill-rest) 50%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent-fill-rest) 4%, transparent);
}
.thread-exec-pending-inbox-header[b-4tr0j081n7] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    color: var(--accent-fill-rest);
    font-weight: 600;
}
.thread-exec-pending-inbox-item[b-4tr0j081n7] {
    font-size: 0.78rem;
    color: var(--neutral-foreground-rest);
    padding: 2px 6px;
    border-left: 2px solid color-mix(in srgb, var(--accent-fill-rest) 60%, transparent);
    background: var(--neutral-layer-1);
    border-radius: 0 4px 4px 0;
    line-height: 1.35;
    white-space: pre-wrap;
}

/* In-chat queued user message — rendered inline after the materialised
   message cells, showing the user their just-submitted text immediately
   (before round dispatch creates the satellite cell). Pulse animation
   conveys "waiting to be picked up". */
.thread-chat-pending-message[b-4tr0j081n7] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    margin: 4px 0;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-fill-rest) 6%, transparent);
    border: 1px dashed color-mix(in srgb, var(--accent-fill-rest) 35%, transparent);
    color: var(--neutral-foreground-rest);
    animation: thread-pending-pulse-b-4tr0j081n7 1.6s ease-in-out infinite;
}
.thread-chat-pending-message-text[b-4tr0j081n7] {
    flex: 1;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Bottom bar: groups the execution status ("where we are"), the runtime panel,
   and the input footer (harness selector + editor + send) into one block pinned
   to the bottom of the screen. The chat history above (flex:1) scrolls under it.

   `flex: 0 1 auto` + `min-height: 0` (NOT `flex-shrink: 0`): the block must be
   ALLOWED to shrink so the container's height bounds it. Otherwise, when a thread
   is running with sub-threads, the exec-bar (≤200px) + runtime-panel (≤38vh) +
   input together exceed the side-panel height; with the block unshrinkable the
   surplus overflows the `overflow:hidden` container and clips its LAST child —
   the input footer — off the bottom. Letting the block shrink hands the surplus
   to the shrinkable status panels below (which scroll internally) while the
   footer stays flex-shrink:0 and fully visible. */
.thread-chat-bottom[b-4tr0j081n7] {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
}

/* Footer: progress + input pinned at bottom */
.thread-chat-footer[b-4tr0j081n7] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
}

.thread-chat-input-area[b-4tr0j081n7] {
    flex-shrink: 0;
    padding: 12px 16px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-layer-card-container);
    overflow: visible;
    min-width: 0;
    max-width: 100%;
    /* Position context so the "Allocating agent…" overlay can sit on top of
       the dimmed input content without changing the box's outer height. */
    position: relative;
}

.thread-chat-input-area.is-allocating .thread-allocating-panel[b-4tr0j081n7] {
    /* Float the banner over the (still-rendered) input content so the box
       keeps its natural height. The dialog used to swap the entire input
       subtree for a small spinner panel and snap back when the thread
       was ready, which the user noticed as a layout jump. */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--neutral-layer-card-container) 92%, transparent);
    backdrop-filter: blur(2px);
    border-radius: 8px;
}

.thread-chat-input-content[b-4tr0j081n7] {
    transition: opacity 120ms ease;
    /* Anchor the slash-command picker as a floating popup (see .thread-chat-widget) so opening it
       does NOT push the Monaco editor's DOM down + back up — which re-laid-out the editor and made
       the composer appear to vanish on selection. */
    position: relative;
}

.thread-chat-input-content.dimmed[b-4tr0j081n7] {
    opacity: 0.35;
    pointer-events: none;
    user-select: none;
}

/* Thin, read-only thread status — harness · agent · model · tokens used.
   Muted + small so it reads as metadata above the editor, not a control. */
.thread-chat-status-row[b-4tr0j081n7] {
    display: flex;
    align-items: center;
    /* Single row — never wrap. Overflowing chips are clipped (each chip ellipsis-truncates its own
       text via .thread-chat-status-item), and the full value is on the chip's title (hover). */
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 10px;
    padding: 0 2px 6px 2px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--neutral-foreground-hint);
    min-width: 0;
}

.thread-chat-status-item[b-4tr0j081n7] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    /* Allow the chip to shrink below its content width so its text ellipsis-truncates when the
       single-row status bar runs out of horizontal room (min-width:auto would block the ellipsis). */
    min-width: 0;
    flex: 0 1 auto;
}

/* The chips are <button> now (clickable → picker/combobox). Strip native button chrome; keep the chip look. */
button.thread-chat-status-item[b-4tr0j081n7] {
    background: none;
    border: none;
    margin: 0;
    padding: 1px 5px;
    font: inherit;
    line-height: inherit;
    color: inherit;
    border-radius: 4px;
    cursor: default;
}

.thread-chat-status-item.is-clickable[b-4tr0j081n7] {
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.thread-chat-status-item.is-clickable:hover[b-4tr0j081n7] {
    background-color: var(--neutral-fill-secondary-hover, rgba(127, 127, 127, 0.14));
}

.thread-chat-status-item .chip-svg[b-4tr0j081n7] {
    flex: 0 0 auto;
    opacity: 0.72;
}

/* Harness BRAND icon (Claude Code / Copilot) — an <InlineSvgImage> (an inert <img>) inside a
   <span class="chip-svg chip-svg-brand">, rendered by the razor template so this scoped rule reaches it
   (Plugins#4631: built as a MarkupString it carried no scope attribute, the rule never matched, and the
   image filled the whole chip). It carries its own colours (a terracotta burst, etc.), so it must NOT be
   dimmed like the monochrome glyph chips. The image is sized by its own Size parameter; this box only
   aligns it. */
.thread-chat-status-item span.chip-svg-brand[b-4tr0j081n7] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    opacity: 1;
}

.thread-chat-status-sep[b-4tr0j081n7] {
    color: var(--neutral-stroke-rest);
}

.thread-chat-status-tokens[b-4tr0j081n7] {
    font-variant-numeric: tabular-nums;
}

.input-container[b-4tr0j081n7] {
    margin: 8px 0;
    min-width: 0;
    overflow: hidden;
}


.selector-bar[b-4tr0j081n7] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 8px;
    overflow: visible;
    flex-wrap: nowrap;
    min-width: 0;
}

/* Compact harness combobox in the bottom row — JUST the picker (no label).
   Agent + model are chosen via the /agent and /model slash-commands, so the
   row stays small enough to fit harness + context chip + Send on one line. */
.thread-chat-harness[b-4tr0j081n7] {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 220px;
}

/* Navigation-context chip(s) inline in the bottom row, between the harness and
   Send. The collection wraps its own chips; cap its share so a long context
   name truncates rather than pushing Send off the row. */
.thread-chat-context[b-4tr0j081n7] {
    display: flex;
    align-items: center;
    min-width: 0;
}
.thread-chat-context[b-4tr0j081n7]  .reference-chip-collection {
    margin: 0;
    flex-wrap: nowrap;
}

/* Legacy selectors container — kept for any remaining consumer; the chat
   footer now uses .thread-chat-harness above. */
.thread-chat-selectors[b-4tr0j081n7] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 2px 6px 2px;
    min-width: 0;
}

/* Each dropdown shares the row equally and shrinks below content width so
   Agent + Model always fit on a single line. SimpleDropdown's inner
   `.simple-dropdown-text` already has text-overflow: ellipsis, so long
   names ("Description Writer", "claude-sonnet-4-6") truncate cleanly
   when the chat dock narrows. Max-width caps the spread on wide layouts
   so the row doesn't look stretched. */
.thread-chat-selectors[b-4tr0j081n7]  .simple-dropdown {
    flex: 1 1 0;
    min-width: 0;
    max-width: 240px;
}

.thread-chat-selectors .simple-dropdown-item-path[b-4tr0j081n7],
.thread-chat-selectors .simple-dropdown-item-description[b-4tr0j081n7] {
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
}

/* Icon / name layout inside dropdown items. Explicit color: in dark mode
   the inner <span> inherits transparent text from FluentIcon's wrapper
   if we don't pin it — that produced "icon visible, name invisible"
   chips that the user noticed. */
.thread-chat-selectors[b-4tr0j081n7]  .dropdown-icon-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--neutral-foreground-rest);
}

.thread-chat-selectors[b-4tr0j081n7]  .dropdown-icon-name span {
    color: var(--neutral-foreground-rest);
    font-weight: 500;
}

.thread-chat-selectors[b-4tr0j081n7]  .dropdown-icon-name svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--neutral-foreground-hint);
}

/* Inside the SELECTED dropdown button — same layout, but the span/icon
   inherit the button's foreground (which Fluent's button styling
   already sets correctly for accent / neutral surfaces). */
.thread-chat-selectors[b-4tr0j081n7]  .simple-dropdown-button .dropdown-icon-name,
.thread-chat-selectors[b-4tr0j081n7]  .simple-dropdown-button .dropdown-icon-name span,
.thread-chat-selectors[b-4tr0j081n7]  .simple-dropdown-button .dropdown-icon-name svg {
    color: inherit;
}

/* Confirmation / error message from a slash-command (e.g. "Switched
   agent → Worker"). Trails after the dropdowns; cleared on next
   submission. */
.thread-chat-status-msg[b-4tr0j081n7] {
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
    font-style: italic;
}

.thread-chat-status-msg.error[b-4tr0j081n7] {
    color: var(--error-rest, #c0392b);
    font-style: normal;
}

/* Inline picker widget rendered above the editor when /agent or /model
   is invoked without an argument. Theme-aware via Fluent design tokens
   so dark mode + high-contrast read correctly. */
.thread-chat-widget[b-4tr0j081n7] {
    /* Floating popup ABOVE the input (a command palette popping up), anchored to
       .thread-chat-input-content — does not push the Monaco DOM. Floating-popup tier (10000) so it
       opens ABOVE the menu bar (z-index 1100 in PortalLayoutBase) instead of being covered by it. */
    /* position: FIXED (not absolute) so the popup escapes the chat's overflow clip — .body-content and
       .layout(overflow:hidden) otherwise clip anything painting in the sticky header's band above the
       scroll area, so an absolute popup could never sit over the header no matter its z-index. Fixed +
       z-index 10000 puts it in the root/top stacking layer, above every sticky heading (≤1100). No
       ancestor has transform/filter (verified), so fixed is NOT trapped. JS (anchorChatPopup) sets
       left/width, the open direction (above/below the composer) and a max-height fitted to the free
       space on that side, each frame; the values here are only the first-frame fallback. */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 96px;
    z-index: 10000;
    /* Command-palette width, not a sheet: cap it so the full-width home-page composer doesn't
       produce a viewport-wide menu (anchorChatPopup applies the same cap when it takes over). */
    max-width: 560px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-layer-1);
    overflow: hidden;
    /* First-frame fallback only — anchorChatPopup replaces this with the measured free space
       above/below the composer, so a composer near the top of a short window (the home page) can't
       overrun the viewport top and cover the portal header. The inner list scrolls past the cap. */
    max-height: min(440px, calc(100vh - 180px));
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.thread-chat-widget-header[b-4tr0j081n7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    background: var(--neutral-layer-2);
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.thread-chat-widget-list[b-4tr0j081n7] {
    overflow-y: auto;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.thread-chat-widget-group[b-4tr0j081n7] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-hint);
    padding: 8px 8px 4px 8px;
    font-weight: 600;
}

/* Reset native button defaults — without `appearance: none` the chip-style
   buttons fell back to the browser's grey-on-grey button rendering and
   ignored the dark-mode tokens. */
.thread-chat-widget-item[b-4tr0j081n7] {
    appearance: none;
    -webkit-appearance: none;
    text-align: left;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    color: var(--neutral-foreground-rest);
    font: inherit;
    transition: background 80ms ease, border-color 80ms ease;
}

/* The icon is rendered by <NodeIcon>, which sizes itself inline and lives in its OWN CSS-isolation
   scope — so every rule that styles it has to be anchored on an element of THIS component and reach
   through with ::deep. Only the decoration lives here; width/height come from NodeIcon's Size. */
.thread-chat-widget-item[b-4tr0j081n7]  .thread-chat-widget-item-icon {
    color: var(--neutral-foreground-hint);
}

.thread-chat-widget-item-text[b-4tr0j081n7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    /* Take the row's spare width so the ✓ that marks the current selection is pushed to the far
       edge and every row's tick lines up, whatever the name's length. */
    flex: 1 1 auto;
}

/* A value row (/effort) has no node icon; its inline glyph sits in the same column so the names
   still line up with the icon-bearing rows above and below. */
.thread-chat-widget-item > .thread-chat-widget-item-icon[b-4tr0j081n7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    color: var(--neutral-foreground-hint);
}

/* ✓ on the row the composer currently holds. Marking it is what makes the menu a picture of the
   current state rather than a list of options — the keyboard highlight (--active) is a different
   thing and both can be on different rows. */
.thread-chat-widget-item-check[b-4tr0j081n7] {
    flex: 0 0 auto;
    color: var(--accent-fill-rest);
    font-size: 0.85rem;
}

.thread-chat-widget-item.selected .thread-chat-widget-item-check[b-4tr0j081n7],
.thread-chat-widget-item--active .thread-chat-widget-item-check[b-4tr0j081n7] {
    color: inherit;
}

.thread-chat-widget-item:hover[b-4tr0j081n7],
.thread-chat-widget-item:focus-visible[b-4tr0j081n7] {
    background: var(--neutral-fill-stealth-hover);
    border-color: var(--neutral-stroke-rest);
    outline: none;
}

.thread-chat-widget-item.selected[b-4tr0j081n7] {
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
    border-color: var(--accent-stroke-control-rest);
}

/* Keyboard-highlighted row (↑/↓). Accent box so the Enter target is obvious — distinct from hover. */
.thread-chat-widget-item--active[b-4tr0j081n7] {
    background: var(--neutral-fill-stealth-hover);
    border-color: var(--accent-fill-rest);
    outline: 1px solid var(--accent-fill-rest);
    outline-offset: -1px;
}

/* The picker widget takes focus when opened so arrow keys reach it; don't draw a focus ring on the
   container itself (the highlighted row is the affordance). */
.thread-chat-widget:focus[b-4tr0j081n7],
.thread-chat-widget:focus-visible[b-4tr0j081n7] {
    outline: none;
}

.thread-chat-widget-item-name[b-4tr0j081n7] {
    font-weight: 600;
    font-size: 0.9rem;
    color: inherit;
}

.thread-chat-widget-item-path[b-4tr0j081n7],
.thread-chat-widget-item-desc[b-4tr0j081n7] {
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
}

/* 🇪🇺 Provenance badges on a model row (processing region, maker's country). */
.thread-chat-widget-item-badge[b-4tr0j081n7] {
    margin-left: 0.3em;
    font-size: 0.85em;
    font-weight: 400;
    cursor: help;
}

.thread-chat-widget-item.selected .thread-chat-widget-item-path[b-4tr0j081n7],
.thread-chat-widget-item.selected .thread-chat-widget-item-desc[b-4tr0j081n7] {
    color: var(--foreground-on-accent-rest);
    opacity: 0.85;
}

.thread-chat-widget-empty[b-4tr0j081n7] {
    padding: 12px;
    text-align: center;
    color: var(--neutral-foreground-hint);
    font-size: 0.85rem;
}

/* Non-selectable group title (e.g. a model provider): a quiet heading above its
   selectable items. Not a button — no hover/cursor, dimmed + uppercase so it reads
   as a section label rather than a choice. */
.thread-chat-widget-group[b-4tr0j081n7] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 8px 10px 2px;
    color: var(--neutral-foreground-hint);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: default;
    user-select: none;
}

.thread-chat-widget-group:not(:first-child)[b-4tr0j081n7] {
    margin-top: 4px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

.thread-chat-widget-group[b-4tr0j081n7]  .thread-chat-widget-group-icon {
    opacity: 0.8;
}

.thread-chat-widget-group-name[b-4tr0j081n7] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Attachment chips moved below the send button — they're inputs to the
   next message, not state about the current one, so they belong at the
   bottom of the dialog where the user is actively composing. */
.thread-chat-attachments[b-4tr0j081n7] {
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px dashed var(--neutral-stroke-rest);
}

.loading-overlay[b-4tr0j081n7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
}

.loading-text[b-4tr0j081n7] {
    color: var(--neutral-foreground-hint);
    font-size: 0.9rem;
}

.empty-thread-message[b-4tr0j081n7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--neutral-foreground-hint);
    gap: 8px;
}

.empty-thread-message p[b-4tr0j081n7] {
    margin: 0;
}

.empty-thread-message .hint[b-4tr0j081n7] {
    font-size: 0.85rem;
    opacity: 0.8;
}

.msg-skeleton[b-4tr0j081n7] {
    max-width: 60%;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.msg-skeleton-user[b-4tr0j081n7] {
    background: var(--neutral-layer-4);
    align-self: flex-end;
    margin-left: auto;
}

.msg-skeleton-assistant[b-4tr0j081n7] {
    background: var(--neutral-layer-2);
    align-self: flex-start;
}

.msg-skeleton-line[b-4tr0j081n7] {
    height: 12px;
    border-radius: 6px;
    background: var(--neutral-stroke-rest);
    opacity: 0.3;
    animation: skeleton-pulse-b-4tr0j081n7 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse-b-4tr0j081n7 {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.15; }
}



.selector-agent[b-4tr0j081n7], .selector-model[b-4tr0j081n7] {
    min-width: 0;
}

.simple-dropdown-item-name[b-4tr0j081n7] {
    font-weight: 500;
}

.simple-dropdown-item-path[b-4tr0j081n7] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
}

.simple-dropdown-item-provider[b-4tr0j081n7] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
}

.simple-dropdown-item-description[b-4tr0j081n7] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Resume threads view */
.thread-resume-view[b-4tr0j081n7] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.resume-header[b-4tr0j081n7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    flex-shrink: 0;
}

.resume-threads-list[b-4tr0j081n7] {
    flex: 1;
    overflow-y: auto;
    padding: 4px;
}

.resume-thread-item[b-4tr0j081n7] {
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.resume-thread-item:hover[b-4tr0j081n7] {
    background-color: var(--neutral-fill-secondary-hover);
}

.resume-thread-item-active[b-4tr0j081n7] {
    background-color: var(--neutral-fill-secondary-rest);
    border-left: 3px solid var(--accent-fill-rest);
}

.resume-thread-name[b-4tr0j081n7] {
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.resume-thread-date[b-4tr0j081n7] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    margin-top: 2px;
}

/* Allocating-thread / message-pending styles — moved out of the inline
   <style> block in ThreadChatView.razor so the CSS analyzer parses them
   without the @@keyframes Razor escape (CSS041 false positives). */
.thread-allocating-panel[b-4tr0j081n7] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-radius: 12px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
}

.thread-allocating-text[b-4tr0j081n7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.thread-allocating-title[b-4tr0j081n7] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--accent-fill-rest);
}

.thread-allocating-subtitle[b-4tr0j081n7] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
}

@keyframes thread-pending-pulse-b-4tr0j081n7 {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.thread-msg-dot[b-4tr0j081n7] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--neutral-foreground-hint);
    animation: thread-dots-blink-b-4tr0j081n7 1.4s infinite both;
}

@keyframes thread-dots-blink-b-4tr0j081n7 {
    0%, 80%, 100% { opacity: 0.3; }
    40% { opacity: 1; }
}

.thread-exec-star[b-4tr0j081n7] {
    animation: thread-exec-star-pulse-b-4tr0j081n7 1.5s ease-in-out infinite;
}

@keyframes thread-exec-star-pulse-b-4tr0j081n7 {
    0%   { color: var(--accent-fill-rest); transform: scale(1) rotate(0deg); }
    25%  { color: #ff6b6b; transform: scale(1.3) rotate(15deg); }
    50%  { color: #ffd93d; transform: scale(1) rotate(0deg); }
    75%  { color: #6bcb77; transform: scale(1.3) rotate(-15deg); }
    100% { color: var(--accent-fill-rest); transform: scale(1) rotate(0deg); }
}

/* Provider-coloured model badge (replaces the generic Sparkle icon in the
   model picker). Anthropic tiers get distinct hues (Opus = brand-orange,
   Sonnet = brand-purple, Haiku = brand-teal) so the user can spot the tier
   at a glance; OpenAI shows the model number on green. */
.model-badge[b-4tr0j081n7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 5px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: var(--neutral-foreground-hint);
    flex: 0 0 auto;
    line-height: 1;
    letter-spacing: 0.02em;
}

.model-badge-anthropic-opus[b-4tr0j081n7]    { background: #c4814a; }   /* warm tan */
.model-badge-anthropic-sonnet[b-4tr0j081n7]  { background: #7c5cd1; }   /* purple */
.model-badge-anthropic-haiku[b-4tr0j081n7]   { background: #2fb39e; }   /* teal */
.model-badge-openai[b-4tr0j081n7]            { background: #10a37f; }   /* OpenAI green */
.model-badge-other[b-4tr0j081n7]             { background: var(--accent-fill-rest); }

/* In the selected dropdown button, badge inherits parent foreground for
   accent-on-accent contrast — but keep the colored chip background.
   The text on the chip stays white regardless of theme. */
.thread-chat-selectors[b-4tr0j081n7]  .simple-dropdown-button .model-badge {
    color: #fff;
}

/* ─── Bubble baseline ───────────────────────────────────────────────────
   Bubble shapes used across user / assistant messages. Earlier the markup
   relied on browser defaults, which gave the user the "plain CSS" look in
   the screenshot. Pin a card aesthetic that matches the rest of the
   portal (rounded, subtle border, layered surface). */
.thread-msg-bubble[b-4tr0j081n7] {
    max-width: 92%;
    padding: 12px 16px;
    border-radius: 12px;
    margin: 6px 0;
    line-height: 1.45;
    word-wrap: break-word;
    color: var(--neutral-foreground-rest);
    background: var(--neutral-layer-3, var(--neutral-layer-card-container));
    border: 1px solid var(--neutral-stroke-divider-rest, transparent);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.thread-msg-user[b-4tr0j081n7] {
    align-self: flex-end;
    background: color-mix(in srgb, var(--accent-fill-rest) 14%, var(--neutral-layer-3, transparent));
    border-color: color-mix(in srgb, var(--accent-fill-rest) 24%, transparent);
    border-bottom-right-radius: 4px;
}

.thread-msg-assistant[b-4tr0j081n7] {
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

/* "— message missing —" placeholder. Italic, muted, dashed border to read
   as a non-content gap in the conversation. The chat keeps flowing past the
   missing entry rather than getting stuck on a spinning skeleton. */
.thread-msg-missing[b-4tr0j081n7] {
    background: transparent;
    border-style: dashed;
    color: var(--neutral-foreground-hint);
    font-style: italic;
}

.thread-msg-author[b-4tr0j081n7] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-fill-rest);
    margin-bottom: 2px;
}

.thread-msg-author-user[b-4tr0j081n7] {
    color: var(--neutral-foreground-hint);
}

.thread-msg-meta[b-4tr0j081n7] {
    display: flex;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--neutral-foreground-hint);
    margin-bottom: 6px;
    align-items: center;
}

.thread-msg-elapsed[b-4tr0j081n7] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    padding: 1px 6px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-hint);
}

/* Harness name leads the assistant meta row — slightly emphasized vs the
   muted time/token siblings so the harness reads as the headline identity. */
.thread-msg-harness[b-4tr0j081n7] {
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.thread-msg-tokens[b-4tr0j081n7] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-hint);
}

.thread-msg-elapsed-live[b-4tr0j081n7] {
    color: var(--accent-fill-rest);
    border-color: var(--accent-fill-rest);
    animation: thread-msg-elapsed-pulse-b-4tr0j081n7 1.4s ease-in-out infinite;
}

@keyframes thread-msg-elapsed-pulse-b-4tr0j081n7 {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* Hover-revealed edit/resubmit/delete/new-thread row. Its height is RESERVED and
   only its opacity toggles, so hovering a bubble never changes its size and the
   chat never reflows under the pointer (Plugins#4620 — the row used to grow from
   max-height:0 to 40px on hover). The row is one icon-button line (no wrapping, so
   the reserved strip stays one row high). Opacity — not visibility or
   display — hides it, so the buttons stay in the tab order; :focus-within shows
   the row while a keyboard user is on one of them. */
.thread-msg-inline-actions[b-4tr0j081n7] {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin-top: 4px;
    align-items: center;
    opacity: 0;
    transition: opacity 120ms ease;
}

.thread-msg-bubble:hover .thread-msg-inline-actions[b-4tr0j081n7],
.thread-msg-inline-actions:focus-within[b-4tr0j081n7] {
    opacity: 1;
}

/* Markdown wraps each line in a <p> carrying a 1.5em bottom margin (good for doc
   pages, wrong for a chat bubble) — drop it on the LAST block so a short message
   doesn't leave a big gap above the bubble's bottom edge. */
.thread-msg-bubble[b-4tr0j081n7]  .markdown-body > :last-child,
.thread-msg-bubble[b-4tr0j081n7]  .markdown-body p:last-child {
    margin-bottom: 0;
}

.thread-msg-action-btn[b-4tr0j081n7] {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--neutral-foreground-hint);
    font-size: 0.95rem;
    padding: 2px 4px;
    border-radius: 4px;
}

.thread-msg-action-btn:hover[b-4tr0j081n7] {
    color: var(--accent-fill-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent);
}

/* ─── Tool-call list inside a bubble ───────────────────────────────────
   Compact rows. Plain tool calls collapse into a <details>; delegation
   tool calls are now inline links (see .thread-msg-tool-delegation
   below). The container just stacks them. */
.thread-msg-tool-calls[b-4tr0j081n7] {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.86rem;
}

.thread-msg-tool-entry[b-4tr0j081n7] {
    background: color-mix(in srgb, var(--neutral-stroke-rest) 40%, transparent);
    border-radius: 6px;
    padding: 4px 8px;
}

.thread-msg-tool-entry > summary[b-4tr0j081n7] {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    /* Allow the flex children (notably the long query/path) to shrink within the
       bubble instead of pushing past its right edge. */
    min-width: 0;
    overflow: hidden;
}

.thread-msg-tool-entry > summary[b-4tr0j081n7]::-webkit-details-marker { display: none; }
.thread-msg-tool-entry > summary[b-4tr0j081n7]::marker { content: ''; }

.thread-msg-tool-done[b-4tr0j081n7] {
    flex: 0 0 auto;
    color: var(--accent-fill-rest);
    font-weight: 700;
}

.thread-msg-tool-error[b-4tr0j081n7] { color: var(--error-foreground-rest, #d93636); }

/* Collapsible group wrapping a whole round's tool calls — one summary line that
   folds the entire block away once the round is complete (see #129). */
.thread-msg-tool-group > summary.thread-msg-tool-group-summary[b-4tr0j081n7] {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.35em;
    font-size: 0.82em;
    opacity: 0.75;
    padding: 2px 0;
    user-select: none;
}

.thread-msg-tool-group > summary.thread-msg-tool-group-summary[b-4tr0j081n7]::-webkit-details-marker { display: none; }
.thread-msg-tool-group > summary.thread-msg-tool-group-summary[b-4tr0j081n7]::marker { content: ''; }

.thread-msg-tool-group[open] > summary.thread-msg-tool-group-summary[b-4tr0j081n7] { opacity: 1; }

.thread-msg-tool-path[b-4tr0j081n7],
.thread-msg-tool-action[b-4tr0j081n7] {
    color: var(--accent-fill-rest);
    text-decoration: none;
}

/* The query/path is the one variable-length item in the summary row — let it
   take the remaining width and ellipsis-truncate so it never spills past the
   message bubble. (Full text stays available via the title tooltip and the
   expandable <details> args below.) */
.thread-msg-tool-path[b-4tr0j081n7] {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thread-msg-tool-action[b-4tr0j081n7] {
    margin-left: 8px;
    font-size: 0.78rem;
    padding: 1px 6px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent);
}

.thread-msg-tool-action-muted[b-4tr0j081n7] {
    color: var(--neutral-foreground-hint);
    background: var(--neutral-stroke-divider-rest, var(--neutral-stroke-rest));
}

.thread-msg-tool-args[b-4tr0j081n7],
.thread-msg-tool-result[b-4tr0j081n7] {
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--neutral-layer-4, rgba(0,0,0,0.06));
    border-radius: 4px;
    padding: 6px 8px;
    margin-top: 4px;
    font-family: var(--monospace-font, "Cascadia Code", Consolas, monospace);
    font-size: 0.78rem;
    color: var(--neutral-foreground-rest);
}

/* ─── "Show all" toggle for the collapsed tool-call remainder ───────────
   Sits under the visible window. The running / pending / completed counts
   are colour-keyed chips; clicking reveals the folded entries. */
.thread-msg-tool-more[b-4tr0j081n7] {
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 6px;
    font: inherit;
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
}

.thread-msg-tool-more:hover[b-4tr0j081n7] {
    background: color-mix(in srgb, var(--neutral-stroke-rest) 30%, transparent);
    color: var(--neutral-foreground-rest);
}

.thread-msg-tool-more-caret[b-4tr0j081n7] {
    flex: 0 0 auto;
    font-size: 0.7rem;
    opacity: 0.8;
}

.thread-msg-tool-more-count[b-4tr0j081n7] {
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--neutral-stroke-rest) 35%, transparent);
    white-space: nowrap;
}

.thread-msg-tool-more-count.running[b-4tr0j081n7] {
    color: var(--accent-fill-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent);
}

.thread-msg-tool-more-count.completed[b-4tr0j081n7] {
    opacity: 0.8;
}

/* ─── Delegation tool call — inline link ────────────────────────────────
   Replaces the previous "chip with embedded streaming area" — the live
   sub-thread progress now lives in `.thread-runtime-subthreads` near the
   chat input. The bubble just links out to the sub-thread; one row per
   delegate_to_agent call, regardless of in-flight vs completed. */
.thread-msg-tool-delegation[b-4tr0j081n7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    text-decoration: none;
    background: color-mix(in srgb, var(--accent-fill-rest) 10%, transparent);
    color: var(--neutral-foreground-rest);
    font-size: 0.86rem;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
}

.thread-msg-tool-delegation:hover[b-4tr0j081n7] {
    background: color-mix(in srgb, var(--accent-fill-rest) 18%, transparent);
}

.thread-msg-tool-delegation-state[b-4tr0j081n7] {
    flex: 0 0 auto;
    color: var(--accent-fill-rest);
    font-weight: 700;
}

.thread-msg-tool-delegation-pending .thread-msg-tool-delegation-state[b-4tr0j081n7] {
    color: var(--accent-fill-rest);
    animation: thread-msg-delegation-pulse-anim-b-4tr0j081n7 1.4s ease-in-out infinite;
}

.thread-msg-tool-delegation-error .thread-msg-tool-delegation-state[b-4tr0j081n7] {
    color: var(--error-foreground-rest, #d93636);
}

.thread-msg-tool-delegation[b-4tr0j081n7]  .thread-msg-tool-delegation-icon {
    opacity: 0.85;
}

.thread-msg-tool-delegation-title[b-4tr0j081n7] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.thread-msg-tool-delegation-agent[b-4tr0j081n7] {
    font-size: 0.72rem;
    color: var(--neutral-foreground-hint);
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent);
}

/* Live elapsed timer on a RUNNING delegation chip — pulses in step with the
   state icon so the bubble reads as actively working, not a static link. */
.thread-msg-tool-delegation-elapsed[b-4tr0j081n7] {
    font-size: 0.7rem;
    color: var(--accent-fill-rest);
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    animation: thread-msg-delegation-pulse-anim-b-4tr0j081n7 1.4s ease-in-out infinite;
}

@keyframes thread-msg-delegation-pulse-anim-b-4tr0j081n7 {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1;   }
}

/* ─── Runtime panel ────────────────────────────────────────────────────
   Pinned just above the chat input. Houses two sub-sections: running
   sub-threads (live cards) and scheduled messages (queue not yet
   ingested). Visual order — running first, scheduled below — matches
   the lifecycle: in-flight above, waiting below. Both share a card
   surface so the chat input feels like the bottom of a stacked
   control. */
.thread-runtime-panel[b-4tr0j081n7] {
    /* `flex: 0 1 auto` + `min-height: 0` (was `flex: 0 0 auto`): the panel must be
       allowed to shrink so it yields vertical space to the input footer when the
       side panel is short. `flex: 0 0 auto` made it refuse to shrink, so a tall
       run of sub-thread cards (up to 38vh) pushed the input past the container's
       `overflow:hidden` fold and hid it. Now it shrinks and scrolls its cards
       internally; the input stays visible. */
    flex: 0 1 auto;
    min-height: 0;
    max-height: 38vh;
    overflow-y: auto;
    padding: 8px 24px;
    border-top: 1px solid var(--neutral-stroke-divider-rest, var(--neutral-stroke-rest));
    background: color-mix(in srgb, var(--neutral-layer-card-container) 90%, var(--accent-fill-rest));
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.thread-runtime-section[b-4tr0j081n7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.thread-runtime-section-label[b-4tr0j081n7] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-foreground-hint);
    padding-left: 2px;
}

.thread-runtime-hint[b-4tr0j081n7] {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    opacity: 0.85;
    margin-left: 4px;
}

.thread-runtime-subthread-card[b-4tr0j081n7] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--neutral-layer-3, var(--neutral-layer-card-container));
    border: 1px solid var(--neutral-stroke-divider-rest, var(--neutral-stroke-rest));
    text-decoration: none;
    color: var(--neutral-foreground-rest);
    min-width: 0;
}

.thread-runtime-subthread-card:hover[b-4tr0j081n7] {
    border-color: var(--accent-fill-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 8%, var(--neutral-layer-3));
}

.thread-runtime-subthread-card[b-4tr0j081n7]  .thread-runtime-subthread-icon {
    border-radius: 6px;
    opacity: 0.9;
    overflow: hidden;
}

.thread-runtime-subthread-body[b-4tr0j081n7] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.thread-runtime-subthread-title[b-4tr0j081n7] {
    font-weight: 600;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.thread-runtime-subthread-title-text[b-4tr0j081n7] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}

.thread-runtime-subthread-elapsed[b-4tr0j081n7] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--accent-fill-rest);
    padding: 1px 6px;
    border: 1px solid var(--accent-fill-rest);
    border-radius: 8px;
    flex: 0 0 auto;
}

.thread-runtime-subthread-preview[b-4tr0j081n7] {
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.thread-runtime-subthread-pulse[b-4tr0j081n7] {
    flex: 0 0 auto;
    color: var(--accent-fill-rest);
    font-size: 0.7rem;
    animation: thread-runtime-subthread-pulse-anim-b-4tr0j081n7 1.4s ease-in-out infinite;
}

@keyframes thread-runtime-subthread-pulse-anim-b-4tr0j081n7 {
    0%, 100% { opacity: 0.3; transform: scale(0.85); }
    50%      { opacity: 1;   transform: scale(1.15); }
}

.thread-runtime-scheduled-row[b-4tr0j081n7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--neutral-stroke-rest) 35%, transparent);
    border: 1px dashed var(--neutral-stroke-divider-rest, var(--neutral-stroke-rest));
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
    min-width: 0;
}

.thread-runtime-scheduled-icon[b-4tr0j081n7] {
    flex: 0 0 auto;
    font-size: 0.95rem;
}

.thread-runtime-scheduled-text[b-4tr0j081n7] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* ─── Threads side menu ──────────────────────────────────────────────
   The agentic-app default navigation: a collapsible left rail wrapping the
   conversation body. Expanded: a fixed-width vertical rail — New chat, filter
   box, hierarchy (ancestors → current → sub-threads), and my open threads with
   live activity status. Collapsed: in the portal NOTHING shows — the shell's
   sidebar button in the top bar brings it back, so the conversation takes the
   full width. The collapse / reveal buttons below render only in a host whose
   shell has no such button (ThreadNavPresentation). */
.thread-nav-shell[b-4tr0j081n7] {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
}
.thread-nav-shell:focus[b-4tr0j081n7],
.thread-nav-shell:focus-visible[b-4tr0j081n7] { outline: none; }

.thread-nav-body[b-4tr0j081n7] {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.thread-nav-menu[b-4tr0j081n7] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 auto;
    width: 330px;
    max-width: 45%;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 10px;
    gap: 10px;
    background: var(--neutral-layer-1);
    border-right: 1px solid var(--neutral-stroke-divider-rest, var(--neutral-stroke-rest));
}

.thread-nav-new[b-4tr0j081n7],
.thread-nav-reveal[b-4tr0j081n7] {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    padding: 4px 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-foreground-rest);
}
.thread-nav-new:hover[b-4tr0j081n7],
.thread-nav-reveal:hover[b-4tr0j081n7] {
    background: var(--neutral-fill-stealth-hover);
    border-color: var(--neutral-stroke-rest);
}

/* Collapsed state WITHOUT a shell sidebar button: a slim edge strip with a
   vertically-centered expand toggle, so the menu can always be reopened. */
.nav-collapsed .thread-nav-reveal[b-4tr0j081n7] {
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    border-radius: 0 6px 6px 0;
    border-right: 1px solid var(--neutral-stroke-divider-rest, var(--neutral-stroke-rest));
    padding: 10px 4px;
}

/* Filter box — narrows the thread list live. */
.thread-nav-filter[b-4tr0j081n7] {
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
    padding: 5px 9px;
    font: inherit;
    font-size: 0.8rem;
    color: var(--neutral-foreground-rest);
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    outline: none;
}
.thread-nav-filter:focus[b-4tr0j081n7] {
    border-color: var(--accent-fill-rest);
}
.thread-nav-filter[b-4tr0j081n7]::placeholder { color: var(--neutral-foreground-hint); }

.thread-nav-section[b-4tr0j081n7] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.thread-nav-section-label[b-4tr0j081n7] {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-foreground-hint);
    display: flex;
    align-items: center;
    gap: 6px;
}

.thread-nav-count[b-4tr0j081n7] {
    font-size: 0.62rem;
    font-weight: 700;
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest, #fff);
    border-radius: 8px;
    padding: 0 6px;
    line-height: 1.6;
}
.thread-nav-hint[b-4tr0j081n7] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--neutral-foreground-hint);
    opacity: 0.85;
    margin-left: auto;
}

.thread-nav-item[b-4tr0j081n7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--neutral-foreground-rest);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 0.82rem;
    min-width: 0;
    max-width: 100%;
    border: 1px solid transparent;
}
.thread-nav-item:hover[b-4tr0j081n7] {
    background: var(--neutral-fill-stealth-hover);
    border-color: var(--neutral-stroke-rest);
}

.thread-nav-item-glyph[b-4tr0j081n7] {
    flex: 0 0 auto;
    color: var(--neutral-foreground-hint);
    font-size: 0.8rem;
}
.thread-nav-item-text[b-4tr0j081n7] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.thread-nav-current[b-4tr0j081n7] {
    font-weight: 600;
    color: var(--accent-fill-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 10%, transparent);
}
.thread-nav-current .thread-nav-item-glyph[b-4tr0j081n7] { color: var(--accent-fill-rest); }
.thread-nav-ancestor[b-4tr0j081n7],
.thread-nav-child[b-4tr0j081n7] { color: var(--neutral-foreground-hint); }
.thread-nav-child[b-4tr0j081n7] { padding-left: 18px; }

.thread-nav-context[b-4tr0j081n7] { max-width: 100%; }

.thread-nav-empty[b-4tr0j081n7] {
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
    font-style: italic;
    padding: 2px 8px;
}

/* One open-thread row: [status dot · title · queued badge] as the nav link, ✕ as a
   SIBLING (never an overlay — an absolutely-positioned button over a nav surface
   loses its clicks to the nav). */
.thread-nav-row[b-4tr0j081n7] {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}
.thread-nav-row .thread-nav-item[b-4tr0j081n7] { flex: 1 1 auto; min-width: 0; }

.thread-nav-close[b-4tr0j081n7] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    border: none;
    background: transparent;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-foreground-hint);
    opacity: 0;
    transition: opacity 120ms ease;
}
.thread-nav-row:hover .thread-nav-close[b-4tr0j081n7],
.thread-nav-close:focus-visible[b-4tr0j081n7] { opacity: 1; }
.thread-nav-close:hover[b-4tr0j081n7] { background: var(--neutral-fill-stealth-hover); }

/* Live activity indicator — the Claude-Code-style session dot. */
.thread-nav-status[b-4tr0j081n7] {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-sizing: border-box;
}
.thread-nav-status-evaluating[b-4tr0j081n7] {
    background: var(--accent-fill-rest);
    animation: thread-nav-pulse-b-4tr0j081n7 1.2s ease-in-out infinite;
}
.thread-nav-status-queued[b-4tr0j081n7] {
    background: var(--warning, #c5a300);
}
.thread-nav-status-awaiting[b-4tr0j081n7] {
    background: transparent;
    border: 1.5px solid var(--neutral-foreground-hint);
}
@keyframes thread-nav-pulse-b-4tr0j081n7 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* Queued-messages badge on a row. */
.thread-nav-queued[b-4tr0j081n7] {
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--warning, #c5a300) 22%, transparent);
    color: var(--neutral-foreground-rest);
    border-radius: 8px;
    padding: 0 5px;
    line-height: 1.6;
}

/* The open-threads list scrolls within the rail. */
.thread-nav-others[b-4tr0j081n7] { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* ─── Threads app welcome hero (node-less composer + side menu, no thread) ───
   Center the prompt: the welcome pushes down from the top, the composer sits
   directly under it, and the pair floats in the upper-middle of the pane. */
.thread-chat-container.compact-mode.no-messages .thread-nav-body[b-4tr0j081n7] {
    justify-content: center;
    align-items: center;
    padding: 24px;
    box-sizing: border-box;
}
.thread-chat-container.compact-mode.no-messages .thread-nav-body > *[b-4tr0j081n7] {
    width: 100%;
    max-width: 760px;
}
.thread-welcome[b-4tr0j081n7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-bottom: 18px;
    text-align: center;
}
.thread-welcome-title[b-4tr0j081n7] {
    font-size: 1.6rem;
    font-weight: 650;
    color: var(--neutral-foreground-rest);
}
.thread-welcome-hint[b-4tr0j081n7] {
    font-size: 0.92rem;
    color: var(--neutral-foreground-hint);
}

.thread-preparation-choice[b-4tr0j081n7] { display:flex; flex-direction:column; gap:8px; padding:16px; border:1px solid var(--accent-fill-rest); border-radius:10px; background:var(--neutral-layer-2); }
.thread-preparation-choice small[b-4tr0j081n7] { color:var(--neutral-foreground-hint); }
.thread-preparation-actions[b-4tr0j081n7] { display:flex; gap:8px; flex-wrap:wrap; }

/* ThreadInboxView.razor.css.rz.scp.css */
.thread-inbox[b-y99ipx4ebv] { display:flex; flex-direction:column; gap:10px; min-height:0; flex:1; }
.thread-inbox-filters[b-y99ipx4ebv], .thread-inbox-actions[b-y99ipx4ebv], .thread-inbox-feedback[b-y99ipx4ebv] { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.thread-inbox-count[b-y99ipx4ebv] { margin-left:auto; font-size:.75rem; color:var(--neutral-foreground-hint); }
.thread-inbox-results[b-y99ipx4ebv] { overflow-y:auto; min-height:0; }
.thread-inbox-group h3[b-y99ipx4ebv] { font-size:.75rem; margin:12px 4px 6px; color:var(--neutral-foreground-hint); }
.thread-inbox-group-toggle[b-y99ipx4ebv] { display:flex; align-items:center; gap:5px; width:100%; padding:4px 0; border:0; border-radius:4px; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.thread-inbox-group-toggle:hover[b-y99ipx4ebv] { background:var(--neutral-fill-stealth-hover); }
.thread-inbox-group-toggle:focus-visible[b-y99ipx4ebv] { outline:2px solid var(--accent-fill-rest); outline-offset:2px; }
.thread-inbox-group-name[b-y99ipx4ebv] { overflow-wrap:anywhere; }
.thread-inbox-group-count[b-y99ipx4ebv] { margin-left:auto; font-weight:normal; }
.thread-inbox-group-chevron[b-y99ipx4ebv] { flex-shrink:0; }
.thread-inbox-row[b-y99ipx4ebv] { border-bottom:1px solid var(--neutral-stroke-divider-rest); padding:7px 0; }
.thread-inbox-row.current[b-y99ipx4ebv] { background:color-mix(in srgb,var(--accent-fill-rest) 8%,transparent); border-radius:6px; }
.thread-inbox-row-main[b-y99ipx4ebv] { display:flex; gap:3px; align-items:start; }
.thread-inbox-link[b-y99ipx4ebv] { appearance:none; border:0; border-radius:5px; background:transparent; color:var(--neutral-foreground-rest); cursor:pointer; min-width:0; flex:1; text-align:left; display:flex; flex-direction:column; gap:4px; padding:3px 5px; font:inherit; }
.thread-inbox-link:hover[b-y99ipx4ebv] { background:var(--neutral-fill-stealth-hover); }
.thread-inbox-title[b-y99ipx4ebv] { font-size:.82rem; font-weight:600; overflow-wrap:anywhere; }
.thread-inbox-description[b-y99ipx4ebv] { font-size:.75rem; color:var(--neutral-foreground-hint); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; line-height:1.4; }
.thread-inbox-meta[b-y99ipx4ebv] { font-size:.65rem; color:var(--neutral-foreground-hint); display:flex; gap:7px; flex-wrap:wrap; }
.thread-inbox-meta .working[b-y99ipx4ebv] { color:var(--accent-foreground-rest); }
.thread-inbox-category[b-y99ipx4ebv] { display:flex; gap:4px; align-items:center; padding-left:30px; }
.thread-inbox-category button[b-y99ipx4ebv] { background:transparent; border:0; color:var(--neutral-foreground-hint); font-size:.65rem; cursor:pointer; padding:3px; }
.thread-inbox-children[b-y99ipx4ebv] { padding-left:30px; font-size:.72rem; color:var(--neutral-foreground-hint); }
.thread-inbox-children summary[b-y99ipx4ebv] { cursor:pointer; padding:4px 0; }
.thread-inbox-children .thread-inbox-title[b-y99ipx4ebv] { font-size:.74rem; font-weight:normal; }
.thread-inbox-empty[b-y99ipx4ebv], .thread-inbox-feedback[b-y99ipx4ebv] { font-size:.75rem; color:var(--neutral-foreground-hint); }

/* ThreadTokenChip.razor.css.rz.scp.css */
/* The token-usage chip is an inline metadata item on the thread status row,
   sitting after the harness · agent · model chips. The root is an inline-flex
   COLUMN so the chip flows on the same horizontal line (wrapping only if the
   row genuinely runs out of width), while the optional per-model breakdown
   stacks BELOW the label when expanded. Mirrors the muted, 11px metadata look
   of `.thread-chat-status-item`. */
.thread-token-chip[b-cb6dhr52hg] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--neutral-foreground-hint);
    font-variant-numeric: tabular-nums;
}

.thread-token-chip-head[b-cb6dhr52hg] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

/* Same look as `.thread-chat-status-sep`. */
.thread-token-chip-sep[b-cb6dhr52hg] {
    color: var(--neutral-stroke-rest);
}

.thread-token-chip-label[b-cb6dhr52hg] {
    cursor: pointer;
    white-space: nowrap;
}

.thread-token-chip-label:hover[b-cb6dhr52hg] {
    color: var(--neutral-foreground-rest);
    text-decoration: underline;
}

.thread-token-chip-label:focus-visible[b-cb6dhr52hg] {
    outline: 1px solid var(--accent-fill-rest);
    outline-offset: 1px;
    border-radius: 3px;
}

/* Per-model breakdown, indented under the label. */
.thread-token-chip-breakdown[b-cb6dhr52hg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0 2px 12px;
}

.thread-token-chip-row[b-cb6dhr52hg] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.thread-token-chip-model[b-cb6dhr52hg] {
    flex: 1 1 auto;
    min-width: 120px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}