/* ============================
   Design tokens
   ============================ */
:root {
    /* Spacing scale (4px base) — use these instead of ad-hoc px values */
    --rafio-space-1: 4px;
    --rafio-space-2: 8px;
    --rafio-space-3: 12px;
    --rafio-space-4: 16px;
    --rafio-space-6: 24px;
    --rafio-space-8: 32px;
    --rafio-space-12: 48px;
    /* Colors live in the --rf-* tokens, emitted into <head> by App.razor from
       Theme/RafioTheme.cs (single source for CSS and both MudTheme palettes). */
    --rafio-link: var(--rf-accent-ink);
    --rafio-focus-ring: var(--rf-accent);
}

html, body {
    font-family: var(--rf-font);
    font-variant-numeric: tabular-nums;
}

/* Thin scrollbars (TOKENS.md): 8px gutter, 4px thumb, no arrows. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-thumb {
    background-color: var(--rf-sb);
    border: 2px solid transparent;
    border-radius: 4px;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--rf-sb-hover); }
::-webkit-scrollbar-thumb:active { background-color: var(--rf-sb-drag); }
@supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: var(--rf-sb) transparent; }
}

/* Focus ring: 2px accent, 1px offset. */
:focus-visible {
    outline: 2px solid var(--rf-accent);
    outline-offset: 1px;
}

/* Ensure mud-main-content fills remaining viewport height */
.mud-main-content {
    display: flex;
    flex-direction: column;
    overflow-y: auto !important;
}

a, .btn-link {
    color: var(--rafio-link);
}

.btn-primary {
    color: var(--rf-send-ink);
    background-color: var(--rf-send);
    border-color: var(--rf-send);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 1px var(--rf-bg), 0 0 0 3px var(--rf-accent);
}

.content {
    padding-top: 1.1rem;
}

/* FocusOnNavigate moves programmatic focus to the page h1 (tabindex=-1): no ring there. */
h1:focus, h1:focus-visible, html [tabindex="-1"]:focus-visible {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--rf-ok);
}

.invalid {
    outline: 1px solid var(--rf-bad);
}

.validation-message {
    color: var(--rf-bad);
}

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

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

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Hide textarea text while recording dictation */
.chat-input-area.recording-active textarea {
    color: transparent !important;
    caret-color: transparent !important;
}

/* Voice selection list — bordered scrollable container */
.voice-selection-list {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    max-height: 350px;
    overflow-y: auto;
}

.mud-theme-dark .voice-selection-list {
    border-color: var(--rf-line);
    background: var(--rf-card);
}

.voice-section-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--rf-sunk);
    padding: 8px 12px;
    font-weight: 600;
    font-size: 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mud-theme-dark .voice-section-header {
    border-bottom-color: var(--rf-line);
    color: var(--rf-muted);
}

.voice-option-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.15s;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

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

.voice-option-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.mud-theme-dark .voice-option-item {
    border-bottom-color: rgba(255, 255, 255, 0.06);
    color: var(--rf-ink);
    background: var(--rf-card);
}

.mud-theme-dark .voice-option-item:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

.voice-option-item.active {
    border-left: 3px solid var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--rf-accent) 6%, transparent);
}

.voice-option-item.active:hover {
    background-color: color-mix(in srgb, var(--rf-accent) 10%, transparent);
}

.mud-theme-dark .voice-option-item.active {
    background-color: color-mix(in srgb, var(--rf-accent) 12%, transparent);
    color: var(--rf-head);
}

/* Softer tab name styling */
.mud-tab {
    text-transform: none !important;
    font-weight: 500;
    letter-spacing: normal;
}

/* Sticky tab headers */
.mud-tabs-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: inherit;
}

/* Sidebar overflow fix */
.mud-drawer,
.mud-drawer-content,
.mud-nav-menu {
    overflow-x: hidden !important;
}

/* Sidebar scrollbar auto-hide — visible on scroll/hover, fades after 2s inactivity */
.mud-drawer-content {
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.3s;
}

.mud-drawer-content.scrollbar-visible,
.mud-drawer-content:hover {
    scrollbar-color: var(--rf-sb) transparent;
}

.mud-drawer-content::-webkit-scrollbar {
    width: 6px;
}

.mud-drawer-content::-webkit-scrollbar-track {
    background: transparent;
}

.mud-drawer-content::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
    transition: background 0.3s;
}

.mud-drawer-content.scrollbar-visible::-webkit-scrollbar-thumb,
.mud-drawer-content:hover::-webkit-scrollbar-thumb {
    background: var(--rf-sb);
}

/* Tighten vertical spacing of sidebar nav links (top menu + thread/project items).
   MudBlazor default is 8px top/bottom (~41px rows); reduce to 4px for a denser list. */
.mud-navmenu .mud-nav-link {
    padding-top: 4px;
    padding-bottom: 4px;
}

.conv-title {
    overflow: hidden;
    max-width: 100%;
}

.conv-title .mud-nav-link {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conv-title .mud-nav-link .mud-nav-link-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Message hover actions */
.message-wrapper {
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.message-wrapper .message-actions {
    transition: opacity 0.15s ease-in-out;
    margin-top: 2px;
}

/* Pointer devices: fade actions in on hover. Touch devices (no hover) keep them
   visible at reduced opacity so they're reachable without a hover target. */
@media (hover: hover) {
    .message-wrapper .message-actions {
        opacity: 0;
    }

    .message-wrapper:hover .message-actions {
        opacity: 1;
    }
}

@media (hover: none) {
    .message-wrapper .message-actions {
        opacity: 0.6;
    }
}

/* Markdown body styles */
.markdown-body {
    line-height: 1.6;
    font-size: 0.95rem;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

/* Math spans include a plain-text fallback until KaTeX renders them (or when the CDN is down). */
.rafio-math {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    vertical-align: middle;
}

.rafio-math-display {
    display: block;
    margin: 0.75rem 0;
    text-align: center;
}

.rafio-math-fallback {
    font-family: inherit;
    white-space: normal;
}

.markdown-body p {
    margin-bottom: 0.75em;
}

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

.markdown-body pre {
    background-color: var(--rf-code-bg);
    border: 1px solid var(--rf-line);
    border-radius: 4px;
    padding: 1rem;
    overflow-x: auto;
    margin: 0.75em 0;
    color: var(--rf-code-ink);
}

.markdown-body pre code {
    color: var(--rf-code-ink);
}

/* R6: links in replies are accent-ink and underlined. */
.markdown-body a {
    color: var(--rf-accent-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mud-theme-dark .markdown-body strong {
    color: var(--rf-head);
}

.markdown-body code {
    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
    font-size: 0.875em;
}

.markdown-body :not(pre) > code {
    background-color: var(--rf-code-bg);
    border-radius: 3px;
    padding: 0.2em 0.4em;
    color: var(--rf-head);
}

.markdown-body table {
    border-collapse: collapse;
    margin: 0.75em 0;
    width: 100%;
    display: block;
    overflow-x: auto;
}

.analytics-table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.analytics-table-wrap > table {
    min-width: 640px;
}

.markdown-body th {
    background-color: var(--rf-sunk);
    font-weight: 700;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.15));
    padding: 0.75rem;
    text-align: left;
    color: var(--mud-palette-text-primary, inherit);
}

.markdown-body td {
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.1));
    padding: 0.75rem;
    text-align: left;
    color: var(--mud-palette-text-primary, inherit);
}

.markdown-body ul,
.markdown-body ol {
    padding-left: 2rem;
    margin: 0.5em 0;
}

/* Tailwind Preflight removes list markers globally; restore Markdown semantics. */
.markdown-body ul {
    list-style: disc outside;
}

.markdown-body ol {
    list-style: decimal outside;
}

.markdown-body ul ul {
    list-style-type: circle;
}

.markdown-body ul ul ul {
    list-style-type: square;
}

.markdown-body li {
    margin-bottom: 0.5rem;
}

.markdown-body blockquote {
    border-left: 4px solid var(--mud-palette-primary);
    margin: 0.75em 0;
    padding: 0.5em 1rem;
    color: rgba(0, 0, 0, 0.6);
    position: relative;
}

.mud-theme-dark .markdown-body blockquote {
    color: rgba(255, 255, 255, 0.6);
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-weight: 600;
}

/* Tailwind Preflight sets heading sizes to inherit; restore the Markdown hierarchy. */
.markdown-body h1 {
    font-size: 1.75rem;
}

.markdown-body h2 {
    font-size: 1.5rem;
}

.markdown-body h3 {
    font-size: 1.25rem;
}

.markdown-body h4 {
    font-size: 1.1rem;
}

.markdown-body h5,
.markdown-body h6 {
    font-size: 1rem;
}

.markdown-body img {
    /* Tailwind Preflight makes images block-level globally; Markdown images should retain
       inline semantics unless the surrounding markup explicitly makes them standalone. */
    display: inline-block;
    vertical-align: baseline;
    max-width: 100%;
    border-radius: 6px;
}

.markdown-body hr {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    margin: 1.5em 0;
}

.mud-theme-dark .markdown-body hr {
    border-top-color: rgba(255, 255, 255, 0.12);
}

/* Message action bars - role-specific layout */
.message-actions-left,
.message-actions-right {
    display: flex;
    gap: 0;
}

.message-actions-bar {
    display: flex;
    justify-content: space-between;
    transition: opacity 0.15s ease-in-out;
    margin-top: 2px;
}

@media (hover: hover) {
    .message-actions-bar {
        opacity: 0;
    }

    .message-wrapper:hover .message-actions-bar {
        opacity: 1;
    }

    /* Latest response: keep thumbs/copy discoverable without hovering. */
    .message-wrapper.message-latest .message-actions-bar {
        opacity: 0.7;
    }

    .message-wrapper.message-latest:hover .message-actions-bar {
        opacity: 1;
    }
}

@media (hover: none) {
    .message-actions-bar {
        opacity: 0.6;
    }
}

.message-actions-bar:focus-within,
.message-actions-bar .mud-icon-button:focus-visible {
    opacity: 1;
}

.msg-read-aloud-btn.read-aloud-active {
    color: var(--mud-palette-primary) !important;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.read-aloud-prompt {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 1500;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.22);
    font-size: 0.85rem;
}

.read-aloud-prompt button {
    border: 0;
    border-radius: 6px;
    padding: 5px 12px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    cursor: pointer;
    font-weight: 600;
}

/* Code block copy buttons */
.markdown-body pre {
    position: relative;
}

.code-copy-btn {
    position: absolute;
    right: 6px;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    color: inherit;
    transition: opacity 0.15s;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.code-copy-top { top: 6px; }
.code-copy-bottom { bottom: 6px; }

/* Pointer devices: reveal copy button on hover. Touch devices keep it visible. */
@media (hover: hover) {
    .code-copy-btn {
        opacity: 0;
    }

    .markdown-body pre:hover .code-copy-btn {
        opacity: 0.7;
    }
}

@media (hover: none) {
    .code-copy-btn {
        opacity: 0.6;
    }
}

.code-copy-btn:hover {
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.12);
}

.mud-theme-dark .code-copy-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.mud-theme-dark .code-copy-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* Blockquote copy buttons */
.blockquote-copy-btn {
    position: absolute;
    right: 6px;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 3px 5px;
    cursor: pointer;
    color: inherit;
    transition: opacity 0.15s;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blockquote-copy-top {
    top: 6px;
}

.blockquote-copy-bottom {
    bottom: 6px;
}

@media (hover: hover) {
    .blockquote-copy-btn {
        opacity: 0;
    }

    .markdown-body blockquote:hover .blockquote-copy-btn {
        opacity: 0.7;
    }
}

@media (hover: none) {
    .blockquote-copy-btn {
        opacity: 0.6;
    }
}

.blockquote-copy-btn:hover {
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.12);
}

.mud-theme-dark .blockquote-copy-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.mud-theme-dark .blockquote-copy-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* Drag-and-drop visual feedback */
.drag-over {
    outline: 2px dashed var(--mud-palette-primary) !important;
    outline-offset: -4px;
    background-color: color-mix(in srgb, var(--rf-accent) 4%, transparent) !important;
}

/* Esc to stop chip */
.esc-stop-chip {
    font-size: 0.75rem;
    opacity: 0.6;
    animation: pulse-subtle 2s infinite;
}

@keyframes pulse-subtle {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.9; }
}

