/* =============================================================================
   File:      app.css
   Project:   GeekInfinity.Rag
   Author:    Marcus Pock
   Copyright: (c) 2026 GeekInfinity. All rights reserved.
   Path:      src/GeekInfinity.Rag/wwwroot/app.css
   Purpose:   THE ONLY PLACE COLORS/TYPOGRAPHY/LOOK-AND-FEEL ARE DEFINED.
              Every page and component pulls its colors from the CSS
              variables below - never hardcode a color anywhere else.
              Redesigned in a Stripe-inspired style (clean light theme by
              default, white card, indigo accent, subtle shadows) - the
              general layout language only, not Stripe's logo, exact brand
              color, or marketing artwork.

   THEME DEFAULT
   :root            = LIGHT (new default, matches the clean card-on-light-
                       background look).
   :root[data-theme="dark"] = DARK (now the override, toggled by the user).

   WHY prefers-color-scheme IS DELIBERATELY NOT USED
   The user's choice is made through the theme toggle, stored in the
   "rag_theme" cookie, and the server reads that cookie to set data-theme
   on <html> before the page is ever sent - so there is no flash of the
   wrong theme on load.
   ========================================================================== */

:root {
    /* --- Light theme (default) --- */
    --bg: #f6f9fc;
    --bg-rgb: 246, 249, 252;
    --surface: #ffffff;
    --surface-rgb: 255, 255, 255;
    --border: #e3e8ee;
    --text: #32325d;
    --text-muted: #6b7c93;
    --accent: #6366f1;
    --accent-rgb: 99, 102, 241;
    --accent-hover: #4f52d6;
    --danger: #e00606;
    --danger-rgb: 224, 6, 6;
    --success: #0e8a5f;
    --success-rgb: 14, 138, 95;
    --card-shadow: 0 2px 5px rgba(50, 50, 93, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}

    :root[data-theme="dark"] {
        --bg: #0f1115;
        --bg-rgb: 15, 17, 21;
        --surface: #1a1d24;
        --surface-rgb: 26, 29, 36;
        --border: #2a2e37;
        --text: #e8eaed;
        --text-muted: #9aa0ab;
        --accent: #7b7fff;
        --accent-rgb: 123, 127, 255;
        --accent-hover: #9a9dff;
        --danger: #f87171;
        --danger-rgb: 248, 113, 113;
        --success: #3dd68c;
        --success-rgb: 61, 214, 140;
        --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3);
    }

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    overflow-x: hidden;
    background-color: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    /* A word with no break opportunity - a file name full of underscores, a
       long e-mail address, an API key - used to run off the side of its
       card, where overflow-x: hidden above then simply cut it off. Breaking
       only happens when the word genuinely does not fit. */
    overflow-wrap: break-word;
}

a {
    color: var(--accent);
    text-decoration: none;
}

    a:hover {
        color: var(--accent-hover);
        text-decoration: underline;
    }

.rag-surface {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
}

.rag-card {
    max-width: 440px;
    margin: 4rem auto;
    padding: 2.5rem;
}

    .rag-card h1 {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 1.5rem;
        color: var(--text);
    }

/* No negative top margin (2026-09-23): it assumed every subtitle follows a
   heading with a large bottom margin. Where that was not the case - the
   chat page, the dashboard widgets - the line sat ON the heading. Spacing
   now comes from the heading above, as everywhere else. */
.rag-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.rag-form-group {
    margin-bottom: 1.25rem;
}

    .rag-form-group label {
        display: block;
        margin-bottom: 0.4rem;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text);
    }

    .rag-form-group input {
        width: 100%;
        padding: 0.65rem 0.85rem;
        background-color: var(--surface);
        border: 1px solid var(--border);
        border-radius: 6px;
        color: var(--text);
        font-size: 0.95rem;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

        .rag-form-group input[type="checkbox"] {
            width: auto;
            padding: 0;
            border: 1px solid var(--border);
            border-radius: 4px;
            background: none;
            accent-color: var(--accent);
            cursor: pointer;
        }

    .rag-form-group label.rag-checkbox-label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
        font-weight: 400;
        color: var(--text);
        cursor: pointer;
        margin-bottom: 0;
    }

    .rag-form-group input:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
    }

.rag-button {
    display: inline-block;
    width: auto;
    padding: 0.6rem 1.2rem;
    background-color: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* The form-submit variant: one button on its own line, full width - the
   login and registration forms, the plan cards. Everywhere else a button
   is as wide as its label. */
.rag-button-block {
    width: 100%;
    padding: 0.7rem 1rem;
    text-align: center;
}

    .rag-button:hover {
        background-color: var(--accent-hover);
    }

    .rag-button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

.rag-alert {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
}

.rag-alert-danger {
    background-color: rgba(var(--danger-rgb), 0.08);
    border: 1px solid rgba(var(--danger-rgb), 0.25);
    color: var(--danger);
}

.rag-alert-success {
    background-color: rgba(var(--success-rgb), 0.08);
    border: 1px solid rgba(var(--success-rgb), 0.25);
    color: var(--success);
}

/* Theme dropdown (ThemeToggle.razor + theme-menu.js) - shares the
   language selector's .rag-lang styling; only the icon swap is its own. */
.rag-theme .rag-theme-ico-dark,
.rag-theme .rag-theme-ico-light {
    display: none;
}

    .rag-theme.rag-theme-dark > summary .rag-theme-ico-dark,
    .rag-theme.rag-theme-light > summary .rag-theme-ico-light {
        display: inline;
    }

.rag-lang-item .rag-theme-ico {
    flex-shrink: 0;
}

button.rag-lang-item {
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

/* Full-screen button (FullscreenToggle.razor + fullscreen.js) - same tile
   height as the neighbours; hidden until the script confirms support. */
.rag-fs-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: none;
    color: var(--text);
    cursor: pointer;
}

    .rag-fs-toggle:hover {
        border-color: var(--accent);
    }

    .rag-fs-toggle.rag-fs-ready {
        display: inline-flex;
    }

    .rag-fs-toggle .rag-fs-ico-exit {
        display: none;
    }

    .rag-fs-toggle.rag-fs-active .rag-fs-ico-enter {
        display: none;
    }

    .rag-fs-toggle.rag-fs-active .rag-fs-ico-exit {
        display: inline;
    }

/* =============================================================================
   Language selector (LanguageSelector.razor) - flag + native name, opens a
   list of all languages. Plain <details>, no JS. Sits next to the theme
   toggle in every top bar; on auth pages in the floating corner bar.
   ========================================================================== */

.rag-lang {
    position: relative;
}

    .rag-lang > summary {
        list-style: none;
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        gap: 0.45rem;
        background: none;
        border: 1px solid var(--border);
        border-radius: 6px;
        color: var(--text);
        padding: 0.4rem 0.7rem;
        cursor: pointer;
        font-size: 0.9rem;
        user-select: none;
    }

    .rag-lang > summary::-webkit-details-marker {
        display: none;
    }

    .rag-lang > summary:hover,
    .rag-lang[open] > summary {
        border-color: var(--accent);
    }

.rag-lang-caret {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.rag-flag {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.rag-lang-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 60;
    min-width: 170px;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--card-shadow);
}

.rag-lang-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
}

    .rag-lang-item:hover {
        background: rgba(var(--accent-rgb), 0.1);
        color: var(--text);
        text-decoration: none;
    }

    .rag-lang-item.rag-lang-active {
        color: var(--accent);
        font-weight: 600;
    }

/* Login / Register / VerifyEmail have no top bar: the selector (and theme
   toggle) float in the top-right corner of the page instead. */
.rag-auth-corner {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 5;
}

/* "<- Back to the start page", top-left of login / register / verify-email
   (2026-09-22): the auth pages have no other way back to the landing page. */
.rag-auth-back {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 5;
}

@media (max-width: 600px) {
    .rag-lang-name {
        display: none;
    }
}

/* On a phone the back link and the three corner controls of the login,
   registration and verification pages met in the middle and overlapped, so
   the controls move to a second row and the page starts lower down. Both
   are absolutely positioned, which is why the page needs the extra room
   explicitly. */
@media (max-width: 560px) {
    .rag-auth-page {
        padding-top: 7rem;
    }

    .rag-auth-back {
        top: 0.75rem;
        left: 0.75rem;
    }

    .rag-auth-corner {
        top: 3.5rem;
        right: 0.75rem;
    }
}

.rag-footer-text {
    text-align: center;
    margin-top: 1.5rem;
    margin-bottom: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* =============================================================================
   Landing page (anonymous visitors on "/" only - see MainLayout.razor).
   Own top bar + hero, no sidebar. Background gradient is an original blend
   in our own accent hues - not a reproduction of any third party's artwork.
   ========================================================================== */

.rag-landing {
    min-height: 100vh;
    background-color: var(--bg);
    display: flex;
    flex-direction: column;
}

    /* Children keep their own max-width + auto margins; without this a
       flex column would shrink an auto-margin section to its content. */
    .rag-landing > * {
        width: 100%;
    }

    .rag-landing > .rag-site-footer {
        margin-top: auto;
    }

/* The one-line footer at the very bottom of every view (SiteFooter.razor):
   DocMind's "footer { margin-top:auto; padding-top:44px; text-align:center;
   color:var(--muted-2); font-size:12px }" */
.rag-site-footer {
    margin-top: auto;
    padding: 44px 1rem 1.25rem;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

    .rag-site-footer a {
        color: inherit;
        text-decoration: none;
    }

        .rag-site-footer a:hover {
            color: var(--accent);
            text-decoration: none;
        }

    .rag-site-footer-sep {
        margin: 0 0.15rem;
    }

/* On the auth pages (login, register, verify-email) the card is centred
   in the viewport; the footer sits on the bottom edge. */
.rag-auth-page > .rag-site-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding-top: 0;
}

/* Legal notice / contact / terms / privacy - one readable column */
.rag-legal-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 2rem 2rem 3rem;
    width: 100%;
}

    .rag-legal-page h1 {
        font-size: 2rem;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 0.5rem;
    }

    .rag-legal-page > .rag-subtitle {
        margin-top: 0;
        margin-bottom: 2rem;
    }

    .rag-legal-page .rag-legal-body {
        color: var(--text);
        line-height: 1.65;
    }

.rag-legal-section {
    margin-bottom: 1.75rem;
}

    .rag-legal-section h2 {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text);
        margin: 0 0 0.5rem;
    }

    .rag-legal-section p,
    .rag-legal-section address {
        margin: 0;
        line-height: 1.65;
        color: var(--text);
        font-style: normal;
    }

.rag-legal-trade {
    color: var(--text-muted);
}

.rag-legal-muted {
    color: var(--text-muted);
}

/* Contact form */
.rag-contact-page .rag-form-group textarea.rag-contact-message {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font: inherit;
    line-height: 1.5;
    resize: vertical;
}

    .rag-contact-page .rag-form-group textarea.rag-contact-message:focus {
        outline: none;
        border-color: var(--accent);
    }

.rag-contact-hp {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.rag-contact-note {
    font-size: 0.85rem;
    margin: 0 0 1.25rem;
}

.rag-contact-send {
    width: auto;
    padding: 0.65rem 1.5rem;
}

/* Subscription page (Subscription.razor): the current-plan card spans the
   same width as the tier grid below it, with real space between them. */
.rag-ai-instructions-card.rag-sub-current {
    max-width: none;
    margin-bottom: 2.5rem;
}

.rag-sub-tiers {
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
}

    .rag-sub-tiers .rag-feature-card {
        display: flex;
        flex-direction: column;
    }

        .rag-sub-tiers .rag-feature-card h3 {
            margin-bottom: 0.5rem;
        }

        /* Limits and price take the spare height, so every button sits on
           the same line however long a tier's limit list runs. */
        .rag-sub-tiers .rag-feature-card p {
            flex: 1;
            color: var(--text-muted);
            line-height: 1.5;
            margin: 0 0 1.25rem;
        }

        .rag-sub-tiers .rag-feature-card button {
            width: 100%;
        }

@media (max-width: 1024px) {
    .rag-sub-tiers {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .rag-sub-tiers {
        grid-template-columns: 1fr;
    }
}

/* Database screen maintenance jobs (Database.razor): progress bar, cancel
   and the per-file status table - the same shape DocMind's screen has. */
.rag-db-confirm {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(var(--accent-rgb), 0.05);
}

    .rag-db-confirm p {
        margin: 0 0 0.9rem;
        color: var(--text);
        font-size: 0.9rem;
        line-height: 1.5;
    }

.rag-db-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.rag-db-confirm-go {
    width: auto;
    padding: 0.5rem 1.2rem;
}

.rag-db-clear-confirm p {
    margin: 0 0 0.9rem;
}

.rag-db-job {
    margin-top: 1.5rem;
}

.rag-db-job-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.rag-db-job-pct {
    font-variant-numeric: tabular-nums;
}

.rag-db-job-cancel {
    margin-top: 0.9rem;
    width: auto;
    padding: 0.4rem 1rem;
}

.rag-db-job-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.85rem;
}

    .rag-db-job-table th {
        text-align: left;
        padding: 0.5rem 0.75rem;
        color: var(--text-muted);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        border-bottom: 1px solid var(--border);
    }

    .rag-db-job-table td {
        padding: 0.5rem 0.75rem;
        border-top: 1px solid var(--border);
    }

.rag-db-job-status {
    white-space: nowrap;
    width: 180px;
    color: var(--text-muted);
}

.rag-db-job-ok {
    color: var(--success);
}

.rag-db-job-bad {
    color: var(--danger);
}

.rag-db-job-running {
    color: var(--accent);
}

.rag-db-job-file {
    word-break: break-all;
}

/* The paywall (PaywallGate.razor): a full page, not an overlay - the app
   is not rendered behind it. */
.rag-paywall {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--bg);
}

