/* tokens.css */

/* =========================
   1) BASE BRAND TOKENS
   ========================= */
:root {
    /* Brand */
    --ava-bg-0: #001623;
    --ava-bg-1: #002A43;
    --ava-bg-2: #001E30;
    --ava-bg-3: #041a2b;
    --ava-accent: #0AF3DB;
    --ava-accent-2: #4BE8FF;
    --ava-accent-3: #10d7b6;
    --ava-accent-warm: #7CFFB2;
    --ava-accent-soft: rgba(10, 243, 219, 0.24);
    --ava-accent-soft-2: rgba(10, 243, 219, 0.12);
    --ava-accent-soft-3: rgba(75, 232, 255, 0.10);
    /* Text */
    --ava-text: rgba(234, 250, 252, 0.96);
    --ava-text-soft: rgba(234, 250, 252, 0.78);
    --ava-text-muted: rgba(234, 250, 252, 0.52);
    --ava-text-faint: rgba(234, 250, 252, 0.34);
    /* Feedback */
    --ava-danger: #ff4d4d;
    --ava-danger-2: #ff2f6d;
    --ava-warning: #ffb020;
    --ava-ok: #58f3a6;
    /* App background */
    --ava-app-bg: radial-gradient(900px 500px at 18% 10%, rgba(10,243,219,0.10), transparent 60%), radial-gradient(800px 420px at 82% 20%, rgba(75,232,255,0.08), transparent 62%), radial-gradient(900px 620px at 60% 100%, rgba(124,255,178,0.06), transparent 60%), linear-gradient(135deg, var(--ava-bg-1), var(--ava-bg-2));
    /* =========================
     2) DESIGN SYSTEM TOKENS
     ========================= */
    /* Surfaces (semantisch) */
    --ava-panel: rgba(0, 30, 48, 0.82);
    --ava-panel-2: rgba(0, 42, 67, 0.62);
    --ava-panel-3: rgba(0, 42, 67, 0.38);
    --ava-glass: rgba(255, 255, 255, 0.04);
    --ava-glass-2: rgba(255, 255, 255, 0.06);
    --ava-surface-0: rgba(0, 22, 35, 0.55);
    --ava-surface-1: var(--ava-panel);
    --ava-surface-2: var(--ava-panel-2);
    --ava-surface-3: var(--ava-panel-3);
    /* Borders / Rings */
    --ava-border-0: rgba(255, 255, 255, 0.06);
    --ava-border-1: rgba(10, 243, 219, 0.14);
    --ava-border-2: rgba(75, 232, 255, 0.22);
    --ava-ring: 0 0 0 3px rgba(10, 243, 219, 0.16);
    --ava-ring-2: 0 0 0 3px rgba(75, 232, 255, 0.14);
    --ava-focus-ring: var(--ava-ring-2);
    /* Radii */
    --ava-radius-sm: 10px;
    --ava-radius-md: 14px;
    --ava-radius-lg: 18px;
    /* Spacing */
    --ava-space-1: 6px;
    --ava-space-2: 10px;
    --ava-space-3: 14px;
    --ava-space-4: 18px;
    /* Shadows (etwas “cleaner”) */
    --ava-shadow: 0 10px 28px rgba(0, 0, 0, 0.46);
    --ava-shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.28);
    --ava-shadow-edge: 0 0 0 1px rgba(255,255,255,0.05) inset;
    /* Typography */
    --ava-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans";
    --ava-font-size: 14px;
    --ava-line: 1.35;
    /* Motion */
    --ava-ease: cubic-bezier(.2,.8,.2,1);
    --ava-dur-1: 140ms;
    --ava-dur-2: 220ms;
    --ava-list-item-bg: var(--ava-panel-3);
    --ava-list-item-border: var(--ava-border-0);
    --ava-list-item-hover-bg: var(--ava-accent-soft-3);
    --ava-list-item-hover-border: var(--ava-border-2);
    --ava-list-item-active-bg: var(--ava-accent-soft);
    --ava-list-item-active-border: rgba(10,243,219,0.38);
    --ava-scroll-thumb: var(--ava-chat-scroll-thumb);
    --ava-scroll-thumb-hover: var(--ava-chat-scroll-thumb-hover);
    --ava-scroll-track: transparent;
    --ava-scroll-border: var(--ava-chat-scroll-thumb-border);
    --ava-scroll-size: 12px;
    --ava-scroll-radius: 999px;
}

/* =========================
   3) GLOBAL TYPING (nur wenn du willst)
   ========================= */
.ava-app {
    font-family: var(--ava-font-sans);
    font-size: var(--ava-font-size);
    line-height: var(--ava-line);
}

    .ava-app h1, .ava-app h2, .ava-app h3, .ava-app h4, .ava-app h5, .ava-app h6,
    .ava-app label {
        color: var(--ava-text) !important;
    }

/* =========================
   4) SETTINGS OVERRIDES (dein Ansatz, nur sauber)
   ========================= */
.settings-app {
    --ava-panel: rgba(0, 30, 48, 0.92);
    --ava-panel-2: rgba(0, 42, 67, 0.86);
    --ava-panel-3: rgba(0, 42, 67, 0.78);
    --ava-glass: rgba(255,255,255,0.02);
    --ava-glass-2: rgba(255,255,255,0.03);
    --ava-accent-soft: rgba(10,243,219,0.14);
    --ava-accent-soft-2: rgba(10,243,219,0.07);
    --ava-accent-soft-3: rgba(75,232,255,0.05);
    --ava-shadow: 0 8px 22px rgba(0, 0, 0, 0.42);
    --ava-shadow-soft: 0 6px 16px rgba(0, 0, 0, 0.26);
    --ava-border-0: rgba(255,255,255,0.045);
    --ava-focus-ring: 0 0 0 2px rgba(75, 232, 255, 0.10);
}

/* =========================================================
   CHAT TOKENS — required by chat component CSS
   (place in global ava-theme.css :root)
   ========================================================= */
