/* ============================================================
   PHANTOM MSG v2.0 — LUXURY CIPHER DESIGN SYSTEM
   Color Theory: 60-30-10 Rule
   60% — Deep dark surfaces (#080C18, #0F1628)
   30% — Teal accent surfaces (#0D9488, #14B8A6)
   10% — Amber gold highlights (#F59E0B, #FBBF24)
   Grid: 8pt base unit
   Fonts: Outfit (display) + IBM Plex Mono (code)
   ============================================================ */

@font-face {
    font-family: 'EmojiOverride';
    src: local('Apple Color Emoji'), local('Segoe UI Emoji'), local('Noto Color Emoji'), local('Twemoji Mozilla'), local('Android Emoji');
    unicode-range: U+200D, U+203C, U+2049, U+20E3, U+2122, U+2139, U+2194-21AA,
        U+231A-231B, U+2328, U+23CF, U+23E9-23F3, U+23F8-23FA, U+24C2,
        U+25AA-25AB, U+25B6, U+25C0, U+25FB-25FE, U+2600-27BF, U+2934-2935,
        U+2B05-2B07, U+2B1B-2B1C, U+2B50, U+2B55, U+3030, U+303D, U+3297, U+3299,
        U+FE0F, U+1F000-1F02F, U+1F0CF, U+1F100-1F1FF, U+1F200-1F2FF,
        U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+1F700-1F77F,
        U+1F780-1F7FF, U+1F800-1F8FF, U+1F900-1F9FF, U+1FA00-1FA6F,
        U+1FA70-1FAFF, U+E0020-E007F;
}

