/* ==========================================================================
   AAA AI — native design system for the web.

   Mirrors the iOS / Android 2.0 system (ios/AAAAI/Helpers/AGITheme.swift,
   android/.../ui/Theme.kt) and the macOS workbench (macos/AGIDevMac/Design/
   IDETheme.swift):

     · one monochrome palette — four surfaces, three text levels
     · green + red are the only signals (no orange, no brand gradients)
     · depth comes from surface steps and 0.5px hairlines, never shadows
     · Inter Tight, negative tracking on large type, regular-weight titles
     · 16 / 14 / 12 / 10 radii, 26 for the composer, capsules for pills
     · one ink-coloured primary action per screen

   Loaded after style.css / page CSS so it is the last word on colour, type
   and depth. Layout rules (grid, flex, positions) are intentionally untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    --n-paper: #f7f7f4;          /* S0 screen */
    --n-surface: #ffffff;        /* S1 cards, composer */
    --n-raised: #f2f2f7;         /* S2 rows, sheets, control tracks */
    --n-mist: #e5e5ea;           /* S3 fields, selection */
    --n-text: #0a0a0a;           /* T1 */
    --n-text-2: #6c6c70;         /* T2 */
    --n-text-3: #8e8e93;         /* T3 */
    --n-border: rgba(0, 0, 0, 0.10);
    --n-divider: rgba(0, 0, 0, 0.075);
    --n-action: #0a0a0a;
    --n-on-action: #f5f5f7;
    --n-success: #248a3d;
    --n-danger: #d70015;
    --n-success-soft: rgba(36, 138, 61, 0.12);
    --n-danger-soft: rgba(215, 0, 21, 0.10);

    --n-radius-lg: 26px;
    --n-radius: 16px;
    --n-radius-sm: 14px;
    --n-radius-xs: 12px;
    --n-radius-row: 10px;
}

html[data-theme="dark"] {
    --n-paper: #0a0a0a;
    --n-surface: #141414;
    --n-raised: #1c1c1e;
    --n-mist: #2c2c2e;
    --n-text: #f5f5f7;
    --n-text-2: #8e8e93;
    --n-text-3: #636366;
    --n-border: rgba(255, 255, 255, 0.10);
    --n-divider: rgba(255, 255, 255, 0.075);
    --n-action: #f5f5f7;
    --n-on-action: #0a0a0a;
    --n-success: #30d158;
    --n-danger: #ff453a;
    --n-success-soft: rgba(48, 209, 88, 0.14);
    --n-danger-soft: rgba(255, 69, 58, 0.14);
}

/* Legacy app tokens -> native palette. brand.css components, focus rings and
   the old accent consumers pick these up. */
:root,
html[data-theme="dark"] {
    --brand-ink: var(--n-text);
    --brand-ink-soft: var(--n-text-2);
    --brand-paper: var(--n-paper);
    --brand-white: var(--n-surface);
    --brand-mist: var(--n-raised);
    --brand-line: var(--n-border);
    --brand-muted: var(--n-text-2);
    --brand-muted-soft: var(--n-text-3);
    --brand-orange: var(--n-text);
    --brand-orange-hover: var(--n-text);
    --brand-orange-soft: transparent;
    --brand-shadow: none;
    --brand-shadow-soft: none;

    --primary: var(--n-text);
    --primary-dark: var(--n-text);
    --secondary: var(--n-text-2);
    --light: var(--n-paper);
    --white: var(--n-surface);
    --gray: var(--n-text-2);
    --border: var(--n-border);
    --glass-bg: var(--n-surface);
    --glass-border: var(--n-border);
    --input-accent: var(--n-text);
    --success: var(--n-success);
    --danger: var(--n-danger);
    --warning: var(--n-text-2);
}

/* Admin console palette (admin.html declares its own --admin-* on :root). */
html body {
    --admin-bg: var(--n-paper);
    --admin-panel: var(--n-surface);
    --admin-panel-strong: var(--n-surface);
    --admin-panel-soft: var(--n-raised);
    --admin-border: var(--n-border);
    --admin-border-strong: var(--n-border);
    --admin-text: var(--n-text);
    --admin-muted: var(--n-text-2);
    --admin-shadow: none;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

html {
    background: var(--n-paper);
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

body {
    background: var(--n-paper) !important;
    background-image: none !important;
    color: var(--n-text) !important;
    font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--n-mist);
    color: var(--n-text);
}

:focus-visible {
    outline: 2px solid var(--n-text);
    outline-offset: 2px;
}

/* Quiet native scrollbars */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(10, 10, 10, 0.18);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(10, 10, 10, 0.32);
    background-clip: padding-box;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
    background-clip: padding-box;
}

/* --------------------------------------------------------------------------
   3. Typography — native scale (34 / 22 / 17 / 16 / 15 / 13 / 12 / 11)
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--n-text);
    letter-spacing: -0.022em;
}

h1 {
    font-size: 34px;
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: -0.035em;
}

h2 {
    font-size: 22px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.02em;
}

h3 {
    font-size: 17px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.012em;
}

h4,
h5,
h6 {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 600;
}

p {
    letter-spacing: -0.006em;
}

a {
    color: inherit;
}

code,
pre,
kbd,
samp {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.section-label,
.train-page-eyebrow,
.sidebar-section-title,
.panel-section-label {
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase;
    color: var(--n-text-3) !important;
}

.text-muted,
.muted,
.train-section-desc,
.sidebar-metric-label,
.chat-header-title {
    color: var(--n-text-2) !important;
}

/* --------------------------------------------------------------------------
   4. Depth reset — native apps use hairlines, not shadows or glass
   -------------------------------------------------------------------------- */

