/* Цвета, шрифт и общие размеры — переменные для всех страниц (чат, Verwaltung, вход).
   Тёмная тема только переопределяет переменные: data-theme="dark" на <html> (см. theme-init.js).
   Подключается ПЕРВЫМ, до остальных стилей. */

:root {
    color-scheme: light;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;

    --bg: #ffffff;              /* фон страницы чата */
    --surface: #ffffff;         /* поля, карточки, меню */
    --surface-2: #f8fafc;       /* боковые панели */
    --surface-3: #f0f2f5;       /* тихие подложки */
    --hover: #eef2f7;

    --text: #1e293b;
    --text-strong: #0f172a;
    --text-2: #475569;
    --muted: #64748b;
    --muted-2: #94a3b8;
    --link: #2563eb;

    --border: #e2e8f0;
    --border-strong: #cbd5e1;

    --accent: #2563eb;
    --accent-strong: #1d4ed8;
    --accent-soft: #dbeafe;
    --accent-ring: #93c5fd;
    --on-accent: #ffffff;

    --ok-text: #15803d;
    --ok-soft: #f0fdf4;
    --ok-line: #86efac;
    --warn: #f97316;
    --warn-text: #b45309;
    --warn-soft: #fff7ed;
    --warn-line: #fdba74;
    --danger: #dc2626;
    --danger-text: #b91c1c;
    --danger-soft: #fef2f2;
    --danger-line: #fca5a5;
    --highlight: #fde68a;

    --rail: #1e293b;
    --rail-tab: #334155;
    --rail-tab-hover: #475569;
    --toast: #222222;
    --toast-text: #ffffff;
    --shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
    --focus-ring: rgba(37, 99, 235, 0.25);

    --lane: #f1f5f9;            /* фон ленты сообщений */
    --bubble-in: #ffffff;       /* клиент: светлый пузырь */
    --bubble-in-text: #1e293b;
    --bubble-in-border: #e2e8f0;
    --bubble-out: #2563eb;      /* поддержка: синий */
    --bubble-out-colleague: #4f46e5;   /* коллеги: чуть фиолетовее синего — отличить от своих (только у нас, на платформы не уходит) */
    --bubble-out-text: #ffffff;
    --bubble-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    --note-bg: #fef9c3;          /* внутренние заметки — жёлтые */
    --note-border: #fde047;
    --note-text: #713f12;
    --note-meta: #a16207;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f172a;
    --surface: #1e293b;
    --surface-2: #172033;
    --surface-3: #0b1220;
    --hover: #273449;

    --text: #e2e8f0;
    --text-strong: #f8fafc;
    --text-2: #cbd5e1;
    --muted: #94a3b8;
    --muted-2: #64748b;
    --link: #93c5fd;

    --border: #334155;
    --border-strong: #3b4a61;

    --accent: #3b82f6;
    --accent-strong: #60a5fa;
    --accent-soft: #1e3a5f;
    --accent-ring: #1d4ed8;

    --ok-text: #4ade80;
    --ok-soft: #052e16;
    --ok-line: #166534;
    --warn-text: #fbbf24;
    --warn-soft: #431407;
    --warn-line: #9a3412;
    --danger-text: #f87171;
    --danger-soft: #450a0a;
    --danger-line: #7f1d1d;
    --highlight: #854d0e;

    --rail: #0b1220;
    --rail-tab: #1e293b;
    --rail-tab-hover: #273449;
    --toast: #e2e8f0;
    --toast-text: #0f172a;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    --focus-ring: rgba(59, 130, 246, 0.4);

    --lane: #0b1220;
    --bubble-in: #1e293b;
    --bubble-in-text: #e2e8f0;
    --bubble-in-border: #273449;
    --bubble-out: #1d4ed8;
    --bubble-out-colleague: #4338ca;
    --bubble-shadow: none;
    --note-bg: #3a2f0b;
    --note-border: #854d0e;
    --note-text: #fde68a;
    --note-meta: #ca8a04;
}

/* Общее для всех страниц: шрифт, цвет текста, поля ввода, ссылки, окна */
body {
    color: var(--text);
    font-family: var(--font);
}

input,
textarea,
select {
    background: var(--surface);
    color: var(--text);
}

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

input::placeholder,
textarea::placeholder {
    color: var(--muted);
}

a {
    color: var(--link);
}

dialog {
    background: var(--surface);
    color: var(--text);
}

mark {
    color: inherit;
}

code,
pre {
    font-family: var(--font-mono);
}

/* Фокус: у кнопок и ссылок — рамка, у полей — мягкое кольцо вместо двойной обводки */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
    box-shadow: none;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 2px solid var(--accent);
}

/* Плавная смена цвета у кнопок и ссылок */
button,
a {
    transition: background-color 0.12s, color 0.12s, border-color 0.12s, opacity 0.12s;
}

/* Тонкие полосы прокрутки */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

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

/* Кто попросил систему меньше анимаций — без них */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* Значки интерфейса (Lucide, пункт 53.2): линия цвета текста, размер — от шрифта */
.icon {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.2em;
}

.icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}