/* ==========================================================================
   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);
    --header-bg: #ffffff;
    --header-border: rgba(0,0,0,0.06);
    --header-text: #2F2F2F;
    --header-sub: #505662;
    --settings-bg: #F8F7F3;
    --settings-border: rgba(0,0,0,0.05);
    --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: #8b919d;

    /* 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: #d2d2d7;
    --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 */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --space-10: 4rem;
}

/* ----- Design tokens — Dark --------------------------------------------- */
[data-theme="dark"] {
    --topbar-bg: #1B1818;
    --topbar-text: #d0d0d0;
    --topbar-border: rgba(255,255,255,0.08);

    --page-bg: #1B1818;
    /* T4 Round AS: dark SURFACE tokens → charcoal; green kept on accent tokens only */
    --card-bg: #232020;
    --card-border: rgba(74,85,103,0.25);
    --card-shadow: 0 1px 2px rgba(0,0,0,0.2);
    --header-bg: #232020;
    --header-border: rgba(255,255,255,0.06);
    --header-text: #F6F6F9;
    --header-sub: #9ca3af;
    --settings-bg: #232020;
    --settings-border: rgba(255,255,255,0.05);
    --footer-bg: #232020;
    --footer-border: rgba(255,255,255,0.06);

    --input-bg: #2A2626;
    --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: #232020;
    --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);
}

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

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

body {
    font-family: var(--font-body) !important;
    font-size: 16px;
    background: var(--page-bg) !important;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: color 0.25s ease;
    margin: 0;
    position: relative;
    /* Hotfix 2026-06-03: chat shell locks by default (Blazor app pages).
       Document pages (billing/account/upgrade) opt out with body.allow-scroll. */
    height: 100vh;
    overflow: hidden;
}

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

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

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

.aptora-topbar {
    background: var(--topbar-bg);
    padding: 0.85rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    border-bottom: 1px solid var(--aptora-border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

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

/* T2 Round AS: logo chip — white bg so the white-bg jpg reads on dark topbar in both themes; no invert */
.aptora-topbar-logo {
    height: 30px;
    background: #fff;
    border-radius: 6px;
    padding: 3px 8px;
}

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

.aptora-topbar-label {
    font-family: var(--font-body);
    font-size: 0.82rem;
    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: 0.78rem;
    font-weight: 500;
    color: var(--aptora-slate);
    text-decoration: none;
    transition: color var(--aptora-transition);
}

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

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

.aptora-subnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.65rem 2rem;
    background: var(--card-bg, #fff);
    border-bottom: 1px solid var(--aptora-border);
}

.aptora-subnav-pill {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--aptora-slate, #444);
    text-decoration: none;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    transition: background var(--aptora-transition), color var(--aptora-transition);
}

.aptora-subnav-pill:hover {
    background: rgba(26, 156, 75, 0.08);
    color: var(--aptora-green);
}

.aptora-subnav-pill.active {
    background: rgba(26, 156, 75, 0.12);
    color: var(--aptora-green);
    font-weight: 600;
}

.aptora-subnav-divider {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: var(--aptora-border);
    margin: 0 0.5rem;
}

@media (max-width: 768px) {
    .aptora-subnav {
        padding: 0.5rem 1rem;
        gap: 0.25rem;
    }
    .aptora-subnav-pill {
        font-size: 0.78rem;
        padding: 0.3rem 0.6rem;
    }
    .aptora-subnav-divider {
        height: 14px;
        margin: 0 0.3rem;
    }
}

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

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

.timmy-card {
    background: var(--card-bg);
    border: 1px solid var(--aptora-border);
    box-shadow: var(--aptora-shadow);
    border-radius: var(--radius-card);
    display: flex;
    flex-direction: column;
    /* Hotfix 2026-06-03: bumped from 100px to 130px to account for taller topbar (T2 logo chip)
       + wrapper padding (24px top + 24px bottom). Previous value clipped the SEND button below viewport. */
    height: calc(100vh - 130px);
    max-height: calc(100vh - 130px);
    max-width: 1200px;
    width: 100%;
    overflow: hidden;
    transition: background-color 0.25s ease, 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; }
}

.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);
}

/* ==========================================================================
   Header info layout helpers (extracted from inline styles)
   ========================================================================== */

