/* /Components/Chat/ChatPanel.razor.rz.scp.css */
/* ── Chat panel ─────────────────────────────── */

.chat[b-pwltw99o44] {
    display: flex;
    flex-direction: column;
    /* Fill the room panel's height (composer sits at the floor, thread grows to
       fill above it); the panel's align-items centres this max-width column. */
    flex: 1;
    width: 100%;
    max-width: 860px;
    min-height: 0;
    /* Anchors the drag-and-drop overlay (.chat__dropzone). */
    position: relative;
}

/* ── Attachments (images/PDFs to scan) ─────────
   Files arrive by drag-and-drop over the panel (upload.js toggles .chat--dragover) or via the
   "Attach file" pill, staging chips above the composer. See docs/features/recipe-document-scan.md. */
.chat__dropzone[b-pwltw99o44] {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 6;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--accent);
    border-radius: var(--radius-lg, 12px);
    background: var(--accent-dim);
    /* Let drag events fall through to the panel, where upload.js listens. */
    pointer-events: none;
}

.chat--dragover .chat__dropzone[b-pwltw99o44] {
    display: flex;
}

.chat__dropzone-label[b-pwltw99o44] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-md);
    color: var(--accent);
    background: var(--surface-card);
    border: var(--border-width) solid var(--accent);
    border-radius: var(--radius-pill);
    padding: var(--space-4) var(--space-7);
}

.chat__dropzone-label svg[b-pwltw99o44] {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* A label can't be :disabled — park it visually while a turn is in flight. */
.chat__toolbtn--inert[b-pwltw99o44] {
    opacity: .5;
    pointer-events: none;
}

.chat__attachments[b-pwltw99o44] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
}

.chat__attachment[b-pwltw99o44] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 100%;
    font-size: var(--text-sm);
    color: var(--text-body);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
}

.chat__attachment svg[b-pwltw99o44] {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    fill: none;
    stroke: var(--text-tertiary);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chat__attachment-name[b-pwltw99o44] {
    max-width: 24ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat__attachment-size[b-pwltw99o44] {
    color: var(--text-tertiary);
    font-size: var(--text-xs);
}

.chat__attachment-remove[b-pwltw99o44] {
    font: inherit;
    font-size: var(--text-xs);
    line-height: 1;
    color: var(--text-tertiary);
    background: none;
    border: 0;
    padding: var(--space-1);
    cursor: pointer;
    transition: color .15s ease;
}

.chat__attachment-remove:hover[b-pwltw99o44] {
    color: var(--coral, #c0564a);
}

.chat__attachment-remove:disabled[b-pwltw99o44] {
    opacity: .5;
    cursor: default;
}

.chat__attach-error[b-pwltw99o44] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    padding: 0 var(--space-2) var(--space-3);
}

/* File chips on a sent user bubble (names only — the bytes aren't kept). Authored in ChatPanel's
   render fragment, so these rules carry its scope though the markup sits inside a MessageBubble. */
.msg-attachments[b-pwltw99o44] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.msg-attachments__chip[b-pwltw99o44] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    background: var(--surface-app);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-3);
}

.msg-attachments__chip svg[b-pwltw99o44] {
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chat__thread[b-pwltw99o44] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding-bottom: var(--space-8);
}

/* ── Empty-state landing ──────────────────────
   Before the first turn the chat centres a greeting, the composer, and starter
   prompts in the middle of the panel. Sending drops the composer back to its
   sticky floor and the thread layout takes over (see ChatPanel: IsLanding). */
.chat--landing[b-pwltw99o44] {
    justify-content: center;
    gap: var(--space-9);
    padding-bottom: calc(var(--space-11) + env(safe-area-inset-bottom, 0px));
}

.chat__hero[b-pwltw99o44] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
    animation: no1-bloom var(--dur-slow) var(--ease) both;
}

.chat__hero-greeting[b-pwltw99o44] {
    margin: var(--space-3) 0 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, 2.9rem);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--text-body);
}

.chat__hero-sub[b-pwltw99o44] {
    margin: 0;
    max-width: 34ch;
    font-size: var(--text-md);
    line-height: var(--leading-body);
    color: var(--text-secondary);
}

/* In the landing the composer floats mid-panel — no sticky floor, no scrim — and
   sits in a narrower column than the full thread width. */
.chat--landing .chat__composer[b-pwltw99o44] {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    position: static;
    padding: 0;
    background: none;
    animation: no1-bloom var(--dur-slow) var(--ease) both;
}

/* Centre the tool pills under the hero rather than pushing them to the right. */
.chat--landing .chat__tools[b-pwltw99o44] {
    justify-content: center;
}

.chat__suggestions[b-pwltw99o44] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    max-width: 620px;
    /* Centre the capped row in the chat column, matching the composer above. */
    margin: 0 auto;
    animation: no1-bloom var(--dur-slow) var(--ease) both;
}

.chat__suggestion[b-pwltw99o44] {
    font: inherit;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-6);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.chat__suggestion:hover[b-pwltw99o44] {
    color: var(--text-body);
    border-color: var(--accent);
    background: var(--accent-dim);
}

.chat__suggestion:disabled[b-pwltw99o44] {
    opacity: .5;
    cursor: default;
}

/* Pinned to the viewport bottom; the page scrolls behind it. The bottom
   padding folds in the iOS home-indicator inset so the pill never tucks
   underneath it (needs viewport-fit=cover, set in index.html). */
.chat__composer[b-pwltw99o44] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: var(--space-6) 0 calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--surface-app) 62%, transparent);
}

/* Opt-in tool toggles (location sharing, web search) — quiet pills above the composer
   that light up in the room accent when active. */
.chat__tools[b-pwltw99o44] {
    display: flex;
    /* Four pills once a conversation has messages — on narrow screens they wrap
       to extra rows rather than crushing each other. */
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
}

.chat__toolbtn[b-pwltw99o44] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    /* A pill's label never wraps; the row wraps instead. */
    white-space: nowrap;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-5);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.chat__toolbtn:hover[b-pwltw99o44] {
    color: var(--text-body);
    border-color: var(--accent);
}

.chat__toolbtn svg[b-pwltw99o44] {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chat__toolbtn.is-on[b-pwltw99o44] {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-dim);
}

/* "New conversation" sits apart from the toggle pills, pushed to the far left of the row. */
.chat__toolbtn--reset[b-pwltw99o44] {
    margin-right: auto;
}

/* The model selector — a native <select> dressed as one of the toggle pills, lighting up in the
   room accent when a non-default model is chosen. */
.chat__model[b-pwltw99o44] {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-5);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.chat__model:hover[b-pwltw99o44] {
    color: var(--text-body);
    border-color: var(--accent);
}

.chat__model.is-on[b-pwltw99o44] {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-dim);
}

/* Manual location fallback — revealed under the tool pills when the browser can't produce a fix
   (no provider, insecure origin, denial). A text field + Set button on one row. */
.chat__manual[b-pwltw99o44] {
    display: flex;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
}

.chat__manual-input[b-pwltw99o44] {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--text-body);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-5);
}

.chat__manual-input:focus[b-pwltw99o44] {
    outline: none;
    border-color: var(--accent);
}

.chat__manual-input:disabled[b-pwltw99o44] {
    opacity: .5;
}

.chat__manual-submit[b-pwltw99o44] {
    font: inherit;
    font-size: var(--text-sm);
    color: var(--accent);
    background: var(--accent-dim);
    border: var(--border-width) solid var(--accent);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-5);
    cursor: pointer;
    transition: opacity .15s ease;
}

.chat__manual-submit:disabled[b-pwltw99o44] {
    opacity: .5;
    cursor: default;
}

.chat__manual-error[b-pwltw99o44] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    padding: 0 var(--space-2) var(--space-3);
}

.chat__toolbtn:disabled[b-pwltw99o44] {
    opacity: .5;
    cursor: default;
}

.chat__thinking[b-pwltw99o44] {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    margin: 0;
    padding: var(--space-2) 0;
}

.chat__thinking span[b-pwltw99o44] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: chat-pulse-b-pwltw99o44 1.2s ease-in-out infinite;
}

.chat__thinking span:nth-child(2)[b-pwltw99o44] { animation-delay: .2s; }
.chat__thinking span:nth-child(3)[b-pwltw99o44] { animation-delay: .4s; }

@keyframes chat-pulse-b-pwltw99o44 {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

.chat__error[b-pwltw99o44] {
    align-self: center;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-7);
}

.chat__end[b-pwltw99o44] {
    height: 1px;
    flex-shrink: 0;
}

/* ── Per-response feedback ─────────────────────────
   A quiet "Flag response" action under each assistant turn; opening it reveals an optional reason
   box. See docs/features/chat-feedback.md. Authored here (in ChatPanel's render fragment), so these
   rules carry ChatPanel's scope even though the markup sits inside a MessageBubble. */
.msg-actions[b-pwltw99o44] {
    margin-top: var(--space-4);
}

/* The collapsed action row: "Flag response" alongside "Export for dev" — two quiet ghost buttons. */
.msg-actions__row[b-pwltw99o44] {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.msg-actions__flag[b-pwltw99o44],
.msg-actions__export[b-pwltw99o44] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font: inherit;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-tertiary);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color .15s ease;
}

.msg-actions__flag:hover[b-pwltw99o44],
.msg-actions__export:hover[b-pwltw99o44] {
    color: var(--accent);
}

.msg-actions__flag:disabled[b-pwltw99o44],
.msg-actions__export:disabled[b-pwltw99o44] {
    opacity: .5;
    cursor: default;
}

.msg-actions__flag svg[b-pwltw99o44],
.msg-actions__export svg[b-pwltw99o44] {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.msg-actions__flagged[b-pwltw99o44] {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.msg-actions__form[b-pwltw99o44] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 48ch;
}

.msg-actions__reason[b-pwltw99o44] {
    font: inherit;
    font-size: var(--text-sm);
    color: var(--text-body);
    background: var(--surface-app);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    resize: vertical;
}

.msg-actions__reason:focus[b-pwltw99o44] {
    outline: none;
    border-color: var(--accent);
}

.msg-actions__buttons[b-pwltw99o44] {
    display: flex;
    gap: var(--space-3);
}

.msg-actions__btn[b-pwltw99o44] {
    font: inherit;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-5);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.msg-actions__btn:hover[b-pwltw99o44] {
    color: var(--text-body);
    border-color: var(--accent);
}

.msg-actions__btn--primary[b-pwltw99o44] {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-dim);
}

.msg-actions__btn:disabled[b-pwltw99o44] {
    opacity: .5;
    cursor: default;
}

/* ── Dev mode view ─────────────────────────────────
   An inline debugging panel under each assistant turn (toggled by the "Dev mode" pill) showing the
   run's tool calls and token usage — the export payload, without the download. See
   docs/features/chat-dev-mode.md. Authored in ChatPanel's render fragment, so these carry its scope
   though the markup sits inside a MessageBubble. */
.devview[b-pwltw99o44] {
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    border-left: 2px solid var(--border-default);
    padding-left: var(--space-4);
}

.devview__meta[b-pwltw99o44] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.devview__call[b-pwltw99o44] {
    font-size: var(--text-sm);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-sm);
}

.devview__call--error[b-pwltw99o44] {
    border-color: var(--coral);
}

.devview__call-head[b-pwltw99o44] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    list-style: none;
}

.devview__call-head[b-pwltw99o44]::-webkit-details-marker {
    display: none;
}

/* A disclosure caret that rotates when the tool call is expanded. */
.devview__call-head[b-pwltw99o44]::before {
    content: "▸";
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    transition: transform .15s ease;
}

.devview__call[open] > .devview__call-head[b-pwltw99o44]::before {
    transform: rotate(90deg);
}

.devview__call-name[b-pwltw99o44] {
    font-family: var(--font-mono);
    color: var(--text-body);
}

.devview__badge[b-pwltw99o44] {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--coral);
}

.devview__io[b-pwltw99o44] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: 0 var(--space-4) var(--space-3);
}

.devview__io-label[b-pwltw99o44] {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-top: var(--space-2);
}

.devview__json[b-pwltw99o44] {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--leading-loose);
    color: var(--text-body);
    background: var(--surface-app);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

/* Tighter rhythm on small screens — matches the design system's mobile
   ChatView (16px gutters, condensed thread gap). The composer bleeds to the
   full content width and pins hard to the screen bottom, clearing the home
   indicator via the safe-area inset. */
@media (max-width: 899.98px) {
    .chat__thread[b-pwltw99o44] {
        gap: var(--space-7);
        /* Room so the last bubble can scroll clear of the pinned composer. */
        padding-bottom: var(--space-10);
    }

    .chat__composer[b-pwltw99o44] {
        padding: var(--space-5) 0 calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    }
}
/* /Components/Chat/ChatRecipeCard.razor.rz.scp.css */
/* ChatRecipeCard — a saved recipe shown inline in a chat reply. A self-contained card
   inside the assistant bubble: a compact overview that expands to the full recipe. The
   expanded body is injected server-rendered HTML, so its recipe-* elements are styled
   through ::deep (a compact echo of RecipeCard.razor.css). */

.chat-recipe[b-jlrsvkw16g] {
    margin: var(--space-3, 12px) 0;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    overflow: hidden;
}