:root {
    /* Glass layers used in gradients */
    --ava-chat-glass-1: rgba(255, 255, 255, 0.04);
    --ava-chat-glass-2: rgba(255, 255, 255, 0.06);
    --ava-chat-glass-3: rgba(255, 255, 255, 0.10);
    /* Sidebar */
    --ava-chat-sidebar-border: rgba(10, 243, 219, 0.10);
    --ava-chat-sidebar-bg-1: rgba(0, 30, 48, 0.90);
    --ava-chat-sidebar-bg-2: rgba(0, 30, 48, 0.72);
    --ava-chat-sidebar-head-bg-1: rgba(255, 255, 255, 0.03);
    --ava-chat-sidebar-head-bg-2: transparent;
    /* Buttons (primary) */
    --ava-chat-btn-grad-1: rgba(0, 42, 67, 0.92);
    --ava-chat-btn-grad-2: rgba(10, 243, 219, 0.75);
    --ava-chat-btn-text: var(--ava-bg-2);
    --ava-chat-btn-shadow: rgba(10, 243, 219, 0.22);
    --ava-chat-btn-shadow-hover: rgba(10, 243, 219, 0.30);
    /* Missing in your token block but referenced in chat CSS */
    --ava-chat-btn-border: rgba(10, 243, 219, 0.22);
    --ava-chat-btn-border-hover: rgba(75, 232, 255, 0.40);
    /* Icon buttons */
    --ava-chat-icon-btn-bg: rgba(0, 42, 67, 0.50);
    --ava-chat-icon-btn-bg-hover: rgba(10, 243, 219, 0.10);
    --ava-chat-icon-btn-border: rgba(10, 243, 219, 0.18);
    --ava-chat-icon-btn-border-hover: rgba(75, 232, 255, 0.35);
    /* Icon/text muted */
    --ava-chat-icon-muted: rgba(234, 250, 252, 0.52);
    /* Chat list hover */
    --ava-chat-list-hover-bg: rgba(255, 255, 255, 0.04);
    /* Messages */
    --ava-chat-msg-border: rgba(10, 243, 219, 0.12);
    --ava-chat-msg-bg: rgba(0, 30, 48, 0.55);
    --ava-chat-msg-bot-border: rgba(75, 232, 255, 0.10);
    --ava-chat-msg-bot-bg-overlay: rgba(255, 255, 255, 0.05);
    --ava-chat-msg-bot-bg: rgba(0, 30, 48, 0.64);
    --ava-chat-msg-user-glow: rgba(10, 243, 219, 0.16);
    --ava-chat-msg-user-bg-1: rgba(0, 42, 67, 0.55);
    --ava-chat-msg-user-bg-2: rgba(0, 30, 48, 0.78);
    --ava-chat-msg-user-border: rgba(10, 243, 219, 0.24);
    /* Error */
    --ava-chat-error-bg: rgba(255, 77, 77, 0.12);
    --ava-chat-error-border: rgba(255, 77, 77, 0.55);
    --ava-chat-error-text: rgba(255, 220, 220, 0.92);
    --ava-chat-error-shadow: rgba(255, 77, 77, 0.10);
    /* Links */
    --ava-chat-link: rgba(75, 232, 255, 0.95);
    /* Chips */
    --ava-chat-chip-bg: rgba(0, 42, 67, 0.50);
    --ava-chat-chip-border: rgba(10, 243, 219, 0.16);
    --ava-chat-chip-text: rgba(10, 243, 219, 0.92);
    /* Docs inside messages (chip-like buttons) */
    --ava-chat-doc-bg: rgba(0, 42, 67, 0.45);
    --ava-chat-doc-bg-hover: rgba(0, 42, 67, 0.58);
    --ava-chat-doc-border: rgba(10, 243, 219, 0.16);
    --ava-chat-doc-border-hover: rgba(75, 232, 255, 0.28);
    --ava-chat-doc-text: var(--ava-text);
    /* Hint divider */
    --ava-chat-hint-divider: rgba(255, 255, 255, 0.08);
    /* Input */
    --ava-chat-input-border: rgba(10, 243, 219, 0.12);
    --ava-chat-input-bg: rgba(0, 42, 67, 0.26);
    --ava-chat-input-bg-focus: rgba(0, 42, 67, 0.38);
    --ava-chat-input-focus-border: rgba(75, 232, 255, 0.55);
    /* File button */
    --ava-chat-file-bg: rgba(0, 42, 67, 0.44);
    --ava-chat-file-bg-hover: rgba(0, 42, 67, 0.58);
    --ava-chat-file-border: rgba(10, 243, 219, 0.16);
    --ava-chat-file-border-hover: rgba(75, 232, 255, 0.28);
    --ava-chat-file-icon: var(--ava-accent);
    /* “Danger” hover for delete icons etc. */
    --ava-chat-danger-bg: rgba(255, 77, 77, 0.12);
    --ava-chat-danger-border: rgba(255, 77, 77, 0.42);
    /* Send button */
    --ava-chat-send-border: rgba(10, 243, 219, 0.22);
    --ava-chat-send-grad-1: rgba(0, 42, 67, 0.95);
    --ava-chat-send-grad-2: rgba(10, 243, 219, 0.80);
    --ava-chat-send-border-hover: rgba(75, 232, 255, 0.40);
    --ava-chat-send-shadow: rgba(10, 243, 219, 0.18);
    --ava-chat-send-shadow-hover: rgba(10, 243, 219, 0.26);
    /* Elevation helper used by chips/docs/file btn */
    --ava-chat-elev: rgba(0, 0, 0, 0.22);
    /* Scrollbar */
    --ava-chat-scroll-thumb: rgba(10, 243, 219, 0.18);
    --ava-chat-scroll-thumb-hover: rgba(75, 232, 255, 0.26);
    --ava-chat-scroll-thumb-border: rgba(0, 30, 48, 0.70);
    --ava-btn-radius: 999px;
    /* Primary (Neuer Chat) */
    --ava-btn-primary-grad-1: rgba(0, 42, 67, 0.92);
    --ava-btn-primary-grad-2: rgba(10, 243, 219, 0.75);
    --ava-btn-primary-text: var(--ava-bg-2);
    --ava-btn-primary-border: rgba(10, 243, 219, 0.22);
    --ava-btn-primary-border-hover: rgba(75, 232, 255, 0.40);
    --ava-btn-primary-shadow: rgba(10, 243, 219, 0.22);
    --ava-btn-primary-shadow-hover: rgba(10, 243, 219, 0.30);
    /* Danger (Alle Chats löschen) */
    --ava-btn-danger-bg: rgba(255, 77, 77, 0.26);
    --ava-btn-danger-bg-hover: rgba(255, 77, 77, 0.34);
    --ava-btn-danger-text: rgba(255, 245, 245, 0.97);
    --ava-btn-danger-border: rgba(255, 77, 77, 0.64);
    --ava-btn-danger-border-hover: rgba(255, 47, 109, 0.76);
    /* bewusst reduzierter Glow */
    --ava-btn-danger-shadow: rgba(255, 77, 77, 0.22);
    --ava-btn-danger-shadow-hover: rgba(255, 47, 109, 0.28);
    /* Base */
    --ava-chat-newbtn-radius: 999px;
    /* Background gradient */
    --ava-chat-newbtn-bg-1: rgba(0, 42, 67, 0.92);
    --ava-chat-newbtn-bg-2: rgba(10, 243, 219, 0.72);
    /* Text / icon */
    --ava-chat-newbtn-text: rgba(0, 30, 48, 0.92);
    /* Border */
    --ava-chat-newbtn-border: rgba(10, 243, 219, 0.26);
    --ava-chat-newbtn-border-hover: rgba(75, 232, 255, 0.42);
    /* Shadow */
    --ava-chat-newbtn-shadow: rgba(10, 243, 219, 0.22);
    --ava-chat-newbtn-shadow-hover: rgba(10, 243, 219, 0.30);
    /* Hover tuning */
    --ava-chat-newbtn-hover-brightness: 1.04;
    /* Active tuning */
    --ava-chat-newbtn-active-brightness: 0.98;
    /* Focus ring (use your system token) */
    --ava-chat-newbtn-focus-ring: var(--ava-focus-ring);
    /* Disabled */
    --ava-chat-newbtn-disabled-opacity: 0.58;
    /* Chat list item */
    --ava-chat-item-bg: rgba(255,255,255,0.02);
    --ava-chat-item-border: rgba(255,255,255,0.06);
    --ava-chat-item-hover-bg: rgba(255,255,255,0.06);
    --ava-chat-item-hover-border: rgba(255,255,255,0.12);
    --ava-chat-item-active-bg: rgba(10,243,219,0.12);
    --ava-chat-item-active-border: rgba(10,243,219,0.28);
    --ava-chat-item-shadow: 0 6px 14px rgba(0,0,0,0.25);
    --ava-score-pill-bg: var(--ava-surface-0);
    --ava-score-pill-border: var(--ava-border-0);
    --ava-score-pill-text: var(--ava-text);
    --ava-score-pill-shadow: var(--ava-shadow-edge);
    /* Active row pill */
    --ava-score-pill-active-bg: var(--ava-accent-soft-2);
    --ava-score-pill-active-border: var(--ava-border-1);
    --ava-score-pill-active-shadow: 0 0 0 2px rgba(10,243,219,0.10);
    /* =========================================================
     LOGIN — TOKENS (DARK)
     ========================================================= */
    /* Background */
    --ava-login-bg: linear-gradient(135deg, var(--ava-bg-1), var(--ava-bg-2));
    --ava-login-blob-1: rgba(10,243,219,0.10);
    --ava-login-blob-2: rgba(75,232,255,0.08);
    --ava-login-blob-3: rgba(124,255,178,0.06);
    /* Card */
    --ava-login-card-bg: var(--ava-panel);
    --ava-login-card-border: var(--ava-border-1);
    --ava-login-card-shadow: var(--ava-shadow);
    --ava-login-card-blur: 12px;
    /* Title */
    --ava-login-title: var(--ava-accent);
    --ava-login-title-shadow: 0 0 14px rgba(10,243,219,0.28);
    /* Inputs */
    --ava-login-input-bg: var(--ava-panel-2);
    --ava-login-input-border: var(--ava-border-1);
    --ava-login-input-border-focus: var(--ava-border-2);
    --ava-login-input-text: var(--ava-text);
    --ava-login-input-placeholder: var(--ava-text-muted);
    --ava-login-input-ring: var(--ava-focus-ring);
    /* Primary button */
    --ava-login-btn-bg-1: var(--ava-btn-primary-grad-1);
    --ava-login-btn-bg-2: var(--ava-btn-primary-grad-2);
    --ava-login-btn-text: var(--ava-btn-primary-text);
    --ava-login-btn-shadow: var(--ava-btn-primary-shadow);
    --ava-login-btn-shadow-hover: var(--ava-btn-primary-shadow-hover);
    --ava-login-btn-border: var(--ava-btn-primary-border);
    --ava-login-btn-border-hover: var(--ava-btn-primary-border-hover);
    /* Secondary action buttons */
    --ava-login-aux-bg: var(--ava-panel-3);
    --ava-login-aux-border: var(--ava-border-1);
    --ava-login-aux-text: var(--ava-text-soft);
    --ava-login-aux-hover-bg: var(--ava-accent-soft-3);
    --ava-login-aux-hover-border: var(--ava-border-2);
    /* Messages */
    --ava-login-msg-error: var(--ava-danger);
    --ava-login-msg-success: var(--ava-ok);
    --ava-login-msg-text: var(--ava-text-soft);
    /* Back button */
    --ava-login-back-bg: transparent;
    --ava-login-back-border: var(--ava-border-1);
    --ava-login-back-text: var(--ava-text);
    --ava-login-back-hover-bg: var(--ava-accent-soft-3);
    --ava-login-back-hover-border: var(--ava-border-2);
    /* Flip */
    --ava-login-flip-dur: 600ms;
    /* Layout sizes */
    --ava-login-card-radius: 20px;
    --ava-login-card-maxw: 420px;
}


