/* Bootstrap Icons — imported here so Program.cs inline-HTML pages also get the icon font */
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css');

/* T3 animation layer — @property, @keyframes, @view-transition, aurora, shimmer */
@import url('animations.css');

/* ==========================================================================
   Aptora Timmy — Brand-Aligned Chat Interface
   Tokens extracted from aptora.com — #1A9C4B primary, Plus Jakarta Sans
   ========================================================================== */

/* ----- Design tokens — Light (default) ---------------------------------- */
:root {
    --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Brand palette */
    --aptora-green: #1A9C4B;
    --aptora-green-hover: #158a40;
    --aptora-green-light: #22b85a;
    --aptora-green-subtle: rgba(26, 156, 75, 0.08);
    --aptora-green-ring: rgba(26, 156, 75, 0.18);

    /* Radii & transitions */
    --radius-card: 12px;
    --radius-bubble: 12px;
    --radius-button: 8px;
    --radius-input: 8px;
    --radius-small: 6px;
    --transition-standard: 0.3s ease;

    /* Topbar */
    --topbar-bg: #ffffff;
    --topbar-text: #3a3a3a;
    --topbar-border: rgba(0,0,0,0.08);

    /* Surfaces */
    --page-bg: #F6F6F9;
    --card-bg: #ffffff;
    --card-border: rgba(0,0,0,0.10);
    --card-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.10);
    --footer-bg: #ffffff;
    --footer-border: rgba(0,0,0,0.06);

    /* Inputs */
    --input-bg: #ffffff;
    --input-border: #d5d9e0;
    --input-text: #2F2F2F;
    --input-placeholder: #9ca3af;

    /* Typography */
    --text-primary: #2F2F2F;
    --text-body: var(--text-primary);
    --text-secondary: #505662;
    --text-muted: #6b7280;

    /* Bubbles */
    --user-bubble-bg: var(--aptora-green);
    --user-bubble-text: #ffffff;
    --bot-bubble-bg: #ffffff;
    --bot-bubble-border: rgba(0,0,0,0.09);
    --bot-bubble-text: #2F2F2F;

    /* Components */
    --thinking-bg: #f0faf3;
    --thinking-border: rgba(26,156,75,0.2);
    --thinking-accent: var(--aptora-green);
    --suggestion-border: rgba(26,156,75,0.3);
    --suggestion-text: var(--aptora-green);
    --suggestion-hover-bg: var(--aptora-green-subtle);
    --feedback-active-green: var(--aptora-green);
    --feedback-active-red: #dc3545;
    --star-active: var(--aptora-green);
    --star-inactive-border: #d5d9e0;
    --link-color: var(--aptora-green);
    --separator: rgba(0,0,0,0.06);
    --scroll-thumb: #d0d0d0;
    --scroll-track: transparent;
    /* Aptora-official palette (Round AG — renamed/retargeted from AF apple-* tokens) */
    --aptora-neutral-bg: #F6F6F9;
    --aptora-border: rgba(74,85,103,0.15);
    --aptora-shadow: 0 1px 3px rgba(0,44,36,0.06);
    --aptora-shadow-hover: 0 8px 24px rgba(0,44,36,0.06);
    --aptora-ink: #1B1818;
    --aptora-slate: #4A5567;
    --aptora-input-border: var(--input-border); /* alias — use --input-border */
    --aptora-focus-ring: 0 0 0 4px rgba(26,156,75,0.12);
    --aptora-radius-button: 12px;
    --aptora-button-padding: 14px 28px;
    --aptora-transition: all 300ms ease-out;
    --aptora-green-deepest: #002C24;
    --aptora-green-dark: #003D32;

    /* Round AM-SPEC additions — see agent-workspace/UI-CONSISTENCY-SPEC.md */

    /* Status colors */
    --text-error: #d32f2f;
    --text-warning: #c77700;
    --text-success: var(--aptora-green);
    --bg-error-subtle: rgba(211,47,47,0.08);
    --bg-warning-subtle: rgba(199,119,0,0.08);
    --bg-success-subtle: var(--aptora-green-subtle);

    /* Spacing scale — fluid 375px → 1440px */
    --space-1:  clamp(0.20rem, 0.18rem + 0.09vw, 0.25rem);
    --space-2:  clamp(0.40rem, 0.37rem + 0.19vw, 0.50rem);
    --space-3:  clamp(0.625rem, 0.56rem + 0.28vw, 0.75rem);
    --space-4:  clamp(0.875rem, 0.82rem + 0.28vw, 1rem);
    --space-5:  clamp(1.25rem, 1.14rem + 0.56vw, 1.5rem);
    --space-6:  clamp(1.625rem, 1.48rem + 0.75vw, 2rem);
    --space-8:  clamp(2.25rem, 1.99rem + 1.31vw, 3rem);
    --space-10: clamp(3rem, 2.62rem + 1.88vw, 4rem);

    /* Typography scale — fluid 375px → 1440px; rem+vw hybrid satisfies WCAG SC 1.4.4 */
    --fs-xs:   clamp(0.70rem, 0.68rem + 0.11vw, 0.78rem);  /* ~11px → ~12.5px */
    --fs-sm:   clamp(0.80rem, 0.77rem + 0.16vw, 0.90rem);  /* ~12.8px → ~14.4px */
    --fs-base: clamp(0.938rem, 0.91rem + 0.14vw, 1rem);    /* ~15px → ~16px */
    --fs-md:   clamp(1rem, 0.96rem + 0.25vw, 1.125rem);    /* ~16px → ~18px */
    --fs-lg:   clamp(1.125rem, 1.06rem + 0.31vw, 1.25rem); /* ~18px → ~20px */
    --fs-xl:   clamp(1.25rem, 1.14rem + 0.56vw, 1.5rem);   /* ~20px → ~24px */
    --fs-2xl:  clamp(1.5rem, 1.25rem + 1.25vw, 2rem);      /* ~24px → ~32px */

    /* Line-height scale */
    --lh-tight:   1.2;  /* display headings */
    --lh-snug:    1.3;  /* card/section headings */
    --lh-normal:  1.5;  /* body text */
    --lh-relaxed: 1.6;  /* lists, markdown paragraphs */

    /* Additional component tokens */
    --code-block-bg:      #1a1d27;
    --code-block-text:    #d4d4d4;
    --radius-bubble-tail: 4px;
    --border-medium:      1.5px;

    /* T3 — Frosted Studio tokens */
    --chrome-glass-bg:       rgba(255, 255, 255, 0.52);
    --warn-glass-bg: rgba(255, 240, 240, 0.52);
    --chrome-glass-backdrop: blur(16px) saturate(160%);
    --chrome-glass-border:   rgba(255, 255, 255, 0.35);
    --green-bloom-top:   rgba(26, 156, 75, 0.22);
    --grain-opacity:     0.07;
    --shimmer-color:     rgba(255, 255, 255, 0.22);
    --z-sticky:          250;

    /* Layout dimension tokens */
    --topbar-h: 64px;   /* aptora-topbar height — update if topbar changes */
    --sidebar-w: 260px; /* timmy-sidebar expanded width */
}

/* ----- Design tokens — Dark --------------------------------------------- */
[data-theme="dark"] {
    --topbar-bg: #0f0d0e;
    --topbar-text: #d4d4dc;
    --topbar-border: rgba(255,255,255,0.08);
    --chrome-glass-bg:     rgba(15, 13, 14, 0.68);
    --warn-glass-bg:    rgba(155, 14, 14, 0.17);
    --chrome-glass-border: rgba(255, 255, 255, 0.10);
    --warn-glass-border:    rgba(85, 14, 14, 0.68);

    --page-bg: #0f0d0e;
    /* T3 dark: warm-neutral with 1/8 minus-green shift — R≥B>G, no brown, no purple */
    --card-bg: #201e1f;
    --card-border: rgba(255,255,255,0.07);
    --card-shadow: 0 1px 2px rgba(0,0,0,0.25);
    --footer-bg: #201e1f;
    --footer-border: rgba(255,255,255,0.06);

    --input-bg: #292628;
    --input-border: rgba(255,255,255,0.1);
    --input-text: #e8e8e8;
    --input-placeholder: #6b7280;

    --text-primary: #F6F6F9;
    --text-secondary: rgba(246,246,249,0.65);
    --text-muted: #6b7280;

    --user-bubble-bg: var(--aptora-green);
    --user-bubble-text: #ffffff;
    --bot-bubble-bg: #201e1f;
    --bot-bubble-border: rgba(255,255,255,0.06);
    --bot-bubble-text: #e8e8e8;

    --thinking-bg: rgba(26,156,75,0.06);
    --thinking-border: rgba(26,156,75,0.15);
    --thinking-accent: #22b85a;
    --suggestion-border: rgba(26,156,75,0.25);
    --suggestion-text: #22b85a;
    --suggestion-hover-bg: rgba(26,156,75,0.1);
    --feedback-active-green: #22b85a;
    --feedback-active-red: #ef5350;
    --star-active: #22b85a;
    --star-inactive-border: rgba(255,255,255,0.12);
    --link-color: #22b85a;
    --separator: rgba(255,255,255,0.06);
    --scroll-thumb: rgba(255,255,255,0.1);
    --scroll-track: transparent;

    /* AR-FIXUP-4: AM-SPEC primitive dark-token overrides */
    --text-body: var(--text-primary);
    --aptora-ink: #F6F6F9;
    --aptora-slate: rgba(246,246,249,0.65);
    --aptora-input-border: rgba(255,255,255,0.1);

    /* AR-FIXUP-5: cover untokened light surfaces (sidebar, headers, button chrome) */
    --aptora-card-bg: var(--card-bg);
    --aptora-neutral-bg: var(--page-bg);
    --aptora-border: rgba(255,255,255,0.1);

    /* Dark mode: code blocks stay dark regardless — no inversion needed */
    --code-block-bg:   #141720;
    --code-block-text: #e2e4e8;
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-body) !important;
    font-size: 16px;
    background:
        radial-gradient(ellipse 120% 65% at 50% -8%, var(--green-bloom-top) 0%, transparent 62%),
        radial-gradient(ellipse 65% 55% at 90% 108%, rgba(20, 184, 120, 0.16) 0%, transparent 55%),
        var(--page-bg) !important;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: color var(--transition-standard);
    margin: 0;
    position: relative;
    letter-spacing: 0.008em;
    /* Hotfix 2026-06-03: chat shell locks by default (Blazor app pages).
       Document pages (billing/account/upgrade) opt out with body.allow-scroll. */
    height: 100svh;
    overflow: hidden;
}

/* T1 Round AS legacy class — keep alias so opt-in JS path also works */
body.chat-shell-lock {
    height: 100svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Blazor host + MainLayout wrappers: passthrough so the flex height chain reaches aptora-topbar and timmy-shell-2col */
body.chat-shell-lock app,
body.chat-shell-lock .page,
body.chat-shell-lock .main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

body.chat-shell-lock .timmy-shell-2col {
    flex: 1;
    min-height: 0;
}

body.chat-shell-lock .timmy-shell-main {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.chat-shell-lock .timmy-conversation-area {
    flex: 1;
    min-height: 0;
    height: auto;
}

/* Hotfix 2026-06-03: opt-out for inline-HTML document pages (billing/account/upgrade) */
body.allow-scroll {
    height: auto;
    min-height: 100svh;
    overflow: auto;
}

/* ==========================================================================
   Branded top bar — mirrors aptora.com navigation
   ========================================================================== */

.aptora-topbar {
    background: var(--chrome-glass-bg);
    backdrop-filter: var(--chrome-glass-backdrop);
    -webkit-backdrop-filter: var(--chrome-glass-backdrop);
    padding: var(--space-3) var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(26, 156, 75, 0.18);
    box-shadow: 0 1px 12px rgba(26, 156, 75, 0.08);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

[data-theme="dark"] .aptora-topbar {
    background: var(--chrome-glass-bg);
    border-bottom-color: rgba(26, 156, 75, 0.15);
}

.aptora-topbar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.aptora-topbar-logo {
    height: 30px;
    display: block;
}

/* Dark mode: swap to dedicated dark-mode logo asset */
[data-theme="dark"] .aptora-topbar-logo {
    content: url('../images/aptora-logo-dark.png');
}

/* Logo is now an anchor — strip link affordances */
.aptora-topbar-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.aptora-topbar-divider {
    width: 1px;
    height: 24px;
    background: var(--topbar-border);
}

.aptora-topbar-label {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--aptora-green);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.aptora-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.aptora-topbar-link {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--aptora-slate);
    text-decoration: none;
    transition: color var(--aptora-transition);
}

.aptora-topbar-link:hover {
    color: var(--aptora-green);
}

.aptora-topbar-link--icon {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

@media (max-width: 767px) {
    .aptora-topbar-link-label { display: none; }
}

.aptora-topbar-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--aptora-border);
    border-radius: var(--radius-button);
    cursor: pointer;
    transition: background var(--aptora-transition), color var(--aptora-transition), border-color var(--aptora-transition);
}
.aptora-topbar-action:hover:not(:disabled) {
    background: var(--aptora-green-subtle);
    color: var(--aptora-green);
    border-color: var(--aptora-green-ring);
}
.aptora-topbar-action:disabled { opacity: 0.45; cursor: wait; }

@media (max-width: 680px) {
    .aptora-topbar-action-label { display: none; }
}

.aptora-topbar-settings {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-sm);
}
.aptora-topbar-settings label {
    color: var(--text-muted);
    font-weight: 500;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}