.chat-recipe__status[b-jlrsvkw16g] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.chat-recipe__status--muted[b-jlrsvkw16g] {
    color: var(--text-tertiary);
}

.chat-recipe__head[b-jlrsvkw16g] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-recipe__kind[b-jlrsvkw16g] {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
}

.chat-recipe__title[b-jlrsvkw16g] {
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.55rem);
    line-height: 1.15;
    margin: 0;
    color: var(--text-body);
}

.chat-recipe__meta[b-jlrsvkw16g] {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.chat-recipe__desc[b-jlrsvkw16g] {
    margin: var(--space-3, 12px) 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-body);
}

.chat-recipe__ingredients[b-jlrsvkw16g] {
    list-style: none;
    padding: 0;
    margin: var(--space-3, 12px) 0 0;
    display: grid;
    gap: 2px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-body);
}

.chat-recipe__ingredients-more[b-jlrsvkw16g] {
    color: var(--text-tertiary);
    font-size: 0.8rem;
}

.chat-recipe__tags[b-jlrsvkw16g] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--space-3, 12px);
}

.chat-recipe__tag[b-jlrsvkw16g] {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent-dim);
    color: var(--text-secondary);
}

.chat-recipe__actions[b-jlrsvkw16g] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    margin-top: var(--space-3, 12px);
}

.chat-recipe__more[b-jlrsvkw16g],
.chat-recipe__go[b-jlrsvkw16g] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    padding: 4px 0;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease;
}

.chat-recipe__more[b-jlrsvkw16g] {
    color: var(--text-secondary);
}

.chat-recipe__more:hover[b-jlrsvkw16g] {
    color: var(--text-body);
}

.chat-recipe__go[b-jlrsvkw16g] {
    color: var(--accent);
    margin-left: auto;
}

.chat-recipe__go svg[b-jlrsvkw16g] {
    width: 15px;
    height: 15px;
}

.chat-recipe__go:hover[b-jlrsvkw16g] {
    color: var(--accent-strong, var(--accent));
}

/* ---- Expanded body: injected recipe HTML (server renderer) ---- */

.chat-recipe__body[b-jlrsvkw16g] {
    margin-top: var(--space-3, 12px);
    padding-top: var(--space-3, 12px);
    border-top: 1px solid var(--border-soft);
}

/* The renderer repeats the title/meta in its own header; the card already shows them, so hide
   that duplicate and lead the expanded body straight into the ingredients/method. */
.chat-recipe__body[b-jlrsvkw16g]  .recipe > header {
    display: none;
}

.chat-recipe__body[b-jlrsvkw16g]  .recipe-description {
    margin: 0 0 var(--space-3, 12px);
    color: var(--text-body);
}

.chat-recipe__body[b-jlrsvkw16g]  .recipe-meta,
.chat-recipe__body[b-jlrsvkw16g]  .recipe-kind-details,
.chat-recipe__body[b-jlrsvkw16g]  .recipe-source {
    margin: 0 0 var(--space-2, 8px);
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.chat-recipe__body[b-jlrsvkw16g]  .recipe-source a,
.chat-recipe__body[b-jlrsvkw16g]  .recipe-serve-with a,
.chat-recipe__body[b-jlrsvkw16g]  .recipe-ref a {
    color: var(--accent);
}

.chat-recipe__body[b-jlrsvkw16g]  .recipe h2 {
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-size: 1.2rem;
    margin: var(--space-4, 16px) 0 var(--space-2, 8px);
    padding-bottom: var(--space-1, 4px);
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-body);
}

.chat-recipe__body[b-jlrsvkw16g]  .recipe h3 {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin: var(--space-3, 12px) 0 var(--space-2, 8px);
}

.chat-recipe__body[b-jlrsvkw16g]  .recipe-ingredients ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 2px;
}

.chat-recipe__body[b-jlrsvkw16g]  .recipe-ingredients li {
    padding: var(--space-2, 8px) 0;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-body);
}

.chat-recipe__body[b-jlrsvkw16g]  .recipe-method ol {
    padding-left: 1.3em;
    margin: 0;
    display: grid;
    gap: var(--space-3, 12px);
}

.chat-recipe__body[b-jlrsvkw16g]  .recipe-method li {
    padding-left: var(--space-2, 8px);
    color: var(--text-body);
    line-height: 1.55;
}

.chat-recipe__body[b-jlrsvkw16g]  .recipe-method li::marker {
    color: var(--accent);
    font-weight: 600;
}

.chat-recipe__body[b-jlrsvkw16g]  .recipe-equipment ul {
    margin: 0;
    padding-left: 1.2em;
    color: var(--text-body);
}

.chat-recipe__body[b-jlrsvkw16g]  .recipe-notes {
    color: var(--text-secondary);
}

.chat-recipe__body[b-jlrsvkw16g]  p {
    line-height: 1.55;
}
/* /Components/Chat/Composer.razor.rz.scp.css */
/* ── Composer ─────────────────────────────── */

.composer[b-iea42wsqo2] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-4);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius);
    padding: 6px 6px 6px var(--space-8);
    transition: border-color var(--dur-slow), box-shadow var(--dur-slow);
}

/* Collapse to a pill while the field is a single line; the rounded-rect
   corners above take over once the textarea grows past one row. */
.composer:not(:has(.composer__input--multiline))[b-iea42wsqo2] {
    border-radius: var(--radius-pill);
}

.composer:focus-within[b-iea42wsqo2] {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

/* Awaiting a reply — the row reads as inert without going fully transparent. */
.composer:has(.composer__input:disabled)[b-iea42wsqo2] {
    opacity: .65;
}

.composer__input[b-iea42wsqo2] {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    color: var(--text-body);
    font-family: var(--font-body);
    font-size: var(--text-md);
    /* Multiline field: no manual resize handle, grows via JS up to ~8 lines. */
    resize: none;
    overflow-y: auto;
    line-height: 1.5;
    max-height: calc(1.5em * 8);
    padding: 7px 0;
    /* Keep the single-row height aligned with the send button. */
    height: auto;
}

.composer__input[b-iea42wsqo2]::placeholder {
    color: var(--text-tertiary);
}

.composer__input:disabled[b-iea42wsqo2] {
    color: var(--text-secondary);
    cursor: default;
}

/* Mobile: a 16px input keeps iOS Safari from zooming in on focus. */
@media (max-width: 899.98px) {
    .composer[b-iea42wsqo2] {
        gap: var(--space-3);
        padding-left: var(--space-7);
    }

    .composer__input[b-iea42wsqo2] {
        font-size: 16px;
    }
}
/* /Components/Chat/HandoffCard.razor.rz.scp.css */
/* ── HandoffCard ─────────────────────────────── */

.handoff[b-ujvebkgufi] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    background: var(--surface-raised);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 9px var(--space-5);
    color: var(--text-body);
    font-family: var(--font-body);
    font-size: var(--text-base);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--dur), background var(--dur);
}

.handoff:hover[b-ujvebkgufi] {
    background: var(--accent-dim);
    border-color: var(--handoff-accent, var(--accent));
}

.handoff:focus-visible[b-ujvebkgufi] {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

.handoff__label[b-ujvebkgufi] {
    display: block;
}

.handoff__sublabel[b-ujvebkgufi] {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: 1px;
}

.handoff__chevron[b-ujvebkgufi] {
    margin-left: auto;
    color: var(--text-tertiary);
    font-size: var(--text-md);
    flex-shrink: 0;
    transition: color var(--dur);
}

.handoff:hover .handoff__chevron[b-ujvebkgufi] {
    color: var(--handoff-accent, var(--accent));
}
/* /Components/Chat/MessageBubble.razor.rz.scp.css */
/* ── MessageBubble ─────────────────────────────── */

.msg[b-33aajhnp7n] {
    display: flex;
    gap: 13px;
}

.msg--assistant[b-33aajhnp7n] {
    max-width: 72ch;
    align-self: flex-start;
    flex-direction: row;
}

.msg--user[b-33aajhnp7n] {
    max-width: 60ch;
    align-self: flex-end;
    flex-direction: row-reverse;
}

.msg__bubble[b-33aajhnp7n] {
    padding: var(--space-5) var(--space-7);
    border-radius: var(--radius);
    border: var(--border-width) solid var(--border-soft);
    background: var(--surface-card);
}

.msg--user .msg__bubble[b-33aajhnp7n] {
    background: var(--surface-raised);
}

.msg__speaker[b-33aajhnp7n] {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 5px;
    transition: color var(--dur-accent);
}

.msg--user .msg__speaker[b-33aajhnp7n] {
    color: var(--text-tertiary);
}

.msg__body[b-33aajhnp7n] {
    font-size: var(--text-md);
    line-height: var(--leading-body);
    color: var(--text-body);
}

.msg__body[b-33aajhnp7n]  p {
    margin: 0 0 var(--space-4);
}

.msg__body[b-33aajhnp7n]  p:last-child {
    margin-bottom: 0;
}

.msg__body[b-33aajhnp7n]  code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background: var(--surface-raised);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
}

/* ── Rich Markdown from the assistant ──────────────
   These target MarkupString HTML (headings, links, lists, tables, …), which
   carries no scope attribute — hence ::deep on every rule. */

.msg__body[b-33aajhnp7n]  strong {
    font-weight: var(--weight-semibold);
    color: var(--text-body);
}

.msg__body[b-33aajhnp7n]  em {
    font-style: italic;
}

.msg__body[b-33aajhnp7n]  del {
    color: var(--text-tertiary);
}

.msg__body[b-33aajhnp7n]  a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color var(--dur-accent);
}

.msg__body[b-33aajhnp7n]  a:hover {
    text-decoration-thickness: 2px;
}

/* Web-search citations: compact superscript reference markers ("[1]"). The source's
   site name rides in the anchor's title attribute, shown as the hover tooltip while
   the underlying URL stays masked. */
.msg__body[b-33aajhnp7n]  a.citation {
    font-size: 0.72em;
    font-weight: var(--weight-semibold);
    vertical-align: super;
    line-height: 1;
    margin-left: 1px;
    text-decoration: none;
    cursor: help;
}

.msg__body[b-33aajhnp7n]  a.citation + a.citation {
    margin-left: 2px;
}

.msg__body[b-33aajhnp7n]  a.citation:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

/* Headings — the display face, sized down to sit inside a bubble. */
.msg__body[b-33aajhnp7n]  h1,
.msg__body[b-33aajhnp7n]  h2,
.msg__body[b-33aajhnp7n]  h3,
.msg__body[b-33aajhnp7n]  h4 {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    color: var(--text-body);
    margin: var(--space-6) 0 var(--space-3);
}

.msg__body[b-33aajhnp7n]  h1 { font-size: var(--text-xl); }
.msg__body[b-33aajhnp7n]  h2 { font-size: var(--text-lg); }
.msg__body[b-33aajhnp7n]  h3,
.msg__body[b-33aajhnp7n]  h4 { font-size: var(--text-md); }

.msg__body[b-33aajhnp7n]  :first-child {
    margin-top: 0;
}

/* Lists */
.msg__body[b-33aajhnp7n]  ul,
.msg__body[b-33aajhnp7n]  ol {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-8);
}

.msg__body[b-33aajhnp7n]  li {
    margin: var(--space-2) 0;
}

.msg__body[b-33aajhnp7n]  li::marker {
    color: var(--text-tertiary);
}

.msg__body[b-33aajhnp7n]  ul ul,
.msg__body[b-33aajhnp7n]  ul ol,
.msg__body[b-33aajhnp7n]  ol ul,
.msg__body[b-33aajhnp7n]  ol ol {
    margin-bottom: 0;
}

/* Task lists (GitHub-style checkboxes) render as disabled inputs. */
.msg__body[b-33aajhnp7n]  li.task-list-item {
    list-style: none;
    margin-left: calc(-1 * var(--space-6));
}

.msg__body[b-33aajhnp7n]  li.task-list-item input {
    margin-right: var(--space-3);
    accent-color: var(--accent);
}

/* Blockquotes */
.msg__body[b-33aajhnp7n]  blockquote {
    margin: 0 0 var(--space-4);
    padding: var(--space-2) 0 var(--space-2) var(--space-5);
    border-left: 2px solid var(--accent);
    color: var(--text-secondary);
}

.msg__body[b-33aajhnp7n]  blockquote > :last-child {
    margin-bottom: 0;
}

/* Fenced code blocks — distinct from inline <code> (no pill background). */
.msg__body[b-33aajhnp7n]  pre {
    margin: 0 0 var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: var(--surface-raised);
    border: var(--border-width) solid var(--border-soft);
    border-radius: var(--radius-md);
    overflow-x: auto;
    line-height: var(--leading-loose);
}

.msg__body[b-33aajhnp7n]  pre code {
    background: none;
    padding: 0;
    font-size: var(--text-sm);
}

/* Tables */
.msg__body[b-33aajhnp7n]  table {
    width: 100%;
    margin: 0 0 var(--space-4);
    border-collapse: collapse;
    font-size: var(--text-base);
}

.msg__body[b-33aajhnp7n]  th,
.msg__body[b-33aajhnp7n]  td {
    padding: var(--space-3) var(--space-5);
    text-align: left;
    border: var(--border-width) solid var(--border-soft);
}