.rag-paywall-inner {
    flex: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 2rem 1rem;
    text-align: center;
}

.rag-paywall-brand {
    display: inline-block;
    margin-bottom: 2rem;
}

.rag-paywall-inner h1 {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.6rem;
}

.rag-paywall-subtitle {
    color: var(--text-muted);
    margin: 0 auto 2.5rem;
    max-width: 640px;
}

.rag-paywall-alert {
    max-width: 640px;
    margin: 0 auto 1.5rem;
    text-align: left;
}

.rag-paywall-grid {
    grid-template-columns: repeat(4, 1fr);
    text-align: left;
}

.rag-paywall-card {
    display: flex;
    flex-direction: column;
}

    .rag-paywall-card .rag-pricing-limits {
        flex: 0 0 auto;
    }

.rag-paywall-terms {
    flex: 1;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0 0 1.25rem;
}

.rag-paywall-actions {
    display: flex;
    gap: 0.5rem;
}

    .rag-paywall-actions > button {
        flex: 1 1 0;
    }

.rag-paywall-links {
    margin-top: 2.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

@media (max-width: 1024px) {
    .rag-paywall-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .rag-paywall-grid {
        grid-template-columns: 1fr;
    }

    .rag-paywall-inner {
        padding: 2rem 1rem 1rem;
    }
}

/* "No second factor active" notice (TotpWarningGate.razor) */
.rag-totp-warn {
    text-align: center;
}

    .rag-totp-warn .rag-totp-warn-title {
        color: var(--danger);
    }

    .rag-totp-warn .rag-totp-warn-body {
        text-align: left;
        line-height: 1.55;
        margin: 0.5rem 0 1rem;
    }

    .rag-totp-warn .rag-totp-warn-check {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        text-align: left;
        font-size: 0.9rem;
        cursor: pointer;
    }

        .rag-totp-warn .rag-totp-warn-check input {
            width: auto;
            margin-top: 3px;
        }

    .rag-totp-warn .rag-totp-warn-actions {
        margin-top: 1.25rem;
    }

        .rag-totp-warn .rag-totp-warn-actions > * {
            flex: 1;
        }

/* Cancel subscription page (CancelSubscription.razor) */
.rag-cancel-card .rag-cancel-warn {
    margin-top: 1rem;
}

.rag-cancel-btn {
    width: auto;
    padding: 0.65rem 1.5rem;
}

.rag-cancel-confirm {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--danger);
    border-radius: 8px;
}

    .rag-cancel-confirm .rag-modal-actions {
        justify-content: flex-start;
        margin-top: 0.75rem;
    }

.rag-cancel-btn-danger {
    background-color: var(--danger);
    border-color: var(--danger);
}

/* Admin page: legal notice & contact settings */
.rag-legal-form-h {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 1.5rem 0 0.75rem;
}

.rag-legal-form-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
}

.rag-legal-form-preview {
    margin-top: 1rem;
}

/* =============================================================================
   Context help: the [?] in the top bar and the sidebar it opens
   (HelpPanel.razor). The panel slides in from the right over the page -
   the page stays where it was, so the help explains what is still on
   screen behind it. Markers sit on the screenshot in percent, which is
   why the same picture works at every panel width.
   ========================================================================== */
.rag-help-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    width: 34px;
    height: 34px;
    padding: 0;
    cursor: pointer;
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

    .rag-help-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
    }

    .rag-help-btn-on {
        border-color: var(--accent);
        color: #fff;
        background: var(--accent);
    }

.rag-help-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 40;
}

.rag-help-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 100vw);
    z-index: 41;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.25rem 2rem;
    background-color: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
}

.rag-help-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.rag-help-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}

.rag-help-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
}

.rag-help-lead {
    margin: 0;
    color: var(--text-muted);
}

/* ---- the screenshot with its markers ---- */
.rag-help-shot {
    position: relative;
    /* The panel is a flex column taller than the window, and a flex item
       shrinks before the container scrolls - which squashed the picture to
       two pixels. It keeps its own height; the panel scrolls instead. */
    flex: 0 0 auto;
    margin: 0.25rem 0 0;
    line-height: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg);
}

    .rag-help-shot img {
        display: block;
        width: 100%;
        height: auto;
    }

.rag-help-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

    .rag-help-marker:hover,
    .rag-help-marker-on {
        background: var(--success);
        transform: translate(-50%, -50%) scale(1.25);
    }

/* ---- what each marker means ---- */
.rag-help-callouts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

    .rag-help-callouts li {
        display: flex;
        align-items: flex-start;
        gap: 0.6rem;
        padding: 0.4rem 0.5rem;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.9rem;
        color: var(--text);
    }

        .rag-help-callouts li:hover,
        .rag-help-callout-on {
            background: rgba(var(--accent-rgb), 0.1);
        }

.rag-help-callout-n {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.rag-help-callout-on .rag-help-callout-n {
    background: var(--success);
}

/* ---- the prose underneath ---- */
.rag-help-body {
    color: var(--text);
    font-size: 0.93rem;
}

    .rag-help-body p {
        margin: 0 0 0.75rem;
    }

    .rag-help-body h3 {
        margin: 1rem 0 0.4rem;
        font-size: 0.95rem;
        font-weight: 600;
    }

    .rag-help-body ul {
        margin: 0 0 0.75rem;
        padding-left: 1.1rem;
    }

    .rag-help-body li {
        margin-bottom: 0.3rem;
    }

.rag-help-lang-note {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

/* The Help texts editor (HelpTexts.razor). */
.rag-help-row-open {
    background: rgba(var(--accent-rgb), 0.08);
}

.rag-help-editor {
    margin-top: 1.25rem;
}

.rag-help-body-input {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    resize: vertical;
}

.rag-help-marker-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .rag-help-marker-row label {
        margin: 0;
        flex: 0 0 auto;
    }

    .rag-help-marker-row input {
        flex: 1;
    }

.rag-help-panel-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* =============================================================================
   The GeekInfinity logo with its glitch (GeekInfinityLogo.razor +
   js/logo-glitch.js), ported from DocMind's login page. At rest: the mark
   draws itself once, then breathes. During a burst the script adds
   .gi-glitch-on and the violet/cyan copies appear, clipped and displaced
   in steps - the stepped timing is what makes it read as a broken signal
   rather than a smooth animation.
   ========================================================================== */
@keyframes gi-draw {
    from { stroke-dashoffset: 700; }
    to { stroke-dashoffset: 0; }
}

@keyframes gi-pulse-glow {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.6)) drop-shadow(0 0 20px rgba(0, 229, 255, 0.3)); }
    50% { filter: drop-shadow(0 0 14px rgba(0, 229, 255, 0.9)) drop-shadow(0 0 35px rgba(124, 58, 237, 0.5)); }
}

@keyframes gi-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes gi-jitter {
    0% { transform: translate(0, 0) skewX(0); }
    15% { transform: translate(-4px, 2px) skewX(0); }
    18% { transform: translate(5px, -2px) skewX(8deg); }
    22% { transform: translate(-2px, 0) skewX(-5deg); }
    30% { transform: translate(3px, 1px) skewX(0); }
    48% { transform: translate(-5px, 3px) skewX(-9deg); }
    52% { transform: translate(4px, -2px) skewX(6deg); }
    60% { transform: translate(-2px, 0) skewX(0); }
    78% { transform: translate(6px, -3px) skewX(10deg); }
    82% { transform: translate(-4px, 2px) skewX(-5deg); }
    100% { transform: translate(0, 0) skewX(0); }
}

