/* ==========================================================================
   1. Токены и базовые стили
   ========================================================================== */
:root {
  --bg:        oklch(0.985 0.006 150);
  --surface:   #fff;
  --ink:       oklch(0.24 0.02 165);
  --ink-soft:  oklch(0.44 0.018 165);
  --ink-mute:  oklch(0.58 0.015 165);
  --line:      oklch(0.91 0.012 155);
  --line-soft: oklch(0.95 0.006 155);
  --brand:     oklch(0.60 0.16 157);
  --brand-ink: oklch(0.47 0.14 160);
  --brand-soft:oklch(0.62 0.15 156 / 0.14);
  --brand-bright: oklch(0.80 0.17 153);
  --accent:    oklch(0.62 0.14 232);
  --dark:      oklch(0.22 0.022 195);

  --font-text:    Manrope, "Helvetica Neue", Helvetica, sans-serif;
  --font-display: "Golos Text", "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --radius:    22px;
  --radius-sm: 14px;
  --shadow:    0 30px 60px -40px oklch(0.24 0.02 165 / 0.55);
  --shadow-brand: 0 14px 30px -12px oklch(0.60 0.16 157 / 0.55);
  --wrap:      1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.03em; line-height: 1.06; margin: 0; }
h1 { font-size: clamp(38px, 5.4vw, 66px); font-weight: 900; }
h2 { font-size: clamp(30px, 4.2vw, 50px); font-weight: 800; }
h3 { font-size: clamp(21px, 2.4vw, 30px); font-weight: 800; letter-spacing: -0.02em; }
p  { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

a { color: var(--brand-ink); text-decoration: none; }
a:hover { color: oklch(0.38 0.11 160); }

::selection { background: oklch(0.62 0.14 158 / 0.24); }

/* Служебные ----------------------------------------------------------------*/
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(56px, 8vw, 110px) 0; }
.section--paper { background: var(--surface); border-block: 1px solid var(--line-soft); }
.eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); margin: 0 0 14px;
}
.lead { max-width: 62ch; font-size: 18px; color: var(--ink-soft); }
.note { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-mute); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Кнопки ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 17px 30px; border: 0; border-radius: 999px;
  font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, border-color .25s;
}
.btn--primary {
  background: var(--brand); color: #fff; font-size: 18px;
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover { transform: translateY(-3px) scale(1.03); background: oklch(0.55 0.16 158); box-shadow: 0 22px 40px -14px oklch(0.60 0.16 157 / 0.6); color: #fff; }
.btn--primary:active { transform: translateY(-1px) scale(.98); box-shadow: 0 10px 20px -12px oklch(0.60 0.16 157 / 0.6); }
.btn--small { padding: 12px 24px; font-size: 15px; }
.btn--ghost {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
}
.btn--ghost:hover { transform: translateY(-3px); border-color: var(--brand); }
.btn--ghost:active { transform: translateY(-1px) scale(.98); }
.btn__icon {
  width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 6px; background: #ffffff2e; font-size: 13px;
}

/* ==========================================================================
   2. Шапка
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 60;
  padding: 16px 0;
  background: oklch(0.985 0.006 150 / 0.86);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  transition: padding .3s ease, box-shadow .3s ease;
}
.site-header.is-compact { padding: 9px 0; box-shadow: 0 18px 40px -30px oklch(0.24 0.02 165 / 0.8); }
.site-header__inner { display: flex; align-items: center; gap: 26px; }

.logo { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.logo img { width: 38px; height: 38px; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.logo:hover img { transform: rotate(-6deg) scale(1.08); }
.logo span { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }

.site-nav { display: flex; flex-wrap: wrap; gap: 22px; margin-left: auto; font-size: 15px; font-weight: 600; }
.site-nav a { color: var(--ink-mute); transition: color .2s; }
.site-nav a:hover,
.site-nav a.is-active { color: var(--brand-ink); }

.progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--brand), var(--accent)); transition: width .12s linear; }

/* ==========================================================================
   3. Герой
   ========================================================================== */
.hero { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 110px);
  background: linear-gradient(180deg, oklch(0.965 0.028 152), var(--bg) 72%); }
.hero__inner {
  position: relative; display: grid; align-items: center;
  gap: clamp(36px, 5vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}
.hero h1 { margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: oklch(0.55 0.14 158); }
.hero .lead { max-width: 56ch; font-size: clamp(18px, 1.5vw, 21px); margin-bottom: 30px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.badge {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: oklch(0.45 0.05 165);
}
.badge__dot { position: relative; width: 8px; height: 8px; }
.badge__dot::before,
.badge__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--brand);
}
.badge__dot::after { animation: ring 1.9s ease-out infinite; }

.facts { display: grid; gap: 12px 26px; margin-top: 34px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.facts li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 600; color: oklch(0.36 0.02 165); }

.check {
  flex: 0 0 auto; width: 21px; height: 21px; border-radius: 6px;
  background: var(--brand-soft); color: var(--brand-ink);
  display: grid; place-items: center; font-size: 12px;
}
.check--round { border-radius: 50%; }

.blob { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.blob--one { top: -120px; right: -80px; width: 420px; height: 420px;
  background: oklch(0.80 0.17 153 / 0.22); animation: floaty 11s ease-in-out infinite; }
.blob--two { top: 180px; left: -140px; width: 340px; height: 340px;
  background: oklch(0.62 0.14 232 / 0.14); animation: floaty 14s ease-in-out -5s infinite; }

.hero__device { position: relative; animation: bobbing 7s ease-in-out infinite; }
.hero__toast {
  position: absolute; right: -14px; bottom: 60px; width: min(320px, 78%);
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: 12px;
  background: oklch(0.99 0.002 155 / 0.97); border: 1px solid var(--line);
  box-shadow: 0 24px 48px -22px oklch(0.24 0.02 165 / 0.55);
  animation: bobbing 5.5s ease-in-out -2s infinite;
}
.hero__toast img { width: 34px; height: 34px; flex: 0 0 auto; }
.hero__toast b { display: block; font-size: 14px; }
.hero__toast p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }
.hero__toast small { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute); }

