/* kit.css — токены и «набор ощущений» веб-приложения keriteri.
 *
 * Срез десктопного токен-слоя (keriteri/app/src/style.css): движение 1-в-1,
 * цвета — ночь и «молочная бумага». Тема — атрибут data-theme на <html>
 * (ставит inline-скрипт index.html до отрисовки и theme.js). Ниже — веб-копии
 * правил для общих модулей shared/ (тосты, загрузка, пустые экраны, волна
 * нажатия, бейджи, иконки), шторка (sheet.js) и силуэт кота (portraits.js).
 * Правила компонентов — только на токенах. */

@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito.woff2") format("woff2-variations"),
       url("fonts/nunito.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --dur-press: 90ms;
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 280ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-pop: cubic-bezier(.35, .35, .47, 1.34);
  --r-1: 6px;
  --r-2: 9px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 22px;
  --tap: 44px;
  --hdr-h: 56px;
  --tab-h: 60px;
  --gutter: 12px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --font: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --bg: #130e21;
  --bg-2: #1c1730;
  --bar: rgba(19, 14, 33, 0.86);
  --panel-fg: #f4f1ff;
  --ink-mid: #b9afd9;
  --ink-dim: #8d82b8;
  --ink-soft: #ddd6f3;
  --lav: #c7b2ff;
  --logo-m: #c7b2ff;
  --logo-s: #ffc234;
  --logo-w: #f4f1ff;
  --line: rgba(199, 178, 255, 0.14);
  --line-strong: rgba(199, 178, 255, 0.3);
  --raise: rgba(255, 255, 255, 0.045);
  --raise-2: rgba(255, 255, 255, 0.07);
  --sink: rgba(6, 4, 14, 0.35);
  --scrim-2: rgba(10, 7, 20, 0.98);
  --backdrop: rgba(6, 4, 14, 0.55);
  --accent-wash: rgba(199, 178, 255, 0.1);
  --accent-wash-2: rgba(199, 178, 255, 0.12);
  --accent-wash-3: rgba(199, 178, 255, 0.24);
  --accent-grad: linear-gradient(180deg, #a08ae6, #8f7bd6);
  --ink-on-accent: #fff;
  --warm: #ffd9a0;
  --warm-ink: #ffd9a0;
  --gold-ink: #ffd75e;
  --danger-ink: #ff9a9a;
  --hot: #ff7d9c;
  --ic-cut: #1b1430;
  --ic-warm: #ffd9a0;
  --sk-1: rgba(199, 178, 255, 0.08);
  --sk-2: rgba(199, 178, 255, 0.2);
  --e2: 0 2px 4px rgba(5, 3, 12, 0.5), 0 10px 26px rgba(5, 3, 12, 0.34);
  --e3: 0 4px 10px rgba(5, 3, 12, 0.5), 0 18px 44px rgba(5, 3, 12, 0.5);
  --inset-well: inset 0 1px 2px rgba(5, 3, 12, 0.3);
  --tick-read: #a5e8ff;          /* ✓✓ «прочитано» на своём (фиолетовом) пузыре */
  --nm-s: 70%;                   /* имя автора в стае: hsl(оттенок окраса, --nm-s, --nm-l) */
  --nm-l: 76%;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #fdfaf5;
  --bg-2: #f6f1e9;
  --bar: rgba(253, 250, 245, 0.88);
  --panel-fg: #2c2347;
  --ink-mid: #5a5273;
  --ink-dim: #5f5873;
  --ink-soft: #3d3560;
  --lav: #584099;
  --logo-m: #584099;
  --logo-s: #b8791a;
  --logo-w: #2c2347;
  --line: rgba(90, 70, 150, 0.16);
  --line-strong: rgba(90, 70, 150, 0.28);
  --raise: rgba(255, 255, 255, 0.75);
  --raise-2: rgba(255, 255, 255, 0.9);
  --sink: rgba(90, 70, 150, 0.07);
  --scrim-2: rgba(250, 246, 240, 0.99);
  --backdrop: rgba(44, 35, 71, 0.32);
  --accent-wash: rgba(122, 99, 204, 0.1);
  --accent-wash-2: rgba(122, 99, 204, 0.14);
  --accent-wash-3: rgba(143, 123, 214, 0.26);
  --accent-grad: linear-gradient(180deg, #7d67cf, #6f57c4);
  --warm-ink: #8a5a00;
  --gold-ink: #8a6a00;
  --danger-ink: #b3261e;
  --hot: #d4265a;
  --ic-cut: rgba(253, 250, 245, 0.92);
  --ic-warm: #b8791a;
  --sk-1: rgba(90, 70, 150, 0.07);
  --sk-2: rgba(90, 70, 150, 0.15);
  --e2: 0 2px 4px rgba(70, 55, 120, 0.14), 0 10px 26px rgba(70, 55, 120, 0.14);
  --e3: 0 4px 10px rgba(70, 55, 120, 0.16), 0 18px 44px rgba(70, 55, 120, 0.2);
  --inset-well: inset 0 1px 2px rgba(70, 55, 120, 0.12);
  --tick-read: #c9efff;
  --nm-s: 55%;
  --nm-l: 36%;
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-press: 1ms; --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; }
}

/* ── База ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* hidden прячет всегда: иначе любое display:flex/grid компонента перебивает атрибут. */
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior-y: none;           /* своё «тяни, чтобы обновить» */
  background: var(--bg);
  color: var(--panel-fg);
  font: 500 15px/1.45 var(--font);
}
a { color: var(--lav); text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
img, svg, video { max-width: 100%; }
:focus-visible { outline: 2px solid var(--lav); outline-offset: 2px; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
html.has-sheet { overflow: hidden; }
/* Хром не выделяется и не зовёт выноску iOS. Safari на iPhone понимает
 * только -webkit-user-select: без префикса долгое нажатие выделяло слово
 * («замок» в полосе записи, пункты шторки сообщения) и забирало касание.
 * Поля ввода остаются выделяемыми — правило ниже. Тест: base.test.mjs. */
button, [role="button"], [role="tab"], [role="menuitem"], [role="option"], label, summary,
.btn, .ibtn, .act, .hbtn, .fab, .tab, .tabbar, .hdr, .th-head, .seg, .seg-b, .cl-seg, .cl-shelf,
.tchip, .tr-chip, .net-pill, .fish-pill, .cl-row, .fw-row, .sr-row, .pi-row, .stk-b,
.sheet, .sh-backdrop, .sh-grab, .sh-title, .sh-act, .ms, .ms-rx, .ms-rx-b, .rx-pick,
.tbar-row, .tbar-plate, .tbar-att, .tbar-burn, .tbar-mic, .tbar-rec, .tbar-lock,
.chat-msg, .dm-reacts, .dm-react, .dm-voice, .dm-circ, .lbx, .kt-toast {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
input, textarea, [contenteditable], [contenteditable] * {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}

/* ── Кнопки: отклик фоном за --dur-press + волна (ripple.js) ───────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 18px;
  border: 0; border-radius: var(--r-4);
  background: var(--accent-grad); color: var(--ink-on-accent);
  font-size: 15px; font-weight: 800; text-align: center; cursor: pointer;
  transition: opacity var(--dur-press) linear, background-color var(--dur-press) linear;
}
.btn.ghost { background: var(--raise-2); color: var(--panel-fg); box-shadow: inset 0 0 0 1px var(--line); }
.btn.small { padding: 0 16px; font-size: 14px; }
.btn:disabled { opacity: .55; cursor: default; }
.btn:active:not(:disabled) { opacity: .86; }
.ibtn {
  display: inline-grid; place-items: center; flex: none;
  width: var(--tap); height: var(--tap);
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-mid);
  cursor: pointer;
  transition: background-color var(--dur-press) linear, color var(--dur-press) linear;
}
.ibtn .ki { font-size: 22px; }
.ibtn:active { background: var(--accent-wash-2); }

/* ── Плюш-иконки (shared/icons.js) — как .ki десктопа ──────────────────── */
.ki { width: 1.16em; height: 1.16em; display: inline-block; vertical-align: -.17em; overflow: visible; color: inherit; }
.ki .ic-body { fill: currentColor; }
.ki .ic-warm { fill: var(--ic-warm); }
.ki .ic-hot { fill: var(--hot); }
.ki .ic-cut { fill: var(--ic-cut); }
.ki .ic-x, .ki .ic-flap { stroke: var(--ic-cut); }
.ki .ic-tick { fill: none; stroke: var(--ic-cut); }
.ki [class*="ic-"] { transform-box: fill-box; transform-origin: center; }
.ki .ic-wave1, .ki .ic-wave2 { opacity: 0; }

/* ── Волна нажатия (shared/ripple.js) ──────────────────────────────────── */
.rpl-host { isolation: isolate; }
.rpl-box { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: -1; }
.rpl {
  position: absolute; border-radius: 50%; pointer-events: none; transform: scale(.15);
  background: color-mix(in srgb, currentColor 9%, transparent);
}

/* ── Бейджи (shared/badge.js) ──────────────────────────────────────────── */
.bdg-pop { animation: bdg-pop var(--dur-slow) var(--ease-pop); }
@keyframes bdg-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.bdg-roll { display: inline-grid; place-items: center; overflow: hidden; }
.bdg-roll > span { grid-area: 1 / 1; }
.bdg-up > .bdg-cur { animation: bdg-in-up var(--dur-fast) var(--ease-out); }
.bdg-up > .bdg-old { animation: bdg-out-up var(--dur-fast) var(--ease-in) forwards; }
.bdg-down > .bdg-cur { animation: bdg-in-down var(--dur-fast) var(--ease-out); }
.bdg-down > .bdg-old { animation: bdg-out-down var(--dur-fast) var(--ease-in) forwards; }
@keyframes bdg-in-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes bdg-out-up { to { transform: translateY(-100%); opacity: 0; } }
@keyframes bdg-in-down { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes bdg-out-down { to { transform: translateY(100%); opacity: 0; } }

/* ── Тосты (shared/toast.js): над нижней панелью, не ловят касания ────── */
.kt-toast {
  position: fixed; left: 50%; z-index: 95;
  bottom: calc(var(--tab-h) + var(--safe-b) + 16px);
  width: max-content; max-width: calc(100% - 32px);
  padding: 10px 16px; border-radius: var(--r-3);
  background: var(--scrim-2); color: var(--panel-fg);
  border: 1px solid var(--line-strong); box-shadow: var(--e2);
  font: 700 14px/1.35 var(--font); text-align: center; pointer-events: none;
  opacity: 0; transform: translate(-50%, 8px);
  transition: opacity var(--dur-slow) var(--ease-in), transform var(--dur-slow) var(--ease-in);
}
.kt-toast.is-on {
  opacity: 1; transform: translate(-50%, 0);
  transition-duration: var(--dur-base); transition-timing-function: var(--ease-out);
}
.kt-toast[data-kind="error"] { color: var(--danger-ink); }

/* ── Загрузка (shared/loading.js) ──────────────────────────────────────── */
.kt-spin { display: inline-block; flex: none; width: var(--spin-size, 20px); height: var(--spin-size, 20px); color: var(--lav); }
.kt-spin svg { display: block; width: 100%; height: 100%; animation: kt-spin-turn 1s linear infinite; }
.kt-spin circle {
  fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 6 100; animation: kt-spin-arc 3s ease-in-out infinite;
}
@keyframes kt-spin-turn { to { transform: rotate(1turn); } }
@keyframes kt-spin-arc { 0%, 100% { stroke-dasharray: 6 100; } 50% { stroke-dasharray: 75 100; } }
.kt-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 10px; color: var(--ink-dim); font-size: 13px; font-weight: 700; }
.skeleton {
  background: linear-gradient(100deg, var(--sk-1) 40%, var(--sk-2) 50%, var(--sk-1) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes shimmer { 0% { background-position: 120% 0; } 100% { background-position: -80% 0; } }
.sk-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; }
.sk-ava { flex: none; width: 40px; height: 40px; border-radius: var(--r-3); }
.sk-col { flex: 1; display: grid; gap: 6px; }
.sk-line { height: 11px; width: 90%; }
.sk-line.short { width: 55%; }

/* ── Пустые экраны (shared/emptystate.js) ──────────────────────────────── */
.es {
  display: grid; justify-items: center; gap: 10px;
  padding: 32px 16px; text-align: center; color: var(--ink-dim);
  animation: es-in var(--dur-base) var(--ease-out);
}
.es-cat { width: 88px; height: 88px; object-fit: contain; opacity: .92; -webkit-user-select: none; user-select: none; }
.es-text { margin: 0; max-width: 300px; font-size: 15px; font-weight: 700; line-height: 1.45; }
.es-act { margin-top: 2px; }
.es-error .es-text { color: var(--panel-fg); }
@keyframes es-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Шторка (sheet.js) ─────────────────────────────────────────────────── */
.sh-backdrop {
  position: fixed; inset: 0; z-index: 80; background: var(--backdrop);
  animation: sh-fade var(--dur-base) var(--ease-out);
  transition: opacity var(--dur-fast) var(--ease-in);
}
.sh-backdrop.is-leaving { opacity: 0; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 81;
  display: flex; flex-direction: column;
  max-width: 560px; max-height: calc(100dvh - var(--safe-t) - 24px); margin: 0 auto;
  padding: 0 calc(var(--gutter) + var(--safe-r)) calc(12px + var(--safe-b)) calc(var(--gutter) + var(--safe-l));
  border-radius: var(--r-5) var(--r-5) 0 0;
  background: var(--bg-2); color: var(--panel-fg); box-shadow: var(--e3);
  animation: sh-in var(--dur-slow) var(--ease-out);
  transition: transform var(--dur-base) var(--ease-in);
}
.sheet.is-drag { transition: none; }
/* Открыта долгим нажатием, палец ещё лежит: касаний не принимает (sheet.holdUntilRelease). */
.sheet.is-held, .sh-backdrop.is-held, .sheet.is-held * { pointer-events: none; }
.sheet.is-leaving { transform: translateY(100%); }
.sh-grab { display: grid; place-items: center; height: 28px; touch-action: none; cursor: grab; }
.sh-grab span { width: 40px; height: 5px; border-radius: 3px; background: var(--line-strong); }
.sh-title { margin: 0 0 10px; font-size: 17px; font-weight: 900; text-align: center; touch-action: none; }
.sh-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.sh-actions { display: grid; gap: 8px; padding-bottom: 4px; }
.sh-act {
  min-height: 52px; border: 0; border-radius: var(--r-4);
  background: var(--raise-2); color: var(--panel-fg);
  font-size: 16px; font-weight: 800; cursor: pointer;
  transition: background-color var(--dur-press) linear;
}
.sh-act:active { background: var(--accent-wash-3); }
.sh-act.is-danger { color: var(--danger-ink); }
.sh-act.is-cancel { background: transparent; color: var(--ink-mid); }
@keyframes sh-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sh-fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .skeleton, .es, .sheet, .sh-backdrop { animation: none; }
  .bdg-pop, .bdg-roll > span { animation: none; }
  .bdg-old { display: none; }
  .kt-spin svg { animation: none; }
  .kt-spin circle { animation: none; stroke-dasharray: 25 100; }
  .kt-toast { transform: translate(-50%, 0); }
}

/* ── Кот (portraits.js): силуэт той же формы, пока не приехали данные ──── */
.cat-av {
  display: inline-block; flex: none; vertical-align: middle;
  background: var(--line-strong);
  -webkit-mask: url("shared/pet/sit.png") center / contain no-repeat;
  mask: url("shared/pet/sit.png") center / contain no-repeat;
}
.cat-av[data-painted] { background: none; -webkit-mask: none; mask: none; }
.cat-portrait { display: inline-block; flex: none; vertical-align: middle; }
.cat-portrait svg { display: block; width: 100%; height: 100%; }