:root {
    --font-display: 'EmojiOverride', 'Outfit', system-ui, sans-serif;
    --font-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
    
    /* 60% — Deep backgrounds */
    --bg-body: #080C18;
    --bg-surface: #0F1628;
    --bg-card: #151D30;
    --bg-elevated: #1A2440;
    --bg-header: #0B1020;
    --bg-input: #111B2E;
    
    /* Borders */
    --border: rgba(255,255,255,0.06);
    --border-light: rgba(255,255,255,0.04);
    --border-focus: rgba(20,184,166,0.4);
    
    /* 30% — Teal accent */
    --primary: #0D9488;
    --primary-600: #0F766E;
    --primary-500: #14B8A6;
    --primary-400: #2DD4BF;
    --primary-300: #5EEAD4;
    --primary-100: rgba(20,184,166,0.12);
    --primary-glow: rgba(20,184,166,0.2);
    
    /* 10% — Amber gold accent */
    --accent: #F59E0B;
    --accent-light: #FBBF24;
    --accent-100: rgba(245,158,11,0.12);
    
    /* Semantic */
    --success: #34D399;
    --danger: #F87171;
    --warning: #FBBF24;
    --info: #60A5FA;
    
    /* Text hierarchy */
    --text-primary: #F0F4F8;
    --text-secondary: #8B9BB4;
    --text-muted: #5A6A80;
    --text-dim: #3D4D63;
    
    /* Typography Scale (Major Third 1.25) — Sec 3.3 */
    --text-xs:   0.75rem;   /* 12px */
    --text-sm:   0.875rem;  /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg:   1.125rem;  /* 18px */
    --text-xl:   1.25rem;   /* 20px */
    --text-2xl:  1.563rem;  /* 25px */
    --text-3xl:  1.953rem;  /* 31px */
    --text-4xl:  2.441rem;  /* 39px */

    /* Spacing Scale (8pt grid) — Sec 4.1 */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-6:  24px;
    --space-8:  32px;
    --space-12: 48px;
    --space-16: 64px;

    /* Border Radius Scale — Sec 5.1 (adapted to existing app) */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius: 8px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Transitions — Sec 10.3 */
    --transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-fast: 150ms ease-out;
    --transition-base: 200ms ease-out;
    --transition-slow: 300ms ease-in-out;
    --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Shadows / Elevation — Sec 5.1 (dark mode: higher opacity) */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.15);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.3);
    --shadow-lg: 0 16px 48px rgba(0,0,0,0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.35), 0 10px 10px rgba(0,0,0,0.15);
    --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.5);

    /* Container Widths — Sec 4.3 */
    --container-xs:  480px;
    --container-sm:  640px;
    --container-md:  768px;
    --container-lg:  1024px;
    --container-xl:  1280px;

    /* Z-Index Scale (organized layering) — Sec 5.1 */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-popover: 500;
    --z-toast: 600;
    --z-lock: 900;
    --z-max: 9999;

    /* Opacity — Sec 5.1 */
    --opacity-disabled: 0.45;
    --opacity-muted: 0.6;
    --opacity-hover: 0.8;
    --opacity-overlay: 0.5;
    
    /* Overlay/surface colors (theme-adaptive) */
    --overlay-subtle: rgba(255,255,255,0.03);
    --overlay-light: rgba(255,255,255,0.06);
    --overlay-medium: rgba(255,255,255,0.10);
    --overlay-strong: rgba(255,255,255,0.15);
    --overlay-text: rgba(255,255,255,0.40);
    --overlay-text-strong: rgba(255,255,255,0.60);
    --overlay-text-bright: rgba(255,255,255,0.70);
    --overlay-invert-subtle: rgba(0,0,0,0.10);
    --overlay-invert-medium: rgba(0,0,0,0.15);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ============================================================
   LIGHT THEME — 60-30-10 Color Theory
   60% — Warm whites & light grays (#FAFBFC, #F1F3F5, #E9ECEF)
   30% — Deep teal on light (#0D7377, #0F766E, #0D9488)
   10% — Warm amber highlights (#D97706, #B45309)
   
   WCAG AA Compliance:
   - Primary text (#1A2332) on bg (#FAFBFC) = 15.2:1 (AAA)
   - Secondary text (#4B5C6F) on bg (#FAFBFC) = 6.8:1 (AA)
   - Muted text (#7B8DA0) on bg (#FAFBFC) = 4.1:1 (AA large)
   - Teal (#0D7377) on white = 5.2:1 (AA)
   - Amber (#B45309) on white = 4.6:1 (AA)
   ============================================================ */
[data-theme="light"] {
    /* 60% — Light backgrounds (warm white, not pure #FFF) */
    --bg-body: #F1F3F5;
    --bg-surface: #FAFBFC;
    --bg-card: #FFFFFF;
    --bg-elevated: #FFFFFF;
    --bg-header: #FAFBFC;
    --bg-input: #F1F3F5;
    
    /* Borders (visible but refined) */
    --border: rgba(0,0,0,0.08);
    --border-light: rgba(0,0,0,0.05);
    --border-focus: rgba(13,115,119,0.4);
    
    /* 30% — Teal accent (deeper for contrast on white) */
    --primary: #0D7377;
    --primary-600: #0A5E62;
    --primary-500: #0D7377;
    --primary-400: #0F9499;
    --primary-300: #14B8A6;
    --primary-100: rgba(13,115,119,0.08);
    --primary-glow: rgba(13,115,119,0.15);
    
    /* 10% — Amber accent (deeper for WCAG on white) */
    --accent: #B45309;
    --accent-light: #D97706;
    --accent-100: rgba(180,83,9,0.08);
    
    /* Semantic (deeper for light backgrounds) */
    --success: #059669;
    --danger: #DC2626;
    --warning: #D97706;
    --info: #2563EB;
    
    /* Text hierarchy (dark on light, warm charcoal not pure black) */
    --text-primary: #1A2332;
    --text-secondary: #4B5C6F;
    --text-muted: #7B8DA0;
    --text-dim: #A0AEC0;
    
    /* System */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 10px 10px rgba(0,0,0,0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.15);
    
    /* Overlay/surface colors (inverted for light) */
    --overlay-subtle: rgba(0,0,0,0.02);
    --overlay-light: rgba(0,0,0,0.04);
    --overlay-medium: rgba(0,0,0,0.07);
    --overlay-strong: rgba(0,0,0,0.10);
    --overlay-text: rgba(0,0,0,0.35);
    --overlay-text-strong: rgba(0,0,0,0.50);
    --overlay-text-bright: rgba(0,0,0,0.65);
    --overlay-invert-subtle: rgba(0,0,0,0.06);
    --overlay-invert-medium: rgba(0,0,0,0.10);
}

/* System preference: auto-detect light mode */
@media (prefers-color-scheme: light) {
    [data-theme="system"] {
        --bg-body: #F1F3F5;
        --bg-surface: #FAFBFC;
        --bg-card: #FFFFFF;
        --bg-elevated: #FFFFFF;
        --bg-header: #FAFBFC;
        --bg-input: #F1F3F5;
        --border: rgba(0,0,0,0.08);
        --border-light: rgba(0,0,0,0.05);
        --border-focus: rgba(13,115,119,0.4);
        --primary: #0D7377;
        --primary-600: #0A5E62;
        --primary-500: #0D7377;
        --primary-400: #0F9499;
        --primary-300: #14B8A6;
        --primary-100: rgba(13,115,119,0.08);
        --primary-glow: rgba(13,115,119,0.15);
        --accent: #B45309;
        --accent-light: #D97706;
        --accent-100: rgba(180,83,9,0.08);
        --success: #059669;
        --danger: #DC2626;
        --warning: #D97706;
        --info: #2563EB;
        --text-primary: #1A2332;
        --text-secondary: #4B5C6F;
        --text-muted: #7B8DA0;
        --text-dim: #A0AEC0;
        --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
        --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
        --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
        --shadow-lg: 0 8px 24px rgba(0,0,0,0.1);
        --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 10px 10px rgba(0,0,0,0.04);
        --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.15);
        --overlay-subtle: rgba(0,0,0,0.02);
        --overlay-light: rgba(0,0,0,0.04);
        --overlay-medium: rgba(0,0,0,0.07);
        --overlay-strong: rgba(0,0,0,0.10);
        --overlay-text: rgba(0,0,0,0.35);
        --overlay-text-strong: rgba(0,0,0,0.50);
        --overlay-text-bright: rgba(0,0,0,0.65);
        --overlay-invert-subtle: rgba(0,0,0,0.06);
        --overlay-invert-medium: rgba(0,0,0,0.10);
    }
}

/* Light theme specific overrides for components that use hardcoded colors */
[data-theme="light"] .msg-mine,
[data-theme="system"] .msg-mine {
    background: var(--msg-mine-bg, rgb(200, 235, 232));
    border-color: var(--msg-mine-border, rgba(13,115,119,0.18));
    color: var(--msg-mine-text, var(--text-primary));
}
[data-theme="light"] .chat-messages,
[data-theme="system"] .chat-messages {
    background-image: url('../img/chat-doodle-light.svg');
}
[data-theme="light"] .msg:not(.msg-mine):not(.msg-system),
[data-theme="system"] .msg:not(.msg-mine):not(.msg-system) {
    background: var(--msg-other-bg, #FFFFFF);
    border-color: var(--msg-other-border, rgba(0,0,0,0.06));
    color: var(--msg-other-text, var(--text-primary));
}
[data-theme="light"] .identity-header-icon,
[data-theme="system"] .identity-header-icon {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-400));
}
[data-theme="light"] .sidebar-fab,
[data-theme="system"] .sidebar-fab {
    background: linear-gradient(135deg, var(--primary-600), var(--primary));
    color: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.1);
}
[data-theme="light"] .fab-menu-item,
[data-theme="system"] .fab-menu-item {
    background: var(--primary-600);
    color: #fff;
}
[data-theme="light"] .fab-menu-item:hover,
[data-theme="system"] .fab-menu-item:hover {
    background: var(--primary-500);
}
[data-theme="light"] .fab-goo-wrapper.open .fab-goo-backdrop,
[data-theme="system"] .fab-goo-wrapper.open .fab-goo-backdrop {
    background: rgba(0, 0, 0, 0.2);
}
[data-theme="light"] .phantom-toggle input:checked + .phantom-toggle-slider,
[data-theme="system"] .phantom-toggle input:checked + .phantom-toggle-slider {
    background: var(--primary);
}
[data-theme="light"] .modal-overlay,
[data-theme="light"] .identity-modal-overlay,
[data-theme="system"] .modal-overlay,
[data-theme="system"] .identity-modal-overlay {
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(4px);
}

body {
    font-family: var(--font-display), var(--font-emoji);
    background: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: 0.01em;
    height: 100vh; width: 100vw;
    height: 100dvh; /* Dynamic viewport: descuenta barra del navegador */
    overflow: hidden;
}

/* ============================================================
   REDUCED MOTION — Sec 10.7 (Accesibilidad)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   GUIDELINES PATCH — Estilos globales faltantes
   Ref: design-system-guidelines.md
   ============================================================ */

/* ---- FOCUS-VISIBLE GLOBAL (Sec 12.3 — Accesibilidad) ---- */
:focus-visible {
    outline: 2px solid var(--primary-400);
    outline-offset: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}

/* ---- SCROLLBAR GLOBAL (Sec 11 — Firefox + Webkit) ---- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ---- BUTTON STATES COMPLETOS (Sec 6.1 — Componentes) ---- */
.btn:active {
    transform: translateY(0) scale(0.97);
    box-shadow: none;
}
.btn-danger:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 12px rgba(248,113,113,0.25);
    transform: translateY(-1px);
}
.btn-danger:active {
    filter: brightness(0.95);
    transform: scale(0.97);
    box-shadow: none;
}
.btn-ghost:active {
    background: var(--primary-100);
    transform: scale(0.97);
}
.btn:disabled {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    top: 50%; left: 50%;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: ds-spin 0.6s linear infinite;
}
.btn-ghost.btn-loading::after {
    border-color: var(--border);
    border-top-color: var(--primary-400);
}
@keyframes ds-spin {
    to { transform: rotate(360deg); }
}

/* ---- INPUT STATES: ERROR / SUCCESS (Sec 6.2 — Formularios) ---- */
.input-error,
.input.is-error,
.textarea.is-error,
.select.is-error {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(248,113,113,0.15) !important;
}
.input-error:focus,
.input.is-error:focus {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(248,113,113,0.25) !important;
}
.input-success,
.input.is-success {
    border-color: var(--success) !important;
    box-shadow: 0 0 0 3px rgba(52,211,153,0.15) !important;
}
.field-error {
    color: var(--danger);
    font-size: 12px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.field-error::before {
    content: '';
    width: 14px; height: 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-8,56a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm8,104a12,12,0,1,1,12-12A12,12,0,0,1,128,184Z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-8,56a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm8,104a12,12,0,1,1,12-12A12,12,0,0,1,128,184Z'/%3E%3C/svg%3E") center/contain no-repeat;
    flex-shrink: 0;
}
.field-hint {
    color: var(--text-dim);
    font-size: 12px;
    margin-top: 4px;
}

/* ---- EMPTY STATE (Sec 7.1 — Estados de UI) ---- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    gap: 16px;
}
.empty-state-icon {
    width: 56px; height: 56px;
    color: var(--text-dim);
    opacity: 0.5;
}
.empty-state-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}
.empty-state-text {
    font-size: 13px;
    color: var(--text-muted);
    max-width: 280px;
    line-height: 1.5;
}

/* ---- TRUNCATION UTILITIES (Sec 3.6 — Tipografía) ---- */
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- DISABLED STATE UTILITY (Sec 7.4 — Estados UI) ---- */
.is-disabled,
[aria-disabled="true"] {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;
}

/* ---- BADGE / TAG / CHIP (Sec 6.8 — Componentes) ---- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-display), var(--font-emoji);
    border-radius: 9999px;
    white-space: nowrap;
    line-height: 1;
    background: var(--primary-100);
    color: var(--primary-400);
}
.badge-success { background: rgba(52,211,153,0.12); color: var(--success); }
.badge-danger  { background: rgba(248,113,113,0.12); color: var(--danger); }
.badge-warning { background: rgba(251,191,36,0.12); color: var(--warning); }
.badge-info    { background: rgba(96,165,250,0.12); color: var(--info); }
.badge-neutral { background: var(--overlay-light); color: var(--text-muted); }

/* ---- TOOLTIP VIA ATRIBUTO (Sec 6.9 — Componentes) ---- */
[data-tooltip] {
    position: relative;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    padding: 5px 10px;
    font-size: 11px;
    font-family: var(--font-display), var(--font-emoji);
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    white-space: nowrap;
    max-width: 220px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    z-index: 500;
}
[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    transition-delay: 0.35s;
}

/* ---- ALERT / BANNER (Sec 7.3 — Error states) ---- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid transparent;
}
.alert-icon {
    flex-shrink: 0;
    width: 18px; height: 18px;
    margin-top: 1px;
}
.alert-success {
    background: rgba(52,211,153,0.08);
    border-color: rgba(52,211,153,0.2);
    color: var(--success);
}
.alert-danger {
    background: rgba(248,113,113,0.08);
    border-color: rgba(248,113,113,0.2);
    color: var(--danger);
}
.alert-warning {
    background: rgba(251,191,36,0.08);
    border-color: rgba(251,191,36,0.2);
    color: var(--warning);
}
.alert-info {
    background: rgba(96,165,250,0.08);
    border-color: rgba(96,165,250,0.2);
    color: var(--info);
}

/* ---- SKELETON SHIMMER MEJORADO (Sec 7.2 — Loading) ---- */
@keyframes ds-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton-shimmer {
    background: linear-gradient(
        90deg,
        var(--overlay-subtle) 25%,
        var(--overlay-light) 50%,
        var(--overlay-subtle) 75%
    );
    background-size: 200% 100%;
    animation: ds-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

/* ---- VISUALLY HIDDEN (Accesibilidad: sr-only) ---- */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}


/* ============================================================
   SPLASH SCREEN — PhantomMsg Loading
   ============================================================ */
.splash-screen {
    position: fixed; inset: 0; z-index: 99999;
    background: var(--bg-body);
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease, background 0.3s ease;
}
.splash-screen.splash-hidden {
    opacity: 0; visibility: hidden; pointer-events: none;
}
.splash-content {
    display: flex; flex-direction: column; align-items: center; gap: 0;
}
.splash-ghost {
    width: 120px; height: 150px;
}
.splash-ghost svg { width: 100%; height: 100%; overflow: visible; }
.splash-text {
    display: flex; align-items: baseline; gap: 8px;
    margin-top: 20px; opacity: 0;
    animation: spFadeUp 0.6s ease-out forwards;
    animation-delay: 0.6s;
}
.splash-title {
    font-family: 'Outfit', sans-serif;
    font-size: 28px; font-weight: 700; letter-spacing: 0.15em; color: var(--text-primary);
    transition: color 0.3s;
}
.splash-subtitle {
    font-family: 'Outfit', sans-serif;
    font-size: 28px; font-weight: 300; letter-spacing: 0.15em; color: var(--primary-500);
    transition: color 0.3s;
}
.splash-tagline {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--text-muted); margin-top: 8px; opacity: 0;
    animation: spFadeUp 0.6s ease-out forwards;
    animation-delay: 0.9s; transition: color 0.3s;
}
.splash-loader {
    width: 120px; height: 2px;
    background: var(--primary-100); border-radius: 2px;
    margin-top: 32px; overflow: hidden; opacity: 0;
    animation: spFadeUp 0.4s ease-out forwards;
    animation-delay: 0.5s;
}
.splash-loader-bar {
    width: 0%; height: 100%;
    background: linear-gradient(90deg, var(--primary-600), var(--primary-400));
    border-radius: 2px; transition: width 0.3s ease-out;
}
.splash-version {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; color: var(--text-dim); letter-spacing: 0.1em;
    margin-top: 12px; opacity: 0;
    animation: spFadeUp 0.4s ease-out forwards;
    animation-delay: 1s;
}

/* ============================================================
   NORMAL MODE — Fusion ghost animations
   ============================================================ */
.sp-float { animation: spFloat 3s ease-in-out infinite; }
.sp-glitch { animation: spGlitch 4.5s ease-in-out infinite; }
.sp-outline { stroke-dasharray: 300; stroke-dashoffset: 300; animation: spDraw 1.8s ease-out forwards; }
.sp-shield { animation: spShield 2.5s ease-in-out infinite; transform-origin: 50px 55px; }
.sp-eyeglow { animation: spEyeGlow 2s ease-in-out infinite; }
.sp-eye-blink { animation: spBlink 5s ease-in-out infinite; transform-origin: 50px 42px; }
.sp-scan { animation: spScan 3s linear infinite; }
.sp-ring { animation: spRingSpin 20s linear infinite; transform-origin: 50px 55px; }
.sp-ring-r { animation: spRingSpin 25s linear infinite; transform-origin: 50px 55px; animation-direction: reverse; }
.sp-ow { font-family: 'IBM Plex Mono', monospace; font-size: 8px; fill: var(--primary-400); }
.sp-o1 { animation: spOrb1 8s linear infinite; transform-origin: 50px 55px; }
.sp-o2 { animation: spOrb2 10s linear infinite; transform-origin: 50px 55px; }
.sp-o3 { animation: spOrb3 7s linear infinite; transform-origin: 50px 55px; }
.sp-o4 { animation: spOrb4 9s linear infinite; transform-origin: 50px 55px; }
.sp-o5 { animation: spOrb5 11s linear infinite; transform-origin: 50px 55px; }
.sp-enc-fill { animation: spEncFill 5s ease-in-out infinite; }
.sp-enc-line { animation: spEncLine 5s ease-in-out infinite; }
.sp-hex { font-family: 'IBM Plex Mono', monospace; font-size: 6px; fill: var(--primary-600); }
.sp-h1 { animation: spEncFade 5s ease-in-out infinite; }
.sp-h2 { animation: spEncFade 5s ease-in-out 0.2s infinite; }
.sp-h3 { animation: spEncFade 5s ease-in-out 0.4s infinite; }
.sp-h4 { animation: spEncFade 5s ease-in-out 0.6s infinite; }
.sp-h5 { animation: spEncFade 5s ease-in-out 0.8s infinite; }
.sp-h6 { animation: spEncFade 5s ease-in-out 1s infinite; }

@keyframes spFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes spGlitch { 0%,86%,100%{transform:translate(0);filter:none} 88%{transform:translate(-3px,1px)} 90%{transform:translate(3px,-1px)} 92%{transform:translate(-2px,-1px)} 94%{transform:translate(2px,2px)} 96%{transform:translate(0)} }
@keyframes spDraw { to{stroke-dashoffset:0} }
@keyframes spShield { 0%,100%{opacity:0.06;transform:scale(1)} 50%{opacity:0.18;transform:scale(1.04)} }
@keyframes spEyeGlow { 0%,100%{opacity:0.1} 50%{opacity:0.28} }
@keyframes spBlink { 0%,18%,100%{transform:scaleY(1)} 10%{transform:scaleY(0.05)} }
@keyframes spScan { 0%{transform:translateY(-20px)} 100%{transform:translateY(120px)} }
@keyframes spRingSpin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
@keyframes spOrb1 { 0%{transform:rotate(0deg) translateX(62px) rotate(0deg)} 100%{transform:rotate(360deg) translateX(62px) rotate(-360deg)} }
@keyframes spOrb2 { 0%{transform:rotate(72deg) translateX(58px) rotate(-72deg)} 100%{transform:rotate(432deg) translateX(58px) rotate(-432deg)} }
@keyframes spOrb3 { 0%{transform:rotate(144deg) translateX(65px) rotate(-144deg)} 100%{transform:rotate(504deg) translateX(65px) rotate(-504deg)} }
@keyframes spOrb4 { 0%{transform:rotate(216deg) translateX(60px) rotate(-216deg)} 100%{transform:rotate(576deg) translateX(60px) rotate(-576deg)} }
@keyframes spOrb5 { 0%{transform:rotate(288deg) translateX(56px) rotate(-288deg)} 100%{transform:rotate(648deg) translateX(56px) rotate(-648deg)} }
@keyframes spEncFill { 0%,5%{height:0;y:95} 45%{height:75px;y:20} 55%{height:75px;y:20} 95%,100%{height:0;y:95} }
@keyframes spEncLine { 0%,5%{transform:translateY(0)} 45%{transform:translateY(-75px)} 55%{transform:translateY(-75px)} 95%,100%{transform:translateY(0)} }
@keyframes spEncFade { 0%,5%{opacity:0} 15%{opacity:0.7} 45%{opacity:0.7} 55%{opacity:0.7} 85%{opacity:0} 100%{opacity:0} }
@keyframes spFadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ============================================================
   EVIL PLAYFUL MODE — Easter egg (5 taps)
   ============================================================ */
.splash-evil-playful .sp-glitch {
    animation: spGlitchPlayful 3s ease-in-out infinite;
}
.splash-evil-playful .sp-float {
    animation: spFloat 2s ease-in-out infinite;
}
.splash-evil-playful .sp-ow { fill: var(--primary-400); }
.splash-evil-playful .splash-tagline { color: var(--primary-400); }
.sp-playful-blink { animation: spPlayfulBlink 4s ease-in-out infinite; transform-origin: 50px 42px; }
.sp-playful-look { animation: spPlayfulLook 3s ease-in-out infinite; }

@keyframes spGlitchPlayful { 0%,80%,100%{transform:translate(0);filter:none} 82%{transform:translate(-4px,2px);filter:hue-rotate(90deg)} 84%{transform:translate(4px,-2px);filter:hue-rotate(-90deg)} 86%{transform:translate(-2px,-3px);filter:hue-rotate(180deg)} 88%{transform:translate(3px,1px);filter:none} 90%{transform:translate(0)} }
@keyframes spPlayfulBlink { 0%,42%,48%,100%{transform:scaleY(1)} 44%{transform:scaleY(0.05)} 46%{transform:scaleY(0.05)} }
@keyframes spPlayfulLook { 0%,40%,100%{transform:translateX(0)} 45%{transform:translateX(-2px)} 55%{transform:translateX(2px)} 60%{transform:translateX(0)} }

/* ============================================================
   EVIL ANGRY MODE — Lock screen failures
   ============================================================ */
.lock-evil-angry .lock-ghost-icon { transition: all 0.3s; }
.lock-evil-angry .lock-overlay { transition: background 0.3s; }

.lock-ghost-icon { width: 80px; height: 100px; margin: 0 auto 8px; }
.lock-ghost-icon svg { width: 100%; height: 100%; overflow: visible; }

.lg-float { animation: spFloat 1.5s ease-in-out infinite; }
.lg-shake { animation: lgShake 2.5s ease-in-out infinite; }
.lg-eye-narrow { transform-origin: 50px 42px; animation: lgNarrow 2s ease-in-out infinite; }
.lg-eye-pulse { animation: lgEyePulse 0.8s ease-in-out infinite; }
.lg-eye-glow { animation: lgEyeGlow 1s ease-in-out infinite; }
.lg-lock-shake { transform-origin: 50px 64px; animation: lgLockShake 2s ease-in-out infinite; }
.lg-crack { stroke-dasharray: 30; animation: lgCrack 2.5s ease-in-out infinite; }
.lg-crack-d { animation-delay: 0.3s; }
.lg-shield-flash { animation: lgShieldFlash 2.5s ease-in-out infinite; transform-origin: 50px 55px; }
.lg-rip1 { animation: lgRipple 1.5s ease-out infinite; }
.lg-rip2 { animation: lgRipple 1.5s ease-out 0.5s infinite; }
.lg-rip3 { animation: lgRipple 1.5s ease-out 1s infinite; }
.lg-scan { animation: spScan 1.8s linear infinite; }
.lg-ow { font-family: 'IBM Plex Mono', monospace; font-size: 8px; fill: #E24B4A; }
.lg-o1 { animation: spOrb1 3s linear infinite; transform-origin: 50px 55px; }
.lg-o2 { animation: spOrb2 2.5s linear infinite; transform-origin: 50px 55px; }
.lg-o3 { animation: spOrb3 3.5s linear infinite; transform-origin: 50px 55px; }
.lg-enc-fill { animation: spEncFill 3.5s ease-in-out infinite; }
.lg-hex { font-family: 'IBM Plex Mono', monospace; font-size: 6px; fill: #791F1F; animation: spEncFade 3.5s ease-in-out infinite; }
.lg-hex-d1 { animation-delay: 0.2s; }
.lg-hex-d2 { animation-delay: 0.4s; }

@keyframes lgShake { 0%,76%,100%{transform:translate(0) rotate(0)} 78%{transform:translate(-5px,2px) rotate(-2deg)} 80%{transform:translate(5px,-2px) rotate(2deg)} 82%{transform:translate(-4px,-1px) rotate(-1deg)} 84%{transform:translate(4px,1px) rotate(1deg)} 86%{transform:translate(-3px,2px) rotate(-2deg)} 88%{transform:translate(3px,-1px) rotate(1deg)} 90%{transform:translate(-2px,1px)} 92%{transform:translate(0)} }
@keyframes lgNarrow { 0%,30%,100%{transform:scaleY(1)} 50%{transform:scaleY(0.6)} }
@keyframes lgEyePulse { 0%,100%{r:6;opacity:1} 50%{r:7;opacity:0.8} }
@keyframes lgEyeGlow { 0%,100%{opacity:0.15} 50%{opacity:0.45} }
@keyframes lgLockShake { 0%,70%,100%{transform:rotate(0)} 75%{transform:rotate(-8deg)} 80%{transform:rotate(8deg)} 85%{transform:rotate(-5deg)} 90%{transform:rotate(3deg)} 95%{transform:rotate(0)} }
@keyframes lgCrack { 0%,70%,100%{opacity:0;stroke-dashoffset:30} 78%{opacity:0.6;stroke-dashoffset:0} 92%{opacity:0.6;stroke-dashoffset:0} }
@keyframes lgShieldFlash { 0%,72%,94%,100%{opacity:0.05;stroke:var(--primary-500)} 78%{opacity:0.5;stroke:var(--danger)} 86%{opacity:0.3;stroke:var(--danger)} }
@keyframes lgRipple { 0%{r:20;opacity:0.5;stroke-width:2} 100%{r:65;opacity:0;stroke-width:0.2} }

/* Intensity levels (added by JS based on attempt count) */
.lock-evil-angry.evil-intensity-2 .lg-shake { animation-duration: 2s; }
.lock-evil-angry.evil-intensity-3 .lg-shake { animation-duration: 1.5s; }
.lock-evil-angry.evil-intensity-3 .lg-rip1,
.lock-evil-angry.evil-intensity-3 .lg-rip2,
.lock-evil-angry.evil-intensity-3 .lg-rip3 { animation-duration: 1s; }

/* ============================================================
   LIGHT THEME OVERRIDES
   ============================================================ */
[data-theme="light"] .splash-screen { background: var(--bg-body); }
[data-theme="light"] .splash-title { color: var(--text-primary); }
[data-theme="light"] .splash-tagline { color: var(--text-muted); }
[data-theme="light"] .splash-version { color: var(--text-dim); }
[data-theme="light"] .splash-subtitle { color: var(--primary); }
[data-theme="light"] .splash-loader { background: var(--primary-100); }
[data-theme="light"] .splash-loader-bar { background: linear-gradient(90deg, var(--primary-600), var(--primary-400)); }

/* ============================================================
   THEME SELECTOR GRID — Settings panel
   ============================================================ */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    padding: 4px 0 8px;
}
.theme-card {
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color var(--transition), transform var(--transition);
    overflow: hidden;
    background: var(--bg-card);
}
.theme-card:hover { transform: translateY(-2px); border-color: var(--border-focus); }
.theme-card.active { border-color: var(--primary-500); }
.theme-preview {
    height: 72px;
    display: flex;
    overflow: hidden;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    position: relative;
}
.theme-preview-sidebar {
    width: 35%;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.theme-preview-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.theme-preview-line {
    height: 3px;
    border-radius: 2px;
}
.theme-preview-chat {
    flex: 1;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}
.theme-preview-bubble-mine {
    height: 8px;
    width: 70%;
    border-radius: 4px;
    align-self: flex-end;
}
.theme-preview-bubble-other {
    height: 8px;
    width: 80%;
    border-radius: 4px;
    align-self: flex-start;
}
.theme-card-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 6px 8px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.theme-card-desc {
    font-size: 10px;
    color: var(--text-muted);
    padding: 0 8px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Message bubble overrides for custom themes */
:root {
    --msg-mine-bg: var(--primary-100);
    --msg-mine-text: var(--text-primary);
    --msg-other-bg: var(--bg-card);
    --msg-other-text: var(--text-primary);
}

/* Theme panel subtitle */
.themes-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: -8px 0 16px;
}

/* Edit overlay — pencil icon on hover over theme card */
.theme-card {
    position: relative;
}
.theme-card-edit-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 2;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.theme-card:hover .theme-card-edit-overlay {
    opacity: 1;
    pointer-events: auto;
}
.theme-card-edit-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.theme-card-edit-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(var(--primary), 0.3);
}
.theme-card-edit-btn:active {
    transform: scale(0.92);
}
/* Legacy footer support (keep for backward compat) */
.theme-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 8px;
    gap: 4px;
}
.theme-card-footer .theme-card-name {
    padding: 0;
}
.theme-card-footer .theme-card-desc {
    padding: 0;
}
/* Theme grid in panel: bigger cards */
#panel-themes .theme-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
#panel-themes .theme-preview {
    height: 88px;
}
#panel-themes .theme-card-name {
    font-size: 12px;
    padding: 8px 10px 0;
}
#panel-themes .theme-card-desc {
    font-size: 11px;
    padding: 2px 10px 10px;
}

/* ============================================================
   THEME EDITOR — Custom theme creator
   ============================================================ */
.themes-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 20px 0 12px; color: var(--text-muted); font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.1em;
}
.themes-divider::before, .themes-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}
.theme-editor-actions {
    display: flex; gap: 8px; margin-top: 12px;
}
.theme-action-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 500; cursor: pointer;
    border: 1px solid var(--border); background: var(--bg-card);
    color: var(--text-primary); transition: all var(--transition);
}
.theme-action-btn:hover { background: var(--bg-elevated); border-color: var(--primary-500); }
.theme-action-btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.theme-action-btn.primary:hover { background: var(--primary-600); }
.theme-action-btn.secondary { background: transparent; }
.theme-action-btn svg { flex-shrink: 0; }