.aptora-topbar-settings .select-inline {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.40);
    font-size: var(--fs-xs);
    padding: 0.15rem 0.35rem;
}
.aptora-topbar-settings .select-inline:focus {
    background: rgba(255, 255, 255, 0.45);
    border-color: var(--aptora-green);
}
.aptora-topbar-settings .select-inline option {
    background: #eef5f1;
    color: var(--text-primary);
}
[data-theme="dark"] .aptora-topbar-settings .select-inline {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--input-text);
}
[data-theme="dark"] .aptora-topbar-settings .select-inline:focus {
    background: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .aptora-topbar-settings .select-inline option {
    background: #1c1e1d;
    color: var(--input-text);
}

/* ==========================================================================
   Chat topbar — sidebar toggle + action buttons on the left
   ========================================================================== */

.aptora-topbar-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    color: var(--aptora-slate);
    cursor: pointer;
    font-size: 1.05rem;
    flex-shrink: 0;
    transition: background var(--aptora-transition), color var(--aptora-transition), border-color var(--aptora-transition);
}

.aptora-topbar-sidebar-toggle:hover {
    background: var(--aptora-green-subtle);
    color: var(--aptora-green);
    border-color: var(--aptora-green-ring);
}

.category-desc {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    font-style: italic;
}

/* ==========================================================================
   Account sub-navigation pills (Round AQ — replaces left sidebar)
   ========================================================================== */

/* ==========================================================================
   Account tab bar — two-row navigation
   Primary row: static group anchors. Secondary row: contextual page anchors.
   Active state: green bottom underline (classic tab convention, no filled bg).
   ========================================================================== */

.aptora-tabs {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
}

.aptora-tabs-primary {
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0 2rem;
    border-bottom: 1px solid var(--aptora-border);
    gap: 0;
}

.aptora-tabs-secondary {
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0 2rem;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-bottom: none;
    gap: 0;
}

/* Empty secondary row (group root pages) — collapse it */
.aptora-tabs-secondary:empty {
    display: none;
}

/* Secondary row slides down + fades in only when the active GROUP changes.
   JS adds .group-changed when sessionStorage shows a different group than last visit. */
.aptora-tabs-secondary.group-changed {
    animation: tabs-secondary-in 0.18s ease both;
}

@keyframes tabs-secondary-in {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.aptora-tab {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--aptora-slate);
    text-decoration: none;
    padding: 0.45rem 1rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.aptora-tabs-secondary .aptora-tab {
    font-size: var(--fs-xs);
    padding: 0.5rem 0.9rem;
}

.aptora-tabs-secondary .aptora-tab.active {
    border-bottom-color: transparent;
}

.aptora-tab:hover {
    color: var(--aptora-ink);
}

.aptora-tab.active {
    color: var(--aptora-green);
    font-weight: 600;
    border-bottom-color: var(--aptora-green);
}

/* Primary row dimming — JS adds these classes based on navigation context */
.aptora-tabs-primary.primary-dimmed {
    opacity: 0.5;
}

.aptora-tabs-primary.primary-dimming {
    animation: primary-dim 0.22s ease forwards;
}

@keyframes primary-dim {
    from { opacity: 1; }
    to   { opacity: 0.5; }
}

@media (max-width: 768px) {
    .aptora-tabs-primary,
    .aptora-tabs-secondary { padding: 0 1rem; overflow-x: auto; }
    .aptora-tab { font-size: var(--fs-sm); padding: 0.55rem 0.75rem; }
}

/* ==========================================================================
   Topbar-nav: primary tabs folded into the topbar (account-shell pages)
   Members: all page tabs in topbar. Owners: group tabs in topbar + secondary row below.
   ========================================================================== */

/* Grid layout so nav tabs are truly centered: both flanks are 1fr (equal), nav is auto. */
.account-shell .aptora-topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    padding-top: 0;
    padding-bottom: 0;
}
.account-shell .aptora-topbar-left,
.account-shell .aptora-topbar-right {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    align-items: center;
    display: flex;
}
.account-shell .aptora-topbar-right {
    justify-content: flex-end;
}

.aptora-topbar-nav {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.aptora-topbar-nav::-webkit-scrollbar { display: none; }

.aptora-topbar-nav .aptora-tab {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 0.9rem;
    white-space: nowrap;
    transition: opacity 0.18s ease, color 0.15s ease;
}

.aptora-topbar-nav .aptora-tab.active {
    color: var(--aptora-green);
    font-weight: 600;
}

/* Primary bar fades when on a secondary page (JS adds these classes) */
.aptora-topbar-nav.primary-dimmed { opacity: 0.5; }
.aptora-topbar-nav.primary-dimming { animation: primary-dim 0.22s ease forwards; }

/* Move green glow to secondary bar when present; suppress it on topbar */
.account-shell:has(.aptora-tabs-secondary) .aptora-topbar {
    border-bottom-color: transparent;
    box-shadow: none;
}

/* Topbar deepens as content scrolls beneath it — scoped to avoid fighting the
   glow-suppression rule above (which sets box-shadow:none on secondary-tab pages) */
@keyframes topbar-deepen {
    from { box-shadow: none; }
    to   { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10), 0 1px 6px rgba(0, 0, 0, 0.07); }
}

@media (prefers-reduced-motion: no-preference) {
    body:not(.account-shell) .aptora-topbar,
    .account-shell:not(:has(.aptora-tabs-secondary)) .aptora-topbar {
        animation: topbar-deepen linear both;
        animation-timeline: scroll(root block);
        animation-range: 0px 48px;
    }
}
.account-shell:has(.aptora-tabs-secondary) .aptora-tabs-secondary {
    border-bottom: 1px solid rgba(26, 156, 75, 0.18);
    box-shadow: 0 1px 12px rgba(26, 156, 75, 0.08);
}

/* Mobile: topbar collapses to two rows — logo/actions on row 1, tabs full-width on row 2 */
@media (max-width: 768px) {
    .account-shell .aptora-topbar {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        padding-top: var(--space-3);
        padding-bottom: 0;
    }
    .account-shell .aptora-topbar-left {
        grid-column: 1;
        grid-row: 1;
        padding-top: 0;
        padding-bottom: var(--space-3);
    }
    .account-shell .aptora-topbar-right {
        grid-column: 2;
        grid-row: 1;
        padding-top: 0;
        padding-bottom: var(--space-3);
    }
    .aptora-topbar-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
        border-top: 1px solid var(--aptora-border);
        padding: 0 var(--space-4);
    }
}

/* Account-shell cards use the same chrome glass as the topbar */
.account-shell .aptora-form-card {
    background: var(--chrome-glass-bg);
    backdrop-filter: var(--chrome-glass-backdrop);
    -webkit-backdrop-filter: var(--chrome-glass-backdrop);
    border-color: var(--chrome-glass-border);
}

/* ==========================================================================
   Card shell
   ========================================================================== */

.timmy-card-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 24px 16px;
}

.timmy-card {
    background: rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--aptora-shadow);
    border-radius: var(--radius-card);
    display: flex;
    flex-direction: column;
    /* Standalone card height: full viewport minus topbar.
       Overridden to height:100% in .timmy-conversation-area context. */
    height: calc(100svh - var(--topbar-h));
    max-height: calc(100svh - var(--topbar-h));
    max-width: 1200px;
    width: 100%;
    overflow: hidden;
    transition: background-color var(--transition-standard), border-color 0.25s ease, box-shadow 0.25s ease;
}

@media (max-width: 768px) {
    .timmy-card-wrapper { padding: 0; }
    .timmy-card { border-radius: 0; max-width: 100%; height: 100vh; height: 100dvh; }
}


@keyframes timmy-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.timmy-settings-card.settings-loaded {
    animation: timmy-fade-in 0.25s ease both;
}

.timmy-settings-card .card {
    background: var(--aptora-card-bg, #fff);
    border: 1px solid var(--aptora-border);
    box-shadow: var(--aptora-shadow);
    border-radius: var(--radius-card);
}
.timmy-settings-card .card-header {
    background: var(--aptora-neutral-bg);
    border-bottom: 1px solid var(--aptora-border);
    color: var(--aptora-ink);
    font-weight: 600;
}
.timmy-settings-card .nav-tabs .nav-link.active {
    color: var(--aptora-green);
}

.btn-theme-toggle {
    background: transparent;
    color: var(--aptora-slate);
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    padding: 0.35rem 0.55rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--aptora-transition);
    line-height: 1;
}

.btn-theme-toggle:hover {
    background: var(--aptora-green-subtle);
    border-color: var(--aptora-green);
    color: var(--aptora-green);
}

/* CSS-driven icon swap — no JS innerHTML needed */
.btn-theme-toggle .theme-icon-light { display: none; }
.btn-theme-toggle .theme-icon-dark  { display: inline-block; }
[data-theme="dark"] .btn-theme-toggle .theme-icon-dark  { display: none; }
[data-theme="dark"] .btn-theme-toggle .theme-icon-light { display: inline-block; }

/* ==========================================================================
   Chat thread
   ========================================================================== */

.timmy-thread {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.5rem;
    min-height: 0;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

.timmy-thread::-webkit-scrollbar {
    width: 5px;
}

.timmy-thread::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 4px;
}

.timmy-thread::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ==========================================================================
   Welcome state — T2+ redesign
   Single focal point: heading. Trust badges → muted caption line.
   Dual suggestion lists merged → one unified full-width list.
   Divider removed — spacing does the job.
   ========================================================================== */

.timmy-welcome {
    text-align: center;
    padding: 0.75rem 2rem 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.timmy-welcome img {
    height: 56px;
    width: auto;
    margin-bottom: var(--space-3);
}

/* Single dominant heading — the focal point */
.timmy-welcome-heading {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--aptora-ink);
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0 0 var(--space-2);
}

.timmy-welcome .welcome-subtitle {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    max-width: 400px;
    margin: 0 auto var(--space-2);
    line-height: 1.6;
    font-weight: 400;
}

/* Trust signals demoted to single muted caption — no longer competing elements */
.welcome-caption {
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin: 0 auto var(--space-4);
    font-weight: 500;
}

/* Unified suggestion list — full-width left-aligned rows, clear hit targets */
.welcome-suggestions {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.welcome-suggestion {
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--chrome-glass-bg);
    border: 1px solid var(--chrome-glass-border);
    border-radius: var(--radius-input);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--aptora-ink);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
    box-sizing: border-box;
}

.welcome-suggestion:hover {
    border-color: var(--aptora-green);
    background: var(--aptora-green-subtle);
    color: var(--aptora-green);
    transform: translateX(2px);
}

