/* ── Framework bits kept from the scaffold ─────────────────────────────── */

h1:focus {
    outline: none;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

/* ── VISDOM Assist chat UI ───────────────────────────────────────────────── */
/* Design language (2026-08 redesign): the assistant's words sit directly on the page like a
   document — only the USER's messages get a bubble. Chrome (header, sidebar, composer) stays
   quiet and neutral; the CobbleStone blue is an accent, not a surface. Content is centered in a
   readable measure (--chat-measure) inside full-width scroll/scaffold rows, ChatGPT-style. */

:root {
    --cs-blue: #1667a8;
    --cs-blue-dark: #0f4d80;
    --cs-blue-light: #e8f1fa;
    --cs-ink: #1a1f26;
    --cs-muted: #667085;
    --cs-border: #e4e7ec;
    --cs-bg: #f6f7f9;      /* quiet neutral: sidebar, admin editor cards */
    --cs-surface: #ffffff; /* the page itself */
    --cs-hover: #eef0f3;
    --cs-active: #e4e9f0;
    --cs-error: #b3261e;
    --cs-error-bg: #fdecea;
    --cs-warn: #92650a;
    --cs-warn-bg: #fff6e0;
    --chat-measure: 48.5rem;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    background: var(--cs-surface);
    color: var(--cs-ink);
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

#app, app {
    height: 100%;
    display: block;
}

/* ── Scaffold: sidebar + shell ── */

.chat-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.chat-shell {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--cs-surface);
}

/* ── Header: a slim, quiet bar ── */

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 1.25rem;
    background: var(--cs-surface);
    border-bottom: 1px solid var(--cs-border);
    min-height: 52px;
    flex-shrink: 0;
}

.chat-header-title {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
}

.chat-header h1 {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: 0.01em;
}

.chat-header-sub {
    font-size: 0.78rem;
    color: var(--cs-muted);
}

.brand-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cs-blue);
    box-shadow: 0 0 0 3px rgba(22, 103, 168, 0.14);
    flex-shrink: 0;
    align-self: center;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-btn {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    color: var(--cs-ink);
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.header-btn:hover {
    background: var(--cs-hover);
    border-color: #d4dae2;
}

.agent-badge {
    background: var(--cs-bg);
    border: 1px solid var(--cs-border);
    color: var(--cs-ink);
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 0.8rem;
    align-self: center;
}

/* ── Banners ── */

.banner {
    margin: 0.75rem 1.5rem 0;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.banner-warning {
    background: var(--cs-warn-bg);
    color: var(--cs-warn);
    border: 1px solid #f0dca0;
}

.banner-error {
    background: var(--cs-error-bg);
    color: var(--cs-error);
    border: 1px solid #f3c3bf;
}

/* ── Debug expander (dev only — see ShowDebugPanel) ── */

.debug-expander {
    margin: 0.6rem 1.5rem 0;
    font-size: 0.8rem;
    color: var(--cs-muted);
    flex-shrink: 0;
}

.debug-expander summary {
    cursor: pointer;
    user-select: none;
    padding: 0.2rem 0;
}

.debug-body {
    padding: 0.5rem 0;
    max-height: 220px;
    overflow-y: auto;
}

.debug-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.debug-table th, .debug-table td {
    text-align: left;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--cs-border);
    vertical-align: top;
}

.debug-desc {
    color: var(--cs-muted);
}

.link-btn {
    background: none;
    border: none;
    color: var(--cs-blue);
    cursor: pointer;
    padding: 0;
    font-size: 0.8rem;
    text-decoration: underline;
}

/* ── Transcript ── */

.chat-transcript {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.5rem 1.25rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    /* Full-width scroll area, content centered at a comfortable measure. */
    align-items: center;
}

.empty-state {
    margin: auto;
    text-align: center;
    width: 100%;
    max-width: 40rem;
}

.empty-greeting {
    margin: 0 0 0.4rem;
    font-size: 1.55rem;
    font-weight: 650;
    color: var(--cs-ink);
}

.empty-sub {
    margin: 0 0 1.5rem;
    color: var(--cs-muted);
    font-size: 0.92rem;
}

/* Starter prompts as a card grid (empty state). Follow-up chips reuse .prompt-chip but
   override back to pills below. */
.prompt-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.prompt-chip {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    color: var(--cs-ink);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    font-size: 0.86rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
}

.prompt-chip:hover:not(:disabled) {
    background: var(--cs-bg);
    border-color: #d4dae2;
    transform: translateY(-1px);
}

.prompt-chip:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Adaptive follow-up chips: pills docked above the composer. Fade in when the background
   suggestion call lands so they read as an addition, not a layout jump. */
.followup-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
    max-width: var(--chat-measure);
    padding: 0 0 0.5rem;
    animation: followups-in 0.25s ease;
}

