@font-face {
  font-family: Onest; font-weight: 100 900; font-display: swap;
  src: url(/assets/onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Onest; font-weight: 100 900; font-display: swap;
  src: url(/assets/onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215;
}

:root {
  --paper: #fff;
  --ink: #111;
  --muted: #6b6b6b;
  --line: #e9e9e9;
  --soft: #f5f5f5;
  --red: #d33a2c;
  --placeholder: #8a8a8a;
  --shadow: rgb(0 0 0 / .12);
  /* The line drawings are black ink on white. Inverting by 0.929 lands white exactly on the dark paper
     (#121212) and the ink on #ededed, so no blending is needed. */
  --art-filter: none;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
/* Dark: the same paper-and-ink, turned over. Telegram's own scheme wins inside the Mini App (data-theme). */
:root[data-theme="dark"] {
  --paper: #121212; --ink: #f2f2f2; --muted: #a0a0a0; --line: #2c2c2c; --soft: #1e1e1e; --red: #e0483a;
  --placeholder: #8c8c8c; --shadow: rgb(0 0 0 / .5); --art-filter: invert(.929);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121212; --ink: #f2f2f2; --muted: #a0a0a0; --line: #2c2c2c; --soft: #1e1e1e; --red: #e0483a;
    --placeholder: #8c8c8c; --shadow: rgb(0 0 0 / .5); --art-filter: invert(.929);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--paper); }
body {
  font: 400 17px/1.45 Onest, system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  font-variant-numeric: tabular-nums;
}
::selection { background: var(--ink); color: var(--paper); }
/* A long press on a button must not select its label or open the iOS callout. */
button, .button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
input { caret-color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

#app {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  max-width: 440px; margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
}
.stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; }
.dock { display: grid; gap: 12px; padding-top: 24px; }

.art { width: min(78%, 300px); height: auto; margin-bottom: 36px; user-select: none; -webkit-user-drag: none; filter: var(--art-filter); }
h1 { font-size: 30px; line-height: 1.15; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
.lead { color: var(--muted); max-width: 30ch; text-wrap: pretty; }
.lead b { color: var(--ink); font-weight: 500; }

.button {
  appearance: none; border: 0; cursor: pointer;
  height: 56px; border-radius: 28px; width: 100%;
  font: 500 17px/1 Onest, system-ui, sans-serif;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ink); color: var(--paper);
  transition: transform .2s var(--ease), opacity .2s;
  text-decoration: none;
}
.button svg { width: 20px; height: 20px; flex: none; }
.button:active { transform: scale(.98); }
.button[disabled] { opacity: .45; cursor: default; }
.button.quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.link { appearance: none; background: none; border: 0; padding: 8px; font: inherit; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line); cursor: pointer; }

.field { width: 100%; text-align: left; display: grid; gap: 8px; }
.field span { font-size: 14px; color: var(--muted); }
.field input {
  height: 56px; border-radius: 16px; border: 1px solid var(--line); padding: 0 18px;
  font: 400 17px Onest, system-ui, sans-serif; color: var(--ink); background: var(--paper);
  transition: border-color .2s;
}
.field input:focus { outline: none; border-color: var(--ink); }
.field input::placeholder { color: var(--placeholder); }
.error { color: var(--red); font-size: 15px; min-height: 22px; }

/* In the call. It enters like every other screen; after that it is updated in place, so nothing re-enters. */
.call { flex: 1; display: flex; flex-direction: column; animation: enter .5s var(--ease) both; }
.call header { position: relative; text-align: center; padding-top: 8px; }
.call header h1 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.call header p { color: var(--muted); font-size: 15px; margin-top: 2px; }
.seal {
  appearance: none; border: 0; background: none; cursor: pointer; font: inherit; color: var(--muted);
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 12px; min-height: 40px;
  border-radius: 20px; transition: background .2s var(--ease);
}
.seal .icon { width: 15px; height: 15px; flex: none; }
.seal-emoji { animation: settle .45s var(--ease) both; font-size: 22px; line-height: 1; letter-spacing: 0.12em; margin-right: -0.12em; }
.seal-wait { font-size: 15px; }
.seal[aria-expanded="true"], .seal:active { background: var(--soft); }
.notice.seal-notice { margin-top: 14px; margin-bottom: 0; }

/* Recording: a quiet ring-and-dot in the header's corner; while a recording is on, a pill with a slowly
   breathing red dot for everyone in the call. Red here means «live», as on any recorder. */
.rec {
  appearance: none; border: 0; cursor: pointer; position: absolute; top: 0; right: 0; z-index: 3;
  min-width: 44px; height: 44px; border-radius: 22px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: none; color: var(--muted); font: 500 14px/1 Onest, system-ui, sans-serif;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.rec .icon { width: 22px; height: 22px; }
.rec:hover, .rec[aria-expanded="true"] { background: var(--soft); color: var(--ink); }
.rec:active { transform: scale(.94); }
.rec.live { color: var(--ink); background: var(--soft); height: 34px; top: 5px; padding: 0 12px 0 10px; }
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: rec-breathe 2.4s ease-in-out infinite; }
@keyframes rec-breathe { 50% { opacity: .35; } }
.rec-pop {
  position: absolute; top: 52px; right: 0; z-index: 10; width: min(340px, calc(100vw - 48px));
  padding: 16px 18px; border-radius: 18px; text-align: left; display: grid; gap: 14px;
  background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 16px 40px -12px var(--shadow);
  transform-origin: calc(100% - 22px) 0; animation: pop .22s var(--ease) both;
}
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
/* Sharing your screen: a live thumbnail of it in the header's left corner, across from «Запись».
   It grows out of its corner; hovered or focused, it offers to stop. */
.peek {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  position: absolute; top: 4px; left: 0; z-index: 3; display: grid; justify-items: start; gap: 6px;
  color: var(--muted); font-size: 12px; line-height: 1; border-radius: 10px;
  transform-origin: 0 0; animation: peek .45s var(--ease) both;
}
@keyframes peek { from { opacity: 0; transform: scale(.9); filter: blur(4px); } }
.peek-frame {
  position: relative; display: block; width: 96px; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
  background: #000; box-shadow: 0 0 0 1px var(--line), 0 8px 22px -10px var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.peek-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.peek-stop {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 0 10px; text-align: center;
  background: color-mix(in srgb, var(--ink) 64%, transparent); color: var(--paper); font-weight: 500; line-height: 1.2;
  opacity: 0; transition: opacity .2s var(--ease);
}
.peek:hover .peek-frame, .peek:focus-visible .peek-frame { transform: scale(1.04); box-shadow: 0 0 0 1px var(--line), 0 12px 28px -10px var(--shadow); }
.peek:hover .peek-stop, .peek:focus-visible .peek-stop { opacity: 1; }
.peek:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.peek:active .peek-frame { transform: scale(.97); }
/* A narrow window: a smaller picture and no caption, clear of the encryption seal. */
@media (max-width: 520px) { .peek-frame { width: 64px; border-radius: 8px; } .peek-label { display: none; } .peek-stop { font-size: 0; } }
.rec-pop p { font-size: 15px; color: var(--muted); text-wrap: pretty; }
.rec-pop b { display: block; color: var(--ink); font-weight: 600; font-size: 17px; margin-bottom: 4px; }
.rec-pop .chip { display: inline-flex; align-items: center; padding: 0 14px; text-decoration: none; }
.rec-pop .chip[disabled] { opacity: .45; }
/* Keeping your voice out is always the quiet chip, also when it is the only one left. */
.rec-pop .chip.quiet { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.rec-sent { margin-top: 4px; }
.people {
  flex: 1; display: flex; flex-wrap: wrap; align-content: center; justify-content: center;
  gap: 32px 28px; padding: 32px 0;
}
.person { width: 104px; display: grid; justify-items: center; align-content: start; gap: 12px; }
.face {
  position: relative; width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-items: center; background: var(--soft);
  font-size: 34px; font-weight: 500; letter-spacing: -0.02em;
}
.people.many .person { width: 84px; }
.people.many .face { width: 76px; height: 76px; font-size: 28px; }
/* The ring breathes with the speaker's voice. */
.face::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 1.5px solid var(--ink); opacity: 0;
  transform: scale(calc(.94 + var(--level, 0) * .16));
  transition: opacity .25s, transform .12s linear;
}
.person.speaking .face::after { opacity: 1; }
.face .muted {
  position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--paper); box-shadow: 0 1px 4px var(--shadow); display: grid; place-items: center;
}
.face .muted svg { width: 16px; height: 16px; }
/* Weak link: signal bars with one lit, a badge on the face opposite the muted mic. */
.face .weak {
  position: absolute; right: -2px; top: -2px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--paper); box-shadow: 0 1px 4px var(--shadow); display: grid; place-items: center;
}
.face .weak svg { width: 16px; height: 16px; stroke-width: 2.25; }
.call header p .weak { display: inline-flex; vertical-align: -3px; margin-left: 6px; color: var(--ink); }
.call header p .weak svg { width: 17px; height: 17px; stroke-width: 2.25; }
.tile .tag .weak { display: inline-flex; }
.tile .tag .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tile .tag .weak svg { stroke-width: 2.25; }
.face video { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.person .name { font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.waiting { text-align: center; color: var(--muted); padding-bottom: 8px; }

.controls { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: clamp(12px, 5vw, 28px); padding: 12px 0 36px; }
.control { display: grid; justify-items: center; align-content: start; gap: 8px; font-size: 13px; white-space: nowrap; color: var(--muted); }
.control > button, .mic-wrap > button {
  appearance: none; border: 0; cursor: pointer; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .2s var(--ease), background .2s, color .2s;
}
.control > button:active, .mic-wrap > button:active { transform: scale(.94); }
.control > button[aria-pressed="true"], .mic-wrap > button[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.control > button.leave { background: var(--red); color: #fff; box-shadow: none; }
.control > button[disabled], .mic-wrap > button[disabled] { opacity: .45; }
.control > button svg, .mic-wrap > button svg { width: 26px; height: 26px; }
/* Every control gets an equal share of the row (at most 92px; the row borrows 16px of each side margin), so three
   to five of them always fit: on a narrow phone the buttons shrink towards 48px and the labels towards 12px instead of running off screen. */
@supports (width: 1cqi) {
  .controls { gap: 0; margin-inline: -16px; container-type: inline-size; --n: 3; }
  .controls:has(> .control:nth-child(4)) { --n: 4; }
  .controls:has(> .control:nth-child(5)) { --n: 5; }
  .control { --slot: min(92px, 100cqi / var(--n)); width: var(--slot); flex: none; font-size: clamp(12px, var(--slot) / 6.2, 13px); }
  .control > button, .mic-wrap > button { width: clamp(48px, var(--slot) - 12px, 64px); height: clamp(48px, var(--slot) - 12px, 64px); }
}

/* Microphone and camera: the main toggle plus a small chevron that opens the device list,
   shown only when there is more than one device. The list sits centred above the whole row of controls,
   so it never runs off the edge of a phone screen. */
.mic-wrap { position: relative; }
.control .mic-more {
  position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px;
  background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 3px var(--shadow);
}
.control .mic-more svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.control .mic-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.mic-menu {
  position: absolute; left: 0; right: 0; margin: 0 auto; bottom: calc(100% + 4px); z-index: 10;
  width: min(340px, 100%); padding: 6px; border-radius: 18px;
  background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 12px 32px -8px var(--shadow);
  display: grid; gap: 2px; transform-origin: 50% 100%;
  animation: menu .22s var(--ease) both;
}
@keyframes menu { from { opacity: 0; transform: translateY(6px) scale(.97); } }
.mic-option {
  appearance: none; border: 0; background: none; cursor: pointer; text-align: left;
  min-height: 48px; padding: 10px 14px; border-radius: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font: 400 16px/1.3 Onest, system-ui, sans-serif; color: var(--ink);
}
.mic-option span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mic-option:hover, .mic-option:focus-visible { background: var(--soft); outline: none; }
.mic-option[aria-selected="true"] { font-weight: 500; }
.mic-option svg { width: 18px; height: 18px; flex: none; }
/* Microphones and outputs in one menu: two quiet labels, a hairline between. */
.mic-menu > [role="listbox"] { display: grid; gap: 2px; }
.mic-menu > [role="listbox"] + [role="listbox"] { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.menu-label { padding: 6px 14px 2px; font-size: 13px; color: var(--muted); }

svg.icon { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.notice {
  margin: 0 auto 20px; width: 100%; padding: 16px 18px; border-radius: 18px;
  background: var(--soft); display: grid; gap: 12px; text-align: left;
  animation: rise .3s var(--ease) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.notice p { font-size: 15px; color: var(--muted); }
.notice b { display: block; color: var(--ink); font-weight: 600; font-size: 17px; margin-bottom: 2px; }
.notice-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  appearance: none; border: 0; cursor: pointer; height: 40px; padding: 0 16px; border-radius: 20px;
  font: 500 15px/1 Onest, system-ui, sans-serif; background: var(--ink); color: var(--paper);
  transition: transform .2s var(--ease);
}
.chip + .chip { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.chip:active { transform: scale(.97); }

/* ——— Video and screen sharing (experimental) ——— */
/* With pictures on screen the column widens; the controls stay one centred row. */
body.wide #app { max-width: 1240px; height: 100dvh; }
.call.visual .controls { padding-bottom: 20px; }
.tiles {
  flex: 1; min-height: 0; position: relative; margin: 20px 0 8px;
  display: grid; gap: 8px; grid-template-columns: 1fr; grid-auto-rows: minmax(0, 1fr);
}
.tiles[data-n="3"], .tiles[data-n="4"], .tiles[data-n="5"], .tiles[data-n="6"], .tiles[data-n="7"], .tiles[data-n="8"] { grid-template-columns: 1fr 1fr; }
/* Two columns and an odd count: the last person takes the whole bottom row instead of leaving a hole. */
.tiles[data-n="3"] > .tile:last-child, .tiles[data-n="5"] > .tile:last-child, .tiles[data-n="7"] > .tile:last-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .tiles[data-n="3"] > .tile:last-child, .tiles[data-n="5"] > .tile:last-child, .tiles[data-n="7"] > .tile:last-child { grid-column: auto; }
  .tiles[data-n="3"], .tiles[data-n="5"], .tiles[data-n="6"] { grid-template-columns: repeat(3, 1fr); }
  .tiles[data-n="7"], .tiles[data-n="8"] { grid-template-columns: repeat(4, 1fr); }
}
.tile {
  position: relative; min-height: 120px; border-radius: 20px; overflow: hidden; background: var(--soft);
  display: grid; place-items: center; outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .25s;
}
.tile.speaking { outline-color: var(--ink); }
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.tile.mirror video { transform: scaleX(-1); }
.tile .initial { font-size: 40px; font-weight: 500; letter-spacing: -0.02em; color: var(--muted); }
.tile .tag {
  position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px);
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 14px;
  background: color-mix(in srgb, var(--paper) 86%, transparent); color: var(--ink); font-size: 14px; line-height: 18px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile .tag svg { width: 14px; height: 14px; flex: none; }
/* One-to-one: the other person fills the frame, you sit in the corner. */
.tile.pip {
  position: absolute; right: 12px; bottom: 12px; z-index: 2; width: clamp(96px, 26%, 220px); aspect-ratio: 3 / 4; min-height: 0;
  box-shadow: 0 6px 20px -6px var(--shadow), 0 0 0 1px var(--line);
}
@media (min-width: 900px) { .tile.pip { aspect-ratio: 4 / 3; } }
.tile.pip .initial { font-size: 26px; }
/* The other person's name stops short of your corner picture. */
.tiles[data-n="1"] > .tile:not(.pip) .tag { max-width: calc(100% - 44px - clamp(96px, 26%, 220px)); }
.tile.pip .tag { left: 6px; bottom: 6px; font-size: 12px; padding: 3px 8px; }
.round {
  appearance: none; border: 0; cursor: pointer; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink);
  background: color-mix(in srgb, var(--paper) 86%, transparent); transition: transform .2s var(--ease);
}
.round:active { transform: scale(.92); }
.round svg { width: 20px; height: 20px; }
.tile .flip { position: absolute; top: 8px; right: 8px; z-index: 1; }
.tile.pip .flip { width: 34px; height: 34px; top: 6px; right: 6px; }

/* A shared screen: the whole frame, letterboxed, never cropped. «1:1» shows it pixel for pixel. */
.screen {
  flex: 1; min-height: 0; position: relative; margin: 20px 0 8px; border-radius: 20px; overflow: hidden;
  background: #000; display: flex; flex-direction: column;
}
.screen .view { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.screen.actual .view { overflow: auto; overscroll-behavior: contain; }
.screen.actual video { position: static; width: auto; height: auto; max-width: none; }
.screen-bar { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.screen-bar > * { pointer-events: auto; }
.screen-bar .tag { margin-right: auto; padding: 5px 10px; border-radius: 14px; font-size: 14px; background: color-mix(in srgb, var(--paper) 86%, transparent); max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.screen-bar .round { width: auto; min-width: 40px; padding: 0 12px; border-radius: 20px; font: 500 14px/1 Onest, system-ui, sans-serif; }
.screen:fullscreen { margin: 0; border-radius: 0; }
/* Watching a shared screen: the header folds into one line and the strip slims down, so the screen gets the height. */
.call.showing header { display: flex; align-items: center; justify-content: center; gap: 4px 14px; flex-wrap: wrap; padding-top: 4px; }
.call.showing header h1 { font-size: 17px; }
.call.showing header p { margin-top: 0; font-size: 14px; }
.call.showing .seal { margin-top: 0; min-height: 32px; padding: 4px 10px; }
.call.showing .seal-emoji { font-size: 17px; }
.call.showing .screen { margin: 10px 0 4px; }
/* Under a shared screen people are chips, not circles: the name on soft fill (a muted-mic or weak-link icon before
   it), in one row (more scroll sideways under a fade). Circles stay the controls' shape, so the two rows no longer
   look alike. Whoever speaks gets an ink outline around their chip. */
.strip {
  display: flex; justify-content: safe center; gap: 6px; padding: 8px 24px 2px; margin: 0 -24px;
  overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.strip::-webkit-scrollbar { display: none; }
.strip .person {
  flex: none; width: auto; display: flex; align-items: center; gap: 5px; height: 34px; padding: 0 14px;
  border-radius: 17px; background: var(--soft); transition: box-shadow .25s;
}
.strip .person.speaking { box-shadow: inset 0 0 0 1.5px var(--ink); }
.strip .muted, .strip .weak { display: inline-flex; color: var(--muted); }
.strip .weak { color: var(--ink); }
.strip .muted svg, .strip .weak svg { width: 15px; height: 15px; }
.strip .weak svg { stroke-width: 2.25; }
.strip .name { font-size: 14px; max-width: 10em; }
.call.showing .controls { padding: 8px 0 12px; }
/* On a computer the people and the controls share one bar under the screen: the chips on the left, the controls centred. */
@media (min-width: 900px) {
  .bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 24px; padding: 4px 0 12px; }
  .bar .strip { justify-content: flex-start; padding: 0; margin: 0; }
  .call.showing .bar .controls { padding: 0; }
  @supports (width: 1cqi) { .call.showing .bar .controls { width: calc(var(--n) * 92px); margin-inline: 0; } }
}
/* Both sharing at once: your thumbnail joins the folded header line, small and first. */
.call.showing .peek { position: static; order: -1; grid-auto-flow: column; align-items: center; }
.call.showing .peek-frame { width: 52px; border-radius: 7px; }
.call.showing .peek-label { display: none; }

#toast {
  position: fixed; left: 50%; bottom: max(28px, env(safe-area-inset-bottom));
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 22px; font-size: 15px;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

.enter { animation: enter .6s var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
/* The key arrived: the four emoji come into focus in place of «Шифруем…». */
@keyframes settle { from { opacity: 0; filter: blur(6px); transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) {
  *, *::after { animation: none !important; transition: none !important; }
}

/* Post-call rating: one tap, skippable. */
.rate { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.rate p { width: 100%; margin: 0 0 4px; color: var(--muted, #777); }
.rate .button { width: auto; padding-inline: 16px; }