/* ============================================
   SMARTMAP THEME — Design Tokens v2 (Redesign)
   ============================================
   
   Single Source of Truth для всех CSS переменных.
   
   Redesign: Dark UI System
   - Professional dark theme с четкой иерархией поверхностей
   - Карта остаётся светлой, UI панели обрамляют её
   - Accent: синий #0A84FF (iOS blue)
   
   Структура:
   1. Colors — цветовая палитра
   2. Surfaces — иерархия поверхностей
   3. Typography — шрифты и текст
   4. Spacing — отступы
   5. Borders — границы и радиусы
   6. Shadows — тени
   7. Transitions — анимации
   8. Z-index — слои
   9. Sizes — размеры компонентов
   ============================================ */

:root {
    /* ==========================================
       1. COLORS — Цветовая палитра
       ========================================== */

    /* --- Base Dark Palette --- */
    --color-dark-950: #0a0c10;
    --color-dark-900: #111318;
    --color-dark-850: #161920;
    --color-dark-800: #1c1f28;
    --color-dark-700: #252932;
    --color-dark-600: #2e333e;
    --color-dark-500: #3a404d;
    --color-dark-400: #4a5163;
    --color-dark-300: #5a657c;

    /* --- Light Grays (for text) --- */
    --color-gray-100: #f0f2f5;
    --color-gray-200: #e4e7ec;
    --color-gray-300: #d0d5dd;
    --color-gray-400: #b6bac4;
    --color-gray-500: #98a2b3;
    --color-gray-600: #667085;

    /* --- Accent Colors (iOS Blue) --- */
    --color-blue-500: #0A84FF;
    --color-blue-400: #3d9dff;
    --color-blue-300: #70b6ff;
    --color-blue-600: #0066cc;
    --color-blue-700: #004d99;

    /* --- Semantic Colors --- */
    --color-success: #30d158;
    --color-success-muted: rgba(48, 209, 88, 0.15);
    --color-warning: #ff9f0a;
    --color-warning-muted: rgba(255, 159, 10, 0.35);
    --color-danger: #ff453a;
    --color-danger-muted: rgba(255, 69, 58, 0.15);
    --color-info: #64d2ff;
    --color-info-muted: rgba(100, 210, 255, 0.15);

    /* --- iOS System Colors --- */
    --ios-fill-primary: rgba(120, 120, 128, 0.12);
    --ios-fill-secondary: rgba(120, 120, 128, 0.24);
    --ios-fill-tertiary: rgba(118, 118, 128, 0.36);
    --ios-separator: rgba(60, 60, 67, 0.36);
    --ios-system-gray: rgba(142, 142, 147, 1);
    --ios-blue-gradient: linear-gradient(135deg, #007AFF 0%, #5856D6 100%);
    --ios-red-gradient: linear-gradient(135deg, #FF3B30 0%, #FF2D55 100%);

    /* --- Dark panels with slight transparency --- */
    --glass-bg: rgba(42, 42, 46, 0.85);
    --glass-bg-light: rgba(52, 52, 58, 0.82);
    --glass-bg-dark: rgba(32, 32, 36, 0.88);
    --glass-blur: 0;
    --glass-saturate: 100%;
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-subtle: rgba(255, 255, 255, 0.05);
    --glass-highlight: rgba(255, 255, 255, 0.05);
    --glass-highlight-subtle: rgba(255, 255, 255, 0.03);
    --glass-shadow-inner: none;
    --glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);

    /* --- Content backgrounds (solid for readability) --- */
    --content-bg: rgba(55, 55, 62, 0.95);
    --content-bg-light: rgba(60, 60, 68, 0.95);
    --content-bg-muted: rgba(50, 50, 58, 0.92);
    --content-bg-subtle: rgba(50, 50, 58, 0.85);

    /* --- White Alpha (for dark backgrounds) --- */
    --white-alpha-5: rgba(255, 255, 255, 0.05);
    --white-alpha-8: rgba(255, 255, 255, 0.08);
    --white-alpha-10: rgba(255, 255, 255, 0.1);
    --white-alpha-12: rgba(255, 255, 255, 0.12);
    --white-alpha-15: rgba(255, 255, 255, 0.15);
    --white-alpha-20: rgba(255, 255, 255, 0.2);
    --white-alpha-50: rgba(255, 255, 255, 0.5);
    --white-alpha-60: rgba(255, 255, 255, 0.6);
    --white-alpha-70: rgba(255, 255, 255, 0.7);
    --white-alpha-85: rgba(255, 255, 255, 0.85);
    --white-alpha-90: rgba(255, 255, 255, 0.9);

    /* ==========================================
       2. SURFACES — Иерархия поверхностей
       ========================================== */

    /* Header: darkest, slightly glossy gradient */
    --bg-app: #111318;
    --bg-app-gradient: linear-gradient(180deg, #161920 0%, #111318 100%);

    /* Main panels (left/right sidebars) */
    --surface-1: #1c1f28;

    /* Cards inside panels */
    --surface-2: #252932;

    /* Raised elements: tool tiles, chat header, elevated cards */
    --surface-3: #2e333e;

    /* Extra elevated (modals, dropdowns) */
    --surface-elevated: #333842;

    /* Overlay/scrim for modals */
    --overlay-scrim: rgba(0, 0, 0, 0.45);
    --overlay-scrim-light: rgba(0, 0, 0, 0.25);

    /* --- Text Colors (high contrast on dark) --- */
    --text-primary: #ffffff;
    --text-secondary: #b6bac4;
    --text-muted: #5a657c;
    --text-disabled: #3a404d;
    --text-inverse: #111318;

    /* --- Accent --- */
    --accent: #0A84FF;
    --accent-hover: #3d9dff;
    --accent-active: #0066cc;
    --accent-muted: rgba(10, 132, 255, 0.15);
    --accent-contrast: #ffffff;
    --accent-gradient: linear-gradient(135deg, #0A84FF 0%, #0066cc 100%);

    /* --- Interactive surfaces --- */
    --surface-hover: rgba(255, 255, 255, 0.05);
    --surface-active: rgba(255, 255, 255, 0.08);
    --surface-selected: rgba(10, 132, 255, 0.15);

    /* --- Chip Colors (quick-area chips) --- */
    --chip-ring: #c084fc;
    --chip-ring-bg: rgba(192, 132, 252, 0.15);
    --chip-district: #34d399;
    --chip-district-bg: rgba(52, 211, 153, 0.15);
    --chip-metro: #ff6b6b;
    --chip-metro-bg: rgba(255, 107, 107, 0.15);
    --chip-poi-landmark: #fbbf24;
    --chip-poi-landmark-bg: rgba(251, 191, 36, 0.15);
    --chip-poi-university: var(--accent);
    --chip-poi-university-bg: var(--accent-muted);
    --chip-poi-park: #6ee7b7;
    --chip-poi-park-bg: rgba(110, 231, 183, 0.15);
    --chip-street: #fb923c;
    --chip-street-bg: rgba(251, 146, 60, 0.15);

    /* ==========================================
       3. TYPOGRAPHY — Шрифты
       ========================================== */

    --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

    /* Font sizes — Extended Scale for Mobile Consistency
       
       Usage Guide:
       - 2xs (10px): Compact badges, timestamps, price/m²
       - xs (11px):  Labels, metadata, compact tags
       - sm (12px):  Secondary text, descriptions, tags
       - md (13px):  Mobile card body, addresses
       - base (14px): Default body text
       - base-lg (15px): Mobile panel titles, emphasized text
       - lg (16px):  Section titles, buttons
       - xl (18px):  Major headers
       - 2xl+ :      Page/panel titles, hero text
    */
    --text-2xs: 10px;
    --text-xs: 11px;
    --text-sm: 12px;
    --text-md: 13px;
    --text-base: 14px;
    --text-base-lg: 15px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 22px;
    --text-3xl: 28px;
    --text-4xl: 36px;

    /* Font weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line heights */
    --leading-none: 1;
    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    /* Letter spacing */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;

    /* ==========================================
       4. SPACING — Отступы (4px base)
       ========================================== */

    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ==========================================
       5. BORDERS — Границы и радиусы
       ========================================== */

    /* Border colors (subtle, not bright) */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.15);
    --border-accent: rgba(10, 132, 255, 0.5);
    --border-danger: rgba(255, 69, 58, 0.5);

    /* Border radius */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-widget: 11px;
    /* Widgets: tool-tile, list-toggle-badge, wizard-panel */
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-3xl: 24px;
    --radius-pill: 9999px;
    --radius-full: 50%;

    /* ==========================================
       6. SHADOWS — Тени
       ========================================== */

    /* Subtle shadows for cards in panels */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);

    /* Medium shadows for elevated cards */
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);

    /* Strong shadows for floating elements (tools, chat) */
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.4);
    --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.5);

    /* Colored shadows */
    --shadow-accent: 0 4px 16px rgba(10, 132, 255, 0.3);
    --shadow-accent-lg: 0 8px 32px rgba(10, 132, 255, 0.35);
    --shadow-danger: 0 4px 16px rgba(255, 69, 58, 0.3);
    --shadow-success: 0 4px 16px rgba(48, 209, 88, 0.3);

    /* Panel shadows */
    --shadow-panel-left: 8px 0 32px rgba(0, 0, 0, 0.4);
    --shadow-panel-right: -8px 0 32px rgba(0, 0, 0, 0.4);
    --shadow-detail-card: -8px 0 32px rgba(0, 0, 0, 0.4);

    /* Inset shadows (for inputs) */
    --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.2);

    /* ==========================================
       7. TRANSITIONS — Анимации
       ========================================== */

    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-panel: cubic-bezier(0.32, 0.72, 0, 1);
    /* iOS-like spring */
    --ease-snap: cubic-bezier(0.4, 0, 0.2, 1);
    /* Material snap */

    --duration-fast: 100ms;
    --duration-normal: 150ms;
    --duration-slow: 250ms;
    --duration-panel: 300ms;
    --duration-panel-slide: 300ms;
    --duration-sheet-snap: 200ms;

    --transition-fast: var(--duration-fast) var(--ease-default);
    --transition-normal: var(--duration-normal) var(--ease-default);
    --transition-slow: var(--duration-slow) var(--ease-default);
    --transition-panel: var(--duration-panel) var(--ease-out);
    --transition-bounce: var(--duration-slow) var(--ease-bounce);

    /* ==========================================
       8. Z-INDEX — Слои
       ========================================== */

    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-fab: 1000;
    --z-header: 1100;
    --z-overlay: 1400;
    --z-sidebar: 1500;
    --z-detail-card: 1600;
    --z-house-detail-card: 1650;
    /* Карточка здания поверх деталки объявления */
    --z-toolbar-panel: 1700;
    /* Toolbar panels (filters, settings) */
    --z-toolbar: 1800;
    /* Toolbar buttons (always on top) */
    --z-chat: 2100;
    --z-control-panel-overlay: 2200;
    --z-control-panel: 2300;
    --z-wizard: 2400;
    --z-tooltip: 2500;
    --z-max: 9999;

    /* ==========================================
       9. SIZES — Размеры компонентов
       ========================================== */

    /* Header */
    --header-height: 56px;
    --header-height-mobile: 52px;

    /* Sidebar */
    --sidebar-width: 380px;
    --sidebar-width-tablet: 340px;

    /* Detail card */
    --detail-card-width: 387px;
    --detail-card-width-tablet: 360px;

    /* Toolbar */
    --toolbar-tile-height: 100px;
    --toolbar-tile-width: 110px;
    --toolbar-superprice-height: calc(var(--toolbar-tile-height) / 2);
    /* 50px — плашка Суперцена в 2 раза ниже tile */
    --toolbar-offset-top: var(--space-4);
    /* 16px */
    --toolbar-spacer-bottom: 3px;

    /* Toolbar spacer (пространство под toolbar для контента панелей).
       Без плашки — по умолчанию. С плашкой — body.toolbar-has-superprice (category=secondary или rent). */
    --toolbar-spacer-height: calc(var(--toolbar-offset-top) + var(--toolbar-tile-height) + var(--toolbar-spacer-bottom));
    /* без superprice: 16 + 100 + 3 = 119px */
    --toolbar-spacer-height-mobile: calc(var(--toolbar-tile-height) + var(--space-2));
    /* mobile без superprice: 100 + 8 = 108px */

    /* Wizard panel (под toolbar) */
    --wizard-panel-width: calc(3 * var(--toolbar-tile-width) + 2 * var(--space-3));
    /* = 354px */
    --wizard-panel-top: calc(var(--header-height) + var(--space-4) + var(--toolbar-tile-height) + var(--space-3));
    /* без superprice: 56 + 16 + 100 + 12 = 184px */
    --wizard-panel-top-mobile: calc(var(--header-height-mobile) + var(--space-3));

    /* Spacer — wizard свёрнут (правые панели ниже toolbar + wizard area) */
    --toolbar-spacer-height-collapsed: calc(
        var(--toolbar-offset-top) + var(--toolbar-tile-height) + var(--toolbar-spacer-bottom)
        + var(--toolbar-tile-height) + var(--space-3) + var(--space-3)
    );
    /* без superprice: 119 + 100 + 12 + 12 = 243px */

    /* List toggle badge */
    --list-badge-height: 100px;
    --list-badge-height-mobile: 80px;

    /* Sidebar header (отступ под badge) */
    --sidebar-header-min-height: calc(var(--list-badge-height) + var(--space-4) + var(--space-2));
    /* = 124px */
    --sidebar-header-min-height-mobile: calc(var(--list-badge-height-mobile) + var(--space-4) + var(--space-2));
    /* = 104px */

    /* FAB buttons */
    --fab-size: 44px;
    --fab-size-lg: 52px;

    /* Touch targets */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;

    /* Control panel */
    --control-panel-width: 440px;
    --control-panel-width-mobile: 100%;

    /* Info panel */
    --info-panel-width: 380px;
    --info-panel-width-collapsed: 260px;

    /* Input heights */
    --input-height-sm: 32px;
    --input-height-md: 40px;
    --input-height-lg: 48px;

    /* Bottom Sheet States (mobile) */
    --bottom-sheet-handle-height: 32px;
    --bottom-sheet-peek-height: 30vh;
    --bottom-sheet-half-height: 50vh;
    --bottom-sheet-full-height: 85vh;
    --bottom-sheet-collapsed-height: 0;

    /* Mobile spacing */
    --mobile-padding: 12px;
    --mobile-gap: 8px;

    /* Compact Mode (<400px) overrides */
    --header-height-compact: 48px;
    --toolbar-tile-size-compact: 32px;
    --chat-collapsed-height-compact: 44px;

    /* Mobile-specific z-index (переопределения для мобильных) */
    --z-backdrop-mobile: 150;
    --z-sidebar-mobile: 250;
    --z-wizard-mobile: 300;
    --z-filters-panel-mobile: 350;
    --z-detail-card-mobile: 1900;
    /* Above toolbar (1800) on mobile */
    --z-system-mobile: 500;
    --z-header-dropdown-mobile: 2550;
    /* Header dropdown above all panels, below tooltip (2500→2550 for dropdown) */

    /* ==========================================
       10. FOCUS — Доступность
       ========================================== */

    --focus-ring: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--accent);
    --focus-ring-inset: inset 0 0 0 2px var(--accent);

    /* ==========================================
       11. SAFE AREAS — iOS notch support
       ========================================== */

    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
}