.sidebar,
.chat-header-bar,
.chat-input-container,
.chat-input-row,
.chat-mode-toggle,
.chat-sync-status-badge,
.message-actions,
.message-bubble,
.message-user .message-bubble,
.message-ai .message-bubble,
.modal-content,
.floating-panel,
.plus-menu-dropdown,
.model-picker-dropdown,
.device-picker-dropdown,
.expert-toggle,
.expert-analysis,
.sidebar-section-card,
.sidebar-metric-card,
.chat-history-item,
.btn-train-header,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-small,
.btn-modal,
.btn-send,
.btn-voice,
.btn-model-picker,
.admin-section,
.admin-box,
.admin-card,
.admin-kv-card,
.admin-metric-panel,
.admin-recent-item,
.admin-tab,
.admin-chip,
.admin-modal,
.admin-table-shell,
.card,
.panel,
.sheet,
.dropdown-menu,
.tooltip,
.attachment-chip,
.attachment-preview-item,
.task-card,
.board-card {
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-image: none !important;
}

/* --------------------------------------------------------------------------
   5. App shell — sidebar
   -------------------------------------------------------------------------- */

.sidebar {
    background: var(--n-surface) !important;
    border-right: 1px solid var(--n-divider) !important;
    color: var(--n-text) !important;
}

.sidebar * {
    text-shadow: none !important;
}

.sidebar-toggle {
    background: var(--n-raised) !important;
    border: 1px solid var(--n-border) !important;
    border-radius: 12px !important;
    color: var(--n-text) !important;
}

.sidebar-toggle:hover {
    background: var(--n-mist) !important;
}

.sidebar-overlay {
    background: rgba(0, 0, 0, 0.45) !important;
}

.btn-sidebar {
    color: var(--n-text) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--n-radius-row) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em;
    min-height: 40px;
    padding: 8px 12px !important;
}

.btn-sidebar:hover {
    background: var(--n-raised) !important;
    border-color: var(--n-divider) !important;
    transform: none !important;
}

.sidebar-section-card {
    background: var(--n-raised) !important;
    border: 1px solid var(--n-border) !important;
    border-radius: var(--n-radius) !important;
}

.sidebar-metric-card {
    background: var(--n-surface) !important;
    border: 1px solid var(--n-divider) !important;
    border-radius: var(--n-radius-xs) !important;
}

.sidebar-metric-value {
    color: var(--n-text) !important;
    font-weight: 600 !important;
}

.chat-history-item {
    border-radius: var(--n-radius-row) !important;
    color: var(--n-text) !important;
    border: 1px solid transparent !important;
    font-weight: 500 !important;
}

.chat-history-item:hover {
    background: var(--n-raised) !important;
    border-color: var(--n-divider) !important;
}

.chat-history-item-selected,
.chat-history-item-selected:hover {
    background: var(--n-mist) !important;
    border-color: var(--n-border) !important;
}

.chat-history-item.chat-history-item-channel:hover,
.chat-history-item.chat-history-item-system:hover {
    background: var(--n-raised) !important;
    border-color: var(--n-divider) !important;
}

.chat-history-delete {
    background: transparent !important;
    border-radius: 8px !important;
    color: var(--n-text-3) !important;
}

.chat-history-delete:hover {
    background: var(--n-mist) !important;
    color: var(--n-text) !important;
}

/* Language + appearance switches */
.lang-switcher .btn-lang {
    background: transparent !important;
    color: var(--n-text-2) !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
}

.lang-switcher .btn-lang.is-active,
.lang-switcher .btn-lang.active {
    background: var(--n-mist) !important;
    color: var(--n-text) !important;
}

/* --------------------------------------------------------------------------
   6. Header — quiet pills, one segmented control
   -------------------------------------------------------------------------- */

.chat-header-bar .btn-train-header,
.btn-train-header,
.btn-subscribe-header {
    background: var(--n-raised) !important;
    color: var(--n-text) !important;
    border: 1px solid var(--n-border) !important;
    border-radius: var(--n-radius-xs) !important;
    min-width: 0 !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em;
    box-shadow: none !important;
    text-shadow: none !important;
}

.btn-train-header:hover,
.btn-subscribe-header:hover {
    background: var(--n-mist) !important;
    transform: none !important;
}

.btn-train-header.is-active,
.btn-train-header.active {
    background: var(--n-mist) !important;
    color: var(--n-text) !important;
}

.btn-subscribe-header {
    background: var(--n-action) !important;
    color: var(--n-on-action) !important;
    border-color: transparent !important;
}

.chat-mode-toggle {
    background: var(--n-raised) !important;
    border: 1px solid var(--n-border) !important;
    border-radius: var(--n-radius-xs) !important;
    padding: 4px !important;
    gap: 2px !important;
}

.chat-mode-toggle-btn {
    height: 34px;
    padding: 0 14px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--n-text-2) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.chat-mode-toggle-btn:hover:not(:disabled) {
    background: transparent !important;
    color: var(--n-text) !important;
    transform: none !important;
}

.chat-mode-toggle-btn.is-active {
    background: var(--n-mist) !important;
    color: var(--n-text) !important;
    box-shadow: none !important;
}

.chat-sync-status-badge {
    background: var(--n-raised) !important;
    border: 1px solid var(--n-border) !important;
    color: var(--n-text-2) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.chat-header-meta {
    color: var(--n-text-3) !important;
}

/* --------------------------------------------------------------------------
   7. Chat surface
   -------------------------------------------------------------------------- */

.chat-container,
.chat-messages,
.train-page,
.tasks-page,
.workflows-page {
    background: var(--n-paper) !important;
    color: var(--n-text) !important;
}

.welcome-message {
    color: var(--n-text) !important;
}

.welcome-message h2,
.welcome-message h2.brand-wordmark {
    color: var(--n-text) !important;
    font-weight: 400 !important;
    letter-spacing: -0.04em !important;
}

.welcome-message p {
    color: var(--n-text-3) !important;
    font-size: 14px !important;
}

.brand-wordmark {
    color: var(--n-text) !important;
    letter-spacing: -0.06em;
}

.brand-wordmark__rule {
    color: var(--n-text-3) !important;
    font-weight: 300 !important;
}

.brand-wordmark__ai {
    color: var(--n-text-2) !important;
    font-weight: 600 !important;
}

/* Chat messages — user bubble S2, assistant plain like the native apps */
.message-user .message-bubble {
    background: var(--n-raised) !important;
    border: 1px solid var(--n-border) !important;
    border-radius: 18px !important;
    color: var(--n-text) !important;
    padding: 12px 16px !important;
}

.message-ai .message-bubble {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--n-text) !important;
    padding: 4px 0 !important;
}