/* ==========================================================================
   4. Возможности (вкладки)
   ========================================================================== */
.tabs { display: grid; gap: 12px; margin-bottom: 26px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.tab {
  text-align: left; padding: 16px 18px; border-radius: 15px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-weight: 700; font-size: 15.5px; line-height: 1.3; cursor: pointer;
  transition: transform .22s, box-shadow .22s, background .22s, color .22s;
}
.tab:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -20px oklch(0.24 0.02 165 / 0.6); }
.tab[aria-selected="true"] { background: var(--brand); color: #fff; border-color: var(--brand); }
.tab small { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: 11px; opacity: .65; }

.panel {
  display: grid; gap: clamp(24px, 3vw, 36px);
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--line); border-radius: 24px; background: var(--bg);
}
.panel[hidden] { display: none; }
.panel h3 { margin-bottom: 14px; }
.panel .lead { max-width: 64ch; margin-bottom: 22px; }
.panel__list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.panel__list li { display: flex; gap: 11px; font-size: 16px; }

/* ==========================================================================
   5. Галерея скриншотов
   ========================================================================== */
.head-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; margin-bottom: 32px; }
.head-row > div { flex: 1 1 340px; }
.arrows { display: flex; gap: 10px; margin-left: auto; }
.arrow {
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 18px; cursor: pointer; transition: transform .2s, border-color .2s;
}
.arrow:hover { transform: translateY(-2px); border-color: var(--brand); }

.frame {
  border-radius: 24px; overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.frame__bar {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: oklch(0.96 0.006 155); border-bottom: 1px solid var(--line-soft);
}
.frame__dots { display: flex; gap: 6px; }
.frame__dots i { width: 9px; height: 9px; border-radius: 50%; background: oklch(0.85 0.02 155); }
.frame__caption { margin: 0 auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-mute); }
.frame__stage { position: relative; aspect-ratio: 16 / 10; background: oklch(0.97 0.006 155); }
.frame__stage > .shot { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.frame__stage > .shot.is-current { opacity: 1; }

.thumbs { display: grid; gap: 14px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(50% - 7px, 150px), 1fr)); }
.thumb {
  padding: 13px 15px; border-radius: var(--radius-sm); background: var(--surface);
  border: 2px solid var(--line-soft); text-align: left;
  font: inherit; font-weight: 700; font-size: 14px; line-height: 1.3; cursor: pointer;
  transition: transform .2s, border-color .2s;
}
.thumb:hover { transform: translateY(-3px); }
.thumb[aria-current="true"] { border-color: var(--brand); }
.thumb small { display: block; margin-bottom: 5px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }

/* ==========================================================================
   6. Установка
   ========================================================================== */
.steps { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.step {
  padding: 28px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.step:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -34px oklch(0.24 0.02 165 / 0.6); }
.step__num {
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px;
  border-radius: var(--radius-sm); background: var(--brand); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
}
.step h3 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.step p { margin: 0; font-size: 16px; color: var(--ink-soft); }

/* ==========================================================================
   7. Отзывы
   ========================================================================== */
.reviews {
  display: flex; gap: 18px; padding: 4px 4px 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.reviews::-webkit-scrollbar { display: none; }
.review {
  scroll-snap-align: start; flex: 0 0 min(380px, 84%); margin: 0; padding: 28px;
  border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 24px 44px -40px oklch(0.24 0.02 165 / 0.7);
}
.review__stars { color: oklch(0.7 0.12 85); font-size: 15px; letter-spacing: 2px; margin-bottom: 16px; }
.review p { font-size: 17px; color: oklch(0.3 0.02 165); margin-bottom: 20px; }
.review footer { display: flex; align-items: center; gap: 12px; }
.review cite { font-style: normal; font-weight: 700; font-size: 15px; }
.review span { display: block; font-size: 13px; color: var(--ink-mute); }

.avatar {
  position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 54px; height: 54px;
  border-radius: 50%; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 21px;
  box-shadow: inset 0 0 0 3px #fff, 0 6px 14px -8px oklch(0.5 0.08 160);
}
.avatar img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover;
}
.avatar--a { background: radial-gradient(circle at 32% 28%, oklch(0.78 0.09 158), oklch(0.62 0.13 158)); }
.avatar--b { background: radial-gradient(circle at 32% 28%, oklch(0.78 0.09 232), oklch(0.60 0.13 232)); }
.avatar--c { background: radial-gradient(circle at 32% 28%, oklch(0.82 0.08 90),  oklch(0.66 0.11 75)); }
.avatar--d { background: radial-gradient(circle at 32% 28%, oklch(0.80 0.07 340), oklch(0.63 0.11 340)); }
.avatar--e { background: radial-gradient(circle at 32% 28%, oklch(0.80 0.07 200), oklch(0.62 0.11 195)); }

.dots { display: flex; gap: 10px; margin-top: 18px; }
.dots button {
  width: 26px; height: 6px; border: 0; padding: 0; border-radius: 999px;
  background: var(--line); cursor: pointer; transition: background .3s;
}
.dots button[aria-current="true"] { background: var(--brand); }

/* ==========================================================================
   8. Финальный призыв и футер
   ========================================================================== */
.cta {
  position: relative; overflow: hidden; max-width: var(--wrap); margin: 0 auto;
  padding: clamp(38px, 6vw, 76px); border-radius: 30px;
  background: var(--dark); color: oklch(0.97 0.008 150);
}
.cta__inner { position: relative; max-width: 640px; }
.cta h2 { margin-bottom: 18px; font-weight: 900; }
.cta p { color: oklch(0.86 0.015 150); max-width: 60ch; font-size: 18.5px; }
.cta .blob { top: -120px; right: -60px; width: 360px; height: 360px;
  background: oklch(0.62 0.15 156 / 0.35); animation: floaty 12s ease-in-out infinite; }
.cta .btn--primary { background: var(--brand-bright); color: oklch(0.2 0.03 168); box-shadow: none; }
.cta .btn--primary:hover { background: oklch(0.84 0.17 152); color: oklch(0.2 0.03 168); }
.cta .note { color: oklch(0.72 0.02 150); margin: 24px 0 0; }

.site-footer { padding: 44px 24px 60px; background: var(--dark); }
.site-footer__inner {
  max-width: var(--wrap); margin: 0 auto; display: grid; gap: 24px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.site-footer .logo span { color: #fff; }
.site-footer p { margin: 0; font-size: 12.5px; line-height: 1.7; color: oklch(0.7 0.015 190); }
.site-footer a { color: oklch(0.82 0.1 155); }
.site-footer a:hover { color: oklch(0.88 0.12 153); }
.site-footer img { width: 32px; height: 32px; }

/* ==========================================================================
   9. Макет интерфейса программы (используется в герое, галерее и вкладках)
   ========================================================================== */
.app {
  position: absolute; inset: 0; container-type: size;
  overflow: hidden; background: var(--surface);
}
.app__scale {
  width: 100%; height: 100%; font-size: 2.9cqh; line-height: 1.4;
  display: flex; flex-direction: column; overflow: hidden;
}
.app--static { position: relative; inset: auto; aspect-ratio: 16 / 10; border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow); }

.app__bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: .5em; padding: .42em .6em;
  background: oklch(0.965 0.005 155); border-bottom: 1px solid var(--line-soft);
}
.app__bar img { width: .9em; height: .9em; }
.app__title { font-family: var(--font-mono); font-size: .62em; color: var(--ink-mute); }
.app__win { margin-left: auto; display: flex; gap: .55em; font-size: .6em; color: var(--ink-mute); }
.app__win i:last-child { color: oklch(0.58 0.1 25); font-style: normal; }

.app__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 36% 64%; overflow: hidden; }