.followup-chip {
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    background: var(--cs-blue-light);
    border-color: #cfe3f4;
    color: var(--cs-blue-dark);
    text-align: center;
}

.followup-chip:hover:not(:disabled) {
    background: #d9ebf9;
    border-color: #cfe3f4;
}

@keyframes followups-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Messages: user = a soft pill on the right; assistant = words directly on the canvas. */

.bubble-row {
    display: flex;
    width: 100%;
    max-width: var(--chat-measure);
}

.bubble-row.from-user {
    justify-content: flex-end;
}

.bubble-row.from-assistant {
    justify-content: flex-start;
}

.bubble {
    font-size: 0.95rem;
    line-height: 1.55;
    overflow-wrap: break-word;
    min-width: 0;
}

.bubble-user {
    background: var(--cs-blue-light);
    color: var(--cs-ink);
    border-radius: 18px;
    border-bottom-right-radius: 6px;
    padding: 0.65rem 1rem;
    max-width: 78%;
}

.bubble-assistant {
    background: none;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

/* Errors keep a tinted card so they read as system feedback, not an answer. */
.bubble-error {
    background: var(--cs-error-bg);
    color: var(--cs-error);
    border-radius: 12px;
    padding: 0.65rem 1rem;
}

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

/* Markdown already encodes its own line structure — pre-wrap on top of it doubles spacing
   and squeezes table cells; user bubbles (plain text) keep pre-wrap above. */
.bubble-text.markdown-body {
    white-space: normal;
}

/* Markdown content inside assistant messages */

.markdown-body {
    white-space: normal;
}

.markdown-body p:first-child {
    margin-top: 0;
}

.markdown-body p:last-child {
    margin-bottom: 0;
}

.markdown-body pre {
    background: #1c2733;
    color: #f4f7fb;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 0.82rem;
}

.markdown-body code {
    background: rgba(22, 103, 168, 0.08);
    border-radius: 4px;
    padding: 0.1rem 0.3rem;
    font-size: 0.85em;
}

.markdown-body pre code {
    background: none;
    padding: 0;
}

.markdown-body table {
    border-collapse: collapse;
    margin: 0.4rem 0;
    /* Wide tables scroll horizontally instead of crushing their columns' text. */
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.markdown-body th, .markdown-body td {
    overflow-wrap: normal;
    word-break: normal;
    min-width: 4.5rem;
    padding: 0.35rem 0.6rem;
    text-align: left;
}

.markdown-body table, .markdown-body th, .markdown-body td {
    border: 1px solid var(--cs-border);
}

.markdown-body > table,
.markdown-body div:has(> table) {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

.markdown-body a {
    color: var(--cs-blue-dark);
}

/* Inline SVG charts rendered from ```chart blocks (see ChartSvg.cs). */
.chart-block {
    margin: 0.6rem 0;
}

.chart-block svg {
    display: block;
    width: 100%;
    max-width: 680px;
    height: auto;
    background: #fcfcfb;
    border: 1px solid rgba(11, 11, 11, 0.10);
    border-radius: 10px;
    padding: 6px 4px;
    box-sizing: border-box;
}

/* Live UI (lab): answers written as interfaces, drawn into .vui-host by embed/visdom-ui.js through
   js/live-ui.js. The plain fallback beside each host shows only while the renderer is missing
   (html never gets .vui-ready) or when drawing that interface failed (data-vui-failed). */
.vui-piece {
    margin: 0.35rem 0;
}

html.vui-ready .vui-piece > .vui-fallback {
    display: none;
}

html.vui-ready .vui-piece > .vui-host[data-vui-failed] + .vui-fallback {
    display: block;
}

/* Interactive choice artifacts (```choices blocks — see ChatArtifacts.cs). */
.choice-artifact {
    margin: 0.5rem 0 0.2rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--cs-border);
    border-radius: 10px;
    background: var(--cs-surface);
}

.choice-prompt {
    font-size: 0.85rem;
    color: var(--cs-muted);
    margin-bottom: 0.5rem;
}

.choice-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.choice-option {
    border: 1px solid var(--cs-blue);
    background: var(--cs-surface);
    color: var(--cs-blue);
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    font-size: 0.86rem;
    cursor: pointer;
    transition: background 0.12s ease;
}

.choice-option:hover:not(:disabled) {
    background: #eaf2fb;
}

.choice-option:disabled {
    opacity: 0.55;
    cursor: default;
}

.choice-option.choice-selected {
    background: var(--cs-blue);
    color: #fff;
}

.choice-send {
    margin-top: 0.55rem;
    border: none;
    background: var(--cs-blue);
    color: #fff;
    border-radius: 8px;
    padding: 0.4rem 0.9rem;
    font-size: 0.86rem;
    cursor: pointer;
}

.choice-send:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Work-list cards (persistent, checkable result lists — the findings-ledger v1). Statuses are
   live from the database at render time; ticking survives reloads and other sessions. */
.worklist-card {
    margin: 0.5rem 0 0.2rem;
    border: 1px solid var(--cs-border);
    border-radius: 12px;
    background: var(--cs-surface);
    overflow: hidden;
}

.worklist-loading {
    padding: 0.8rem 1rem;
    color: var(--cs-muted);
    font-size: 0.85rem;
}

.worklist-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    background: var(--cs-bg);
    border-bottom: 1px solid var(--cs-border);
}

.worklist-title {
    font-weight: 600;
    font-size: 0.9rem;
    flex: 1;
    min-width: 0;
}

.worklist-progress {
    font-size: 0.75rem;
    color: var(--cs-muted);
    white-space: nowrap;
}

/* The export button is always visible on the card (unlike bubble actions) — the card IS the
   deliverable, so its actions shouldn't hide. */
.worklist-export {
    opacity: 1;
}

.worklist-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid #f0f2f5;
}