.msg__body[b-33aajhnp7n]  thead th {
    background: var(--surface-raised);
    font-weight: var(--weight-semibold);
    color: var(--text-body);
}

/* Horizontal rule */
.msg__body[b-33aajhnp7n]  hr {
    height: 0;
    margin: var(--space-6) 0;
    border: 0;
    border-top: var(--border-width) solid var(--border-soft);
}

.msg__body[b-33aajhnp7n]  img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}
/* /Components/Chat/SessionHistory.razor.rz.scp.css */
/* ── Past conversations overlay ─────────────────────────── */

/* Above the app shell's layers (mobile drawer scrim 50, right panel 45). */
.history[b-fyzol9vb5d] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-7);
}

.history__scrim[b-fyzol9vb5d] {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--surface-app) 72%, transparent);
    backdrop-filter: blur(2px);
}

.history__panel[b-fyzol9vb5d] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    width: min(720px, 100%);
    max-height: min(80vh, 900px);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-panel);
    padding: var(--space-7);
    overflow: hidden;
}

.history__head[b-fyzol9vb5d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.history__title[b-fyzol9vb5d] {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: var(--text-lg);
    margin: 0;
}

.history__back[b-fyzol9vb5d] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font: inherit;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color .15s ease;
}

.history__back:hover[b-fyzol9vb5d] {
    color: var(--accent);
}

.history__back svg[b-fyzol9vb5d] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.history__close[b-fyzol9vb5d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    color: var(--text-secondary);
    background: none;
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.history__close:hover[b-fyzol9vb5d] {
    color: var(--text-body);
    border-color: var(--accent);
}

.history__close svg[b-fyzol9vb5d] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.history__status[b-fyzol9vb5d] {
    color: var(--text-secondary);
    font-size: var(--text-md);
    margin: 0;
}

.history__status--error[b-fyzol9vb5d] {
    color: var(--accent);
}

/* List */
.history__list[b-fyzol9vb5d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    overflow-y: auto;
    padding-right: var(--space-2);
}

.history__item[b-fyzol9vb5d] {
    display: flex;
    align-items: stretch;
    gap: var(--space-4);
    background: var(--surface-app);
    border: var(--border-width) solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    transition: border-color .15s ease;
}

.history__item:hover[b-fyzol9vb5d] {
    border-color: var(--accent);
}

.history__open[b-fyzol9vb5d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
    text-align: left;
    font: inherit;
    color: var(--text-body);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.history__item-top[b-fyzol9vb5d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.history__date[b-fyzol9vb5d] {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    white-space: nowrap;
}

.history__count[b-fyzol9vb5d] {
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--text-tertiary);
    white-space: nowrap;
}

.history__preview[b-fyzol9vb5d] {
    font-size: var(--text-sm);
    line-height: var(--leading-body);
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Journal toggle — shared by list rows and the open thread's meta line. */
.history__journal[b-fyzol9vb5d] {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: var(--space-2);
    flex-shrink: 0;
    white-space: nowrap;
    font: inherit;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-tertiary);
    background: none;
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.history__journal:hover[b-fyzol9vb5d] {
    color: var(--text-body);
    border-color: var(--accent);
}

.history__journal.is-on[b-fyzol9vb5d] {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-dim);
}

.history__journal:disabled[b-fyzol9vb5d] {
    opacity: .5;
    cursor: default;
}

.history__journal svg[b-fyzol9vb5d] {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.history__journal.is-on svg[b-fyzol9vb5d] {
    fill: var(--accent-dim);
}

/* Open thread */
.history__meta[b-fyzol9vb5d] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.history__meta .history__journal[b-fyzol9vb5d] {
    margin-left: auto;
}

.history__thread[b-fyzol9vb5d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    overflow-y: auto;
    padding-right: var(--space-2);
}

.history__turn[b-fyzol9vb5d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border: var(--border-width) solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-app);
}

.history__turn--assistant[b-fyzol9vb5d] {
    background: var(--surface-raised);
}

.history__role[b-fyzol9vb5d] {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.history__turn--assistant .history__role[b-fyzol9vb5d] {
    color: var(--accent);
}

.history__body[b-fyzol9vb5d] {
    font-size: var(--text-md);
    line-height: var(--leading-body);
    color: var(--text-body);
}

.history__body p[b-fyzol9vb5d] {
    margin: 0 0 var(--space-3);
}

.history__body p:last-child[b-fyzol9vb5d] {
    margin-bottom: 0;
}

/* Full-bleed sheet on small screens. */
@media (max-width: 899.98px) {
    .history[b-fyzol9vb5d] {
        padding: 0;
    }

    .history__panel[b-fyzol9vb5d] {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
        border: 0;
        padding: var(--space-6) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    }
}
/* /Components/Core/Avatar.razor.rz.scp.css */
/* ── Avatar ─────────────────────────────── */

.avatar[b-afj5pl1i1t] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 50%;
    font-family: var(--font-display);
    transition: color var(--dur-accent);
}

.avatar--assistant[b-afj5pl1i1t] {
    color: var(--accent);
    border: var(--border-width) solid var(--border-default);
    background: var(--surface-card);
}

.avatar--user[b-afj5pl1i1t] {
    color: var(--text-secondary);
    border: var(--border-width) solid var(--border-default);
    background: var(--surface-card);
}

.avatar--account[b-afj5pl1i1t] {
    color: var(--lilac);
    border: var(--border-width) solid var(--lilac-deep);
    background: radial-gradient(circle at 30% 25%, var(--lilac-dim), transparent 70%);
}
/* /Components/Core/Button.razor.rz.scp.css */
/* ── Button ─────────────────────────────── */

.btn[b-86hw3fh7ba] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    line-height: 1;
    padding: 9px 18px;              /* md */
    font-size: var(--text-base);   /* md */
    border: var(--border-width) solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur), color var(--dur),
                border-color var(--dur), transform var(--dur-fast);
}

/* Shape */
.btn--pill[b-86hw3fh7ba] { border-radius: var(--radius-pill); }
.btn--rect[b-86hw3fh7ba] { border-radius: var(--radius-md); }

/* Sizes (md is the base above) */
.btn--sm[b-86hw3fh7ba] { padding: 6px 14px; font-size: var(--text-sm); }
.btn--lg[b-86hw3fh7ba] { padding: 11px 22px; font-size: var(--text-md); }

/* Variant: primary — accent fill, dark text, lifts on hover */
.btn--primary[b-86hw3fh7ba] {
    background: var(--accent);
    color: var(--text-on-accent);
}
.btn--primary:hover:not(:disabled)[b-86hw3fh7ba] { transform: translateY(-1px); }

/* Variant: ghost — bordered, muted → accent on hover */
.btn--ghost[b-86hw3fh7ba] {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-default);
}
.btn--ghost:hover:not(:disabled)[b-86hw3fh7ba] {
    background: var(--accent-dim);
    color: var(--text-body);
    border-color: var(--accent);
}

/* Variant: quiet — borderless, fills faintly on hover */
.btn--quiet[b-86hw3fh7ba] {
    background: transparent;
    color: var(--text-secondary);
}
.btn--quiet:hover:not(:disabled)[b-86hw3fh7ba] {
    background: var(--surface-raised);
    color: var(--text-body);
}

.btn:focus-visible[b-86hw3fh7ba] {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

.btn:disabled[b-86hw3fh7ba] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Icons passed as RenderFragment (inline SVG) */
.btn__icon[b-86hw3fh7ba] {
    display: inline-grid;
    place-items: center;
}
.btn__icon[b-86hw3fh7ba]  svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    flex-shrink: 0;
}
/* /Components/Core/Chip.razor.rz.scp.css */
/* ── Chip ─────────────────────────────── */

.chip[b-l06iemumh3] {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    cursor: pointer;
    transition: border-color var(--dur), color var(--dur), background var(--dur);
}

.chip:hover:not(:disabled)[b-l06iemumh3] {
    color: var(--text-body);
    background: var(--accent-dim);
    border-color: var(--accent);
}

.chip:focus-visible[b-l06iemumh3] {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

.chip:disabled[b-l06iemumh3] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Core/IconButton.razor.rz.scp.css */
/* ── IconButton ─────────────────────────────── */

.iconbtn[b-u0ubnmfvqu] {
    display: grid;
    place-items: center;
    padding: 0;
    border: var(--border-width) solid transparent;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--dur), color var(--dur),
                border-color var(--dur), transform var(--dur-fast);
}

.iconbtn--round[b-u0ubnmfvqu] { border-radius: 50%; }
.iconbtn--square[b-u0ubnmfvqu] { border-radius: var(--radius-md); }

/* Variant: send — circular accent fill, scales up on hover */
.iconbtn--send[b-u0ubnmfvqu] {
    background: var(--accent);
    color: var(--text-on-accent);
}
.iconbtn--send:hover:not(:disabled)[b-u0ubnmfvqu] { transform: scale(1.06); }

/* Variant: ghost — bordered toolbar toggle */
.iconbtn--ghost[b-u0ubnmfvqu] {
    border-color: var(--border-default);
}
.iconbtn--ghost:hover:not(:disabled)[b-u0ubnmfvqu] {
    border-color: var(--accent);
    color: var(--text-body);
    background: var(--accent-dim);
}
.iconbtn--ghost.iconbtn--active[b-u0ubnmfvqu] {
    border-color: var(--accent);
    color: var(--accent);
    background: transparent;
}

/* Variant: plain — borderless */
.iconbtn--plain:hover:not(:disabled)[b-u0ubnmfvqu] {
    color: var(--text-body);
    background: var(--surface-raised);
}

.iconbtn:focus-visible[b-u0ubnmfvqu] {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

.iconbtn:disabled[b-u0ubnmfvqu] {
    opacity: 0.45;
    cursor: not-allowed;
}

.iconbtn[b-u0ubnmfvqu]  svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    flex-shrink: 0;
}
/* /Components/Core/SectionLabel.razor.rz.scp.css */
/* ── SectionLabel ─────────────────────────────── */

.section-label[b-n971fcfznx] {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-tertiary);
}
/* /Components/Core/StatusDot.razor.rz.scp.css */
/* ── StatusDot ─────────────────────────────── */

.status-dot[b-2tut9ex3xn] {
    display: inline-block;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot--ok[b-2tut9ex3xn]     { background: var(--status-ok); }
.status-dot--sync[b-2tut9ex3xn]   { background: var(--status-sync); }
.status-dot--info[b-2tut9ex3xn]   { background: var(--status-info); }
.status-dot--accent[b-2tut9ex3xn] { background: var(--accent); }
.status-dot--muted[b-2tut9ex3xn]  { background: var(--faint); }
/* /Components/Core/Tag.razor.rz.scp.css */
/* ── Tag ─────────────────────────────── */

.tag[b-jh16w3nnko] {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--accent);
    border: var(--border-width) solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: var(--radius-pill);
    padding: 1px 9px;
    white-space: nowrap;
}
/* /Components/Foyer/TodoListPanel.razor.rz.scp.css */
/* TodoListPanel — the Foyer To-do tab. A single centred column: the list reads like
   a paper list, so it stays narrow even in a wide workspace. Mirrors ShoppingListPanel,
   with a composer row on top. */

.todo[b-61mx0ffz5c] {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-height: 0;
}

.todo__composer[b-61mx0ffz5c] {
    display: flex;
    gap: var(--space-2);
}

.todo__input[b-61mx0ffz5c] {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-body);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font: inherit;
    transition: border-color 0.15s ease;
}

.todo__input:focus[b-61mx0ffz5c] {
    outline: none;
    border-color: var(--accent);
}

.todo__input:disabled[b-61mx0ffz5c] {
    opacity: 0.6;
}