.welcome-suggestion::after {
    content: '›';
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0.6;
    flex-shrink: 0;
    margin-left: var(--space-3);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.welcome-suggestion:hover::after,
.welcome-suggestion:focus-visible::after {
    opacity: 1;
    transform: translateX(3px);
}

/* Keyboard focus state for welcome suggestions */
.welcome-suggestion:focus-visible {
    outline: 2px solid var(--aptora-green);
    outline-offset: 2px;
    border-color: var(--aptora-green);
}

/* Legacy classes kept to avoid any stale references — visually suppressed */
.welcome-divider,
.welcome-badge-icon,
.welcome-section-label { display: none; }

/* welcome-badge kept in DOM for old T2 compatibility but hidden in T2+ */
.welcome-badges,
.welcome-badge { display: none; }

.timmy-trial-banner {
    background: var(--aptora-neutral-bg);
    color: var(--aptora-ink);
    padding: 0.6rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    font-size: var(--fs-base);
    border-bottom: 1px solid var(--aptora-border);
    flex-wrap: wrap;
}

.timmy-trial-banner.locked {
    background: var(--bg-error-subtle);
    color: var(--text-error);
    border-bottom-color: rgba(211,47,47,0.25);
}

.timmy-trial-banner-cta {
    background: var(--aptora-green);
    color: #ffffff;
    padding: 0.4rem 1rem;
    border-radius: var(--aptora-radius-button);
    text-decoration: none;
    font-weight: 600;
    transition: var(--aptora-transition);
}

.timmy-trial-banner-cta:hover {
    background: var(--aptora-green-hover);
}

/* ==========================================================================
   Message bubbles
   ========================================================================== */

.msg-user {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.msg-user .bubble {
    background: var(--user-bubble-bg);
    color: var(--user-bubble-text);
    border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-bubble-tail) var(--radius-bubble);
    padding: 0.65rem 1.1rem;
    max-width: 75%;
    font-size: var(--fs-base);
    font-weight: 500;
    line-height: 1.55;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.msg-bot {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0.75rem;
}

.msg-bot .bubble {
    background: var(--bot-bubble-bg);
    color: var(--bot-bubble-text);
    border: none;
    box-shadow: var(--aptora-shadow);
    border-radius: var(--radius-bubble-tail) var(--radius-bubble) var(--radius-bubble) var(--radius-bubble);
    padding: 1rem 1.25rem;
    max-width: 86%;
    font-size: var(--fs-base);
    line-height: 1.65;
    transition: background-color var(--transition-standard), opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Chat output (rendered markdown)
   ========================================================================== */

.chat-output h1,
.chat-output h2,
.chat-output h3 {
    margin-top: 1.2rem;
    margin-bottom: 0.4rem;
    color: var(--aptora-green);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* First heading in an answer gets no top margin — it's the entry point */
.chat-output > h1:first-child,
.chat-output > h2:first-child,
.chat-output > h3:first-child {
    margin-top: 0;
}

.chat-output h1 { font-size: 1.3rem; }
.chat-output h2 { font-size: var(--fs-md); }
.chat-output h3 { font-size: var(--fs-md); }

.chat-output p {
    margin-bottom: 0.55rem;
    line-height: 1.65;
}

.chat-output ul, .chat-output ol {
    margin-left: 1.25rem;
    margin-bottom: 0.85rem;
    padding-left: 0.25rem;
}

.chat-output li {
    margin-bottom: 0.35rem;
    line-height: 1.6;
}

.chat-output a {
    color: var(--link-color);
    font-weight: 500;
    text-decoration: none;
}

.chat-output a:hover {
    text-decoration: underline;
}

.chat-output code {
    background: rgba(0,0,0,0.05);
    padding: 0.15rem 0.4rem;
    border-radius: 5px;
    font-size: 0.86em;
    font-weight: 500;
}

[data-theme="dark"] .chat-output code {
    background: rgba(255,255,255,0.07);
}

.chat-output pre {
    background: var(--code-block-bg);
    color: var(--code-block-text);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-button);
    overflow-x: auto;
    font-size: 0.83em;
    border: 1px solid rgba(255,255,255,0.05);
}

.chat-output strong {
    font-weight: 700;
    color: var(--text-primary);
}

/* Response metadata row — confidence + article count above the answer */
.response-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--separator);
}

.response-meta-count {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

/* Sources footer — separates the answer body from collapsible sources */
.response-sources {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--separator);
}

/* ==========================================================================
   Confidence badge
   ========================================================================== */

.confidence-badge {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ==========================================================================
   Sources
   ========================================================================== */

.sources-toggle {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}

.sources-toggle:hover {
    color: var(--text-primary);
}

.source-item {
    padding: 0.35rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-sm);
}

.source-item + .source-item {
    border-top: 1px solid var(--separator);
}

.source-item a {
    color: var(--link-color);
    font-weight: 500;
    text-decoration: none;
}

.source-item a:hover {
    text-decoration: underline;
}

.source-item span {
    color: var(--text-secondary);
}

/* ==========================================================================
   Thinking panel
   ========================================================================== */

.thinking-panel {
    background: var(--thinking-bg);
    border: 1px solid var(--thinking-border);
    border-left: 3px solid var(--aptora-green);
    border-radius: 0 var(--radius-button) var(--radius-button) 0;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    margin-left: var(--space-1);
    font-size: var(--fs-xs);
    transition: background-color var(--transition-standard), border-color var(--transition-standard), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.thinking-panel .thinking-title {
    color: var(--thinking-accent);
    font-weight: 700;
    font-size: 0.8rem;
}

.thinking-panel .thinking-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.2rem;
}

.thinking-panel .step-icon {
    min-width: 18px;
    margin-right: 0.4rem;
}

.thinking-panel .step-text {
    color: var(--text-muted);
}

.thinking-panel .step-text.active {
    color: var(--text-primary);
    font-weight: 600;
}

.thinking-panel .step-details {
    margin: 0.2rem 0 0 0;
    padding-left: 1rem;
    list-style-type: disc;
}

.thinking-panel .step-details li {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-bottom: 0.1rem;
}

/* ==========================================================================
   Reasoning toggle (collapsed thinking)
   ========================================================================== */

.reasoning-toggle {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 0.4rem;
    margin-left: 0.25rem;
    transition: color 0.15s;
}

.reasoning-toggle:hover {
    color: var(--aptora-green);
}

/* ==========================================================================
   Feedback
   ========================================================================== */

.feedback-row {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--separator);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.feedback-row .fb-label {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 500;
}

.btn-fb {
    border: 1px solid var(--input-border);
    background: transparent;
    border-radius: 8px;
    padding: 0.2rem 0.45rem;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-fb:hover {
    background: var(--aptora-green-subtle);
    border-color: var(--aptora-green);
}

.btn-fb.active-up {
    background: var(--feedback-active-green);
    color: #fff;
    border-color: var(--feedback-active-green);
}

.btn-fb.active-down {
    background: var(--feedback-active-red);
    color: #fff;
    border-color: var(--feedback-active-red);
}

.star-btn {
    border: 1px solid var(--star-inactive-border);
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    padding: 0.12rem 0.38rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.star-btn:hover {
    border-color: var(--aptora-green);
    color: var(--aptora-green);
}

.star-btn.active {
    background: var(--star-active);
    color: #fff;
    border-color: var(--star-active);
}

.feedback-comment {
    width: 100%;
    margin-top: 0.4rem;
}

.feedback-comment input {
    font-family: var(--font-body);
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 0.4rem 0.7rem;
    font-size: var(--fs-sm);
    width: 100%;
    transition: border-color var(--transition-standard), box-shadow 0.2s;
}

.feedback-comment input:focus {
    outline: none;
    border-color: var(--aptora-green);
    box-shadow: 0 0 0 3px var(--aptora-green-ring);
}

.feedback-comment input::placeholder {
    color: var(--input-placeholder);
}

.btn-submit-fb {
    font-family: var(--font-body);
    background: var(--aptora-green);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.3rem 0.85rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-standard) ease;
}

.btn-submit-fb:hover {
    background: var(--aptora-green-hover);
}

.btn-submit-fb:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.fb-sent {
    color: var(--feedback-active-green);
    font-size: var(--fs-sm);
    font-weight: 500;
}

.fb-hint {
    font-size: 0.75rem;
    color: var(--text-muted, #6b7280);
    margin-bottom: 0.25rem;
    line-height: 1.3;
    width: 100%;
}

.fb-required-hint {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.7rem;
    color: #b45309;
}

.feedback-row.prompt {
    animation: fb-pulse 1.6s ease-in-out 6s 2;
}

@keyframes fb-pulse {
    0%, 100% { background: transparent; }
    50%      { background: rgba(var(--brand-primary-rgb, 26, 156, 75), 0.12); }
}

/* ==========================================================================
   Suggestions
   ========================================================================== */

.suggestion-area {
    margin-bottom: 0.75rem;
    margin-left: 0.25rem;
}

.suggestion-area .label {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 500;
    margin-bottom: 0.4rem;
}

.btn-suggestion {
    font-family: var(--font-body);
    background: transparent;
    color: var(--aptora-ink);
    border: 1.5px solid var(--aptora-border);
    border-radius: 100px;
    padding: 0.5rem 1.3rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--aptora-transition);
}

.btn-suggestion:hover {
    background: var(--aptora-green);
    border-color: var(--aptora-green);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(26,156,75,0.25);
}

/* ==========================================================================
   Footer / Input area
   ========================================================================== */

.timmy-footer {
    background: var(--footer-bg);
    border-top: 1px solid var(--footer-border);
    padding: 1rem 1.5rem;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    transition: background-color var(--transition-standard), border-color 0.25s ease;
    flex-shrink: 0;
    min-height: 0;
    min-width: 0;
}

.timmy-footer .flex-grow-1 {
    min-width: 0;
}

.timmy-footer textarea {
    font-family: var(--font-body);
    background: var(--input-bg);
    color: var(--input-text);
    border: 1.5px solid var(--input-border);
    border-radius: var(--radius-input);
    resize: none;
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
    transition: border-color var(--transition-standard), box-shadow 0.2s, background-color 0.2s;
}

.timmy-footer textarea:hover {
    border-color: var(--aptora-green-ring);
}

.timmy-footer textarea:focus {
    outline: none;
    border-color: var(--aptora-green);
    box-shadow: 0 0 0 3px var(--aptora-green-ring);
}

.timmy-footer textarea::placeholder {
    color: var(--input-placeholder);
}

.btn-send {
    font-family: var(--font-body);
    background: var(--aptora-green);
    color: #fff;
    border: none;
    border-radius: var(--radius-button);
    padding: 0.75rem 2rem;
    font-weight: 700;
    font-size: var(--fs-sm);
    min-width: 90px;
    cursor: pointer;
    transition: background var(--transition-standard), box-shadow var(--transition-standard), transform 0.15s ease;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(26,156,75,0.3);
}

.btn-send:hover {
    background: var(--aptora-green-hover);
    box-shadow: 0 4px 12px rgba(26, 156, 75, 0.4);
    transform: translateY(-1px);
}

.btn-send:active {
    transform: translateY(1px) scale(0.96);
    box-shadow: 0 1px 4px rgba(26, 156, 75, 0.2);
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.btn-send:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.timmy-copyright {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--separator);
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 400;
}

.timmy-copyright a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s;
}

.timmy-copyright a:hover {
    color: var(--aptora-green);
}

.timmy-powered {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-align: center;
    margin-top: 0.35rem;
    font-weight: 400;
}

.timmy-powered .ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--aptora-green);
    color: #ffffff;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ==========================================================================
   Debug log
   ========================================================================== */

.debug-log-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    padding: 1rem;
    margin-bottom: 0.5rem;
}

.debug-log-card p,
.debug-log-card .text-muted {
    color: var(--text-secondary);
}

/* ==========================================================================
   Spinner
   ========================================================================== */

.spinner-aptora {
    color: var(--aptora-green) !important;
}

/* ==========================================================================
   Escalation
   ========================================================================== */

.escalation-row {
    margin-top: 0.55rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--separator);
    display: flex;
    align-items: center;
}

.escalation-row--prominent {
    justify-content: flex-start;
}

.btn-escalate {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: transparent;
}

.btn-escalate:hover {
    color: var(--aptora-green);
    text-decoration-color: var(--aptora-green);
}

.btn-escalate--prominent {
    background: var(--aptora-green-subtle);
    color: var(--aptora-green);
    border: 1.5px solid var(--suggestion-border);
    border-radius: var(--radius-button);
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}

.btn-escalate--prominent:hover {
    background: var(--aptora-green);
    color: #ffffff;
    border-color: var(--aptora-green);
    text-decoration: none;
}

.escalation-panel {
    margin-top: 0.6rem;
    background: var(--thinking-bg);
    border: 1px solid var(--thinking-border);
    border-left: 3px solid var(--aptora-green);
    border-radius: 0 var(--radius-button) var(--radius-button) 0;
    font-size: var(--fs-sm);
    overflow: hidden;
}

.escalation-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.9rem;
    background: var(--aptora-green-subtle);
    border-bottom: 1px solid var(--thinking-border);
}

.escalation-panel-title {
    font-weight: 700;
    color: var(--aptora-green);
    font-size: var(--fs-sm);
}

.escalation-panel-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--fs-sm);
    line-height: 1;
    padding: 0 0.2rem;
    transition: color 0.15s;
}

.escalation-panel-close:hover {
    color: var(--text-primary);
}

.escalation-panel-body {
    padding: 0.75rem 0.9rem;
}

.escalation-success {
    text-align: center;
    padding: 0.5rem 0;
    color: var(--aptora-green);
}
.escalation-success p {
    margin: 0.3rem 0;
}

.escalation-hint {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    margin-bottom: 0.65rem;
    line-height: 1.5;
}