.ava-btn-delete {
    border-color: var(--ava-btn-danger-border);
    background: var(--ava-btn-danger-bg);
    color: var(--ava-btn-danger-text);
    box-shadow: 0 12px 24px var(--ava-btn-danger-shadow);
}

/* Hover */
.ava-btn.ava-btn-delete:hover {
    background: var(--ava-btn-danger-bg-hover);
    border-color: var(--ava-btn-danger-border-hover);
    box-shadow: 0 16px 30px var(--ava-btn-danger-shadow-hover);
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* Active (optional, fühlt sich gut an) */
.ava-btn.ava-btn-delete:active {
    transform: translateY(0);
    filter: brightness(0.98);
}


.ava-btn-square {
    display: inline-grid; /* sichere Zentrierung */
    place-items: center;
    padding: 0 !important; /* Padding raus, Größe über WH */
    width: 32px;
    height: 32px;
}

    .ava-btn-square.ava-btn-sm {
        width: 28px;
        height: 28px;
    }

    .ava-btn-square.ava-btn-xs {
        width: 24px;
        height: 24px;
    }
/* =========================================================
   AVA SWITCH – Global, modern, animated
   ========================================================= */

.ava-switch {
    --switch-height: 26px;
    --switch-width: 48px;
    --switch-radius: 999px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: var(--ava-panel-3);
    border-radius: var(--ava-radius-md);
    border: 1px solid var(--ava-border-1);
    cursor: pointer;
    user-select: none;
    box-shadow: var(--ava-shadow-edge);
}

    .ava-switch input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        margin: 0;
        width: var(--switch-width);
        height: var(--switch-height);
        border-radius: var(--switch-radius);
        border: 1px solid var(--ava-border-1);
        background: var(--ava-panel-2);
        position: relative;
        cursor: pointer;
        transition: all var(--ava-dur-1) var(--ava-ease);
        outline: none;
    }

        /* Thumb */
        .ava-switch input[type="checkbox"]::before {
            content: "";
            position: absolute;
            top: 1px;
            left: 1px;
            width: calc(var(--switch-height) - 4px);
            height: calc(var(--switch-height) - 4px);
            border-radius: 999px;
            background: var(--ava-text-muted);
            transition: all var(--ava-dur-1) var(--ava-ease);
            box-shadow: 0 1px 3px rgba(0,0,0,0.25);
        }

        /* Checked State */
        .ava-switch input[type="checkbox"]:checked {
            background: var(--ava-accent-soft-3);
            border-color: var(--ava-border-2);
        }

            .ava-switch input[type="checkbox"]:checked::before {
                transform: translateX(calc(var(--switch-width) - var(--switch-height)));
                background: var(--ava-accent);
            }

        /* Hover */
        .ava-switch input[type="checkbox"]:hover {
            filter: brightness(1.15);
        }

        /* Focus (Keyboard) */
        .ava-switch input[type="checkbox"]:focus-visible {
            box-shadow: var(--ava-focus-ring);
        }

    /* Label text */
    .ava-switch span {
        color: var(--ava-text);
        font-weight: 800;
        font-size: 14px;
    }

    /* Disabled */
    .ava-switch input[type="checkbox"]:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

    .ava-switch:has(input[type="checkbox"]:disabled) {
        opacity: .6;
        cursor: not-allowed;
    }