.todo__add[b-61mx0ffz5c] {
    flex: none;
    border: 1px solid var(--accent);
    background: var(--accent-dim);
    color: var(--text-body);
    border-radius: var(--radius-pill);
    padding: 4px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.todo__add:hover:not(:disabled)[b-61mx0ffz5c] {
    background: var(--accent);
    color: var(--surface-card);
}

.todo__add:disabled[b-61mx0ffz5c] {
    opacity: 0.5;
    cursor: default;
}

.todo__toolbar[b-61mx0ffz5c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.todo__count[b-61mx0ffz5c] {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.todo__clear[b-61mx0ffz5c] {
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-secondary);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.todo__clear:hover:not(:disabled)[b-61mx0ffz5c] {
    color: var(--text-body);
    border-color: var(--accent);
    background: var(--accent-dim);
}

.todo__clear:disabled[b-61mx0ffz5c] {
    opacity: 0.6;
    cursor: default;
}

.todo__items[b-61mx0ffz5c] {
    list-style: none;
    margin: 0;
    padding: 0 2px 2px 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    overflow-y: auto;
    min-height: 0;
}

.todo-row[b-61mx0ffz5c] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.todo-row:hover[b-61mx0ffz5c] {
    border-color: var(--accent);
}

.todo-row__main[b-61mx0ffz5c] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.todo-row__check[b-61mx0ffz5c] {
    flex: none;
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

.todo-row__label[b-61mx0ffz5c] {
    color: var(--text-body);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* Completed tasks sink: struck through and dimmed, but still present until cleared. */
.todo-row.is-done[b-61mx0ffz5c] {
    opacity: 0.65;
    background: var(--surface-raised);
}

.todo-row.is-done .todo-row__label[b-61mx0ffz5c] {
    text-decoration: line-through;
    color: var(--text-tertiary);
}

.todo-row__remove[b-61mx0ffz5c] {
    flex: none;
    width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.todo-row__remove:hover:not(:disabled)[b-61mx0ffz5c] {
    color: var(--terracotta, #d98b5f);
    background: var(--surface-raised);
}

.todo-row__remove svg[b-61mx0ffz5c] {
    width: 14px;
    height: 14px;
}

.todo__status[b-61mx0ffz5c] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: var(--space-2) 0;
}

.todo__status--error[b-61mx0ffz5c] {
    color: var(--terracotta, #d98b5f);
}

.todo__empty[b-61mx0ffz5c] {
    border: 1px dashed var(--border-default);
    border-radius: var(--radius);
    padding: var(--space-6);
    text-align: center;
    color: var(--text-tertiary);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.todo__empty-title[b-61mx0ffz5c] {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin: 0;
}

.todo__empty-text[b-61mx0ffz5c] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}
/* /Components/Games/GameLibraryPanel.razor.rz.scp.css */
/* GameLibraryPanel — the Games Room Library tab. A single centred column, like the
   To-do and Shopping tabs: a collection reads like a shelf list, so it stays narrow
   even in a wide workspace. */

.gamelib[b-m5lvfckjz7] {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-height: 0;
}

.gamelib__toolbar[b-m5lvfckjz7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.gamelib__count[b-m5lvfckjz7] {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.gamelib__items[b-m5lvfckjz7] {
    list-style: none;
    margin: 0;
    padding: 0 2px 2px 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    overflow-y: auto;
    min-height: 0;
}

.gamelib-row[b-m5lvfckjz7] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.gamelib-row:hover[b-m5lvfckjz7] {
    border-color: var(--accent);
}

.gamelib-row__main[b-m5lvfckjz7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.gamelib-row__title[b-m5lvfckjz7] {
    color: var(--text-body);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.gamelib-row__platform[b-m5lvfckjz7] {
    margin-left: var(--space-2);
    font-size: 0.78rem;
    color: var(--text-tertiary);
}

.gamelib-row__notes[b-m5lvfckjz7] {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

/* Finished games sink: dimmed, but still on the shelf until removed. */
.gamelib-row.is-finished[b-m5lvfckjz7] {
    opacity: 0.65;
    background: var(--surface-raised);
}

.gamelib-row__select[b-m5lvfckjz7] {
    flex: none;
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-secondary);
    border-radius: var(--radius-pill);
    padding: 3px 8px;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.gamelib-row__select:hover:not(:disabled)[b-m5lvfckjz7],
.gamelib-row__select:focus[b-m5lvfckjz7] {
    color: var(--text-body);
    border-color: var(--accent);
    outline: none;
}

.gamelib-row__select:disabled[b-m5lvfckjz7] {
    opacity: 0.6;
    cursor: default;
}

.gamelib-row__remove[b-m5lvfckjz7] {
    flex: none;
    width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.gamelib-row__remove:hover:not(:disabled)[b-m5lvfckjz7] {
    color: var(--terracotta, #d98b5f);
    background: var(--surface-raised);
}

.gamelib-row__remove svg[b-m5lvfckjz7] {
    width: 14px;
    height: 14px;
}

.gamelib__status[b-m5lvfckjz7] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: var(--space-2) 0;
}

.gamelib__status--error[b-m5lvfckjz7] {
    color: var(--terracotta, #d98b5f);
}

.gamelib__empty[b-m5lvfckjz7] {
    border: 1px dashed var(--border-default);
    border-radius: var(--radius);
    padding: var(--space-6);
    text-align: center;
    color: var(--text-tertiary);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.gamelib__empty-title[b-m5lvfckjz7] {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin: 0;
}

.gamelib__empty-text[b-m5lvfckjz7] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}
/* /Components/Kitchen/RecipeCard.razor.rz.scp.css */
/* RecipeCard — one recipe's reading surface. The body markup is injected from the
   server renderer, so its recipe-* elements are styled through ::deep. */

.recipe-card[b-9qx5996sw7] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    overflow: hidden;
    /* The house's signature entrance (defined globally in effects.css). Plays
       once when the card mounts; re-scales swap the Detail parameter in place,
       so they don't re-trigger it. */
    animation: no1-bloom var(--dur-slow, 0.25s) var(--ease, ease) both;
}

.recipe-card__head[b-9qx5996sw7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-raised);
}

.recipe-card__kind[b-9qx5996sw7] {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-pill, 999px);
    background: var(--accent-dim);
}

/* Cocktails get the wisteria hue so they read apart from cooking recipes at a
   glance (the Kitchen's own accent stays honey). */
.recipe-card__kind[data-kind="cocktail"][b-9qx5996sw7] {
    color: var(--wisteria, #a5b6ea);
    background: rgba(165, 182, 234, 0.13);
}

.recipe-card__tools[b-9qx5996sw7] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
}

.recipe-card__scaler[b-9qx5996sw7] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: 3px 6px;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    background: var(--surface-card);
}

.recipe-card__step[b-9qx5996sw7] {
    width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    border: none;
    border-radius: 999px;
    background: var(--accent-dim);
    color: var(--text-body);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.recipe-card__step:hover:not(:disabled)[b-9qx5996sw7] {
    background: var(--accent);
    color: var(--text-on-accent);
}

.recipe-card__step:disabled[b-9qx5996sw7] {
    opacity: 0.4;
    cursor: default;
}

.recipe-card__servings[b-9qx5996sw7] {
    min-width: 5.5em;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.recipe-card__servings strong[b-9qx5996sw7] {
    color: var(--text-body);
}

/* When the yield is scaled away from the recipe's base, the count picks up the
   accent so the state is visible beyond the Reset button appearing. */
.recipe-card__servings.is-scaled strong[b-9qx5996sw7] {
    color: var(--accent);
}

.recipe-card__reset[b-9qx5996sw7] {
    border: none;
    background: none;
    color: var(--text-tertiary);
    font-size: 0.78rem;
    cursor: pointer;
    padding: 0 4px;
}

.recipe-card__reset:hover:not(:disabled)[b-9qx5996sw7] {
    color: var(--accent);
}

.recipe-card__body[b-9qx5996sw7] {
    padding: var(--space-4, 16px) var(--space-5, 20px) var(--space-6, 24px);
    /* Take the space left under the header and scroll internally only when the
       card is capped at the pane height; short recipes leave the card compact. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    transition: opacity 0.15s ease;
}

.recipe-card.is-busy .recipe-card__body[b-9qx5996sw7] {
    opacity: 0.5;
    cursor: progress;
}

/* ---- Injected recipe HTML (server renderer) ---- */

.recipe-card__body[b-9qx5996sw7]  .recipe > header h1 {
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.2rem);
    line-height: 1.1;
    margin: 0 0 var(--space-2, 8px);
    color: var(--text-body);
}

.recipe-card__body[b-9qx5996sw7]  .recipe-meta,
.recipe-card__body[b-9qx5996sw7]  .recipe-kind-details,
.recipe-card__body[b-9qx5996sw7]  .recipe-source {
    margin: 0 0 var(--space-2, 8px);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.recipe-card__body[b-9qx5996sw7]  .recipe-source a {
    color: var(--accent);
}

.recipe-card__body[b-9qx5996sw7]  .recipe-description {
    margin: var(--space-3, 12px) 0 0;
    color: var(--text-body);
}

.recipe-card__body[b-9qx5996sw7]  .recipe h2 {
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-size: 1.35rem;
    margin: var(--space-5, 20px) 0 var(--space-2, 8px);
    padding-bottom: var(--space-1, 4px);
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-body);
}

.recipe-card__body[b-9qx5996sw7]  .recipe h3 {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin: var(--space-4, 16px) 0 var(--space-2, 8px);
}

.recipe-card__body[b-9qx5996sw7]  .recipe-ingredients ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Flow into two (or more) columns when the card is wide enough — a long
       ingredient list reads better side by side than as one tall strip. */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    column-gap: var(--space-10, 26px);
}

.recipe-card__body[b-9qx5996sw7]  .recipe-ingredients li {
    padding: var(--space-2, 8px) 0;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-body);
}

/* Method steps carry their own numbered accent badge instead of bare list
   markers, so a step is easy to find again mid-cook. */
.recipe-card__body[b-9qx5996sw7]  .recipe-method ol {
    list-style: none;
    counter-reset: recipe-step;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-3, 12px);
}

.recipe-card__body[b-9qx5996sw7]  .recipe-method li {
    counter-increment: recipe-step;
    position: relative;
    padding-left: 40px;
    color: var(--text-body);
    line-height: 1.55;
    min-height: 26px;
}

.recipe-card__body[b-9qx5996sw7]  .recipe-method li::before {
    content: counter(recipe-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--accent-dim);
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
}

.recipe-card__body[b-9qx5996sw7]  .recipe-method li p {
    margin: 0 0 var(--space-2, 8px);
}

.recipe-card__body[b-9qx5996sw7]  .recipe-method li p:last-child {
    margin-bottom: 0;
}

.recipe-card__body[b-9qx5996sw7]  .recipe-equipment ul {
    margin: 0;
    padding-left: 1.2em;
    color: var(--text-body);
}

/* Notes read as an aside — a soft callout rather than another full section. */
.recipe-card__body[b-9qx5996sw7]  .recipe-notes {
    margin-top: var(--space-5, 20px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: var(--surface-raised);
    border-left: 2px solid var(--accent);
    border-radius: 0 var(--radius-md, 10px) var(--radius-md, 10px) 0;
    color: var(--text-secondary);
}

.recipe-card__body[b-9qx5996sw7]  .recipe-notes h2 {
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
    font-size: 1.1rem;
}

.recipe-card__body[b-9qx5996sw7]  .recipe-notes p {
    margin: var(--space-2, 8px) 0 0;
}

.recipe-card__body[b-9qx5996sw7]  .recipe-serve-with a,
.recipe-card__body[b-9qx5996sw7]  .recipe-ref a {
    color: var(--accent);
}

/* "Serve with" companions resolve to nested recipe articles (one level deep,
   headings shifted to h3+). Frame each as a raised sub-card and restore its
   title to display type — otherwise it inherits the uppercase h3 label style. */
.recipe-card__body[b-9qx5996sw7]  .recipe-serve-with .recipe {
    margin-top: var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: var(--surface-raised);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md, 10px);
}

.recipe-card__body[b-9qx5996sw7]  .recipe-serve-with .recipe > header h3 {
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-size: 1.25rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-body);
    margin: 0 0 var(--space-1, 4px);
}

.recipe-card__body[b-9qx5996sw7]  .recipe-serve-with .recipe h4 {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin: var(--space-3, 12px) 0 var(--space-2, 8px);
}

.recipe-card__body[b-9qx5996sw7]  p {
    line-height: 1.55;
}

/* Transient confirmation after "Add to shopping list" ("Added — 9 new · 2 merged").
   Sits in the tools row and fades in; the panel clears it a few seconds later. */
.recipe-card__list-note[b-9qx5996sw7] {
    font-size: 0.8rem;
    color: var(--accent);
    animation: no1-bloom var(--dur-slow, 0.25s) var(--ease, ease) both;
}
/* /Components/Kitchen/RecipesPanel.razor.rz.scp.css */
/* RecipesPanel — master/detail layout for the Kitchen Recipes tab. Two columns on
   wide screens; on narrow screens the list and the reading pane swap (driven by the
   .recipes--reading modifier and the back button). */

.recipes[b-gorguueotd] {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: var(--space-5);
    /* Fill the room panel in both axes. The panel centres its children
       (align-items: center) for the max-width Chat column; stretch back to the
       full width here so the master/detail layout spans the workspace. */
    width: 100%;
    height: 100%;
    min-height: 0;
}

.recipes__list[b-gorguueotd] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: var(--space-4);
}

.recipes__toolbar[b-gorguueotd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.recipes__search[b-gorguueotd] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
}

.recipes__search:focus-within[b-gorguueotd] {
    border-color: var(--accent);
}

.recipes__search svg[b-gorguueotd] {
    width: 16px;
    height: 16px;
    color: var(--text-tertiary);
    flex: none;
}

.recipes__search-input[b-gorguueotd] {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    color: var(--text-body);
    padding: 9px 0;
    font: inherit;
    outline: none;
}

.recipes__kinds[b-gorguueotd] {
    display: flex;
    gap: var(--space-2);
}

.recipes__kind[b-gorguueotd] {
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-secondary);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.recipes__kind:hover[b-gorguueotd] {
    color: var(--text-body);
    border-color: var(--accent);
}

.recipes__kind.is-active[b-gorguueotd] {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--text-body);
}

.recipes__count[b-gorguueotd] {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.recipes__items[b-gorguueotd] {
    list-style: none;
    margin: 0;
    padding: 0 2px 2px 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    overflow-y: auto;
    min-height: 0;
}

.recipe-row[b-gorguueotd] {
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.recipe-row:hover[b-gorguueotd] {
    border-color: var(--accent);
    background: var(--surface-raised);
}

.recipe-row.is-selected[b-gorguueotd] {
    border-color: var(--accent);
    background: var(--accent-dim);
}

.recipe-row__title[b-gorguueotd] {
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.15;
    color: var(--text-body);
}

.recipe-row__meta[b-gorguueotd] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.recipe-row__tags[b-gorguueotd] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.recipe-row__tag[b-gorguueotd] {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    padding: 2px 8px;
}

.recipes__detail[b-gorguueotd] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.recipes__detail > .recipe-card[b-gorguueotd] {
    /* Size to the recipe's content — a three-line cocktail is a short card, a
       long bake grows taller — rather than stretching every card to fill the
       pane. Capped at the pane height so an unusually long recipe scrolls inside
       its own body instead of pushing the layout. */
    min-height: 0;
    max-height: 100%;
    flex: 0 1 auto;
}

.recipes__back[b-gorguueotd] {
    display: none;
    align-self: flex-start;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0 0 var(--space-3);
}

.recipes__back:hover[b-gorguueotd] {
    color: var(--accent);
}

.recipes__placeholder[b-gorguueotd] {
    height: 100%;
    display: grid;
    place-items: center;
    border: 1px dashed var(--border-default);
    border-radius: var(--radius);
    color: var(--text-tertiary);
    text-align: center;
    padding: var(--space-6);
}

.recipes__status[b-gorguueotd] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: var(--space-2) 0;
}

.recipes__status--error[b-gorguueotd] {
    color: var(--terracotta, #d98b5f);
}

.recipes__detail-error[b-gorguueotd] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.recipes__retry[b-gorguueotd] {
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-body);
    border-radius: var(--radius-pill);
    padding: 5px 14px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.recipes__retry:hover[b-gorguueotd] {
    border-color: var(--accent);
    background: var(--accent-dim);
}

/* Skeleton placeholder shown while a recipe's detail loads — the shape of the
   card to come (title, meta line, a few body lines), pulsing softly. */
.recipes__skeleton[b-gorguueotd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--surface-card);
}

.recipes__skeleton-line[b-gorguueotd] {
    height: 12px;
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    animation: recipes-skeleton-pulse-b-gorguueotd 1.4s ease-in-out infinite;
}

.recipes__skeleton-line--title[b-gorguueotd] {
    height: 26px;
    width: 55%;
}

.recipes__skeleton-line--meta[b-gorguueotd] {
    width: 40%;
    animation-delay: 0.1s;
}

.recipes__skeleton-line:nth-child(3)[b-gorguueotd] { animation-delay: 0.2s; }
.recipes__skeleton-line:nth-child(4)[b-gorguueotd] { animation-delay: 0.3s; }

.recipes__skeleton-line--short[b-gorguueotd] {
    width: 70%;
    animation-delay: 0.4s;
}

@keyframes recipes-skeleton-pulse-b-gorguueotd {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

.recipes__empty[b-gorguueotd] {
    border: 1px dashed var(--border-default);
    border-radius: var(--radius);
    padding: var(--space-6);
    text-align: center;
}

.recipes__empty-title[b-gorguueotd] {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--text-body);
    margin: 0 0 var(--space-3);
}

.recipes__empty-text[b-gorguueotd] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

/* ---- Narrow screens: one pane at a time ---- */
@media (max-width: 720px) {
    .recipes[b-gorguueotd] {
        grid-template-columns: 1fr;
    }

    .recipes__detail[b-gorguueotd] {
        display: none;
    }

    .recipes--reading .recipes__list[b-gorguueotd] {
        display: none;
    }

    .recipes--reading .recipes__detail[b-gorguueotd] {
        display: flex;
    }

    .recipes__back[b-gorguueotd] {
        display: block;
    }
}
/* /Components/Kitchen/ShoppingListPanel.razor.rz.scp.css */
/* ShoppingListPanel — the Kitchen Shopping tab. A single centred column: the
   list reads like a paper list, so it stays narrow even in a wide workspace. */

.shopping[b-ybq0cp5eqn] {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-height: 0;
}

.shopping__toolbar[b-ybq0cp5eqn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.shopping__count[b-ybq0cp5eqn] {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.shopping__clear[b-ybq0cp5eqn] {
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-secondary);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.shopping__clear:hover:not(:disabled)[b-ybq0cp5eqn] {
    color: var(--text-body);
    border-color: var(--accent);
    background: var(--accent-dim);
}

.shopping__clear:disabled[b-ybq0cp5eqn] {
    opacity: 0.6;
    cursor: default;
}

.shopping__items[b-ybq0cp5eqn] {
    list-style: none;
    margin: 0;
    padding: 0 2px 2px 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    overflow-y: auto;
    min-height: 0;
}

.shopping-row[b-ybq0cp5eqn] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.shopping-row:hover[b-ybq0cp5eqn] {
    border-color: var(--accent);
}

.shopping-row__main[b-ybq0cp5eqn] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.shopping-row__check[b-ybq0cp5eqn] {
    flex: none;
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

.shopping-row__label[b-ybq0cp5eqn] {
    color: var(--text-body);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* Checked lines sink: struck through and dimmed, but still present until cleared. */
.shopping-row.is-checked[b-ybq0cp5eqn] {
    opacity: 0.65;
    background: var(--surface-raised);
}

.shopping-row.is-checked .shopping-row__label[b-ybq0cp5eqn] {
    text-decoration: line-through;
    color: var(--text-tertiary);
}

.shopping-row__remove[b-ybq0cp5eqn] {
    flex: none;
    width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.shopping-row__remove:hover:not(:disabled)[b-ybq0cp5eqn] {
    color: var(--terracotta, #d98b5f);
    background: var(--surface-raised);
}

.shopping-row__remove svg[b-ybq0cp5eqn] {
    width: 14px;
    height: 14px;
}

.shopping__status[b-ybq0cp5eqn] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: var(--space-2) 0;
}

.shopping__status--error[b-ybq0cp5eqn] {
    color: var(--terracotta, #d98b5f);
}

.shopping__empty[b-ybq0cp5eqn] {
    border: 1px dashed var(--border-default);
    border-radius: var(--radius);
    padding: var(--space-6);
    text-align: center;
    color: var(--text-tertiary);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.shopping__empty-title[b-ybq0cp5eqn] {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin: 0;
}

.shopping__empty-text[b-ybq0cp5eqn] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}
/* /Components/Matrix/MatrixConfigPanel.razor.rz.scp.css */
/* MatrixConfigPanel — the Matrix Configuration tab. A single centred column:
   the agent list reads like a settings page, the editor like a focused form. */

.matrix-config[b-rejfhl3pb7] {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-height: 0;
}

.matrix-config__toolbar[b-rejfhl3pb7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.matrix-config__count[b-rejfhl3pb7] {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.matrix-config__new[b-rejfhl3pb7] {
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-secondary);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.matrix-config__new:hover:not(:disabled)[b-rejfhl3pb7] {
    color: var(--text-body);
    border-color: var(--accent);
    background: var(--accent-dim);
}

.matrix-config__new:disabled[b-rejfhl3pb7] {
    opacity: 0.6;
    cursor: default;
}

.matrix-config__status[b-rejfhl3pb7] {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.matrix-config__status--error[b-rejfhl3pb7] {
    color: var(--status-sync);
}

.matrix-config__empty[b-rejfhl3pb7] {
    border: 1px dashed var(--border-default);
    border-radius: var(--radius);
    padding: var(--space-6) var(--space-5);
    text-align: center;
}

.matrix-config__empty-title[b-rejfhl3pb7] {
    margin: 0 0 var(--space-2);
    color: var(--text-body);
    font-weight: 600;
}

.matrix-config__empty-text[b-rejfhl3pb7] {
    margin: 0 auto;
    max-width: 46ch;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
}

/* --- Agent list --- */

.matrix-config__list[b-rejfhl3pb7] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    overflow-y: auto;
    min-height: 0;
}

.agent-row[b-rejfhl3pb7] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--surface-card);
    padding: var(--space-3) var(--space-4);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.agent-row:hover[b-rejfhl3pb7] {
    border-color: var(--accent);
    background: var(--accent-dim);
}

.agent-row__main[b-rejfhl3pb7] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.agent-row__name[b-rejfhl3pb7] {
    color: var(--text-body);
    font-weight: 600;
}

.agent-row__meta[b-rejfhl3pb7] {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.agent-row__preview[b-rejfhl3pb7] {
    color: var(--text-secondary);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agent-row__edit[b-rejfhl3pb7] {
    flex: none;
    font-size: 0.8rem;
    color: var(--accent);
}

/* --- Editor form --- */

.agent-form[b-rejfhl3pb7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.agent-form__head[b-rejfhl3pb7] {
    margin-bottom: var(--space-1);
}

.agent-form__title[b-rejfhl3pb7] {
    margin: 0 0 var(--space-1);
    font-size: 1.05rem;
    color: var(--text-body);
}

.agent-form__sub[b-rejfhl3pb7] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
}

.agent-form__sub code[b-rejfhl3pb7] {
    font-size: 0.8em;
    background: var(--surface-raised);
    border-radius: 4px;
    padding: 1px 4px;
}

.agent-form__label[b-rejfhl3pb7] {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.agent-form__input[b-rejfhl3pb7],
.agent-form__prompt[b-rejfhl3pb7] {
    width: 100%;
    box-sizing: border-box;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    color: var(--text-body);
    font: inherit;
    padding: var(--space-2) var(--space-3);
}

.agent-form__prompt[b-rejfhl3pb7] {
    resize: vertical;
    min-height: 220px;
    line-height: 1.5;
    font-size: 0.9rem;
}

.agent-form__input:focus[b-rejfhl3pb7],
.agent-form__prompt:focus[b-rejfhl3pb7] {
    outline: none;
    border-color: var(--accent);
}

.agent-form__tools-head[b-rejfhl3pb7] {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.agent-form__tools-note[b-rejfhl3pb7] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.tool-search[b-rejfhl3pb7] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
}

.tool-search:focus-within[b-rejfhl3pb7] {
    border-color: var(--accent);
}

.tool-search svg[b-rejfhl3pb7] {
    width: 16px;
    height: 16px;
    color: var(--text-tertiary);
    flex: none;
}

.tool-search__input[b-rejfhl3pb7] {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    color: var(--text-body);
    padding: 8px 0;
    font: inherit;
    outline: none;
}

.agent-form__tools[b-rejfhl3pb7] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tool-group[b-rejfhl3pb7] {
    margin-top: var(--space-2);
}

.tool-group:first-child[b-rejfhl3pb7] {
    margin-top: 0;
}

.tool-group__heading[b-rejfhl3pb7] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: 4px 2px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    transition: color 0.15s ease;
}

.tool-group__heading:hover[b-rejfhl3pb7] {
    color: var(--text-body);
}

.tool-group__chevron[b-rejfhl3pb7] {
    display: inline-block;
    font-size: 0.8rem;
    line-height: 1;
    color: var(--text-tertiary);
    transition: transform 0.15s ease;
}

.tool-group__chevron--collapsed[b-rejfhl3pb7] {
    transform: rotate(-90deg);
}

.tool-group__name[b-rejfhl3pb7] {
    flex: 1;
    text-align: left;
}

.tool-group__count[b-rejfhl3pb7] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    letter-spacing: normal;
    text-transform: none;
}

.tool-group__on[b-rejfhl3pb7] {
    color: var(--accent);
    font-weight: 600;
}

.tool-group__total[b-rejfhl3pb7] {
    color: var(--text-tertiary);
    font-weight: 400;
}

.tool-group__items[b-rejfhl3pb7] {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tool-row[b-rejfhl3pb7] {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--surface-card);
    padding: var(--space-2) var(--space-3);
}

.tool-row__label[b-rejfhl3pb7] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.tool-row__label input[b-rejfhl3pb7] {
    accent-color: var(--accent);
}

.tool-row__name[b-rejfhl3pb7] {
    color: var(--text-body);
    font-size: 0.9rem;
    font-family: var(--font-mono, monospace);
}

.tool-row__desc[b-rejfhl3pb7] {
    margin: var(--space-1) 0 0 26px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.45;
}

.agent-form__actions[b-rejfhl3pb7] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.agent-form__save[b-rejfhl3pb7],
.agent-form__cancel[b-rejfhl3pb7],
.agent-form__delete[b-rejfhl3pb7] {
    border-radius: var(--radius-pill);
    padding: 6px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.agent-form__save[b-rejfhl3pb7] {
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--text-on-accent);
    font-weight: 600;
}

.agent-form__save:disabled[b-rejfhl3pb7] {
    opacity: 0.55;
    cursor: default;
}

.agent-form__cancel[b-rejfhl3pb7] {
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-secondary);
}

.agent-form__cancel:hover:not(:disabled)[b-rejfhl3pb7] {
    color: var(--text-body);
    border-color: var(--accent);
}

.agent-form__delete[b-rejfhl3pb7] {
    margin-left: auto;
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-secondary);
}

.agent-form__delete:hover:not(:disabled)[b-rejfhl3pb7],
.agent-form__delete--armed[b-rejfhl3pb7] {
    color: var(--status-sync);
    border-color: var(--status-sync);
    background: rgba(226, 181, 107, 0.1);
}

.agent-form__delete-note[b-rejfhl3pb7] {
    margin: 0;
    color: var(--text-tertiary);
    font-size: 0.78rem;
}
/* /Components/Navigation/NavItem.razor.rz.scp.css */
/* ── NavItem ─────────────────────────────── */

.nav-item[b-b947lf8dvv] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: 11px var(--space-5);
    background: none;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 14.5px;
    text-align: left;
    cursor: pointer;
    transition: background var(--dur), color var(--dur), border-color var(--dur);
}

.nav-item:hover[b-b947lf8dvv] {
    background: var(--surface-raised);
    color: var(--text-body);
}

.nav-item--active[b-b947lf8dvv] {
    background: var(--accent-dim);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--text-body);
}

.nav-item:focus-visible[b-b947lf8dvv] {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

.nav-item__icon[b-b947lf8dvv] {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: currentColor;
}

.nav-item--active .nav-item__icon[b-b947lf8dvv] {
    color: var(--accent);
}

.nav-item__icon[b-b947lf8dvv]  svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.nav-item__label[b-b947lf8dvv] {
    display: block;
}

.nav-item__sublabel[b-b947lf8dvv] {
    display: block;
    font-size: 11.5px;
    color: var(--text-tertiary);
    margin-top: 1px;
}
/* /Components/Navigation/Tab.razor.rz.scp.css */
/* ── Tab ─────────────────────────────── */

.tab[b-zsajcw95zx] {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding: 10px 14px 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--dur-fast), border-color var(--dur-fast);
}

.tab:hover[b-zsajcw95zx] {
    color: var(--text-body);
}

.tab--selected[b-zsajcw95zx] {
    color: var(--text-body);
    border-bottom-color: var(--accent);
}

.tab:focus-visible[b-zsajcw95zx] {
    outline: var(--focus-outline);
    outline-offset: calc(-1 * var(--focus-offset));
}
/* /Components/Surfaces/Card.razor.rz.scp.css */
/* ── Card ─────────────────────────────── */

.card[b-9v9lxtpc9o] {
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-soft);
    border-radius: var(--radius);
    padding: var(--space-7);
    transition: border-color var(--dur), background var(--dur);
}

.card--interactive[b-9v9lxtpc9o] {
    cursor: pointer;
}

.card--interactive:hover[b-9v9lxtpc9o],
.card--interactive:focus-visible[b-9v9lxtpc9o] {
    background: var(--accent-dim);
    border-color: var(--accent);
    outline: none;
}

.card__title[b-9v9lxtpc9o] {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: var(--text-lg);
    margin: 0 0 4px;
    color: var(--text-body);
}

.card__meta[b-9v9lxtpc9o] {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.card__body[b-9v9lxtpc9o] {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin-top: var(--space-3);
}
/* /Components/Surfaces/ListGroup.razor.rz.scp.css */
/* ── ListGroup ─────────────────────────────── */

.list-group[b-46mmoshe1h] {
    border: var(--border-width) solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
}

/* Divide successive rows with a hairline. ::deep reaches the ListRow
   children, which carry their own component scope. */
.list-group[b-46mmoshe1h]  .list-row + .list-row {
    border-top: var(--border-width) solid var(--border-soft);
}
/* /Components/Surfaces/ListRow.razor.rz.scp.css */
/* ── ListRow ─────────────────────────────── */

.list-row[b-9hbd05a8tx] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 11px var(--space-7);
    background: var(--surface-card);
    font-size: var(--text-base);
    color: var(--text-body);
}

.list-row__dot[b-9hbd05a8tx] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.list-row__content[b-9hbd05a8tx] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

.list-row__end[b-9hbd05a8tx] {
    margin-left: auto;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    white-space: nowrap;
    padding-left: var(--space-4);
}
/* /Components/Surfaces/RightPanel.razor.rz.scp.css */
/* ── RightPanel — the room's "At a glance" aside ─────────── */

.rightpanel[b-mbavid5lsn] {
    flex-shrink: 0;
    width: var(--rightpanel-width);
    background: var(--surface-card);
    border-left: var(--border-width) solid var(--border-soft);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Full height beside the main column; digest stays put as the thread scrolls. */
    align-self: stretch;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    transition: width var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
}

/* Collapsed: slide shut to nothing. The inner keeps its fixed width so content
   doesn't reflow mid-animation — it's simply clipped by the shrinking shell. */
.rightpanel--collapsed[b-mbavid5lsn] {
    width: 0;
    opacity: 0;
    border-left: none;
}

.rightpanel__inner[b-mbavid5lsn] {
    width: var(--rightpanel-width);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.rightpanel__section[b-mbavid5lsn] {
    padding: var(--space-10) var(--space-6) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.rightpanel__group[b-mbavid5lsn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* A single digest tile: raised surface, hairline border, room-tinted content. */
.project[b-mbavid5lsn] {
    background: var(--surface-raised);
    border: var(--border-width) solid var(--border-soft);
    border-radius: var(--radius);
    padding: var(--space-5) var(--space-6);
}

.project__head[b-mbavid5lsn] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-body);
    line-height: var(--leading-snug);
}

.project__label[b-mbavid5lsn] {
    min-width: 0;
}

.project__state[b-mbavid5lsn] {
    margin-left: auto;
    flex-shrink: 0;
    padding-left: var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.rightpanel__foot[b-mbavid5lsn] {
    margin-top: auto;
    padding: var(--space-7) var(--space-9) var(--space-8);
    border-top: var(--border-width) solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

/* ── Mobile (< 900px): off-canvas slide-over from the right edge ── */
@media (max-width: 899.98px) {
    .rightpanel[b-mbavid5lsn] {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 45;
        height: 100vh;
        height: 100dvh;
        max-width: 84vw;
        box-shadow: var(--shadow-panel);
    }

    .rightpanel--collapsed[b-mbavid5lsn] {
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rightpanel[b-mbavid5lsn] { transition: none; }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* App shell: locked to the viewport height, no page scroll. The content
   article is the only scroller — sidebar, top-row, and glance panel stay put. */
.page[b-tknvir7p0y] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--surface-app);
    color: var(--text-body);
}

main[b-tknvir7p0y] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.sidebar[b-tknvir7p0y] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface-card);
    border-right: var(--border-width) solid var(--border-default);
}

.top-row[b-tknvir7p0y] {
    background: var(--surface-app);
    border-bottom: var(--border-width) solid var(--border-soft);
    align-items: center;
    gap: var(--space-6);
    min-height: 3.5rem;
    padding: 0 var(--space-7);
    display: flex;
    font-size: var(--text-base);
    color: var(--text-secondary);
}

/* Hamburger — opens the drawer on mobile, hidden on wide screens.
   44px keeps it a comfortable touch target; the negative margin lets the
   glyph sit flush with the content gutter. */
.top-row__menu[b-tknvir7p0y] {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-left: calc(var(--space-4) * -1);
    flex-shrink: 0;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--dur), background var(--dur);
}

.top-row__menu:hover[b-tknvir7p0y] {
    color: var(--accent);
    background: var(--surface-raised);
}

.top-row__menu:focus-visible[b-tknvir7p0y] {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

.top-row__account[b-tknvir7p0y] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-left: auto;
}

/* The app's one scroll container — everything around it is viewport-pinned. */
.content[b-tknvir7p0y] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-8) var(--space-7);
}

/* A room fills its height through a flex-grow chain (room → panel → chat),
   which the chat's sticky composer depends on. Percentage heights don't
   resolve reliably through the layout's flex ancestors — grow does — so the
   content area turns into a flex column while a room is mounted. Gated on
   :has(.room) to leave normal-flow pages (e.g. the design system) untouched. */
.content:has(.room)[b-tknvir7p0y] {
    display: flex;
    flex-direction: column;
    /* Sticky offsets inside a scroll container are inset by its padding, which
       would float the room's sticky header/composer 20px off the edges with the
       thread showing through the gaps. Hand the vertical padding to the room
       instead (.room / .room__top carry it). */
    padding-top: 0;
    padding-bottom: 0;
}

.content[b-tknvir7p0y]  h1 {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    color: var(--text-body);
}

.top-row[b-tknvir7p0y]  a,
.top-row[b-tknvir7p0y]  .btn-link {
    white-space: nowrap;
    text-decoration: none;
    color: var(--text-secondary);
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    transition: color var(--dur);
}

.top-row[b-tknvir7p0y]  a:hover,
.top-row[b-tknvir7p0y]  .btn-link:hover {
    color: var(--accent);
}

.top-row__user[b-tknvir7p0y] {
    color: var(--text-body);
    font-weight: var(--weight-medium);
}

/* Backdrop behind the open drawer; tapping it dismisses. */
.scrim[b-tknvir7p0y] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(10, 13, 10, .55);
    border: none;
    padding: 0;
    cursor: pointer;
    animation: scrim-in-b-tknvir7p0y var(--dur) ease both;
}

@keyframes scrim-in-b-tknvir7p0y {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Backdrop behind the glance panel's mobile slide-over. Sits below the panel
   (z-index 45) but over the content, so tapping outside dismisses it — the only
   way out while the open overlay covers the header toggle. Hidden on wide
   screens, where the panel is an inline sidebar and needs no backdrop. */
.scrim--rightpanel[b-tknvir7p0y] {
    display: none;
}

@media (max-width: 899.98px) {
    .scrim--rightpanel[b-tknvir7p0y] {
        display: block;
    }
}

/* ── Mobile (< 900px): sidebar is an off-canvas drawer ── */
@media (max-width: 899.98px) {
    .sidebar[b-tknvir7p0y] {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        width: var(--sidebar-width);
        max-width: 84vw;
        transform: translateX(-100%);
        transition: transform var(--dur-slow) var(--ease);
        box-shadow: 20px 0 40px rgba(0, 0, 0, .4);
    }

    .page--drawer .sidebar[b-tknvir7p0y] {
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar[b-tknvir7p0y] { transition: none; }
    .scrim[b-tknvir7p0y] { animation: none; }
}

/* ── Wide (≥ 900px): static sidebar, no hamburger ── */
@media (min-width: 900px) {
    .page[b-tknvir7p0y] {
        flex-direction: row;
    }

    .sidebar[b-tknvir7p0y] {
        width: var(--sidebar-width);
        flex-shrink: 0;
    }

    .top-row__menu[b-tknvir7p0y] {
        display: none;
    }

    .top-row[b-tknvir7p0y],
    article[b-tknvir7p0y] {
        padding-left: var(--space-11) !important;
        padding-right: var(--space-8) !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* Branded sidebar — Number One design system.
   The wordmark sits in the display face; each room mirrors the NavItem look. */

.nav-header[b-x5nplg6lrv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.5rem;
    padding: 0 var(--space-7);
    border-bottom: var(--border-width) solid var(--border-soft);
}

.nav-brand[b-x5nplg6lrv] {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--text-body);
    text-decoration: none;
}

.nav-brand:hover[b-x5nplg6lrv] {
    color: var(--accent);
}

/* Fills whatever height the .sidebar flex column leaves under the header
   (see MainLayout), scrolling internally when the room list outgrows it. */
.nav-scrollable[b-x5nplg6lrv] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: var(--space-6);
    overflow-y: auto;
}

/* The rooms list — one NavItem per mode, each in its own [data-mode] hue. */
.nav-rooms[b-x5nplg6lrv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.nav-rooms[b-x5nplg6lrv]  .section-label {
    padding: 0 var(--space-5);
    margin-bottom: var(--space-3);
}

/* Footer — pinned to the bottom, holds the design-system link. */
.nav-footer[b-x5nplg6lrv] {
    margin-top: auto;
    padding-top: var(--space-6);
}

/* NavLink renders an <a>; .active is added automatically on the current route. */
.nav-footer[b-x5nplg6lrv]  .nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: 11px var(--space-5);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 14.5px;
    text-decoration: none;
    transition: background var(--dur), color var(--dur), border-color var(--dur);
}

.nav-footer[b-x5nplg6lrv]  .nav-link:hover {
    background: var(--surface-raised);
    color: var(--text-body);
}

.nav-footer[b-x5nplg6lrv]  .nav-link.active {
    background: var(--accent-dim);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--text-body);
}

.nav-footer[b-x5nplg6lrv]  .nav-link:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

.nav-footer[b-x5nplg6lrv]  .nav-link__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-footer[b-x5nplg6lrv]  .nav-link.active .nav-link__icon {
    stroke: var(--accent);
}
/* /Pages/DesignSystem.razor.rz.scp.css */
/* ── Design System showcase ─────────────────────────────── */

.ds[b-h3hqxwnc48] {
    display: flex;
    flex-direction: column;
    gap: var(--space-11);
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-9) var(--space-7) var(--space-11);
    color: var(--text-body);
}

/* Header */
.ds__header[b-h3hqxwnc48] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding-bottom: var(--space-8);
    border-bottom: var(--border-width) solid var(--border-default);
}

.ds__brand[b-h3hqxwnc48] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.ds__title[b-h3hqxwnc48] {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: var(--text-2xl);
    margin: 0;
    line-height: var(--leading-tight);
}

.ds__subtitle[b-h3hqxwnc48] {
    color: var(--text-secondary);
    font-size: var(--text-md);
    margin: 2px 0 0;
}

.ds__modes[b-h3hqxwnc48] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ds__mode-row[b-h3hqxwnc48] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.ds__mode[b-h3hqxwnc48] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-pill);
    padding: 5px 12px 5px 8px;
    cursor: pointer;
    transition: border-color var(--dur), color var(--dur), background var(--dur);
}

.ds__mode:hover[b-h3hqxwnc48] { color: var(--text-body); border-color: var(--accent); }

.ds__mode--on[b-h3hqxwnc48] {
    color: var(--text-body);
    background: var(--accent-dim);
    border-color: var(--accent);
}

.ds__swatch[b-h3hqxwnc48] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

/* Sections */
.ds__section[b-h3hqxwnc48] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.ds__section-title[b-h3hqxwnc48] {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: var(--text-xl);
    margin: 0;
    padding-bottom: var(--space-4);
    border-bottom: var(--border-width) solid var(--border-soft);
}

.ds__row[b-h3hqxwnc48] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ds__label[b-h3hqxwnc48] {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    margin: 0;
}

.ds__group[b-h3hqxwnc48] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-5);
}

.ds__group--dots[b-h3hqxwnc48] { gap: var(--space-8); }

.ds__dot-item[b-h3hqxwnc48] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-base);
    color: var(--text-secondary);
}