.escalation-context-section {
    background: var(--bot-bubble-bg);
    border: 1px solid var(--separator);
    border-radius: var(--radius-small);
    padding: 0.5rem 0.7rem;
    margin-bottom: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.escalation-context-row {
    display: flex;
    gap: 0.5rem;
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.escalation-context-label {
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.escalation-context-value {
    color: var(--text-secondary);
    word-break: break-word;
}

.escalation-context-mono {
    font-family: monospace;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.escalation-extra-label {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.escalation-textarea {
    font-family: var(--font-body);
    background: var(--input-bg);
    color: var(--input-text);
    border: 1.5px solid var(--input-border);
    border-radius: var(--radius-input);
    resize: vertical;
    font-size: var(--fs-sm);
    padding: 0.5rem 0.75rem;
    width: 100%;
    transition: border-color var(--transition-standard), box-shadow 0.2s;
}

.escalation-textarea:focus {
    outline: none;
    border-color: var(--aptora-green);
    box-shadow: 0 0 0 3px var(--aptora-green-ring);
}

.escalation-textarea::placeholder {
    color: var(--input-placeholder);
}

.escalation-actions {
    margin-top: 0.55rem;
    display: flex;
    justify-content: flex-end;
}

.btn-escalate-send {
    font-family: var(--font-body);
    background: var(--aptora-green);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-button);
    padding: 0.38rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background var(--transition-standard) ease;
}

.btn-escalate-send:hover {
    background: var(--aptora-green-hover);
    color: #ffffff;
    text-decoration: none;
}

/* ==========================================================================
   Bootstrap overrides — keep them minimal
   ========================================================================== */

.form-control, .form-select {
    font-family: var(--font-body);
    letter-spacing: 0.008em;
}

/* Bootstrap label weight normalization — 500 reads heavy at small sizes */
.form-label,
.form-check-label,
.col-form-label {
    font-weight: 400;
    letter-spacing: 0.012em;
}

.form-text,
.text-muted {
    letter-spacing: 0.01em;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--aptora-green) !important;
    box-shadow: 0 0 0 3px var(--aptora-green-ring) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: var(--input-border);
}

/* Bootstrap overrides for dark mode — Settings.razor uses Bootstrap tabs/labels/buttons */
[data-theme="dark"] .form-label,
[data-theme="dark"] .form-check-label,
[data-theme="dark"] .col-form-label {
    color: var(--text-primary);
}

[data-theme="dark"] .form-check-input {
    background-color: var(--input-bg);
    border-color: var(--input-border);
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--aptora-green);
    border-color: var(--aptora-green);
}

[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--card-border);
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-secondary);
    border-color: transparent;
    background: transparent;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    color: var(--text-primary);
    border-color: var(--card-border);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--text-primary);
    background-color: var(--card-bg);
    border-color: var(--card-border) var(--card-border) var(--card-bg);
}

[data-theme="dark"] .tab-content > .tab-pane {
    color: var(--text-primary);
}

[data-theme="dark"] .btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--card-border);
    background: transparent;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    color: var(--text-primary);
    background-color: var(--aptora-green-subtle);
    border-color: var(--aptora-green);
}

[data-theme="dark"] .h3,
[data-theme="dark"] h3 {
    color: var(--text-primary);
}

/* Dark mode: .aptora-banner variants */
[data-theme="dark"] .aptora-banner--info {
    background: rgba(246,246,249,0.06);
    border-color: rgba(255,255,255,0.1);
    color: var(--text-secondary);
}
[data-theme="dark"] .aptora-banner--warning {
    background: rgba(199,119,0,0.12);
    border-color: rgba(199,119,0,0.3);
    color: #f0a832;
}
[data-theme="dark"] .aptora-banner--error {
    background: rgba(211,47,47,0.12);
    border-color: rgba(211,47,47,0.3);
    color: #f87171;
}
[data-theme="dark"] .aptora-banner--success {
    background: rgba(26,156,75,0.12);
    border-color: rgba(26,156,75,0.25);
    color: var(--aptora-green-light);
}

/* Dark mode: .aptora-form-card */
[data-theme="dark"] .aptora-form-card {
    background: var(--chrome-glass-bg);
    backdrop-filter: var(--chrome-glass-backdrop);
    -webkit-backdrop-filter: var(--chrome-glass-backdrop);
    border-color: var(--chrome-glass-border);
}
[data-theme="dark"] .account-shell .aptora-form-card {
    background: var(--chrome-glass-bg);
    backdrop-filter: var(--chrome-glass-backdrop);
    -webkit-backdrop-filter: var(--chrome-glass-backdrop);
    border-color: var(--chrome-glass-border);
}

[data-theme="dark"] .aptora-form-title { color: var(--text-primary); }
[data-theme="dark"] .aptora-label { color: var(--text-secondary); }

/* ==========================================================================
   Input validation
   ========================================================================== */

.input-over-limit {
    border-color: #dc3545 !important;
}

.input-over-limit:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25) !important;
}

.input-validation-error {
    font-size: var(--fs-sm);
    color: #dc3545;
    margin-top: 2px;
}

/* --- Inline citations --- */
.citation {
    color: var(--aptora-green);
    cursor: pointer;
    font-size: 0.75em;
    vertical-align: super;
    font-weight: 600;
    margin: 0 1px;
}

.citation:hover {
    text-decoration: underline;
}

.citation-number {
    color: var(--aptora-green);
    font-weight: 600;
    font-size: 0.85em;
    margin-right: 0.3em;
}

/* ==========================================================================
   Deployment type clarification buttons
   ========================================================================== */

.btn-deployment {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--aptora-green);
    border-radius: var(--radius-small);
    background: transparent;
    color: var(--aptora-green);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-standard);
}

.btn-deployment:hover {
    background: var(--aptora-green);
    color: #fff;
}

[data-theme="dark"] .btn-deployment {
    border-color: var(--aptora-green-light);
    color: var(--aptora-green-light);
}

[data-theme="dark"] .btn-deployment:hover {
    background: var(--aptora-green-light);
    color: #fff;
}

/* ==========================================================================
   Usage info bar
   ========================================================================== */

.usage-info {
    font-size: var(--fs-sm);
    padding: 0.35rem 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: var(--radius-small, 6px);
    border-left: 3px solid;
    background: var(--settings-bg, #F8F7F3);
}

.usage-info.usage-ok {
    border-left-color: var(--aptora-green, #1A9C4B);
    color: var(--aptora-green, #1A9C4B);
}

.usage-info.usage-warn {
    border-left-color: #f59e0b;
    color: #b45309;
}

.usage-info.usage-critical {
    border-left-color: #dc3545;
    color: #dc3545;
}

[data-theme="dark"] .usage-info {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .usage-info.usage-warn {
    color: #fbbf24;
}

[data-theme="dark"] .usage-info.usage-critical {
    color: #f87171;
}

/* T3 — breadcrumb, content shell, content card: frosted so the body aurora
   flows through the whole page without hard horizontal cuts */
.aptora-breadcrumb {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-bottom-color: rgba(255, 255, 255, 0.35);
}
[data-theme="dark"] .aptora-breadcrumb {
    background: rgba(12, 10, 11, 0.60);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.aptora-content-shell {
    background: transparent;
}
.aptora-content-card {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border-color: rgba(255, 255, 255, 0.48);
    box-shadow: none;
}
[data-theme="dark"] .aptora-content-card {
    background: rgba(26, 24, 25, 0.80);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    border-color: rgba(255, 255, 255, 0.07);
}

/* T3 dark mode — reduced body aurora (dark bg amplifies bloom so we need less) */
[data-theme="dark"] body {
    background:
        radial-gradient(ellipse 120% 65% at 50% -8%, rgba(26, 156, 75, 0.11) 0%, transparent 62%),
        radial-gradient(ellipse 65% 55% at 90% 108%, rgba(20, 184, 120, 0.08) 0%, transparent 55%),
        var(--page-bg) !important;
}

/* T3 dark mode — frosted glass overrides */
[data-theme="dark"] .hub-card {
    background: var(--chrome-glass-bg);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    border-color: var(--chrome-glass-border);
}
[data-theme="dark"] .hub-card:hover {
    background: rgba(26, 156, 75, 0.14);
}
[data-theme="dark"] .account-shell .card {
    background: var(--chrome-glass-bg);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    border-color: var(--chrome-glass-border);
}
[data-theme="dark"] .timmy-card {
    background: rgba(22, 20, 21, 0.84);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    border-color: rgba(255, 255, 255, 0.07);
}
[data-theme="dark"] .timmy-sidebar {
    background: var(--chrome-glass-bg);
    backdrop-filter: var(--chrome-glass-backdrop);
    -webkit-backdrop-filter: var(--chrome-glass-backdrop);
}
[data-theme="dark"] .aptora-tabs {
    background: rgba(22, 20, 21, 0.84);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
}
[data-theme="dark"] .aptora-tabs-secondary {
    background: rgba(12, 10, 11, 0.60);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
}
[data-theme="dark"] .account-shell:has(.aptora-tabs-secondary) .aptora-tabs-secondary {
    border-bottom-color: rgba(26, 156, 75, 0.15);
}

/* ==========================================================================
   Round AH — Conversation Sidebar + 2-col layout + Claude.ai UX
   ========================================================================== */

.timmy-shell-2col {
    display: flex;
    min-height: 0;
    overflow: clip;
}
.timmy-shell-2col .timmy-shell-main {
    flex: 1;
    min-width: 0;
    overflow: auto;
}

.timmy-sidebar {
    background: var(--chrome-glass-bg);
    backdrop-filter: var(--chrome-glass-backdrop);
    -webkit-backdrop-filter: var(--chrome-glass-backdrop);
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: var(--sidebar-w);
    transition: width 200ms ease-out;
    overflow: clip;
}

.timmy-sidebar.collapsed {
    width: 0;
}
.timmy-sidebar-load-more {
    background: var(--aptora-card-bg, #fff);
    border: 1px solid var(--aptora-border);
    color: var(--aptora-ink);
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    font-weight: 600;
    transition: all 150ms ease-out;
    width: 100%;
    margin-top: 0.5rem;
}
.timmy-sidebar-load-more:hover {
    background: var(--aptora-green-subtle);
    border-color: var(--aptora-green);
    color: var(--aptora-green);
}

.timmy-sidebar-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem 0;
}
.timmy-sidebar-group {
    margin-bottom: 0.75rem;
}
.timmy-sidebar-group-header {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--aptora-slate);
    padding: 0.4rem 0.85rem 0.25rem;
    margin: 0;
}
.timmy-conversation-item {
    padding: 0.5rem 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--aptora-ink);
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 100ms ease-out;
}
.timmy-conversation-item:hover {
    background: var(--aptora-green-subtle);
}
.timmy-conversation-item.active {
    background: var(--aptora-green-subtle);
    border-left-color: var(--aptora-green);
    font-weight: 600;
    animation: sidebar-glow-pulse 2.5s ease-in-out infinite;
}
.timmy-conv-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--fs-sm);
}
.timmy-conv-delete {
    background: transparent;
    border: none;
    color: var(--aptora-slate);
    cursor: pointer;
    opacity: 0;
    transition: opacity 150ms;
}
.timmy-conversation-item:hover .timmy-conv-delete {
    opacity: 1;
}
.timmy-conv-delete:hover {
    color: var(--aptora-danger, #d33);
}

/* Mobile drawer */
@media (max-width: 768px) {
    .timmy-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100svh;
        z-index: 1000;
        transform: translateX(-100%);
        box-shadow: var(--aptora-shadow);
    }
    .timmy-sidebar.drawer-open {
        transform: translateX(0);
    }
}
@media (min-width: 769px) and (max-width: 991px) {
    .timmy-sidebar:not(.drawer-open) {
        width: 64px;
    }
}

/* Suggested prompts (Items 10) */
.timmy-suggested-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    justify-content: center;
}
.timmy-suggested-prompt {
    background: var(--aptora-card-bg, #fff);
    border: 1px solid var(--aptora-border);
    color: var(--aptora-ink);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill, 999px);
    cursor: pointer;
    font-size: var(--fs-sm);
    transition: all 150ms ease-out;
}
.timmy-suggested-prompt:hover {
    background: var(--aptora-green-subtle);
    border-color: var(--aptora-green);
    color: var(--aptora-green);
}

/* ==========================================================================
   Round AJ — Chat content-area centering (Claude.ai-style)
   ========================================================================== */
.timmy-conversation-area {
    max-width: none;
    margin: 0;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 0;
    container-type: inline-size;
    container-name: conversation;
}
.timmy-conversation-area .timmy-card-wrapper {
    padding: 0;
    height: 100%;
    align-items: stretch;
}
.timmy-conversation-area .timmy-card {
    max-width: none;
    max-height: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    height: 100%;
}
.timmy-conversation-area .msg-user .bubble,
.timmy-conversation-area .msg-bot .bubble {
    max-width: 75%;
}
/* Bubble width responds to conversation column width, not viewport width.
   Collapses to full-width when the column narrows (e.g. drawer open on tablet). */