/* ============================================================
   THEME EDITOR — Fullscreen Split Layout
   ============================================================ */
.te-fullscreen {
    position: fixed; inset: 0; z-index: 10000;
    background: var(--bg-body);
    display: flex;
    padding-top: env(safe-area-inset-top, 0);
}
.te-preview-side {
    flex: 1; display: flex; flex-direction: column;
    position: relative; overflow: hidden;
    transition: background 0.3s;
    min-width: 0;
}
.te-preview-app {
    flex: 1; display: flex; overflow: hidden;
}
.te-p-badge {
    position: absolute; top: 12px; right: 12px;
    font-size: 11px; padding: 4px 12px; border-radius: 20px;
    font-weight: 600; z-index: 2; letter-spacing: 0.03em;
    transition: all 0.3s;
}
.te-controls-side {
    width: 380px; background: var(--bg-surface);
    border-left: 1px solid var(--border);
    display: flex; flex-direction: column;
    overflow: hidden; flex-shrink: 0;
}
.te-ctrl-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px; border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.te-ctrl-header h3 {
    font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.theme-editor-close {
    width: 34px; height: 34px; border-radius: 50%;
    border: none; background: var(--bg-card); color: var(--text-secondary);
    font-size: 18px; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    transition: all var(--transition); flex-shrink: 0;
}
.theme-editor-close:hover { background: var(--danger); color: #fff; }
.te-ctrl-body {
    flex: 1; padding: 20px 24px; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.te-ctrl-body > .te-group {
    animation: teGroupFadeIn 0.3s ease-out both;
}
.te-ctrl-body > .te-group:nth-child(1) { animation-delay: 0s; }
.te-ctrl-body > .te-group:nth-child(2) { animation-delay: 0.05s; }
.te-ctrl-body > .te-group:nth-child(3) { animation-delay: 0.1s; }
.te-ctrl-body > .te-group:nth-child(4) { animation-delay: 0.15s; }
.te-ctrl-body > .te-group:nth-child(5) { animation-delay: 0.2s; }
.te-ctrl-body > .te-group:nth-child(6) { animation-delay: 0.25s; }
.te-ctrl-body > .te-group:nth-child(7) { animation-delay: 0.3s; }
@keyframes teGroupFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.te-ctrl-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 24px; border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.te-ctrl-footer .theme-action-btn {
    min-height: 38px;
}
.te-name-input {
    width: 100%; padding: 10px 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--bg-input);
    color: var(--text-primary); font-size: 15px; outline: none;
    margin-bottom: 12px; transition: border-color 0.2s;
}
.te-name-input:focus { border-color: var(--primary-500); }
.te-style-select {
    width: 100%; padding: 10px 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--bg-input);
    color: var(--text-primary); font-size: 14px; outline: none;
    cursor: pointer; margin-bottom: 0; transition: border-color 0.2s;
}
.te-style-select:focus { border-color: var(--primary-500); }
.te-style-select option { background: var(--bg-card); color: var(--text-primary); }
.te-randomize-btn {
    width: 100%; padding: 9px 12px; border-radius: 20px;
    border: 1px dashed var(--border); background: transparent;
    color: var(--text-secondary); font-size: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-bottom: 14px; transition: all var(--transition);
    min-height: 38px;
}
.te-randomize-btn:hover { border-color: var(--primary-500); color: var(--primary-500); }
/* 8pt grid groups */
.te-group {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
}
.te-group:last-child { border-bottom: none; margin-bottom: 8px; }
.te-actions-row { display: flex; gap: 8px; }

/* Shape controls */
.te-shape-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.te-shape-item { display: flex; flex-direction: column; gap: 3px; }
.te-shape-label {
    font-size: 10px; color: var(--text-muted); font-weight: 500;
}
.te-shape-select {
    padding: 6px 8px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--bg-input);
    color: var(--text-primary); font-size: 12px; outline: none;
    cursor: pointer; transition: border-color 0.2s;
}
.te-shape-select:focus { border-color: var(--primary-500); }
.te-section-label {
    font-size: 10px; color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.1em; margin: 0 0 8px; font-weight: 600;
    display: flex; align-items: center; gap: 8px;
}
.te-section-label::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}