/* Cards */
.ds__card-grid[b-h3hqxwnc48] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--space-5);
}

.ds__narrow[b-h3hqxwnc48] { max-width: 460px; }

/* Navigation demo */
.ds__nav-demo[b-h3hqxwnc48] {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    gap: var(--space-8);
    align-items: start;
}

.ds__sidebar[b-h3hqxwnc48] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ds__sidebar[b-h3hqxwnc48]  .section-label { padding: 0 0 var(--space-3) var(--space-4); }

.ds__views[b-h3hqxwnc48] {
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-soft);
    border-radius: var(--radius);
    padding: var(--space-6) var(--space-7) var(--space-8);
}

.ds__tablist[b-h3hqxwnc48] {
    display: flex;
    gap: 2px;
    border-bottom: var(--border-width) solid var(--border-soft);
    margin-bottom: var(--space-6);
}

.ds__view-body[b-h3hqxwnc48] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-md);
}

/* Chat */
.ds__chat[b-h3hqxwnc48] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    background: var(--surface-app);
    border: var(--border-width) solid var(--border-soft);
    border-radius: var(--radius);
    padding: var(--space-8);
}

.ds__thread[b-h3hqxwnc48] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ds__handoffs[b-h3hqxwnc48] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 320px;
    margin-left: 47px; /* align under the assistant bubble */
}