@container conversation (width < 520px) {
    .msg-user .bubble,
    .msg-bot .bubble { max-width: 100%; }
}
@container conversation (520px <= width < 700px) {
    .msg-user .bubble { max-width: 85%; }
    .msg-bot .bubble  { max-width: 92%; }
}

/* ==========================================================================
   T3 — Auth page card glow + glass thinning
   Scoped to auth pages via the non-ambient .auth-aurora sibling selector so
   billing/account cards are unaffected.
   box-shadow renders outside overflow:hidden so the vignette glow escapes.
   ========================================================================== */

/* Thin the glass so aurora bleeds through the card face; z-index:1 sits above
   the page-shell::before lava layer (z-index:0).
   --card-glow is a @property <number> animated by card-glow-pulse so the halo
   breathes with the aurora rather than sitting as a static ring. */
.auth-aurora:not(.auth-aurora--ambient) ~ .aptora-page-shell .aptora-form-card {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.40);
    border-color: rgba(255, 255, 255, 0.38);
    /* animation: card-glow-pulse 11s ease-in-out -4s infinite; */
    box-shadow: none;
        /* 0 0  55px 18px rgba(26, 156, 75, var(--card-glow)),
           0 0 110px 40px rgba(26, 156, 75, calc(var(--card-glow) * 0.45)); */
}

/* Dark mode: restore legible glass */
[data-theme="dark"] .auth-aurora:not(.auth-aurora--ambient) ~ .aptora-page-shell .aptora-form-card {
    background: rgba(28, 26, 27, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
        /* 0 0  55px 18px rgba(26, 156, 75, calc(var(--card-glow) * 0.5)),
           0 0 110px 40px rgba(26, 156, 75, calc(var(--card-glow) * 0.22)); */
}

/* ==========================================================================
   T3 — Frosted chat elements
   All scoped to .timmy-conversation-area so widget / non-conversation
   card contexts are unaffected.
   ========================================================================== */

/* Bot bubble — primary reading surface */
.timmy-conversation-area .msg-bot .bubble {
    background: rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    position: relative;
    overflow: hidden;
}

.timmy-conversation-area .msg-bot .bubble::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image: url('/images/noise.svg');
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity: var(--grain-opacity, 0.07);
    mix-blend-mode: overlay;
    z-index: 0;
}

[data-theme="dark"] .timmy-conversation-area .msg-bot .bubble::before {
    opacity: 0.03;
}


/* User bubble — semi-transparent green glass */
.timmy-conversation-area .msg-user .bubble {
    background: rgba(26, 156, 75, 0.72);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* Footer / query box strip */
.timmy-conversation-area .timmy-footer {
    background: rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-top: none;
}

/* Query textarea */
.timmy-conversation-area .timmy-footer textarea {
    background: rgba(255, 255, 255, 0.40);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: rgba(26, 156, 75, 0.22);
}

/* Thinking / reasoning panel */
.timmy-conversation-area .thinking-panel {
    background: rgba(26, 156, 75, 0.07);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ── Dark mode overrides ── */
[data-theme="dark"] .timmy-conversation-area .msg-bot .bubble {
    background: rgba(28, 26, 27, 0.72);
    border-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .timmy-conversation-area .msg-user .bubble {
    background: rgba(18, 110, 52, 0.82);
}
[data-theme="dark"] .timmy-conversation-area .timmy-footer {
    background: rgba(15, 13, 14, 0.68);
    border-top: none;
}
[data-theme="dark"] .timmy-conversation-area .timmy-footer textarea {
    background: rgba(28, 26, 27, 0.58);
    border-color: rgba(26, 156, 75, 0.18);
}
[data-theme="dark"] .timmy-conversation-area .thinking-panel {
    background: rgba(26, 156, 75, 0.06);
}

/* ==========================================================================
   Round AM-SPEC — Aptora × Apple reusable primitives
   See UI-CONSISTENCY-SPEC.md (repo root) for the design system.
   Use these classes in inline-HTML MapGet handlers + Razor components for
   auth, billing, account, and other non-chat pages. Chat root keeps its
   .timmy-* primitives separately (full-bleed surface, no card chrome).
   ========================================================================== */

.aptora-page-shell {
    min-height: calc(100svh - var(--topbar-h));
    background: var(--page-bg);
    padding: var(--space-6) var(--space-4);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.aptora-form-card {
    background: var(--chrome-glass-bg);
    backdrop-filter: var(--chrome-glass-backdrop);
    -webkit-backdrop-filter: var(--chrome-glass-backdrop);
    border-radius: var(--radius-card);
    padding: var(--space-6);
    box-shadow: var(--aptora-shadow);
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.55);
    position: relative;
    overflow: hidden;
}

/* Grain texture overlay — subtle Perlin noise at 4% adds material depth */
.aptora-form-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image: url('/images/noise.svg');
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity: var(--grain-opacity, 0.04);
    mix-blend-mode: overlay;
    z-index: 0;
}

/* Ensure card content sits above the grain layer */
.aptora-form-card > * {
    position: relative;
    z-index: 1;
}
.aptora-form-card--narrow { max-width: min(380px, 100%); }
.aptora-form-card--medium { max-width: min(480px, 100%); }
.aptora-form-card--wide   { max-width: min(640px, 100%); }

.aptora-form-title {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--aptora-ink);
    margin: 0 0 var(--space-5);
    text-align: center;
    letter-spacing: -0.01em;
}

.aptora-label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--aptora-slate);
    margin-bottom: var(--space-2);
}

.aptora-input {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--input-text);
    background: var(--input-bg);
    border: 1px solid var(--aptora-input-border);
    border-radius: var(--radius-input);
    padding: var(--space-3);
    margin-bottom: var(--space-4);
    transition: var(--aptora-transition);
}
.aptora-input:focus,
.aptora-input:focus-visible {
    outline: 0;
    border-color: var(--aptora-green);
    box-shadow: var(--aptora-focus-ring);
}
.aptora-input::placeholder { color: var(--input-placeholder); }
.aptora-input--code {
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: 0.5rem;
    font-variant-numeric: tabular-nums;
}

.aptora-button-primary,
.aptora-button-secondary,
.aptora-button-ghost {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    border-radius: var(--aptora-radius-button);
    cursor: pointer;
    transition: var(--aptora-transition);
    text-decoration: none;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
}
.aptora-button-primary {
    background: var(--aptora-green);
    color: #ffffff;
    border: 1px solid var(--aptora-green);
    padding: var(--aptora-button-padding);
    width: 100%;
    position: relative;
    overflow: hidden;
    transition: background 300ms ease-out, border-color 300ms ease-out, transform 300ms ease-out, box-shadow 300ms ease-out;
}
.aptora-button-primary:hover {
    background: var(--aptora-green-hover);
    border-color: var(--aptora-green-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 156, 75, 0.28);
}
.aptora-button-primary:active {
    transform: scale(0.97) translateY(1px);
    filter: brightness(0.92);
    transition: transform 120ms ease-out, filter 120ms ease-out;
}
.aptora-button-primary:focus-visible { box-shadow: var(--aptora-focus-ring); outline: 0; }

.aptora-button-secondary {
    background: transparent;
    color: var(--aptora-green);
    border: 1px solid var(--aptora-green);
    padding: calc(var(--space-3) + 2px) var(--space-6);
    width: 100%;
}
.aptora-button-secondary:hover { background: var(--aptora-green-subtle); }
.aptora-button-secondary:focus-visible { box-shadow: var(--aptora-focus-ring); outline: 0; }
.aptora-button-secondary--danger {
    color: var(--text-error);
    border-color: var(--text-error);
}
.aptora-button-secondary--danger:hover { background: var(--bg-error-subtle); }

.aptora-button-ghost {
    background: transparent;
    color: var(--aptora-green);
    border: 1px solid transparent;
    padding: var(--space-2) var(--space-4);
}
.aptora-button-ghost:hover { text-decoration: underline; }

.aptora-link-inline {
    color: var(--aptora-green);
    text-decoration: none;
    font-weight: 500;
    transition: var(--aptora-transition);
}
.aptora-link-inline:hover { color: var(--aptora-green-hover); text-decoration: underline; }

.aptora-banner {
    font-family: var(--font-body);
    font-size: 0.875rem;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-input);
    border: 1px solid transparent;
    margin-bottom: var(--space-4);
}
.aptora-banner--info {
    color: var(--aptora-slate);
    background: rgba(74,85,103,0.08);
    border-color: var(--aptora-border);
}
.aptora-banner--success {
    color: var(--text-success);
    background: var(--bg-success-subtle);
    border-color: var(--aptora-green-ring);
}
.aptora-banner--warning {
    color: var(--text-warning);
    background: var(--bg-warning-subtle);
    border-color: rgba(199,119,0,0.25);
}
.aptora-banner--error {
    color: var(--text-error);
    background: var(--bg-error-subtle);
    border-color: rgba(211,47,47,0.25);
}

.aptora-section-divider {
    border: none;
    border-top: 1px solid var(--separator);
    margin: var(--space-5) 0;
}

.aptora-helper-text {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: calc(var(--space-2) * -1 + var(--space-1));
    margin-bottom: var(--space-4);
}
.aptora-helper-text--error { color: var(--text-error); }

.aptora-honeypot {
    position: absolute;
    left: -9999px;
}

.aptora-content-shell {
    background: var(--page-bg);
    padding: var(--space-6) var(--space-4);
    min-height: calc(100svh - var(--topbar-h));
    box-sizing: border-box;
}

.aptora-content-card {
    background: var(--card-bg);
    max-width: min(720px, 100%);
    margin: 0 auto;
    border-radius: var(--radius-card);
    padding: var(--space-6) calc(var(--space-6) + var(--space-2));
    box-shadow: var(--aptora-shadow);
    border: 1px solid var(--aptora-border);
    color: var(--aptora-ink);
}

.aptora-content-card h1 {
    color: var(--aptora-green);
    margin: 0 0 var(--space-4);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
}

.aptora-content-card h2 {
    color: var(--aptora-ink);
    font-size: var(--fs-2xl);
    font-weight: 600;
    line-height: 1.2;
}

.aptora-content-card a {
    color: var(--aptora-green);
}

/* Mobile: tighter page padding so forms breathe */
@media (max-width: 640px) {
    .aptora-page-shell { padding: var(--space-4) var(--space-3); }
    .aptora-form-card { padding: var(--space-5); }
    .aptora-content-shell { padding: var(--space-4) var(--space-3); }
    .aptora-content-card { padding: var(--space-5); }
}