/* WCAG contrast badges */
.te-wcag-badge {
    display: inline-block;
    font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
    padding: 1px 5px; border-radius: 4px;
    margin-left: 4px; vertical-align: middle;
    transition: all 0.3s ease;
}
.te-wcag-badge.wcag-pass { background: rgba(52,211,153,0.15); color: #34d399; }
.te-wcag-badge.wcag-aa { background: rgba(251,191,36,0.15); color: #fbbf24; }
.te-wcag-badge.wcag-fail { background: rgba(248,113,113,0.15); color: #f87171; }

/* Palette suggestion chips */
.te-palette-row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.te-palette-chip {
    display: flex; align-items: center; gap: 3px;
    padding: 6px 8px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--bg-card);
    cursor: pointer; transition: all 0.2s ease;
    justify-content: center; flex-direction: column; min-width: 0;
}
.te-palette-chip:hover { border-color: var(--primary-500); transform: translateY(-1px); }
.te-palette-chip:active { transform: translateY(0); }
.te-chip-swatches { display: flex; gap: 3px; }
.te-chip-swatch {
    width: 14px; height: 14px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0; transition: background 0.3s ease;
}
.te-chip-label {
    font-size: 9px; color: var(--text-muted); font-weight: 500;
    white-space: nowrap; margin-top: 2px;
}
.te-color-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px;
}
.te-color-item {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 8px; border-radius: var(--radius-sm);
    transition: background var(--transition);
    min-height: 44px;
    border: 1px solid transparent;
}
.te-color-item:hover { background: var(--overlay-subtle); border-color: var(--border-light); }
.te-color-item input[type="color"] {
    width: 36px; height: 36px; border: 1.5px solid var(--border);
    border-radius: 8px; cursor: pointer; padding: 2px;
    background: var(--bg-card); flex-shrink: 0;
    min-width: 36px; transition: border-color 0.2s;
}
.te-color-item input[type="color"]:hover { border-color: var(--primary-500); }
.te-color-info {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0; flex: 1;
}
.te-color-name {
    font-size: 12px; color: var(--text-secondary); font-weight: 500;
    white-space: nowrap; display: flex; align-items: center; gap: 4px;
}
.te-color-hex {
    font-size: 11px; color: var(--text-dim); font-family: var(--font-mono);
    white-space: nowrap;
}

/* Preview mini-app elements */
.te-p-sidebar {
    width: 38%; display: flex; flex-direction: column;
    transition: all 0.3s; overflow: hidden;
}
.te-p-sb-head {
    padding: 8px 10px; display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: all 0.3s;
}
.te-p-logo { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; transition: all 0.3s; }
.te-p-search {
    flex: 1; height: 10px; border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.08); transition: all 0.3s;
}
.te-p-items { flex: 1; padding: 4px 6px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.te-p-item {
    display: flex; align-items: center; gap: 6px; padding: 6px 8px;
    border-radius: 8px; border: 1px solid transparent; transition: all 0.3s;
    flex-shrink: 0;
}
.te-p-avatar {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; transition: all 0.3s;
}
.te-p-lines { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; }
.te-p-item-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.te-p-ln { transition: all 0.3s; }
.te-p-ln-name { font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.te-p-ln-time { font-size: 8px; opacity: 0.5; white-space: nowrap; flex-shrink: 0; }
.te-p-ln-msg { font-size: 8px; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.te-p-ln-dim { opacity: 0.4; }
.te-p-main { flex: 1; display: flex; flex-direction: column; }
.te-p-chat-head {
    padding: 8px 12px; display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06); transition: all 0.3s;
}
.te-p-head-avatar {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; transition: all 0.3s;
}
.te-p-head-info { display: flex; flex-direction: column; gap: 1px; }
.te-p-ln-status { font-size: 8px; opacity: 0.5; }
.te-p-msgs {
    flex: 1; padding: 10px 12px;
    display: flex; flex-direction: column; gap: 6px; justify-content: flex-end;
}
.te-p-bub {
    padding: 6px 10px; border-radius: 10px; border: 1px solid transparent;
    transition: all 0.3s; display: flex; align-items: flex-end; gap: 6px;
    max-width: 75%;
}
.te-p-bub-text { font-size: 9px; line-height: 1.3; flex: 1; }
.te-p-bub-time { font-size: 7px; opacity: 0.5; white-space: nowrap; flex-shrink: 0; }
.te-p-mine { align-self: flex-end; border-bottom-right-radius: 3px; }
.te-p-theirs { align-self: flex-start; border-bottom-left-radius: 3px; }
.te-p-w2 { max-width: 50%; }
.te-p-w3 { max-width: 70%; }
.te-p-input-bar {
    padding: 8px 10px; display: flex; align-items: center; gap: 6px;
    border-top: 1px solid rgba(255,255,255,0.06); transition: all 0.3s;
}
.te-p-input {
    flex: 1; padding: 5px 10px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1); transition: all 0.3s;
    display: flex; align-items: center;
}
.te-p-input-text { font-size: 9px; opacity: 0.35; }
.te-p-send {
    width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; transition: all 0.3s;
}

/* ============================================================
   THEME EDITOR — Animation Preview System
   Demos animations inside the mini-preview when user clicks "Probar"
   ============================================================ */
.te-anim-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-display), var(--font-emoji);
    border: 1px dashed var(--border);
    border-radius: 20px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: 36px;
}
.te-anim-play-btn:hover {
    border-color: var(--primary-500);
    color: var(--primary-500);
    border-style: solid;
}
.te-anim-play-btn:active {
    transform: scale(0.97);
}
.te-anim-play-btn.is-playing {
    pointer-events: none;
    opacity: 0.5;
}