@keyframes gi-flicker {
    0% { opacity: 1; }
    12% { opacity: 0.2; }
    14% { opacity: 1; }
    30% { opacity: 0.6; }
    32% { opacity: 1; }
    55% { opacity: 0.12; }
    57% { opacity: 1; }
    80% { opacity: 0.45; }
    82% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes gi-split-r {
    0% { clip-path: inset(0 0 88% 0); transform: translate(-9px, -2px); }
    12% { clip-path: inset(82% 0 4% 0); transform: translate(10px, 2px); }
    24% { clip-path: inset(38% 0 42% 0); transform: translate(-12px, 0); }
    36% { clip-path: inset(12% 0 70% 0); transform: translate(7px, -1px); }
    48% { clip-path: inset(64% 0 14% 0); transform: translate(-9px, 3px); }
    60% { clip-path: inset(28% 0 55% 0); transform: translate(11px, 0); }
    72% { clip-path: inset(4% 0 80% 0); transform: translate(-8px, 1px); }
    84% { clip-path: inset(70% 0 8% 0); transform: translate(9px, -2px); }
    100% { clip-path: inset(44% 0 30% 0); transform: translate(-12px, 2px); }
}

@keyframes gi-split-c {
    0% { clip-path: inset(70% 0 6% 0); transform: translate(10px, 2px); }
    12% { clip-path: inset(20% 0 62% 0); transform: translate(-9px, -2px); }
    24% { clip-path: inset(52% 0 24% 0); transform: translate(12px, 1px); }
    36% { clip-path: inset(6% 0 78% 0); transform: translate(-8px, 0); }
    48% { clip-path: inset(40% 0 38% 0); transform: translate(11px, -2px); }
    60% { clip-path: inset(66% 0 10% 0); transform: translate(-10px, 2px); }
    72% { clip-path: inset(24% 0 58% 0); transform: translate(9px, 0); }
    84% { clip-path: inset(48% 0 28% 0); transform: translate(-12px, 1px); }
    100% { clip-path: inset(14% 0 68% 0); transform: translate(8px, -1px); }
}

.gi-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

    .gi-logo.gi-glitch-on {
        animation: gi-jitter 0.4s steps(1, end) infinite;
    }

.gi-mark {
    position: relative;
    display: inline-block;
    line-height: 0;
    animation: gi-pulse-glow 3s ease-in-out infinite;
}

    .gi-mark .gi-mk {
        display: block;
    }

    .gi-mark .gi-mk--r,
    .gi-mark .gi-mk--c {
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        mix-blend-mode: screen;
        opacity: 0;
        will-change: clip-path, transform;
    }

.gi-mk-draw {
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    animation: gi-draw 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.gi-mk-dot {
    animation: gi-fade-up 0.5s 1.6s both;
}

.gi-glitch-on .gi-mk--r {
    opacity: 1;
    animation: gi-split-r 0.45s steps(1, end) infinite, gi-flicker 0.4s steps(1, end) infinite;
}

.gi-glitch-on .gi-mk--c {
    opacity: 1;
    animation: gi-split-c 0.5s steps(1, end) infinite;
}

.gi-name-wrap {
    position: relative;
}

.gi-glitch-on .gi-name-wrap {
    animation: gi-flicker 0.4s steps(1, end) infinite;
}

.gi-name {
    display: flex;
    align-items: baseline;
    line-height: 1;
}

.gi-nm--r,
.gi-nm--c {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
    will-change: clip-path, transform;
}

.gi-glitch-on .gi-nm--r {
    opacity: 1;
    animation: gi-split-r 0.45s steps(1, end) infinite;
}

.gi-glitch-on .gi-nm--c {
    opacity: 1;
    animation: gi-split-c 0.5s steps(1, end) infinite;
}

    .gi-nm--r .gi-geek,
    .gi-nm--r .gi-inf {
        color: #8b5cf6 !important;
    }

    .gi-nm--c .gi-geek,
    .gi-nm--c .gi-inf {
        color: #00e5ff !important;
    }

.gi-wordmark {
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: gi-fade-up 0.6s 1.2s both;
}

    .gi-wordmark .gi-geek {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-weight: 700;
        font-size: 34px;
        color: #00e5ff;
        letter-spacing: -0.02em;
    }

    .gi-wordmark .gi-inf {
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 300;
        font-size: 34px;
        color: #e2e8f0;
        letter-spacing: -0.02em;
    }

    .gi-wordmark .gi-bar {
        height: 1.5px;
        background: linear-gradient(90deg, #00e5ff, #7c3aed, transparent);
        border-radius: 2px;
    }

    .gi-wordmark .gi-tag {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 8.5px;
        color: rgba(255, 255, 255, 0.35);
        letter-spacing: 0.22em;
        text-transform: uppercase;
    }

/* The wordmark is drawn for a dark backdrop; on the light theme the pale
   half, the tagline and the screen-blended glitch copies would all wash
   out to white, so the light theme flips them. */
:root[data-theme="light"] .gi-mk--r,
:root[data-theme="light"] .gi-mk--c,
:root[data-theme="light"] .gi-nm--r,
:root[data-theme="light"] .gi-nm--c {
    mix-blend-mode: multiply;
}

:root[data-theme="light"] .gi-wordmark .gi-inf {
    color: #1f2937;
}

:root[data-theme="light"] .gi-wordmark .gi-tag {
    color: rgba(31, 41, 55, 0.45);
}

/* Above the login, registration and verification card: scaled down so the
   logo never grows wider than the card it introduces (DocMind scales its
   own copy with a script; a smaller variant does the same job). */
.gi-logo-compact {
    gap: 12px;
    margin-bottom: 1.75rem;
}

    .gi-logo-compact .gi-mark svg {
        width: 76px;
        height: 38px;
    }

    .gi-logo-compact .gi-geek,
    .gi-logo-compact .gi-inf {
        font-size: 26px;
    }

/* The card brings its own 4rem of air; under the logo that reads as a gap. */
.gi-logo + .rag-card {
    margin-top: 0;
}

@media (max-width: 420px) {
    .gi-logo {
        gap: 12px;
    }

        .gi-logo .gi-mark svg {
            width: 80px;
            height: 40px;
        }

    .gi-wordmark .gi-geek,
    .gi-wordmark .gi-inf {
        font-size: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gi-logo.gi-glitch-on {
        animation: none !important;
    }

    .gi-mk--r,
    .gi-mk--c,
    .gi-nm--r,
    .gi-nm--c {
        display: none !important;
    }

    .gi-mark {
        animation: none;
    }

    .gi-mk-draw {
        stroke-dashoffset: 0;
        animation: none;
    }
}

.rag-landing-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid var(--border);
}

.rag-landing-brand {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}

    .rag-landing-brand:hover {
        text-decoration: none;
        color: var(--text);
    }

.rag-landing-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Logout confirmation - Yes / No side by side */
.rag-logout-actions {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
}

    /* Both buttons are as tall as the taller one - "Nein, angemeldet
       bleiben" needs two lines in German - with their text centred inside
       rather than sitting at the top. */
    .rag-logout-actions .rag-button,
    .rag-logout-actions .rag-btn-outline {
        flex: 1 1 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

.rag-btn-outline {
    display: inline-block;
    padding: 0.55rem 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    background-color: transparent;
}

    /* A row of form fields with a button in it (the token report's
       filters): every control gets ONE height. Left to themselves they
       differ - with Bootstrap a date input is 45.6 high, a select 44.8 -
       so a button matched to one was always a pixel off the other. The
       text stays centred (inputs pad themselves; the button centres its
       label with flex). */
    .rag-field-row input,
    .rag-field-row select,
    .rag-field-row .rag-btn-field {
        box-sizing: border-box;
        height: 2.8rem;
    }

    .rag-btn-outline.rag-btn-field {
        display: inline-flex;
        align-items: center;
        padding: 0 1rem;
        font-size: 0.95rem;
    }

    .rag-btn-outline:hover {
        border-color: var(--accent);
        color: var(--accent);
        text-decoration: none;
    }

.rag-landing-cta-button {
    width: auto;
    display: inline-block;
    padding: 0.55rem 1.1rem;
}

.rag-landing-hero {
    position: relative;
    padding: 7rem 2rem 5rem;
    overflow: hidden;
    background: radial-gradient( 60% 50% at 85% 15%, rgba(var(--accent-rgb), 0.18), transparent 70% ), radial-gradient( 50% 40% at 100% 40%, rgba(var(--success-rgb), 0.12), transparent 70% );
}

.rag-landing-hero-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

    .rag-landing-hero-inner h1 {
        font-size: 3.75rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1.08;
        color: var(--text);
        margin-bottom: 1.5rem;
    }

.rag-landing-subheadline {
    font-size: 1.25rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin-bottom: 2.5rem;
}

/* The "Imagine this" story in the hero (Home.razor) */
.rag-landing-story {
    max-width: 760px;
    margin: 0 auto;
}

    .rag-landing-story .rag-landing-subheadline {
        font-size: 1.15rem;
        margin-bottom: 1.2rem;
    }

    .rag-landing-story .rag-landing-subheadline:last-child {
        margin-bottom: 2.5rem;
    }

.rag-landing-cta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
}

@media (max-width: 640px) {
    .rag-landing-hero-inner h1 {
        font-size: 2.5rem;
    }
}

html {
    scroll-behavior: smooth;
}

.rag-landing-features {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 2rem 6rem;
}

.rag-landing-features-intro {
    max-width: 620px;
    margin: 0 auto 3rem;
    text-align: center;
}

    .rag-landing-features-intro h2 {
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 0.75rem;
    }

    .rag-landing-features-intro p {
        color: var(--text-muted);
        font-size: 1rem;
        margin: 0;
    }

.rag-landing-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.rag-feature-card {
    padding: 1.5rem;
}

/* Learn-more page (Features.razor): benefits grid, how-it-works, CTA */
.rag-features-hero .rag-landing-hero-inner h1 {
    font-size: 2.4rem;
}

.rag-features-kicker {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.rag-benefits-grid {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
    .rag-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .rag-benefits-grid {
        grid-template-columns: 1fr;
    }
}

/* A benefit card is a <button> (click opens its detail dialog): reset the
   button look, keep the card look, add a hover lift and a "Details ->" hint. */
.rag-benefit-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    width: 100%;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

    .rag-benefit-card:hover,
    .rag-benefit-card:focus-visible {
        transform: translateY(-2px);
        border-color: var(--accent);
        outline: none;
    }

.rag-benefit-more {
    margin-top: auto;
    padding-top: 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
}

/* The four story dialogs (Features.razor): the benefit dialog, wider, so
   the four- and five-panel comic strips fit in one row. */
.rag-benefit-dialog.rag-story-dialog {
    width: min(980px, calc(100vw - 2rem));
}

.rag-story-dialog-body .rag-story-dialog-lead {
    max-width: 720px;
    margin: 0 auto 1.6rem;
    text-align: center;
}

.rag-story-dialog-body .rag-pop-board {
    margin-bottom: 0.5rem;
}

.rag-story-dialog-body .rag-section-then,
.rag-story-dialog-body .rag-section-after,
.rag-story-dialog-body .rag-lab-intro {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.rag-story-dialog-body .rag-can-list,
.rag-story-dialog-body .rag-who-list,
.rag-story-dialog-body .rag-lab-rules-h {
    max-width: 720px;
}

/* Detail dialog: native <dialog>, one per benefit (benefit-dialog.js). */
.rag-benefit-dialog {
    width: min(640px, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

    .rag-benefit-dialog::backdrop {
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(2px);
    }

.rag-benefit-dialog-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.4rem 1.6rem 0.6rem;
}

    .rag-benefit-dialog-head .rag-benefit-icon {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .rag-benefit-dialog-head h2 {
        margin: 0;
        font-size: 1.35rem;
        font-weight: 600;
        flex: 1;
    }

.rag-benefit-dialog-close {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 8px;
}

    .rag-benefit-dialog-close:hover {
        color: var(--text);
        background: rgba(var(--accent-rgb), 0.12);
    }

.rag-benefit-dialog-body {
    padding: 0.4rem 1.6rem 0.6rem;
}

    .rag-benefit-dialog-body p {
        color: var(--text-muted);
        line-height: 1.6;
        margin: 0 0 0.9rem;
    }

    .rag-benefit-dialog-body h3 {
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--accent);
        margin: 1.2rem 0 0.6rem;
    }

    .rag-benefit-dialog-body ul {
        margin: 0;
        padding-left: 1.2rem;
        color: var(--text);
        line-height: 1.7;
    }

.rag-benefit-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.8rem 1.6rem 1.4rem;
}

    .rag-benefit-dialog-actions .rag-button {
        width: auto;
        padding: 0.55rem 1.2rem;
    }

.rag-benefit-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.9rem;
    border-radius: 10px;
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
}

.rag-hiw {
    padding-top: 0;
}

/* How-it-works diagram (HowItWorks.razor): two rows of boxes joined by
   arrows, an answer box at the bottom. Plain HTML/CSS so the labels are
   ui_translations keys and the colours follow the theme. */
.rag-flow {
    margin: 0 auto 2.5rem;
    max-width: 820px;
    padding: 1.5rem 1.25rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.rag-flow-stage {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.6rem;
}

.rag-flow-row {
    display: grid;
    grid-template-columns: 1fr 34px 1fr 34px 1fr;
    align-items: center;
    gap: 0.4rem;
}

.rag-flow-row-final {
    grid-template-columns: 1fr;
    justify-items: center;
}

.rag-flow-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.75rem 0.6rem;
    border-radius: 8px;
    border: 1px solid;
    min-height: 66px;
    justify-content: center;
}

    .rag-flow-box strong {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text);
    }

    .rag-flow-box span {
        font-size: 0.8rem;
        color: var(--text-muted);
        margin-top: 0.15rem;
    }

.rag-flow-prep {
    background: rgba(46, 160, 90, 0.12);
    border-color: rgba(46, 160, 90, 0.55);
}

.rag-flow-ask {
    background: rgba(var(--accent-rgb), 0.12);
    border-color: rgba(var(--accent-rgb), 0.55);
}

.rag-flow-final {
    background: rgba(var(--accent-rgb), 0.06);
    border-color: var(--border);
    min-width: min(320px, 100%);
}

/* Arrows: a line with a triangular head, drawn with borders only. */
.rag-flow-arrow {
    position: relative;
    height: 2px;
    background: var(--text-muted);
    opacity: 0.6;
}

    .rag-flow-arrow::after {
        content: "";
        position: absolute;
        right: -1px;
        top: -5px;
        border-left: 8px solid var(--text-muted);
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
    }

.rag-flow-down {
    position: relative;
    width: 2px;
    height: 34px;
    margin: 0.4rem auto;
    background: var(--text-muted);
    opacity: 0.6;
}

    .rag-flow-down::after {
        content: "";
        position: absolute;
        bottom: -1px;
        left: -5px;
        border-top: 8px solid var(--text-muted);
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
    }

.rag-flow figcaption {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.rag-hiw-sections {
    max-width: 720px;
    margin: 0 auto;
    display: grid;
    gap: 1.5rem;
}

    .rag-hiw-section h3 {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 0.4rem;
    }

    .rag-hiw-section p {
        color: var(--text-muted);
        line-height: 1.6;
        margin: 0;
    }

.rag-features-cta {
    padding-top: 0;
}

/* Full section width - the same outer edges as the card grids above it. */
.rag-features-cta-card {
    margin: 0;
    text-align: center;
    padding: 2rem;
}

    .rag-features-cta-card p {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    .rag-features-cta-card h2 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .rag-features-cta-card p {
        color: var(--text-muted);
    }

    .rag-features-cta-card .rag-landing-cta-row {
        justify-content: center;
        margin: 1.25rem 0;
    }

/* Plan cards on the landing page (Home.razor, anonymous) - the four paid
   tiers from subscription_tiers/tier_taglines, mirroring DocMind's
   pricing.php: name, price, tagline, three limits, CTA. */
.rag-pricing-trial {
    margin-top: 0.75rem !important;
    font-size: 0.9rem !important;
    color: var(--accent) !important;
}

.rag-pricing-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    align-items: stretch;
}

.rag-pricing-card {
    display: flex;
    flex-direction: column;
}

    .rag-pricing-card h3 {
        margin-bottom: 0.25rem;
    }

.rag-pricing-price {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.75rem;
    font-variant-numeric: tabular-nums;
}

    .rag-pricing-price small {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-muted);
    }

/* The tagline takes the card's spare height (not the limits list), so
   the divider above the limits sits at the same height in every card
   however many lines a tagline runs to. */
.rag-pricing-tagline {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    flex: 1;
}

    .rag-pricing-tagline p {
        margin: 0;
    }

.rag-pricing-limits {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0.75rem 0 0;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
}

    .rag-pricing-limits li {
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.3rem 0;
        color: var(--text-muted);
    }

    .rag-pricing-limits strong {
        color: var(--text);
        font-weight: 600;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

.rag-pricing-cta {
    display: block;
    text-align: center;
    margin-top: auto;
}

    .rag-feature-card h3 {
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 0.5rem;
    }

    .rag-feature-card p {
        color: var(--text-muted);
        font-size: 0.9rem;
        line-height: 1.5;
        margin: 0;
    }

/* Learn-more page, story sections (Features.razor, 2026-09-22) */
.rag-section {
    padding-top: 1rem;
}

    .rag-section .rag-landing-features-intro {
        margin-bottom: 2rem;
    }

.rag-section-then,
.rag-section-after {
    max-width: 680px;
    margin: 1.6rem auto 1.2rem;
    text-align: center;
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 600;
}

.rag-section-after {
    margin-top: 1.6rem;
    color: var(--text-muted);
    font-weight: 400;
}

.rag-two-options {
    max-width: 760px;
    margin: 0 auto;
    grid-template-columns: repeat(2, 1fr);
}

.rag-option-card {
    position: relative;
    padding-left: 4rem;
}

.rag-option-number {
    position: absolute;
    left: 1.25rem;
    top: 1.3rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.14);
    color: var(--accent);
    font-weight: 700;
}

.rag-who-list {
    max-width: 680px;
    margin: 1.6rem auto 0;
    padding-left: 1.4rem;
    color: var(--text);
    line-height: 1.7;
}

.rag-can-list {
    max-width: 760px;
    margin: 1.6rem auto 0;
    padding-left: 1.6rem;
    display: grid;
    gap: 0.7rem;
    color: var(--text);
}

    .rag-can-list li {
        line-height: 1.55;
    }

    .rag-can-list strong {
        display: block;
        font-weight: 600;
    }

    .rag-can-list span {
        color: var(--text-muted);
    }

.rag-lab-intro {
    margin-top: 0;
    margin-bottom: 1.8rem;
}

.rag-lab-rules-h {
    max-width: 680px;
    margin: 2rem auto 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}

.rag-lab-rules {
    margin-top: 0;
    color: var(--text-muted);
}

/* Pop-art strips - the article's comic illustrations, drawn in CSS:
   a cream board with a hard shadow, coloured halftone panels with a
   speech bubble, a bold label under each. Fixed colours on purpose - it
   is an illustration, printed the same in both themes. */
.rag-pop-board {
    --pop-ink: #111;
    display: grid;
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 1.6rem 1.4rem 1.2rem;
    background: #f3eee2;
    border: 3px solid var(--pop-ink);
    border-radius: 6px;
    box-shadow: 7px 7px 0 var(--pop-ink);
}

.rag-pop-4 {
    grid-template-columns: repeat(4, 1fr);
}

.rag-pop-3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 760px;
}

.rag-pop-5 {
    grid-template-columns: repeat(5, 1fr);
}

.rag-pop-cell {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.rag-pop-panel {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    padding: 2.8rem 0.6rem 0.8rem;
    border: 3px solid var(--pop-ink);
    background-color: var(--pop);
    background-image: radial-gradient(rgba(0, 0, 0, 0.22) 1.3px, transparent 1.5px);
    background-size: 9px 9px;
}

.rag-pop-yellow {
    --pop: #f7c600;
}

.rag-pop-blue {
    --pop: #2b5bd7;
}

.rag-pop-red {
    --pop: #d61f3a;
}

.rag-pop-bubble {
    position: absolute;
    top: -0.9rem;
    left: 50%;
    transform: translateX(-50%);
    max-width: 94%;
    padding: 0.28rem 0.55rem;
    background: #fff;
    border: 3px solid var(--pop-ink);
    border-radius: 8px;
    color: var(--pop-ink);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.15;
    width: max-content;
}

    .rag-pop-bubble::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -8px;
        width: 10px;
        height: 10px;
        margin-left: -5px;
        background: #fff;
        border-right: 3px solid var(--pop-ink);
        border-bottom: 3px solid var(--pop-ink);
        transform: rotate(45deg);
    }

.rag-pop-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 3px solid var(--pop-ink);
    padding: 0.5rem;
}

    .rag-pop-icon svg {
        width: 64px;
        height: 64px;
        display: block;
    }

.rag-pop-label {
    text-align: center;
    color: var(--pop-ink);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.25;
}

.rag-pop-banner {
    grid-column: 1 / -1;
    padding: 0.6rem 0.8rem;
    border: 3px solid var(--pop-ink);
    text-align: center;
    font-weight: 900;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.3;
}

.rag-pop-banner-red {
    background: #d61f3a;
    color: #fff;
}

.rag-pop-banner-yellow {
    background: #f7c600;
    color: var(--pop-ink);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

    .rag-pop-banner-yellow span {
        font-size: 0.75rem;
        font-weight: 700;
    }

@media (max-width: 760px) {
    .rag-pop-4,
    .rag-pop-5 {
        grid-template-columns: repeat(2, 1fr);
    }

    .rag-pop-3 {
        grid-template-columns: 1fr;
    }

    .rag-pop-board {
        box-shadow: 5px 5px 0 var(--pop-ink);
    }

    .rag-two-options {
        grid-template-columns: 1fr;
    }


    .rag-flow-row {
        grid-template-columns: 1fr;
    }

    .rag-flow-arrow {
        width: 2px;
        height: 22px;
        margin: 0 auto;
    }

        .rag-flow-arrow::after {
            right: auto;
            top: auto;
            bottom: -1px;
            left: -5px;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 8px solid var(--text-muted);
            border-bottom: none;
        }
}

/* =============================================================================
   6-digit verification code entry - VerifyEmail.razor (otp-input.js,
   interactive) and the TOTP step of Login.razor (otp-static.js, static
   SSR). Same visual language as DocMind's login.php code row: 46x56
   boxes, radius 12, tabular digits, accent caret, shake on a wrong code.
   ========================================================================== */

.rag-otp-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 6px 0 4px;
}

.rag-otp-box {
    width: 46px;
    height: 56px;
    padding: 0;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    caret-color: var(--accent);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .rag-otp-box:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
    }

.rag-otp-shake {
    animation: rag-otp-shake 0.34s;
}

@keyframes rag-otp-shake {
    10%, 90% { transform: translateX(-2px); }
    30%, 70% { transform: translateX(5px); }
    50%      { transform: translateX(-7px); }
}

/* Recovery-code entry on the same step (XXXXX-XXXXX). */
.rag-recovery-input {
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

/* =============================================================================
   Auth pages (Login/Register/VerifyEmail) - full-page, no sidebar. A soft
   diagonal color-blur corner accent in our own gradient, not a
   reproduction of any third party's artwork.
   ========================================================================== */

.rag-auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    background-color: var(--bg);
}

    .rag-auth-page::before {
        content: "";
        position: absolute;
        top: -25%;
        right: -25%;
        width: 75%;
        height: 150%;
        background: linear-gradient( 135deg, rgba(var(--accent-rgb), 0.35), rgba(var(--success-rgb), 0.22) 45%, transparent 75% );
        filter: blur(70px);
        transform: rotate(-18deg);
        pointer-events: none;
    }

    .rag-auth-page .rag-card {
        margin: 0;
        position: relative;
        z-index: 1;
    }

/* =============================================================================
   Blazor's enhanced navigation sets tabindex="-1" and focuses the page's
   main heading after each in-page navigation (for screen-reader
   announcement). The browser's default focus outline on that element
   renders as a stepped/staircase shape when the heading text wraps across
   multiple lines - same behavior in every browser, since it follows the
   CSS outline spec for wrapped inline content. Suppressed here for that
   specific programmatic-focus case only; real keyboard Tab navigation
   still gets a visible focus ring everywhere else.
   ========================================================================== */

[tabindex="-1"]:focus {
    outline: none;
}

/* =============================================================================
   Formerly: authenticated dashboard overview (Home.razor, Authorized
   branch) - lorem-ipsum placeholder "Today"/"Your overview" content.
   That markup was replaced 2026-09-21 by the real widget dashboard
   (<Dashboard /> - see its own file header), so the classes below are
   currently unused dead CSS. Left in place rather than deleted, since
   removing CSS rules wasn't asked for and isn't this change's scope.
   ========================================================================== */

.rag-dashboard-header {
    margin: 2rem 0 1rem;
}

    .rag-dashboard-header:first-child {
        margin-top: 0;
    }

    .rag-dashboard-header h1 {
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--text);
        margin: 0;
    }

    .rag-dashboard-header h2 {
        font-size: 1.35rem;
        font-weight: 700;
        color: var(--text);
        margin: 0;
    }