.worklist-item:last-child {
    border-bottom: none;
}

.worklist-check {
    width: 20px;
    height: 20px;
    border: 1.5px solid #b7c1cc;
    border-radius: 6px;
    background: var(--cs-surface);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.worklist-check:hover {
    border-color: var(--cs-blue);
}

.worklist-item-done .worklist-check {
    background: #1e9e56;
    border-color: #1e9e56;
}

.worklist-item-body {
    flex: 1;
    min-width: 0;
    font-size: 0.88rem;
}

.worklist-label {
    color: var(--cs-ink);
    text-decoration: none;
    overflow-wrap: break-word;
}

a.worklist-label {
    color: var(--cs-blue-dark);
}

a.worklist-label:hover {
    text-decoration: underline;
}

.worklist-item-done .worklist-item-body {
    text-decoration: line-through;
    color: var(--cs-muted);
}

.worklist-item-done .worklist-item-body a {
    color: var(--cs-muted);
}

.worklist-item-dismissed .worklist-item-body {
    opacity: 0.45;
}

.worklist-note {
    font-size: 0.78rem;
    color: var(--cs-muted);
    margin-top: 1px;
}

.worklist-item-done .worklist-note {
    text-decoration: line-through;
}

.worklist-dismiss {
    background: none;
    border: none;
    color: var(--cs-muted);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 2px 4px;
    border-radius: 6px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.worklist-item:hover .worklist-dismiss {
    opacity: 1;
}

.worklist-dismiss:hover {
    color: var(--cs-error);
    background: var(--cs-hover);
}

.worklist-item-dismissed .worklist-dismiss {
    opacity: 1;
}

.worklist-sidebar-count {
    font-size: 0.72rem;
    color: var(--cs-muted);
    margin-left: 0.35rem;
}

/* File download cards (```file artifacts): one attached file the answer hands the user.
   Clicking fetches bytes server-side per click — permissions re-checked every time. */
.file-artifact {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0.5rem 0 0.2rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--cs-border);
    border-radius: 12px;
    background: var(--cs-surface);
    max-width: 34rem;
}

.file-artifact-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.file-artifact-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.file-artifact-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--cs-ink);
    overflow-wrap: break-word;
}

.file-artifact-meta {
    font-size: 0.75rem;
    color: var(--cs-muted);
}

.file-artifact-btn {
    border: 1px solid var(--cs-blue);
    background: var(--cs-surface);
    color: var(--cs-blue);
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    font-size: 0.82rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s ease;
}

.file-artifact-btn:hover:not(:disabled) {
    background: #eaf2fb;
}

.file-artifact-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.file-artifact-error {
    font-size: 0.78rem;
    color: var(--cs-error);
    margin: 0.2rem 0 0.2rem 0.2rem;
}

/* Per-message action row: quiet by default, revealed on hover (or keyboard focus) so it never
   competes with the answer. The verify badge stays visible — it's evidence, not an action. */
.bubble-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
}

.bubble-action-btn {
    background: none;
    border: none;
    color: var(--cs-muted);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.bubble-row:hover .bubble-action-btn,
.bubble-action-btn:focus-visible {
    opacity: 1;
}

.bubble-action-btn:hover {
    color: var(--cs-ink);
    background: var(--cs-hover);
}

/* Understand/Verify pipeline affordances: the interpretation line sits above the answer so a
   misread question is catchable at a glance; the verify badge is quiet proof the answer was
   checked against its own tool evidence before rendering. */
.bubble-restatement {
    font-size: 0.75rem;
    color: var(--cs-muted);
    font-style: italic;
    margin-bottom: 0.4rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px dashed #dbe3ec;
}

.verify-badge {
    font-size: 0.72rem;
    color: #237a3d;
    background: #e7f6ec;
    border: 1px solid #cfe9d6;
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}

.verify-badge-revised {
    color: #8a6d1a;
    background: #fdf6e3;
    border-color: #f0e3b8;
}

/* Jump-to-latest: sticky inside the scroll container, so it pins to the bottom edge while the
   user is scrolled up and needs no offset math against the composer. Visibility is JS-owned. */
.jump-to-bottom {
    position: sticky;
    bottom: 0.5rem;
    align-self: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    box-shadow: 0 2px 10px rgba(26, 31, 38, 0.15);
    color: var(--cs-ink);
    font-size: 1rem;
    cursor: pointer;
    z-index: 5;
    flex-shrink: 0;
}

.jump-to-bottom:hover {
    background: var(--cs-hover);
}

/* Live tool chips */

.tool-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.tool-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    font-size: 0.76rem;
    color: var(--cs-muted);
}