/* Preview bubble animation keyframes (adapted for mini-preview scale) */
/* SEND — 10 animations */
@keyframes teSendSlide { 0%{opacity:0;transform:translateX(20px) scale(0.9)} 60%{opacity:1;transform:translateX(-2px) scale(1.01)} 100%{opacity:1;transform:translateX(0) scale(1)} }
@keyframes teSendBounce { 0%{opacity:0;transform:translateY(20px)} 50%{opacity:1;transform:translateY(-5px)} 70%{transform:translateY(2px)} 100%{transform:translateY(0)} }
@keyframes teSendPop { 0%{opacity:0;transform:scale(0.3)} 60%{opacity:1;transform:scale(1.1)} 100%{transform:scale(1)} }
@keyframes teSendFade { from{opacity:0} to{opacity:1} }
@keyframes teSendFlip { 0%{opacity:0;transform:perspective(200px) rotateY(90deg)} 60%{opacity:1;transform:perspective(200px) rotateY(-8deg)} 100%{transform:perspective(200px) rotateY(0)} }
@keyframes teSendElastic { 0%{opacity:0;transform:translateX(40px) scaleX(1.3)} 40%{opacity:1;transform:translateX(-6px) scaleX(0.95)} 60%{transform:translateX(3px) scaleX(1.02)} 80%{transform:translateX(-1px) scaleX(0.99)} 100%{transform:translateX(0) scaleX(1)} }
@keyframes teSendSwing { 0%{opacity:0;transform:translateX(20px) rotate(8deg);transform-origin:top right} 50%{opacity:1;transform:translateX(-3px) rotate(-3deg)} 75%{transform:translateX(1px) rotate(1deg)} 100%{transform:translateX(0) rotate(0)} }
@keyframes teSendRise { 0%{opacity:0;transform:translateY(16px) rotate(2deg)} 60%{opacity:1;transform:translateY(-2px) rotate(0)} 100%{transform:translateY(0) rotate(0)} }
@keyframes teSendUnfold { 0%{opacity:0;transform:scaleX(0);transform-origin:right center} 60%{opacity:1;transform:scaleX(1.03)} 100%{transform:scaleX(1)} }
@keyframes teSendGlitch { 0%{opacity:0;transform:translate(4px,-2px);filter:hue-rotate(90deg)} 25%{opacity:0.7;transform:translate(-3px,1px);filter:hue-rotate(-60deg)} 50%{opacity:0.9;transform:translate(2px,0);filter:hue-rotate(30deg)} 75%{opacity:1;transform:translate(-1px,0);filter:none} 100%{opacity:1;transform:translate(0);filter:none} }

/* RECEIVE — 10 animations */
@keyframes teRecvSlide { 0%{opacity:0;transform:translateX(-20px) scale(0.9)} 60%{opacity:1;transform:translateX(2px) scale(1.01)} 100%{transform:translateX(0) scale(1)} }
@keyframes teRecvBounce { 0%{opacity:0;transform:translateY(20px)} 50%{opacity:1;transform:translateY(-4px)} 70%{transform:translateY(1px)} 100%{transform:translateY(0)} }
@keyframes teRecvPop { 0%{opacity:0;transform:scale(0.3)} 60%{opacity:1;transform:scale(1.08)} 100%{transform:scale(1)} }
@keyframes teRecvFlip { 0%{opacity:0;transform:perspective(200px) rotateY(-90deg)} 60%{opacity:1;transform:perspective(200px) rotateY(8deg)} 100%{transform:perspective(200px) rotateY(0)} }
@keyframes teRecvElastic { 0%{opacity:0;transform:translateX(-40px) scaleX(1.3)} 40%{opacity:1;transform:translateX(6px) scaleX(0.95)} 60%{transform:translateX(-3px) scaleX(1.02)} 80%{transform:translateX(1px) scaleX(0.99)} 100%{transform:translateX(0) scaleX(1)} }
@keyframes teRecvSwing { 0%{opacity:0;transform:translateX(-20px) rotate(-8deg);transform-origin:top left} 50%{opacity:1;transform:translateX(3px) rotate(3deg)} 75%{transform:translateX(-1px) rotate(-1deg)} 100%{transform:translateX(0) rotate(0)} }
@keyframes teRecvRise { 0%{opacity:0;transform:translateY(16px) rotate(-2deg)} 60%{opacity:1;transform:translateY(-2px) rotate(0)} 100%{transform:translateY(0) rotate(0)} }
@keyframes teRecvUnfold { 0%{opacity:0;transform:scaleX(0);transform-origin:left center} 60%{opacity:1;transform:scaleX(1.03)} 100%{transform:scaleX(1)} }
@keyframes teRecvGlitch { 0%{opacity:0;transform:translate(-4px,2px);filter:hue-rotate(-90deg)} 25%{opacity:0.7;transform:translate(3px,-1px);filter:hue-rotate(60deg)} 50%{opacity:0.9;transform:translate(-2px,0);filter:hue-rotate(-30deg)} 75%{opacity:1;transform:translate(1px,0);filter:none} 100%{opacity:1;transform:translate(0);filter:none} }