.timmy-header-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.timmy-header-avatar {
    height: 40px;
    flex-shrink: 0;
}

.timmy-header-text {
    min-width: 0;
}

.btn-settings-toggle {
    padding: 0.4rem 0.6rem;
}

/* ==========================================================================
   Header — clean white bar like aptora.com nav
   ========================================================================== */

.timmy-header {
    background: var(--aptora-neutral-bg);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--aptora-border);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    gap: 1rem;
}

.timmy-header h4 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--aptora-ink);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.timmy-header .subtitle {
    color: var(--aptora-slate);
    font-size: 0.8rem;
    font-weight: 400;
}

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

.btn-header {
    background: var(--aptora-card-bg, #fff);
    color: var(--aptora-ink);
    border: 1px solid var(--aptora-border);
    border-radius: 8px;
    padding: 0.4rem 0.9rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-standard);
    display: inline-flex;
    align-items: center;
}

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

.btn-theme-toggle {
    background: var(--aptora-card-bg, #fff);
    color: var(--aptora-ink);
    border: 1px solid var(--aptora-border);
    border-radius: 8px;
    padding: 0.35rem 0.55rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}

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

/* ==========================================================================
   Settings bar — subtle, stays out of the way
   ========================================================================== */

.timmy-settings {
    background: var(--settings-bg);
    border-bottom: 1px solid var(--settings-border);
    padding: 0.5rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    font-size: 0.82rem;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.timmy-settings label {
    color: var(--text-muted);
    margin-bottom: 0;
    font-weight: 500;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.timmy-settings select {
    font-family: var(--font-body);
    background-color: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    font-size: 0.82rem;
    font-weight: 500;
    transition: border-color 0.2s;
}

.timmy-settings select:focus {
    outline: none;
    border-color: var(--aptora-green);
    box-shadow: 0 0 0 2px var(--aptora-green-ring);
}

.timmy-settings .category-desc {
    color: var(--text-muted);
    font-size: 0.78rem;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   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
   ========================================================================== */

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

.timmy-welcome img {
    max-height: 80px;
    margin-bottom: 1rem;
}

.timmy-welcome h2 {
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.timmy-welcome h2 span {
    color: var(--aptora-green);
}

.timmy-welcome .welcome-subtitle {
    color: var(--text-secondary);
    font-size: 0.92rem;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.65;
}

.timmy-welcome p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.6;
}

.welcome-divider {
    width: 64px;
    height: 3px;
    background: var(--aptora-border);
    border-radius: 2px;
    margin: 0.75rem auto;
    opacity: 1;
}

.welcome-badges {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.welcome-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--aptora-green);
    background: var(--aptora-border);
    padding: 0.3rem 0.65rem;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.welcome-badge-icon {
    font-size: 0.85rem;
}

.welcome-section-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.6rem;
    margin-top: 1rem;
}

.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: 0.95rem;
    border-bottom: 1px solid var(--aptora-border);
    flex-wrap: wrap;
}

.timmy-trial-banner.locked {
    background: #fef2f2;
    color: #991b1b;
    border-bottom-color: #fecaca;
}

.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) 4px var(--radius-bubble);
    padding: 0.65rem 1.1rem;
    max-width: 75%;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.55;
}

.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: 1px solid var(--bot-bubble-border);
    border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) 4px;
    padding: 1rem 1.25rem;
    max-width: 92%;
    font-size: 0.92rem;
    line-height: 1.65;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

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

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

.chat-output h1 { font-size: 1.3rem; }
.chat-output h2 { font-size: 1.15rem; }
.chat-output h3 { font-size: 1.02rem; }

.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: #1a1d27;
    color: #d4d4d4;
    padding: 0.85rem 1rem;
    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);
}