.message-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.55px !important;
    text-transform: uppercase;
    color: var(--n-text-3) !important;
}

.message-content,
.message-final-answer,
.message-body {
    color: var(--n-text) !important;
    font-size: 16px;
    line-height: 1.6;
}

.message-timestamp,
.message-meta {
    color: var(--n-text-3) !important;
    font-size: 11px !important;
}

.message-edited-badge,
.message-source-badge {
    background: var(--n-mist) !important;
    color: var(--n-text-2) !important;
    border: 1px solid var(--n-border) !important;
    border-radius: 6px !important;
    font-size: 10px !important;
    padding: 1px 6px !important;
}

.message-actions {
    gap: 6px !important;
}

.message-action-btn {
    background: var(--n-raised) !important;
    border: 1px solid var(--n-border) !important;
    color: var(--n-text) !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 5px 9px !important;
}

.message-action-btn:hover {
    background: var(--n-mist) !important;
}

.message-action-danger {
    color: var(--n-danger) !important;
    border-color: var(--n-border) !important;
}

/* Expert / trace blocks inside answers */
.expert-analysis {
    background: var(--n-raised) !important;
    border: 1px solid var(--n-border) !important;
    border-radius: var(--n-radius-xs) !important;
    color: var(--n-text) !important;
}

.expert-name,
.expert-toggle,
.expert-analysis-header {
    color: var(--n-text-2) !important;
}