.chip-active {
    border-color: var(--cs-blue);
    color: var(--cs-blue-dark);
    animation: pulse 1.4s ease-in-out infinite;
}

.chip-done {
    color: #237a3d;
    border-color: #cfe9d6;
}

.chip-failed {
    color: var(--cs-error);
    border-color: #f3c3bf;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* ── Background-work activity (sidebar entries + header badge) ──
   A queued/running job or an active campaign gets a real spinner: "work pending" with nothing
   moving reads as broken. */

.job-spinner {
    display: inline-block;
    width: 11px;
    height: 11px;
    border: 2px solid var(--cs-blue-light);
    border-top-color: var(--cs-blue);
    border-radius: 50%;
    animation: job-spin 0.9s linear infinite;
    flex-shrink: 0;
    vertical-align: -1px;
}

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

.job-live {
    color: var(--cs-blue-dark);
}

/* Live stage progress under an active campaign's sidebar row ("verifying 3/4",
   "producing outputs 1/4") — the number advancing is what makes a minutes-long
   stage feel alive rather than hung. */
.job-progress {
    display: block;
    margin-left: 1.15rem;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--cs-muted);
    animation: pulse 2.2s ease-in-out infinite;
}

/* Work-list card while its items load — spinner instead of bare text. */
.worklist-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.worklist-loading::before {
    content: "";
    width: 11px;
    height: 11px;
    border: 2px solid var(--cs-blue-light);
    border-top-color: var(--cs-blue);
    border-radius: 50%;
    animation: job-spin 0.9s linear infinite;
}

/* A submitted form while the agent is working it: the checkmark alone reads as
   "done" even though the create/update is still running — pair it with motion. */
.form-artifact-submitted.form-working::after {
    content: "";
    display: inline-block;
    margin-left: 0.45rem;
    width: 11px;
    height: 11px;
    border: 2px solid var(--cs-blue-light);
    border-top-color: var(--cs-blue);
    border-radius: 50%;
    animation: job-spin 0.9s linear infinite;
    vertical-align: -1px;
}

.jobs-running-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--cs-blue-light);
    border: 1px solid var(--cs-blue);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--cs-blue-dark);
    animation: pulse 2.2s ease-in-out infinite;
    white-space: nowrap;
}

/* Collapsed tool trace */

.tool-trace {
    margin-bottom: 0.4rem;
    font-size: 0.78rem;
    color: var(--cs-muted);
}

.tool-trace summary {
    cursor: pointer;
    user-select: none;
}

.tool-trace ul {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
}

.tool-failed-tag {
    color: var(--cs-error);
    font-weight: 600;
    margin-left: 0.3rem;
}

/* Streaming cursor: a soft pulsing block after the last text while the answer is still
   arriving — the "it's alive" cue once the thinking dots hand over to real text. */
.streaming-text > :last-child::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 1em;
    margin-left: 3px;
    vertical-align: text-bottom;
    background: var(--cs-muted);
    border-radius: 2px;
    animation: pulse 1.1s ease-in-out infinite;
}

/* "Thinking" indicator */

.thinking {
    display: inline-flex;
    gap: 4px;
    padding: 0.2rem 0;
}

.thinking span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cs-muted);
    animation: bounce 1.2s infinite ease-in-out;
}

.thinking span:nth-child(2) { animation-delay: 0.15s; }
.thinking span:nth-child(3) { animation-delay: 0.3s; }

@keyframes bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-4px); opacity: 1; }
}

/* ── Composer: one rounded card holding the textarea and its controls ── */

.composer-area {
    flex-shrink: 0;
    padding: 0.35rem 1.25rem 0.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--cs-surface);
}