/* ============================
   Phase 1 — Feature Parity
   ============================ */

/* 1. Streaming cursor — blinking caret at the end of the last block during streaming */
.markdown-body.streaming > :last-child::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 16px;
    background-color: var(--mud-palette-text-primary);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: blink 1s step-end infinite;
}

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

/* 2. Thinking block accent — left border, italic monospace, subtle bg */
.thinking-block .mud-expand-panel {
    border-left: 2px solid var(--mud-palette-secondary);
    background: rgba(0, 0, 0, 0.02);
    border-radius: 4px;
}

.thinking-block .mud-expand-panel-content {
    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
    font-style: italic;
    font-size: 0.85rem;
    overflow-wrap: break-word;
    word-break: break-word;
}

.mud-theme-dark .thinking-block .mud-expand-panel {
    background: rgba(255, 255, 255, 0.03);
}

/* 3. Tool calls block accent — blue left border, subtle blue bg */
.tool-calls-block .mud-expand-panel {
    border-left: 2px solid var(--rf-line-2);
    background: color-mix(in srgb, var(--rf-muted) 4%, transparent);
    border-radius: 4px;
}

.mud-theme-dark .tool-calls-block .mud-expand-panel {
    background: color-mix(in srgb, var(--rf-muted) 8%, transparent);
}

/* 4. Citation links — grouped with separator */
.message-citations {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 8px;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.message-citations .mud-link {
    font-size: 0.8rem;
    transition: opacity 0.15s;
}

.message-citations .mud-link:hover {
    opacity: 0.8;
}

.mud-theme-dark .message-citations {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.message-citations .rf-source {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.message-citations .rf-source-num {
    flex: 0 0 auto;
    min-width: 1.4em;
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.7;
    text-align: right;
}

/* Inline [n] citation markers rendered from the turn's source registry */
sup.rf-cite {
    font-size: 0.7em;
    line-height: 0;
    margin-left: 1px;
}

sup.rf-cite a {
    text-decoration: none;
    padding: 0 2px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

sup.rf-cite a:hover {
    text-decoration: underline;
}

sup.rf-cite + sup.rf-cite {
    margin-left: 2px;
}

/* Figure source markers: "$739.41" + a numbered pill that opens the source at the figure. Distinct from web
   [n] citations (outlined, accent colour) so a reader can tell "where this number came from" apart. */
sup.rf-fig-cite {
    font-size: 0.68em;
    line-height: 0;
    margin-left: 2px;
    padding: 1px 4px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-secondary) 55%, transparent);
    color: var(--mud-palette-secondary);
    background: color-mix(in srgb, var(--mud-palette-secondary) 10%, transparent);
    cursor: pointer;
    font-weight: 600;
    user-select: none;
    white-space: nowrap;
}
sup.rf-fig-cite:hover, sup.rf-fig-cite:focus-visible {
    background: color-mix(in srgb, var(--mud-palette-secondary) 25%, transparent);
    outline: none;
}
sup.rf-fig-cite a { color: inherit; text-decoration: none; }
/* Larger tap target on touch screens without changing the line layout. */
@media (hover: none) {
    sup.rf-fig-cite { padding: 2px 6px; }
}
.rf-fig-num {
    display: inline-block;
    min-width: 16px;
    margin-right: 4px;
    padding: 0 4px;
    border-radius: 8px;
    font-size: 0.72em;
    font-weight: 600;
    text-align: center;
    color: var(--mud-palette-secondary);
    border: 1px solid color-mix(in srgb, var(--mud-palette-secondary) 55%, transparent);
}

/* 5. Memory suggestion banner */
.memory-suggestion-banner {
    background: var(--rf-accent-tint);
    border: 1px solid var(--rf-line);
    border-radius: 4px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
}

.memory-suggestion-banner .memory-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--rf-accent-ink);
}

.memory-suggestion-banner .memory-value {
    font-size: 0.85rem;
    flex: 1;
}

.memory-suggestion-banner.saved {
    border-color: var(--rf-ok);
    background: color-mix(in srgb, var(--rf-ok) 6%, transparent);
}

.memory-suggestion-banner.deleted {
    opacity: 0.5;
}

/* Ghost companion overlay */
.ghost-overlay {
    position: fixed;
    bottom: 100px;
    left: 24px;
    z-index: 1400;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
}
.ghost-overlay.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ghost-overlay .ghost-bubble {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    padding: 10px 14px;
    max-width: 280px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    position: relative;
}
.ghost-overlay .ghost-bubble::before {
    content: '';
    position: absolute;
    left: -8px;
    bottom: 12px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid var(--mud-palette-lines-default);
}
/* surface-coloured inner arrow so the tail reads as part of the bordered bubble */
.ghost-overlay .ghost-bubble::after {
    content: '';
    position: absolute;
    left: -6.5px;
    bottom: 13px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid var(--mud-palette-surface);
}
/* the ghost arrives first, then its speech bubble pops in */
.ghost-overlay.visible .ghost-bubble {
    transform-origin: 0 100%;
    animation: ghost-bubble-pop 0.5s 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes ghost-bubble-pop {
    from { opacity: 0; transform: translateY(6px) scale(0.8); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ghost-overlay.visible .ghost-bubble { animation: none; }
}
.ghost-overlay .ghost-bubble-name {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--mud-palette-primary);
}
.ghost-overlay .ghost-bubble-text {
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
}

/* 6. Space panel enhancement — split view layout */
.chat-space-layout-container {
    display: flex;
    height: 100%;
    overflow: hidden;
    width: 100%;
}

.chat-space-layout-container.workbench-layout {
    flex-direction: row-reverse;
}

.chat-space-layout-container.workbench-layout .space-slide-panel {
    flex: 1 1 0%;
    width: auto;
    min-width: 320px;
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
    box-shadow: none;
}

.chat-space-layout-container.workbench-layout .chat-main-container {
    flex: 0 0 440px !important;
    max-width: 600px;
    min-width: 340px;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.space-slide-panel {
    width: 50%;
    min-width: 300px;
    height: 100%;
    background: var(--mud-palette-surface);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: relative;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.space-panel-header {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 8px;
    display: flex;
    align-items: center;
}

/* Document preview tab strip */
.doc-preview-tab-strip {
    display: flex;
    gap: 2px;
    padding: 4px 8px 0 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-grey);
    overflow-x: auto;
}

.doc-preview-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    white-space: nowrap;
    max-width: 220px;
    min-width: 0;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    border-top: 2px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    user-select: none;
}

.doc-preview-tab:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--mud-palette-text-primary);
}

.mud-theme-dark .doc-preview-tab:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--mud-palette-text-primary);
}

.doc-preview-tab.active {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    border-top: 2px solid var(--mud-palette-primary);
    border-left: 1px solid var(--mud-palette-lines-default);
    border-right: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-surface);
    margin-bottom: -1px; /* Overlap the bottom border of the strip seamlessly */
    z-index: 1;
}

.doc-preview-tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-preview-tab-close {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.doc-preview-tab:hover .doc-preview-tab-close,
.doc-preview-tab.active .doc-preview-tab-close {
    opacity: 1;
}

.space-iframe-container {
    flex: 1;
    border: none;
    width: 100%;
    height: 100%;
}

.mud-theme-dark .space-slide-panel {
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 768px) {
    .space-slide-panel {
        width: 100% !important;
    }
}

/* Mobile artifacts (docs/mobile-artifact-plan.md, Phase 1): under 960px there is no split view.
   The artifact panel is a full-screen layer over the chat, whatever the Standard/Workbench
   preference. Minimized = rendered off-screen (the iframe keeps loading so render checks and
   thumbnails still work) with a "Preview ready" chip in the chat. */
@media (max-width: 959.98px) {
    .space-slide-panel {
        position: fixed;
        inset: 0;
        width: 100% !important;
        min-width: 0 !important;
        height: 100%;
        z-index: 1310;
        border: none;
        box-shadow: none;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        transition: transform 0.22s ease;
    }
    .space-slide-panel.space-panel-minimized {
        transform: translateY(calc(100% + 24px));
        pointer-events: none;
    }
    .chat-space-layout-container.workbench-layout {
        flex-direction: row;
    }
    .chat-space-layout-container.workbench-layout .chat-main-container {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
        border-left: none;
    }
    .chat-space-layout-container.workbench-layout .space-slide-panel {
        min-width: 0 !important;
    }
    .space-resize-handle {
        display: none !important;
    }
    .space-panel-header {
        padding: 4px 4px 4px 0;
        gap: 2px;
    }
    .space-panel-header .space-panel-title {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-left: 0 !important;
    }
}
@media (max-width: 959.98px) and (prefers-reduced-motion: reduce) {
    .space-slide-panel { transition: none; }
}

/* "Preview ready, tap to open" chip above the composer (compact only). */
.mobile-preview-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 4px 6px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    width: calc(100% - 8px);
    text-align: left;
}
.mobile-preview-chip .mobile-preview-chip-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
.mobile-preview-chip .mobile-preview-chip-action {
    color: var(--mud-palette-primary);
    font-weight: 600;
    white-space: nowrap;
}