.ds__composer[b-h3hqxwnc48] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ds__chips[b-h3hqxwnc48] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Mobile — mirrors the design system's PaneView/ChatView responsive rules:
   single-column card grids and horizontally-scrollable suggestion chips. */
@media (max-width: 899.98px) {
    .ds[b-h3hqxwnc48] {
        gap: var(--space-9);
        padding: var(--space-8) var(--space-7) var(--space-9);
    }

    .ds__nav-demo[b-h3hqxwnc48] {
        grid-template-columns: 1fr;
    }

    .ds__card-grid[b-h3hqxwnc48] {
        grid-template-columns: 1fr;
    }

    .ds__chips[b-h3hqxwnc48] {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: var(--space-2);
        scrollbar-width: none;
    }

    .ds__chips[b-h3hqxwnc48]::-webkit-scrollbar {
        display: none;
    }

    .ds__chips[b-h3hqxwnc48]  .chip {
        flex-shrink: 0;
    }
}
/* /Pages/EmailSettings.razor.rz.scp.css */
/* ── Email settings (per-user SMTP + approved recipients) ─────── */

.email-settings[b-9jfzo9f6fp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-9) var(--space-7) var(--space-11);
    color: var(--text-body);
}

/* Header */
.email-settings__header[b-9jfzo9f6fp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-bottom: var(--space-7);
    border-bottom: var(--border-width) solid var(--border-default);
}