/* =========================
   6) STATES
   ========================= */
:where(button, .btn, a, input, textarea, select) {
    transition: transform var(--ava-dur-1) var(--ava-ease), box-shadow var(--ava-dur-1) var(--ava-ease), border-color var(--ava-dur-1) var(--ava-ease), filter var(--ava-dur-1) var(--ava-ease), background-color var(--ava-dur-1) var(--ava-ease);
}

    :where(button, .btn, a, input, textarea, select):focus-visible {
        outline: none;
        box-shadow: var(--ava-focus-ring);
        border-color: rgba(75, 232, 255, 0.55);
    }

:where(button, .btn):active {
    transform: translateY(0.5px);
}

:where(button, .btn, input, textarea, select)[disabled],
:where(button, .btn).disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: saturate(0.85);
}

@media (prefers-reduced-motion: reduce) {
    :where(button, .btn, a, input, textarea, select) {
        transition: none;
    }
}


/* =========================================================
   CHAT TOKENS — LIGHT MODE (override)
   Usage: html[data-theme="light"] { ... }  OR  .theme-light { ... }
   ========================================================= */
html[data-theme="light"] {
    /* Glass layers used in gradients */
    --ava-chat-glass-1: rgba(255, 255, 255, 0.72);
    --ava-chat-glass-2: rgba(255, 255, 255, 0.58);
    --ava-chat-glass-3: rgba(255, 255, 255, 0.40);
    /* Sidebar */
    --ava-chat-sidebar-border: rgba(16, 215, 182, 0.22);
    --ava-chat-sidebar-bg-1: rgba(245, 252, 255, 0.92);
    --ava-chat-sidebar-bg-2: rgba(232, 248, 252, 0.86);
    --ava-chat-sidebar-head-bg-1: rgba(16, 215, 182, 0.06);
    --ava-chat-sidebar-head-bg-2: rgba(255, 255, 255, 0.60);
    /* Buttons (primary) */
    --ava-chat-btn-grad-1: rgba(255, 255, 255, 0.95);
    --ava-chat-btn-grad-2: rgba(10, 243, 219, 0.55);
    --ava-chat-btn-text: rgba(0, 30, 48, 0.92);
    --ava-chat-btn-shadow: rgba(10, 243, 219, 0.18);
    --ava-chat-btn-shadow-hover: rgba(75, 232, 255, 0.22);
    --ava-chat-btn-border: rgba(16, 215, 182, 0.28);
    --ava-chat-btn-border-hover: rgba(75, 232, 255, 0.40);
    /* Icon buttons */
    --ava-chat-icon-btn-bg: rgba(255, 255, 255, 0.78);
    --ava-chat-icon-btn-bg-hover: rgba(10, 243, 219, 0.14);
    --ava-chat-icon-btn-border: rgba(16, 215, 182, 0.22);
    --ava-chat-icon-btn-border-hover: rgba(75, 232, 255, 0.38);
    /* Icon/text muted */
    --ava-chat-icon-muted: rgba(0, 30, 48, 0.55);
    /* Chat list hover */
    --ava-chat-list-hover-bg: rgba(10, 243, 219, 0.10);
    /* Messages */
    --ava-chat-msg-border: rgba(16, 215, 182, 0.20);
    --ava-chat-msg-bg: rgba(255, 255, 255, 0.74);
    --ava-chat-msg-bot-border: rgba(75, 232, 255, 0.18);
    --ava-chat-msg-bot-bg-overlay: rgba(75, 232, 255, 0.08);
    --ava-chat-msg-bot-bg: rgba(255, 255, 255, 0.78);
    --ava-chat-msg-user-glow: rgba(10, 243, 219, 0.14);
    --ava-chat-msg-user-bg-1: rgba(10, 243, 219, 0.16);
    --ava-chat-msg-user-bg-2: rgba(75, 232, 255, 0.10);
    --ava-chat-msg-user-border: rgba(16, 215, 182, 0.30);
    /* Error */
    --ava-chat-error-bg: rgba(255, 77, 77, 0.10);
    --ava-chat-error-border: rgba(255, 77, 77, 0.42);
    --ava-chat-error-text: rgba(92, 0, 12, 0.86);
    --ava-chat-error-shadow: rgba(255, 77, 77, 0.12);
    /* Links */
    --ava-chat-link: rgba(0, 122, 146, 0.96);
    /* Chips */
    --ava-chat-chip-bg: rgba(255, 255, 255, 0.70);
    --ava-chat-chip-border: rgba(16, 215, 182, 0.22);
    --ava-chat-chip-text: rgba(0, 116, 132, 0.92);
    /* Docs inside messages (chip-like buttons) */
    --ava-chat-doc-bg: rgba(255, 255, 255, 0.76);
    --ava-chat-doc-bg-hover: rgba(10, 243, 219, 0.10);
    --ava-chat-doc-border: rgba(16, 215, 182, 0.22);
    --ava-chat-doc-border-hover: rgba(75, 232, 255, 0.34);
    --ava-chat-doc-text: rgba(0, 30, 48, 0.92);
    /* Hint divider */
    --ava-chat-hint-divider: rgba(0, 30, 48, 0.10);
    /* Input */
    --ava-chat-input-border: rgba(16, 215, 182, 0.22);
    --ava-chat-input-bg: rgba(255, 255, 255, 0.78);
    --ava-chat-input-bg-focus: rgba(255, 255, 255, 0.92);
    --ava-chat-input-focus-border: rgba(75, 232, 255, 0.55);
    /* File button */
    --ava-chat-file-bg: rgba(255, 255, 255, 0.76);
    --ava-chat-file-bg-hover: rgba(10, 243, 219, 0.12);
    --ava-chat-file-border: rgba(16, 215, 182, 0.22);
    --ava-chat-file-border-hover: rgba(75, 232, 255, 0.34);
    --ava-chat-file-icon: rgba(0, 116, 132, 0.92);
    /* “Danger” hover for delete icons etc. */
    --ava-chat-danger-bg: rgba(255, 77, 77, 0.10);
    --ava-chat-danger-border: rgba(255, 77, 77, 0.32);
    /* Send button */
    --ava-chat-send-grad-1: rgba(0, 30, 48, 0.94);
    --ava-chat-send-grad-2: rgba(75, 232, 255, 0.45);
    --ava-chat-send-border: rgba(0, 30, 48, 0.30);
    --ava-chat-send-border-hover: rgba(75, 232, 255, 0.55);
    --ava-chat-send-shadow: rgba(0, 30, 48, 0.20);
    --ava-chat-send-shadow-hover: rgba(0, 30, 48, 0.28);
    /* Elevation helper used by chips/docs/file btn */
    --ava-chat-elev: rgba(0, 30, 48, 0.10);
    /* Scrollbar */
    --ava-chat-scroll-thumb: rgba(16, 215, 182, 0.26);
    --ava-chat-scroll-thumb-hover: rgba(75, 232, 255, 0.32);
    --ava-chat-scroll-thumb-border: rgba(255, 255, 255, 0.72);
    --ava-chat-btn-grad-1: rgba(0, 30, 48, 0.92);
    --ava-chat-btn-grad-2: rgba(10, 243, 219, 0.55);
    --ava-chat-btn-text: rgba(234, 250, 252, 0.96);
    --ava-chat-btn-border: rgba(0, 30, 48, 0.28);
    --ava-chat-btn-border-hover: rgba(10, 243, 219, 0.55);
    --ava-chat-btn-shadow: rgba(0, 30, 48, 0.18);
    --ava-chat-btn-shadow-hover: rgba(0, 30, 48, 0.26);
    /* Danger Button – Light Mode */
    --ava-btn-danger-bg: rgba(255, 77, 77, 0.78);
    --ava-btn-danger-bg-hover: rgba(255, 60, 60, 0.88);
    --ava-btn-danger-text: #ffffff;
    --ava-btn-danger-border: rgba(210, 40, 40, 0.90);
    --ava-btn-danger-border-hover: rgba(190, 30, 30, 1);
    /* fast kein Glow – nur Tiefe */
    --ava-btn-danger-shadow: rgba(180, 0, 0, 0.18);
    --ava-btn-danger-shadow-hover: rgba(180, 0, 0, 0.24);
    /* Base backgrounds (optional but recommended) */
    --ava-bg-0: #F4FBFF;
    --ava-bg-1: #E8F7FB;
    --ava-bg-2: #EAFBFF;
    --ava-bg-3: #DFF3F9;
    /* Panels / glass (optional, matches your “aqua glass” vibe) */
    --ava-panel: rgba(255, 255, 255, 0.78);
    --ava-panel-2: rgba(255, 255, 255, 0.62);
    --ava-panel-3: rgba(255, 255, 255, 0.46);
    --ava-glass: rgba(255, 255, 255, 0.70);
    --ava-glass-2: rgba(255, 255, 255, 0.52);
    /* Accents (keep your identity, slightly calmer on light) */
    --ava-accent: #0BCFBE;
    --ava-accent-2: #2CCFE6;
    --ava-accent-3: #0EBCA0;
    --ava-accent-warm: #58E6A1;
    --ava-accent-soft: rgba(11, 207, 190, 0.18);
    --ava-accent-soft-2: rgba(11, 207, 190, 0.10);
    --ava-accent-soft-3: rgba(44, 207, 230, 0.10);
    /* ✅ Text tokens (the important part) */
    --ava-text: rgba(0, 30, 48, 0.92);
    --ava-text-soft: rgba(0, 30, 48, 0.78);
    --ava-text-muted: rgba(0, 30, 48, 0.58);
    --ava-text-faint: rgba(0, 30, 48, 0.40);
    /* Feedback colors tuned for light backgrounds */
    --ava-danger: #E53935;
    --ava-danger-2: #D81B60;
    --ava-warning: #C77700;
    --ava-ok: #0FAE70;
    /* Shadows/rings need to be lighter on white */
    --ava-shadow: 0 10px 28px rgba(0, 30, 48, 0.12);
    --ava-shadow-soft: 0 8px 20px rgba(0, 30, 48, 0.08);
    --ava-shadow-edge: 0 0 0 1px rgba(0, 30, 48, 0.06) inset;
    --ava-ring: 0 0 0 3px rgba(11, 207, 190, 0.16);
    --ava-ring-2: 0 0 0 3px rgba(44, 207, 230, 0.16);
    /* Optional: light app background */
    --ava-app-bg: radial-gradient(900px 500px at 18% 10%, rgba(11,207,190,0.10), transparent 60%), radial-gradient(800px 420px at 82% 20%, rgba(44,207,230,0.08), transparent 62%), radial-gradient(900px 620px at 60% 100%, rgba(88,230,161,0.06), transparent 60%), linear-gradient(135deg, var(--ava-bg-1), var(--ava-bg-2));
    --ava-list-item-active-border: rgba(16,215,182,0.55);
    --ava-list-item-active-bg: rgba(11,207,190,0.22);
    --ava-chat-newbtn-bg-1: rgba(255, 255, 255, 0.92);
    --ava-chat-newbtn-bg-2: rgba(10, 243, 219, 0.46);
    --ava-chat-newbtn-text: rgba(0, 30, 48, 0.92);
    --ava-chat-newbtn-border: rgba(16, 215, 182, 0.30);
    --ava-chat-newbtn-border-hover: rgba(75, 232, 255, 0.46);
    --ava-chat-newbtn-shadow: rgba(0, 30, 48, 0.14);
    --ava-chat-newbtn-shadow-hover: rgba(0, 30, 48, 0.18);
    --ava-chat-newbtn-hover-brightness: 1.03;
    --ava-chat-newbtn-active-brightness: 0.99;
    --ava-chat-item-bg: rgba(0,0,0,0.03);
    --ava-chat-item-border: rgba(0,0,0,0.06);
    --ava-chat-item-hover-bg: rgba(0,0,0,0.06);
    --ava-chat-item-hover-border: rgba(0,0,0,0.12);
    --ava-chat-item-active-bg: rgba(10,243,219,0.18);
    --ava-chat-item-active-border: rgba(10,243,219,0.35);
    --ava-chat-item-shadow: 0 6px 16px rgba(0,0,0,0.12);
    /* =========================================================
     PROMPTS — SCORE PILL TOKENS (LIGHT OVERRIDE)
     ========================================================= */
    --ava-score-pill-bg: rgba(255, 255, 255, 0.88);
    --ava-score-pill-border: rgba(0, 30, 48, 0.14);
    --ava-score-pill-text: var(--ava-text);
    --ava-score-pill-shadow: 0 0 0 1px rgba(255,255,255,0.55) inset;
    --ava-score-pill-active-bg: var(--ava-accent-soft-2);
    --ava-score-pill-active-border: var(--ava-border-2);
    --ava-score-pill-active-shadow: 0 0 0 2px rgba(11,207,190,0.10);
    /* =========================================================
     LOGIN — TOKENS (LIGHT OVERRIDE)
     ========================================================= */
    --ava-login-bg: linear-gradient(135deg, var(--ava-bg-1), var(--ava-bg-2));
    --ava-login-card-bg: rgba(255,255,255,0.82);
    --ava-login-card-border: rgba(0,30,48,0.12);
    --ava-login-card-shadow: var(--ava-shadow);
    --ava-login-card-blur: 14px;
    --ava-login-title: var(--ava-accent);
    --ava-login-title-shadow: 0 0 14px rgba(11,207,190,0.18);
    --ava-login-input-bg: rgba(255,255,255,0.80);
    --ava-login-input-border: rgba(0,30,48,0.14);
    --ava-login-input-border-focus: rgba(44,207,230,0.40);
    --ava-login-input-text: var(--ava-text);
    --ava-login-input-placeholder: var(--ava-text-muted);
    --ava-login-input-ring: var(--ava-focus-ring);
    --ava-login-aux-bg: rgba(255,255,255,0.70);
    --ava-login-aux-border: rgba(0,30,48,0.12);
    --ava-login-aux-text: rgba(0,30,48,0.78);
    --ava-login-aux-hover-bg: rgba(44,207,230,0.10);
    --ava-login-aux-hover-border: rgba(44,207,230,0.34);
}