.message-final-answer-label,
.final-answer-model-badge {
    color: var(--n-text-3) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* Code blocks — iOS recipe */
.message-content pre,
.code-block,
pre.code-block {
    background: #1e1e1e !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    color: #e5e5e5 !important;
}

html[data-theme="light"] .message-content pre,
html[data-theme="light"] .code-block {
    background: #f2f2f7 !important;
    border-color: var(--n-border) !important;
    color: var(--n-text) !important;
}

/* --------------------------------------------------------------------------
   8. Composer
   -------------------------------------------------------------------------- */

.chat-input-container {
    background: transparent !important;
    border-top: none !important;
}

.chat-input-row {
    background: var(--n-surface) !important;
    border: 1px solid var(--n-border) !important;
    border-radius: var(--n-radius-lg) !important;
    padding: 10px 12px !important;
    box-shadow: none !important;
}

.chat-input-row:focus-within {
    border-color: var(--n-text-3) !important;
}

.chat-input {
    background: transparent !important;
    color: var(--n-text) !important;
    font-size: 16px !important;
    line-height: 1.45;
    letter-spacing: -0.01em;
    caret-color: var(--n-text);
}

.chat-input::placeholder {
    color: var(--n-text-3) !important;
    opacity: 1;
}

.btn-voice {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    background: var(--n-raised) !important;
    border: 1px solid var(--n-border) !important;
    color: var(--n-text) !important;
    border-radius: 50% !important;
}

.btn-voice:hover {
    background: var(--n-mist) !important;
    color: var(--n-text) !important;
}

.btn-voice.is-active,
.btn-voice.active {
    background: var(--n-mist) !important;
    color: var(--n-text) !important;
}

.btn-send {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    background: var(--n-action) !important;
    color: var(--n-on-action) !important;
    border: none !important;
    border-radius: 50% !important;
}

.btn-send:hover {
    background: var(--n-action) !important;
    opacity: 0.88;
    color: var(--n-on-action) !important;
}

.btn-send:disabled {
    background: var(--n-mist) !important;
    color: var(--n-text-3) !important;
}

.btn-send.btn-stop {
    background: var(--n-danger-soft) !important;
    color: var(--n-danger) !important;
}

.btn-model-picker,
.btn-topic-picker {
    background: var(--n-raised) !important;
    border: 1px solid var(--n-border) !important;
    color: var(--n-text) !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 7px 12px !important;
}

.btn-model-picker:hover {
    background: var(--n-mist) !important;
}

/* Status strip above the composer */
.main-status-row,
.context-window-row,
.status-rows-wrap {
    color: var(--n-text-2) !important;
    font-size: 12px !important;
}

.main-status-label,
.context-window-label {
    color: var(--n-text-3) !important;
    letter-spacing: 0.02em;
}

.main-status-value,
.context-window-detail {
    color: var(--n-text-2) !important;
}

.status-dot-orange,
.status-dot {
    background: var(--n-text-3) !important;
    box-shadow: none !important;
}

.status-dot.is-online {
    background: var(--n-success) !important;
}

.context-window-bg {
    stroke: var(--n-mist) !important;
}

.context-window-fill {
    stroke: var(--n-text) !important;
}

.context-window-percent {
    color: var(--n-text-2) !important;
}

/* `Remote control` + toggles */
.toggle-label {
    color: var(--n-text-2) !important;
    font-size: 12px !important;
}

.toggle-switch {
    background: var(--n-mist) !important;
    border: none !important;
    box-shadow: none !important;
}

.toggle-switch.is-on,
.toggle-switch.on,
.toggle-switch.active {
    background: var(--n-text) !important;
}

.toggle-knob {
    background: var(--n-surface) !important;
}

/* --------------------------------------------------------------------------
   9. Menus, dropdowns, sheets
   -------------------------------------------------------------------------- */

.plus-menu-dropdown,
.model-picker-dropdown,
.device-picker-dropdown,
.dropdown-menu,
.context-menu {
    background: var(--n-raised) !important;
    border: 1px solid var(--n-border) !important;
    border-radius: var(--n-radius-sm) !important;
    padding: 6px !important;
    color: var(--n-text) !important;
}

.plus-menu-item,
.model-picker-option,
.device-picker-option {
    border-radius: var(--n-radius-row) !important;
    color: var(--n-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.plus-menu-item:hover,
.model-picker-option:hover,
.device-picker-option:hover {
    background: var(--n-mist) !important;
}

.model-picker-option.is-selected,
.model-picker-option.selected {
    background: var(--n-mist) !important;
    color: var(--n-text) !important;
}

.model-picker-separator,
.plus-menu-separator {
    background: var(--n-divider) !important;
}

.modal {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.modal-content {
    background: var(--n-surface) !important;
    border: 1px solid var(--n-border) !important;
    border-radius: var(--n-radius-lg) !important;
    color: var(--n-text) !important;
    padding: 24px !important;
}

.modal h2,
.modal-content h2,
.modal h3,
.modal-content h3 {
    color: var(--n-text) !important;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.modal .close,
.modal-content .close {
    color: var(--n-text-2) !important;
}

.modal-content::-webkit-scrollbar-thumb {
    background: var(--n-mist);
    background-clip: padding-box;
}

.floating-panel {
    background: var(--n-surface) !important;
    border: 1px solid var(--n-border) !important;
    border-radius: var(--n-radius) !important;
}

/* Toasts / notifications */
.notification,
.toast,
#notification {
    background: var(--n-raised) !important;
    border: 1px solid var(--n-border) !important;
    color: var(--n-text) !important;
    border-radius: var(--n-radius-sm) !important;
    box-shadow: none !important;
}

/* Tooltips */
.chat-input-tooltip,
.tooltip {
    background: var(--n-raised) !important;
    border: 1px solid var(--n-border) !important;
    color: var(--n-text) !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   10. Controls — buttons, fields, tabs, chips, tables
   -------------------------------------------------------------------------- */

.btn-primary,
.btn-modal.btn-primary,
.btn-send-primary,
.btn-train-new-run,
.btn-workflow,
.btn-crypto-select,
.btn-train-header.btn-subscribe-header {
    background: var(--n-action) !important;
    color: var(--n-on-action) !important;
    border: 1px solid transparent !important;
    border-radius: var(--n-radius-sm) !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    box-shadow: none !important;
}

.btn-primary:hover,
.btn-train-new-run:hover,
.btn-workflow:hover {
    opacity: 0.88;
    transform: none !important;
}

.btn-secondary,
.btn-ghost,
.btn-small,
.btn-modal,
.btn-back-chat,
.btn-train-header.btn-workflows-header {
    background: var(--n-raised) !important;
    color: var(--n-text) !important;
    border: 1px solid var(--n-border) !important;
    border-radius: var(--n-radius-sm) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.btn-secondary:hover,
.btn-ghost:hover,
.btn-small:hover,
.btn-modal:hover,
.btn-back-chat:hover {
    background: var(--n-mist) !important;
    color: var(--n-text) !important;
    transform: none !important;
}

.btn-ghost {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--n-text-2) !important;
}

.btn-ghost:hover {
    background: var(--n-raised) !important;
    color: var(--n-text) !important;
}

.btn-danger,
.btn-danger-train,
.btn-modal.btn-danger,
button.danger {
    background: var(--n-danger-soft) !important;
    color: var(--n-danger) !important;
    border: 1px solid transparent !important;
    border-radius: var(--n-radius-sm) !important;
    box-shadow: none !important;
}

/* Form fields */
/* Colour and radius only — page-specific padding/height stay intact. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
textarea,
select,
.form-input {
    background: var(--n-mist) !important;
    border: 1px solid transparent !important;
    border-radius: var(--n-radius-xs) !important;
    color: var(--n-text) !important;
    box-shadow: none !important;
}

.form-input,
.chat-input,
.modal-content input[type="text"],
.modal-content input[type="password"],
.modal-content select {
    font-size: 15px;
}

input:focus,
textarea:focus,
select:focus,
.form-input:focus {
    border-color: var(--n-text-3) !important;
    box-shadow: none !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--n-text-3) !important;
    opacity: 1;
}

.form-row label,
.form-label,
label {
    color: var(--n-text-2);
}

.form-row label,
label {
    font-size: 13px !important;
    font-weight: 500 !important;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--n-text);
}

/* Tabs / segmented controls */
.tasks-tab,
.workflows-tab,
.train-engine-tab,
.ud-tab,
.mcp-filter-btn,
.chat-mode-toggle-btn {
    background: transparent !important;
    color: var(--n-text-2) !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    font-weight: 600 !important;
}

.tasks-tab.active,
.workflows-tab.active,
.train-engine-tab.active,
.ud-tab.active,
.mcp-filter-btn.active,
.mcp-filter-btn.is-active {
    background: var(--n-mist) !important;
    color: var(--n-text) !important;
    box-shadow: none !important;
}

/* Chips, badges, pills */
.chip,
.badge,
.expert-chip,
.experts-pill,
.message-source-badge,
.status-pill,
.tag {
    background: var(--n-raised) !important;
    border: 1px solid var(--n-border) !important;
    color: var(--n-text-2) !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.badge.ok,
.chip.ok,
.status-pill.ok {
    color: var(--n-success) !important;
    border-color: var(--n-success-soft) !important;
}

.badge.bad,
.chip.bad,
.status-pill.bad {
    color: var(--n-danger) !important;
    border-color: var(--n-danger-soft) !important;
}

/* Tables */
table {
    border-collapse: collapse;
}

table th {
    color: var(--n-text-3) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase;
}

table td,
table th {
    border-color: var(--n-divider) !important;
}

/* Attachments */
.attachment-chip,
.attachment-preview-item {
    background: var(--n-mist) !important;
    border: 1px solid transparent !important;
    border-radius: var(--n-radius-xs) !important;
    color: var(--n-text) !important;
}

/* Progress + meters */
.progress-bar,
.train-tiny-progress-track,
.meter-track {
    background: var(--n-raised) !important;
}

.progress-fill,
.train-tiny-progress-fill,
.meter-fill {
    background: var(--n-text) !important;
    background-image: none !important;
}

/* --------------------------------------------------------------------------
   11. Admin console (admin.html has its own inline theme)
   -------------------------------------------------------------------------- */

.admin-tab {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--n-text-2) !important;
    border-radius: var(--n-radius-xs) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.admin-tab:hover {
    background: var(--n-raised) !important;
    color: var(--n-text) !important;
    transform: none !important;
    border-color: transparent !important;
}

.admin-tab.active {
    background: var(--n-text) !important;
    color: var(--n-on-action) !important;
    box-shadow: none !important;
}

.admin-section,
.admin-box,
.admin-card,
.admin-kv-card,
.admin-metric-panel,
.admin-recent-item,
.admin-modal {
    background: var(--n-surface) !important;
    border: 1px solid var(--n-border) !important;
    border-radius: var(--n-radius) !important;
    color: var(--n-text) !important;
}

.admin-chip,
.admin-attachment-chip {
    background: var(--n-raised) !important;
    border-color: var(--n-border) !important;
    color: var(--n-text) !important;
}

.admin-bar-track {
    background: var(--n-raised) !important;
}

.admin-bar-fill,
.admin-ranked-fill {
    background: var(--n-text) !important;
    background-image: none !important;
}

.admin-ranked-track {
    background: var(--n-raised) !important;
}

.admin-btn-primary,
.btn-small.admin-btn-primary,
#usage-refresh-btn,
#edit-user-save,
.admin-confirm-ok {
    background: var(--n-action) !important;
    color: var(--n-on-action) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.admin-eyebrow {
    color: var(--n-text-3) !important;
}

.admin-table thead th {
    background: var(--n-surface) !important;
    color: var(--n-text-3) !important;
}

.admin-table tbody tr:nth-child(odd) {
    background: transparent !important;
}

.admin-table tbody tr:hover {
    background: var(--n-raised) !important;
}

.admin-badge.ok {
    background: var(--n-success-soft) !important;
    color: var(--n-success) !important;
}

.admin-badge.warn {
    background: var(--n-raised) !important;
    color: var(--n-text-2) !important;
}

.admin-badge.bad {
    background: var(--n-danger-soft) !important;
    color: var(--n-danger) !important;
}

.admin-id-chip,
.admin-chat-kind.chat,
.admin-chat-kind.direct_message,
.admin-chat-kind.guest {
    background: var(--n-mist) !important;
    color: var(--n-text-2) !important;
}

.admin-chat-kind,
.admin-mini-note,
.admin-obsv-note,
.admin-kv-label,
.admin-kv-sub,
.admin-card-sub {
    color: var(--n-text-2) !important;
}

.admin-metric-value,
.admin-kv-value,
.admin-card-value {
    color: var(--n-text) !important;
    letter-spacing: -0.03em;
}

/* --------------------------------------------------------------------------
   12. Other surfaces (notes, dashboard, login, marketplace, voice, mail)
   -------------------------------------------------------------------------- */

.note-card,
.notes-card,
.dashboard-card,
.metric-card,
.mkt-card,
.vs-card,
.email-card,
.paywall-card,
.login-card {
    background: var(--n-surface) !important;
    border: 1px solid var(--n-border) !important;
    border-radius: var(--n-radius) !important;
    box-shadow: none !important;
    color: var(--n-text) !important;
}

.login-card,
.paywall-card {
    background: var(--n-surface) !important;
}

.login-form input,
.paywall-form input {
    background: var(--n-mist) !important;
}

/* Flat, quiet page headers everywhere */
.page-header,
.dashboard-header,
.notes-header,
.email-header,
.settings-header {
    background: var(--n-paper) !important;
    border-bottom: 1px solid var(--n-divider) !important;
    box-shadow: none !important;
}


/* --------------------------------------------------------------------------
   12b. Legacy accent sweep — places style.css still paints the old orange
   -------------------------------------------------------------------------- */

.input-mode-icon,
html[data-theme="dark"] .input-mode-icon {
    color: var(--n-text) !important;
    background: var(--n-mist) !important;
    border-color: var(--n-border) !important;
}

.plus-menu-check {
    color: var(--n-text) !important;
}

.toggle-label input[type="checkbox"]:checked,
.expert-settings-row input[type="checkbox"]:checked,
input[type="checkbox"]:checked {
    background: var(--n-text) !important;
    border-color: var(--n-text) !important;
    color: var(--n-on-action) !important;
}

.chat-history-meta-tag,
.chat-history-source-badge,
.chat-history-source-badge.telegram,
.chat-history-source-badge.discord,
.chat-history-source-badge.slack {
    background: var(--n-mist) !important;
    color: var(--n-text-2) !important;
    border-color: var(--n-border) !important;
}

.central-loader-ring,
html[data-theme="dark"] .central-loader-ring {
    border-color: var(--n-mist) !important;
    border-top-color: var(--n-text) !important;
    border-right-color: var(--n-text) !important;
    border-bottom-color: var(--n-mist) !important;
    border-left-color: var(--n-mist) !important;
}

.central-loader-core,
html[data-theme="dark"] .central-loader-core {
    background: var(--n-text) !important;
    background-image: none !important;
    box-shadow: none !important;
}

.chat-waiting-spinner,
html[data-theme="dark"] .chat-waiting-spinner,
.avatar-voice-spinner,
html[data-theme="dark"] .avatar-voice-spinner {
    border-color: var(--n-raised) !important;
    border-top-color: var(--n-text) !important;
}

.chat-waiting-dot,
html[data-theme="dark"] .chat-waiting-dot {
    background: var(--n-text-2) !important;
}

.mcp-filter-btn.active,
html[data-theme="dark"] .mcp-filter-btn.active {
    background: var(--n-mist) !important;
    border-color: var(--n-border) !important;
    color: var(--n-text) !important;
}

.mcp-marketplace-recommended {
    background: var(--n-mist) !important;
    color: var(--n-text-2) !important;
}

.tasks-board-card-run {
    background: var(--n-text) !important;
    background-image: none !important;
    color: var(--n-on-action) !important;
    box-shadow: none !important;
}

.tasks-board-card-dot-pending,
.tasks-board-card-dot {
    background: var(--n-text-3) !important;
}

.tasks-board-card-dot-running,
.tasks-board-card-dot-in-progress {
    background: var(--n-text) !important;
}

.tasks-board-column-drag-over,
html[data-theme="dark"] .tasks-board-column-drag-over {
    background: var(--n-raised) !important;
    outline-color: var(--n-text-3) !important;
}

.tasks-board-card-history-placeholder,
html[data-theme="dark"] .tasks-board-card-history-placeholder,
.tasks-board-card-history-placeholder:hover {
    background: var(--n-raised) !important;
    border-color: var(--n-border) !important;
}

.tasks-board-modal-content .btn-ghost,
html[data-theme="dark"] .tasks-board-modal-content .btn-ghost,
.tasks-board-modal-content .btn-ghost:hover {
    color: var(--n-text) !important;
    border-color: var(--n-border) !important;
    background: var(--n-raised) !important;
}

.train-section h2 {
    border-left-color: var(--n-border) !important;
}

.memory-card {
    border-left-color: var(--n-border) !important;
}

.sidebar-workspace-card {
    background-image: none !important;
    background: var(--n-raised) !important;
}

/* Status + semantic dots */
.status-dot.status-dot-orange,
.status-dot-orange {
    background: var(--n-text-3) !important;
}

.status-dot.status-dot-green,
.status-dot.is-online {
    background: var(--n-success) !important;
}

.workflows-palette-icon,
.workflows-palette-item.is-active {
    background: var(--n-raised) !important;
    color: var(--n-text) !important;
    border-color: var(--n-border) !important;
}


/* Login + auth surfaces (login.html carries its own indigo dark overrides) */
.login-form .btn-submit,
html[data-theme="dark"] .login-form .btn-submit,
html[data-theme="dark"] .login-form .btn-submit:hover,
.login-form .btn-submit:hover {
    background: var(--n-action) !important;
    background-image: none !important;
    color: var(--n-on-action) !important;
    border: none !important;
    border-radius: 14px !important;
    min-height: 52px;
    font-size: 16px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.btn-google,
html[data-theme="dark"] .btn-google {
    background: var(--n-raised) !important;
    color: var(--n-text) !important;
    border: 1px solid var(--n-border) !important;
    border-radius: 14px !important;
    min-height: 52px;
    font-size: 16px !important;
    font-weight: 500 !important;
}

.btn-login-secondary,
html[data-theme="dark"] .btn-login-secondary,
html[data-theme="dark"] .btn-login-secondary:hover {
    background: var(--n-raised) !important;
    color: var(--n-text) !important;
    border: 1px solid var(--n-border) !important;
    border-radius: 14px !important;
    min-height: 52px;
    font-size: 16px !important;
}

html[data-theme="dark"] .login-form input:focus,
.login-form input:focus {
    border-color: var(--n-text-3) !important;
    box-shadow: none !important;
}

.login-card,
html[data-theme="dark"] .login-card {
    background: var(--n-surface) !important;
    border: 1px solid var(--n-border) !important;
    border-radius: 26px !important;
    box-shadow: none !important;
}

.login-card h1,
html[data-theme="dark"] .login-card h1 {
    color: var(--n-text) !important;
    font-weight: 400 !important;
    letter-spacing: -0.035em !important;
}

.login-card .subtitle,
html[data-theme="dark"] .login-card .subtitle {
    color: var(--n-text-2) !important;
}

.login-form label,
html[data-theme="dark"] .login-form label {
    color: var(--n-text-3) !important;
    font-size: 11px !important;
    letter-spacing: 0.55px !important;
}

.login-form input,
html[data-theme="dark"] .login-form input {
    background: var(--n-mist) !important;
    border: 1px solid transparent !important;
    color: var(--n-text) !important;
    border-radius: 14px !important;
    min-height: 52px;
    font-size: 16px !important;
}

/* Chat artifact dock — the last indigo surface */
.artifact-ref-chip,
html[data-theme="dark"] .artifact-ref-chip,
.artifact-ref-chip:hover {
    background: var(--n-raised) !important;
    border: 1px solid var(--n-border) !important;
    color: var(--n-text) !important;
}

.chat-artifact-tab.is-active {
    border-color: var(--n-text-3) !important;
    background: var(--n-raised) !important;
    color: var(--n-text) !important;
}

/* Admin header links */
.admin-nav-link,
.admin-nav-link:hover,
html[data-theme="dark"] .admin-nav-link,
html[data-theme="light"] .admin-nav-link {
    background: var(--n-raised) !important;
    border: 1px solid var(--n-border) !important;
    color: var(--n-text) !important;
    box-shadow: none !important;
}

.admin-nav-link-muted,
html[data-theme="dark"] .admin-nav-link-muted {
    background: transparent !important;
    color: var(--n-text-2) !important;
}

/* Empty-state copy picks up the neutral tertiary instead of slate */
.chats-history-empty,
.video-sessions-empty,
.internal-chats-empty,
.empty-state,
.empty-state-text {
    color: var(--n-text-3) !important;
}


/* brand.css components: --brand-ink is a foreground token now, so the filled
   pills need the native action pair instead of white-on-white. */
.brand-pill--dark,
.brand-pill--orange,
.brand-pill--dark:hover,
.brand-pill--orange:hover {
    background: var(--n-action) !important;
    color: var(--n-on-action) !important;
    box-shadow: none !important;
}

.brand-pill--outline,
.brand-pill--outline:hover {
    background: transparent !important;
    border-color: var(--n-border) !important;
    color: var(--n-text) !important;
}

.brand-pill:hover {
    transform: none !important;
}

.btn-lang-login.active,
.btn-lang-login:hover {
    background: var(--n-text) !important;
    color: var(--n-on-action) !important;
    border-color: var(--n-text) !important;
}

.btn-lang-login {
    color: var(--n-text-2) !important;
    border-color: var(--n-border) !important;
}

/* Notes */
.notes-feature-card {
    background: var(--n-raised) !important;
    border: 1px solid var(--n-border) !important;
    color: var(--n-text) !important;
}

.new-note-input-wrap {
    background: var(--n-mist) !important;
    border: 1px solid transparent !important;
}

.btn-add-note {
    background: var(--n-action) !important;
    color: var(--n-on-action) !important;
    border: none !important;
    border-radius: var(--n-radius-xs) !important;
    font-weight: 600 !important;
}

.notes-day-column,
.note-card,
.notes-day {
    background: var(--n-surface) !important;
    border: 1px solid var(--n-divider) !important;
}


/* --------------------------------------------------------------------------
   12c. Page sub-palettes — remap each page's private tokens onto the system
   -------------------------------------------------------------------------- */

/* /email */
body,
html[data-theme="dark"] body {
    --em-bg: var(--n-paper);
    --em-panel: var(--n-surface);
    --em-panel-2: var(--n-surface);
    --em-panel-3: var(--n-raised);
    --em-border: var(--n-border);
    --em-border-strong: var(--n-border);
    --em-text: var(--n-text);
    --em-muted: var(--n-text-2);
    --em-accent: var(--n-text);
    --em-accent-strong: var(--n-text);
    --em-accent-soft: var(--n-raised);
    --em-blue: var(--n-text-2);
    --em-blue-soft: var(--n-raised);
    --em-green: var(--n-success);
    --em-green-soft: var(--n-success-soft);
    --em-red: var(--n-danger);
    --em-red-soft: var(--n-danger-soft);
    --em-shadow: none;
}

/* /marketplace */
.mkt {
    --mkt-bg: var(--n-paper);
    --mkt-surface: var(--n-surface);
    --mkt-surface-hover: var(--n-raised);
    --mkt-line: var(--n-border);
    --mkt-line-strong: var(--n-border);
    --mkt-text: var(--n-text);
    --mkt-muted: var(--n-text-2);
    --mkt-dim: var(--n-text-3);
    --mkt-accent: var(--n-text);
}

/* /dashboard */
body,
html[data-theme="dark"] body {
    --dash-ink: var(--n-text);
    --dash-muted: var(--n-text-2);
    --dash-line: var(--n-border);
    --dash-panel: var(--n-surface);
    --dash-panel-strong: var(--n-surface);
    --dash-accent: var(--n-text);
    --dash-accent-2: var(--n-text-2);
    --dash-shadow: none;
    --dash-bg: var(--n-paper);
}

.dash-eyebrow,
.dash-subtitle {
    color: var(--n-text-2) !important;
}

.dash-control,
.dash-card,
.dash-panel,
.dash-hero {
    background: var(--n-surface) !important;
    border-color: var(--n-border) !important;
    box-shadow: none !important;
    color: var(--n-text) !important;
}


/* Email client — hardcoded legacy accent in email.css */
.em-ai-badge {
    background: var(--n-raised) !important;
    border-color: var(--n-border) !important;
    color: var(--n-text-2) !important;
}

.em-btn-primary {
    background: var(--n-action) !important;
    background-image: none !important;
    border-color: transparent !important;
    color: var(--n-on-action) !important;
    box-shadow: none !important;
}

.em-btn-primary:hover:not(:disabled) {
    background: var(--n-action) !important;
    opacity: 0.88;
}

.em-btn-primary .em-btn-label {
    color: inherit !important;
}

.em-btn-soft {
    background: var(--n-raised) !important;
    border-color: var(--n-border) !important;
    color: var(--n-text) !important;
}

.em-btn-soft:hover:not(:disabled) {
    background: var(--n-mist) !important;
}

.em-count {
    background: var(--n-raised) !important;
    color: var(--n-text-2) !important;
}

.em-nav button.is-active .em-count {
    background: var(--n-mist) !important;
    color: var(--n-text) !important;
}

.em-chips button.is-active {
    background: var(--n-mist) !important;
    border-color: var(--n-border) !important;
    color: var(--n-text) !important;
}

.em-search-wrap input:focus,
.em-compose input:focus,
.em-compose textarea:focus {
    border-color: var(--n-text-3) !important;
    box-shadow: none !important;
}

/* Marketplace chips */
.mkt-chips button.is-active {
    background: var(--n-mist) !important;
    border-color: var(--n-border) !important;
    color: var(--n-text) !important;
}

/* Dashboard hero + legend dots */
.dash-hero {
    color: var(--n-text) !important;
}

.dash-legend-dot {
    background: var(--n-text-2) !important;
    background-image: none !important;
}


.dash-control button {
    background: var(--n-action) !important;
    background-image: none !important;
    color: var(--n-on-action) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}


/* --------------------------------------------------------------------------
   14. Sidebar — ChatGPT-style single rail
   -------------------------------------------------------------------------- */

.sidebar-content {
    padding: 14px 10px 10px !important;
    gap: 2px !important;
}

.sidebar-footer {
    padding: 8px 10px calc(10px + var(--sab)) !important;
    border-top: 1px solid var(--n-divider) !important;
    background: transparent !important;
}

/* The rail carries its own collapse control once open. */
body:has(#sidebar:not(.hidden)) .sidebar-toggle {
    display: none !important;
}

.sb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 4px 10px;
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--n-surface);
}

.sb-workspace {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    border: none;
    border-radius: var(--n-radius-row);
    background: transparent;
    color: var(--n-text);
    cursor: pointer;
    min-width: 0;
}

.sb-workspace:hover {
    background: var(--n-raised);
}

.sb-workspace-static,
.sb-workspace-static:hover {
    cursor: default;
    background: transparent;
}

.sb-wordmark {
    font-size: 17px !important;
    font-weight: 500 !important;
    letter-spacing: -0.05em;
    line-height: 1;
    color: var(--n-text) !important;
}

.sb-wordmark .brand-wordmark__ai {
    font-size: 9px !important;
    margin-top: 0;
}

.sb-chevron {
    color: var(--n-text-3);
}

.sb-head-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.sb-icon-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--n-text-2);
    cursor: pointer;
}

.sb-icon-btn:hover {
    background: var(--n-raised);
    color: var(--n-text);
}

.sb-search {
    padding: 0 4px 8px;
}

.sb-search input {
    width: 100%;
    height: 36px;
    padding: 0 10px !important;
    border-radius: var(--n-radius-row) !important;
    background: var(--n-raised) !important;
    border: 1px solid var(--n-border) !important;
    color: var(--n-text) !important;
    font-size: 13px !important;
}

.sb-primary {
    display: grid;
    gap: 1px;
    padding-bottom: 6px;
}

.sb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--n-radius-row);
    background: transparent;
    color: var(--n-text);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.sb-row svg {
    flex: 0 0 auto;
    color: var(--n-text-2);
}

.sb-row:hover {
    background: var(--n-raised);
    border-color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

.sb-row-primary {
    min-height: 40px;
    background: var(--n-raised);
    border-color: var(--n-border);
    font-weight: 600;
}

.sb-row-primary:hover {
    background: var(--n-mist);
}

.sb-row-quiet {
    min-height: 34px;
    color: var(--n-text-2);
    font-size: 13px;
}

.sb-usage {
    margin: 8px 2px 4px;
    padding: 10px 12px;
    border: 1px solid var(--n-divider);
    border-radius: var(--n-radius-sm);
    background: transparent;
}

.sb-usage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.sb-usage-head .sb-section-label {
    padding: 0 !important;
}

.sb-usage-action {
    border: none;
    background: transparent;
    color: var(--n-text-2);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 6px;
}

.sb-usage-action:hover {
    background: var(--n-raised);
    color: var(--n-text);
}

.sb-usage-rows {
    display: grid;
    gap: 4px;
}

.sb-usage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--n-text-2);
}

.sb-usage-row strong {
    color: var(--n-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sb-usage-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.sb-pill {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--n-mist);
    color: var(--n-text-2);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.sb-section {
    margin-top: 10px;
    min-height: 0;
}

.sb-section-label {
    display: block;
    padding: 0 10px 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase;
    color: var(--n-text-3) !important;
}

.sb-recents .chats-history-scroll,
.sb-section .chats-history-scroll,
.sb-section .video-sessions-scroll {
    max-height: 260px;
}

.sb-account {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: var(--n-radius-xs);
    background: transparent;
    color: var(--n-text);
    text-align: left;
    cursor: pointer;
}

.sb-account:hover {
    background: var(--n-raised);
}

.sb-account .user-avatar {
    width: 30px;
    height: 30px;
    min-width: 30px;
    background: var(--n-mist);
    color: var(--n-text);
    font-size: 11px;
    font-weight: 600;
}

.sb-account-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.sb-account-copy .user-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--n-text) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-account-plan {
    font-size: 11.5px;
    color: var(--n-text-3);
}

.sb-gear {
    color: var(--n-text-3);
    display: inline-flex;
}

.sb-account:hover .sb-gear {
    color: var(--n-text);
}

#legacySidebarControls {
    display: none !important;
}


/* Settings → Tools rows + scaling toggles */
.stg-tools {
    display: grid;
    gap: 6px;
}

.stg-tool {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--n-border);
    border-radius: var(--n-radius-xs);
    background: var(--n-surface);
    color: var(--n-text);
    text-align: left;
    cursor: pointer;
}

.stg-tool:hover {
    background: var(--n-raised);
}

.stg-tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--n-raised);
    color: var(--n-text);
    flex: 0 0 auto;
}