.email-settings__title[b-9jfzo9f6fp] {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    margin: 0;
}

.email-settings__subtitle[b-9jfzo9f6fp] {
    color: var(--text-secondary);
    font-size: var(--text-md);
    margin: 0;
}

/* Status / empty states */
.email-settings__status[b-9jfzo9f6fp] {
    color: var(--text-secondary);
    font-size: var(--text-md);
    margin: 0;
}

.email-settings__status--error[b-9jfzo9f6fp] {
    color: var(--accent);
}

/* Ready / not-ready banner */
.email-settings__banner[b-9jfzo9f6fp] {
    font-size: var(--text-sm);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-sm);
    border: var(--border-width) solid var(--border-soft);
}

.email-settings__banner--ok[b-9jfzo9f6fp] {
    background: var(--accent-dim);
    color: var(--text-body);
}

.email-settings__banner--warn[b-9jfzo9f6fp] {
    background: var(--surface-card);
    color: var(--text-secondary);
}

/* Cards */
.email-settings__card[b-9jfzo9f6fp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-8);
    box-shadow: var(--shadow-panel);
}

.email-settings__card-head[b-9jfzo9f6fp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.email-settings__card-title[b-9jfzo9f6fp] {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    margin: 0;
}

.email-settings__card-hint[b-9jfzo9f6fp] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.email-settings__card-hint code[b-9jfzo9f6fp] {
    font-family: var(--font-mono, monospace);
    font-size: 0.9em;
    padding: 1px 4px;
    border-radius: var(--radius-xs, 4px);
    background: var(--surface-app);
}

.email-settings__card-hint a[b-9jfzo9f6fp] {
    color: var(--accent);
}

/* Form grid */
.email-settings__form[b-9jfzo9f6fp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.email-settings__grid[b-9jfzo9f6fp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}

.email-settings__field[b-9jfzo9f6fp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.email-settings__field--wide[b-9jfzo9f6fp] {
    grid-column: 1 / -1;
}

.email-settings__label[b-9jfzo9f6fp] {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
}

.email-settings__optional[b-9jfzo9f6fp] {
    color: var(--text-tertiary);
    font-weight: var(--weight-regular);
}

.email-settings__saved[b-9jfzo9f6fp] {
    color: var(--accent);
    font-weight: var(--weight-medium);
}

.email-settings__input[b-9jfzo9f6fp] {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-4) var(--space-5);
    font-family: var(--font-body);
    font-size: var(--text-md);
    color: var(--text-body);
    background: var(--surface-app);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-sm);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.email-settings__input[b-9jfzo9f6fp]::placeholder {
    color: var(--text-tertiary);
}

.email-settings__input:focus[b-9jfzo9f6fp] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

/* Recipient add row */
.email-settings__addrow[b-9jfzo9f6fp] {
    display: flex;
    gap: var(--space-4);
    align-items: center;
}

.email-settings__addrow .email-settings__input[b-9jfzo9f6fp] {
    flex: 1;
}

/* Recipient chips */
.email-settings__chips[b-9jfzo9f6fp] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.email-settings__chip[b-9jfzo9f6fp] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-5);
    background: var(--surface-app);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-pill, 999px);
    font-size: var(--text-sm);
}

.email-settings__chip-text[b-9jfzo9f6fp] {
    color: var(--text-body);
}

.email-settings__chip-remove[b-9jfzo9f6fp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.email-settings__chip-remove:hover[b-9jfzo9f6fp] {
    background: var(--accent-dim);
    color: var(--accent);
}

.email-settings__empty[b-9jfzo9f6fp] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

/* Actions */
.email-settings__actions[b-9jfzo9f6fp] {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-top: var(--space-2);
}

.email-settings__flash[b-9jfzo9f6fp] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.email-settings__flash--error[b-9jfzo9f6fp] {
    color: var(--accent);
}

@media (max-width: 520px) {
    .email-settings__grid[b-9jfzo9f6fp] {
        grid-template-columns: 1fr;
    }

    .email-settings__field--wide[b-9jfzo9f6fp] {
        grid-column: auto;
    }
}
/* /Pages/Feedback.razor.rz.scp.css */
/* ── Feedback review dashboard ─────────────────────────── */

.feedback[b-ckbnngmnkl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-9) var(--space-7) var(--space-11);
    color: var(--text-body);
}

/* Header */
.feedback__header[b-ckbnngmnkl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-bottom: var(--space-7);
    border-bottom: var(--border-width) solid var(--border-default);
}

.feedback__title[b-ckbnngmnkl] {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    margin: 0;
}

.feedback__subtitle[b-ckbnngmnkl] {
    color: var(--text-secondary);
    font-size: var(--text-md);
    margin: 0;
    max-width: 62ch;
}

.feedback__status[b-ckbnngmnkl] {
    color: var(--text-secondary);
    font-size: var(--text-md);
    margin: 0;
}

.feedback__status--error[b-ckbnngmnkl] {
    color: var(--accent);
}

.feedback__empty[b-ckbnngmnkl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-10) 0;
}

.feedback__empty-title[b-ckbnngmnkl] {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin: 0;
}

/* Summary / filters */
.feedback__summary[b-ckbnngmnkl] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.fb-filter[b-ckbnngmnkl] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font: inherit;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-5);
    cursor: pointer;
    text-transform: capitalize;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.fb-filter:hover[b-ckbnngmnkl] {
    color: var(--text-body);
    border-color: var(--accent);
}

.fb-filter.is-active[b-ckbnngmnkl] {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-dim);
}

.fb-filter__count[b-ckbnngmnkl] {
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--text-tertiary);
}

.fb-filter.is-active .fb-filter__count[b-ckbnngmnkl] {
    color: var(--accent);
}

/* Master / detail */
.feedback__body[b-ckbnngmnkl] {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: var(--space-7);
    align-items: start;
}