/* =========================================================
   PROMPTS 
   ========================================================= */

.prompts-app {
    /* ---------- Panels (klare Abstufung) ---------- */
    --ava-panel: rgba( 4, 22, 34, 0.96); /* Base / Cards */
    --ava-panel-2: rgba(10, 36, 54, 0.88); /* Inputs/Chips */
    --ava-panel-3: rgba(14, 48, 72, 0.78); /* Sektionen/Listen */
    /* ---------- Borders & Focus (sichtbarer) ---------- */
    --ava-border-0: rgba(255,255,255,0.08);
    --ava-border-1: rgba(255,255,255,0.14);
    --ava-border-2: rgba(75,232,255,0.32);
    --ava-ring: 0 0 0 2px rgba(10,243,219,0.16);
    --ava-ring-2: 0 0 0 2px rgba(75,232,255,0.22);
    --ava-focus-ring: var(--ava-ring-2);
    /* ---------- Accent-Soft Layer (etwas kräftiger) ---------- */
    --ava-accent-soft: rgba(10,243,219,0.18);
    --ava-accent-soft-2: rgba(10,243,219,0.10);
    --ava-accent-soft-3: rgba(75,232,255,0.10);
    /* ---------- Shadows (etwas klarer Rand) ---------- */
    --ava-shadow-soft: 0 12px 28px rgba(0,0,0,0.42);
    --ava-shadow-edge: 0 0 0 1px rgba(255,255,255,0.045) inset;
    /* ---------- Scrollbar (leicht heller) ---------- */
    --ava-scroll-size: 10px;
    --ava-scroll-thumb: rgba(10, 243, 219, 0.24);
    --ava-scroll-thumb-hover: rgba(75, 232, 255, 0.34);
    --ava-scroll-border: rgba(0, 30, 48, 0.72);
    --ava-scroll-track: transparent;
    /* ---------- Radii konsistent ---------- */
    --ava-radius-sm: 10px;
    --ava-radius-md: 14px;
    --ava-radius-lg: 16px;
}
html[data-theme="light"] .prompts-app {
    --ava-panel: rgba(255,255,255,0.94);
    --ava-panel-2: rgba(255,255,255,0.80);
    --ava-panel-3: rgba(255,255,255,0.66);
    --ava-border-0: rgba(0, 30, 48, 0.10);
    --ava-border-1: rgba(0, 30, 48, 0.16);
    --ava-border-2: rgba(44, 207, 230, 0.30);
    --ava-accent-soft: rgba(11,207,190,0.20);
    --ava-accent-soft-2: rgba(11,207,190,0.12);
    --ava-accent-soft-3: rgba(44,207,230,0.12);
    --ava-shadow-soft: 0 12px 24px rgba(0,30,48,0.12);
    --ava-shadow-edge: 0 0 0 1px rgba(0,30,48,0.08) inset;
    --ava-scroll-thumb: rgba(16, 215, 182, 0.30);
    --ava-scroll-thumb-hover: rgba(75, 232, 255, 0.38);
    --ava-scroll-border: rgba(255, 255, 255, 0.92);
}

    /* Glass-Panel/Card behalten, wirken aber klarer durch neue tokens */
    .prompts-app .ava-glass-panel,
    .prompts-app .ava-glass-card {
        border-color: var(--ava-border-1);
        background: var(--ava-panel);
        box-shadow: var(--ava-shadow-soft);
    }

    /* Inputs/Textareas: etwas heller als Umgebung + klarer Fokus */
    .prompts-app .ava-input,
    .prompts-app .ava-textarea {
        background: var(--ava-panel-2);
        border-color: var(--ava-border-1);
        color: var(--ava-text);
    }

        .prompts-app .ava-input:focus,
        .prompts-app .ava-textarea:focus {
            border-color: var(--ava-border-2);
            box-shadow: var(--ava-focus-ring);
        }

    /* List Rows: Hover/Active sichtbarer */
    .prompts-app .ava-glass-row {
        border-color: var(--ava-border-1);
        background: rgba(255,255,255,0.015); /* neutraler Start */
    }

        .prompts-app .ava-glass-row:hover {
            transform: translateY(-1px);
            background: rgba(10,243,219,0.10);
            border-color: rgba(75,232,255,0.30);
        }

        .prompts-app .ava-glass-row.is-active {
            background: rgba(10,243,219,0.18);
            border-color: rgba(10,243,219,0.40);
            box-shadow: 0 0 0 2px rgba(10,243,219,0.10);
        }

            /* Score-Pill im aktiven Row besser abgesetzt */
            .prompts-app .ava-glass-row.is-active .ava-score-pill {
                background: var(--ava-accent-soft-2);
                border-color: var(--ava-border-1);
            }

    /* Tabs: default klarer, Hover/Active mit mehr Feedback */
    .prompts-app .ava-tab-pill {
        background: var(--ava-panel-3);
        border-color: var(--ava-border-1);
        color: var(--ava-text-soft);
    }

        .prompts-app .ava-tab-pill:hover {
            background: var(--ava-accent-soft-3);
            border-color: var(--ava-border-2);
            color: var(--ava-text);
        }

        .prompts-app .ava-tab-pill.is-active {
            background: rgba(10,243,219,0.18);
            border-color: rgba(10,243,219,0.40);
            color: var(--ava-text);
            box-shadow: 0 0 0 2px rgba(10,243,219,0.10);
        }

    /* Boxes/Sektionen mit klarerer Kante */
    .prompts-app .ava-box,
    .prompts-app .ava-file-row,
    .prompts-app .ava-switch {
        background: var(--ava-panel-3);
        border-color: var(--ava-border-1);
    }

    /* Links leicht kräftiger, aber im Brand */
    .prompts-app .ava-link {
        color: var(--ava-accent-2);
    }

        .prompts-app .ava-link:hover {
            text-decoration: underline;
            filter: saturate(1.1);
        }

    /* Progress-Bar mit stärkerem Verlauf */
    .prompts-app .ava-progress {
        border-color: var(--ava-border-1);
        background: var(--ava-panel-3);
    }

    .prompts-app .ava-progress-bar {
        background: linear-gradient(90deg, var(--ava-accent), var(--ava-accent-2));
    }

    /* Scroll areas (wenn Klasse vergeben) nutzen die hellere Thumb */
    .prompts-app .ava-scroll {
        scrollbar-width: thin;
        scrollbar-color: var(--ava-scroll-thumb) var(--ava-scroll-track);
    }

        .prompts-app .ava-scroll::-webkit-scrollbar {
            width: var(--ava-scroll-size);
            height: var(--ava-scroll-size);
        }

        .prompts-app .ava-scroll::-webkit-scrollbar-track {
            background: var(--ava-scroll-track);
            border-radius: var(--ava-scroll-radius, 999px);
        }

        .prompts-app .ava-scroll::-webkit-scrollbar-thumb {
            background: var(--ava-scroll-thumb);
            border-radius: var(--ava-scroll-radius, 999px);
            border: 3px solid var(--ava-scroll-border);
        }

            .prompts-app .ava-scroll::-webkit-scrollbar-thumb:hover {
                background: var(--ava-scroll-thumb-hover);
            }