/* Round AP — What's New modal */
.timmy-whatsnew-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; padding: 1rem;
}
.timmy-whatsnew-modal {
    background: var(--surface, #fff);
    color: var(--text-primary, #222);
    border-radius: 8px;
    max-width: 720px; width: 100%;
    max-height: 85svh; display: flex; flex-direction: column;
    box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}
.timmy-whatsnew-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--border, #e5e5e5);
}
.timmy-whatsnew-modal-header h3 { margin: 0; font-size: 1.25rem; }
.timmy-whatsnew-close {
    background: transparent; border: none; cursor: pointer;
    font-size: 1.5rem; line-height: 1; color: var(--text-secondary, #666);
}
.timmy-whatsnew-modal-body {
    overflow-y: auto; padding: 1rem 1.25rem;
}
.timmy-whatsnew-item + .timmy-whatsnew-item {
    margin-top: 1.5rem; padding-top: 1.5rem;
    border-top: 1px solid var(--border, #e5e5e5);
}
.timmy-whatsnew-meta {
    display: flex; gap: 0.75rem;
    font-size: var(--fs-sm); color: var(--text-secondary, #666);
    margin-bottom: 0.25rem;
}
.timmy-whatsnew-version {
    background: var(--brand-secondary, #1A9C4B);
    color: #fff;
    padding: 0.1rem 0.5rem; border-radius: 4px;
    font-weight: 600;
}
.timmy-whatsnew-item h4 { margin: 0.25rem 0 0.5rem 0; font-size: 1.1rem; }
.timmy-whatsnew-body p { margin: 0.25rem 0; }

/* Archive page (/account/whatsnew) reuses simpler markup */
.whatsnew-archive-item + .whatsnew-archive-item {
    margin-top: 1.5rem; padding-top: 1.5rem;
    border-top: 1px solid var(--border, #e5e5e5);
}
.whatsnew-archive-meta {
    display: flex; gap: 0.75rem;
    font-size: var(--fs-sm); color: var(--text-secondary, #666);
}
.whatsnew-archive-version {
    background: var(--brand-secondary, #1A9C4B);
    color: #fff;
    padding: 0.1rem 0.5rem; border-radius: 4px;
    font-weight: 600;
}

/* Round AR-FIXUP-3: Prominent auth-swap link primitive */
.aptora-auth-swap {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-body);
    text-align: center;
    margin-top: var(--space-6);
    margin-bottom: 0;
}
.aptora-auth-swap a {
    color: var(--aptora-green);
    font-weight: 600;
    text-decoration: none;
    transition: var(--aptora-transition);
}
.aptora-auth-swap a:hover {
    color: var(--aptora-green-hover);
    text-decoration: underline;
}

/* Inline hint below a form field — used for "Forgot password?" below the password input */
.auth-field-hint {
    text-align: right;
    margin-top: calc(var(--space-1) * -1);
    margin-bottom: var(--space-3);
    font-size: var(--fs-sm);
}

/* ==========================================================================
   Breadcrumb — nav-refactor
   Provides second wayfinding signal below account subnav (active pill is first)
   ========================================================================== */

.aptora-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 2rem;
    font-size: 0.75rem;
    background: var(--page-bg);
    border-bottom: 1px solid var(--aptora-border);
}

.aptora-breadcrumb a {
    color: var(--aptora-slate);
    text-decoration: none;
    font-weight: 400;
    transition: color 0.15s ease;
}

.aptora-breadcrumb a:hover { color: var(--aptora-green); }

.aptora-breadcrumb-sep {
    color: var(--aptora-border);
    user-select: none;
    font-size: var(--fs-sm);
    line-height: 1;
}

.aptora-breadcrumb-current {
    color: var(--aptora-ink);
    font-weight: 500;
}

/* ── Tier-2 backfill: hub-card rules moved from AccountShell inline style ── */
/* Required because tier-2 Program.cs no longer has these in its inline style */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; }

.hub-card {
    background: rgba(255, 255, 255, 0.76);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border-radius: var(--radius-card);
    padding: var(--space-4);
    box-shadow: var(--aptora-shadow);
    border: 1px solid rgba(255, 255, 255, 0.5);
    text-decoration: none;
    color: inherit;
    display: block;
    transition: border-color var(--transition-standard), background var(--transition-standard), transform var(--transition-standard), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: no-preference) {
    .hub-grid .hub-card:nth-child(2) { transition-delay: 55ms; }
    .hub-grid .hub-card:nth-child(3) { transition-delay: 110ms; }
    .hub-grid .hub-card:nth-child(4) { transition-delay: 165ms; }
    .hub-grid .hub-card:nth-child(5) { transition-delay: 220ms; }
    .hub-grid .hub-card:nth-child(6) { transition-delay: 275ms; }
}
.hub-card:hover {
    border-color: var(--aptora-green);
    background: var(--aptora-green-subtle);
    transform: translateX(2px);
    box-shadow: var(--aptora-shadow);
}
.hub-card:hover h3 { color: var(--aptora-green); }
.hub-card h3 {
    margin: 0 0 var(--space-2);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.hub-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.5;
    letter-spacing: 0.01em;
}
.hub-card-meta { color: var(--text-secondary); font-size: var(--fs-sm); margin: 0; }
.hub-card-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: var(--space-2); margin-bottom: 0; line-height: 1.4; }

/* Stagger card entrance — gestalt common fate groups the grid visually */
.hub-grid .hub-card:nth-child(1)  { animation-delay: 0.00s; }
.hub-grid .hub-card:nth-child(2)  { animation-delay: 0.04s; }
.hub-grid .hub-card:nth-child(3)  { animation-delay: 0.08s; }
.hub-grid .hub-card:nth-child(4)  { animation-delay: 0.12s; }
.hub-grid .hub-card:nth-child(5)  { animation-delay: 0.16s; }
.hub-grid .hub-card:nth-child(6)  { animation-delay: 0.20s; }
.hub-grid .hub-card:nth-child(7)  { animation-delay: 0.24s; }
.hub-grid .hub-card:nth-child(8)  { animation-delay: 0.28s; }

.hub-section-label {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--aptora-slate);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: var(--space-4) 0 var(--space-3);
    padding-bottom: var(--space-1);
    border-bottom: 2px solid var(--aptora-green-subtle);
}
.hub-section-label:first-child { margin-top: 0; }

/* ==========================================================================
   Usage counter — lightweight stat near query box (T2+ redesign)
   ========================================================================== */

.usage-counter {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-2);
    user-select: none;
}

.usage-counter-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    animation: counter-appear 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.usage-counter.usage-ok .usage-counter-value   { color: var(--aptora-green); }
.usage-counter.usage-warn .usage-counter-value { color: var(--text-warning); }
.usage-counter.usage-critical .usage-counter-value { color: var(--text-error); }

@keyframes counter-appear {
    from { opacity: 0; transform: translateY(-5px) scale(0.85); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}



/* ==========================================================================
   T2++ extracted inline styles — classes replacing Index.razor inline styles
   ========================================================================== */

/* Select with auto-width for chat settings bar */
.select-inline { width: auto; }

/* Deployment type buttons row */
.deployment-buttons {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    flex-wrap: wrap;
}

/* Thinking step detail indent */
.thinking-step-details { margin-left: var(--space-3); }

/* Smaller confidence badge in source list */
.confidence-badge--sm { font-size: var(--fs-xs); }

/* Spinner in send button inherits button color */
.btn-send .spinner-border { color: #fff; }

/* Escalation error message */
.escalation-error-msg {
    color: var(--feedback-active-red);
    font-size: var(--fs-sm);
    margin-top: var(--space-2);
}

/* Follow-up suggestion area margin */
.follow-up-suggestions { margin-top: var(--space-2); }


/* ==========================================================================
   Upgrade / Account-Upgrade page classes
   ========================================================================== */

/* Upgrade page: let body.account-shell::before lava-lamp + ambient blobs show through */
body.account-shell .aptora-page-shell {
    background: transparent;
}

/* When a non-ambient auth-aurora is present (upgrade page), its own vivid ::before is the
   intended lava-lamp. Suppress the ambient body::before to prevent double-stacking. */
body.account-shell:has(> .auth-aurora:not(.auth-aurora--ambient))::before {
    display: none;
}

.upgrade-wrap {
    width: 100%;
    max-width: 1000px;
    animation: timmy-fade-in 0.3s ease both;
}

.upgrade-wrap h1 {
    color: var(--aptora-ink);
    text-align: center;
    font-size: var(--fs-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: var(--lh-tight);
    margin: 0 0 var(--space-1);
}

.upgrade-wrap .upgrade-subtitle {
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    margin: 0 0 var(--space-5);
}

/* Pill toggle matching account billing cadence selector */
.upgrade-toggle {
    display: flex;
    justify-content: center;
    background: var(--chrome-glass-bg);
    backdrop-filter: var(--chrome-glass-backdrop);
    -webkit-backdrop-filter: var(--chrome-glass-backdrop);
    border: 1px solid var(--chrome-glass-border);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
    width: fit-content;
    margin: 0 auto var(--space-6);
}

.upgrade-toggle button {
    font-family: var(--font-body);
    padding: var(--space-2) var(--space-5);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 999px;
    cursor: pointer;
    font-weight: 500;
    font-size: var(--fs-sm);
    transition: var(--aptora-transition);
    position: relative;
}

.upgrade-toggle button.active {
    background: var(--aptora-green);
    color: #fff;
    box-shadow: 0 1px 4px rgba(26, 156, 75, 0.35);
}

/* Annual button: amber shimmer on hover draws eye to savings */
#btn-annual:not(.active) { overflow: hidden; }
#btn-annual:not(.active)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 20%, rgba(245, 158, 11, 0.38) 50%, transparent 80%);
    transform: translateX(-150%);
    opacity: 0;
    pointer-events: none;
}
#btn-annual:not(.active):hover::after {
    animation: save-shimmer 0.55s ease-in forwards;
}
@keyframes save-shimmer {
    0%   { transform: translateX(-150%); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translateX(250%); opacity: 0; }
}

/* Glow pulse confirms Annual selection */
#btn-annual.active { animation: annual-activate 0.7s ease-out both; }
@keyframes annual-activate {
    0%   { box-shadow: 0 0 0 6px rgba(26, 156, 75, 0.35); }
    100% { box-shadow: 0 1px 4px rgba(26, 156, 75, 0.35); }
}

/* Price scale bounce — highlights value change on toggle */
.price-flash { animation: price-flash 0.5s ease-out both; }
@keyframes price-flash {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* Force all 4 plans on a single row */
.upgrade-plans {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: stretch;
}

@media (max-width: 860px) {
    .upgrade-plans { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
    .upgrade-plans { grid-template-columns: 1fr; }
}

.upgrade-plan {
    background: var(--chrome-glass-bg);
    backdrop-filter: var(--chrome-glass-backdrop);
    -webkit-backdrop-filter: var(--chrome-glass-backdrop);
    border-radius: var(--radius-card);
    padding: var(--space-5);
    box-shadow: var(--aptora-shadow);
    border: 2px solid var(--chrome-glass-border);
    transition: var(--aptora-transition);
    display: flex;
    flex-direction: column;
}

.upgrade-plan:hover {
    box-shadow: var(--aptora-shadow-hover);
    transform: translateY(-2px);
    border-color: var(--aptora-green-ring);
}

.upgrade-plan.current {
    border-color: var(--aptora-green);
    background: var(--aptora-green-subtle);
}

.upgrade-plan h3 {
    margin: 0 0 var(--space-2);
    color: var(--aptora-green);
    font-size: var(--fs-md);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.upgrade-plan .price {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--aptora-ink);
    margin: var(--space-2) 0 0;
    line-height: var(--lh-tight);
}

.upgrade-plan .price-period,
.upgrade-plan .per {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--text-secondary);
}

.upgrade-plan .plan-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .25rem; }
.upgrade-plan .plan-header h3 { margin: 0; }
.upgrade-plan .plan-active-badge { font-size: var(--fs-xs); font-weight: 700; color: var(--aptora-green); background: rgba(26,156,75,0.15); padding: .1rem .5rem; border-radius: 999px; letter-spacing: 0.04em; text-transform: uppercase; flex-shrink: 0; }

.upgrade-plan .desc {
    color: var(--text-secondary);
    margin: var(--space-3) 0 var(--space-4);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    flex: 1;
}

.upgrade-plan ul.desc { padding-left: 1.1rem; }
.upgrade-plan ul.desc li { margin-bottom: .25rem; }

.upgrade-plan .cta, a.cta {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-6);
    background: var(--aptora-green);
    color: #fff;
    border: none;
    border-radius: var(--aptora-radius-button);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-sm);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    line-height: var(--lh-normal);
    transition: var(--aptora-transition);
    box-sizing: border-box;
    margin-top: auto;
}

.upgrade-plan .cta:hover, a.cta:hover { background: var(--aptora-green-hover); }
.upgrade-plan .cta:active, a.cta:active { transform: scale(0.98); }
.upgrade-plan .cta[disabled], a.cta[disabled] {
    background: var(--aptora-green-subtle);
    color: var(--aptora-green);
    cursor: not-allowed;
    pointer-events: none;
}

.upgrade-current-badge {
    display: inline-block;
    background: rgba(26, 156, 75, 0.15);
    color: var(--aptora-green);
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}

.upgrade-footer-cta { text-align: center; margin-top: var(--space-8); }
.upgrade-footer-cta button {
    font-family: var(--font-body);
    padding: var(--space-3) var(--space-6);
    background: transparent;
    color: var(--aptora-slate);
    border: 1px solid var(--aptora-border);
    border-radius: var(--aptora-radius-button);
    font-weight: 500;
    cursor: pointer;
    transition: var(--aptora-transition);
    font-size: var(--fs-sm);
}
.upgrade-footer-cta button:hover { background: var(--aptora-green-subtle); border-color: var(--aptora-green-ring); color: var(--aptora-green); }
.upgrade-footer-cta button[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ==========================================================================
   Account Shell pages — migrated from AccountShell inline style block
   Scoped under body.account-shell. Now live via CSS volume mount.
   ========================================================================== */

.account-shell .main { padding: var(--space-4) var(--space-4) var(--space-); max-width: 1200px; margin: 0 auto; animation: timmy-fade-in 0.22s ease both; }
.account-shell h1 { color: var(--text-primary); margin: var(--space-2) 0 var(--space-2); font-size: var(--fs-2xl); font-weight: 700; line-height: var(--lh-tight); }
.account-shell h2 { color: var(--aptora-ink); font-size: var(--fs-xl); font-weight: 600; line-height: var(--lh-snug); }
.account-shell .sub { color: var(--text-secondary); margin: 0 0 var(--space-3); font-size: var(--fs-sm); }
.account-shell .card { background: var(--chrome-glass-bg); backdrop-filter: var(--chrome-glass-backdrop); -webkit-backdrop-filter: var(--chrome-glass-backdrop); border-radius: var(--radius-card); padding: var(--space-5); box-shadow: var(--aptora-shadow); margin-bottom: var(--space-4); border: 1px solid var(--chrome-glass-border); }
.account-shell .card h2 { margin: 0 0 var(--space-4); color: var(--aptora-ink); font-size: var(--fs-md); }
.account-shell .field { margin-bottom: var(--space-4); }
.account-shell label { display: block; font-size: var(--fs-sm); font-weight: 400; margin-bottom: var(--space-1); color: var(--text-secondary); }
.account-shell input[type=text], .account-shell input[type=number], .account-shell input[type=email] { width: 100%; padding: var(--space-3); border: 1px solid var(--input-border); border-radius: var(--radius-input); font-size: var(--fs-base); box-sizing: border-box; background: var(--input-bg); color: var(--input-text); transition: var(--aptora-transition); }
.account-shell input[type=text]:focus, .account-shell input[type=number]:focus, .account-shell input[type=email]:focus { border-color: var(--aptora-green); outline: 0; box-shadow: var(--aptora-focus-ring); }
.account-shell .submit { padding: var(--aptora-button-padding); background: var(--aptora-green); color: #fff; border: none; border-radius: var(--aptora-radius-button); font-size: var(--fs-base); font-weight: 600; cursor: pointer; transition: var(--aptora-transition); }
.account-shell .submit:hover { background: var(--aptora-green-hover); }
.account-shell .submit:active { transform: scale(0.98); }
.account-shell .submit:disabled { background: var(--aptora-green-subtle); color: var(--aptora-green); cursor: not-allowed; }
.account-shell .submit.danger { background: var(--text-error); }
.account-shell .submit.danger:hover { background: #b71c1c; }
.account-shell .submit.secondary { background: var(--card-bg); color: var(--aptora-green); border: 1px solid var(--aptora-green); }
.account-shell .submit.secondary:hover { background: var(--aptora-green-subtle); }
.account-shell table { width: 100%; border-collapse: collapse; }
.account-shell th, .account-shell td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--aptora-border); font-size: var(--fs-sm); color: var(--aptora-ink); }
.account-shell th { background: var(--page-bg); color: var(--text-secondary); font-weight: 600; }
.account-shell .err { background: var(--bg-error-subtle); color: var(--text-error); padding: var(--space-2) var(--space-4); border-radius: var(--radius-small); margin-bottom: var(--space-4); font-size: var(--fs-sm); }
.account-shell .ok  { background: var(--bg-success-subtle); color: var(--text-primary); padding: var(--space-2) var(--space-4); border-radius: var(--radius-small); margin-bottom: var(--space-4); font-size: var(--fs-sm); }
.account-shell .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.account-shell .badge { display: inline-block; padding: .15rem .5rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; }
.account-shell .badge.default { background: var(--bg-success-subtle); color: var(--text-primary); }
.account-shell .row-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.account-shell .row-actions form { margin: 0; display: inline-flex; }
.account-shell .row-actions button, .account-shell .row-actions a { display: inline-flex !important; align-items: center; padding: .2rem .65rem !important; font-size: var(--fs-xs) !important; font-family: var(--font-body) !important; font-weight: 500 !important; border-radius: var(--radius-small) !important; border: 1px solid var(--aptora-border) !important; background: var(--page-bg) !important; color: var(--aptora-slate) !important; cursor: pointer; white-space: nowrap; transition: var(--aptora-transition); text-decoration: none !important; width: auto !important; }
.account-shell .row-actions button:hover, .account-shell .row-actions a:hover { background: var(--aptora-green-subtle) !important; border-color: var(--aptora-green) !important; color: var(--aptora-green) !important; }
.account-shell .row-actions button.danger, .account-shell .row-actions a.danger { border-color: rgba(211,47,47,0.15) !important; color: var(--text-error) !important; background: var(--bg-error-subtle) !important; }
.account-shell .row-actions button.danger:hover, .account-shell .row-actions a.danger:hover { background: var(--bg-error-subtle) !important; border-color: var(--text-error) !important; }
@media (max-width: 768px) { .account-shell .main { padding: var(--space-4); } .account-shell .grid2 { grid-template-columns: 1fr; } }

/* ==========================================================================
   Billing page styles — migrated from billingBodyHtml inline style block
   Scoped under .billing-page wrapper div inside AccountShell main.
   ========================================================================== */

.billing-page .billing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
@media (max-width: 860px) { .billing-page .billing-grid { grid-template-columns: 1fr; } }
/* Payment card (right column) — compact field spacing matching payment methods form */
#sticky-pricing-card.card { position: sticky; top: var(--space-4); }
#sticky-pricing-card .field { margin-bottom: var(--space-1); }
#sticky-pricing-card label { margin-bottom: 1px; font-size: var(--fs-xs); }
#sticky-pricing-card input { padding: var(--space-2) var(--space-3); }
#sticky-pricing-card .ccfield { height: 32px; }
#sticky-pricing-card h2 { margin-bottom: var(--space-3); font-size: var(--fs-md); }
.billing-page .sticky-card h3 { margin: 0 0 .25rem; color: var(--aptora-green); font-size: var(--fs-md); }
.billing-page .sticky-card .big-price { font-size: var(--fs-2xl); font-weight: 700; color: var(--aptora-ink); margin: .5rem 0; line-height: 1; }
.billing-page .sticky-card .big-price .per { font-size: var(--fs-base); font-weight: 400; color: var(--text-secondary); }
.billing-page .sticky-card ul { margin: .75rem 0; padding-left: 1.1rem; font-size: var(--fs-sm); line-height: 1.7; }
.billing-page .sticky-card .tier-name { display: inline-block; background: rgba(74,85,103,0.08); color: var(--aptora-green); font-size: var(--fs-xs); font-weight: 600; padding: .2rem .6rem; border-radius: 999px; margin-bottom: .5rem; }
.billing-page .sticky-card .placeholder { color: var(--text-muted); font-size: var(--fs-sm); font-style: italic; }
.billing-page .trust-line { color: var(--aptora-slate); font-size: var(--fs-sm); margin-bottom: 1.25rem; text-align: center; }
.billing-page .status { background: var(--card-bg); border-radius: var(--radius-card); padding: var(--space-4); margin-bottom: var(--space-5); box-shadow: var(--aptora-shadow); }
.billing-page .status .row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.billing-page .badge.trial { background: var(--page-bg); color: var(--aptora-slate); border: 1px solid var(--aptora-border); }
.billing-page .badge.active { background: var(--bg-success-subtle); color: var(--aptora-green); }
.billing-page .badge.free { background: rgba(74,85,103,0.08); color: var(--aptora-slate); }
.billing-page .badge.expired { background: var(--bg-error-subtle); color: var(--text-error); }
.billing-page .coupon-preview-box { background: var(--card-bg); border-radius: var(--radius-card); padding: var(--space-4); margin-bottom: var(--space-5); box-shadow: var(--aptora-shadow); }
.billing-page .coupon-badge { display: inline-block; padding: .15rem .5rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; background: var(--bg-success-subtle); color: var(--aptora-green); margin-left: .35rem; }
.billing-page .plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; align-items: stretch; }
.billing-page .plan { background: var(--chrome-glass-bg); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4) var(--space-4); border: 2px solid transparent; cursor: pointer; transition: var(--aptora-transition); display: flex; flex-direction: column; backdrop-filter: var(--chrome-glass-backdrop); border-color: var(--chrome-glass-border); }
.billing-page .plan .desc { flex: 1; min-height: 0; }
.billing-page .plan:hover { border-color: var(--aptora-green); transform: translateY(-2px); box-shadow: var(--aptora-shadow-hover); }
.billing-page .plan:active { transform: scale(0.98); }
.billing-page .plan.selected { border-color: var(--aptora-green); background: var(--aptora-green-subtle); box-shadow: var(--aptora-shadow-hover); }
.billing-page .plan.current { border-color: var(--aptora-green); background: var(--aptora-green-subtle); cursor: default; pointer-events: none; }
.billing-page .plan-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .25rem; }
.billing-page .plan-header h3 { margin: 0; }
.billing-page .plan-active-badge { font-size: var(--fs-xs); font-weight: 700; color: var(--aptora-green); background: rgba(26,156,75,0.15); padding: .1rem .5rem; border-radius: 999px; letter-spacing: 0.04em; text-transform: uppercase; flex-shrink: 0; }
.billing-page .plan h3 { margin: 0 0 .25rem; color: var(--aptora-green); font-size: var(--fs-md); font-weight: 600; }
.billing-page .plan .price { font-size: var(--fs-xl); font-weight: 700; margin: .25rem 0 .5rem; color: var(--aptora-ink); }
.billing-page .plan .price .per { font-size: var(--fs-sm); font-weight: 400; color: var(--text-secondary); }
.billing-page .plan ul { margin: .5rem 0; padding-left: 1.1rem; font-size: var(--fs-sm); }
.billing-page .plan .current-badge { display: inline-block; background: var(--aptora-green); color: #fff; font-size: var(--fs-xs); font-weight: 600; padding: .15rem .5rem; border-radius: 999px; margin-left: .5rem; }
.billing-page .form { background: var(--card-bg); border-radius: var(--radius-card); padding: var(--space-5); box-shadow: var(--aptora-shadow); display: none; }
.billing-page .form.show { display: block; }
.billing-page .form h2 { margin: 0 0 var(--space-4); color: var(--aptora-green); font-size: var(--fs-md); }
.billing-page .grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.billing-page .field { margin-bottom: var(--space-3); }
.billing-page .field.full { grid-column: 1 / -1; }
.billing-page label { display: block; font-size: var(--fs-sm); font-weight: 400; margin-bottom: .25rem; color: var(--text-secondary); }
.billing-page input:not([type=radio]):not([type=checkbox]):not([type=hidden]), .billing-page select { width: 100%; padding: var(--space-3); border: 1px solid var(--input-border); border-radius: var(--radius-input); font-size: var(--fs-base); box-sizing: border-box; background: var(--input-bg); color: var(--input-text); transition: var(--aptora-transition); }
.billing-page input:focus, .billing-page select:focus { border-color: var(--aptora-green); outline: 0; box-shadow: var(--aptora-focus-ring); }
.billing-page .ccfield { height: 38px; padding: 0; }
.billing-page .submit { width: 100%; padding: var(--aptora-button-padding); background: var(--aptora-green); color: #fff; border: none; border-radius: var(--aptora-radius-button); font-size: var(--fs-base); font-weight: 600; cursor: pointer; margin-top: var(--space-2); transition: var(--aptora-transition); }
.billing-page .submit:hover { background: var(--aptora-green-hover); }
.billing-page .submit:active { transform: scale(0.98); }
.billing-page .submit:disabled { background: var(--aptora-green-subtle); color: var(--aptora-green); cursor: not-allowed; }
.billing-page .err { color: var(--text-error); padding: .5rem 0; font-size: var(--fs-sm); }
.billing-page .ok  { color: var(--aptora-green); padding: .5rem 0; font-size: var(--fs-sm); }
.billing-page .warn { background: var(--warn-glass-bg); color: var(--aptora-slate); padding: var(--space-3) var(--space-4); border-radius: var(--radius-small); margin-bottom: var(--space-4); font-size: var(--fs-sm); border: 1px solid var(--warn-glass-border); }
.billing-page .cancel-card { background: var(--card-bg); border-radius: var(--radius-card); padding: var(--space-5); box-shadow: var(--aptora-shadow); margin-bottom: var(--space-5); display: none; border: 1px solid rgba(211,47,47,0.2); }
.billing-page .cancel-card h2 { margin: 0 0 .5rem; color: var(--aptora-ink); font-size: var(--fs-md); }
.billing-page .cancel-card .cancel-toggle { background: none; border: 1px solid var(--text-error); color: var(--text-error); padding: .45rem 1rem; border-radius: var(--aptora-radius-button); font-size: var(--fs-sm); cursor: pointer; transition: var(--aptora-transition); }
.billing-page .cancel-card .cancel-toggle:hover { background: var(--bg-error-subtle); }
.billing-page .cancel-panel { margin-top: var(--space-4); display: none; }
.billing-page .cancel-panel.open { display: block; }
.billing-page .cancel-other { display: none; margin-top: var(--space-2); }
.billing-page .tier-change-card { background: var(--card-bg); border-radius: var(--radius-card); padding: var(--space-5); box-shadow: var(--aptora-shadow); margin-bottom: var(--space-5); display: none; border: 1px solid var(--aptora-green-ring); }
.billing-page .tier-change-card h2 { margin: 0 0 .5rem; color: var(--aptora-ink); font-size: var(--fs-md); }
.billing-page .tier-change-card .tier-toggle { background: none; border: 1px solid var(--aptora-green); color: var(--aptora-green); padding: .45rem 1rem; border-radius: var(--aptora-radius-button); font-size: var(--fs-sm); cursor: pointer; transition: var(--aptora-transition); }
.billing-page .tier-change-card .tier-toggle:hover { background: var(--aptora-green-subtle); }
.billing-page .tier-panel { margin-top: var(--space-4); display: none; }
.billing-page .tier-panel.open { display: block; }
.billing-page .tier-panel .preview.show { display: block !important; }
.billing-page .cancelled-banner { background: var(--aptora-green-subtle); border: 1px solid var(--aptora-green); color: var(--aptora-ink); border-radius: var(--radius-card); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); display: none; }
.billing-page .cancelled-banner.show { display: block; }
.billing-page .reactivate-link { color: var(--aptora-green); font-weight: 600; text-decoration: none; margin-left: .5rem; }
.billing-page .reactivate-link:hover { text-decoration: underline; }
/* billing-stage-* classes are on body — use body.billing-stage-* .billing-page ... selectors */
body.billing-stage-1 .billing-page .form { display: none !important; }
/* For new subscribers: payment card hidden until a plan is selected (stage-1 → stage-2) */
body.billing-stage-1 .billing-page #sticky-pricing-card { display: none !important; }
/* trust-line now a top-of-page header tagline — always visible, not stage-controlled */
body.billing-stage-2 .billing-page .form { display: block !important; opacity: 0; transition: opacity var(--transition-standard); }
body.billing-stage-2 .billing-page .form.fade-in { opacity: 1; }
body.billing-stage-2 .billing-page #tosCheckbox-row,
body.billing-stage-2 .billing-page #submitBtn { display: none; }
body.billing-stage-3 .billing-page #tosCheckbox-row { display: block; opacity: 0; transition: opacity var(--transition-standard); }
body.billing-stage-3 .billing-page #tosCheckbox-row.fade-in { opacity: 1; }
body.billing-stage-3 .billing-page #submitBtn { display: block; opacity: 0; transition: opacity var(--transition-standard); }
body.billing-stage-3 .billing-page #submitBtn.fade-in { opacity: 1; }

/* ==========================================================================
   Billing History .bh table — migrated from account/billing-history inline style
   ========================================================================== */

table.bh { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.bh th { text-align: left; padding: var(--space-2); border-bottom: 2px solid var(--aptora-green); color: var(--aptora-green); font-weight: 600; }
table.bh td { padding: var(--space-2); border-bottom: 1px solid var(--aptora-border); color: var(--aptora-ink); }
table.bh tr:last-child td { border-bottom: none; }
.bh-empty { color: var(--text-muted); padding: var(--space-4); }

/* ==========================================================================
   Settings.razor body override — replaces the inline <style> in Settings.razor
   Uses :has() so Settings can scroll without modifying the Blazor component.
   ========================================================================== */

body:has(.timmy-settings-card) {
    overflow: auto !important;
    height: auto !important;
}

/* Additional account-shell utility classes (migrated from Program.cs inline styles) */
.account-shell .ccfield { height: 38px; padding: 0; border: 1px solid var(--input-border); border-radius: var(--radius-input); }
.account-shell .field.full { grid-column: 1 / -1; }
.account-shell .field-flex { display: flex; gap: var(--space-2); align-items: center; }
.account-shell .consent-label { font-weight: 400 !important; font-size: var(--fs-sm); }
.account-shell .contact-secondary { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: .1rem; }
.account-shell .owner-you { color: var(--text-secondary); font-size: var(--fs-sm); }
.account-shell .table-empty-cell { color: var(--text-secondary); text-align: center; padding: var(--space-4); }
.account-shell .inline-code-input { width: 18rem; font-family: monospace; }
.account-shell .sub-note { color: var(--text-secondary); font-size: var(--fs-sm); margin-top: var(--space-3); }

/* <details> expand trigger for collapsible card sections */
.card-expand-trigger { font-size: var(--fs-md); font-weight: 600; color: var(--aptora-ink); cursor: pointer; list-style: none; padding: var(--space-2) 0; display: flex; align-items: center; gap: var(--space-2); }
.card-expand-trigger::-webkit-details-marker { display: none; }
.card-expand-trigger::before { content: '+'; width: 1.2rem; color: var(--aptora-green); font-weight: 700; }
details[open] .card-expand-trigger::before { content: '‘2'; }
details .form-inner { margin-top: var(--space-4); }

/* Dunning banner (replaces inline style in FetchDunningBannerHtmlAsync) */
.dunning-banner { background: var(--bg-warning-subtle); color: var(--text-warning); padding: var(--space-3) var(--space-5); border-bottom: 2px solid rgba(199,119,0,0.4); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; font-size: var(--fs-sm); }
.dunning-banner-cta { display: inline-block; background: var(--text-warning); color: #fff; padding: .35rem var(--space-4); border-radius: var(--radius-small); text-decoration: none; font-weight: 600; font-size: var(--fs-xs); transition: var(--transition-standard); }
.dunning-banner-cta:hover { opacity: 0.85; }

/* Payment Methods two-column layout */
.payment-methods-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-5);
    align-items: start;
}
@media (max-width: 768px) {
    .payment-methods-layout { grid-template-columns: 1fr; }
}

/* Payment methods left column — less padding to avoid scroll */
.payment-methods-layout > :first-child .card {
    padding: var(--space-3) var(--space-4);
}

/* Payment methods form — compact field spacing to eliminate scroll */
.payment-methods-layout .grid2 { gap: var(--space-2); }
.payment-methods-layout .field { margin-bottom: var(--space-1); }
.payment-methods-layout label { margin-bottom: 1px; font-size: var(--fs-xs); }
.payment-methods-layout input { padding: var(--space-2) var(--space-3); margin-bottom: 0; }
.payment-methods-layout .ccfield { height: 32px; }
.payment-methods-layout .consent-label { font-size: var(--fs-xs); }
.payment-methods-layout h2 { margin-bottom: var(--space-2); font-size: var(--fs-md); }

/* Table headers: no background fill — removes dark header issue in dark mode */
.account-shell th {
    background: none;
    color: var(--aptora-green);
    font-weight: 600;
    font-size: var(--fs-sm);
    width: 40%;
    vertical-align: top;
    padding-top: var(--space-3);
}

/* Company Quota KPI stat cards */
.quota-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.quota-stat {
    background: var(--card-bg);
    border-radius: var(--radius-card);
    padding: var(--space-4) var(--space-3);
    border: 1px solid var(--aptora-border);
    text-align: center;
    animation: timmy-fade-in 0.3s ease both;
}

.quota-stat-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-2);
}