/* ArtifactSidePanel (Phase 3): side rail on wide screens, bottom sheet under 960px. */
.artifact-side-rail {
    flex: 0 0 340px;
    max-width: 60%;
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow-y: auto;
    padding: 12px;
}
.rf-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1320;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transition: height 0.22s ease;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px));
}
.rf-sheet.rf-sheet-dragging { transition: none; }
.rf-sheet.rf-sheet-half { height: 60dvh; }
.rf-sheet.rf-sheet-full { height: calc(100dvh - env(safe-area-inset-top, 0px)); }
.rf-sheet.rf-sheet-peek { height: calc(64px + env(safe-area-inset-bottom, 0px)); }
.rf-sheet-handle {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 12px 6px;
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.rf-sheet-grip {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--mud-palette-lines-default);
}
.rf-sheet-peek-label {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.rf-sheet-peek-label b { color: var(--mud-palette-text-primary); }
.rf-sheet-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 14px 12px;
}
.rf-sheet.rf-sheet-peek .rf-sheet-body { overflow: hidden; visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
    .rf-sheet { transition: none; }
}

.space-slide-panel.space-fullscreen {
    /* R14: full-screen Space is a focus mode and covers the top bar (1300) and the rail. */
    position: fixed;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100%;
    z-index: 1310;
    left: 0;
}

.space-view-fullscreen {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1310; /* R14: above the top bar (1300) */
    background: var(--mud-palette-surface);
    overflow-y: auto;
    max-width: 100% !important;
    padding: 16px !important;
}

/* ============================
   Phase 2 — Visual Gaps
   ============================ */

/* 7. Response review phases — color-coded */
.review-phase .mud-expand-panel {
    border-radius: 4px;
    margin-bottom: 4px;
}

.review-initial .mud-expand-panel {
    border-left: 3px solid var(--rf-accent);
    background: color-mix(in srgb, var(--rf-muted) 4%, transparent);
}

.review-check .mud-expand-panel {
    border-left: 3px dashed var(--rf-warn);
    background: color-mix(in srgb, var(--rf-warn) 4%, transparent);
}

.review-correction .mud-expand-panel {
    border-left: 3px solid var(--rf-ok);
    background: color-mix(in srgb, var(--rf-ok) 4%, transparent);
}

.mud-theme-dark .review-initial .mud-expand-panel {
    background: color-mix(in srgb, var(--rf-muted) 8%, transparent);
}

.mud-theme-dark .review-check .mud-expand-panel {
    background: color-mix(in srgb, var(--rf-warn) 8%, transparent);
}

.mud-theme-dark .review-correction .mud-expand-panel {
    background: color-mix(in srgb, var(--rf-ok) 8%, transparent);
}

/* 8. Agent phase stepper */
.agent-phase-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 4px 0;
}

.agent-phase-stepper .phase-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
    transition: all 0.3s;
}

.agent-phase-stepper .phase-dot.completed {
    background: var(--mud-palette-primary);
}

.agent-phase-stepper .phase-dot.active {
    background: var(--rf-accent);
    box-shadow: 0 0 0 3px var(--rf-accent-tint);
}

.agent-phase-stepper .phase-label {
    font-size: 0.75rem;
    opacity: 0.6;
}

.agent-phase-stepper .phase-label.active {
    opacity: 1;
    font-weight: 600;
    color: var(--rf-accent-ink);
}

.mud-theme-dark .agent-phase-stepper .phase-dot {
    background: rgba(255, 255, 255, 0.15);
}


/* 9. Dictation recording states */
.mic-btn.recording {
    background-color: var(--rf-bad) !important;
    color: var(--rf-top-ink) !important;
    animation: pulse-recording 1.5s infinite;
}

.mic-btn.transcribing {
    background-color: var(--rf-accent) !important;
    color: var(--rf-send-ink) !important;
}

@keyframes pulse-recording {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rf-bad) 40%, transparent); }
    50% { box-shadow: 0 0 0 8px transparent; }
}


/* 10. Cancelled/error message states */
.message-cancelled .mud-paper {
    opacity: 0.7;
    border: 1px dashed rgba(0, 0, 0, 0.2);
}

.message-error .mud-paper {
    background-color: color-mix(in srgb, var(--rf-bad) 6%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--rf-bad) 20%, transparent);
}

.mud-theme-dark .message-cancelled .mud-paper {
    border-color: rgba(255, 255, 255, 0.2);
}

.mud-theme-dark .message-error .mud-paper {
    background-color: color-mix(in srgb, var(--rf-bad) 12%, transparent) !important;
    border-color: color-mix(in srgb, var(--rf-bad) 30%, transparent);
}

/* ============================
   Phase 3 — Polish
   ============================ */

/* 11. Attachment display in messages */
.attachment-image-container img {
    transition: max-width 0.2s, max-height 0.2s;
}

/* 13. Drag-and-drop zone states */
.drag-available {
    outline: 2px dashed rgba(0, 0, 0, 0.15);
    outline-offset: -4px;
}

.drag-error {
    outline: 2px dashed var(--mud-palette-error) !important;
    outline-offset: -4px;
    background-color: color-mix(in srgb, var(--rf-bad) 4%, transparent) !important;
}

/* 14. Image/video generation progress */
.generation-progress {
    margin: 8px 0;
    border-radius: 4px;
    overflow: hidden;
}

.generation-progress .mud-progress-linear {
    height: 6px;
}

.generation-progress-label {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-bottom: 4px;
}

/* Smaller collapsed thinking/tool divs */
.thinking-block .mud-expand-panel-header,
.tool-calls-block .mud-expand-panel-header {
    padding: 4px 10px;
    min-height: unset;
    font-size: 0.8em;
    overflow: hidden;
}

.thinking-block .mud-expand-panel-content,
.tool-calls-block .mud-expand-panel-content {
    padding: 6px 10px;
    font-size: 0.8em;
}

/* Preview text in collapsed panels */
.thinking-preview,
.tool-calls-preview {
    opacity: 0.5;
    font-size: 0.85em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(300px, 40vw);
    margin-left: 8px;
}

/* Tool call entry — compact style */
.tool-call-entry {
    font-size: 0.8em;
    padding: 4px 8px;
    border-left: 3px solid var(--rf-line-2);
    background: color-mix(in srgb, var(--rf-muted) 4%, transparent);
    border-radius: 0 4px 4px 0;
    margin: 3px 0;
    transition: background 0.15s;
}

.tool-call-entry > .d-flex:hover {
    background: color-mix(in srgb, var(--rf-muted) 8%, transparent);
    border-radius: 4px;
}

.mud-theme-dark .tool-call-entry {
    background: color-mix(in srgb, var(--rf-muted) 8%, transparent);
}

.mud-theme-dark .tool-call-entry > .d-flex:hover {
    background: color-mix(in srgb, var(--rf-muted) 14%, transparent);
}

.tool-call-entry .tool-duration {
    font-family: 'SFMono-Regular', 'Consolas', monospace;
    font-variant-numeric: tabular-nums;
    opacity: 0.6;
    font-size: 0.9em;
}

.tool-call-entry .tool-result-content {
    margin-top: 4px;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: monospace;
    font-size: 0.85em;
    max-height: 200px;
    overflow-y: auto;
    opacity: 0.8;
    user-select: text;
}

/* Chat input — bordered container with adaptive layout */
.chat-input-area {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

/* Hide MudTextField's own outlined border since the parent container provides it */
.chat-input-area .mud-input-outlined-border {
    border: none !important;
}

.chat-input-area textarea {
    padding-top: 14px !important;
    padding-bottom: 4px !important;
    line-height: 24px !important;
    background: transparent !important;
    resize: none !important;
}

/* Toolbar: always below textarea */
.chat-input-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 4px 4px 4px;
}