.rag-dashboard-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
}

.rag-dashboard-stat {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.rag-dashboard-stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.rag-dashboard-stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
}

.rag-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.rag-dashboard-card {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.rag-dashboard-card-title {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.rag-dashboard-card-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text);
}

.rag-dashboard-card-subtext {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* =============================================================================
   App shell (MainLayout.razor) - top bar + hamburger menu, no persistent
   sidebar. Self-contained here; does not depend on the old
   NavMenu.razor.css sidebar classes, which are unused now.
   ========================================================================== */

.rag-app-shell {
    min-height: 100vh;
    background-color: var(--bg);
    display: flex;
    flex-direction: column;
}

    .rag-app-shell > .rag-app-content {
        width: 100%;
        flex: 1;
    }

/* The bar stays put while the page scrolls (2026-09-23): on a long list -
   the library, a chat with history - the hamburger scrolled out of reach,
   and it is the only way to navigate anywhere. Sticky rather than fixed,
   so the bar keeps its place in the flow and no page below has to leave
   room for it. The background is opaque because the content scrolls
   underneath; z-index 35 puts it over page-level dropdowns (30) but under
   the hamburger panel (40) and the modals (50). */
.rag-app-topbar {
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 35;
    background-color: var(--bg);
}

/* The bar spans the window; the row inside it lines up with the content
   column below. The row used to BE the bar, with "margin: 0 auto" for
   the centring - but auto margins on a flex item cancel the stretch, so
   the bar was only as wide as the four buttons and the rule below it
   stopped short of the page edge. */
.rag-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
}

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

/* Hamburger and the name of whoever is signed in, as one group on the left. */
.rag-topbar-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.rag-topbar-user {
    color: var(--text-muted);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The same line inside the menu panel, where it may wrap. */
.rag-hamburger-user {
    margin: -0.75rem 0 1rem;
    padding: 0 0.25rem 0.9rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.rag-app-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
}

.rag-hamburger-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    color: var(--text);
    font-size: 1.1rem;
    line-height: 1;
}

    .rag-hamburger-btn:hover {
        border-color: var(--accent);
    }

.rag-hamburger-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 40;
}

.rag-hamburger-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    background-color: var(--surface);
    border-right: 1px solid var(--border);
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.2);
    z-index: 41;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1rem;
    overflow-y: auto;
}

.rag-hamburger-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding: 0 0.25rem;
}

.rag-hamburger-brand {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.rag-hamburger-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    line-height: 1;
}

    .rag-hamburger-close:hover {
        color: var(--text);
    }

.rag-hamburger-items {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.rag-hamburger-item {
    display: block;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.95rem;
}

a.rag-hamburger-item:hover {
    background-color: rgba(var(--accent-rgb), 0.1);
    text-decoration: none;
}

.rag-hamburger-item-disabled {
    color: var(--text-muted);
    cursor: default;
}

.rag-hamburger-divider {
    height: 1px;
    background-color: var(--border);
    margin: 0.6rem 0.25rem;
}

.rag-hamburger-item-button {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

    .rag-hamburger-item-button:hover {
        background-color: rgba(var(--accent-rgb), 0.1);
    }

.rag-hamburger-back {
    font-weight: 600;
}

/* =============================================================================
   AI Instructions page (AiInstructions.razor, admin-only).
   ========================================================================== */

.rag-ai-instructions-card {
    padding: 1.5rem;
    max-width: 900px;
}

/* The account page stacks its cards directly one below the other; without
   a gap their borders touched (2026-09-29). */
.rag-account-page > .rag-surface + .rag-surface {
    margin-top: 1.5rem;
}

.rag-ai-instructions-textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    resize: vertical;
    margin-bottom: 1rem;
}

    .rag-ai-instructions-textarea:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
    }

.rag-ai-instructions-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.rag-ai-instructions-save {
    width: auto;
    padding: 0.6rem 1.2rem;
}

.rag-ai-instructions-lastedited {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.rag-access-denied {
    padding: 2rem;
    color: var(--text-muted);
}

.rag-ai-instructions-archive {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rag-ai-instructions-archive-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.rag-ai-instructions-archive-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.rag-ai-instructions-archive-date {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.rag-ai-instructions-archive-preview {
    font-size: 0.9rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rag-ai-instructions-restore {
    width: auto;
    flex-shrink: 0;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
}

/* =============================================================================
   API Keys page (ApiKeys.razor, admin-only).
   ========================================================================== */

.rag-apikeys-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent);
    margin: 1.75rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}

    .rag-apikeys-section-title:first-of-type {
        margin-top: 0;
    }

.rag-apikeys-current {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
}

.rag-apikeys-test-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.rag-apikeys-test-ok {
    color: var(--success);
    font-size: 0.85rem;
    font-weight: 600;
}

.rag-apikeys-test-fail {
    color: var(--danger);
    font-size: 0.85rem;
    font-weight: 600;
}

.rag-apikeys-footnote {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 1.5rem;
}

/* =============================================================================
   Email dispatch page (EmailDispatch.razor, admin-only) and shared form
   pieces (select styling, hint text) also used by Upload Limits.
   Table itself uses its own rag-smtp-table-* classes (same values as
   rag-tiers-table-*), the edit modal reuses the shared .rag-modal-* rules
   from the Subscription tiers block below.
   ========================================================================== */

.rag-smtp-hint {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
}

.rag-form-group select {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.95rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .rag-form-group select:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
    }

.rag-smtp-table-wrap {
    overflow-x: auto;
    margin: 1.25rem 0;
}

.rag-smtp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

    .rag-smtp-table th {
        text-align: left;
        padding: 0.5rem 0.5rem;
        color: var(--text-muted);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }

/* Clickable, sortable column headers - used by Texts.razor's Key/Text/
   Location columns. Purely a cursor + hover cue; the ▲/▼ sort indicator
   itself is rendered as text by the component, not CSS. */
/* Texts admin page - language tabs, missing markers, reference column */
.rag-texts-langbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}

.rag-texts-langtab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: none;
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
}

    .rag-texts-langtab:hover {
        border-color: var(--accent);
    }

    .rag-texts-langtab.rag-texts-langtab-active {
        border-color: var(--accent);
        background: rgba(var(--accent-rgb), 0.12);
        font-weight: 600;
    }

.rag-texts-missing-count {
    min-width: 1.4em;
    padding: 0 0.35em;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
}

