/* _content/MeshWeaver.Blazor.Chat/ChatCitation.razor.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;
}
/* _content/MeshWeaver.Blazor.Chat/ChatDelegationView.razor.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);
    }
}
/* _content/MeshWeaver.Blazor.Chat/ChatLayoutAreaView.razor.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);
    }
}
/* _content/MeshWeaver.Blazor.Chat/ChatMessageItem.razor.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;
}
/* _content/MeshWeaver.Blazor.Chat/ChatMessageList.razor.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;
}
/* _content/MeshWeaver.Blazor.Chat/ChatSidePanel.razor.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;
}
/* _content/MeshWeaver.Blazor.Chat/NodePreviewDialog.razor.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;
}
/* _content/MeshWeaver.Blazor.Chat/ReferenceChipCollection.razor.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);
}
/* _content/MeshWeaver.Blazor.Chat/ThreadChatView.razor.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 inline <svg> wrapped in a <span class="chip-svg">.
   It carries its own colours (a terracotta burst, etc.), so it must NOT be dimmed like the monochrome
   glyph chips, and its viewBox (20×20, no width/height) must be sized down to the chip glyph size. */
.thread-chat-status-item span.chip-svg[b-4tr0j081n7] {
    display: inline-flex;
    align-items: center;
    width: 14px;
    height: 14px;
    opacity: 1;
}

.thread-chat-status-item span.chip-svg svg[b-4tr0j081n7] {
    width: 100%;
    height: 100%;
}

.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;
}

.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);
}

.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 row. Collapsed to zero height (not just
   opacity:0) when hidden so it reserves NO layout space — otherwise every bubble
   carried ~30px of invisible buttons below its text (the "lots of empty space at
   the bottom" the user flagged on a one-word "hi"). */
.thread-msg-inline-actions[b-4tr0j081n7] {
    display: flex;
    gap: 4px;
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 120ms ease, opacity 120ms ease, margin-top 120ms ease;
}

.thread-msg-bubble:hover .thread-msg-inline-actions[b-4tr0j081n7] {
    max-height: 40px;
    margin-top: 6px;
    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 (same collapse
   affordance as the multi-part doc-index menu) 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: only a slim edge toggle shows. */
.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: 260px;
    max-width: 40%;
    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-toolbar[b-4tr0j081n7] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, var(--neutral-stroke-rest));
}

.thread-nav-new[b-4tr0j081n7],
.thread-nav-collapse[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-collapse:hover[b-4tr0j081n7],
.thread-nav-reveal:hover[b-4tr0j081n7] {
    background: var(--neutral-fill-stealth-hover);
    border-color: var(--neutral-stroke-rest);
}
.thread-nav-new[b-4tr0j081n7] { margin-left: auto; }

/* Collapsed state: a slim edge strip with a vertically-centered expand toggle —
   the multi-part (doc-index) rail's collapsed look. */
.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;
}

.thread-nav-title[b-4tr0j081n7] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-foreground-hint);
}

/* 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);
}
/* _content/MeshWeaver.Blazor.Chat/ThreadTokenChip.razor.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;
}