.composer {
    width: 100%;
    max-width: var(--chat-measure);
    border: 1px solid #d8dee6;
    border-radius: 16px;
    background: var(--cs-surface);
    box-shadow: 0 1px 4px rgba(26, 31, 38, 0.05);
    padding: 0.6rem 0.65rem 0.45rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.composer:focus-within {
    border-color: var(--cs-blue);
    box-shadow: 0 0 0 3px rgba(22, 103, 168, 0.10);
}

.composer-input {
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    color: var(--cs-ink);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 0.15rem 0;
    max-height: 200px;
    overflow-y: auto;
}

.composer-input:disabled {
    color: var(--cs-muted);
}

.composer-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.composer-controls-left {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Paperclip file picker (the hidden #file-drop-input's label). */
.composer-attach {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 0.95rem;
    color: var(--cs-muted);
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease;
}

.composer-attach:hover {
    background: var(--cs-hover);
    color: var(--cs-blue-dark);
}

/* ── Dropped-file chips (pending attachments above the composer input) ── */

.drop-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding-bottom: 0.4rem;
}

.drop-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--cs-bg);
    border: 1px solid var(--cs-border);
    border-radius: 999px;
    padding: 0.22rem 0.4rem 0.22rem 0.6rem;
    font-size: 0.78rem;
    color: var(--cs-ink);
    max-width: 100%;
}

.drop-chip-name {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drop-chip-uploading {
    color: var(--cs-muted);
    animation: pulse 1.4s ease-in-out infinite;
}

.drop-chip-staged {
    border-color: #cfe9d6;
    background: #f2faf4;
}

.drop-chip-failed {
    border-color: #f3c3bf;
    background: var(--cs-error-bg);
    color: var(--cs-error);
}

.drop-chip-remove {
    border: none;
    background: transparent;
    color: var(--cs-muted);
    font-size: 0.72rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.15rem 0.25rem;
    border-radius: 50%;
}

.drop-chip-remove:hover {
    background: var(--cs-hover);
    color: var(--cs-error);
}

/* ── Record-creation form artifact (```form fences) ── */

.form-artifact {
    border: 1px solid var(--cs-border);
    border-radius: 12px;
    background: var(--cs-bg);
    padding: 0.8rem 1rem;
    margin: 0.5rem 0;
    max-width: 34rem;
}

.form-artifact-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
}

/* Decisions form: the plan under the title is what submitting approves */
.form-artifact-plan {
    margin: 0 0 0.7rem;
    padding: 0.5rem 0.7rem;
    border-left: 3px solid var(--cs-blue);
    background: var(--cs-surface);
    border-radius: 6px;
    font-size: 0.82rem;
}

.form-artifact-plan-head {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cs-muted);
    margin-bottom: 0.25rem;
}

.form-artifact-plan ol {
    margin: 0;
    padding-left: 1.2rem;
}

.form-artifact-plan li {
    margin: 0.1rem 0;
}

.form-artifact-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.55rem 0.9rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8rem;
}

.form-field-label {
    color: var(--cs-muted);
    font-weight: 600;
}

.form-field-required {
    color: var(--cs-error);
    margin-left: 0.15rem;
}

.form-field-input {
    border: 1px solid var(--cs-border);
    border-radius: 7px;
    background: var(--cs-surface);
    padding: 0.4rem 0.55rem;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--cs-ink);
}

.form-field-input:focus {
    outline: none;
    border-color: var(--cs-blue);
}

.form-field-textarea {
    resize: vertical;
}

.form-field-check {
    width: 1.05rem;
    height: 1.05rem;
    align-self: flex-start;
}

.form-artifact-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.75rem;
}

.form-artifact-submit {
    border: none;
    border-radius: 8px;
    background: var(--cs-blue);
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.45rem 1.1rem;
    cursor: pointer;
}

.form-artifact-submit:hover:not(:disabled) {
    background: var(--cs-blue-dark);
}

.form-artifact-submit:disabled {
    background: #b6c6d6;
    cursor: not-allowed;
}

.form-artifact-submitted {
    color: #237a3d;
    font-weight: 600;
    font-size: 0.85rem;
}

.form-artifact-error {
    color: var(--cs-error);
    font-size: 0.78rem;
}

/* ── Full-window drag-drop overlay (visibility JS-owned — see dropzone in chat-export.js) ── */

.drop-overlay[hidden] {
    display: none; /* display:flex below would otherwise beat the UA's [hidden] rule */
}

.drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(22, 103, 168, 0.12);
    backdrop-filter: blur(1.5px);
    pointer-events: none; /* drops fall through to the document listener */
}

.drop-overlay-box {
    background: var(--cs-surface);
    border: 2px dashed var(--cs-blue);
    border-radius: 14px;
    padding: 1.4rem 2.2rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cs-blue-dark);
    box-shadow: 0 8px 30px rgba(26, 31, 38, 0.18);
}

/* Speed selector (Auto / Quick / Thorough) — a quiet pill group inside the composer. */
.speed-select {
    display: flex;
    gap: 2px;
    background: var(--cs-bg);
    border-radius: 999px;
    padding: 2px;
}

.speed-option {
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    font-size: 0.72rem;
    color: var(--cs-muted);
    cursor: pointer;
}

.speed-option-active {
    background: var(--cs-surface);
    color: var(--cs-blue-dark);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(26, 31, 38, 0.12);
}