.rag-texts-only-missing {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.rag-texts-missing-badge {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(220, 38, 38, 0.12);
    color: var(--danger);
    font-size: 0.75rem;
    font-weight: 600;
}

.rag-texts-reference {
    max-width: 22rem;
}

.rag-sortable-th {
    cursor: pointer;
    user-select: none;
}

    .rag-sortable-th:hover {
        color: var(--text);
    }

/* Forces a row's action buttons (e.g. Texts.razor's Edit/Delete) onto one
   line side by side - plain inline-block buttons wrap onto separate lines
   once the table column is too narrow to fit both. */
.rag-table-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

    .rag-table-actions .rag-button,
    .rag-table-actions .rag-btn-outline {
        white-space: nowrap;
    }

/* Deadlines' own Actions column can hold up to 6 buttons (Download,
   Done, Set date, Invite, Dismiss, Delete) - too many for one line
   even with wrapping allowed (that just wraps unevenly). A clean
   vertical stack instead of fighting .rag-table-actions's own
   nowrap design with an inline override. */
.rag-dl-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

    .rag-dl-actions .rag-btn-outline {
        width: auto;
        white-space: nowrap;
    }

.rag-dl-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 1rem 0;
}

    .rag-dl-filters select,
    .rag-dl-filters input[type="search"] {
        padding: 0.5rem 0.75rem;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
    }

.rag-smtp-table td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--border);
}

.rag-smtp-add {
    width: auto;
    display: inline-block;
    margin-bottom: 1rem;
}

.rag-smtp-edit {
    width: auto;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
}

/* =============================================================================
   User Management page (UserManagement.razor, admin-only). Table itself
   reuses .rag-smtp-table-*; modals reuse .rag-modal-* (see the Subscription
   tiers block below). These are just the page-specific toolbar/cell bits.
   ========================================================================== */

.rag-usermgmt-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    flex-wrap: wrap;
}

.rag-usermgmt-search {
    flex: 1 1 260px;
    padding: 0.65rem 0.85rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.95rem;
}

.rag-usermgmt-count {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.rag-usermgmt-create {
    width: auto;
    white-space: nowrap;
}

.rag-usermgmt-user-name {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.rag-usermgmt-you-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background-color: rgba(var(--accent-rgb), 0.15);
    color: var(--accent);
}

.rag-usermgmt-user-email {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.rag-usermgmt-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.rag-usermgmt-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

/* Two-column detail dialog (Overview/Consents/Account/Limits/Activity),
   overriding .rag-modal's single-column card for this one dialog only -
   deliberately its own class, not a variant of .rag-modal, since the
   layout (fixed-width sidebar + flexible content pane) is structurally
   different, not just a style tweak. */
.rag-usermgmt-detail-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    display: flex;
    width: min(760px, 92vw);
    max-height: 85vh;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.rag-usermgmt-detail-sidebar {
    flex: 0 0 220px;
    background-color: var(--surface-alt, rgba(255, 255, 255, 0.03));
    border-right: 1px solid var(--border);
    padding: 1.5rem 0;
    overflow-y: auto;
}

.rag-usermgmt-detail-header {
    padding: 0 1.25rem 1.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.75rem;
}

.rag-usermgmt-detail-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
}

.rag-usermgmt-tab-list {
    display: flex;
    flex-direction: column;
}

.rag-usermgmt-tab-item {
    text-align: left;
    background: none;
    border: none;
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 0;
}

    .rag-usermgmt-tab-item:hover {
        color: var(--text);
        background-color: rgba(255, 255, 255, 0.04);
    }

    .rag-usermgmt-tab-item.active {
        color: var(--text);
        font-weight: 600;
        background-color: rgba(var(--accent-rgb), 0.12);
        border-left: 2px solid var(--accent);
    }

.rag-usermgmt-detail-content {
    position: relative;
    flex: 1 1 auto;
    padding: 1.5rem 1.75rem;
    overflow-y: auto;
}

.rag-usermgmt-close-btn {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem;
}

    .rag-usermgmt-close-btn:hover {
        color: var(--text);
    }

.rag-usermgmt-detail-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

    .rag-usermgmt-detail-row span:first-child {
        color: var(--text-muted);
    }

.rag-usermgmt-consent-entry {
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}

.rag-usermgmt-note {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* =============================================================================
   Subscription tiers page (SubscriptionTiers.razor, admin-only).
   ========================================================================== */

.rag-tiers-mode-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-right: 0.5rem;
    border: 1px solid;
}

.rag-tiers-mode-test {
    color: var(--text-muted);
    border-color: var(--border);
}

.rag-tiers-mode-live {
    color: var(--danger);
    border-color: var(--danger);
}

.rag-tiers-table-wrap {
    overflow-x: auto;
    margin: 1.25rem 0;
}

/* The trial gets its own card above the paid plans: duration on the left,
   its limits on the right - it is not a purchasable plan. */
.rag-tiers-trial-card {
    margin: 1.25rem 0 2rem;
    padding: 1.25rem 1.5rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(var(--accent-rgb), 0.05);
}

    .rag-tiers-trial-card .rag-tiers-trial-card-title {
        margin-top: 0;
    }

    .rag-tiers-trial-card > .rag-subtitle {
        margin: -0.25rem 0 1.25rem;
    }

.rag-tiers-trial-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 2.5rem;
    margin-bottom: 1rem;
}

.rag-tiers-trial-days {
    width: 160px;
    margin-bottom: 0;
}

/* The basis makes the limits drop below the day count instead of being
   squeezed into the 40px left over on a phone. */
.rag-tiers-trial-limits {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.rag-tiers-trial-limits-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
}

    .rag-tiers-trial-limits-label {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text);
    }

.rag-tiers-trial-limits-values {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

    .rag-tiers-trial-limits-values strong {
        color: var(--text);
        font-variant-numeric: tabular-nums;
    }

.rag-tiers-trial-edit {
    margin-left: auto;   /* pushes it to the card's right edge */
    flex-shrink: 0;
}

/* The table's outer columns get the same inset as the trial card above it,
   so names line up on the left and the Edit buttons on the right. */
.rag-tiers-table th:first-child,
.rag-tiers-table td:first-child {
    padding-left: 1.5rem;
}

.rag-tiers-table th:last-child,
.rag-tiers-table td:last-child {
    padding-right: 1.5rem;
    text-align: right;
}

.rag-tiers-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

    .rag-tiers-table th {
        text-align: left;
        padding: 0.5rem 0.5rem;
        color: var(--text-muted);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }

    .rag-tiers-table td {
        padding: 0.4rem 0.5rem;
        border-bottom: 1px solid var(--border);
    }

.rag-tiers-input {
    width: 100%;
    min-width: 90px;
    padding: 0.4rem 0.5rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.85rem;
}

    .rag-tiers-input:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.15);
    }

.rag-tiers-input-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    min-width: 140px;
}

.rag-tiers-input-number {
    min-width: 70px;
    text-align: right;
}

.rag-tiers-checkbox-cell {
    text-align: center;
}

.rag-tiers-remove {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.3rem 0.5rem;
}

    .rag-tiers-remove:hover {
        color: var(--danger);
        border-color: var(--danger);
    }

.rag-tiers-add {
    width: auto;
    display: inline-block;
    margin-bottom: 1rem;
}

.rag-tiers-edit {
    width: auto;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
}

/* =============================================================================
   Edit/Add tier modal (SubscriptionTiers.razor).
   ========================================================================== */

.rag-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 50;
}

.rag-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(480px, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    padding: 1.5rem;
    z-index: 51;
}

.rag-modal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.rag-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.5rem;
}

.rag-modal-remove {
    margin-right: auto;
    color: var(--danger);
    border-color: var(--danger);
}

.rag-modal-save {
    width: auto;
    padding: 0.55rem 1.2rem;
}

/* =============================================================================
   Mobile optimization - single consolidated breakpoint, applies across
   every page. Fixes the specific places that could push a narrow phone
   viewport wider than the screen (making the whole page swipeable
   sideways): the 6-box OTP row, card/panel padding, and the tier-edit
   modal's 3-column grid. The tiers table's own horizontal scroll
   (.rag-tiers-table-wrap) is deliberately left alone - it is a bounded,
   self-contained scroll area for a genuinely wide data table, not page-
   level overflow.
   ========================================================================== */

@media (max-width: 480px) {
    /* "Allgemeine Geschaeftsbedingungen" is one word wider than a phone's
       text column; lang="de" is set, so the browser hyphenates it properly
       rather than letting it hang over the edge. */
    h1,
    h2,
    h3 {
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .rag-legal-page h1 {
        font-size: 1.5rem;
    }

    /* Side by side, "Nein, angemeldet bleiben" needs three lines and makes
       both buttons 84px tall. Stacked they read as what they are: the
       answer, and the way back. */
    .rag-logout-actions {
        flex-direction: column;
    }

    .rag-auth-page {
        padding: 1rem;
    }

    .rag-card {
        max-width: 100%;
        padding: 1.5rem;
    }

    .rag-otp-row {
        gap: 0.4rem;
    }

    .rag-otp-box {
        width: 38px;
        height: 48px;
        font-size: 1.25rem;
    }

    .rag-app-content {
        padding: 1rem;
    }

    .rag-topbar-inner {
        padding: 0.75rem 1rem;
    }

    .rag-topbar-user {
        display: none;
    }

    .rag-hamburger-panel {
        width: min(280px, 85vw);
    }

    .rag-help-panel {
        width: 100vw;
        padding: 1rem 1rem 2rem;
    }

    .rag-help-marker {
        width: 26px;
        height: 26px;
        font-size: 0.8rem;
    }

    .rag-landing-hero {
        padding: 4rem 1rem 3rem;
    }

    .rag-landing-features {
        padding: 1rem 1rem 3rem;
    }

    .rag-dashboard-stat-row {
        gap: 1.5rem;
    }

    .rag-modal {
        padding: 1rem;
        width: calc(100vw - 1.5rem);
    }

    .rag-modal-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .rag-usermgmt-detail-modal {
        flex-direction: column;
        width: calc(100vw - 1.5rem);
        max-height: 90vh;
    }

    .rag-usermgmt-detail-sidebar {
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 1rem 0;
    }

    .rag-usermgmt-tab-list {
        flex-direction: row;
        overflow-x: auto;
    }

    .rag-usermgmt-tab-item.active {
        border-left: none;
        border-bottom: 2px solid var(--accent);
    }

    .rag-usermgmt-detail-content {
        padding: 1.25rem;
    }

    .rag-ai-instructions-archive-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .rag-ai-instructions-archive-preview {
        white-space: normal;
    }
}

@media (max-width: 360px) {
    .rag-auth-page {
        padding: 0.5rem;
    }

    .rag-card {
        padding: 1rem;
    }

    .rag-otp-row {
        gap: 0.25rem;
    }

    .rag-otp-box {
        width: 32px;
        height: 44px;
        font-size: 1.1rem;
    }
}

.rag-radio-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* ============================================================================
   WBS 3.1/3.2/2.3 redesign - Library document cards and the Upload drop
   zone, matching DocMind's own real card/chip/dropzone visual language
   (not a bare list) rather than plain rag-apikeys-row layouts.
   ============================================================================ */

.rag-doc-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    background: var(--surface);
}

.rag-doc-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.rag-doc-title {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text);
    text-decoration: none;
    margin-right: 0.25rem;
}

    .rag-doc-title:hover {
        color: var(--accent);
    }

.rag-doc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.rag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: rgba(var(--text-muted-rgb, 128, 128, 128), 0.08);
    /* Capped and breakable rather than nowrap: most tags are two words and
       stay on one line by themselves, but "English (with code comments; UI
       text via translation keys)" was 440px wide on a 375px screen. */
    max-width: 100%;
    overflow-wrap: anywhere;
}

.rag-chip-date {
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.35);
    background: rgba(var(--accent-rgb), 0.1);
}

.rag-chip-status-analyzed {
    color: var(--success);
    border-color: rgba(var(--success-rgb), 0.35);
    background: rgba(var(--success-rgb), 0.1);
}

.rag-chip-status-pending {
    color: #b58900;
    border-color: rgba(181, 137, 0, 0.35);
    background: rgba(181, 137, 0, 0.1);
}

.rag-chip-status-edited {
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.35);
    background: rgba(var(--accent-rgb), 0.1);
}

.rag-chip-status-error {
    color: var(--danger);
    border-color: rgba(var(--danger-rgb), 0.35);
    background: rgba(var(--danger-rgb), 0.1);
}

.rag-chip-category {
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.35);
    background: rgba(var(--accent-rgb), 0.1);
}

.rag-doc-summary {
    color: var(--text);
    margin: 0.4rem 0;
    line-height: 1.5;
}

.rag-doc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.4rem 0;
}

.rag-tag {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 6px;
    font-size: 0.78rem;
    background: rgba(var(--text-muted-rgb, 128, 128, 128), 0.1);
    color: var(--text-muted);
}

.rag-doc-meta {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 0.4rem;
}

.rag-library-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.rag-library-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    min-width: 0;
}

    .rag-library-tabs button {
        width: auto;
        white-space: nowrap;
        flex-shrink: 0;
    }

.rag-library-search {
    /* min-width: 220px used to be a floor the field could not go under,
       which pushed the whole header past a phone's width. As a flex basis
       it is a wish instead: the field wraps onto its own line first, and
       only then gets narrower. */
    flex: 1 1 220px;
    min-width: 0;
    max-width: 420px;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}

/* ---- Upload drop zone ---- */

.rag-dropzone {
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 3rem 1.5rem;
    text-align: center;
    position: relative;
    transition: border-color 0.15s, background 0.15s;
}

    .rag-dropzone:hover,
    .rag-dropzone.rag-dropzone-active {
        border-color: var(--accent);
        background: rgba(var(--accent-rgb), 0.04);
    }