/* Context usage popup */
.context-usage-popup {
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

/* Slash-command autocomplete menu (anchored above the input) */
.slash-command-item {
    transition: background-color 0.1s ease;
}

.slash-command-item:hover,
.slash-command-item-selected {
    background-color: var(--mud-palette-action-default-hover);
}

/* Dictation overlay */
.chat-dictation-overlay {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 4px;
    bottom: 44px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    background: var(--mud-palette-surface);
    border-radius: 4px;
    padding: 0 8px;
}

/* Keep the canvas as a bounded flex item. Its backing resolution is managed by the
   visualizer; letting its intrinsic canvas width participate in flex sizing creates a
   resize feedback loop and makes the bars expand over time. */
.chat-dictation-overlay #dictation-waveform {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

/* Auto-suggest ghost text overlay — positioned inside .chat-input-area */
.suggestion-ghost {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px 14px 0 14px;
    font-family: var(--rf-font);
    font-size: 16px;
    line-height: 24px;
    color: var(--mud-palette-text-secondary);
    opacity: 0.6;
    pointer-events: none;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 0;
}

.suggestion-hint {
    font-size: 12px;
    opacity: 0.5;
    font-style: italic;
}

.chat-input-area.has-suggestion textarea::placeholder {
    color: transparent !important;
}

/* Input area layout */
.chat-input-row {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.chat-input-row .mud-input-control {
    flex: 1;
}

/* Timing display in message header */
.message-timing {
    font-family: 'SFMono-Regular', 'Consolas', monospace;
    font-variant-numeric: tabular-nums;
    opacity: 0.5;
    font-size: 0.85em;
}

/* Keep Markdown editors usable at full size when the EasyMDE CDN is unavailable. */
.project-instructions-textarea,
.easymde-fallback-textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 440px;
    padding: 12px 16px;
    resize: vertical;
    font: 0.95rem/1.6 'SFMono-Regular', Consolas, monospace;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

/* EasyMDE dark mode overrides — neutral grays matching MudBlazor PaletteDark */
.mud-theme-dark .EasyMDEContainer .CodeMirror {
    background: var(--rf-card) !important;
    color: var(--rf-ink) !important;
    border-color: var(--rf-line) !important;
}
.mud-theme-dark .EasyMDEContainer .CodeMirror-cursor {
    border-left-color: var(--rf-ink);
}
.mud-theme-dark .EasyMDEContainer .editor-toolbar {
    background: var(--rf-card);
    border-color: var(--rf-line);
}
.mud-theme-dark .EasyMDEContainer .editor-toolbar button,
.mud-theme-dark .EasyMDEContainer .editor-toolbar button i,
.mud-theme-dark .EasyMDEContainer .editor-toolbar button::before {
    color: var(--rf-ink) !important;
}
.mud-theme-dark .EasyMDEContainer .editor-toolbar button:hover,
.mud-theme-dark .EasyMDEContainer .editor-toolbar button.active {
    background: var(--rf-hover);
    border-color: var(--rf-line-2);
}
.mud-theme-dark .EasyMDEContainer .editor-toolbar i.separator {
    border-left-color: var(--rf-line);
    border-right-color: var(--rf-line);
}
.mud-theme-dark .EasyMDEContainer .editor-preview {
    background: var(--rf-card);
    color: var(--rf-ink);
}
.mud-theme-dark .EasyMDEContainer .editor-preview-side {
    background: var(--rf-card);
    color: var(--rf-ink);
    border-color: var(--rf-line);
}
.mud-theme-dark .EasyMDEContainer {
    border-color: var(--rf-line);
}
.mud-theme-dark .EasyMDEContainer .CodeMirror-selected {
    background: var(--rf-hover) !important;
}
.mud-theme-dark .EasyMDEContainer .CodeMirror-gutters {
    background: var(--rf-card);
    border-right-color: var(--rf-line);
}

/* ─── Team Mode: Phase Stepper ─── */
.team-phase-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(var(--mud-palette-primary-rgb), 0.06);
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.15);
    max-width: 90%;
}
.team-phase-stepper .phase-step {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}
.team-phase-stepper .phase-step.completed {
    opacity: 0.7;
}
.team-phase-stepper .phase-step.completed .mud-icon-root {
    color: var(--mud-palette-success) !important;
}
.team-phase-stepper .phase-step.active {
    opacity: 1;
}
.team-phase-stepper .phase-step.active .mud-icon-root {
    color: var(--mud-palette-primary) !important;
    animation: teamPulse 1.5s ease-in-out infinite;
}
.team-phase-stepper .phase-label {
    font-size: 0.8rem;
    font-weight: 500;
}
.team-phase-stepper .phase-step.active .phase-label {
    font-weight: 700;
    color: var(--mud-palette-primary);
}
.team-phase-stepper .phase-sub {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
}
.team-phase-stepper .phase-sep {
    width: 24px;
    height: 2px;
    background: rgba(var(--mud-palette-text-primary-rgb), 0.15);
    border-radius: 1px;
    flex-shrink: 0;
}
@keyframes teamPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ─── Team Mode: Plan Card ─── */
.team-plan-card {
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.2);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.team-plan-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    border-bottom: 1px solid rgba(var(--mud-palette-primary-rgb), 0.12);
    font-weight: 600;
    font-size: 0.9rem;
}
.team-plan-goal-text {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.65;
    max-width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.team-plan-tasks {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(var(--mud-palette-text-primary-rgb), 0.04);
}
.team-plan-task {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: var(--mud-palette-surface);
    transition: background 0.2s ease;
    animation: taskSlideIn 0.3s ease forwards;
    opacity: 0;
}
.team-plan-task:nth-child(1) { animation-delay: 0s; }
.team-plan-task:nth-child(2) { animation-delay: 0.1s; }
.team-plan-task:nth-child(3) { animation-delay: 0.2s; }
.team-plan-task:nth-child(4) { animation-delay: 0.3s; }
.team-plan-task:nth-child(5) { animation-delay: 0.4s; }
.team-plan-task.running {
    background: rgba(var(--mud-palette-primary-rgb), 0.04);
}
.team-plan-task.completed {
    opacity: 0.7;
}
.team-plan-task-icon {
    flex-shrink: 0;
    width: 24px;
    padding-top: 1px;
    display: flex;
    justify-content: center;
}
.team-plan-task-body {
    flex: 1;
    font-size: 0.85rem;
    line-height: 1.5;
}
.team-plan-task-id {
    font-weight: 700;
    margin-right: 2px;
}
.team-plan-task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin-top: 4px;
}
@keyframes taskSlideIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.team-plan-task.completed { animation: none; opacity: 0.7; }

/* ─── Team Mode: Plan Approval / Task Input ─── */
.team-plan-approval {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid rgba(var(--mud-palette-primary-rgb), 0.12);
    background: rgba(var(--mud-palette-primary-rgb), 0.04);
    flex-wrap: wrap;
}
.team-plan-approval .mud-button-root {
    white-space: nowrap;
    min-width: fit-content;
}

/* Pinned action bar for the approval / interjection controls. Lives outside the
   overflow:hidden plan card so it can stick to the bottom of #message-container and
   stay on-screen for long plans while the auto-approve countdown runs. */
.team-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--mud-palette-surface);   /* opaque — plan must not bleed through */
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.2);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.10);
}
.team-action-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    background: rgba(var(--mud-palette-primary-rgb), 0.06);
}
.team-action-banner .mud-icon-root {
    color: var(--mud-palette-primary);
    flex-shrink: 0;
}

/* ─── Clarify Option Cards ─── */
.clarify-options {
    animation: clarifyFadeIn 0.3s ease-out;
}
.clarify-option-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.clarify-option-card:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 2px 8px rgba(var(--mud-palette-primary-rgb), 0.15);
    transform: translateY(-1px);
}
.clarify-option-card:active {
    transform: translateY(0);
    box-shadow: none;
}
@keyframes clarifyFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── Deliverable Planning Gate ─── */
.deliverable-plan-card {
    border: 1px solid var(--mud-palette-primary);
    border-left-width: 4px;
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
    animation: clarifyFadeIn 0.3s ease-out;
}
.deliverable-plan-outline .mud-list-item {
    min-height: 28px;
    padding-top: 2px;
    padding-bottom: 2px;
}