.quota-stat-value {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--aptora-green);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.quota-stat-value.large-text {
    font-size: var(--fs-lg);
    color: var(--aptora-ink);
    font-weight: 500;
}

/* Stagger quota stat cards */
.quota-stats-grid .quota-stat:nth-child(1) { animation-delay: 0.00s; }
.quota-stats-grid .quota-stat:nth-child(2) { animation-delay: 0.05s; }
.quota-stats-grid .quota-stat:nth-child(3) { animation-delay: 0.10s; }
.quota-stats-grid .quota-stat:nth-child(4) { animation-delay: 0.15s; }
.quota-stats-grid .quota-stat:nth-child(5) { animation-delay: 0.20s; }
.quota-stats-grid .quota-stat:nth-child(6) { animation-delay: 0.25s; }

/* Billing subscribe form — same compactness as payment methods form */
.billing-page .form .grid { gap: var(--space-2); }
.billing-page .form .field { margin-bottom: var(--space-1); }
.billing-page .form label { margin-bottom: 1px; font-size: var(--fs-xs); }
.billing-page .form input, .billing-page .form select { padding: var(--space-2) var(--space-3); }
.billing-page .form .ccfield { height: 32px; }
.billing-page .form h2 { margin-bottom: var(--space-2); font-size: var(--fs-md); }