/* =========================================================
   AVA GLOBAL BUTTON SYSTEM
   - universal für alle Seiten (Chat, Prompts, Settings…)
   - voll token-basiert
   ========================================================= */

/* ======================
   1) CORE BUTTON
   ====================== */
.ava-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--ava-radius-md);
    font-weight: 900;
    background: var(--ava-panel-2);
    border: 1px solid var(--ava-border-1);
    color: var(--ava-text);
    cursor: pointer;
    transition: transform var(--ava-dur-1) var(--ava-ease), background var(--ava-dur-1) var(--ava-ease), border-color var(--ava-dur-1) var(--ava-ease), box-shadow var(--ava-dur-1) var(--ava-ease);
    box-shadow: var(--ava-shadow-edge);
}

    .ava-btn:hover {
        transform: translateY(-1px);
        background: var(--ava-accent-soft-3);
        border-color: var(--ava-border-2);
    }

    .ava-btn:active {
        transform: translateY(0.5px);
    }

    .ava-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
    }

/* ======================
   2) SIZES
   ====================== */
.ava-btn-sm {
    padding: 6px 10px;
    border-radius: var(--ava-radius-sm);
    font-size: 13px;
}

.ava-btn-xs {
    padding: 4px 8px;
    border-radius: var(--ava-radius-sm);
    font-size: 12px;
}