.stg-tool:hover .stg-tool-icon {
    background: var(--n-mist);
}

.stg-tool-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.stg-tool-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.stg-tool-desc {
    font-size: 12px;
    color: var(--n-text-2);
}

.stg-tool-chevron {
    color: var(--n-text-3);
    font-size: 18px;
    line-height: 1;
}

.stg-tool-danger .stg-tool-label {
    color: var(--n-danger);
}

.stg-tool-danger:hover {
    border-color: var(--n-danger-soft);
}

.stg-toggles {
    display: grid;
    gap: 8px;
}

.stg-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--n-border);
    border-radius: var(--n-radius-xs);
    background: var(--n-surface);
    font-size: 14px;
    color: var(--n-text);
    cursor: pointer;
}

.stg-toggle-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--n-text);
}


/* Empty chat: the wordmark is the whole empty state — centre it like the apps */
.chat-messages:has(> .welcome-message:only-child) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.welcome-message {
    margin: 0 !important;
    padding: 24px !important;
}

.welcome-message h2.brand-wordmark {
    margin: 0 auto !important;
}

/* --------------------------------------------------------------------------
   13. Focus + motion
   -------------------------------------------------------------------------- */

button,
a,
input,
textarea,
select,
[role="button"] {
    transition-property: background-color, border-color, color, opacity;
    transition-duration: 0.16s;
    transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    button,
    a,
    input,
    textarea,
    select,
    [role="button"] {
        transition: none !important;
    }
}

/* Sidebar account/nav overflow guard: long emails must never bleed into chat. */
.sidebar { overflow-x: hidden !important; }
.sidebar-content { min-width: 0 !important; }
.sidebar-footer { min-width: 0 !important; overflow: hidden !important; }
.sb-account { min-width: 0 !important; overflow: hidden !important; }
.sb-account-copy { flex: 1 1 0% !important; min-width: 0 !important; overflow: hidden !important; }
.sb-account-copy .user-name,
.sb-account-plan {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.sb-gear { flex: 0 0 auto !important; }
.sb-row { min-width: 0; }
.sb-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sidebar sections must never flex-shrink into each other. The content rail
   scrolls as one column; the account footer stays pinned below it. */
.sidebar-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.sidebar-footer {
    flex: 0 0 auto !important;
    position: relative;
    z-index: 2;
}
.sidebar-content > .sb-head,
.sidebar-content > .sb-primary,
.sidebar-content > .sb-usage,
.sidebar-content > .sb-section {
    flex: 0 0 auto !important;
}
.sb-section {
    overflow: visible;
}
.sb-recents .chats-history-scroll,
.sb-section .chats-history-scroll {
    max-height: 220px;
}
#chatMessages {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}