/* ================= Палитры оформления (Настройки → Оформление) =================
   Палитра — цвета и фон чата; тёмная/светлая — отдельный выбор. Фоны нарисованы градиентами и узорами
   (лёгкие, чёткие на любом экране), только «Космос» использует фото туманности.
   Атрибуты: <html data-theme="dark|light" data-palette="cosmos|aurora|graphite|sunset">. */

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("../assets/fonts/golos-text-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("../assets/fonts/golos-text-latin-wght-normal.woff2") format("woff2-variations");
  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 {
  --acc-rgb: 139 108 246;
  --acc2-rgb: 108 82 224;
  --grad-a: #8d6ff5;
  --grad-b: #6c52e0;
  --acc-soft: #b9a8ff;
  --acc-tint: #efedff;
  --acc-tint-2: #ddd6ff;
  --glass-rgb: 14 16 38;
  --shade-rgb: 10 12 30;
  --rail-bg: #080a18;
  --toast-bg: #1c1f40;
  --chat-bg: linear-gradient(rgb(8 10 28 / .6), rgb(8 10 28 / .6)), url("../assets/chat-wallpaper-crab.jpg");
  --chat-bg-size: cover;
  --chat-bg-repeat: no-repeat;
}
:root[data-theme="light"] {
  --chat-bg: url("../assets/doodles-neutral.svg"), linear-gradient(#f7f8fc, #f1f2f8);
  --chat-bg-size: 360px 360px, cover;
  --chat-bg-repeat: repeat, no-repeat;
}

/* ---------- Аврора: глубокий синий, бирюза → индиго, полярное сияние ---------- */
:root[data-palette="aurora"] {
  --bg: #070b16;
  --surface: #0b1120;
  --surface-2: #121a2e;
  --surface-3: #1a2440;
  --text: #e6edfb;
  --muted: #8794b3;
  --accent: #38bdf8;
  --mine: #4f46e5;
  --theirs: rgb(12 18 34 / .88);
  --acc-rgb: 56 189 248;
  --acc2-rgb: 79 70 229;
  --grad-a: #0891b2;
  --grad-b: #4f46e5;
  --acc-soft: #7dd3fc;
  --acc-tint: #e0f2fe;
  --acc-tint-2: #bae6fd;
  --glass-rgb: 11 17 32;
  --shade-rgb: 6 10 22;
  --rail-bg: #050913;
  --toast-bg: #121a2e;
  --chat-bg:
    url("../assets/doodles-dark.svg"),
    radial-gradient(55% 45% at 12% 6%, rgb(34 211 238 / .22), transparent 70%),
    radial-gradient(50% 42% at 90% 16%, rgb(129 140 248 / .26), transparent 72%),
    radial-gradient(75% 55% at 65% 108%, rgb(45 212 191 / .16), transparent 70%),
    linear-gradient(180deg, #070b16, #0a1122);
  --chat-bg-size: 360px 360px, cover, cover, cover, cover;
  --chat-bg-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}
:root[data-theme="light"][data-palette="aurora"] {
  --bg: #f3f7fb;
  --surface: #ffffff;
  --surface-2: #edf2f8;
  --surface-3: #e2e9f2;
  --text: #0f172a;
  --muted: #64748b;
  --border: #dfe6ef;
  --accent: #0284c7;
  --mine: #4f46e5;
  --theirs: #ffffff;
  --acc-rgb: 14 165 233;
  --chat-bg: url("../assets/doodles-neutral.svg"),
    radial-gradient(55% 45% at 10% 4%, rgb(34 211 238 / .18), transparent 70%),
    radial-gradient(50% 42% at 92% 14%, rgb(129 140 248 / .18), transparent 72%),
    radial-gradient(75% 55% at 60% 108%, rgb(45 212 191 / .12), transparent 70%),
    linear-gradient(180deg, #f5f9fd, #eef3f9);
  --chat-bg-size: 360px 360px, cover, cover, cover, cover;
  --chat-bg-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

/* ---------- Графит: угольный, изумрудный акцент, точечная сетка ---------- */
:root[data-palette="graphite"] {
  --bg: #0e0f11;
  --surface: #141619;
  --surface-2: #1c1f23;
  --surface-3: #252930;
  --text: #ececec;
  --muted: #8a9097;
  --border: rgb(255 255 255 / .07);
  --accent: #34d399;
  --mine: #047857;
  --theirs: rgb(26 28 32 / .94);
  --acc-rgb: 52 211 153;
  --acc2-rgb: 5 150 105;
  --grad-a: #059669;
  --grad-b: #047857;
  --acc-soft: #6ee7b7;
  --acc-tint: #ecfdf5;
  --acc-tint-2: #a7f3d0;
  --glass-rgb: 20 22 25;
  --shade-rgb: 9 10 12;
  --rail-bg: #0a0b0d;
  --toast-bg: #1c1f23;
  /* строгая палитра — без цветного свечения вокруг своих сообщений */
  --mine-shadow: 0 2px 10px rgb(0 0 0 / .35);
  --chat-bg:
    url("../assets/doodles-dark.svg"),
    radial-gradient(110% 80% at 50% -10%, rgb(52 211 153 / .08), transparent 60%),
    linear-gradient(#0e0f11, #0c0d0f);
  --chat-bg-size: 360px 360px, cover, cover;
  --chat-bg-repeat: repeat, no-repeat, no-repeat;
}
:root[data-theme="light"][data-palette="graphite"] {
  --bg: #f5f5f3;
  --surface: #ffffff;
  --surface-2: #efefec;
  --surface-3: #e5e5e1;
  --text: #18181b;
  --muted: #6f6f76;
  --border: #e3e3df;
  --accent: #047857;
  --mine: #047857;
  --theirs: #ffffff;
  --acc-rgb: 5 150 105;
  --acc2-rgb: 4 120 87;
  --chat-bg:
    url("../assets/doodles-neutral.svg"),
    linear-gradient(#f6f6f4, #f1f1ee);
  --chat-bg-size: 360px 360px, cover;
  --chat-bg-repeat: repeat, no-repeat;
}

/* ---------- Закат (в светлой — «Песок»): коралл и янтарь, мягкие волны ---------- */
:root[data-palette="sunset"] {
  --bg: #120b10;
  --surface: #190f15;
  --surface-2: #23161e;
  --surface-3: #2e1d27;
  --text: #f8ecea;
  --muted: #b39aa1;
  --border: rgb(255 255 255 / .07);
  --accent: #fb7185;
  --mine: #be123c;
  --theirs: rgb(30 19 26 / .9);
  --acc-rgb: 251 113 133;
  --acc2-rgb: 225 29 72;
  --grad-a: #ea580c;
  --grad-b: #be123c;
  --acc-soft: #fdba74;
  --acc-tint: #ffe4e6;
  --acc-tint-2: #fecdd3;
  --glass-rgb: 25 15 21;
  --shade-rgb: 14 8 12;
  --rail-bg: #0c070a;
  --toast-bg: #23161e;
  --chat-bg:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='280' fill='none' stroke='%23fff' stroke-width='1.2'%3E%3Cpath d='M0 70 C150 20 300 120 450 70 S750 20 900 70' opacity='.05'/%3E%3Cpath d='M0 150 C150 100 300 200 450 150 S750 100 900 150' opacity='.04'/%3E%3Cpath d='M0 230 C150 180 300 280 450 230 S750 180 900 230' opacity='.035'/%3E%3C/svg%3E"),
    radial-gradient(60% 50% at 88% 6%, rgb(251 146 60 / .22), transparent 70%),
    radial-gradient(60% 55% at 8% 102%, rgb(225 29 72 / .2), transparent 70%),
    linear-gradient(165deg, #150c12, #1b0f15);
  --chat-bg-size: 900px 280px, cover, cover, cover;
  --chat-bg-repeat: repeat, no-repeat, no-repeat, no-repeat;
}
:root[data-theme="light"][data-palette="sunset"] {
  --bg: #faf5ef;
  --surface: #fffdfa;
  --surface-2: #f4ece3;
  --surface-3: #ece0d4;
  --text: #2b1d17;
  --muted: #8b766b;
  --border: #eadfd3;
  --accent: #c2410c;
  --mine: #be123c;
  --theirs: #fffdfa;
  --acc-rgb: 234 88 12;
  --acc2-rgb: 190 18 60;
  --acc-tint: #ffedd5;
  --acc-tint-2: #fed7aa;
  --chat-bg:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='280' fill='none' stroke='%23b45309' stroke-width='1.2'%3E%3Cpath d='M0 70 C150 20 300 120 450 70 S750 20 900 70' opacity='.08'/%3E%3Cpath d='M0 150 C150 100 300 200 450 150 S750 100 900 150' opacity='.06'/%3E%3Cpath d='M0 230 C150 180 300 280 450 230 S750 180 900 230' opacity='.05'/%3E%3C/svg%3E"),
    radial-gradient(60% 50% at 90% 4%, rgb(251 191 36 / .18), transparent 70%),
    radial-gradient(60% 55% at 6% 104%, rgb(244 114 182 / .12), transparent 70%),
    linear-gradient(165deg, #fbf7f2, #f6eee5);
  --chat-bg-size: 900px 280px, cover, cover, cover;
  --chat-bg-repeat: repeat, no-repeat, no-repeat, no-repeat;
}

/* общий слой: повтор узоров и плавная смена палитры */
.chat-view > .messages, [data-theme="light"] .messages { background-repeat: var(--chat-bg-repeat, no-repeat); }
body, .sidebar, .rail, .chat-head, .composer, .msg .bubble { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
@media (prefers-reduced-motion: reduce) {
  body, .sidebar, .rail, .chat-head, .composer, .msg .bubble { transition: none; }
}

/* образцы палитр в настройках */
.palette-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.palette-swatch { display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 8px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); cursor: pointer; font-size: 12.5px; }
.palette-swatch.active { border-color: rgb(var(--acc-rgb) / .7); box-shadow: 0 0 0 2px rgb(var(--acc-rgb) / .25); }
.palette-swatch i { width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; display: block; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.palette-swatch .p-cosmos { background: linear-gradient(135deg, #8d6ff5, #6c52e0 45%, #0a0c1d 46%); }
.palette-swatch .p-aurora { background: radial-gradient(70% 60% at 20% 20%, #22d3ee88, transparent 70%), radial-gradient(70% 60% at 90% 30%, #818cf888, transparent 70%), #070b16; }
.palette-swatch .p-graphite { background: linear-gradient(135deg, #059669, #047857 40%, #141619 41%); }
.palette-swatch .p-sunset { background: radial-gradient(70% 60% at 85% 15%, #fb923caa, transparent 70%), linear-gradient(135deg, #ea580c, #be123c 45%, #190f15 46%); }
@media (max-width: 480px) { .palette-swatches { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Классика (по мотивам Telegram): зелёные свои сообщения, белые чужие, узор на градиенте ---------- */
:root[data-palette="classic"] {
  /* ночь */
  --bg: #0e1621;
  --surface: #17212b;
  --surface-2: #202b36;
  --surface-3: #2b3846;
  --text: #f5f5f5;
  --muted: #7f91a4;
  --border: rgb(255 255 255 / .06);
  --accent: #5ea7e8;
  --mine: #2b5278;
  --theirs: #182533;
  --acc-rgb: 94 167 232;
  --acc2-rgb: 51 116 186;
  --grad-a: #4a8fd4;
  --grad-b: #3b7cc0;
  --acc-soft: #8cc4f5;
  --acc-tint: #e3f0fd;
  --acc-tint-2: #c3defa;
  --glass-rgb: 23 33 43;
  --shade-rgb: 14 22 33;
  --rail-bg: #0e1621;
  --toast-bg: #202b36;
  --mine-shadow: 0 1px 2px rgb(0 0 0 / .3);
  --chat-bg: url("../assets/doodles-dark.svg"), radial-gradient(70% 60% at 25% 20%, #1d3446, transparent 70%),
    radial-gradient(70% 60% at 80% 85%, #1b2f3f, transparent 70%), linear-gradient(#0f1a26, #0e1621);
  --chat-bg-size: 360px 360px, cover, cover, cover;
  --chat-bg-repeat: repeat, no-repeat, no-repeat, no-repeat;
}
:root[data-theme="light"][data-palette="classic"] {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f2f4;
  --surface-3: #e7e9ec;
  --text: #0f0f0f;
  --muted: #707579;
  --border: #e6e7e9;
  --accent: #3390ec;
  --mine: #effdde;
  --theirs: #ffffff;
  --acc-rgb: 51 144 236;
  --acc2-rgb: 51 144 236;
  --grad-a: #3a96ef;
  --grad-b: #2d84de;
  --acc-tint: #e8f2fd;
  --acc-tint-2: #cfe4fb;
  --mine-shadow: 0 1px 1.5px rgb(16 35 47 / .15);
  --chat-bg: url("../assets/doodles-light.svg"),
    radial-gradient(60% 60% at 18% 18%, #dbe0a0, transparent 70%),
    radial-gradient(60% 60% at 85% 25%, #9cc795, transparent 70%),
    radial-gradient(70% 70% at 25% 88%, #7fb590, transparent 70%),
    radial-gradient(60% 60% at 88% 88%, #d9dcb8, transparent 70%),
    linear-gradient(#b8cf96, #a9c58f);
  --chat-bg-size: 360px 360px, cover, cover, cover, cover, cover;
  --chat-bg-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}
/* свои сообщения: ночью — синие, днём — светло-зелёные с тёмным текстом, как в Telegram */
[data-palette="classic"] .msg.mine .bubble { background: var(--mine); }
[data-palette="classic"] .msg.mine.last .bubble::after { background: var(--mine); }
[data-palette="classic"] .msg:not(.mine) .bubble { background: var(--theirs); backdrop-filter: none; }
[data-theme="light"][data-palette="classic"] .msg.mine .bubble { color: #0f0f0f; }
[data-theme="light"][data-palette="classic"] .msg.mine .bubble .meta,
[data-theme="light"][data-palette="classic"] .chat-view > .messages .msg.mine .bubble .meta { color: #4fae4e; }
[data-theme="light"][data-palette="classic"] .msg.mine .tick.read { color: #4fae4e; }
[data-theme="light"][data-palette="classic"] .msg.mine .bubble .quote { border-left-color: #4fae4e; background: rgb(79 174 78 / .12); }
[data-theme="light"][data-palette="classic"] .msg.mine .bubble .quote b { color: #3a8f39; }
[data-theme="light"][data-palette="classic"] .msg.mine .bubble a { color: #2f7fd0; }
[data-theme="light"][data-palette="classic"] .msg.mine .approval .btn { background: rgb(0 0 0 / .05); border-color: rgb(0 0 0 / .08); color: var(--text); }
[data-theme="light"][data-palette="classic"] .msg.mine .mention.me { background: rgb(79 174 78 / .2); }
/* даты и системные строки — полупрозрачные плашки поверх обоев */
[data-palette="classic"] .chat-view > .messages .day, [data-palette="classic"] .system {
  background: rgb(0 0 0 / .22); color: #fff; border: 0; font-weight: 500; }
[data-theme="light"][data-palette="classic"] .chat-view > .messages .day, [data-theme="light"][data-palette="classic"] .system {
  background: rgb(60 90 50 / .32); color: #fff; }
/* плашка даты при прокрутке закрепляется вверху — фон плотный, чтобы соседняя не просвечивала («1Сегодня») */
[data-palette="classic"] .chat-view > .messages .day { background: #22303d; }
[data-theme="light"][data-palette="classic"] .chat-view > .messages .day { background: #7d9a6b; }
/* список чатов: круглые аватары, выделение заливкой, как в Telegram */
[data-palette="classic"] .chat-item .avatar, [data-palette="classic"] .chat-head .avatar, [data-palette="classic"] .avatar { border-radius: 50%; }
[data-palette="classic"] .chat-item { margin: 0 6px; border-radius: 10px; }
[data-palette="classic"] .chat-item.active { background: var(--accent); border-color: transparent; }
[data-palette="classic"] .chat-item.active .name, [data-palette="classic"] .chat-item.active .last,
[data-palette="classic"] .chat-item.active .time { color: #fff; }
[data-palette="classic"] .chat-item.active .badge { background: #fff; color: var(--accent); }
[data-palette="classic"] .rail-btn.active { background: rgb(var(--acc-rgb) / .14); border-color: transparent; color: var(--accent); }
/* поле ввода без рамки, кнопка отправки — круг */
[data-palette="classic"] .composer textarea { border-color: transparent; background: transparent; }
[data-palette="classic"] .composer .send { border-radius: 50%; background: var(--accent); }
.palette-swatch .p-classic { background: url("../assets/doodles-light.svg") 0 0 / 60px 60px, linear-gradient(135deg, #dbe0a0, #88b884 60%, #6ba587); }