.feedback__list[b-ckbnngmnkl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* List item */
.fb-item[b-ckbnngmnkl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    text-align: left;
    font: inherit;
    color: var(--text-body);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-6);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.fb-item:hover[b-ckbnngmnkl] {
    border-color: var(--accent);
}

.fb-item.is-selected[b-ckbnngmnkl] {
    border-color: var(--accent);
    background: var(--accent-dim);
}

.fb-item__top[b-ckbnngmnkl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.fb-item__date[b-ckbnngmnkl] {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    white-space: nowrap;
}

.fb-item__preview[b-ckbnngmnkl] {
    font-size: var(--text-sm);
    line-height: var(--leading-body);
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fb-item__meta[b-ckbnngmnkl] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.fb-item__reason[b-ckbnngmnkl] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}

.fb-item__reason svg[b-ckbnngmnkl] {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Detail panel */
.feedback__detail[b-ckbnngmnkl] {
    position: sticky;
    top: var(--space-6);
    min-height: 240px;
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-8);
    box-shadow: var(--shadow-panel);
}

.feedback__detail-hint[b-ckbnngmnkl] {
    color: var(--text-tertiary);
}

.fb-detail[b-ckbnngmnkl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.fb-detail__head[b-ckbnngmnkl] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.fb-detail__meta[b-ckbnngmnkl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* "Export for dev" — downloads the flagged conversation as an agent-ready JSON payload. */
.fb-detail__export[b-ckbnngmnkl] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    font: inherit;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.fb-detail__export:hover[b-ckbnngmnkl] {
    color: var(--text-body);
    border-color: var(--accent);
}

.fb-detail__export:disabled[b-ckbnngmnkl] {
    opacity: .5;
    cursor: default;
}

.fb-detail__export svg[b-ckbnngmnkl] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fb-detail__reason[b-ckbnngmnkl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    background: var(--accent-dim);
    border-radius: var(--radius-md);
}

.fb-detail__reason p[b-ckbnngmnkl] {
    margin: 0;
    font-size: var(--text-md);
    line-height: var(--leading-body);
    color: var(--text-body);
}

/* Transcript */
.fb-transcript[b-ckbnngmnkl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.fb-turn[b-ckbnngmnkl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border: var(--border-width) solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-app);
}

.fb-turn--assistant[b-ckbnngmnkl] {
    background: var(--surface-card);
}

.fb-turn.is-flagged[b-ckbnngmnkl] {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.fb-turn__role[b-ckbnngmnkl] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.fb-turn--assistant .fb-turn__role[b-ckbnngmnkl] {
    color: var(--accent);
}

.fb-turn__flag[b-ckbnngmnkl] {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    color: var(--accent);
    background: var(--accent-dim);
    border-radius: var(--radius-pill);
    padding: 1px var(--space-3);
}

.fb-turn__body[b-ckbnngmnkl] {
    font-size: var(--text-md);
    line-height: var(--leading-body);
    color: var(--text-body);
}

.fb-turn__body p[b-ckbnngmnkl] {
    margin: 0 0 var(--space-3);
}

.fb-turn__body p:last-child[b-ckbnngmnkl] {
    margin-bottom: 0;
}

/* Tool calls */
.fb-tools[b-ckbnngmnkl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.fb-tools--none[b-ckbnngmnkl] {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-style: italic;
}

.fb-tool[b-ckbnngmnkl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--surface-raised);
    border: var(--border-width) solid var(--border-soft);
    border-radius: var(--radius-sm);
}

.fb-tool.is-error[b-ckbnngmnkl] {
    border-color: var(--accent);
}

.fb-tool__name[b-ckbnngmnkl] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-body);
}

.fb-tool__glyph[b-ckbnngmnkl] {
    color: var(--accent);
}

.fb-tool__error[b-ckbnngmnkl] {
    font-family: var(--font-sans, inherit);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--accent);
}

.fb-tool__io[b-ckbnngmnkl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.fb-tool__label[b-ckbnngmnkl] {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.fb-tool__code[b-ckbnngmnkl] {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-body);
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

/* Stacked on narrow screens — detail follows the list. */
@media (max-width: 899.98px) {
    .feedback__body[b-ckbnngmnkl] {
        grid-template-columns: minmax(0, 1fr);
    }

    .feedback__detail[b-ckbnngmnkl] {
        position: static;
    }
}
/* /Pages/Journal.razor.rz.scp.css */
/* ── Journal — kept conversations ─────────────────────────── */

.journal[b-pic3zgymxc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-9) var(--space-7) var(--space-11);
    color: var(--text-body);
}

/* Header */
.journal__header[b-pic3zgymxc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-bottom: var(--space-7);
    border-bottom: var(--border-width) solid var(--border-default);
}

.journal__title[b-pic3zgymxc] {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    margin: 0;
}

.journal__subtitle[b-pic3zgymxc] {
    color: var(--text-secondary);
    font-size: var(--text-md);
    margin: 0;
    max-width: 62ch;
}

.journal__status[b-pic3zgymxc] {
    color: var(--text-secondary);
    font-size: var(--text-md);
    margin: 0;
}

.journal__status--error[b-pic3zgymxc] {
    color: var(--accent);
}

.journal__empty[b-pic3zgymxc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-10) 0;
}

.journal__empty-title[b-pic3zgymxc] {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin: 0;
}

/* Master / detail */
.journal__body[b-pic3zgymxc] {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: var(--space-7);
    align-items: start;
}

.journal__list[b-pic3zgymxc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* List item */
.jn-item[b-pic3zgymxc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    text-align: left;
    font: inherit;
    color: var(--text-body);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-6);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.jn-item:hover[b-pic3zgymxc] {
    border-color: var(--accent);
}

.jn-item.is-selected[b-pic3zgymxc] {
    border-color: var(--accent);
    background: var(--accent-dim);
}

.jn-item__top[b-pic3zgymxc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.jn-item__date[b-pic3zgymxc] {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    white-space: nowrap;
}

.jn-item__preview[b-pic3zgymxc] {
    font-size: var(--text-sm);
    line-height: var(--leading-body);
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.jn-item__meta[b-pic3zgymxc] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--text-tertiary);
}

/* A journaled conversation that hasn't been reset yet — it's still the room's live thread. */
.jn-item__live[b-pic3zgymxc] {
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}

/* Detail panel */
.journal__detail[b-pic3zgymxc] {
    position: sticky;
    top: var(--space-6);
    min-height: 240px;
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-8);
    box-shadow: var(--shadow-panel);
}

.journal__detail-hint[b-pic3zgymxc] {
    color: var(--text-tertiary);
}

.jn-detail[b-pic3zgymxc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.jn-detail__head[b-pic3zgymxc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.jn-detail__meta[b-pic3zgymxc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.jn-detail__remove[b-pic3zgymxc] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    font: inherit;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.jn-detail__remove:hover[b-pic3zgymxc] {
    color: var(--text-body);
    border-color: var(--accent);
}

.jn-detail__remove:disabled[b-pic3zgymxc] {
    opacity: .5;
    cursor: default;
}

.jn-detail__remove svg[b-pic3zgymxc] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Transcript */
.jn-transcript[b-pic3zgymxc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.jn-turn[b-pic3zgymxc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border: var(--border-width) solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-app);
}

.jn-turn--assistant[b-pic3zgymxc] {
    background: var(--surface-card);
}

.jn-turn__role[b-pic3zgymxc] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.jn-turn--assistant .jn-turn__role[b-pic3zgymxc] {
    color: var(--accent);
}

.jn-turn__body[b-pic3zgymxc] {
    font-size: var(--text-md);
    line-height: var(--leading-body);
    color: var(--text-body);
}

.jn-turn__body p[b-pic3zgymxc] {
    margin: 0 0 var(--space-3);
}

.jn-turn__body p:last-child[b-pic3zgymxc] {
    margin-bottom: 0;
}

/* Stacked on narrow screens — detail follows the list. */
@media (max-width: 899.98px) {
    .journal__body[b-pic3zgymxc] {
        grid-template-columns: minmax(0, 1fr);
    }

    .journal__detail[b-pic3zgymxc] {
        position: static;
    }
}
/* /Pages/Login.razor.rz.scp.css */
.login[b-7u9zmo5z4r] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: var(--space-8);
}

.login__card[b-7u9zmo5z4r] {
    width: 100%;
    max-width: 420px;
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius);
    padding: var(--space-11);
    text-align: center;
}

.login__title[b-7u9zmo5z4r] {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    color: var(--text-body);
    margin: 0 0 var(--space-5);
}

.login__lede[b-7u9zmo5z4r] {
    color: var(--text-secondary);
    margin: 0 0 var(--space-9);
}

.login__actions[b-7u9zmo5z4r] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.login__actions[b-7u9zmo5z4r]  .btn {
    width: 100%;
}
/* /Pages/Profile.razor.rz.scp.css */
/* ── Profile / preferred-name editor ─────────────────────── */

.profile[b-swzzky7fuw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-9);
    max-width: 560px;
    margin: 0 auto;
    padding: var(--space-9) var(--space-7) var(--space-11);
    color: var(--text-body);
}

/* Header */
.profile__header[b-swzzky7fuw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-bottom: var(--space-7);
    border-bottom: var(--border-width) solid var(--border-default);
}

.profile__title[b-swzzky7fuw] {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    margin: 0;
}

.profile__subtitle[b-swzzky7fuw] {
    color: var(--text-secondary);
    font-size: var(--text-md);
    margin: 0;
}

/* Status / empty states */
.profile__status[b-swzzky7fuw] {
    color: var(--text-secondary);
    font-size: var(--text-md);
    margin: 0;
}

.profile__status--error[b-swzzky7fuw] {
    color: var(--accent);
}

/* Card */
.profile__card[b-swzzky7fuw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-8);
    box-shadow: var(--shadow-panel);
}

/* Identity row */
.profile__identity[b-swzzky7fuw] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.profile__identity-text[b-swzzky7fuw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.profile__account-name[b-swzzky7fuw] {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
}

.profile__email[b-swzzky7fuw] {
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Form */
.profile__form[b-swzzky7fuw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.profile__label[b-swzzky7fuw] {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
}

.profile__input[b-swzzky7fuw] {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-4) var(--space-5);
    font-family: var(--font-body);
    font-size: var(--text-md);
    color: var(--text-body);
    background: var(--surface-app);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-sm);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.profile__input[b-swzzky7fuw]::placeholder {
    color: var(--text-tertiary);
}

.profile__input:focus[b-swzzky7fuw] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.profile__hint[b-swzzky7fuw] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

/* Actions */
.profile__actions[b-swzzky7fuw] {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-top: var(--space-4);
}

.profile__flash[b-swzzky7fuw] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.profile__flash--error[b-swzzky7fuw] {
    color: var(--accent);
}
/* /Pages/Room.razor.rz.scp.css */
/* ── Room workspace ─────────────────────────────── */

.room[b-nmm5yaebsz] {
    display: flex;
    flex-direction: column;
    /* Fill the content article (a fixed-height flex column while a room is
       mounted) so the Chat panel's sticky composer has a floor. Basis auto —
       never 0 — so the room grows past the article on long threads and the
       article (the app's scroller) picks up the overflow. */
    flex: 1 0 auto;
    /* The content article drops its vertical padding while a room is mounted
       (see MainLayout) so the sticky header/composer sit flush with the
       scroller's edges; the room carries the bottom gutter itself and the
       sticky header carries the top one. */
    padding-bottom: var(--space-8);
}

/* Sticky top bar — pins the title + tablist to the top of the content scroller
   so the room's mode and views stay visible on a long, bottom-scrolled chat (the
   mirror of the chat composer's sticky floor). The solid background lets the
   thread scroll cleanly behind it; the tablist rule is the bottom edge. The
   top-row sits outside the scroller (see MainLayout), so no offset is needed. */
.room__top[b-nmm5yaebsz] {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--surface-app);
    /* Top gutter the article gave up (see .room), under this bar's solid background. */
    padding-top: var(--space-8);
    padding-bottom: var(--space-7);
}

.room__header[b-nmm5yaebsz] {
    margin-bottom: var(--space-6);
}

.room__title[b-nmm5yaebsz] {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--text-body);
    margin: 0;
}

.room__blurb[b-nmm5yaebsz] {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

/* Tablist — a row of Tab buttons over a soft rule, matching the design system. */
.room__tablist[b-nmm5yaebsz] {
    display: flex;
    gap: var(--space-2);
    border-bottom: var(--border-width) solid var(--border-soft);
    /* Gap below the tabs lives on .room__top's padding so the sticky background
       covers it; keep it off the tablist itself. */
    overflow-x: auto;
}

.room__panel[b-nmm5yaebsz] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* Centre the max-width chat column (and the placeholder) in the panel. */
    align-items: center;
}

/* Placeholder tabs — a quiet empty state until the view is built out. */
.room__placeholder[b-nmm5yaebsz] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-10) var(--space-6);
    max-width: 32rem;
    margin: 0 auto;
    color: var(--text-secondary);
}

.room__placeholder-title[b-nmm5yaebsz] {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--text-body);
    margin: 0;
}

.room__placeholder-text[b-nmm5yaebsz] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    line-height: var(--leading-body);
}
/* /Pages/Settings.razor.rz.scp.css */
/* ── System settings (admin) ─────────────────────────────── */

.settings[b-7rkfujcmhq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-9);
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-9) var(--space-7) var(--space-11);
    color: var(--text-body);
}

/* Header */
.settings__header[b-7rkfujcmhq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-bottom: var(--space-7);
    border-bottom: var(--border-width) solid var(--border-default);
}

.settings__title[b-7rkfujcmhq] {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    margin: 0;
}

.settings__subtitle[b-7rkfujcmhq] {
    color: var(--text-secondary);
    font-size: var(--text-md);
    margin: 0;
}

/* Status / empty states */
.settings__status[b-7rkfujcmhq] {
    color: var(--text-secondary);
    font-size: var(--text-md);
    margin: 0;
}

.settings__status--error[b-7rkfujcmhq] {
    color: var(--accent);
}

/* Card */
.settings__card[b-7rkfujcmhq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-9);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-8);
    box-shadow: var(--shadow-panel);
}

/* A settings group (model, tools, …) */
.settings__group[b-7rkfujcmhq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.settings__group-title[b-7rkfujcmhq] {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    margin: 0;
}

.settings__group-hint[b-7rkfujcmhq] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

/* Model select */
.settings__select[b-7rkfujcmhq] {
    width: 100%;
    box-sizing: border-box;
    margin-top: var(--space-2);
    padding: var(--space-4) var(--space-5);
    font-family: var(--font-body);
    font-size: var(--text-md);
    color: var(--text-body);
    background: var(--surface-app);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-sm);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.settings__select:focus[b-7rkfujcmhq] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

/* Tool checklist */
.settings__tools[b-7rkfujcmhq] {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Collapsible category group (mirrors the Matrix config checklist) */
.tool-group__heading[b-7rkfujcmhq] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-1) var(--space-1);
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    transition: color 0.15s ease;
}

.tool-group__heading:hover[b-7rkfujcmhq] {
    color: var(--text-body);
}

.tool-group__chevron[b-7rkfujcmhq] {
    display: inline-block;
    font-size: 0.8rem;
    line-height: 1;
    color: var(--text-tertiary);
    transition: transform 0.15s ease;
}

.tool-group__chevron--collapsed[b-7rkfujcmhq] {
    transform: rotate(-90deg);
}

.tool-group__name[b-7rkfujcmhq] {
    flex: 1;
    text-align: left;
}

.tool-group__count[b-7rkfujcmhq] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    letter-spacing: normal;
    text-transform: none;
}

.tool-group__on[b-7rkfujcmhq] {
    color: var(--accent);
    font-weight: var(--weight-semibold);
}

.tool-group__total[b-7rkfujcmhq] {
    color: var(--text-tertiary);
    font-weight: 400;
}

.tool-group__items[b-7rkfujcmhq] {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tool-row[b-7rkfujcmhq] {
    border: var(--border-width) solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface-app);
    padding: var(--space-4) var(--space-5);
}

.tool-row__label[b-7rkfujcmhq] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
}

.tool-row__label input[b-7rkfujcmhq] {
    accent-color: var(--accent);
}

.tool-row__name[b-7rkfujcmhq] {
    color: var(--text-body);
    font-size: var(--text-md);
    font-family: var(--font-mono, monospace);
}

.tool-row__desc[b-7rkfujcmhq] {
    margin: var(--space-2) 0 0 26px;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-body);
}

/* Actions */
.settings__actions[b-7rkfujcmhq] {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.settings__flash[b-7rkfujcmhq] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.settings__flash--error[b-7rkfujcmhq] {
    color: var(--accent);
}