/* ============================================================
   TOKSY — Base styles

   Философия (в стиле Apple):
   - Clarity: чётко, понятно
   - Deference: контент важнее интерфейса
   - Depth: слои, размытие, тени
   - Consistency: единые отступы, радиусы, шрифты

   Структура:
   1. Reset
   2. Темы (light, dark, nord)
   3. Типографика (fluid)
   4. Базовые компоненты (avatar, badge)
   5. Адаптив (mobile → TV)
   ============================================================ */

/* ============================================================
   1. RESET
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    color-scheme: light dark;
}

body {
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    line-height: 1.47;
    font-family: var(--font-family);
    font-size: var(--fs-base);
    font-weight: 400;
    color: var(--text-primary);
    background: var(--bg-app);

    /* Сглаживание шрифтов */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
    font-variant-numeric: tabular-nums;

    /* Защита от «горизонтального сдвига» на мобильных */
    overscroll-behavior-x: none;
}

/* Отключаем выделение текста на UI-элементах */
button, a, .chat-item, .contact-item, .member-item, .tab-item {
    -webkit-user-select: none;
    user-select: none;
}

/* Отключаем outline везде, но возвращаем для клавиатуры/TV */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Плавная прокрутка */
html { scroll-behavior: smooth; }

/* Отключаем для тех, кому плохо от анимаций */
@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;
    }
}

/* ============================================================
   2. ТЕМЫ — переменные
   ============================================================ */

:root {
    /* ---------- Шрифты ---------- */
    --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text',
                   'Segoe UI', Roboto, 'Helvetica Neue', Arial,
                   'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji',
                   sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas,
                 'Liberation Mono', 'Courier New', monospace;

    /* ---------- Fluid-типографика ----------
       Используем clamp(min, предпочтительно, max).
       vw считаем от ширины окна.
    */
    --fs-xs:   clamp(11px, 0.2vw + 10px, 13px);   /* caption */
    --fs-sm:   clamp(12px, 0.3vw + 11px, 14px);   /* small */
    --fs-base: clamp(14px, 0.4vw + 12px, 17px);   /* body */
    --fs-md:   clamp(15px, 0.5vw + 13px, 18px);   /* subtitle */
    --fs-lg:   clamp(17px, 0.7vw + 14px, 22px);   /* title */
    --fs-xl:   clamp(20px, 1vw + 16px, 28px);     /* h2 */
    --fs-2xl:  clamp(24px, 1.4vw + 18px, 36px);   /* h1 */
    --fs-3xl:  clamp(30px, 2vw + 22px, 48px);     /* display */

    --fs-tabbar-label:   clamp(9px, 0.2vw + 8px, 11px);
    --fs-chat-name:      clamp(13px, 0.3vw + 12px, 16px);
    --fs-chat-preview:   clamp(12px, 0.3vw + 11px, 15px);
    --fs-msg:            clamp(14px, 0.4vw + 12px, 17px);
    --fs-msg-meta:       clamp(10px, 0.15vw + 9px, 12px);

    /* ---------- Fluid-отступы ---------- */
    --sp-3xs:  clamp(2px,  0.1vw + 1px,  4px);
    --sp-2xs:  clamp(4px,  0.15vw + 3px, 6px);
    --sp-xs:   clamp(6px,  0.2vw + 4px,  10px);
    --sp-sm:   clamp(8px,  0.3vw + 6px,  14px);
    --sp-md:   clamp(12px, 0.5vw + 8px,  20px);
    --sp-lg:   clamp(16px, 0.7vw + 12px, 28px);
    --sp-xl:   clamp(24px, 1vw + 16px,  40px);
    --sp-2xl:  clamp(32px, 1.5vw + 20px, 56px);

    /* ---------- Радиусы ---------- */
    --radius-xs:   6px;
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-2xl:  24px;
    --radius-3xl:  28px;
    --radius-full: 999px;

    /* ---------- Тени (3 уровня) ---------- */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06),
                 0 0 0 0.5px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08),
                 0 0 0 0.5px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15),
                 0 0 0 0.5px rgba(0, 0, 0, 0.04);
    --shadow-inset: inset 0 0 0 1px var(--separator);

    /* ---------- Анимации ---------- */
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast:    0.15s;
    --dur-base:    0.25s;
    --dur-slow:    0.4s;
}