/* ─── Agent Task Blocks ─── */
.agent-task-block {
    border-left: 3px solid rgba(var(--mud-palette-lines-default-rgb, 158, 158, 158), 0.4);
    border-radius: 8px;
    margin: 8px 0;
    max-width: 90%;
    background: rgba(0, 0, 0, 0.02);
    transition: border-color 0.3s ease;
    animation: taskBlockSlideIn 0.3s ease-out;
}
.agent-task-block[data-status="running"] {
    border-left-color: var(--mud-palette-primary);
}
.agent-task-block[data-status="completed"] {
    border-left-color: var(--mud-palette-success);
}
.agent-task-block[data-status="failed"] {
    border-left-color: var(--mud-palette-error);
}
@keyframes taskBlockSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.agent-task-header {
    padding: 8px 12px;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.agent-task-tool-label {
    font-weight: 400;
    opacity: 0.6;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(250px, 40vw);
}
.agent-task-section {
    margin: 0 4px 4px;
}
.agent-task-section .mud-expand-panel {
    background: transparent !important;
    box-shadow: none !important;
}
.agent-task-section .mud-expand-panel-header {
    padding: 4px 8px !important;
    min-height: unset !important;
}
.agent-task-section .mud-expand-panel-content {
    padding: 0 8px 8px !important;
    max-height: 400px;
    overflow-y: auto;
}
.agent-task-thinking-content {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-style: italic;
    font-size: 0.85rem;
    opacity: 0.7;
    white-space: pre-wrap;
    word-break: break-word;
}
.agent-task-output-content {
    font-size: 0.9rem;
    word-break: break-word;
}

/* ─── Wave Labels ─── */
.agent-wave-label {
    padding: 6px 0 2px;
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.6;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 90%;
}

/* ─── Verification Card ─── */
.agent-verify-card {
    border-radius: 8px;
    margin: 8px 16px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.02);
}
.agent-verify-pass { border-left: 3px solid var(--mud-palette-success); }
.agent-verify-corrections { border-left: 3px solid var(--mud-palette-warning); }
.agent-verify-failed { border-left: 3px solid var(--mud-palette-error); }
.agent-verify-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 8px;
}
.agent-verify-summary {
    font-size: 0.85rem;
    opacity: 0.8;
    margin-bottom: 8px;
}
.agent-verify-checks, .agent-verify-issues {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.agent-verify-check-item, .agent-verify-issue-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

/* ─── SVG Countdown Ring ─── */
.agent-approve-ring {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.approve-ring-svg {
    transform: rotate(-90deg);
    flex-shrink: 0;
}
.approve-ring-svg .ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 2;
}
.approve-ring-svg .ring-progress {
    fill: none;
    stroke: rgba(255, 255, 255, 0.8);
    stroke-width: 2;
    transition: stroke-dashoffset 1s linear;
}
.approve-ring-text {
    font-size: 0.8rem;
    white-space: nowrap;
}

/* ─── Dark Mode: Agent Components ─── */
.dark-mode .agent-task-block,
.mud-theme-dark .agent-task-block {
    background: rgba(255, 255, 255, 0.02);
}
.dark-mode .agent-verify-card,
.mud-theme-dark .agent-verify-card {
    background: rgba(255, 255, 255, 0.02);
}

/* ─── Scrollbar: prevent overlap with fixed AppBar ─── */
.mud-main-content {
    scroll-padding-top: var(--mud-appbar-height, 40px);
}

/* Tooltip — instant show/hide (override MudBlazor's inline transition-duration) */
.mud-popover.mud-tooltip-root {
    transition-duration: 0ms !important;
}

/* Fix MudMenu popover flash at top of navbar before JS repositions */
.mud-popover.mud-popover-open:not(.mud-tooltip-root) {
    animation: popover-fade-in 0.1s ease-out 0.04s both;
}
@keyframes popover-fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Project nav links — highlight background only, preserve text/icon color */
.mud-nav-link.project-navlink-active {
    background-color: var(--mud-palette-action-default-hover) !important;
}
.mud-nav-link.project-navlink-active,
.mud-nav-link.project-navlink-active .mud-nav-link-text,
.mud-nav-link.project-navlink-active .mud-icon-root,
.mud-nav-link.project-navlink-active .mud-svg-icon {
    color: inherit !important;
    fill: currentColor !important;
}

/* Thread nav links — same pattern as projects */
.mud-nav-link.thread-navlink-active {
    background-color: var(--mud-palette-action-default-hover) !important;
}
.mud-nav-link.thread-navlink-active,
.mud-nav-link.thread-navlink-active .mud-nav-link-text,
.mud-nav-link.thread-navlink-active .mud-icon-root,
.mud-nav-link.thread-navlink-active .mud-svg-icon {
    color: inherit !important;
    fill: currentColor !important;
}

/* Project drag-reorder visual feedback */
.project-drag-handle {
    display: flex;
    align-items: center;
    padding: 2px 0;
    flex-shrink: 0;
}

.project-drag-handle:hover .mud-icon-root {
    opacity: 0.8 !important;
}

.project-drag-over {
    background-color: color-mix(in srgb, var(--rf-accent) 8%, transparent);
    border-top: 2px solid color-mix(in srgb, var(--rf-accent) 50%, transparent);
}

.mud-theme-dark .project-drag-over {
    background-color: color-mix(in srgb, var(--rf-accent) 12%, transparent);
    border-top-color: color-mix(in srgb, var(--rf-accent) 50%, transparent);
}

/* Constrain images in markdown to prevent resize flash (4f) */
.markdown-body img {
    display: inline-block;
    vertical-align: baseline;
    max-width: 400px;
    max-height: 400px;
    object-fit: contain;
    border-radius: 4px;
}

/* Blazor reconnect modal — dark mode support */
.mud-theme-dark #components-reconnect-modal,
.mud-theme-dark blazor-reconnect-modal {
    background: var(--rf-bg) !important;
    color: var(--rf-ink) !important;
}

.mud-theme-dark #components-reconnect-modal *,
.mud-theme-dark blazor-reconnect-modal * {
    color: var(--rf-ink) !important;
}

.mud-theme-dark #components-reconnect-modal a,
.mud-theme-dark blazor-reconnect-modal a {
    color: var(--rf-accent-ink) !important;
}

.mud-theme-dark #components-reconnect-modal button,
.mud-theme-dark blazor-reconnect-modal button {
    background: var(--rf-send) !important;
    color: var(--rf-send-ink) !important;
    border: none !important;
}

/* Also cover the overlay/backdrop */
.mud-theme-dark #components-reconnect-modal::before,
.mud-theme-dark blazor-reconnect-modal::before {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Dark mode body background to prevent flash */
.mud-theme-dark body,
html.mud-theme-dark {
    background-color: var(--rf-bg);
}

/* Dark mode palette fallback — set MudBlazor CSS variables instantly via the pre-paint
   html.mud-theme-dark class so surfaces (drawer, message bubbles, etc.) render dark on
   first paint, before _isDarkMode resolves from the DB and MudThemeProvider updates :root. */
html.mud-theme-dark {
    --mud-palette-primary: var(--rf-send);
    --mud-palette-secondary: #01818A;
    --mud-palette-tertiary: var(--rf-accent-ink);
    --mud-palette-background: var(--rf-bg);
    --mud-palette-surface: var(--rf-card);
    --mud-palette-drawer-background: var(--rf-panel);
    --mud-palette-drawer-text: var(--rf-ink);
    --mud-palette-text-primary: var(--rf-ink);
    --mud-palette-text-secondary: var(--rf-muted);
    --mud-palette-action-default: #bdbdbd;
    --mud-palette-divider: var(--rf-line);
    --mud-palette-lines-default: var(--rf-line);
}

/* Drawer-specific override in case MudBlazor bakes the color into a generated rule */
html.mud-theme-dark .mud-drawer {
    background-color: var(--rf-panel) !important;
    color: var(--rf-ink);
}

/* Space panel resize handle */
.space-resize-handle {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    z-index: 1400;
    background: transparent;
}

.chat-space-layout-container.workbench-layout .space-slide-panel .space-resize-handle {
    left: auto;
    right: 0;
}

.space-resize-handle:hover,
.space-resize-handle:active {
    background: color-mix(in srgb, var(--rf-accent) 40%, transparent);
}

/* ============================
   Mobile responsive
   ============================ */

/* Dynamic viewport height for iOS keyboard handling */
.mud-layout {
    -webkit-tap-highlight-color: transparent;
    height: 100vh;
    height: 100dvh;
}

/* iOS safe area: push AppBar below the notch/dynamic island */
.mud-appbar.mud-appbar-fixed-top {
    padding-top: env(safe-area-inset-top, 0px);
}

/* iOS safe area: ensure chat input isn't hidden behind home indicator */
.chat-input-area {
    margin-bottom: env(safe-area-inset-bottom, 0px);
}

/* Active press feedback on interactive elements */
.mud-button-root:active,
.mud-icon-button:active,
.mud-nav-link:active {
    transform: scale(0.92);
    transition: transform 0.1s ease;
}

/* Mobile sidebar — 90% width overlay */
@media (max-width: 959.98px) {
    .mud-drawer {
        width: 90vw !important;
        min-width: 90vw !important;
        max-width: 90vw !important;
    }
    .sidebar-resize-handle {
        display: none !important;
    }
    .mud-main-content {
        margin-left: 0 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .suggestion-ghost {
        left: 50px;  /* fallback; JS dynamically computes from textarea position */
        right: 30px !important;
    }
}

/* Prevent horizontal scroll in chat area */
#message-container {
    overflow-x: hidden !important;
}

/* Force drawer fully off-screen when closed (overrides MudBlazor fixed-px translate) */
aside.mud-drawer--closed.mud-drawer-pos-left {
    transform: translateX(-100%) !important;
    visibility: hidden;
}

/* Ensure chat textarea respects JS-controlled height; box-sizing for accurate scrollHeight */
.chat-input-area textarea.mud-input-slot {
    min-height: unset;
    box-sizing: border-box;
}

/* Per-message copy button — transient "copied" check-mark feedback.
   The clipboard write happens client-side (chat-interop.initMessageCopyButtons) so it works
   on iOS Safari; JS can't swap MudIconButton's SVG icon, so overlay a check via ::after. */
.msg-copy-btn {
    position: relative;
}
.msg-copy-btn.copied .mud-icon-root {
    opacity: 0;
}
.msg-copy-btn.copied::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--mud-palette-success);
    pointer-events: none;
}

/* ===== Tip of the Day ===== */
/* Sidebar nav row — mirrors the dense MudNavLink look */
.tip-nav-row {
    display: flex;
    align-items: center;
    padding: 6px 16px;
    cursor: pointer;
    user-select: none;
    color: var(--mud-palette-drawer-text);
    transition: background-color .15s ease;
}

.tip-nav-row:hover,
.tip-nav-active {
    background-color: rgba(0, 0, 0, 0.06);
}

.mud-theme-dark .tip-nav-row:hover,
.mud-theme-dark .tip-nav-active {
    background-color: rgba(255, 255, 255, 0.08);
}

.tip-nav-badge {
    margin-right: 12px;
    /* Center the icon in the badge box — otherwise the badge's taller line-box
       pins the icon to the top and it rides ~2-3px high in the nav row. */
    display: inline-flex;
    align-items: center;
}

/* Match the dimmed icon color/weight of the surrounding MudNavLink rows */
.tip-nav-row .mud-icon-root {
    color: var(--mud-palette-drawer-icon);
}

.tip-nav-label {
    font-size: 0.875rem;
}

/* Scrim behind the panel */
.tip-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 1349;
}

.tip-scrim.open {
    opacity: 1;
    visibility: visible;
}

/* Right-anchored slide-out panel. Sits above the docked space panel (z 1200) and the chat,
   floating over them rather than sharing layout width. */
.tip-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 360px;
    max-width: 90vw;
    background: var(--mud-palette-surface);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    border-left: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 1350;
}

.tip-panel.open {
    transform: translateX(0);
}

.tip-panel-header {
    display: flex;
    align-items: center;
    padding: 12px 12px 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.tip-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.tip-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    padding: 48px 24px;
}

.tip-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: var(--mud-palette-background);
}

.tip-card-unread {
    border-left: 3px solid var(--mud-palette-secondary);
    background: color-mix(in srgb, var(--rf-accent) 6%, transparent);
}

/* Recently-dismissed tips are hidden behind a collapsible toggle; when expanded they
   render dimmed with an undo affordance. */
.tip-card-dismissed {
    opacity: 0.55;
    border-left: 3px solid transparent;
    background: var(--mud-palette-background-grey);
}

.tip-dismissed-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    margin: 4px 0 8px;
    cursor: pointer;
    user-select: none;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.tip-dismissed-toggle:hover {
    color: var(--mud-palette-text-primary);
}

.tip-card-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.tip-card-icon {
    color: var(--mud-palette-secondary);
}

.tip-card-dismiss {
    margin: -6px -6px -6px 0;
}

.tip-card-content {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
}

.tip-card-content p {
    margin: 0 0 6px 0;
}

.tip-card-content p:last-child {
    margin-bottom: 0;
}

.tip-card-cta {
    margin-top: 6px;
    margin-left: -8px;
}

/* ============================
   Accessibility baseline
   ============================ */

/* Keyboard focus ring — only for keyboard navigation (:focus-visible), so mouse
   clicks don't draw outlines. Covers links, buttons, nav items, and form fields. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.mud-nav-link:focus-visible,
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.tip-nav-row:focus-visible,
.voice-option-item:focus-visible {
    outline: 2px solid var(--rafio-focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Respect the OS "reduce motion" setting: neutralize the blink/pulse/slide
   animations and press-scale transitions for users who opt out. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .mud-button-root:active,
    .mud-icon-button:active,
    .mud-nav-link:active {
        transform: none;
    }

    /* Preserve live-state indicators even under Reduce Motion. iOS Low Power Mode
       auto-enables Reduce Motion, and without these the UI looks frozen mid-task
       (no "typing" caret, no recording/processing pulse, no spinner). These convey
       state, not decoration, so keeping them is consistent with reduce-motion intent.
       Class specificity + !important beats the universal neutralizer above. */
    .markdown-body.streaming > :last-child::after {
        animation-duration: 1s !important;
        animation-iteration-count: infinite !important;
    }
    .esc-stop-chip {
        animation-duration: 2s !important;
        animation-iteration-count: infinite !important;
    }
    .mic-btn.recording,
    .agent-phase-stepper .phase-dot.active,
    .team-phase-stepper .phase-step.active .mud-icon-root {
        animation-duration: 1.5s !important;
        animation-iteration-count: infinite !important;
    }
    .mud-progress-circular.mud-progress-indeterminate svg,
    .mud-progress-circular.mud-progress-indeterminate .mud-progress-circular-circle {
        animation-duration: 1.4s !important;
        animation-iteration-count: infinite !important;
    }
}