/* ======================
   3) VARIANT: PRIMARY
   (HEADLINER-Button, z.B. "Neuer Chat")
   ====================== */
.ava-btn-primary {
    background: linear-gradient( 180deg, var(--ava-btn-primary-grad-1), var(--ava-btn-primary-grad-2) );
    border: 1px solid var(--ava-btn-primary-border);
    color: var(--ava-btn-primary-text);
    box-shadow: var(--ava-shadow-edge), 0 6px 14px var(--ava-btn-primary-shadow);
    transform: translateY(0);
}

    /* Hover – minimal, sauber */
    .ava-btn-primary:hover {
        border-color: var(--ava-btn-primary-border-hover);
        filter: brightness(1.02);
        box-shadow: var(--ava-shadow-edge), 0 8px 18px var(--ava-btn-primary-shadow-hover);
        transform: translateY(-0.5px);
    }

    /* Active – echtes Drücken */
    .ava-btn-primary:active {
        transform: translateY(0.5px);
        filter: brightness(0.99);
        box-shadow: var(--ava-shadow-edge), 0 4px 10px var(--ava-btn-primary-shadow);
    }

    /* Focus – AVA-weit konsistent */
    .ava-btn-primary:focus-visible {
        outline: none;
        box-shadow: var(--ava-shadow-edge), var(--ava-focus-ring), 0 8px 18px var(--ava-btn-primary-shadow-hover);
    }

    /* Disabled */
    .ava-btn-primary:disabled {
        opacity: 0.55;
        filter: saturate(0.9);
        transform: none;
        box-shadow: var(--ava-shadow-edge);
    }