.rag-dropzone-icon {
    font-size: 2.25rem;
    margin-bottom: 0.75rem;
    opacity: 0.85;
}

.rag-dropzone-title {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text);
    margin-bottom: 0.35rem;
}

.rag-dropzone-sub {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.rag-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.rag-upload-item {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
}

.rag-upload-summary {
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
}

    .rag-upload-summary p {
        margin: 0;
    }

.rag-upload-item-duplicate {
    border-color: var(--danger);
}

.rag-upload-duplicate-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--danger);
    background: rgba(var(--danger-rgb), 0.12);
    border: 1px solid rgba(var(--danger-rgb), 0.35);
}

.rag-upload-duplicate-message {
    color: var(--danger);
    margin: 0;
}

.rag-upload-item:last-child {
    margin-bottom: 0;
}

.rag-upload-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.rag-upload-filename {
    color: var(--accent);
    font-weight: 500;
}

.rag-upload-analyzed-title {
    color: var(--accent);
}

.rag-upload-progress-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.rag-upload-progress-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.rag-upload-progress-name {
    flex-shrink: 0;
    width: 70px;
    font-size: 0.78rem;
    color: var(--accent);
}

.rag-upload-progress-track {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgba(var(--text-muted-rgb, 128, 128, 128), 0.15);
    overflow: hidden;
}

.rag-upload-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
    transition: width 0.2s ease;
}

/* No chunk count while the AI reads a document (one request, unknown
   length): the analysis bar slides instead of standing still. */
.rag-upload-progress-fill-indeterminate {
    animation: rag-progress-slide 1.4s ease-in-out infinite;
}

@keyframes rag-progress-slide {
    0% { margin-left: 0; }
    50% { margin-left: 60%; }
    100% { margin-left: 0; }
}

.rag-doc-progress {
    margin: 0 0 1.25rem;
}

    .rag-doc-progress .rag-upload-analyzed-title {
        display: block;
        margin-bottom: 0.5rem;
    }

.rag-upload-progress-label {
    flex-shrink: 0;
    width: 92px;
    font-size: 0.78rem;
    color: var(--accent);
    white-space: nowrap;
    text-align: right;
}

.rag-upload-progress-check {
    color: var(--accent);
    font-weight: 700;
    margin-right: 0.25rem;
}

/* ============================================================================
   WBS 6.5 - Chat page layout: sidebar + main pane, message bubbles.
   ============================================================================ */

.rag-chat-layout {
    display: flex;
    gap: 1.5rem;
    height: calc(100vh - 160px);
    min-height: 500px;
}

.rag-chat-sidebar {
    width: 260px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--border);
    padding-right: 1rem;
    transition: width 0.15s ease, padding-right 0.15s ease;
}

.rag-chat-sidebar-collapsed {
    width: 0 !important;
    padding-right: 0;
    border-right: none;
}

.rag-chat-sidebar-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.rag-chat-sidebar-toggle {
    flex-shrink: 0;
    align-self: flex-start;
    width: 32px;
    height: 32px;
    margin-right: 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: none;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .rag-chat-sidebar-toggle:hover {
        border-color: var(--accent);
    }

.rag-chat-sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
}

    .rag-chat-sidebar-resize-handle:hover {
        background: rgba(var(--accent-rgb), 0.3);
    }

.rag-chat-conv-item {
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
}

    /* Title takes the whole first row so the menu button always sits at
       the right edge of the row (a long title used to push it onto its
       own line at the LEFT, where the menu - anchored right:0 to the 22px
       button - opened outside the sidebar and was clipped to a sliver). */
    .rag-chat-conv-item .rag-chat-conv-title,
    .rag-chat-conv-item > input {
        flex: 1 1 0;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .rag-chat-conv-item .rag-chat-conv-doc {
        flex-basis: 100%;
        font-size: 0.75rem;
    }

    .rag-chat-conv-item:hover {
        background: rgba(var(--text-muted-rgb, 128, 128, 128), 0.08);
    }

.rag-chat-conv-menu-wrap {
    position: relative;
    flex-shrink: 0;
}

.rag-chat-conv-menu-btn {
    width: 22px;
    height: 22px;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    font-size: 1rem;
    line-height: 1;
}

    .rag-chat-conv-menu-btn:hover {
        background: rgba(var(--text-muted-rgb, 128, 128, 128), 0.15);
        color: var(--text);
    }

.rag-chat-conv-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    min-width: 140px;
    width: max-content;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--card-shadow);
    z-index: 30;
    overflow: hidden;
}

    .rag-chat-conv-menu button {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.5rem 0.75rem;
        border: none;
        background: none;
        color: var(--text);
        font-size: 0.85rem;
        text-align: left;
        cursor: pointer;
    }

        .rag-chat-conv-menu button:hover {
            background: rgba(var(--text-muted-rgb, 128, 128, 128), 0.1);
        }

.rag-chat-conv-menu-danger {
    color: var(--danger) !important;
}

.rag-chat-conv-active {
    background: rgba(var(--accent-rgb), 0.12);
}

.rag-chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 48rem;
    margin: 0 auto;
    width: 100%;
}

.rag-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.rag-chat-message {
    margin-bottom: 1.5rem;
}

.rag-chat-message-user {
    max-width: 70%;
    margin-left: auto;
}

.rag-chat-message-assistant {
    max-width: 100%;
    margin-right: auto;
}

.rag-chat-bubble {
    white-space: pre-wrap;
    line-height: 1.6;
}

.rag-chat-message-user .rag-chat-bubble {
    padding: 0.65rem 1rem;
    border-radius: 20px;
    background: rgba(var(--text-muted-rgb, 128, 128, 128), 0.12);
}

.rag-chat-message-assistant .rag-chat-bubble {
    padding: 0;
    background: none;
}

.rag-chat-composer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.5rem 0.5rem 1.1rem;
    border-radius: 28px;
    border: 1px solid var(--border);
    background: var(--surface);
}

.rag-chat-composer-input {
    flex: 1;
    border: none;
    background: none;
    color: var(--text);
    font-size: 0.95rem;
    padding: 0.4rem 0;
}

    .rag-chat-composer-input:focus {
        outline: none;
    }

.rag-chat-composer-icon-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .rag-chat-composer-icon-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.rag-chat-mic-active {
    background: var(--danger);
}

/* Microphone and send look the same as in the app (2026-09-30, the user's
   wish): black and white, no accent colour. The microphone is only its
   line drawing in the text colour; send is a rounded square in the text
   colour with the arrow cut out in the page colour. Recording still turns
   the microphone red. */
.rag-chat-composer-icon-btn:not(.rag-chat-send-btn):not(.rag-chat-mic-active) {
    background: transparent;
    color: var(--text);
}

.rag-chat-send-btn {
    border-radius: 9px;
    background: var(--text);
    color: var(--bg);
}

.rag-chat-disclaimer {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

@media (max-width: 720px) {
    .rag-chat-layout {
        flex-direction: column;
        height: auto;
    }

    .rag-chat-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding-right: 0;
        padding-bottom: 1rem;
        max-height: 200px;
    }
}

/* ============================================================================
   Real key/value table row - "rag-apikeys-row" was being used across
   Database.razor, Deadlines.razor, Document.razor, and About.razor with
   NO actual CSS definition anywhere, so every one of those pages was
   rendering this as two stacked, unstyled block divs (label on its own
   line, value on the next) instead of a genuine table-style row. This
   is the real definition, fixing all four pages at once.
   ============================================================================ */

.rag-apikeys-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
}

    .rag-apikeys-row:last-child {
        border-bottom: none;
    }

    .rag-apikeys-row .k {
        flex-shrink: 0;
        color: var(--text-muted);
        font-size: 0.9rem;
    }

    .rag-apikeys-row .v {
        text-align: right;
        color: var(--text);
        font-weight: 500;
        word-break: break-word;
    }

/* The share dialog (2026-09-30, the user's sketch): the kinds of sharing on
   the left, the chosen one's settings on the right; a row on narrow screens. */
.rag-doc-modal.rag-share-modal {
    width: min(960px, calc(100vw - 2rem));
}

.rag-share-title {
    margin-top: 0;
    text-align: center;
}

.rag-share-layout {
    display: grid;
    grid-template-columns: minmax(180px, 240px) 1fr;
    gap: 1.25rem;
    align-items: start;
}

.rag-share-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .rag-share-nav button {
        text-align: left;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 8px;
        padding: 0.6rem 0.75rem;
        color: var(--text);
        font: inherit;
        cursor: pointer;
    }

        .rag-share-nav button:hover {
            border-color: var(--border);
        }

        .rag-share-nav button.active {
            border-color: var(--accent);
            color: var(--accent);
            font-weight: 600;
        }

.rag-share-pane {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    min-height: 320px;
    min-width: 0;
}

    .rag-share-pane h3:first-child {
        margin-top: 0;
    }

@media (max-width: 720px) {
    .rag-share-layout {
        grid-template-columns: 1fr;
    }

    .rag-share-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .rag-share-pane {
        min-height: 0;
    }
}

/* The public link page's viewer: the document below the buttons; the card
   widens once it shows something. */
.rag-card.rag-public-wide {
    width: min(960px, calc(100vw - 2rem));
    max-width: none;
    margin: 0 auto;
}

/* The auth page centres its card vertically; a card taller than the window
   then overflowed at the top, out of reach - title and buttons were gone
   after "View" (2026-09-30). With the viewer open the page starts at the
   top and the card stays centred across. */
.rag-auth-page:has(.rag-public-wide) {
    justify-content: flex-start;
    overflow: visible;
}

.rag-public-text {
    margin-top: 1rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: calc(100vh - 16rem);
    overflow: auto;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
}

.rag-public-view:empty {
    display: none;
}

.rag-public-view {
    margin-top: 1rem;
}

    .rag-public-view img {
        display: block;
        max-width: 100%;
        border-radius: 8px;
    }

    .rag-public-view iframe {
        display: block;
        width: 100%;
        height: calc(100vh - 16rem);
        min-height: 320px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: #fff;
    }

/* A share with a person: address, permission, period and state wrap on the
   left, the remove button keeps its width on the right (2026-09-30 - with the
   period chip the button was squeezed to one letter per line). */
.rag-share-row .k {
    flex-shrink: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    word-break: break-word;
}

.rag-share-row .v {
    flex-shrink: 0;
}

/* ============================================================================
   Upload success card - rich analysis details section (matches DocMind's
   own real reference card: subtitle, description, key-info table, tags,
   footer, actions). Deliberately minimal here - key-info rows reuse
   rag-apikeys-row, tags reuse rag-doc-tags/rag-tag, actions reuse
   rag-doc-actions, so only genuinely new elements get new classes.
   ============================================================================ */

