/* static/css/base.css - общее для всех страниц: токены, шрифт, сброс, модалки, кнопки.
   Подключается первым, chat.css и login.css дополняют его своим.

   Форма углов - одно правило на весь сайт:
   кнопки и чипы - капсула (--radius-full), поля ввода и карточки - --radius-md,
   пузыри сообщений - --radius-lg, модалки - --radius-xl */

/* Onest - кириллический гротеск (OFL, см. static/fonts/OFL.txt). Свой файл, а не
   Google Fonts - сайт работает во внутренней сети. Кириллица и латиница отдельно:
   браузер качает только нужный набор символов */
@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/onest-cyrillic.fe2bd26ae82a.woff2") format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/onest-latin.3db826ed1c5d.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Один холодный серо-синий ряд, подкрашенный в тон фирменного синего */
    --bg: #f4f6f9;
    --surface: #ffffff;
    --surface-sunken: #eef1f6;
    --border: #e1e6ee;
    --border-strong: #c9d2de;
    --text: #1b2738;
    --text-muted: #5b6a7f;
    --accent: #425d84;
    --accent-hover: #354c6d;
    --accent-soft: #e6ecf4;
    --accent-contrast: #ffffff;
    /* Статусы - приглушенные, но читаемые текстом на белом (контраст не ниже 4.5:1) */
    --danger: #bb4259;
    --warning: #93661a;
    --success: #3a7f55;

    /* Тени подкрашены в тон текста, не черные */
    --shadow-sm: 0 1px 2px rgba(27, 39, 56, 0.05);
    --shadow-md: 0 1px 2px rgba(27, 39, 56, 0.04), 0 6px 20px -4px rgba(27, 39, 56, 0.08);
    --shadow-lg: 0 2px 6px rgba(27, 39, 56, 0.06), 0 24px 56px -12px rgba(27, 39, 56, 0.28);

    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 20px;
    --radius-full: 999px;

    --font: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Сильный ease-out - интерфейс откликается сразу, без "разгона" */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

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

body {
    font-family: var(--font);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

button, input, textarea {
    font-family: inherit;
}

/* Кольцо фокуса только для клавиатуры - мышью кликнули, рамка не нужна */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------- Модалки (<dialog>) ---------- */

.app-dialog {
    /* центрируем сами - наш `* { margin: 0 }` перебивает встроенный margin:auto у dialog */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 24px;
    width: min(360px, calc(100vw - 32px));
    max-height: calc(100vh - 32px); /* запас для браузеров без dvh */
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}

/* Появление - из чуть уменьшенного и прозрачного, от центра (модалка ни к чему
   не привязана). Закрытие мгновенное: закрывают часто, ждать нечего */
.app-dialog[open] {
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}

@starting-style {
    .app-dialog[open] {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.96);
    }
}

.app-dialog::backdrop {
    background: rgba(20, 29, 43, 0.42);
    backdrop-filter: blur(3px);
}

.app-dialog[open]::backdrop {
    transition: opacity 180ms ease;
}

@starting-style {
    .app-dialog[open]::backdrop {
        opacity: 0;
    }
}

.dialog-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 150ms ease, background-color 150ms ease;
}

.dialog-close svg { width: 16px; height: 16px; }

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.dialog-btn {
    min-height: 40px;
    padding: 0 18px;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 160ms var(--ease-out);
}

.dialog-btn-primary {
    background: var(--accent);
    color: var(--accent-contrast);
}

.dialog-btn-secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

.dialog-btn:disabled {
    background: var(--surface-sunken);
    color: var(--text-muted);
    border-color: transparent;
    cursor: not-allowed;
}

/* Нажатие чувствуется - кнопка чуть проседает */
.dialog-btn:active:not(:disabled) {
    transform: scale(0.97);
}

/* Hover только там, где есть мышь - на тач-экране он "залипает" после тапа */
@media (hover: hover) and (pointer: fine) {
    .dialog-close:hover { color: var(--text); background: var(--surface-sunken); }
    .dialog-btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
    .dialog-btn-secondary:hover:not(:disabled) { background: var(--surface-sunken); }
}

/* Меньше движения - убираем сдвиги и масштаб, оставляем только смену прозрачности */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
    }

    .app-dialog[open] {
        transition: opacity 120ms ease;
    }

    @starting-style {
        .app-dialog[open] {
            transform: translate(-50%, -50%);
        }
    }
}