/* ======================
   4) VARIANT: GHOST
   ====================== */
.ava-btn-ghost {
    background: transparent !important;
    border: 1px solid var(--ava-border-0);
    color: var(--ava-text-soft);
    box-shadow: none;
}

    .ava-btn-ghost:hover {
        background: var(--ava-accent-soft-3);
        border-color: var(--ava-border-2);
        color: var(--ava-text);
    }

/* ======================
   5) VARIANT: OK (POSITIVE)
   ====================== */
.ava-btn-ok {
    background: linear-gradient(180deg, var(--ava-accent-soft-2), var(--ava-accent-soft-3));
    border: 1px solid var(--ava-border-2);
    color: var(--ava-text);
}

    .ava-btn-ok:hover {
        background: rgba(10,243,219,0.18);
        border-color: rgba(10,243,219,0.40);
        box-shadow: 0 0 0 2px rgba(10,243,219,0.10);
    }

/* ======================
   6) VARIANT: DANGER
   ====================== */
.ava-btn-danger {
    background: var(--ava-btn-danger-bg);
    border: 1px solid var(--ava-btn-danger-border);
    color: var(--ava-btn-danger-text);
    box-shadow: var(--ava-btn-danger-shadow);
}

    .ava-btn-danger:hover {
        background: var(--ava-btn-danger-bg-hover);
        border-color: var(--ava-btn-danger-border-hover);
        box-shadow: var(--ava-btn-danger-shadow-hover);
    }


/* =========================================================
   7) ICON BUTTONS
   ========================================================= */

.ava-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    padding: 0;
    background: var(--ava-chat-icon-btn-bg);
    border: 1px solid var(--ava-chat-icon-btn-border);
    color: var(--ava-text);
    font-weight: 900;
    cursor: pointer;
    box-shadow: var(--ava-shadow-edge);
    transition: transform var(--ava-dur-1) var(--ava-ease), border-color var(--ava-dur-1) var(--ava-ease), background var(--ava-dur-1) var(--ava-ease);
}

    .ava-icon-btn:hover {
        transform: translateY(-1px);
        background: var(--ava-chat-icon-btn-bg-hover);
        border-color: var(--ava-chat-icon-btn-border-hover);
    }

.ava-icon-btn--sm {
    width: 28px;
    height: 28px;
}

.ava-icon-btn--xs {
    width: 24px;
    height: 24px;
}

/* Variants */
.ava-icon-btn.is-ok {
    background: linear-gradient(180deg, var(--ava-accent-soft-2), var(--ava-accent-soft-3));
    border-color: var(--ava-border-2);
}

    .ava-icon-btn.is-ok:hover {
        background: rgba(10,243,219,0.18);
        border-color: rgba(10,243,219,0.40);
    }

.ava-icon-btn.is-bad {
    background: var(--ava-chat-danger-bg);
    border-color: var(--ava-chat-danger-border);
    color: var(--ava-btn-danger-text);
}

    .ava-icon-btn.is-bad:hover {
        background: rgba(255,77,77,0.18);
        border-color: var(--ava-btn-danger-border-hover);
    }
/* =========================================================
   CHAT — NEW BUTTON
   ========================================================= */
.chat-new-btn {
    width: auto;
    max-width: none;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--ava-chat-newbtn-radius);
    border: 1px solid var(--ava-chat-newbtn-border);
    background: linear-gradient(45deg, var(--ava-chat-newbtn-bg-1), var(--ava-chat-newbtn-bg-2));
    color: var(--ava-chat-newbtn-text);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.2px;
    cursor: pointer;
    box-shadow: 0 10px 26px var(--ava-chat-newbtn-shadow);
    transition: transform var(--ava-dur-1) var(--ava-ease), box-shadow var(--ava-dur-1) var(--ava-ease), border-color var(--ava-dur-1) var(--ava-ease), filter var(--ava-dur-1) var(--ava-ease);
}

    .chat-new-btn:hover {
        transform: translateY(-1px);
        filter: brightness(var(--ava-chat-newbtn-hover-brightness));
        border-color: var(--ava-chat-newbtn-border-hover);
        box-shadow: 0 14px 34px var(--ava-chat-newbtn-shadow-hover);
    }

    .chat-new-btn:active {
        transform: translateY(0);
        filter: brightness(var(--ava-chat-newbtn-active-brightness));
        box-shadow: 0 10px 26px var(--ava-chat-newbtn-shadow);
    }

    .chat-new-btn:focus-visible {
        outline: none;
        box-shadow: var(--ava-chat-newbtn-focus-ring), 0 14px 34px var(--ava-chat-newbtn-shadow-hover);
        border-color: var(--ava-chat-newbtn-border-hover);
    }

    .chat-new-btn:disabled {
        opacity: var(--ava-chat-newbtn-disabled-opacity);
        cursor: not-allowed;
        filter: none;
        transform: none;
        box-shadow: none;
    }