/* ============================
   Project Files Sidebar & Compact File Views
   ============================ */
.project-files-tree {
    font-size: 0.8125rem;
}

.project-file-item {
    border-radius: 4px;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    transition: background-color 0.15s ease, color 0.15s ease;
    user-select: none;
    line-height: 1.3;
}

.project-file-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.mud-theme-dark .project-file-item:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

.project-file-item .mud-icon-root {
    transition: transform 0.1s ease;
}

.project-file-item:hover .mud-icon-root {
    transform: scale(1.08);
}

/* ============================
   Space Review & Comment Navigation
   ============================ */
.rafio-comment-card {
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.15s ease, background-color 0.15s ease;
    user-select: text;
}

.rafio-comment-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-color: rgba(var(--mud-palette-primary-rgb, 12, 34, 51), 0.35);
    background-color: var(--mud-palette-action-default-hover);
}

.mud-theme-dark .rafio-comment-card:hover {
    border-color: var(--rf-accent);
}

.rafio-comment-card.rafio-comment-selected {
    box-shadow: 0 2px 12px rgba(var(--mud-palette-primary-rgb, 12, 34, 51), 0.15);
}




/* Top-bar Task activity: R31 shows a small dot only (failed or needs-you), never a count. */
.activity-bell-badge.mud-badge.mud-badge-dot {
    top: 9px !important;
    right: 9px !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Slim Rafio Phase 2: top bar, icon rail, side panel (AppChrome.razor / AppRail.razor)
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    --rf-rail-w: 48px;
    --rf-panel-w: 264px; /* R13 default; sidebar-resize.js writes the saved width here */
}

/* Top bar: 40px, not Dense. MudBlazor shrinks the toolbar on xs/landscape; keep it 40px everywhere. */
.mud-appbar.rf-topbar .mud-toolbar-appbar {
    height: var(--mud-appbar-height) !important;
    min-height: var(--mud-appbar-height) !important;
    padding-left: 4px;
    padding-right: 8px;
}
.mud-appbar.rf-topbar .mud-icon-button { padding: 8px; }
.mud-appbar.rf-topbar .mud-icon-button .mud-icon-root { font-size: 20px; width: 20px; height: 20px; }
.rf-topbar-brand {
    font-size: 15px;
    font-weight: 600;
    margin: 0 12px 0 6px;
    color: var(--rf-top-ink);
    white-space: nowrap;
}
/* Co-branding: small tenant logo next to "Rafio". White chip so logos drawn for light backgrounds
   stay legible on any top-bar color, in both themes. */
.rf-topbar-cobrand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 24px;
    padding: 2px 6px;
    margin: 0 12px 0 -4px;
    background: #FFFFFF;
    border-radius: 3px;
    box-sizing: border-box;
}
.rf-topbar-cobrand img {
    display: block;
    max-height: 20px;
    max-width: 96px;
    object-fit: contain;
}
@media (max-width: 599.98px) {
    .rf-topbar-cobrand { padding: 2px 4px; margin-right: 6px; }
    .rf-topbar-cobrand img { max-height: 18px; max-width: 56px; }
}
.rf-breadcrumb {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
    font-size: 12.5px;
    color: var(--rf-top-muted);
    white-space: nowrap;
    overflow: hidden;
}
.rf-breadcrumb a { color: var(--rf-top-muted); text-decoration: none; }
.rf-breadcrumb a:hover { color: var(--rf-top-ink); text-decoration: underline; }
.rf-breadcrumb .rf-crumb-sep { opacity: 0.6; }
.rf-breadcrumb .rf-crumb-leaf { color: var(--rf-top-ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.mud-drawer.mud-drawer-clipped-always {
    top: var(--mud-appbar-height) !important;
    height: calc(100% - var(--mud-appbar-height)) !important;
}

/* Icon rail: desktop only (R12 hides it under 960px). */
.rf-rail { display: none; }
@media (min-width: 960px) {
    .rf-rail {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: fixed;
        left: 0;
        top: var(--mud-appbar-height);
        bottom: 0;
        width: var(--rf-rail-w);
        padding: 4px;
        box-sizing: border-box;
        background: var(--rf-rail);
        border-right: 1px solid var(--rf-line);
        z-index: 1150; /* above the drawer (1100), below popovers (1200) and the top bar (1300) */
    }
    /* The panel sits to the right of the rail; the main area clears both. */
    .mud-drawer.mud-drawer-pos-left:not(.mud-drawer--closed) { left: var(--rf-rail-w) !important; }
    .mud-layout:has(.rf-rail) .mud-main-content { margin-left: var(--rf-rail-w) !important; }
    .mud-layout:has(.rf-rail).mud-drawer-open-responsive-md-left .mud-main-content {
        margin-left: calc(var(--rf-rail-w) + var(--rf-panel-w)) !important;
    }
}
.rf-rail-group { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rf-rail-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--rf-muted);
    cursor: pointer;
    text-decoration: none;
    padding: 0;
}
.rf-rail-item .mud-icon-root { font-size: 20px; width: 20px; height: 20px; }
.rf-rail-item:hover { background: var(--rf-hover); color: var(--rf-ink); }
.rf-rail-item.active { color: var(--rf-accent-ink); background: var(--rf-accent-tint); border-radius: 0; }
.rf-rail .rf-rail-item.active::before {
    /* TOKENS: 3px square accent bar on the left edge of the current rail item */
    content: "";
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--rf-accent);
}
/* Its panel is showing over another page (peek): tinted, but no accent bar; the bar stays on the page's icon. */
.rf-rail-item.panel-on { color: var(--rf-accent-ink); background: var(--rf-accent-tint); }
.rf-rail-item.rf-rail-new { border: 1px solid var(--rf-line-2); background: var(--rf-card); color: var(--rf-ink); }
.rf-rail-item.rf-rail-new:hover { border-color: var(--rf-accent); }
.rf-rail-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rf-accent);
    box-shadow: 0 0 0 2px var(--rf-rail);
}
.rf-rail-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 3px;
    background: var(--rf-top);
    color: var(--rf-top-ink);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.rf-rail-sep { width: 24px; height: 1px; background: var(--rf-line); margin: 2px 0; }

/* Mobile (R12): the rail becomes an icon row at the top of the overlay drawer. */
.rf-rail-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 6px;
    border-bottom: 1px solid var(--rf-line);
    background: var(--rf-rail);
}
.rf-rail-row .rf-rail-group { flex-direction: row; flex-wrap: wrap; }
.rf-rail-row .rf-rail-sep { width: 1px; height: 24px; margin: 8px 2px; }
@media (min-width: 960px) {
    .rf-rail-row { display: none; }
}
.rf-panel-hidden { display: none; }
.rf-menu-header { padding: 8px 16px 6px; }
.rf-menu-header .rf-menu-name { font-weight: 600; font-size: 13px; color: var(--rf-ink); }
.rf-menu-header .rf-menu-email { font-size: 12px; color: var(--rf-muted); }