.aside { display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: oklch(0.99 0.003 155); border-right: 1px solid var(--line-soft); }
.aside__head { flex: 0 0 auto; display: flex; align-items: center; padding: .5em;
  border-bottom: 1px solid var(--line-soft); font-family: var(--font-display); font-weight: 800; font-size: .8em; }
.aside__search { flex: 0 0 auto; margin: .4em .5em; height: 1.5em; padding: 0 .6em;
  display: flex; align-items: center; gap: .3em; border-radius: 999px;
  background: oklch(0.945 0.006 155); font-size: .6em; color: var(--ink-mute); }
.aside__filters { flex: 0 0 auto; display: flex; gap: .3em; padding: 0 .5em .45em; }
.aside__filters i { font-style: normal; padding: .18em .55em; border-radius: 999px;
  background: oklch(0.945 0.006 155); font-size: .52em; color: var(--ink-mute); }
.aside__filters i.on { background: oklch(0.62 0.14 158 / 0.18); color: var(--brand-ink); font-weight: 700; }
.aside__list { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

.chatrow { flex: 0 0 auto; display: flex; align-items: center; gap: .45em; padding: .5em;
  border-bottom: 1px solid oklch(0.965 0.004 155); border-left: .14em solid transparent; }
.chatrow.is-open { background: oklch(0.62 0.14 158 / 0.1); border-left-color: var(--brand); }
.chatrow__ava { position: relative; overflow: hidden; flex: 0 0 auto; width: 1.65em; height: 1.65em; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: .62em;
  background: oklch(0.9 0.045 var(--hue, 158)); color: oklch(0.42 0.09 var(--hue, 158)); }
.chatrow__ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chatrow__text { flex: 1; min-width: 0; display: grid; gap: .08em; }
.chatrow__top { display: flex; align-items: baseline; gap: .3em; }
.chatrow__name { font-weight: 700; font-size: .68em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chatrow__time { margin-left: auto; font-size: .5em; color: var(--ink-mute); }
.chatrow__last { display: flex; align-items: center; gap: .3em; min-width: 0;
  font-size: .56em; color: var(--ink-mute); }
.chatrow__last b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.chatrow__badge { flex: 0 0 auto; padding: 0 .35em; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: .46em; font-weight: 700; }

.talk { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.talk__head { flex: 0 0 auto; display: flex; align-items: center; gap: .5em;
  padding: .45em .6em; border-bottom: 1px solid var(--line-soft); }
.talk__ava { position: relative; overflow: hidden; width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center;
  background: oklch(0.62 0.14 158 / 0.3); color: oklch(0.36 0.1 160); font-weight: 700; font-size: .7em; }
.talk__ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.talk__who { display: grid; gap: .1em; min-width: 0; }
.talk__who b { font-size: .75em; }
.talk__who span { font-size: .55em; color: oklch(0.6 0.09 158); font-weight: 600; }
.talk__tools { margin-left: auto; display: flex; gap: .6em; font-size: .8em; color: var(--ink-mute); }

.talk__body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column;
  justify-content: flex-end; gap: .4em; padding: .6em; background: oklch(0.975 0.008 120); }
.day { flex: 0 0 auto; align-self: center; padding: .15em .5em; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-soft);
  font-size: .52em; font-weight: 600; color: var(--ink-mute); }

.bubble { position: relative; flex: 0 0 auto; max-width: 72%; padding: .4em .55em; font-size: .68em;
  border-radius: .6em .6em .6em .15em; background: var(--surface); border: 1px solid var(--line-soft);
  align-self: flex-start; transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.bubble--out { align-self: flex-end; background: oklch(0.88 0.09 152); border-color: transparent;
  border-radius: .6em .6em .15em .6em; }
.bubble time { display: block; text-align: right; font-size: .68em; color: var(--ink-mute); }
.bubble--out time { color: oklch(0.45 0.05 160); }
.bubble time b { color: oklch(0.55 0.1 232); }
.bubble--photo { max-width: 58%; padding: .28em; }
.bubble--photo img { display: block; width: 100%; height: 4.6em; object-fit: cover; border-radius: .4em; }
.bubble__react { position: absolute; left: .5em; bottom: -.75em; font-style: normal;
  padding: .02em .3em; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--line-soft); box-shadow: 0 .1em .3em oklch(0.24 0.02 165 / 0.12); font-size: .62em; }
.bubble--photo span { display: flex; align-items: baseline; gap: .3em; padding: .25em .25em .1em; font-size: .95em; }
.bubble--voice { display: flex; align-items: center; gap: .45em; }
.bubble--voice i { flex: 0 0 auto; width: 1.4em; height: 1.4em; border-radius: 50%;
  background: var(--brand); color: #fff; display: grid; place-items: center; font-size: .6em; font-style: normal; }
.bubble--voice u { flex: 1; height: .22em; border-radius: 999px; background: oklch(0.72 0.06 155); }
.bubble--voice span { font-size: .85em; color: oklch(0.42 0.05 160); }
.bubble--file { display: flex; align-items: center; gap: .45em; }
.bubble--file i { flex: 0 0 auto; width: 1.5em; height: 1.5em; border-radius: .35em;
  background: var(--brand); color: #fff; display: grid; place-items: center; font-size: .9em; font-style: normal; }
.bubble--file b { display: block; font-size: .92em; }
.bubble--file span { display: block; font-size: .78em; color: oklch(0.45 0.05 160); }
.bubble--typing { display: flex; gap: .25em; }
.bubble--typing i { width: .3em; height: .3em; border-radius: 50%; background: var(--ink-mute);
  animation: dotJump 1.3s ease-in-out infinite; }
.bubble--typing i:nth-child(2) { animation-delay: .18s; }
.bubble--typing i:nth-child(3) { animation-delay: .36s; }

.composer { flex: 0 0 auto; display: flex; align-items: center; gap: .5em;
  padding: .45em .6em; border-top: 1px solid var(--line-soft); }
.composer__plus { font-size: .85em; color: var(--ink-mute); }
.composer__field { flex: 1; height: 1.5em; padding: 0 .6em; display: flex; align-items: center;
  border-radius: 999px; background: oklch(0.96 0.006 155); font-size: .6em; color: var(--ink-mute); }
.composer__send { flex: 0 0 auto; width: 1.5em; height: 1.5em; border-radius: 50%;
  background: var(--brand); color: #fff; display: grid; place-items: center; font-size: .62em; }

/* Перетаскивание файла --------------------------------------------------- */
.dropzone { flex: 0 0 auto; align-self: center; width: 88%; padding: .8em .6em;
  display: grid; justify-items: center; gap: .3em; text-align: center;
  border: .12em dashed var(--brand); border-radius: .7em; background: oklch(0.62 0.14 158 / 0.08); }
.dropzone i { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: .45em;
  background: var(--brand); color: #fff; font-size: .85em; font-style: normal; }
.dropzone b { font-family: var(--font-display); font-size: .78em; line-height: 1.2; }
.dropzone span { font-size: .56em; color: oklch(0.5 0.02 165); }

/* Звонок ----------------------------------------------------------------- */
.call { flex: 1; min-height: 0; position: relative; overflow: hidden; padding: .8em;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45em;
  background: oklch(0.26 0.02 168); color: #fff; }
.call__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(18px) brightness(.45); transform: scale(1.2); }
.call__ava, .call__name, .call__timer, .call__controls { position: relative; }
.call__ava { overflow: hidden; width: 3.4em; height: 3.4em; border-radius: 50%; display: grid; place-items: center;
  background: oklch(0.62 0.14 158 / 0.35); font-family: var(--font-display); font-weight: 800; font-size: 1.3em;
  box-shadow: 0 0 0 .12em oklch(1 0 0 / 0.25); }
.call__ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.call__name { font-family: var(--font-display); font-weight: 800; font-size: 1em; }
.call__timer { font-family: var(--font-mono); font-size: .6em; color: oklch(0.78 0.03 150); }
.call__controls { display: flex; gap: .5em; margin-top: .3em; }
.call__controls i { width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center;
  background: oklch(0.36 0.02 168); font-size: .72em; font-style: normal; }
.call__controls i:last-child { background: oklch(0.55 0.16 25); }
.call__self { position: absolute; right: .6em; bottom: .6em; width: 20%; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: .5em; background: oklch(0.34 0.02 168); border: 1px solid oklch(0.52 0.02 168);
  display: grid; place-items: center; font-size: .55em; color: oklch(0.72 0.02 150); }
.call__self img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.call__secure { position: absolute; left: .6em; top: .6em; display: flex; align-items: center; gap: .35em;
  padding: .25em .55em; border-radius: 999px; background: oklch(0.32 0.02 168);
  font-size: .52em; font-weight: 600; color: oklch(0.86 0.02 150); }
.call__secure::before { content: ""; width: .4em; height: .4em; border-radius: 50%; background: oklch(0.68 0.15 158); }

/* Вход по QR-коду -------------------------------------------------------- */
.login { flex: 1; min-height: 0; overflow: hidden; display: grid; align-items: center;
  grid-template-columns: 52% 48%; gap: .8em; padding: 1em 1.1em; background: var(--surface); }
.login h4 { margin: 0 0 .2em; font-family: var(--font-display); font-size: 1.05em; }
.login li { display: flex; gap: .45em; margin-top: .5em; font-size: .62em; color: var(--ink-soft); }
.login li i { flex: 0 0 auto; width: 1.5em; height: 1.5em; border-radius: 50%; font-style: normal;
  background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; font-weight: 700; }
.qr { position: relative; justify-self: center; padding: .5em; border-radius: .6em; background: var(--surface);
  border: 1px solid var(--line-soft); box-shadow: 0 .4em 1em -.6em oklch(0.24 0.02 165 / 0.4); }
.qr__logo { position: absolute; inset: 0; margin: auto; width: 24%; aspect-ratio: 1;
  background: var(--surface); border-radius: 22%; padding: .2em; }

/* Групповой видеозвонок ------------------------------------------------ */
.gcall { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .45em;
  padding: .5em; background: oklch(0.2 0.02 195); }
.gcall__head { flex: 0 0 auto; display: flex; align-items: baseline; gap: .4em;
  padding: .05em .15em; color: #fff; font-size: .62em; }
.gcall__head span { margin-left: auto; font-family: var(--font-mono); font-size: .85em; color: oklch(0.75 0.02 190); }
.gcall__grid { flex: 1; min-height: 0; display: grid; gap: .45em;
  grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.gcall__tile { position: relative; overflow: hidden; border-radius: .5em; background: oklch(0.3 0.02 190); }
.gcall__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gcall__tile b { position: absolute; left: .35em; bottom: .3em; padding: .08em .45em;
  border-radius: 999px; background: oklch(0 0 0 / 0.5); color: #fff; font-size: .5em; font-weight: 600; }
.gcall__tile i { position: absolute; right: .35em; top: .3em; width: 1.2em; height: 1.2em;
  display: grid; place-items: center; border-radius: 50%; background: oklch(0 0 0 / 0.5);
  color: #fff; font-style: normal; font-size: .5em; }
.gcall__bar { flex: 0 0 auto; display: flex; justify-content: center; gap: .5em; }
.gcall__bar i { width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center;
  background: oklch(0.34 0.02 190); color: #fff; font-style: normal; font-size: .72em; }
.gcall__bar i.end { background: oklch(0.55 0.16 25); }

/* Файлы чата --------------------------------------------------------------- */
.docs { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--surface); overflow: hidden; }
.docs__head { flex: 0 0 auto; padding: .5em .65em; border-bottom: 1px solid var(--line-soft);
  font-weight: 700; font-size: .7em; }
.docs__tabs { flex: 0 0 auto; display: flex; gap: .3em; padding: .4em .65em; border-bottom: 1px solid var(--line-soft); }
.docs__tabs i { font-style: normal; padding: .18em .55em; border-radius: 999px;
  background: oklch(0.945 0.006 155); font-size: .55em; color: var(--ink-mute); }
.docs__tabs i.on { background: var(--brand-soft); color: var(--brand-ink); font-weight: 700; }
.docrow { flex: 0 0 auto; display: flex; align-items: center; gap: .5em; padding: .42em .65em;
  border-bottom: 1px solid oklch(0.965 0.004 155); }
.docrow > i { flex: 0 0 auto; width: 1.7em; height: 1.7em; border-radius: .4em;
  display: grid; place-items: center; color: #fff; font-style: normal; font-weight: 700; font-size: .52em; }
.docrow--pdf > i { background: oklch(0.58 0.17 25); }
.docrow--doc > i { background: oklch(0.55 0.14 245); }
.docrow--xls > i { background: oklch(0.55 0.14 150); }
.docrow--img > i { background: oklch(0.6 0.13 300); }
.docrow div { flex: 1; min-width: 0; display: grid; gap: .06em; }
.docrow b { font-size: .6em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docrow small { font-size: .5em; color: var(--ink-mute); }
.docrow time { flex: 0 0 auto; font-size: .5em; color: var(--ink-mute); }

/* Настройки --------------------------------------------------------------- */
.set { flex: 1; min-height: 0; display: grid; grid-template-columns: 38% 62%; overflow: hidden; }
.set__nav { display: flex; flex-direction: column; overflow: hidden;
  border-right: 1px solid var(--line-soft); background: oklch(0.99 0.003 155); }
.set__me { display: flex; align-items: center; gap: .5em; padding: .55em .6em; border-bottom: 1px solid var(--line-soft); }
.set__me img { width: 1.9em; height: 1.9em; border-radius: 50%; object-fit: cover; }
.set__me b { display: block; font-size: .62em; }
.set__me small { display: block; font-size: .5em; color: var(--ink-mute); }
.setrow { display: flex; align-items: center; gap: .5em; padding: .4em .6em; font-size: .6em; color: var(--ink-soft); }
.setrow i { font-style: normal; flex: 0 0 auto; width: 1.5em; height: 1.5em; border-radius: 50%;
  background: oklch(0.945 0.006 155); display: grid; place-items: center; font-size: .8em; }
.setrow.on { background: var(--brand-soft); color: var(--brand-ink); font-weight: 700; }
.set__panel { padding: .55em .7em; overflow: hidden; }
.set__panel h5 { margin: 0 0 .25em; font-family: var(--font-display); font-size: .72em; }
.togrow { display: flex; align-items: center; gap: .5em; padding: .38em 0;
  border-bottom: 1px solid oklch(0.965 0.004 155); font-size: .58em; }
.togrow div { flex: 1; min-width: 0; }
.togrow b { display: block; }
.togrow small { color: var(--ink-mute); }
.tog { flex: 0 0 auto; width: 1.9em; height: 1.05em; border-radius: 999px; background: var(--brand); position: relative; }
.tog::after { content: ""; position: absolute; top: .14em; right: .14em; width: .78em; height: .78em;
  border-radius: 50%; background: #fff; }
.tog.off { background: oklch(0.87 0.01 155); }
.tog.off::after { left: .14em; right: auto; }
.qr__grid { display: grid; grid-template-columns: repeat(21, 1fr); height: 7em; aspect-ratio: 1; }
.qr__grid i { display: block; }
.qr__grid i.on { background: oklch(0.22 0.02 165); }

/* ==========================================================================
   10. Анимации
   ========================================================================== */
@keyframes ring   { 0% { transform: scale(.85); opacity: .55; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes floaty { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(0,-26px,0) scale(1.07); } }
@keyframes bobbing{ 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes dotJump{ 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes revealUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

.reveal { animation: revealUp .85s cubic-bezier(.2,.75,.2,1) both; animation-timeline: view();
  animation-range: entry 2% cover 22%; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   11. Узкие экраны
   ========================================================================== */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .site-nav { display: none; }
  .hero__toast { left: 8px; bottom: 12px; font-size: 12px; }
  .app__body { grid-template-columns: 42% 58%; }
  .login { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}