/* tokens.css — переменные, темы, обои, базовый сброс, анимации. Значения из дизайна архива. */

:root{
  --accent:#e8571f;
  /* Пульт оформления: вид держится на этих переменных. Значения по умолчанию = нынешний вид,
     поэтому без сохранённого пульта всё выглядит ровно как раньше (чистая добавка). */
  --corner-shape:superellipse(2.6);
  --bub-radius:14px;
  --font-scale:1;
  --wp-image:none;
  --wp-size:64px;
  --blur:12px;
  --bg:#eef1f5;
  --panel:rgba(255,255,255,.62);
  --panel2:rgba(255,255,255,.9);
  --text:#191c20;
  --text2:#848c96;
  --border:rgba(20,30,40,.09);
  --hover:rgba(20,30,40,.05);
  --accent-soft:color-mix(in oklch, var(--accent), white 88%);
  --rail-bg:#232228;
  --rail-fg:rgba(255,250,246,.62);
  --rail-active:rgba(255,255,255,.1);   /* наведение: подсветка, светлее рейла */
  /* Нажато и выбрано — наоборот, углубление: темнее и рейла, и наведения. Два состояния
     обязаны отличаться, а раньше у выбранной папки и у наведённой был один и тот же
     --rail-active — выбранную было не отличить от той, на которой просто мышь. */
  --rail-press:rgba(0,0,0,.22);
  --bubble-in:rgba(255,255,255,.9);
  /* Градиент вдвое мягче: тёмный конец на месте, светлый пришёл к нему на полпись (22% → 11%
     подмешанного белого). Так уходит и крикливость — самый яркий угол пузыря темнеет, —
     и сам перепад: на маленьком пузыре («ок», «да») он раскладывался на пару сантиметров и
     читался полосой, а не объёмом. Токен один на всё: пузырь, аватарки, кнопка отправки,
     счётчик непрочитанного — они и должны меняться вместе. */
  --bubble-out:linear-gradient(135deg, color-mix(in oklch, var(--accent), white 11%), var(--accent));
  --wallpaper:linear-gradient(160deg,#f3ece4,#eee1d3 45%,#ecdfda);
  --danger:#d64545;
}
body.dark{
  --bg:#0e1114;
  --panel:rgba(21,25,31,.6);
  --panel2:rgba(27,32,39,.92);
  --text:#e9ebee;
  --text2:#8b939e;
  --border:rgba(255,255,255,.09);
  --hover:rgba(255,255,255,.06);
  --accent-soft:color-mix(in oklch, var(--accent), black 70%);
  --bubble-in:rgba(38,44,52,.92);
  --bubble-out:linear-gradient(135deg, color-mix(in oklch, var(--accent), black 19%), color-mix(in oklch, var(--accent), black 30%));
  --wallpaper:linear-gradient(160deg,#17130f,#1c1611 45%,#161113);
}
body.wp2{--wallpaper:linear-gradient(160deg,#e4eaf1,#dce3ee 45%,#e0dcea)}
body.dark.wp2{--wallpaper:linear-gradient(160deg,#10161f,#131a26 45%,#171423)}
body.wp3{--wallpaper:linear-gradient(180deg,#f0f1f3,#e8eaee)}
body.dark.wp3{--wallpaper:linear-gradient(180deg,#121519,#0f1216)}

*{box-sizing:border-box;margin:0;padding:0;corner-shape:var(--corner-shape,superellipse(2.6))}
html,body{height:100%;overflow:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);height:100dvh}
a{color:var(--accent);text-decoration:none}
a:hover{color:color-mix(in oklch, var(--accent), black 15%)}
input,textarea,button{font-family:inherit;color:inherit}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:rgba(128,128,128,.35);border-radius:3px}

@keyframes popIn{from{opacity:0;transform:scale(.92) translateY(6px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes blinkCaret{0%,100%{opacity:1}50%{opacity:.15}}
@keyframes shimmerText{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes spin{to{transform:rotate(360deg)}}

.typing-shimmer{background:linear-gradient(90deg,var(--text2) 0%,var(--text2) 38%,color-mix(in oklch,var(--text2),white 65%) 50%,var(--text2) 62%,var(--text2) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmerText 2.4s linear infinite}
body.dark .typing-shimmer{background:linear-gradient(90deg,var(--text2) 0%,var(--text2) 38%,color-mix(in oklch,var(--text2),white 55%) 50%,var(--text2) 62%,var(--text2) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}


/* ---------- Размер шрифта переписки (задумка #153) ---------- */
/* Ручка живёт в пульте оформления (js/ui.js), значение приезжает сюда множителем --font-scale.
   Масштабируем ТЕКСТ ПЕРЕПИСКИ, а не весь интерфейс: человек просит крупнее читать сообщения, а
   не растянуть шапки, рейл и списки — те привязаны к геометрии панелей и поехали бы вёрсткой.
   Правила стоят здесь, рядом с самой переменной, а не в components.css: так пульт целиком —
   переменная, её значения и её действие — читается в одном файле, и добавление следующей ручки
   не разносится по двум местам. Отсюда же и `body` в селекторах: tokens.css грузится ПЕРВЫМ, и
   без лишнего веса эти правила проиграли бы одноимённым в components.css.
   Пресеты ботов (терминал/бумага/компакт) задают свой кегль и по весу селектора сильнее общих —
   поэтому у каждого своя строка: масштаб должен слушаться и внутри пресета. */
body .mtext,
body .media-caption{font-size:calc(14.5px * var(--font-scale,1))}
body .mreply{font-size:calc(12.5px * var(--font-scale,1))}
body .mtime,
body .edited{font-size:calc(11px * var(--font-scale,1))}
body .bot-style-terminal .mthem .mtext{font-size:calc(13px * var(--font-scale,1))}
body .bot-style-paper .mthem .mtext{font-size:calc(15px * var(--font-scale,1))}
body .bot-style-compact .mthem .mtext{font-size:calc(13px * var(--font-scale,1))}