/* Slim Rafio R29: one-time tour card beside the rail (SlimShellTour.razor). Desktop only. */
.rf-tour { display: none; }
@media (min-width: 960px) {
    .rf-tour {
        display: block;
        position: fixed;
        left: calc(var(--rf-rail-w) + 10px);
        width: 280px;
        z-index: 1250;
        background: var(--rf-card);
        color: var(--rf-ink);
        border: 1px solid var(--rf-line-2);
        border-radius: 4px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
        padding: 12px 14px 8px;
        font-size: 13px;
    }
    .rf-tour::before {
        /* pointer toward the rail item (40px tall, so its middle is 20px down) */
        content: "";
        position: absolute;
        left: -6px;
        top: 14px;
        width: 10px;
        height: 10px;
        background: var(--rf-card);
        border-left: 1px solid var(--rf-line-2);
        border-bottom: 1px solid var(--rf-line-2);
        transform: rotate(45deg);
    }
}
.rf-tour-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rf-tour-title { flex: 1; font-weight: 600; color: var(--rf-head); }
.rf-tour-close { border: 0; background: transparent; color: var(--rf-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.rf-tour-body { color: var(--rf-muted); line-height: 1.5; margin-bottom: 8px; }
.rf-tour-foot { display: flex; align-items: center; gap: 4px; }
.rf-tour-count { flex: 1; font-size: 12px; color: var(--rf-faint); }

/* ── Slim Rafio Phase 3: side-panel views (NavMenu.razor) ─────────────────────────────────
   Threads, Projects and inside-a-project. Rows follow the B3 mockup: 30px minimum, 13px text,
   one status mark, the ⋮ menu shown on hover (always on touch screens). */
.rf-panel { display: flex; flex-direction: column; min-height: 100%; font-size: 13px; color: var(--rf-ink); }
.rf-phead { position: sticky; top: 0; z-index: 2; background: var(--rf-panel); }
.rf-pbar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--rf-line); }
.rf-pti { display: flex; align-items: center; gap: 8px; margin-right: auto; font-weight: 600; font-size: 14px; color: var(--rf-head); }
.rf-pti .mud-icon-root { font-size: 17px; width: 17px; height: 17px; color: var(--rf-accent-ink); }
.rf-iconbtn { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; flex: none; background: none; border: 1px solid transparent; border-radius: 3px; color: var(--rf-muted); cursor: pointer; }
.rf-iconbtn:hover { background: var(--rf-bg); border-color: var(--rf-line-2); color: var(--rf-ink); }
.rf-iconbtn .mud-icon-root { font-size: 16px; width: 16px; height: 16px; }
.rf-psearch { padding: 8px 10px 6px; }
.rf-field { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 9px; border: 1px solid var(--rf-line); border-radius: 3px; background: var(--rf-bg); color: var(--rf-faint); cursor: text; margin: 0; }
.rf-field:focus-within { border-color: var(--rf-accent); }
.rf-field .mud-icon-root { font-size: 16px; width: 16px; height: 16px; flex: none; }
.rf-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--rf-ink); font: inherit; font-size: 12.5px; }
.rf-field input::placeholder { color: var(--rf-faint); }
.rf-field input:focus-visible { outline: none; box-shadow: none; }
.rf-psort { display: flex; align-items: center; gap: 8px; padding: 0 14px 6px; font-size: 12px; color: var(--rf-muted); }
.rf-seg2 { display: inline-flex; border: 1px solid var(--rf-line-2); border-radius: 3px; overflow: hidden; }
.rf-seg2 button { height: 24px; padding: 0 10px; border: 0; background: var(--rf-bg); color: var(--rf-muted); font: inherit; font-size: 12px; cursor: pointer; }
.rf-seg2 button + button { border-left: 1px solid var(--rf-line-2); }
.rf-seg2 button.on { background: var(--rf-accent-tint); color: var(--rf-accent-ink); font-weight: 600; }
.rf-plist { flex: 1; padding: 2px 0 16px; }
.rf-phint { padding: 0 14px 6px; font-size: 11.5px; color: var(--rf-faint); }
.rf-psh { display: flex; align-items: center; justify-content: space-between; min-height: 28px; padding: 8px 8px 2px 14px; font-size: 12px; font-weight: 600; color: var(--rf-muted); }
.rf-cnt { margin-left: auto; font-weight: 400; color: var(--rf-faint); }
.rf-psh .rf-cnt { margin-right: 6px; }
.rf-pempty { padding: 4px 14px 6px; font-size: 12px; color: var(--rf-faint); }
.rf-gh { display: flex; align-items: center; gap: 6px; width: calc(100% - 12px); height: 28px; margin: 4px 6px 0; padding: 0 8px; background: none; border: 0; border-radius: 3px; color: var(--rf-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-align: left; }
.rf-gh:hover { background: var(--rf-hover); }
.rf-gh .mud-icon-root { font-size: 14px; width: 14px; height: 14px; }
.rf-gh .rf-cnt { margin-right: 4px; }

/* thread rows */
.rf-trow, .rf-pjrow, .rf-frow { position: relative; display: flex; align-items: flex-start; gap: 6px; margin: 0 6px; padding: 6px 2px 6px 10px; min-height: 30px; line-height: 18px; }
.rf-trow:hover, .rf-pjrow:hover, .rf-frow:hover { background: var(--rf-hover); }
.rf-trow.cur, .rf-pjrow.cur { background: var(--rf-bg); box-shadow: 0 0 0 1px var(--rf-line); }
.rf-trow.cur::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rf-accent); }
.rf-pdot { width: 8px; height: 8px; margin-top: 5px; border-radius: 2px; flex: none; }
.rf-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
a.rf-tx:hover, a.rf-tx:focus-visible { text-decoration: none; }
.rf-tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-pj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; line-height: 16px; color: var(--rf-faint); text-decoration: none; }
a.rf-pj:hover { text-decoration: underline; color: var(--rf-muted); }
.rf-trow.unread .rf-tt { font-weight: 600; }
.rf-mk { flex: none; display: inline-grid; place-items: center; width: 14px; height: 18px; color: var(--rf-faint); }
.rf-mk .mud-icon-root { font-size: 13px; width: 13px; height: 13px; }
.rf-mk-dot::before, .rf-mk-wait::before, .rf-mk-bad::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rf-accent); }
.rf-mk-wait::before { background: var(--rf-warn); }
.rf-mk-bad::before { background: var(--rf-bad); }
.rf-spin { display: inline-block; width: 10px; height: 10px; border: 1.75px solid var(--rf-track); border-top-color: var(--rf-accent); border-radius: 50%; animation: rf-spin 1.35s linear infinite; vertical-align: -1px; }
@keyframes rf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rf-spin { animation-duration: 4s; } }
.rf-n { flex: none; min-width: 18px; height: 18px; text-align: right; font-size: 11.5px; color: var(--rf-faint); }
.rf-more { flex: none; margin: -3px 0; opacity: 0; transition: opacity .1s; }
.rf-more .mud-icon-button { padding: 3px; }
.rf-more .mud-icon-root { font-size: 16px; width: 16px; height: 16px; }
.rf-trow:hover .rf-more, .rf-pjrow:hover .rf-more, .rf-frow:hover .rf-more, .rf-more:focus-within, .rf-more.rf-more-on { opacity: 1; }
@media (hover: none) { .rf-more { opacity: 1; } }
.rf-grip { display: grid; place-items: center; width: 12px; height: 18px; margin: 0 -4px; flex: none; color: var(--rf-faint); opacity: 0; cursor: grab; }
.rf-grip .mud-icon-root { font-size: 14px; width: 14px; height: 14px; }
.rf-pjrow:hover .rf-grip, .rf-trow:hover .rf-grip, .rf-grip:focus-visible { opacity: 1; }
.rf-pjrow.dragging { opacity: .4; }
.rf-pjrow.drop-before, .rf-trow.drop-before { box-shadow: inset 0 2px 0 var(--rf-accent); }

/* project rows */
.rf-pjrow { align-items: center; padding-top: 5px; padding-bottom: 5px; gap: 8px; }
.rf-pjlink { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.rf-pjlink:hover { text-decoration: none; }
.rf-ptile { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 3px; color: #fff; }
.rf-ptile .mud-icon-root { font-size: 15px; width: 15px; height: 15px; }

/* inside a project */
.rf-phead2 { padding: 8px 8px 6px 12px; border-bottom: 1px solid var(--rf-line); }
.rf-backlink { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px; margin-left: -6px; background: none; border: 0; border-radius: 3px; color: var(--rf-muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.rf-backlink:hover { background: var(--rf-hover); color: var(--rf-ink); }
.rf-backlink .mud-icon-root { font-size: 14px; width: 14px; height: 14px; }
.rf-pjt { display: flex; align-items: flex-start; gap: 9px; margin: 6px 0 2px; }
.rf-pjt .rf-pdot { width: 10px; height: 10px; }
.rf-pjt-name { font-weight: 600; color: var(--rf-head); line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
.rf-pjt-name:hover { text-decoration: underline; }
.rf-proj-in .rf-trow { padding-left: 14px; }
.rf-frow { align-items: center; padding-top: 3px; padding-bottom: 3px; }
.rf-ftoggle { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: 4px; padding: 0; background: none; border: 0; color: var(--rf-muted); font: inherit; cursor: pointer; text-align: left; }
.rf-ftoggle .mud-icon-root { font-size: 15px; width: 15px; height: 15px; flex: none; }

/* message-search hits */
.rf-hit { display: flex; flex-direction: column; gap: 2px; margin: 0 6px; padding: 6px 10px; color: inherit; text-decoration: none; line-height: 18px; }
.rf-hit:hover { background: var(--rf-hover); text-decoration: none; }
.rf-hit.cur { background: var(--rf-bg); box-shadow: 0 0 0 1px var(--rf-line); }
.rf-hit .rf-tt { font-weight: 600; }
.rf-ex { font-size: 12px; line-height: 16px; color: var(--rf-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Slim Rafio Phase 3: Projects home (R17) and project home (R18). */
.rf-home { max-width: 880px !important; }
.rf-home-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.rf-home-title { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--rf-head); }
.rf-home-sub { margin-top: 2px; font-size: 13px; color: var(--rf-muted); }
.rf-home-empty { padding: 16px; border: 1px dashed var(--rf-line-2); color: var(--rf-muted); font-size: 13px; line-height: 1.6; }
.rf-home-sec { margin-bottom: 26px; }
.rf-home-sec h2 { margin: 0 0 6px; padding-bottom: 8px; border-bottom: 1px solid var(--rf-line); font-size: 14px; font-weight: 600; color: var(--rf-head); }
.rf-arow { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--rf-line); }
.rf-arow-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 8px; color: var(--rf-ink); text-decoration: none; font-size: 13px; }
.rf-arow-main:hover { background: var(--rf-hover); text-decoration: none; }
.rf-arow-icon { flex: none; display: inline-grid; place-items: center; width: 18px; color: var(--rf-faint); }
.rf-arow-icon .mud-icon-root { font-size: 16px; width: 16px; height: 16px; }
.rf-arow-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-arow-proj { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--rf-muted); }
.rf-arow-proj .rf-pdot { margin-top: 0; }
.rf-arow-meta { margin-left: auto; padding-left: 12px; flex: none; font-size: 12px; color: var(--rf-faint); }
.rf-arow-empty { padding: 8px; font-size: 12.5px; color: var(--rf-faint); }
@media (max-width: 700px) { .rf-arow-proj { display: none; } }

.rf-phome-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
.rf-phome-title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--rf-head); overflow-wrap: anywhere; }
.rf-phome-sub { font-size: 12.5px; color: var(--rf-muted); text-decoration: none; }
a.rf-phome-sub:hover { text-decoration: underline; }
.rf-pcomposer { border: 1px solid var(--rf-line-2); border-radius: 4px; background: var(--rf-card); padding: 10px 12px 8px; margin-bottom: 6px; }
.rf-pcomposer:focus-within { border-color: var(--rf-accent); }
.rf-pcomposer textarea { width: 100%; min-height: 48px; max-height: 240px; resize: vertical; border: 0; outline: 0; background: transparent; color: var(--rf-ink); font: inherit; font-size: 14px; line-height: 1.5; }
.rf-pcomposer textarea:focus-visible { outline: none; box-shadow: none; }
.rf-pcomposer textarea::placeholder { color: var(--rf-faint); }
.rf-pcomposer-bar { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--rf-faint); }
.rf-pcomposer-bar .rf-grow { flex: 1; }
.rf-phome-tabs { margin-top: 22px; }
.rf-phome-tabs .mud-tabs-tabbar { background: transparent; border-bottom: 1px solid var(--rf-line); }

/* ─── Slim Rafio 6a: task status marks (StatusMark.razor). One 10px circle, 1.75px line, calm palette. ─── */
.rf-sm { position: relative; display: inline-block; box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%; border: 1.75px solid var(--rf-faint); vertical-align: -1px; }
.rf-sm-working { border-color: var(--rf-track); border-top-color: var(--rf-accent); animation: rf-spin 1.35s linear infinite; }
.rf-sm-done { border-color: var(--rf-accent); }
.rf-sm-gaps { border-color: var(--rf-muted); }
.rf-sm-stalled { border-color: var(--rf-warn); }
.rf-sm-failed { border-color: var(--rf-bad); }
.rf-sm-failed::after { content: ""; position: absolute; left: 50%; top: -1px; width: 1.75px; height: calc(100% + 2px); margin-left: -0.875px; background: var(--rf-bad); transform: rotate(45deg); }
.rf-sm-needs { width: 7px; height: 7px; border: 0; background: var(--rf-warn); vertical-align: 0; }
@media (prefers-reduced-motion: reduce) { .rf-sm-working { animation-duration: 4s; } }