/* Circular send (↑) / stop (■) button, embedded in the composer. */
.composer-send {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--cs-blue);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.12s ease;
    flex-shrink: 0;
}

.composer-send:hover:not(:disabled) {
    background: var(--cs-blue-dark);
}

.composer-send:disabled {
    background: #b6c6d6;
    cursor: not-allowed;
}

.composer-send.composer-stop {
    background: #3d434b;
    font-size: 0.8rem;
}

.composer-send.composer-stop:hover {
    background: #23272d;
}

/* Micro-caption under the composer (the old footer, shrunk). */
.composer-caption {
    width: 100%;
    max-width: var(--chat-measure);
    text-align: center;
    font-size: 0.7rem;
    color: var(--cs-muted);
    padding-top: 0.45rem;
}

.memory-indicator {
    margin-left: 0.5rem;
    opacity: 0.85;
}

.admin-link {
    color: inherit;
    opacity: 0.55;
    text-decoration: none;
    margin-left: 0.5rem;
    transition: opacity 0.15s ease;
}

.admin-link:hover {
    opacity: 1;
}

/* ── Conversation sidebar (persisted chats) ── */

.chat-sidebar {
    width: 260px;
    min-width: 260px;
    background: var(--cs-bg);
    color: var(--cs-ink);
    border-right: 1px solid var(--cs-border);
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 8px;
    overflow-y: auto;
    position: relative; /* anchors .sidebar-resizer */
}

/* Collapsed: a slim rail with just the expand button. !important beats the inline width the
   drag-resize JS may have set. */
.chat-sidebar.sidebar-collapsed {
    width: 44px !important;
    min-width: 44px !important;
    padding: 10px 4px;
}

.sidebar-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sidebar-top .sidebar-new-btn {
    flex: 1;
}

.sidebar-new-btn {
    border: 1px solid var(--cs-border);
    background: var(--cs-surface);
    color: var(--cs-ink);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 0.86rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
}

.sidebar-new-btn:hover:not(:disabled) {
    background: var(--cs-hover);
}

.sidebar-toggle-btn {
    border: 1px solid var(--cs-border);
    background: var(--cs-surface);
    color: var(--cs-muted);
    border-radius: 8px;
    padding: 8px 6px;
    font-size: 0.9rem;
    cursor: pointer;
    min-width: 30px;
}

.sidebar-toggle-btn:hover {
    background: var(--cs-hover);
    color: var(--cs-ink);
}

.sidebar-search {
    border: 1px solid var(--cs-border);
    border-radius: 8px;
    padding: 6px 9px;
    font-size: 0.82rem;
    background: var(--cs-surface);
    color: var(--cs-ink);
    outline: none;
    transition: border-color 0.12s ease;
}

.sidebar-search:focus {
    border-color: var(--cs-blue);
}

.sidebar-search::placeholder {
    color: var(--cs-muted);
}

/* Drag handle on the sidebar's right edge (wired by sidebarResize in chat-export.js). */
.sidebar-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
}

.sidebar-resizer:hover {
    background: rgba(22, 103, 168, 0.20);
}

.chat-sidebar.sidebar-collapsed .sidebar-resizer {
    display: none;
}

.conversation-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.conversation-item {
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 2px 4px;
}

.conversation-item:hover {
    background: var(--cs-hover);
}

.conversation-item.conversation-active {
    background: var(--cs-active);
}

.conversation-title {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    color: inherit;
    text-align: left;
    font-size: 0.84rem;
    padding: 6px 4px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-actions {
    display: none;
    gap: 2px;
}

.conversation-item:hover .conversation-actions {
    display: inline-flex;
}

.conversation-actions button {
    background: none;
    border: none;
    color: var(--cs-muted);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 2px 4px;
    border-radius: 6px;
}

.conversation-actions button:hover {
    color: var(--cs-ink);
    background: var(--cs-active);
}

.rename-input {
    flex: 1;
    min-width: 0;
    font-size: 0.84rem;
    border-radius: 6px;
    border: 1px solid var(--cs-blue);
    padding: 5px 6px;
    background: var(--cs-surface);
    color: var(--cs-ink);
    outline: none;
}

.sidebar-empty {
    color: var(--cs-muted);
    font-size: 0.8rem;
    padding: 6px;
}

/* Date buckets (Today / Yesterday / …) and the Agents / Background jobs section labels. */
.sidebar-group-title {
    color: var(--cs-muted);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 10px 6px 2px;
}

.job-item {
    cursor: default;
}

.job-label {
    color: var(--cs-muted);
    font-size: 0.8rem;
    padding: 5px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* On narrow embeds (record side-panels), the transcript wins — the sidebar collapses and chats
   remain reachable by reopening in a full window. */
@media (max-width: 750px) {
    .chat-sidebar {
        display: none;
    }
}

@media (max-width: 640px) {
    .bubble-user {
        max-width: 88%;
    }

    .prompt-chips {
        grid-template-columns: 1fr;
    }
}

/* ── Legacy button styles kept for the admin page (chat no longer uses these) ── */

.new-chat-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    border-radius: 8px;
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.new-chat-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.24);
}