/* DELETE — 10 animations */
@keyframes teDelSlideout { 0%{opacity:1;transform:translateX(0) scale(1)} 100%{opacity:0;transform:translateX(30px) scale(0.85)} }
@keyframes teDelShrink { 0%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(0)} }
@keyframes teDelPoof { 0%{opacity:1;transform:scale(1);filter:blur(0)} 50%{opacity:0.5;transform:scale(1.1);filter:blur(1px)} 100%{opacity:0;transform:scale(1.3);filter:blur(4px)} }
@keyframes teDelFade { 0%{opacity:1} 100%{opacity:0} }
@keyframes teDelFall { 0%{opacity:1;transform:translateY(0) rotate(0)} 100%{opacity:0;transform:translateY(30px) rotate(6deg)} }
@keyframes teDelTornado { 0%{opacity:1;transform:rotate(0) scale(1)} 40%{opacity:0.7;transform:rotate(180deg) scale(0.7)} 100%{opacity:0;transform:rotate(540deg) scale(0)} }
@keyframes teDelDissolve { 0%{opacity:1;transform:scale(1);filter:blur(0) saturate(1)} 40%{opacity:0.6;transform:scale(1.05);filter:blur(2px) saturate(0.5)} 100%{opacity:0;transform:scale(1.15);filter:blur(8px) saturate(0)} }
@keyframes teDelSwipe { 0%{opacity:1;transform:translateX(0)} 30%{opacity:0.9;transform:translateX(-5px)} 100%{opacity:0;transform:translateX(60px)} }
@keyframes teDelCrush { 0%{opacity:1;transform:scaleY(1) scaleX(1)} 50%{opacity:0.7;transform:scaleY(0.3) scaleX(1.2)} 100%{opacity:0;transform:scaleY(0) scaleX(1.4)} }
@keyframes teDelRocket { 0%{opacity:1;transform:translateY(0) scale(1)} 30%{opacity:0.9;transform:translateY(3px) scale(0.98)} 100%{opacity:0;transform:translateY(-50px) scale(0.5)} }

