/*
* Темы. Три состояния: «авто» (ничего не проставлено, решает система),
* data-theme="light" и data-theme="dark" — выбор пользователя, он же в localStorage.
* Светлая палитра живёт на голом :root, чтобы при любом сбое страница осталась читаемой.
*/
:root {
--bg: #f4f5f7;
--surface: #ffffff;
--surface-2: #f8f9fb;
--border: #e3e6ea;
--text: #1c2430;
--text-dim: #6b7683;
--accent: #2f6fed;
--accent-soft: #e8f0ff;
--danger: #d64545;
--danger-soft: #fdeaea;
--ok: #2e9e5b;
--warn: #c98a14;
--bubble-in: #ffffff;
--bubble-out: #e8f0ff;
--backdrop: rgba(15, 20, 28, .45);
--radius: 10px;
--shadow: 0 1px 2px rgba(20, 30, 45, .06), 0 6px 20px rgba(20, 30, 45, .05);
/* стрелка выпадающих списков: в data-URI цвет не наследуется, поэтому по одной на тему */
--select-arrow: url("data:image/svg+xml;utf8,");
--scroll-rgb: 60 70 85; --scroll-thumb-a: .28; --scroll-thumb-hover-a: .45; --scroll-track-a: .09;
color-scheme: light;
font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* системная тёмная — пока пользователь не выбрал светлую явно */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #15181d;
--surface: #1c2026;
--surface-2: #22272e;
--border: #2c333c;
--text: #e6eaf0;
--text-dim: #9aa5b1;
--accent: #5b8dff;
--accent-soft: #24314d;
--danger: #ff6b6b;
--danger-soft: #3a2226;
--ok: #4ec27c;
--warn: #e0a83a;
--bubble-in: #232931;
--bubble-out: #2a3a57;
--backdrop: rgba(0, 0, 0, .6);
--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
--select-arrow: url("data:image/svg+xml;utf8,");
--scroll-rgb: 154 165 177; --scroll-thumb-a: .35; --scroll-thumb-hover-a: .55; --scroll-track-a: .10;
color-scheme: dark;
}
}
/* явно выбранная тёмная — перекрывает системную светлую */
:root[data-theme="dark"] {
--bg: #15181d;
--surface: #1c2026;
--surface-2: #22272e;
--border: #2c333c;
--text: #e6eaf0;
--text-dim: #9aa5b1;
--accent: #5b8dff;
--accent-soft: #24314d;
--danger: #ff6b6b;
--danger-soft: #3a2226;
--ok: #4ec27c;
--warn: #e0a83a;
--bubble-in: #232931;
--bubble-out: #2a3a57;
--backdrop: rgba(0, 0, 0, .6);
--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
--select-arrow: url("data:image/svg+xml;utf8,");
--scroll-rgb: 154 165 177; --scroll-thumb-a: .35; --scroll-thumb-hover-a: .55; --scroll-track-a: .10;
color-scheme: dark;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-size: 14px;
line-height: 1.45;
height: 100vh;
overflow-x: auto;
overflow-y: hidden;
}
.hidden { display: none !important; }
/* ── Полосы прокрутки ────────────────────────────────────────────────────
Без стрелок, 10px, полупрозрачные: серые днём, чёрные ночью. Место под полосу
зарезервировано всегда, видимость задаёт класс scroll-visible (ставит app.js:
курсор вошёл в область или идёт прокрутка; через секунду снимает; на самой
полосе — держит). Псевдоэлементы скролла не анимируются, поэтому затухание
идёт через зарегистрированное свойство --sb (0…1), которое умеет transition.
Chrome/Edge/Safari — ::-webkit-scrollbar; Firefox — стандартные свойства
(вместе нельзя: Chrome 121+ при scrollbar-color игнорирует webkit-стили). */
@property --sb { syntax: ''; inherits: true; initial-value: 0; }
.sidebar__section, .list__items, .chat__messages, .settings__body, .contact, .menu--float {
--sb: 0; transition: --sb .4s ease;
}
.scroll-visible { --sb: 1; transition-duration: .15s; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-track { background: rgb(var(--scroll-rgb) / calc(var(--scroll-track-a) * var(--sb))); border-radius: 10px; }
::-webkit-scrollbar-thumb {
background: rgb(var(--scroll-rgb) / calc(var(--scroll-thumb-a) * var(--sb)));
border-radius: 10px;
}
.scroll-visible::-webkit-scrollbar-thumb:hover { background-color: rgb(var(--scroll-rgb) / var(--scroll-thumb-hover-a)); }
@supports not selector(::-webkit-scrollbar) {
* {
scrollbar-width: thin;
scrollbar-color: rgb(var(--scroll-rgb) / calc(var(--scroll-thumb-a) * var(--sb)))
rgb(var(--scroll-rgb) / calc(var(--scroll-track-a) * var(--sb)));
}
}
button, input, textarea, select { font: inherit; color: inherit; }
/* ── Кнопки и поля ───────────────────────────────────────────────────── */
.btn {
border: 1px solid var(--border);
background: var(--surface);
border-radius: 8px;
padding: 7px 14px;
cursor: pointer;
transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--surface-2); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { filter: brightness(1.06); background: var(--accent); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--text-dim); padding: 5px 8px; }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }
.btn--danger { color: var(--danger); }
.btn:disabled { opacity: .5; cursor: default; }
/* ── Иконки ──────────────────────────────────────────────────────────────
Один штриховой набор вместо эмодзи: размер задаётся в em, поэтому иконка
растёт вместе с текстом рядом, а цвет наследуется через currentColor. */
.icon {
width: 1.25em; height: 1.25em; flex: none;
fill: none; stroke: currentColor;
stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
vertical-align: -0.22em;
}
.icon--inline { width: 1em; height: 1em; opacity: .75; }
/* клик по значку должен считаться кликом по кнопке, а не по самому