/* ==========================================================================
   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: 0.78rem;
    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: 0.78rem;
}

.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: 0.7rem 0.9rem;
    margin-bottom: 0.75rem;
    margin-left: 0.25rem;
    font-size: 0.78rem;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.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: 0.78rem;
    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: 0.78rem;
    font-weight: 500;
}

.btn-fb {
    border: 1px solid var(--input-border);
    background: transparent;
    border-radius: 8px;
    padding: 0.2rem 0.45rem;
    font-size: 0.82rem;
    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: 0.82rem;
    width: 100%;
    transition: border-color 0.2s, 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: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s 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: 0.78rem;
    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: 0.78rem;
    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: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.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 0.25s ease, border-color 0.25s ease;
}

.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 0.2s, 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: 0.88rem;
    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: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: 0.68rem;
    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: 0.62rem;
    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: 0.82rem;
    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: 0.82rem;
}

.escalation-panel-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    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: 0.78rem;
    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: 0.76rem;
    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: 0.78rem;
    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: 0.82rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
    transition: border-color 0.2s, 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 0.2s 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);
}

.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);
}

/* ==========================================================================
   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: 0.78rem;
    color: #dc3545;
    margin-top: 2px;
}

/* --- Inline citations --- */
.citation {
    color: #1a9c4b;
    cursor: pointer;
    font-size: 0.75em;
    vertical-align: super;
    font-weight: 600;
    margin: 0 1px;
}

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

.citation-number {
    color: #1a9c4b;
    font-weight: 600;
    font-size: 0.85em;
    margin-right: 0.3em;
}

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

.btn-deployment {
    padding: 0.5rem 1rem;
    border: 1px solid #1a9c4b;
    border-radius: 6px;
    background: transparent;
    color: #1a9c4b;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-deployment:hover {
    background: #1a9c4b;
    color: white;
}

[data-theme="dark"] .btn-deployment {
    border-color: #22b85a;
    color: #22b85a;
}

[data-theme="dark"] .btn-deployment:hover {
    background: #22b85a;
    color: #fff;
}

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

.usage-info {
    font-size: 0.82rem;
    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;
}

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

.timmy-shell-2col {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 0;
    min-height: 100vh;
}
.timmy-shell-2col .timmy-shell-main {
    overflow: auto;
}

.timmy-sidebar {
    background: var(--aptora-neutral-bg);
    border-right: 1px solid var(--aptora-border);
    display: flex;
    flex-direction: column;
    width: 260px;
    transition: width 200ms ease-out;
}
.timmy-sidebar.collapsed {
    width: 56px;
}
.timmy-sidebar-header {
    padding: 0.75rem 0.75rem;
    border-bottom: 1px solid var(--aptora-border);
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.timmy-sidebar-toggle, .timmy-sidebar-new-chat {
    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;
}
.timmy-sidebar-toggle:hover, .timmy-sidebar-new-chat:hover {
    background: var(--aptora-green-subtle);
    border-color: var(--aptora-green);
    color: var(--aptora-green);
}
.timmy-sidebar-new-chat {
    flex: 1;
}
.timmy-sidebar.collapsed .timmy-sidebar-new-chat {
    display: none;
}
.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;
    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;
}
.timmy-conv-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.85rem;
}
.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-shell-2col {
        grid-template-columns: 1fr;
    }
    .timmy-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        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: 56px;
    }
}

/* 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: 0.85rem;
    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;
}
.timmy-conversation-area .timmy-card-wrapper {
    padding: 0;
}
.timmy-conversation-area .timmy-card {
    max-width: none;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    height: 100vh;
    height: 100dvh;
}
.timmy-conversation-area .msg-user .bubble,
.timmy-conversation-area .msg-bot .bubble {
    max-width: 75%;
}
@media (max-width: 768px) {
    .timmy-conversation-area .msg-user .bubble,
    .timmy-conversation-area .msg-bot .bubble {
        max-width: 100%;
    }
}

/* ==========================================================================
   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(100vh - 64px);
    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(--card-bg);
    border-radius: var(--radius-card);
    padding: var(--space-6);
    box-shadow: var(--aptora-shadow);
    width: 100%;
    border: 1px solid var(--aptora-border);
}
.aptora-form-card--narrow { max-width: 380px; }
.aptora-form-card--medium { max-width: 480px; }
.aptora-form-card--wide   { max-width: 640px; }

.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%;
}
.aptora-button-primary:hover { background: var(--aptora-green-hover); border-color: var(--aptora-green-hover); }
.aptora-button-primary:active { transform: scale(0.98); }
.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(100vh - 64px);
    box-sizing: border-box;
}

.aptora-content-card {
    background: var(--card-bg);
    max-width: 720px;
    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: 1.75rem;
    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: 85vh; 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: 0.85rem; 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: 0.85rem; 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;
}