.rag-upload-analysis-details {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.rag-upload-analyzed-subtitle {
    margin: 0 0 0.3rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

.rag-upload-keyinfo-table {
    margin: 0.5rem 0;
}

.rag-upload-footer-line {
    font-size: 0.78rem;
    margin-top: 0.75rem;
}

/* ============================================================================
   Document detail view rebuild - tabs, editable fields, reanalyze diff
   preview, and the two modal dialogs (share, version history). Action
   row deliberately reuses rag-btn-outline uniformly for every button -
   explicit instruction: one consistent style, none full-width.
   ============================================================================ */

.rag-doc-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.rag-doc-tab-btn {
    padding: 0.6rem 1.2rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

    .rag-doc-tab-btn.active {
        color: var(--accent);
        border-bottom-color: var(--accent);
    }

.rag-doc-detail-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.rag-doc-field {
    margin-bottom: 1rem;
}

    .rag-doc-field label {
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-muted);
        margin-bottom: 0.25rem;
    }

.rag-doc-field-hint {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

.rag-doc-input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.9rem;
}

    .rag-doc-input:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

.rag-doc-textarea {
    resize: vertical;
    font-family: inherit;
}

/* WBS 8.1 - the widget-driven usage dashboard. DocMind itself has no
   widget grid, so everything below is genuinely new.

   Went through two earlier visual directions, both now fully removed
   rather than left as dead code (unlike elsewhere in this file where
   dead CSS is kept commented as "may come back") - a flat progress
   bar, then a donut-ring gauge - before landing on plain, bigger
   numbers with no bar/chart at all (explicitly requested after seeing
   the ring). Both earlier directions were explicitly rejected, so
   there is no realistic "might come back" case to preserve them for.
   See UsageBar.razor's own header for the same history. */
.rag-usage-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rag-usage-stat-label {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rag-usage-stat-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rag-usage-color, var(--rag-accent, #6366f1));
    margin-right: 8px;
    flex-shrink: 0;
}

.rag-usage-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.15;
}

.rag-usage-stat-context {
    font-size: 13px;
    color: var(--text-muted);
}

    .rag-usage-stat-context + .rag-usage-stat-context {
        margin-top: -2px;
    }

/* Compact row list shared by the Recent Documents / Upcoming Deadlines
   / Recent Chats widgets - each just needs a title (linking to the
   real page) and one line of context underneath, so this reuses the
   same "colored dot + label" header (.rag-usage-stat-label/-dot) the
   usage widgets already use, above the list itself. */
/* Empty state of a list widget ("No upcoming deadlines." etc.): the
   shared .rag-subtitle carries a negative top margin for sitting under a
   page <h1>; inside a widget that pulled the line up into the title. */
.rag-usage-stat-label + .rag-subtitle {
    margin: 10px 0 0;
}

.rag-dashboard-widget-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rag-dashboard-widget-list-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

    .rag-dashboard-widget-list-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.rag-dashboard-widget-list-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .rag-dashboard-widget-list-title:hover {
        color: var(--rag-accent, #6366f1);
        text-decoration: underline;
    }

.rag-dashboard-widget-list-meta {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small color dot in front of an operation name in the Token Report
   table (TokenReportWidget.razor's own OperationColor helper sets
   --rag-op-color per row) - a quick visual category cue instead of
   plain text, same idea as the ring gauges' per-widget AccentColor. */
.rag-op-badge {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rag-op-color, var(--text-muted));
    margin-right: 6px;
}

/* Own class, not a change to the shared .rag-doc-card rule - only
   TokenReportWidget's table needs to scroll internally instead of
   overflowing past the widget's own box (see this widget's own file
   header for the full reasoning); the other six widget types keep
   .rag-doc-card's normal block layout untouched. */
.rag-token-report-card {
    display: flex;
    flex-direction: column;
}

/* FREEFORM CANVAS (2026-09-21) - replaced the earlier fixed 6-column
   CSS Grid. Widgets are position: absolute, placed directly by
   Dashboard.razor's own inline left/top/width/height style per
   DashboardWidgetPlacement (percent/px - see that record's own
   header). Just position: relative here, to serve as the containing
   block for those absolutely-positioned children - nothing about
   layout/packing/collision happens in CSS anymore (overlap is
   explicitly allowed, by design - see Dashboard.razor's own header),
   which is also why there is no longer any narrow-screen media query
   here: percent-based left/width are already naturally responsive to
   the container's own width at any screen size, with no breakpoint
   logic needed. min-height keeps the canvas usable (a drop target
   with real size) even before any widget makes it taller; no
   overflow rule is set (stays the default, visible), so once a
   widget's bottom edge goes past min-height the page just scrolls
   normally, rather than the canvas clipping its own content. */
.rag-dashboard-canvas {
    position: relative;
    min-height: 640px;
    margin-top: 1rem;
}

.rag-dashboard-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 1rem 0;
}

.rag-dashboard-snap-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}

/* The widget wrapper carries the actual card chrome (shadow/radius/
   hover-lift) itself, on a padding band inside the card that keeps
   the drag handle and remove button from ever colliding with the
   widget's own content:
   - the handle is a small centered grip pill, not a full-width bar -
     it doesn't reach into the top-right corner the remove button
     occupies, so the two never visually overlap
   - .rag-doc-card is reused globally by 9+ unrelated pages (Library,
     Database, Deadlines, About, ...), so none of its own base rule is
     touched here - every rule below is scoped to
     ".rag-dashboard-widget .rag-doc-card", which only ever matches a
     widget's own card, nested one level in via DynamicComponent */
.rag-dashboard-widget {
    position: absolute;
    /* left/top/width/height/z-index are ALWAYS set inline per widget
       (Dashboard.razor's own render, or dashboard-placement.js live
       during a drag) - no fallback values needed here, unlike the old
       grid-span custom properties. */
}

    /* Content must never spill past the card's own box, at any resized
   height (2026-09-21) - the same requirement TokenReportWidget's own
   .rag-token-report-card already satisfied on its own (a more
   specific flex-column layout, since it needs its filter row to stay
   fixed while only the table body scrolls - see that class's own
   comment). This rule is the universal version, applying to all
   SEVEN widget types via the shared ".rag-dashboard-widget
   .rag-doc-card" selector - simple overflow-y: auto is enough here,
   since none of the other six widgets need a "fixed header, scrolling
   body" split the way the report table does: their content is a
   single block, so the whole card scrolling as one unit is the
   correct, simplest fix. Harmless where .rag-token-report-card also
   applies (TokenReportWidget) - that widget's own flex children
   already exactly fill the card's height by design, so this
   overflow-y: auto on the outer card never actually triggers there;
   its own inner table wrapper is what scrolls. */
    .rag-dashboard-widget .rag-doc-card {
        margin-bottom: 0;
        height: 100%;
        padding-top: 30px;
        overflow-y: auto;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
        transition: box-shadow 0.15s ease, transform 0.15s ease;
    }

    .rag-dashboard-widget:not(.rag-dashboard-widget-dragging) .rag-doc-card:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
    }