/* Task activity list (ActivityBell.razor) */
.rf-ta { width: 360px; max-width: calc(100vw - 24px); font-size: 13px; }
.rf-ta-head { padding: 10px 14px 6px; font-weight: 600; border-bottom: 1px solid var(--rf-line); }
.rf-ta-empty { padding: 18px 14px; color: var(--rf-muted); }
.rf-ta-list { max-height: 60vh; overflow-y: auto; padding-bottom: 4px; }
.rf-ta-gh { padding: 10px 14px 2px; font-size: 11.5px; font-weight: 600; color: var(--rf-muted); }
.rf-ta-row { display: flex; align-items: flex-start; gap: 8px; min-width: 0; width: 100%; }
.rf-ta-row .rf-mk { margin-top: 1px; }
.rf-ta-tx { min-width: 0; flex: 1; }
.rf-ta-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--rf-ink); }
.rf-ta-meta { font-size: 12px; color: var(--rf-muted); }
.rf-ta-more { padding: 2px 14px 6px 36px; font-size: 12px; color: var(--rf-faint); }
.activity-bell-popover .mud-menu-item { padding-top: 5px; padding-bottom: 5px; }

/* Notifications bell (NotificationBell.razor) — reuses the Task activity list styles */
.rf-nt-text { color: var(--rf-ink); white-space: normal; line-height: 1.35; }
.rf-nt-unread .rf-nt-text { font-weight: 600; }
.rf-nt-quote { font-size: 12px; color: var(--rf-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-nt-dot { flex: none; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--rf-accent); }
.rf-bell-badge.mud-badge { font-size: 10px; min-width: 16px; height: 16px; padding: 0 4px; inset: auto auto calc(100% - 18px) calc(100% - 18px) !important; }

/* ─── Slim Rafio Phase 5: composer single slot + action bar ─── */
/* Send and voice call share one slot. The box is "empty" while its placeholder shows; the voice button
   appears ~300 ms after the box empties (so a click meant for Send right after sending can't start a
   call), and Send returns at once when typing starts. */
.rf-slot { position: relative; display: inline-flex; width: 30px; height: 30px; }
.rf-slot > span { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; }
.rf-slot-voice { visibility: hidden; transition: visibility 0s; }
.chat-input-area:has(textarea:placeholder-shown) .rf-slot-send { visibility: hidden; }
.chat-input-area:has(textarea:placeholder-shown) .rf-slot-voice { visibility: visible; transition: visibility 0s 300ms; }
.chat-input-area:has(textarea:placeholder-shown) .rf-steer { display: none; }
.rf-steer { display: inline-flex; }
.rf-projchip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 4px 0 8px; margin-right: 4px; border-radius: 12px; font-size: 12.5px; color: var(--rf-ink); background: var(--rf-sunk); }
.rf-projchip .rf-pdot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.rf-projchip-x { border: 0; background: transparent; color: var(--rf-muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 50%; }
.rf-projchip-x:hover { color: var(--rf-ink); background: var(--rf-line); }
.rf-cost { font-size: 11px; color: var(--rf-faint); font-variant-numeric: tabular-nums; }

/* 6d stall card (Chat/Index.razor) — calm: orange ring, no banner */
.rf-stall-card { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; padding: 12px 14px; border: 1px solid var(--rf-line); border-left: 3px solid var(--rf-warn); border-radius: 8px; background: var(--rf-card); font-size: 13.5px; }
.rf-stall-card > .rf-mk { margin-top: 2px; }
.rf-stall-title { font-weight: 600; color: var(--rf-ink); }
.rf-stall-body { color: var(--rf-muted); margin-top: 2px; }
.rf-stall-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.rf-stall-hint { font-size: 12px; color: var(--rf-faint); }

/* 6b failed card (Chat/Index.razor): what finished → where it stopped → what was kept → next */
.rf-fail-card { margin: 0 16px 12px; padding: 12px 14px; border: 1px solid var(--rf-line); border-left: 3px solid var(--rf-bad); border-radius: 8px; background: var(--rf-card); font-size: 13.5px; }
.rf-fail-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rf-fail-title { font-weight: 600; color: var(--rf-ink); }
.rf-fail-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 10px; }
.rf-fail-list dt { color: var(--rf-muted); font-size: 12.5px; padding-top: 1px; }
.rf-fail-list dd { margin: 0; color: var(--rf-ink); }
.rf-fail-steps { margin: 0; padding-left: 18px; }
.rf-fail-steps li { line-height: 1.5; }
.rf-fail-steps code { font-size: 12px; background: var(--rf-sunk); padding: 0 4px; border-radius: 3px; }
.rf-fail-files { display: block; color: var(--rf-muted); font-size: 12.5px; margin-top: 2px; }
.rf-fail-warn { color: var(--rf-warn); font-size: 12.5px; margin-top: 4px; }
.rf-fail-actions { display: flex; gap: 8px; }
@media (max-width: 600px) { .rf-fail-list { grid-template-columns: 1fr; } .rf-fail-list dt { padding-top: 6px; } }

/* 6e: the platform's one-line outcome under a reply */
.rf-outcome { display: flex; align-items: center; gap: 6px; margin: 4px 2px 0; font-size: 12.5px; color: var(--rf-muted); }
.rf-outcome .rf-mk { height: 16px; }

/* Quoted-source figure chips ("$1,478.81 \B7 ECIF-2025.pdf \B7 p. 3"): long file/email labels ellipsize instead of
   overflowing the bubble on a 375px phone. */
.rf-figure-src-link { text-decoration: none; color: inherit; max-width: 100%; }
.message-figure-provenance .rf-figure-src-chip { max-width: 100%; }
.rf-figure-src-label { display: inline-block; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
@media (max-width: 599.98px) {
    .rf-figure-src-label { max-width: 180px; }
}
.activity-bell-popover .mud-menu-item { max-width: 360px; }
.activity-bell-popover .mud-menu-item .mud-menu-item-text { min-width: 0; overflow: hidden; }
/* MudBlazor indents every item's text by an icon gutter (36px) when any item in the menu has an
   icon ("Mark all seen"). Task rows carry their own mark, so they start at the group-heading edge. */
.activity-bell-popover .mud-menu-item:has(.rf-ta-row) { padding-left: 14px; padding-right: 14px; }
.activity-bell-popover .mud-menu-list .rf-ta .mud-menu-item:has(.rf-ta-row) .mud-menu-item-text { margin-inline-start: 0; }
/* The bell/pulse tooltips must not sit over their own open menu. */
.mud-popover-provider:has(> .activity-bell-popover.mud-popover-open) > .mud-popover.mud-tooltip { display: none; }

/* Admin/Company hub cards: the whole card is clickable. The card's first link
   (the View/Manage/Configure button) is stretched over the card so navigation,
   middle-click, and keyboard focus stay on a real <a>. Other action buttons
   (e.g. "Regenerate Embeddings") sit above the overlay. */
.hub-card {
    position: relative;
    cursor: pointer;
    height: 100%;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.hub-card:hover {
    box-shadow: var(--mud-elevation-4);
    transform: translateY(-1px);
}
/* MudButton's root is position:relative + overflow:hidden (.mud-ripple) and reuses ::after for the
   ripple (pointer-events:none, scaled, transitioned). Make the anchor static so the overlay resolves
   against the card, and neutralize the ripple styling on the overlay. */
.hub-card .mud-card-actions a:first-of-type {
    position: static;
    overflow: visible;
}
.hub-card .mud-card-actions a:first-of-type::after,
.hub-card .mud-card-actions a:first-of-type:active::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    z-index: 0;
    pointer-events: auto;
    transform: none;
    opacity: 0;
    background: none;
    transition: none;
}
.hub-card .mud-card-actions button,
.hub-card .mud-card-actions a:not(:first-of-type) {
    position: relative;
    z-index: 1;
}

/* Ticket #69: "Ask Rafio" selection references. Composer cards reuse the upload-chip look
   (outlined, 16px radius, 0.8rem). The remove X is dimmed until hover/focus but always rendered,
   focusable and labelled; on touch devices it stays fully visible. */
.selection-ref-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.selection-ref-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 180px;
    max-width: 340px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    padding: 2px 4px 2px 10px;
    font-size: 0.8rem;
    background: var(--mud-palette-surface);
    outline: none;
}
.selection-ref-chip:focus-visible {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px rgba(var(--mud-palette-primary-rgb), 0.25);
}
.selection-ref-label {
    font-weight: 600;
    white-space: nowrap;
}
.selection-ref-preview {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}
.selection-ref-chip .selection-ref-remove {
    margin: -4px -2px -4px 0;
    opacity: 0.45;
    transition: opacity 0.12s ease;
}
.selection-ref-chip:hover .selection-ref-remove,
.selection-ref-chip:focus-within .selection-ref-remove,
.selection-ref-chip .selection-ref-remove:focus-visible {
    opacity: 1;
}
@media (hover: none) {
    .selection-ref-chip .selection-ref-remove { opacity: 1; }
}

/* Sent user bubble: selection references rendered as small quote cards above the question. */
.selection-ref-quotes {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;
}
.selection-ref-quote {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: 0.8rem;
    color: inherit;
    background: rgba(127, 127, 127, 0.12);
    border: none;
    border-left: 3px solid currentColor;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    opacity: 0.92;
}
.selection-ref-quote:hover,
.selection-ref-quote:focus-visible {
    background: rgba(127, 127, 127, 0.2);
    opacity: 1;
}
.selection-ref-quote-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
}
.message-wrapper.selection-ref-flash {
    animation: selection-ref-flash 1.5s ease-out;
}
@keyframes selection-ref-flash {
    0% { box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), 0.45); border-radius: 12px; }
    100% { box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), 0); border-radius: 12px; }
}

/* iOS Safari auto-zooms the page when a focused text control's font-size is < 16px
   (theme Body1 is 14px). Bump editable controls to 16px on touch devices only so tapping
   the composer/search fields no longer zooms. Preferred over viewport maximum-scale=1,
   which would disable pinch-zoom on Android (accessibility). */
@media (hover: none) and (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="file"]),
    textarea,
    select,
    [contenteditable="true"] {
        font-size: 16px !important;
    }
}