/* ============================================================
   ТЕМА 1: LIGHT (по умолчанию)
   ============================================================ */

:root,
.theme-light,
[data-theme="light"] {
    color-scheme: light;

    /* Фоны */
    --bg-app:          #ffffff;
    --bg-sidebar:      #f5f5f7;
    --bg-sidebar-hover:#ebebef;
    --bg-sidebar-active:#e5e5ea;
    --bg-chat:         #ffffff;
    --bg-input:        #f2f2f7;
    --bg-input-hover:  #e8e8ed;
    --bg-bubble-in:    #f2f2f7;
    --bg-bubble-out:   #007aff;
    --bg-menu:         #fafafa;
    --bg-card:         #ffffff;
    --bg-overlay:      rgba(0, 0, 0, 0.45);

    /* Текст */
    --text-primary:    #1d1d1f;
    --text-secondary:  #6e6e73;
    --text-tertiary:   #8e8e93;
    --text-inverse:    #ffffff;
    --text-link:       #007aff;

    /* Акценты */
    --blue:            #007aff;
    --blue-hover:      #0066d6;
    --blue-soft:       rgba(0, 122, 255, 0.12);

    --green:           #34c759;
    --green-soft:      rgba(52, 199, 89, 0.12);

    --red:             #ff3b30;
    --red-soft:        rgba(255, 59, 48, 0.12);

    --orange:          #ff9500;
    --orange-soft:     rgba(255, 149, 0, 0.12);

    --purple:          #af52de;
    --purple-soft:     rgba(175, 82, 222, 0.12);

    --pink:            #ff2d55;
    --pink-soft:       rgba(255, 45, 85, 0.12);

    /* Градиенты */
    --grad-blue:   linear-gradient(135deg, #5ac8fa, #007aff);
    --grad-purple: linear-gradient(135deg, #bf5af2, #af52de);
    --grad-green:  linear-gradient(135deg, #a2e876, #34c759);
    --grad-orange: linear-gradient(135deg, #ffcc00, #ff9500);
    --grad-pink:   linear-gradient(135deg, #ff6482, #ff2d55);
    --grad-gray:   linear-gradient(135deg, #aeaeb2, #8e8e93);

    /* Разделители и границы */
    --separator:      rgba(60, 60, 67, 0.08);
    --separator-med:  rgba(60, 60, 67, 0.12);
    --border:         rgba(60, 60, 67, 0.16);

    /* Стекло */
    --glass-bg:       rgba(255, 255, 255, 0.82);
    --glass-bg-solid: rgba(255, 255, 255, 0.92);
    --glass-border:   rgba(255, 255, 255, 0.6);
    --header-bg:      rgba(255, 255, 255, 0.85);
    --tabbar-bg:      rgba(255, 255, 255, 0.92);
    --sheet-bg:       #ffffff;

    /* Бренд (алиасы) */
    --brand:        var(--blue);
    --brand-hover:  var(--blue-hover);
}

/* ============================================================
   ТЕМА 2: DARK (iPhone / macOS)
   ============================================================ */

.theme-dark,
[data-theme="dark"] {
    color-scheme: dark;

    --bg-app:          #000000;
    --bg-sidebar:      #0a0a0a;
    --bg-sidebar-hover:#1a1a1a;
    --bg-sidebar-active:#242424;
    --bg-chat:         #000000;
    --bg-input:        #1c1c1e;
    --bg-input-hover:  #2c2c2e;
    --bg-bubble-in:    #1c1c1e;
    --bg-bubble-out:   #0a84ff;
    --bg-menu:         #0a0a0a;
    --bg-card:         #141416;
    --bg-overlay:      rgba(0, 0, 0, 0.7);

    --text-primary:    #f5f5f7;
    --text-secondary:  #a0a0a5;
    --text-tertiary:   #7a7a80;
    --text-inverse:    #ffffff;
    --text-link:       #4c9aff;

    --blue:            #0a84ff;
    --blue-hover:      #0a74e0;
    --blue-soft:       rgba(10, 132, 255, 0.18);

    --green:           #30d158;
    --green-soft:      rgba(48, 209, 88, 0.18);

    --red:             #ff453a;
    --red-soft:        rgba(255, 69, 58, 0.18);

    --orange:          #ff9f0a;
    --orange-soft:     rgba(255, 159, 10, 0.18);

    --purple:          #bf5af2;
    --purple-soft:     rgba(191, 90, 242, 0.18);

    --pink:            #ff375f;
    --pink-soft:       rgba(255, 55, 95, 0.18);

    --grad-blue:   linear-gradient(135deg, #0a84ff, #5ac8fa);
    --grad-purple: linear-gradient(135deg, #bf5af2, #9a3fc7);
    --grad-green:  linear-gradient(135deg, #30d158, #1fa844);
    --grad-orange: linear-gradient(135deg, #ff9f0a, #d87f00);
    --grad-pink:   linear-gradient(135deg, #ff375f, #d02548);
    --grad-gray:   linear-gradient(135deg, #48484a, #2c2c2e);

    --separator:      rgba(255, 255, 255, 0.08);
    --separator-med:  rgba(255, 255, 255, 0.12);
    --border:         rgba(255, 255, 255, 0.16);

    --glass-bg:       rgba(28, 28, 30, 0.72);
    --glass-bg-solid: rgba(28, 28, 30, 0.92);
    --glass-border:   rgba(255, 255, 255, 0.12);
    --header-bg:      rgba(0, 0, 0, 0.75);
    --tabbar-bg:      rgba(10, 10, 10, 0.92);
    --sheet-bg:       #1c1c1e;

    --brand:        var(--blue);
    --brand-hover:  var(--blue-hover);

    /* Пересчитываем тени (в тёмной теме они почти невидимы) */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4),
                 0 0 0 0.5px rgba(255, 255, 255, 0.05);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5),
                 0 0 0 0.5px rgba(255, 255, 255, 0.06);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6),
                 0 0 0 0.5px rgba(255, 255, 255, 0.08);
}

/* ============================================================
   ТЕМА 3: NORD (дополнительная, холодная)
   ============================================================ */

.theme-nord {
    color-scheme: light;

    --bg-app:          #eceff4;
    --bg-sidebar:      #e5e9f0;
    --bg-sidebar-hover:#d8dee9;
    --bg-sidebar-active:#cbd3e0;
    --bg-chat:         #eceff4;
    --bg-input:        #e5e9f0;
    --bg-input-hover:  #d8dee9;
    --bg-bubble-in:    #d8dee9;
    --bg-bubble-out:   #5e81ac;
    --bg-menu:         #e5e9f0;
    --bg-card:         #ffffff;
    --bg-overlay:      rgba(46, 52, 64, 0.45);

    --text-primary:    #2e3440;
    --text-secondary:  #4c566a;
    --text-tertiary:   #7a8599;
    --text-inverse:    #ffffff;
    --text-link:       #5e81ac;

    --blue:            #5e81ac;
    --blue-hover:      #4c6f99;
    --blue-soft:       rgba(94, 129, 172, 0.15);

    --green:           #a3be8c;
    --green-soft:      rgba(163, 190, 140, 0.2);

    --red:             #bf616a;
    --red-soft:        rgba(191, 97, 106, 0.18);

    --orange:          #d08770;
    --orange-soft:     rgba(208, 135, 112, 0.18);

    --purple:          #b48ead;
    --purple-soft:     rgba(180, 142, 173, 0.18);

    --pink:            #bf616a;
    --pink-soft:       rgba(191, 97, 106, 0.18);

    --grad-blue:   linear-gradient(135deg, #81a1c1, #5e81ac);
    --grad-purple: linear-gradient(135deg, #b48ead, #8f6b8f);
    --grad-green:  linear-gradient(135deg, #a3be8c, #7fa068);
    --grad-orange: linear-gradient(135deg, #ebcb8b, #d08770);
    --grad-pink:   linear-gradient(135deg, #d08770, #bf616a);
    --grad-gray:   linear-gradient(135deg, #a8b2c1, #7a8599);

    --separator:      rgba(46, 52, 64, 0.08);
    --separator-med:  rgba(46, 52, 64, 0.12);
    --border:         rgba(46, 52, 64, 0.16);

    --glass-bg:       rgba(236, 239, 244, 0.85);
    --glass-bg-solid: rgba(236, 239, 244, 0.95);
    --glass-border:   rgba(255, 255, 255, 0.7);
    --header-bg:      rgba(236, 239, 244, 0.9);
    --tabbar-bg:      rgba(236, 239, 244, 0.94);
    --sheet-bg:       #eceff4;

    --brand:        var(--blue);
    --brand-hover:  var(--blue-hover);
}

/* ============================================================
   3. БАЗОВЫЕ ЭЛЕМЕНТЫ
   ============================================================ */

button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

a {
    color: var(--text-link);
    text-decoration: none;
}

a:hover { text-decoration: underline; }

img, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.hidden { display: none !important; }

/* ============================================================
   СКРОЛЛБАРЫ (WebKit + Firefox)
   ============================================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(120, 120, 128, 0.3);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(120, 120, 128, 0.5);
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 120, 128, 0.3) transparent;
}

/* ============================================================
   4. АВАТАРЫ
   ============================================================ */

.avatar {
    position: relative;
    width: var(--avatar-size, 46px);
    height: var(--avatar-size, 46px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 600;
    font-size: calc(var(--avatar-size, 46px) * 0.38);
    color: #fff;
    letter-spacing: -0.02em;
    background: var(--grad-blue);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    user-select: none;
}

.avatar.small { --avatar-size: 38px; }
.avatar.large { --avatar-size: 64px; }
.avatar.xlarge { --avatar-size: 96px; }

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-online  { background: var(--grad-blue);   }
.avatar-group   { background: var(--grad-purple); }
.avatar-channel { background: var(--grad-pink);   }
.avatar-saved   { background: var(--grad-orange); }
.avatar-self    { background: var(--grad-green);  }

.gradient-blue   { background: var(--grad-blue);   }
.gradient-purple { background: var(--grad-purple); }
.gradient-green  { background: var(--grad-green);  }
.gradient-orange { background: var(--grad-orange); }
.gradient-pink   { background: var(--grad-pink);   }
.gradient-gray   { background: var(--grad-gray);   }

.status-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: calc(var(--avatar-size, 46px) * 0.26);
    height: calc(var(--avatar-size, 46px) * 0.26);
    min-width: 10px;
    min-height: 10px;
    border-radius: 50%;
    background: var(--green);
    border: 2px solid var(--bg-sidebar);
    z-index: 1;
}

.verified-icon {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    flex-shrink: 0;
}

/* ============================================================
   5. ЗАГРУЗЧИК
   ============================================================ */

.loader {
    width: 30px;
    height: 30px;
    border: 3px solid var(--separator-med);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .loader { animation-duration: 3s; }
}

/* ============================================================
   6. АДАПТИВ: iPhone (узкие экраны, 320-480px)
   ============================================================ */

@media (max-width: 480px) {
    :root {
        --avatar-size: 44px;
    }
    .avatar.small  { --avatar-size: 36px; }
    .avatar.large  { --avatar-size: 60px; }
    .avatar.xlarge { --avatar-size: 88px; }
}

/* ============================================================
   7. АДАПТИВ: iPad и планшеты (768-1024px)
   ============================================================ */

@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        --avatar-size: 48px;
    }
    .avatar.small  { --avatar-size: 40px; }
    .avatar.large  { --avatar-size: 68px; }
    .avatar.xlarge { --avatar-size: 104px; }
}

/* ============================================================
   8. АДАПТИВ: Большие мониторы и iMac (1680-1919px)
   ============================================================ */

@media (min-width: 1680px) and (max-width: 1919px) {
    :root {
        --avatar-size: 52px;
    }
    .avatar.small  { --avatar-size: 42px; }
    .avatar.large  { --avatar-size: 72px; }
    .avatar.xlarge { --avatar-size: 112px; }
}

/* ============================================================
   9. АДАПТИВ: 4K и Apple TV / Smart TV (1920px+)
   ============================================================ */

@media (min-width: 1920px) {
    :root {
        --avatar-size: 56px;

        /* На ТВ все размеры на 20% больше */
        --fs-base: clamp(17px, 0.6vw + 14px, 22px);
        --fs-lg:   clamp(20px, 0.8vw + 16px, 26px);
        --fs-xl:   clamp(24px, 1.2vw + 18px, 34px);
        --fs-2xl:  clamp(30px, 1.6vw + 20px, 42px);

        --sp-md: clamp(14px, 0.8vw + 10px, 24px);
        --sp-lg: clamp(20px, 1vw + 14px, 32px);
        --sp-xl: clamp(28px, 1.4vw + 18px, 48px);
    }

    .avatar.small  { --avatar-size: 46px; }
    .avatar.large  { --avatar-size: 80px; }
    .avatar.xlarge { --avatar-size: 128px; }

    /* Фокус для пультов / TV-навигации */
    @media (hover: none) {
        button:focus-visible,
        a:focus-visible,
        .chat-item:focus-visible,
        .contact-item:focus-visible,
        .member-item:focus-visible {
            outline: 3px solid var(--blue);
            outline-offset: 4px;
            transform: scale(1.02);
            transition: transform var(--dur-fast) var(--ease-spring);
        }
    }
}

/* ============================================================
   10. SAFE AREA — вырезы (iPhone с чёлкой / Dynamic Island)
   ============================================================ */

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

/* ============================================================
   11. PWA / standalone-режим
   ============================================================ */

@media (display-mode: standalone) {
    /* Скрываем «установить» в standalone */
    #pwa-install-banner { display: none !important; }

    /* На iPhone в standalone нет домашней полоски → уменьшаем safe area */
    html {
        --safe-bottom: 0px;
    }
}

/* ============================================================
   12. TV / Android TV / Apple TV — большие экраны, пульт
   ============================================================ */

/* Устройства с пультом не имеют hover */
@media (hover: none) and (pointer: coarse) and (min-width: 1280px) {
    /* Курсор мыши не нужен */
    body { cursor: none; }

    /* Явные :focus-visible для пульта */
    :focus-visible {
        outline: 3px solid var(--blue);
        outline-offset: 4px;
    }
}

/* ============================================================
   13. Touch-устройства — увеличиваем тап-зоны
   ============================================================ */

@media (hover: none) {
    button,
    a,
    .tab-item,
    .mt-item {
        min-height: 44px;
        min-width: 44px;
    }

    /* Убираем hover-эффекты — они не работают на тач */
    .chat-item:hover,
    .contact-item:hover,
    .settings-item:hover {
        background: inherit;
    }
}

/* ============================================================
   14. Landscape-режим на телефонах (высота < 500px)
   ============================================================ */

@media (max-height: 500px) and (orientation: landscape) {
    :root {
        --fs-2xl: clamp(22px, 1.5vw + 16px, 30px);
    }

    .auth-card { padding: 24px 20px 20px; }
    .auth-logo { margin-bottom: 12px; }
    .logo-icon { width: 64px; height: 64px; margin-bottom: 8px; }
}

/* ============================================================
   15. Отпечаток для печати (на всякий)
   ============================================================ */

@media print {
    body {
        background: #fff !important;
        color: #000 !important;
    }
    .mobile-tabbar,
    .composer,
    .attach-menu,
    .chat-header-actions,
    .sidebar { display: none !important; }
}