.new-chat-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.send-btn {
    background: var(--cs-blue);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.65rem 1.3rem;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.send-btn:hover:not(:disabled) {
    background: var(--cs-blue-dark);
}

.send-btn:disabled {
    background: #a9c3da;
    cursor: not-allowed;
}

/* ── Tool Manager (/admin) ───────────────────────────────────────────────── */

.admin-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 1100px;
    margin: 0 auto;
    background: var(--cs-surface);
    box-shadow: 0 0 24px rgba(22, 103, 168, 0.08);
}

/* The admin header keeps the branded gradient the chat header dropped — it marks the
   context switch into an operator surface, and its white-on-blue child styles depend on it. */
.admin-header {
    background: linear-gradient(135deg, var(--cs-blue) 0%, var(--cs-blue-dark) 100%);
    color: #fff;
    border-bottom: none;
    padding: 0.9rem 1.5rem;
    flex-shrink: 0;
}

.admin-header .chat-header-title {
    align-items: center;
    gap: 0.7rem;
}

.admin-header h1 {
    font-size: 1.15rem;
    font-weight: 600;
}

.admin-header p {
    margin: 0;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.8);
}

.admin-header .brand-dot {
    width: 12px;
    height: 12px;
    background: #7fd0ff;
    box-shadow: 0 0 0 4px rgba(127, 208, 255, 0.25);
}

.admin-lock {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.admin-lock-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
    max-width: 360px;
    padding: 2rem;
    border: 1px solid var(--cs-border);
    border-radius: 14px;
    background: var(--cs-bg);
}

.admin-lock-card h1 {
    margin: 0.2rem 0 0;
    font-size: 1.2rem;
    color: var(--cs-ink);
}

.admin-lock-card p {
    margin: 0 0 0.6rem;
    color: var(--cs-muted);
    font-size: 0.85rem;
}

.admin-key-input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--cs-border);
    border-radius: 10px;
    font-size: 0.92rem;
    outline: none;
}

.admin-key-input:focus {
    border-color: var(--cs-blue);
}

.admin-key-error {
    color: var(--cs-error);
    font-size: 0.82rem;
    margin: 0;
}

/* Login page: credential-mode toggle + hints. */
.login-mode {
    display: flex;
    gap: 2px;
    background: var(--cs-bg);
    border-radius: 999px;
    padding: 2px;
    margin: 0.2rem 0;
}

.login-mode-option {
    border: none;
    background: transparent;
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-size: 0.78rem;
    color: var(--cs-muted);
    cursor: pointer;
}

.login-mode-active {
    background: var(--cs-surface);
    color: var(--cs-blue-dark);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(26, 31, 38, 0.12);
}

.login-hint {
    font-size: 0.75rem;
    color: var(--cs-muted);
    margin: 0 0 0.2rem;
}

.admin-back-link {
    color: var(--cs-blue);
    font-size: 0.82rem;
    text-decoration: none;
    margin-top: 0.4rem;
}

.admin-back-link:hover {
    text-decoration: underline;
}

.admin-back-link-header {
    color: #fff;
    opacity: 0.9;
}

.admin-tabs {
    display: flex;
    gap: 0.3rem;
    padding: 0.7rem 1.5rem 0;
    border-bottom: 1px solid var(--cs-border);
    flex-shrink: 0;
}

.admin-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0.9rem;
    font-size: 0.88rem;
    color: var(--cs-muted);
    cursor: pointer;
}

.admin-tab-active {
    color: var(--cs-blue-dark);
    border-bottom-color: var(--cs-blue);
    font-weight: 600;
}

.admin-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.25rem 1.5rem 2rem;
}

.admin-section {
    margin-bottom: 1.5rem;
}

.admin-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.admin-section-header h2 {
    font-size: 1rem;
    margin: 0;
}

.admin-section-header h3 {
    font-size: 0.9rem;
    margin: 0.9rem 0 0.4rem;
    color: var(--cs-ink);
}

.admin-muted {
    color: var(--cs-muted);
    font-size: 0.85rem;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.admin-table th, .admin-table td {
    text-align: left;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--cs-border);
    vertical-align: top;
}

.admin-desc {
    color: var(--cs-muted);
    max-width: 320px;
}

.admin-row-actions {
    display: flex;
    gap: 0.6rem;
    white-space: nowrap;
}

.admin-link-danger {
    color: var(--cs-error);
}

.admin-editor {
    border: 1px solid var(--cs-border);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    background: var(--cs-bg);
}

.admin-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.7rem;
    font-size: 0.85rem;
    color: var(--cs-ink);
}

.admin-field-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-field-row .admin-field {
    flex: 1 1 160px;
}