.rag-dashboard-widget-handle {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 20px;
    border-radius: 6px;
    background: var(--surface-2, rgba(127, 127, 127, 0.12));
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease;
}

    /* Die Trefferflaeche reicht ueber den Chip hinaus: 56 x 44, ohne dass
       man etwas davon sieht. 44 ist das Mass, unter dem ein Fingerziel
       unzuverlaessig wird - der Chip selbst soll deshalb aber nicht
       wachsen und die Karte verdecken. */
    .rag-dashboard-widget-handle::after {
        content: "";
        position: absolute;
        top: -12px;
        bottom: -12px;
        left: -6px;
        right: -6px;
    }

    .rag-dashboard-widget-handle:hover {
        background: var(--rag-accent, #6366f1);
        color: #fff;
    }

/* Eine Sekunde gehalten: Das Widget ist jetzt verschiebbar, und sagt es.
   Gepunkteter Rahmen, damit man es auch dann sieht, wenn der Finger die
   halbe Karte verdeckt. */
.rag-dashboard-widget-armed .rag-doc-card {
    outline: 2px dotted var(--rag-accent, #6366f1);
    outline-offset: -2px;
}

    .rag-dashboard-widget-armed .rag-dashboard-widget-handle {
        background: var(--rag-accent, #6366f1);
        color: #fff;
        cursor: grabbing;
    }

.rag-dashboard-widget-remove {
    position: absolute;
    top: 2px;
    right: 6px;
    z-index: 2;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}

    .rag-dashboard-widget-remove:hover {
        background: rgba(229, 72, 77, 0.1);
        color: var(--rag-danger, #e5484d);
    }

/* The card being actively moved - in the freeform canvas it IS the
   live drop-position indicator (it follows the pointer directly, in
   real coordinates - see dashboard-placement.js's own header for why
   there is deliberately no separate ghost/placeholder element the way
   the old grid version needed one), so it gets a "lifted" look rather
   than being dimmed out of the way: a touch of scale, a stronger
   shadow, slightly reduced opacity just enough to read as "picked up"
   without losing visibility of what's actually being placed. The
   remove/resize buttons are hidden for the duration - neither is a
   meaningful action mid-drag. z-index itself is set inline by
   dashboard-placement.js (DRAGGING_Z_INDEX) so the dragged widget
   always paints above every other widget regardless of their own
   z-index, not handled here in CSS. */
.rag-dashboard-widget-dragging {
    cursor: grabbing;
}

    .rag-dashboard-widget-dragging .rag-doc-card {
        opacity: 0.92;
        transform: scale(1.02);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    }

    .rag-dashboard-widget-dragging .rag-dashboard-widget-handle {
        cursor: grabbing;
        background: var(--rag-accent, #6366f1);
        color: #fff;
    }

    .rag-dashboard-widget-dragging .rag-dashboard-widget-remove,
    .rag-dashboard-widget-dragging .rag-dashboard-widget-resize {
        display: none;
    }

/* Freeform resize handle - bottom-right corner, a small diagonal
   grip (three short lines, drawn with a repeating linear-gradient
   rather than an SVG/icon font) matching the visual language a
   native OS window-resize corner uses. touch-action: none for the
   same reason as the drag handle - without it, a touch/trackpad
   gesture can be hijacked as a page-scroll instead of reaching the
   pointer handlers in dashboard-placement.js. */
.rag-dashboard-widget-resize {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    touch-action: none;
    z-index: 2;
    background: repeating-linear-gradient( 135deg, var(--text-muted) 0, var(--text-muted) 1.5px, transparent 1.5px, transparent 5px);
    -webkit-mask: linear-gradient(135deg, transparent 45%, #000 45%);
    mask: linear-gradient(135deg, transparent 45%, #000 45%);
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.rag-dashboard-widget:hover .rag-dashboard-widget-resize,
.rag-dashboard-widget-resizing .rag-dashboard-widget-resize {
    opacity: 1;
}

/* z-index while resizing is set inline by dashboard-placement.js
   (DRAGGING_Z_INDEX), same as while moving - not handled here. */
.rag-dashboard-widget-resizing .rag-doc-card {
    outline: 2px solid var(--rag-accent, #6366f1);
    outline-offset: -2px;
}

.rag-dashboard-add-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 1rem 0;
}

    .rag-dashboard-add-picker .rag-btn-outline {
        border-radius: 999px;
        font-size: 13px;
        padding: 6px 14px;
    }

.rag-dashboard-empty {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: 12px;
}

/* Simple shimmer skeleton for a widget's loading state, replacing a
   plain "Loading..." line - see ChatsUsageWidget/StorageUsageWidget/
   TokensUsageWidget/TokenReportWidget's own _loading branch. */
.rag-skeleton-bar {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient( 90deg, var(--surface-2, rgba(127, 127, 127, 0.15)) 25%, var(--surface-3, rgba(127, 127, 127, 0.3)) 37%, var(--surface-2, rgba(127, 127, 127, 0.15)) 63%);
    background-size: 400% 100%;
    animation: rag-skeleton-shimmer 1.4s ease infinite;
}

    .rag-skeleton-bar + .rag-skeleton-bar {
        margin-top: 10px;
        width: 60%;
    }

@keyframes rag-skeleton-shimmer {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

.rag-doc-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

    .rag-doc-actions-row .rag-btn-outline {
        width: auto;
        white-space: nowrap;
    }

.rag-doc-footer-line {
    font-size: 0.78rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.rag-doc-fulltext {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.5;
    max-height: 70vh;
    overflow-y: auto;
}

.rag-doc-reanalyze-preview {
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid var(--accent);
    background: rgba(var(--accent-rgb), 0.06);
}

/* A value the analysis produced, as opposed to one a person typed (2026-10-08).
   Deliberately the brand accent and not danger/success: those two already mean
   "removed" and "added" a few rules below, in the re-analysis preview, and an
   AI-written title is neither an error nor a success. The accent-hover shade is
   used rather than --accent itself because this colours ordinary-sized text in
   an input, where #6366f1 on white falls just under the 4.5:1 contrast ratio. */
.rag-doc-value-ai {
    color: var(--accent-hover);
}

.rag-doc-source-legend {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0 0 0.75rem;
}

.rag-doc-source-legend .rag-doc-value-ai {
    font-weight: 600;
}

.rag-doc-diff-old {
    color: var(--danger);
    text-decoration: line-through;
}

.rag-doc-diff-arrow {
    margin: 0 0.4rem;
    color: var(--text-muted);
}

.rag-doc-diff-new {
    color: var(--success);
    font-weight: 600;
}

.rag-doc-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(640px, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    padding: 1.5rem;
    z-index: 51;
}

/* ============================================================================
   Chat source citation cards - matches Claude's own file-reference card
   style (icon, title + type label, an action button) rather than the
   plain unstyled tag chips used elsewhere for document tags.
   ============================================================================ */

.rag-chat-sources {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.rag-chat-source-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
}

.rag-chat-source-icon {
    flex-shrink: 0;
    color: var(--accent);
}

.rag-chat-source-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.rag-chat-source-title {
    font-size: 0.9rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rag-chat-source-ext {
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.rag-chat-source-open {
    flex-shrink: 0;
    width: auto;
    white-space: nowrap;
}

/* ============================================================================
   Lab hub + document assembly wizard.
   ============================================================================ */

.rag-lab-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: var(--text);
    cursor: pointer;
}

.rag-lab-card-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.rag-lab-card-body {
    flex: 1;
    min-width: 0;
}

.rag-lab-card-title {
    font-weight: 600;
    margin-bottom: 0.65rem;
}

.rag-lab-card-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.rag-lab-card-go {
    flex-shrink: 0;
    color: var(--accent);
    font-weight: 600;
    white-space: nowrap;
}

.rag-doc-picker-row {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

    .rag-doc-picker-row:hover {
        border-color: var(--accent);
    }

.rag-doc-picker-row-selected {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.06);
}

.rag-doc-picker-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.rag-doc-picker-row-sub {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 0.3rem;
}

.rag-da-preview-frame {
    max-height: 520px;
    overflow-y: auto;
    padding: 8px;
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.rag-da-step-intro {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.rag-da-col-label {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}

/* ==========================================================================
   The rich-text editor (self-hosted Quill, "snow" theme)

   Quill's own stylesheet paints a light editor and knows nothing about
   this application's themes. In dark mode that produced the one thing a
   theme must never produce: the application's own light text
   (#e8eaed) on a white box - unreadable (reported 2026-09-25, AI
   instructions page).

   The white came from an INLINE background:#fff on the editor container
   in four pages, which no stylesheet can override, whatever it declares.
   Those are gone; the rules below give the editor the application's own
   surface, text, border and accent - in BOTH themes, so light looks
   exactly as it did and dark follows the toggle like everything else.

   Every selector below starts with html: Quill's stylesheet is injected by
   JavaScript when the editor loads, so it arrives AFTER this file and wins
   every tie on specificity. The element selector breaks the tie without
   resorting to !important - the toolbar icons (SVG strokes and fills) were
   the rules that actually lost it.

   Used by: AI instructions, Texts, Legal texts, Tier text.
   ========================================================================== */

html .ql-toolbar.ql-snow,
html .ql-container.ql-snow {
    border-color: var(--border);
    background: var(--surface);
}

html .ql-container.ql-snow {
    color: var(--text);
}

html .ql-editor {
    color: var(--text);
}

    /* Quill's placeholder, which it paints as a ::before on the empty editor. */
    html .ql-editor.ql-blank::before {
        color: var(--text-muted);
    }

/* The toolbar's icons are SVG strokes and fills, not text - a colour alone
   would leave them invisible against a dark card. */
html .ql-snow .ql-stroke {
    stroke: var(--text);
}

html .ql-snow .ql-fill,
html .ql-snow .ql-stroke.ql-fill {
    fill: var(--text);
}

html .ql-snow .ql-picker {
    color: var(--text);
}

html .ql-snow .ql-picker-options {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--card-shadow);
}

html .ql-snow .ql-picker.ql-expanded .ql-picker-label {
    border-color: var(--border);
    color: var(--text);
}

/* Quill marks hover, focus AND active with its own fixed blue (#06c),
   which is not this application's accent and reads as a stray colour in
   either theme - focus in particular, because a toolbar button keeps it
   after every click. */
html .ql-snow.ql-toolbar button:hover .ql-stroke,
html .ql-snow.ql-toolbar button:focus .ql-stroke,
html .ql-snow.ql-toolbar button.ql-active .ql-stroke,
html .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
html .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
html .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
html .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke {
    stroke: var(--accent);
}

html .ql-snow.ql-toolbar button:hover .ql-fill,
html .ql-snow.ql-toolbar button:focus .ql-fill,
html .ql-snow.ql-toolbar button.ql-active .ql-fill,
html .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
html .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill {
    fill: var(--accent);
}

html .ql-snow.ql-toolbar button:hover,
html .ql-snow.ql-toolbar button:focus,
html .ql-snow.ql-toolbar button.ql-active,
html .ql-snow.ql-toolbar .ql-picker-label:hover,
html .ql-snow.ql-toolbar .ql-picker-item:hover,
html .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
    color: var(--accent);
}

/* The link editor Quill pops up when a link is inserted. */
html .ql-snow .ql-tooltip {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--card-shadow);
    color: var(--text);
}

    html .ql-snow .ql-tooltip input[type=text] {
        background: var(--bg);
        border: 1px solid var(--border);
        color: var(--text);
    }

html .ql-snow a {
    color: var(--accent);
}

/* The read-only rendering of a saved text, next to the editor on the legal
   texts page - same surface, so the two halves match in either theme. */
.rag-editor-preview {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
}

/* The live line under an analysis (AnalysisProgressLine, 2026-10-01): the
   step on the left, its tokens and the run's total on the right; wraps
   below each other on a narrow screen. */
.rag-analysis-progress-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.rag-analysis-progress-step {
    font-weight: 600;
    color: var(--text);
}

.rag-analysis-progress-tokens {
    font-variant-numeric: tabular-nums;
}

.rag-document-tokens {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ===========================================================================
   Protokolle (2026-10-06) - one admin area for the access log, activity,
   application log and the map of places. Tiles, one bar of chips, one line
   per entry that opens into its details, nested groups.
   =========================================================================== */

.rag-protocols-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}

.rag-protocols-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0.9rem;
    color: var(--text-muted);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

    .rag-protocols-tab:hover {
        color: var(--text);
    }

    .rag-protocols-tab.active {
        color: var(--accent);
        border-bottom-color: var(--accent);
    }

.rag-protocols-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.rag-protocols-kpi {
    display: flex;
    flex-direction: column;
    padding: 0.8rem 1rem;
}

.rag-protocols-kpi-value {
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rag-protocols-kpi-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.rag-protocols-kpi.alert .rag-protocols-kpi-value {
    color: var(--danger);
}

.rag-protocols-bar,
.rag-protocols-list,
.rag-protocols-places {
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
}

.rag-protocols-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
}

    .rag-protocols-row + .rag-protocols-row {
        margin-top: 0.6rem;
    }

.rag-protocols-row-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    min-width: 6.5rem;
}

.rag-protocols-search {
    flex: 1 1 16rem;
    min-width: 0;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.rag-protocols-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.rag-protocols-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

    .rag-protocols-chip small {
        opacity: 0.75;
        font-variant-numeric: tabular-nums;
    }

    .rag-protocols-chip.on {
        color: var(--accent);
        border-color: rgba(var(--accent-rgb), 0.5);
        background: rgba(var(--accent-rgb), 0.1);
    }

    .rag-protocols-chip.level-error.on,
    .rag-protocols-chip.level-critical.on,
    .rag-protocols-chip.level-fatal.on {
        color: var(--danger);
        border-color: rgba(var(--danger-rgb), 0.5);
        background: rgba(var(--danger-rgb), 0.1);
    }

.rag-protocols-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
}

.rag-protocols-group-order {
    display: inline-block;
    min-width: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    text-align: center;
    font-size: 0.7rem;
}

.rag-protocols-actions {
    justify-content: flex-end;
    margin-bottom: 0.6rem;
}

.rag-protocols-count {
    margin-right: auto;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.rag-protocols-line {
    border-top: 1px solid var(--border);
}

    .rag-protocols-line.error {
        box-shadow: inset 3px 0 0 var(--danger);
    }

    .rag-protocols-line.warning {
        box-shadow: inset 3px 0 0 #f08c00;
    }

.rag-protocols-line-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.4rem;
    font-size: 0.9rem;
    min-width: 0;
}

.rag-protocols-line-toggle {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex: 1 1 auto;
    min-width: 0;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rag-protocols-time {
    flex: none;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.rag-protocols-badge {
    flex: none;
    padding: 0 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.rag-protocols-line.error .rag-protocols-badge {
    color: var(--danger);
    border-color: rgba(var(--danger-rgb), 0.5);
}

.rag-protocols-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.rag-protocols-detail {
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 0;
}

.rag-protocols-link {
    flex: none;
    background: none;
    border: none;
    padding: 0;
    color: var(--accent);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}

    .rag-protocols-link:hover {
        text-decoration: underline;
    }

.rag-protocols-details {
    display: grid;
    grid-template-columns: minmax(7rem, max-content) 1fr;
    gap: 0.25rem 1rem;
    margin: 0 0 0.6rem 2.2rem;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    background: rgba(var(--accent-rgb), 0.05);
    font-size: 0.85rem;
}

    .rag-protocols-details dt {
        color: var(--text-muted);
    }

    .rag-protocols-details dd {
        margin: 0;
        overflow-wrap: anywhere;
    }

    .rag-protocols-details dt.rag-protocols-context {
        font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
        font-size: 0.8rem;
    }

.rag-protocols-minimap {
    height: 200px;
    margin: 0 0 0.6rem 2.2rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg);
}

.rag-protocols-raw {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.rag-protocols-group {
    border-top: 1px solid var(--border);
}

.rag-protocols-group-head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    width: 100%;
    padding: 0.45rem 0.4rem;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}

    .rag-protocols-group-head:hover {
        background: rgba(var(--accent-rgb), 0.05);
    }

.rag-protocols-expand-bar {
    margin-bottom: 0.4rem;
}

.rag-protocols-group-chevron {
    width: 0.8rem;
    color: var(--text-muted);
}

.rag-protocols-group-key {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.rag-protocols-group-value {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.rag-protocols-group-count {
    padding: 0 0.45rem;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.rag-protocols-group-last {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.rag-protocols-group-body {
    margin-left: 1.2rem;
}

.rag-protocols-more {
    display: flex;
    justify-content: center;
    padding-top: 0.8rem;
}

.rag-protocols-map {
    height: 420px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg);
}

.rag-protocols-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin: 0.6rem 0 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

    .rag-protocols-legend .dot {
        display: inline-block;
        width: 0.7rem;
        height: 0.7rem;
        margin-right: 0.3rem;
        border-radius: 50%;
        vertical-align: -0.05rem;
    }

    .rag-protocols-legend .dot.hour { background: #e00606; }
    .rag-protocols-legend .dot.day { background: #f08c00; }
    .rag-protocols-legend .dot.week { background: #6366f1; }
    .rag-protocols-legend .dot.older { background: #8a94a6; }

.rag-protocols-place-detail {
    margin-bottom: 1rem;
    padding: 0.8rem;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    border-radius: 8px;
}

    .rag-protocols-place-detail h2 {
        margin: 0 0 0.5rem;
        font-size: 1.05rem;
    }

.rag-protocols-attribution {
    margin: 0.8rem 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

@media (max-width: 700px) {
    .rag-protocols-line-main {
        flex-wrap: wrap;
    }

    .rag-protocols-line-toggle {
        flex-wrap: wrap;
        flex-basis: calc(100% - 2rem);
    }

    .rag-protocols-detail {
        flex-basis: 100%;
    }

    .rag-protocols-details {
        grid-template-columns: 1fr;
        margin-left: 0;
    }

    .rag-protocols-minimap {
        margin-left: 0;
    }

    .rag-protocols-map {
        height: 300px;
    }
}

/* ===========================================================================
   Usage colours (2026-10-08): green below 50 %, orange to 89 %, red from
   90 % of a limit (UsageMeter). The rows of the user dialog's "Verbrauch"
   section with a bar; the dashboard's usage figures without one.
   =========================================================================== */

.rag-usage-ok {
    --rag-usage-level: var(--success);
}

.rag-usage-warning {
    --rag-usage-level: #e07b00;
}

.rag-usage-critical {
    --rag-usage-level: var(--danger);
}

.rag-usage-list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 0.9rem 0;
}

.rag-usage-row-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    font-size: 0.9rem;
}

.rag-usage-row-label {
    color: var(--text-muted);
}

.rag-usage-row-value {
    font-variant-numeric: tabular-nums;
}

.rag-usage-row-limit {
    color: var(--text-muted);
}

.rag-usage-row-percent {
    margin-left: 0.5rem;
    color: var(--rag-usage-level, var(--text));
}

.rag-usage-row-track {
    height: 8px;
    margin-top: 0.35rem;
    border-radius: 999px;
    background: rgba(var(--text-muted-rgb, 128, 128, 128), 0.18);
    overflow: hidden;
}

.rag-usage-row-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--rag-usage-level, var(--accent));
}

.rag-usage-row-note {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.rag-usage-stat.rag-usage-ok .rag-usage-stat-value,
.rag-usage-stat.rag-usage-warning .rag-usage-stat-value,
.rag-usage-stat.rag-usage-critical .rag-usage-stat-value {
    color: var(--rag-usage-level);
}

.rag-usage-stat.rag-usage-ok .rag-usage-stat-dot,
.rag-usage-stat.rag-usage-warning .rag-usage-stat-dot,
.rag-usage-stat.rag-usage-critical .rag-usage-stat-dot {
    background: var(--rag-usage-level);
}

/* Web search switch of the chat (2026-10-10, the user's wish): red while search is off, green while it is on. */
.rag-chat-composer-icon-btn.rag-chat-web-off:not(.rag-chat-send-btn):not(.rag-chat-mic-active) {
    color: var(--danger);
}

.rag-chat-composer-icon-btn.rag-chat-web-on:not(.rag-chat-send-btn):not(.rag-chat-mic-active) {
    color: var(--success);
    background: rgba(var(--success-rgb), 0.14);
}

/* Pictures the chat drew (2026-10-10). */
.rag-chat-figure {
    margin: 0.75rem 0 0;
    max-width: 640px;
}

.rag-chat-figure img {
    width: 100%;
    height: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.rag-chat-figure figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    font-size: 0.85rem;
}

/* A file the chat made again later under the same name (2026-10-11): shown dimmed, no download. */
.rag-chat-file-replaced {
    opacity: 0.55;
}

/* Time under each question and answer of the chat (2026-10-11). */
.rag-chat-time {
    display: block;
    margin: 0.2rem 0.25rem 0;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.rag-chat-message-user .rag-chat-time {
    text-align: right;
}


/* ---------------------------------------------------------------- company area ("Business"), 2026-10-27 */
.company-frame {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px 32px;
}

.company-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 14px;
    padding: 10px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(var(--accent-rgb), 0.08);
}

.company-bar-label {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.company-bar-role {
    color: var(--accent-hover);
}

.company-bar-company {
    margin-left: auto;
    color: var(--text-muted);
}

.company-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}

.company-nav {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.company-nav-item {
    display: block;
    padding: 9px 14px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
}

.company-nav-item:hover {
    background: rgba(var(--accent-rgb), 0.1);
}

.company-nav-item.active {
    background: var(--accent);
    color: #fff;
}

.company-nav-divider {
    height: 1px;
    margin: 8px 0;
    background: var(--border);
}

.company-content {
    flex: 1 1 520px;
    min-width: 0;
}

.company-content h1 {
    margin-top: 0;
}

.company-wizard,
.company-join {
    max-width: 760px;
    margin: 24px auto;
}

.company-record {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin: 0 0 12px;
}

.company-record dt {
    color: var(--text-muted);
}

.company-record dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.company-avv-text p {
    margin: 0 0 10px;
}

.company-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.company-results {
    margin: 12px 0;
}

.company-panel {
    margin: 4px 0;
}

@media (max-width: 720px) {
    .company-nav {
        flex: 1 1 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .company-nav-divider {
        display: none;
    }
}