/* PENDING — 9 animations */
@keyframes tePendPulse { 0%,100%{opacity:0.5} 50%{opacity:0.3} }
@keyframes tePendGlow { 0%,100%{opacity:0.5;box-shadow:none} 50%{opacity:0.65;box-shadow:0 0 8px 1px var(--primary-glow)} }
@keyframes tePendShimmer { 0%{opacity:0.5;background-position:-200% 0} 100%{opacity:0.5;background-position:200% 0} }
@keyframes tePendWave { 0%,100%{opacity:0.5;transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }
@keyframes tePendBounce { 0%,100%{opacity:0.5;transform:translateY(0)} 50%{opacity:0.6;transform:translateY(-4px)} }
@keyframes tePendFlicker { 0%,100%{opacity:0.55} 20%{opacity:0.3} 40%{opacity:0.6} 60%{opacity:0.25} 80%{opacity:0.5} }
@keyframes tePendRadar { 0%{opacity:0.5;box-shadow:0 0 0 0 var(--primary-glow)} 50%{opacity:0.55;box-shadow:0 0 0 6px transparent} 100%{opacity:0.5;box-shadow:0 0 0 0 transparent} }
@keyframes tePendBreathe { 0%,100%{opacity:0.45;transform:scale(1)} 50%{opacity:0.6;transform:scale(1.02)} }

/* EXTRAVAGANT SEND — 8 new */
@keyframes teSendTypewriter { 0%{opacity:0;max-width:0;white-space:nowrap;overflow:hidden} 100%{opacity:1;max-width:300px} }
@keyframes teSendThrow { 0%{opacity:0;transform:translate(40px,30px) rotate(15deg) scale(0.5)} 50%{opacity:1;transform:translate(-3px,-6px) rotate(-3deg) scale(1.05)} 100%{opacity:1;transform:translate(0) rotate(0) scale(1)} }
@keyframes teSendSpiral { 0%{opacity:0;transform:rotate(360deg) scale(0)} 50%{opacity:0.8;transform:rotate(90deg) scale(1.1)} 100%{opacity:1;transform:rotate(0) scale(1)} }
@keyframes teSendJelly { 0%{opacity:0;transform:scale(0.3,0.3)} 30%{opacity:1;transform:scale(1.15,0.85)} 45%{transform:scale(0.9,1.1)} 60%{transform:scale(1.05,0.95)} 75%{transform:scale(0.98,1.02)} 100%{opacity:1;transform:scale(1,1)} }
@keyframes teSendMatrix { 0%{opacity:0;filter:brightness(3) hue-rotate(90deg);transform:scaleY(0.1)} 40%{opacity:0.8;filter:brightness(2) hue-rotate(45deg);transform:scaleY(1.1)} 70%{filter:brightness(1.3);transform:scaleY(0.95)} 100%{opacity:1;filter:none;transform:scaleY(1)} }
@keyframes teSendExplosion { 0%{opacity:0;transform:scale(0)} 40%{opacity:1;transform:scale(1.3)} 70%{transform:scale(0.95)} 100%{opacity:1;transform:scale(1)} }
@keyframes teSendHelicopter { 0%{opacity:0;transform:translateY(-40px) rotate(720deg) scale(0.3)} 60%{opacity:1;transform:translateY(3px) rotate(-10deg) scale(1.02)} 100%{opacity:1;transform:translateY(0) rotate(0) scale(1)} }
@keyframes teSendRubberband { 0%{opacity:0;transform:scaleX(0.3) translateX(30px)} 25%{opacity:1;transform:scaleX(1.35) translateX(-6px)} 50%{transform:scaleX(0.85) translateX(3px)} 70%{transform:scaleX(1.08) translateX(-1px)} 100%{opacity:1;transform:scaleX(1) translateX(0)} }

/* EXTRAVAGANT RECEIVE — 8 new */
@keyframes teRecvTelegram { 0%{opacity:0;transform:translateY(-35px) rotate(-5deg)} 60%{opacity:1;transform:translateY(2px) rotate(1deg)} 100%{opacity:1;transform:translateY(0) rotate(0)} }
@keyframes teRecvPortal { 0%{opacity:0;transform:scale(0) rotate(180deg)} 60%{opacity:1;transform:scale(1.05) rotate(-5deg)} 100%{opacity:1;transform:scale(1) rotate(0)} }
@keyframes teRecvFloatup { 0%{opacity:0;transform:translateY(20px)} 40%{opacity:1;transform:translateY(-5px)} 65%{transform:translateY(2px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes teRecvNewspaper { 0%{opacity:0;transform:scale(0) rotate(720deg)} 70%{opacity:1;transform:scale(1.05) rotate(-5deg)} 100%{opacity:1;transform:scale(1) rotate(0)} }
@keyframes teRecvHack { 0%{opacity:0;transform:translate(-6px,3px);filter:hue-rotate(180deg) brightness(2)} 20%{opacity:0.6;transform:translate(5px,-2px);filter:hue-rotate(-90deg)} 40%{opacity:0.8;transform:translate(-3px,1px);filter:hue-rotate(90deg)} 60%{opacity:0.9;transform:translate(2px,-1px)} 80%{transform:translate(-1px,0)} 100%{opacity:1;transform:translate(0);filter:none} }
@keyframes teRecvDomino { 0%{opacity:0;transform:perspective(200px) rotateX(-90deg);transform-origin:top} 50%{opacity:1;transform:perspective(200px) rotateX(10deg)} 70%{transform:perspective(200px) rotateX(-5deg)} 100%{opacity:1;transform:perspective(200px) rotateX(0)} }
@keyframes teRecvDrop3d { 0%{opacity:0;transform:perspective(200px) translateZ(60px) translateY(-20px)} 60%{opacity:1;transform:perspective(200px) translateZ(-5px) translateY(2px)} 100%{opacity:1;transform:perspective(200px) translateZ(0) translateY(0)} }
@keyframes teRecvCurtain { 0%{opacity:0;clip-path:inset(0 0 100% 0)} 40%{opacity:1;clip-path:inset(0 0 20% 0)} 100%{opacity:1;clip-path:inset(0 0 0 0)} }

/* EXTRAVAGANT DELETE — 8 new */
@keyframes teDelBlackhole { 0%{opacity:1;transform:scale(1) rotate(0)} 50%{opacity:0.6;transform:scale(0.5) rotate(180deg)} 100%{opacity:0;transform:scale(0) rotate(540deg)} }
@keyframes teDelShatter { 0%{opacity:1;transform:scale(1);filter:none} 30%{opacity:0.9;transform:scale(1.02);filter:brightness(1.5)} 60%{opacity:0.5;transform:scale(1.05) skewX(10deg);filter:brightness(0.8)} 100%{opacity:0;transform:scale(1.2) skewX(-20deg) skewY(5deg);filter:blur(4px)} }
@keyframes teDelBurn { 0%{opacity:1;filter:none;transform:scaleY(1)} 30%{opacity:0.9;filter:sepia(1) brightness(1.3) saturate(2)} 60%{opacity:0.5;filter:sepia(1) brightness(1.8) blur(1px);transform:scaleY(0.8)} 100%{opacity:0;filter:brightness(3) blur(6px);transform:scaleY(0)} }
@keyframes teDelFlush { 0%{opacity:1;transform:rotate(0) scale(1)} 40%{opacity:0.7;transform:rotate(180deg) scale(0.7)} 70%{opacity:0.3;transform:rotate(540deg) scale(0.3)} 100%{opacity:0;transform:rotate(720deg) scale(0)} }
@keyframes teDelAbduct { 0%{opacity:1;transform:translateY(0) scale(1)} 40%{opacity:0.8;transform:translateY(-8px) scale(1.05)} 100%{opacity:0;transform:translateY(-40px) scale(0.5) scaleX(0.3)} }
@keyframes teDelCrumble { 0%{opacity:1;transform:translateY(0) rotate(0)} 30%{opacity:0.8;transform:translateY(3px) rotate(2deg) skewX(3deg)} 60%{opacity:0.4;transform:translateY(10px) rotate(-3deg) scaleY(0.7)} 100%{opacity:0;transform:translateY(20px) rotate(8deg) scaleY(0.2) scaleX(1.3)} }
@keyframes teDelVaporize { 0%{opacity:1;transform:translateY(0);filter:none} 40%{opacity:0.7;transform:translateY(-3px);filter:blur(1px) brightness(1.3)} 100%{opacity:0;transform:translateY(-15px) scaleX(1.3);filter:blur(6px) brightness(2)} }
@keyframes teDelGlitchout { 0%{opacity:1;transform:translate(0);filter:none} 15%{opacity:0.8;transform:translate(-4px,2px);filter:hue-rotate(90deg)} 30%{opacity:0.6;transform:translate(3px,-1px);filter:hue-rotate(-60deg)} 50%{opacity:0.4;transform:translate(-2px,1px) scaleX(1.1)} 70%{opacity:0.2;transform:translate(3px,-2px) scaleX(0.9)} 100%{opacity:0;transform:translate(0) scale(0.9);filter:brightness(3)} }

/* EXTRAVAGANT PENDING — 6 new */
@keyframes tePendHeartbeat { 0%,40%,100%{transform:scale(1);opacity:0.55} 8%{transform:scale(1.15);opacity:0.75} 16%{transform:scale(0.97);opacity:0.5} 24%{transform:scale(1.2);opacity:0.8} 32%{transform:scale(0.98);opacity:0.5} }
@keyframes tePendNeon { 0%,100%{opacity:0.3;box-shadow:none} 15%{opacity:0.7;box-shadow:0 0 8px var(--primary-glow)} 30%{opacity:0.35} 50%{opacity:0.65;box-shadow:0 0 12px var(--primary-glow)} 65%{opacity:0.4;box-shadow:none} 85%{opacity:0.7;box-shadow:0 0 6px var(--primary-glow)} }
@keyframes tePendMorse { 0%,20%{opacity:0.3} 5%{opacity:0.7} 10%{opacity:0.3} 15%{opacity:0.7} 25%,50%{opacity:0.3} 30%{opacity:0.7} 45%{opacity:0.7} 55%{opacity:0.3} 60%,75%{opacity:0.7} 80%,100%{opacity:0.3} }
@keyframes tePendSpin { 0%{transform:rotate(0);opacity:0.55} 100%{transform:rotate(360deg);opacity:0.55} }
@keyframes tePendPendFloat { 0%,100%{transform:translateY(0);opacity:0.55} 50%{transform:translateY(-4px);opacity:0.65} }
@keyframes tePendVibrate { 0%,100%{transform:translateX(0);opacity:0.55} 20%{transform:translateX(-2px)} 40%{transform:translateX(2px)} 60%{transform:translateX(-1px)} 80%{transform:translateX(1px)} }

/* Animation classes applied by JS */
.te-anim-send { animation-fill-mode: both !important; }
.te-anim-recv { animation-fill-mode: both !important; }
.te-anim-del { animation-fill-mode: forwards !important; pointer-events: none; }
.te-anim-pend { }

/* Mobile responsive */
@media (max-width: 600px) {
    .te-fullscreen { flex-direction: column; }
    .te-preview-side { flex: none; height: 35vh; min-height: 180px; }
    .te-controls-side {
        width: 100%; flex: 1; border-left: none; border-top: 1px solid var(--border);
    }
    .te-ctrl-body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 12px 14px;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .te-ctrl-header { padding: 10px 14px; }
    .te-ctrl-footer {
        padding: 10px 14px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
    }
    .te-ctrl-footer .theme-action-btn { padding: 10px 18px; font-size: 14px; }
    .te-name-input { font-size: 16px; padding: 10px 12px; }
    .te-style-select { font-size: 16px; padding: 10px 12px; }
    .te-color-grid { grid-template-columns: 1fr; gap: 4px; }
    .te-color-item { padding: 8px; }
    .te-color-item input[type="color"] { width: 40px; height: 40px; }
    .te-color-name { font-size: 13px; }
    .te-color-hex { font-size: 11px; }
    .te-randomize-btn { padding: 10px 12px; font-size: 13px; }
    .theme-editor-close { width: 36px; height: 36px; font-size: 20px; }
    .te-p-badge { top: 6px; right: 6px; font-size: 10px; padding: 3px 8px; }
    .te-p-sidebar { width: 35%; }
    .te-p-avatar { width: 20px; height: 20px; font-size: 8px; }
    .te-p-item { padding: 4px 6px; gap: 4px; }
    .te-p-bub { padding: 4px 6px; }
    .te-p-bub-text { font-size: 7px; }
    .te-p-bub-time { font-size: 6px; }
    .te-p-send { width: 14px; height: 14px; }
    .te-p-input { padding: 3px 6px; }
    .te-p-input-text { font-size: 7px; }
    .te-p-ln-name { font-size: 8px; }
    .te-p-ln-msg { font-size: 7px; }
    .te-p-ln-time { font-size: 6px; }
    .te-p-head-avatar { width: 16px; height: 16px; font-size: 7px; }
    .te-p-sb-head { padding: 6px; }
    .te-p-msgs { padding: 8px; gap: 5px; }
    .te-p-input-bar { padding: 6px 8px; }
    .te-p-chat-head { padding: 6px 10px; }
    .te-palette-row { grid-template-columns: repeat(4, 1fr); gap: 4px; }
    .te-palette-chip { padding: 5px 4px; }
    .te-chip-swatch { width: 10px; height: 10px; }
    .te-chip-label { font-size: 8px; }
    .te-group { margin-bottom: 12px; padding-bottom: 12px; }
    .te-shape-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
    .te-shape-select { font-size: 13px; padding: 8px; }
}

/* Tablet */
@media (min-width: 601px) and (max-width: 900px) {
    .te-controls-side { width: 320px; }
    .te-ctrl-body { padding: 16px 18px; }
    .te-ctrl-header { padding: 14px 18px; }
    .te-ctrl-footer { padding: 12px 18px; }
    .te-color-item input[type="color"] { width: 34px; height: 34px; }
    .te-name-input { font-size: 16px; }
    .te-style-select { font-size: 16px; }
}

/* Large desktop */
@media (min-width: 1440px) {
    .te-controls-side { width: 420px; }
    .te-preview-side { max-width: 960px; }
}

/* ============================================================
   SHAPE SYSTEM — Avatar, Bubble, Border, Density
   Applied via CSS variables + data attributes from custom themes
   ============================================================ */

/* Avatar shapes */
/* Avatar shape overrides — targets all avatar elements in the app */
[data-avatar-shape="circle"] .avatar,
[data-avatar-shape="circle"] .chat-item-avatar,
[data-avatar-shape="circle"] .chat-topbar-avatar,
[data-avatar-shape="circle"] .identity-avatar { border-radius: 50% !important; clip-path: none !important; }

[data-avatar-shape="rounded"] .avatar,
[data-avatar-shape="rounded"] .chat-item-avatar,
[data-avatar-shape="rounded"] .chat-topbar-avatar,
[data-avatar-shape="rounded"] .identity-avatar { border-radius: 30% !important; clip-path: none !important; }

[data-avatar-shape="squircle"] .avatar,
[data-avatar-shape="squircle"] .chat-item-avatar,
[data-avatar-shape="squircle"] .chat-topbar-avatar,
[data-avatar-shape="squircle"] .identity-avatar { border-radius: 40% !important; clip-path: none !important; }

[data-avatar-shape="hexagon"] .avatar,
[data-avatar-shape="hexagon"] .chat-item-avatar,
[data-avatar-shape="hexagon"] .chat-topbar-avatar,
[data-avatar-shape="hexagon"] .identity-avatar {
    border-radius: 0 !important;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
[data-avatar-shape="diamond"] .avatar,
[data-avatar-shape="diamond"] .chat-item-avatar,
[data-avatar-shape="diamond"] .chat-topbar-avatar,
[data-avatar-shape="diamond"] .identity-avatar {
    border-radius: 0 !important;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
[data-avatar-shape="octagon"] .avatar,
[data-avatar-shape="octagon"] .chat-item-avatar,
[data-avatar-shape="octagon"] .chat-topbar-avatar,
[data-avatar-shape="octagon"] .identity-avatar {
    border-radius: 0 !important;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
[data-avatar-shape="shield"] .avatar,
[data-avatar-shape="shield"] .chat-item-avatar,
[data-avatar-shape="shield"] .chat-topbar-avatar,
[data-avatar-shape="shield"] .identity-avatar {
    border-radius: 0 !important;
    clip-path: polygon(50% 0%, 100% 10%, 100% 60%, 75% 85%, 50% 100%, 25% 85%, 0% 60%, 0% 10%);
}
[data-avatar-shape="pentagon"] .avatar,
[data-avatar-shape="pentagon"] .chat-item-avatar,
[data-avatar-shape="pentagon"] .chat-topbar-avatar,
[data-avatar-shape="pentagon"] .identity-avatar {
    border-radius: 0 !important;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
[data-avatar-shape="drop"] .avatar,
[data-avatar-shape="drop"] .chat-item-avatar,
[data-avatar-shape="drop"] .chat-topbar-avatar,
[data-avatar-shape="drop"] .identity-avatar {
    border-radius: 0 !important;
    clip-path: polygon(50% 0%, 85% 35%, 85% 65%, 50% 100%, 15% 65%, 15% 35%);
}
[data-avatar-shape="star"] .avatar,
[data-avatar-shape="star"] .chat-item-avatar,
[data-avatar-shape="star"] .chat-topbar-avatar,
[data-avatar-shape="star"] .identity-avatar {
    border-radius: 0 !important;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
[data-avatar-shape="heart"] .avatar,
[data-avatar-shape="heart"] .chat-item-avatar,
[data-avatar-shape="heart"] .chat-topbar-avatar,
[data-avatar-shape="heart"] .identity-avatar {
    border-radius: 0 !important;
    clip-path: polygon(50% 18%, 61% 5%, 75% 0%, 90% 5%, 100% 18%, 100% 35%, 85% 55%, 50% 90%, 15% 55%, 0% 35%, 0% 18%, 10% 5%, 25% 0%, 39% 5%);
}

/* Avatar fill styles */
[data-avatar-fill="gradient"] .avatar,
[data-avatar-fill="gradient"] .chat-item-avatar,
[data-avatar-fill="gradient"] .chat-topbar-avatar,
[data-avatar-fill="gradient"] .identity-avatar {
    background: linear-gradient(135deg, var(--primary-500), var(--accent)) !important;
    color: #fff !important;
}
[data-avatar-fill="outline"] .avatar,
[data-avatar-fill="outline"] .chat-item-avatar,
[data-avatar-fill="outline"] .chat-topbar-avatar,
[data-avatar-fill="outline"] .identity-avatar {
    background: transparent !important;
    border: 2px solid var(--primary-500) !important;
}
[data-avatar-fill="duotone"] .avatar,
[data-avatar-fill="duotone"] .chat-item-avatar,
[data-avatar-fill="duotone"] .chat-topbar-avatar,
[data-avatar-fill="duotone"] .identity-avatar {
    border: 2px solid var(--primary-glow) !important;
}

/* Bubble shape override via CSS variable */
.msg { border-radius: var(--bubble-radius, 14px); }
.msg-mine { border-bottom-right-radius: 3px; }
.msg-theirs, .msg:not(.msg-mine):not(.msg-system) { border-bottom-left-radius: 3px; }

/* Density overrides */
[data-density="compact"] .msg { padding: 6px 10px; }
[data-density="compact"] .chat-item { padding: 6px 10px; }
[data-density="compact"] .chat-messages { gap: 4px; }
[data-density="spacious"] .msg { padding: 12px 16px; }
[data-density="spacious"] .chat-item { padding: 14px 16px; }
[data-density="spacious"] .chat-messages { gap: 14px; }

/* ============================================================
   THEME EDITOR — 15 New Customization Features
   ============================================================ */

/* ---- 1. FONT FAMILY SELECTOR ---- */
[data-font="inter"] { --font-display: 'Inter', system-ui, sans-serif; }
[data-font="poppins"] { --font-display: 'Poppins', system-ui, sans-serif; }
[data-font="space-grotesk"] { --font-display: 'Space Grotesk', system-ui, sans-serif; }
[data-font="dm-sans"] { --font-display: 'DM Sans', system-ui, sans-serif; }
[data-font="jetbrains"] { --font-display: 'JetBrains Mono', monospace; }
[data-font="playfair"] { --font-display: 'Playfair Display', Georgia, serif; }
[data-font="system"] { --font-display: system-ui, -apple-system, sans-serif; }

/* ---- 2. FONT SIZE SCALE ---- */
[data-font-size="small"] { --text-base: 0.875rem; --text-sm: 0.75rem; --text-lg: 1rem; --text-xl: 1.125rem; }
[data-font-size="large"] { --text-base: 1.125rem; --text-sm: 1rem; --text-lg: 1.25rem; --text-xl: 1.375rem; }
[data-font-size="xlarge"] { --text-base: 1.25rem; --text-sm: 1.125rem; --text-lg: 1.375rem; --text-xl: 1.5rem; }
[data-font-size="small"] .msg { font-size: 13px; }
[data-font-size="large"] .msg { font-size: 16px; }
[data-font-size="xlarge"] .msg { font-size: 17px; }

/* ---- 4. ANIMATION SPEED ---- */
[data-anim-speed="fast"] { --transition: 0.12s ease-out; --transition-fast: 80ms ease-out; --transition-base: 120ms ease-out; --transition-slow: 180ms ease-in-out; }
[data-anim-speed="slow"] { --transition: 0.4s ease-out; --transition-fast: 250ms ease-out; --transition-base: 350ms ease-out; --transition-slow: 500ms ease-in-out; }

/* ---- 5. WALLPAPER OPACITY ---- */
.chat-messages[style*="--wp-opacity"] {
    position: relative;
}

/* ---- 9. CHAT BACKGROUND PATTERNS ---- */
[data-chat-pattern="dots"] .chat-messages {
    background-image: radial-gradient(circle, var(--border) 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
}
[data-chat-pattern="grid"] .chat-messages {
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
}
[data-chat-pattern="diagonal"] .chat-messages {
    background-image: repeating-linear-gradient(
        45deg, transparent, transparent 10px,
        var(--border-light) 10px, var(--border-light) 11px) !important;
    background-size: auto !important;
}
[data-chat-pattern="crosses"] .chat-messages {
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px) !important;
    background-size: 12px 12px !important;
    background-position: center center !important;
}
[data-chat-pattern="none"] .chat-messages {
    background-image: none !important;
}

/* ---- 10. CUSTOM SCROLLBAR COLOR ---- */
:root { --scrollbar-color: var(--border); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-color) !important; }
* { scrollbar-color: var(--scrollbar-color) transparent; }

/* ---- 12. CUSTOM ONLINE DOT COLOR ---- */
:root { --online-dot-color: var(--success); }
.online-dot.show { background: var(--online-dot-color) !important; box-shadow: 0 0 6px var(--online-dot-color) !important; }

/* ---- 13. TIMESTAMP COLOR ---- */
:root { --timestamp-color: var(--text-muted); }
.msg-time { color: var(--timestamp-color) !important; }

/* ---- 14. SHADOW INTENSITY ---- */
[data-shadow="none"] {
    --shadow-xs: none; --shadow-sm: none; --shadow-md: none;
    --shadow-lg: none; --shadow-xl: none; --shadow-2xl: none;
}
[data-shadow="subtle"] {
    --shadow-xs: 0 1px 1px rgba(0,0,0,0.06);
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --shadow-xl: 0 12px 32px rgba(0,0,0,0.14);
    --shadow-2xl: 0 16px 40px rgba(0,0,0,0.18);
}
[data-shadow="strong"] {
    --shadow-xs: 0 2px 4px rgba(0,0,0,0.25);
    --shadow-sm: 0 4px 12px rgba(0,0,0,0.35);
    --shadow-md: 0 12px 36px rgba(0,0,0,0.45);
    --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
    --shadow-xl: 0 30px 40px -5px rgba(0,0,0,0.5), 0 15px 15px rgba(0,0,0,0.25);
    --shadow-2xl: 0 35px 65px -12px rgba(0,0,0,0.65);
}

/* ---- 15. BLUR INTENSITY (Glass/Liquid styles) ---- */
[data-blur="light"] .style-glass { --glass-blur: 8px; }
[data-blur="heavy"] .style-glass { --glass-blur: 24px; }
[data-blur="extreme"] .style-glass { --glass-blur: 32px; }
[data-blur="light"] .style-liquid { --liquid-blur: 10px; }
[data-blur="heavy"] .style-liquid { --liquid-blur: 28px; }
[data-blur="extreme"] .style-liquid { --liquid-blur: 36px; }

/* ============================================================
   GOO ANIMATIONS — Organic blob effect for messages
   Uses SVG filter #goo-filter-msg
   ============================================================ */

/* Goo Send — blob expands into shape */
@keyframes gooSend {
    0% { transform: scale(0.3) translateY(20px); opacity: 0; filter: url(#goo-filter-msg); border-radius: 50%; }
    40% { transform: scale(1.15) translateY(-5px); opacity: 1; filter: url(#goo-filter-msg); border-radius: 50%; }
    70% { transform: scale(0.95) translateY(2px); filter: url(#goo-filter-msg); }
    85% { transform: scale(1.02); filter: none; }
    100% { transform: scale(1) translateY(0); opacity: 1; filter: none; border-radius: inherit; }
}
.anim-goo-send {
    animation: gooSend 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Goo Receive — drips/oozes from above */
@keyframes gooRecv {
    0% { transform: scale(0.2) translateY(-30px); opacity: 0; filter: url(#goo-filter-msg); border-radius: 50%; }
    30% { transform: scale(0.8) translateY(10px); opacity: 1; filter: url(#goo-filter-msg); border-radius: 40%; }
    50% { transform: scale(1.1) translateY(-3px); filter: url(#goo-filter-msg); border-radius: 30%; }
    75% { transform: scale(0.97) translateY(1px); filter: url(#goo-filter-msg); }
    90% { transform: scale(1.01); filter: none; }
    100% { transform: scale(1) translateY(0); opacity: 1; filter: none; border-radius: inherit; }
}
.anim-goo-recv {
    animation: gooRecv 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Goo Delete — melts and dissolves */
@keyframes gooDel {
    0% { transform: scale(1); opacity: 1; filter: none; }
    20% { transform: scale(1.05) translateY(-3px); filter: url(#goo-filter-msg); }
    50% { transform: scale(0.8) translateY(15px); opacity: 0.7; filter: url(#goo-filter-msg); border-radius: 40%; }
    80% { transform: scale(0.3) translateY(30px); opacity: 0.3; filter: url(#goo-filter-msg); border-radius: 50%; }
    100% { transform: scale(0) translateY(40px); opacity: 0; filter: url(#goo-filter-msg); border-radius: 50%; }
}
.anim-goo-del {
    animation: gooDel 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

/* Goo Pending — organic breathing pulse */
@keyframes gooPend {
    0%, 100% { transform: scale(1); filter: none; border-radius: inherit; }
    25% { transform: scale(1.03) rotate(0.5deg); filter: url(#goo-filter-msg); }
    50% { transform: scale(0.97) rotate(-0.5deg); filter: url(#goo-filter-msg); border-radius: 30%; }
    75% { transform: scale(1.02) rotate(0.3deg); filter: url(#goo-filter-msg); }
}
.anim-goo-pend {
    animation: gooPend 2s ease-in-out infinite;
}