/* Tier-change card — radio label alignment + misc cleanup */
.billing-page .radio-label { display: flex; align-items: center; gap: var(--space-2); padding: .15rem 0; font-size: var(--fs-sm); cursor: pointer; }
.billing-page .radio-label input[type=radio] { flex-shrink: 0; margin: 0; }
.billing-page .tier-change-card > p { color: var(--text-secondary); font-size: var(--fs-sm); margin: .25rem 0 var(--space-3); }
.billing-page .tier-panel .preview { background: var(--aptora-green-subtle); border-radius: var(--radius-small); padding: var(--space-3); margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--aptora-ink); display: none; }
.billing-page .tier-change-card .submit { width: auto; }

/* Change-plan section — greyed button lights up green on plan card selection */
#change-plan-section { margin-top: var(--space-3); }
#changePlanBtn { width: auto; transition: var(--aptora-transition); }
#changePlanBtn:not(:disabled) { background: var(--aptora-green); color: #fff; }
#changePlanBtn:disabled { background: rgba(74,85,103,0.15); color: var(--aptora-slate); cursor: not-allowed; border: none; }

/* ── Billing action row (Change Plan + Cancel Subscription) ── */
/* Billing action row — equal-size buttons + inline hint */
.billing-action-row { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); position: relative; }
/* Force identical sizing on both action buttons regardless of class inheritance */
.billing-action-row button, .billing-action-row form > button {
    font-size: var(--fs-base) !important;
    font-weight: 600 !important;
    font-family: var(--font-body) !important;
    padding: var(--aptora-button-padding) !important;
    border-radius: var(--aptora-radius-button) !important;
    line-height: 1 !important;
    box-sizing: border-box;
    cursor: pointer;
    width: auto !important;
}
.cancel-subscription-btn { background: none; border: 1px solid var(--text-error); color: var(--text-error); text-decoration: none; transition: var(--aptora-transition); }
.cancel-subscription-btn:hover { background: var(--bg-error-subtle); }
#changePlanBtn { border: none; }
#changePlanBtn:disabled { background: rgba(74,85,103,0.15); color: var(--aptora-slate); cursor: default; }
#changePlanBtn:not(:disabled) { background: var(--aptora-green); color: #fff; }

/* Hint text — inline in the action row, fades without displacing layout */
#change-plan-hint { opacity: 0; color: var(--text-muted); font-size: var(--fs-sm); pointer-events: none; transition: opacity 0.15s ease; white-space: nowrap; position: absolute; left: 50%; transform: translateX(-50%); }

/* Plan card glow on button hover (JS adds .hint-hover to #plans) */
#plans.hint-hover .plan:not(.current):not(.selected) { border-color: rgba(26,156,75,0.5); box-shadow: 0 0 0 3px rgba(26,156,75,0.12); transition: var(--aptora-transition); }

/* ── Cancel subscription modal ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: timmy-fade-in 0.15s ease both; }
.modal-card { background: var(--card-bg); border-radius: var(--radius-card); padding: var(--space-6); width: min(520px, calc(100vw - 2rem)); box-shadow: 0 24px 64px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.12); border: 1px solid var(--aptora-border); }
.modal-card h2 { margin: 0 0 var(--space-3); font-size: var(--fs-xl); color: var(--aptora-ink); font-weight: 600; }
.modal-warning { color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-relaxed); margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4); background: var(--aptora-green-subtle); border-radius: var(--radius-small); }
.modal-field { margin-bottom: var(--space-4); }
.modal-field label { display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--text-secondary); margin-bottom: var(--space-1); }
.modal-field select { width: 100%; padding: var(--space-3); border: 1px solid var(--input-border); border-radius: var(--radius-input); font-size: var(--fs-base); background: var(--input-bg); color: var(--input-text); font-family: var(--font-body); }
.modal-field select:focus { border-color: var(--aptora-green); outline: 0; box-shadow: var(--aptora-focus-ring); }
.modal-actions { display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-5); }
.modal-keep-btn { background: none; border: 1px solid var(--aptora-border); color: var(--aptora-slate); font-size: var(--fs-sm); font-family: var(--font-body); font-weight: 500; padding: var(--space-2) var(--space-4); border-radius: var(--aptora-radius-button); cursor: pointer; transition: var(--aptora-transition); }
.modal-keep-btn:hover { background: var(--page-bg); }
.modal-confirm-btn { background: var(--text-error); color: #fff; border: none; font-size: var(--fs-sm); font-family: var(--font-body); font-weight: 600; padding: var(--space-2) var(--space-5); border-radius: var(--aptora-radius-button); cursor: pointer; transition: var(--aptora-transition); }
.modal-confirm-btn:hover:not(:disabled) { background: #b71c1c; }
.modal-confirm-btn:disabled { background: rgba(211,47,47,0.3); cursor: not-allowed; }

/* Account shell links — prevent default purple :visited state,
   keep aptora-green always regardless of visit history */
.account-shell .main a { color: var(--text-primary) !important; }
.account-shell .main a:visited { color: var(--text-primary) !important; }

/* WCAG SC 2.3.3 — honour OS reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
.account-shell .main a:not([class*="aptora-button"]):not(.hub-card):hover { color: var(--aptora-green-hover); text-decoration: underline; }