.admin-input, .admin-textarea {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--cs-border);
    border-radius: 8px;
    font-size: 0.88rem;
    font-family: inherit;
    outline: none;
}

.admin-input:focus, .admin-textarea:focus {
    border-color: var(--cs-blue);
}

.admin-input:disabled {
    background: #eef2f6;
    color: var(--cs-muted);
}

.admin-input-sm {
    padding: 0.3rem 0.5rem;
    font-size: 0.82rem;
    width: 100%;
}

.admin-textarea {
    resize: vertical;
}

.admin-sql {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.82rem;
}

.admin-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    margin-bottom: 0.6rem;
}

.admin-warning-red {
    color: #fff;
    background: var(--cs-error);
    border-radius: 8px;
    padding: 0.5rem 0.8rem;
    font-size: 0.82rem;
    margin: 0 0 0.7rem;
}

.admin-params-table input[type="text"], .admin-params-table .admin-input-sm {
    width: 100%;
}

.admin-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0.6rem 0;
}

.admin-test-btn {
    color: var(--cs-blue-dark);
    background: var(--cs-blue-light);
    border-color: #cfe3f4;
}

.admin-test-result {
    margin-top: 0.6rem;
}

.admin-sql-preview {
    background: #1c2733;
    color: #f4f7fb;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 0.8rem;
    white-space: pre-wrap;
}

.admin-banner-ok {
    background: #e7f6ec;
    color: #237a3d;
    border: 1px solid #cfe9d6;
}

/* Live status line while the toolsmith is drafting/testing (Gaps tab). The pulsing brand dot is
   the "working" cue — no spinner, consistent with the chat's tool-activity chips. */
.admin-toolsmith-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.admin-toolsmith-progress .brand-dot {
    animation: toolsmith-pulse 1.2s ease-in-out infinite;
}

@keyframes toolsmith-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ---- Memory panel (visibility + org tier, 2026-09-26) ---------------------------------- */
.memory-open { cursor: pointer; background: none; border: 0; font: inherit; color: inherit; padding: 0; }
.memory-open:hover { text-decoration: underline; }
.memory-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.35); z-index: 60; display: flex; justify-content: flex-end; }
.memory-panel { width: min(560px, 100%); height: 100%; background: #fff; box-shadow: -8px 0 24px rgba(0,0,0,0.18); display: flex; flex-direction: column; }
.memory-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 18px 10px; border-bottom: 1px solid #e5e7eb; }
.memory-title { font-size: 1.05rem; font-weight: 700; }
.memory-sub { font-size: 0.8rem; color: #6b7280; margin-top: 2px; }
.memory-close { background: none; border: 0; font-size: 1.1rem; cursor: pointer; color: #6b7280; }
.memory-tabs { display: flex; gap: 4px; padding: 8px 18px 0; border-bottom: 1px solid #e5e7eb; }
.memory-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 10px; font: inherit; font-size: 0.9rem; cursor: pointer; color: #374151; }
.memory-tabs button.active { border-bottom-color: #2563eb; color: #111827; font-weight: 600; }
.memory-pending-badge { display: inline-block; margin-left: 6px; background: #f59e0b; color: #fff; border-radius: 999px; padding: 0 7px; font-size: 0.72rem; font-weight: 700; }
.memory-body { overflow: auto; padding: 12px 18px 24px; flex: 1; }
.memory-hint { font-size: 0.82rem; color: #4b5563; background: #f3f4f6; border-radius: 6px; padding: 8px 10px; margin-bottom: 10px; }
.memory-error { margin: 8px 18px 0; color: #b91c1c; font-size: 0.85rem; }
.memory-empty { color: #6b7280; font-size: 0.9rem; padding: 12px 0; }
.memory-new { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.memory-topic-input, .memory-content-input { font: inherit; font-size: 0.9rem; border: 1px solid #d1d5db; border-radius: 6px; padding: 6px 8px; width: 100%; box-sizing: border-box; }
.memory-row { border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.memory-row.pending { border-color: #f59e0b; background: #fffbeb; }
.memory-row.rejected { opacity: 0.6; }
.memory-row-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.memory-topic { font-weight: 600; font-size: 0.92rem; }
.memory-status { font-size: 0.75rem; color: #92400e; }
.memory-content { white-space: pre-wrap; font-size: 0.9rem; margin: 6px 0; }
.memory-meta { font-size: 0.75rem; color: #6b7280; }
.memory-actions { display: flex; gap: 6px; margin-top: 8px; }
.memory-btn { font: inherit; font-size: 0.8rem; border: 1px solid #d1d5db; background: #fff; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.memory-btn.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.memory-btn.danger { color: #b91c1c; border-color: #fca5a5; }
.memory-btn:disabled { opacity: 0.5; cursor: default; }

.memory-row.stale { border-style: dashed; opacity: 0.85; }
.memory-status.graduated { color: #166534; }