/* ============================================
   COMPONENT TOKENS — Specific components
   ============================================ */

:root {
    /* --- Buttons --- */
    --btn-primary-bg: var(--accent);
    --btn-primary-bg-hover: var(--accent-hover);
    --btn-primary-bg-active: var(--accent-active);
    --btn-primary-text: var(--accent-contrast);
    --btn-primary-shadow: var(--shadow-accent);

    /* --- Magic (AI features) --- */
    --magic-gradient: linear-gradient(82.46deg, #FF0084 2.53%, #0A84FF 34.41%, #0A84FF 65.59%, #FF0084 97.47%);
    --brand-gradient: linear-gradient(45deg, #F704FE 0%, #24BCE3 100%);
    /* снизу слева (малиновый) → вверх вправо (бирюзовый); 45deg избегает бага с полосками в Chrome при градиентной обводке */
    --logo-gradient: linear-gradient(45deg, #CC76A2 0%, #007799 29%, #00C6FF 58%, #31FFFF 100%);
    /* снизу слева (розовый) → вверх вправо (голубой) */
    --magic-button-bg: var(--brand-gradient);
    --magic-button-bg-hover: var(--brand-gradient);
    --magic-shadow: none;
    --magic-shadow-hover: none;

    --btn-secondary-bg: var(--surface-3);
    --btn-secondary-bg-hover: var(--surface-elevated);
    --btn-secondary-text: var(--text-primary);
    --btn-secondary-border: var(--border-default);

    --btn-ghost-bg: transparent;
    --btn-ghost-bg-hover: var(--surface-hover);
    --btn-ghost-text: var(--text-secondary);

    /* --- Cards --- */
    --card-bg: var(--surface-2);
    --card-bg-hover: var(--surface-3);
    --card-border: var(--border-subtle);
    --card-border-hover: var(--border-default);
    --card-shadow: var(--shadow-xs);
    --card-shadow-hover: var(--shadow-sm);
    --card-radius: var(--radius-lg);

    /* --- Inputs --- */
    --input-bg: var(--surface-3);
    --input-bg-focus: var(--surface-elevated);
    --input-border: var(--border-default);
    --input-border-focus: var(--accent);
    --input-text: var(--text-primary);
    --input-placeholder: var(--text-secondary);
    --input-radius: var(--radius-md);

    /* --- Tags/Chips --- */
    --tag-bg: var(--surface-3);
    --tag-bg-hover: var(--surface-elevated);
    --tag-bg-active: var(--accent-muted);
    --tag-text: var(--text-secondary);
    --tag-text-active: var(--accent);
    --tag-border: var(--border-subtle);
    --tag-border-active: var(--border-accent);
    --tag-radius: var(--radius-pill);

    /* --- Tooltips --- */
    --tooltip-bg: var(--surface-elevated);
    --tooltip-text: var(--text-primary);
    --tooltip-shadow: var(--shadow-lg);
    --tooltip-radius: var(--radius-md);

    /* --- Chat Drawer --- */
    --chat-drawer-width: 420px;
    --chat-drawer-collapsed-height: 48px;
    --chat-drawer-peek-height: 180px;
    --chat-drawer-expanded-height: min(70vh, 600px);

    /* Chat chips */
    --chat-chip-bg: rgba(112, 112, 112, 0.87);
    --chat-chip-bg-hover: rgba(130, 130, 130, 0.9);
    --chat-chip-padding-x: 14px;
    --chat-chip-padding-y: 6px;
    --chat-chip-gap: 8px;

    /* Chat message cards */
    --chat-card-user-bg: rgba(235, 235, 245, 0.1);
    --chat-card-assistant-border: rgba(235, 235, 245, 0.2);
    --chat-card-radius: 16px;
    --chat-card-padding: 16px;

    /* Chat avatar */
    --chat-avatar-size: 40px;

    /* Chat wrapper (messages container) */
    --chat-wrapper-bg: rgba(40, 40, 40, 0.6);
    --chat-wrapper-border: rgba(255, 255, 255, 0.1);
    --chat-wrapper-radius: 16px;

    /* Chat scrollbar */
    --chat-scrollbar-thumb: rgba(255, 255, 255, 0.37);
    --chat-scrollbar-track: rgba(255, 255, 255, 0.15);
    --chat-scrollbar-width: 6px;
    --chat-scrollbar-gap: 6px;

    /* --- Wizard Welcome --- */
    --wizard-welcome-icon-size: 90px;
    --wizard-welcome-icon-radius: 20px;
    --wizard-welcome-glow-spread: 30px;
    --wizard-glow-purple: rgba(155, 89, 182, 0.4);
    --wizard-glow-pink: rgba(233, 30, 99, 0.3);
    --wizard-glow-cyan: rgba(0, 188, 212, 0.2);
}

/* ============================================
   TOOLBAR — С плашкой Суперцена/Новое (category=secondary или rent)
   body.toolbar-has-superprice устанавливается в toolbar.js
   ============================================ */

body.toolbar-has-superprice {
    --toolbar-spacer-height: calc(var(--toolbar-offset-top) + var(--toolbar-tile-height) + var(--space-3) + var(--toolbar-superprice-height) + var(--toolbar-spacer-bottom));
    /* = 16 + 100 + 12 + 50 + 3 = 181px */
    --toolbar-spacer-height-mobile: calc(var(--toolbar-tile-height) + var(--space-2) + var(--toolbar-superprice-height));
    --wizard-panel-top: calc(var(--header-height) + var(--space-4) + var(--toolbar-tile-height) + var(--space-3) + var(--toolbar-superprice-height) + var(--space-3));
    /* = 56 + 16 + 100 + 12 + 50 + 12 = 246px */
    --toolbar-spacer-height-collapsed: calc(
        var(--toolbar-offset-top) + var(--toolbar-tile-height) + var(--space-3) + var(--toolbar-superprice-height) + var(--toolbar-spacer-bottom)
        + var(--toolbar-tile-height) + var(--space-3) + var(--space-3)
    );
    /* 181 + 100 + 12 + 12 = 305px */
}

/* ============================================
   RESPONSIVE OVERRIDES
   ============================================ */

/* Mobile (≤767px) */
@media (max-width: 767px) {
    :root {
        /* Bottom Sheet recalculated with safe areas */
        --bottom-sheet-full-height: calc(100vh - 60px);
        --bottom-sheet-full-height: calc(100dvh - 60px);
    }
}

/* Compact Mode (≤320px) — only truly small screens */
@media (max-width: 320px) {
    :root {
        /* Chat compact sizes */
        --chat-drawer-width: 100%;
        --chat-avatar-size: 32px;
        --chat-card-padding: 10px;
        --chat-card-radius: 12px;
        --chat-drawer-collapsed-height: 44px;
        --chat-drawer-peek-height: 120px;

        /* Bottom Sheet compact */
        --bottom-sheet-full-height: calc(100vh - 56px);
        --bottom-sheet-full-height: calc(100dvh - 56px);
    }
}

/* Extra Small (≤280px) */
@media (max-width: 280px) {
    :root {
        --chat-avatar-size: 28px;
        --chat-card-padding: 8px;
        --bottom-sheet-full-height: calc(100vh - 48px);
        --bottom-sheet-full-height: calc(100dvh - 48px);
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Gradient text effect */
.gradient-text {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Backdrop blur */
.backdrop-blur {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.backdrop-blur-sm {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Focus visible */
.focus-visible:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Custom scrollbar (dark theme) */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--surface-3);
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--surface-elevated);
    background-clip: padding-box;
}

/* Thin scrollbar variant */
.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
}

/* Hide scrollbar but keep functionality */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* ============================================
   ANIMATION KEYFRAMES
   ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Animation utilities */
.animate-fade-in {
    animation: fadeIn var(--duration-normal) var(--ease-out);
}

.animate-slide-in-right {
    animation: slideInRight var(--duration-panel) var(--ease-out);
}

.animate-slide-in-left {
    animation: slideInLeft var(--duration-panel) var(--ease-out);
}

.animate-slide-in-up {
    animation: slideInUp var(--duration-slow) var(--ease-out);
}

.animate-scale-in {
    animation: scaleIn var(--duration-normal) var(--ease-bounce);
}

.animate-pulse {
    animation: pulse 2s var(--ease-default) infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}