/* Оформление «Салема». Взято из согласованной вёрстки verstka/liniya.html:
   там те же имена классов, поэтому правку внешнего вида можно проверить в браузере
   без запуска приложения, а потом перенести сюда. */

:root{
  --ink:      #0d1320;   /* фон */
  --ink-2:    #131b2b;   /* панели */
  --ink-3:    #1b2438;   /* плитки */
  --ink-4:    #25314a;   /* кнопки */
  --line:     rgba(255,255,255,.09);
  --line-2:   rgba(255,255,255,.05);

  --tx:       #edf1f8;
  --tx-2:     #95a2ba;
  --tx-3:     #62708a;

  /* зелёный и красный заняты входом в встречу и выходом из неё.
     больше нигде не появляются — иначе они перестают значить это */
  --brand:    #7fa9ff;
  --brand-dk: #24365c;
  --ok:       #2fcf7c;
  --ok-dk:    #14331f;
  --bad:      #ff4d4d;
  --bad-dk:   #3a1620;
  --warn:     #f5a524;
  --warn-dk:  #3a2a12;

  --r-1: 10px; --r-2: 14px; --r-3: 18px; --r-4: 24px; --r-5: 32px;

  --ui: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#080c14;color:var(--tx);font:400 15px/1.5 var(--ui);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
svg{display:block}
.i{flex:none}
/* ─────────────────────────  оболочка документа  ───────────────────────── */
/* вырез рамки телефона — это про макет, а не про продукт:
   в настоящем браузере телефона сверху своя шапка */
/* ═══════════════════════════  приложение  ═══════════════════════════ */
.app{position:fixed;inset:0;container-type:inline-size;display:flex;background:radial-gradient(120% 90% at 50% -20%,#17203a 0%,transparent 60%),var(--ink);color:var(--tx);font-size:15px}
.app__col{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;position:relative;container-type:inline-size}
.app__body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;padding:14px;gap:10px}
/* живая линия связи — единственное украшение, и оно про состояние */
.wire{position:absolute;left:0;right:0;top:0;height:2px;overflow:hidden;z-index:40;background:rgba(255,255,255,.06)}
.wire::after{content:'';position:absolute;top:0;bottom:0;width:38%;background:linear-gradient(90deg,transparent,var(--ok),transparent);animation:wire 3.4s linear infinite}
@keyframes wire{
from{left:-40%}
to{left:100%}
}
.app[data-net="weak"] .wire::after{background:linear-gradient(90deg,transparent,var(--warn),transparent);animation-duration:1.5s}
.app[data-net="lost"] .wire::after{background:linear-gradient(90deg,transparent,var(--tx-3),transparent);animation-duration:2.4s}
.app[data-net="off"] .wire{display:none}
@media (prefers-reduced-motion:reduce){
.wire::after{animation:none;left:0;width:100%;opacity:.5}
}
.top{display:flex;align-items:center;gap:12px;padding:12px 16px 0;min-height:44px}
.top__who{min-width:0}
.top__name{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top__meta{color:var(--tx-2);font-size:12.5px;margin-top:1px}
.top__sp{flex:1}
.chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--tx-2);white-space:nowrap}
.chip--rec{color:#ffd79a;background:var(--warn-dk);border-color:rgba(245,165,36,.3)}
.chip--warn{color:#ffd79a;background:var(--warn-dk);border-color:rgba(245,165,36,.3)}
.chip--info{color:#cfe0ff;background:var(--brand-dk);border-color:rgba(127,169,255,.28)}
.chip--btn{cursor:pointer}
.chip--btn:hover{border-color:var(--tx-3);color:var(--tx)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.dot--live{animation:blink 1.6s ease-in-out infinite}
@keyframes blink{
0%,100%{opacity:1}
50%{opacity:.25}
}
@media (prefers-reduced-motion:reduce){
.dot--live{animation:none}
}
.timer{font:300 15px/1 var(--mono);letter-spacing:.02em;color:var(--tx);font-variant-numeric:tabular-nums}
/* ── раскладка встречи ── */
.scene{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}
.scene__main{flex:1;min-height:0;display:flex}
.scene__main > .tile{flex:1}
.scene__strip{display:flex;gap:10px;height:118px;flex:none}
.scene__strip > .tile{flex:1;min-width:0}
.scene[data-view="side"]{flex-direction:row}
.scene[data-view="side"] .scene__strip{flex-direction:column;height:auto;width:190px}
.scene[data-view="grid"]{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px}
.scene[data-view="grid"] .scene__main{display:contents}
.scene[data-view="grid"] .scene__strip{display:contents}
.grid{flex:1;min-height:0;display:grid;gap:10px}
.grid[data-n="1"]{grid-template-columns:1fr}
.grid[data-n="2"]{grid-template-columns:1fr 1fr}
.grid[data-n="4"]{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.grid[data-n="9"]{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}
.tile{position:relative;overflow:hidden;min-width:0;min-height:0;background:var(--ink-3);border-radius:var(--r-3);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center}
.tile.is-live{border-color:rgba(47,207,124,.55);box-shadow:0 0 0 1px rgba(47,207,124,.35),0 0 34px -14px var(--ok)}
.tile__cam{position:absolute;inset:0}
.tile__cam svg{width:100%;height:100%}
.tile__veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,10,18,.72))}
.tile__foot{position:absolute;left:12px;right:12px;bottom:11px;display:flex;align-items:center;gap:8px;z-index:2}
.tile__name{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:5px 10px;border-radius:9px;background:rgba(8,12,20,.6);backdrop-filter:blur(6px);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile__mark{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;background:rgba(8,12,20,.6);backdrop-filter:blur(6px)}
.tile__mark--off{color:var(--bad)}
.tile__corner{position:absolute;top:12px;right:12px;z-index:2}
.scene__strip .ava{--s:56px}
.scene[data-view="grid"] .ava{--s:86px}
.scene__strip .tile__name,.pip .tile__name{font-size:11.5px;padding:3px 8px}
.scene__strip .tile__foot{left:8px;right:8px;bottom:7px}
.face{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:20px;z-index:1}
.ava{--s:112px;width:var(--s);height:var(--s);border-radius:50%;display:grid;place-items:center;flex:none;position:relative;font-weight:700;font-size:calc(var(--s)/2.8);letter-spacing:-.02em;color:#0b1120;background:linear-gradient(150deg,#9fc0ff,#6f8fd8)}
.ava--b{background:linear-gradient(150deg,#ffd79a,#e2a45a)}
.ava--c{background:linear-gradient(150deg,#a9e6c4,#6bbd92)}
.ava--d{background:linear-gradient(150deg,#e3b6ff,#a67ed0)}
.ava--e{background:linear-gradient(150deg,#ffb4b4,#d97878)}
.ava.is-live::after{content:'';position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--ok);opacity:.85;animation:ring 1.9s ease-out infinite}
@keyframes ring{
0%{transform:scale(.96);opacity:.85}
70%{transform:scale(1.13);opacity:0}
100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
.ava.is-live::after{animation:none;opacity:.6}
}
.face__n{font-size:20px;font-weight:700;letter-spacing:-.01em}
.face__s{color:var(--tx-2);font-size:14px;margin-top:5px}
.pip{position:absolute;right:16px;bottom:16px;width:190px;aspect-ratio:4/3;z-index:6;border-radius:var(--r-2);overflow:hidden;border:1px solid var(--line);background:var(--ink-3);box-shadow:0 16px 34px -18px #000}
.pip .tile__foot{left:8px;right:8px;bottom:7px}
/* ── панель управления ── */
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:12px 16px 16px}
.bar__g{display:flex;align-items:center;gap:8px}
.bar__g--r{justify-content:flex-end}
.ctl{height:52px;min-width:52px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:var(--r-3);background:var(--ink-4);color:var(--tx);font-size:14px;font-weight:600;transition:background .14s,transform .1s,color .14s;position:relative}
.ctl:hover{background:#2f3d5c}
.ctl:active{transform:scale(.96)}
.ctl--sq{padding:0;width:52px}
.ctl__t{white-space:nowrap}
.ctl__b{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--brand);color:#0d1320;font:700 12px/20px var(--ui);text-align:center}
.ctl.is-on{background:#fff;color:#0d1320}
.ctl.is-on .ctl__b{background:var(--brand-dk);color:#dce7ff}
.ctl.is-off{background:var(--bad-dk);color:#ff9a9a}
.ctl.is-off:hover{background:#4a1c26}
.ctl[data-ctl="rec"].is-on{background:var(--bad);color:#fff}
.ctl--end{background:var(--bad);color:#fff;width:74px}
.ctl--end:hover{background:#ff6363}
.ctl--answer{background:var(--ok);color:#04150c;width:74px}
.ctl--answer:hover{background:#4bdd92}
.level{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 14px;border-radius:var(--r-3);background:rgba(255,255,255,.06);color:var(--tx-2)}
/* ── боковая панель ── */
.side{width:344px;flex:none;display:flex;flex-direction:column;background:var(--ink-2);border-left:1px solid var(--line)}
.side__h{display:flex;align-items:center;gap:10px;padding:18px 18px 12px}
.side__h h4{font-size:16px;font-weight:700;flex:1}
.side__body{flex:1;min-height:0;overflow:auto;padding:0 14px 14px;display:flex;flex-direction:column;gap:4px}
.side__foot{padding:12px 14px;border-top:1px solid var(--line-2);display:flex;gap:8px}
.pill{display:inline-block;min-width:22px;padding:0 7px;height:22px;border-radius:999px;background:var(--ink-4);color:var(--tx-2);font:700 12px/22px var(--ui);text-align:center}
.xbtn{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--tx-2)}
.xbtn:hover{background:rgba(255,255,255,.07);color:var(--tx)}
.search{display:flex;align-items:center;gap:9px;height:42px;padding:0 12px;margin-bottom:8px;background:var(--ink);border:1px solid var(--line);border-radius:var(--r-2);color:var(--tx-3)}
.search input{flex:1;border:0;background:none;outline:none;font-size:14px;color:var(--tx)}
.search input::placeholder{color:var(--tx-3)}
.person{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:12px}
.person:hover{background:rgba(255,255,255,.04)}
.person__n{flex:1;min-width:0}
.person__n b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.person__n span{display:block;color:var(--tx-3);font-size:12.5px;margin-top:1px}
.person__i{display:flex;gap:6px;color:var(--tx-3);flex:none}
.person__i .off{color:var(--bad)}
.person__i .up{color:var(--warn)}
.msg{padding:9px 2px}
.msg__h{display:flex;gap:8px;align-items:baseline;margin-bottom:3px}
.msg__h b{font-size:13.5px;font-weight:700}
.msg__h time{font:400 11.5px/1 var(--mono);color:var(--tx-3)}
.msg__t{font-size:14px;line-height:1.45;color:#dbe3f0}
.msg--mine .msg__t{color:var(--tx)}
.msg__sys{text-align:center;color:var(--tx-3);font-size:12.5px;padding:8px 0}
.composer{display:flex;align-items:center;gap:8px;width:100%;background:var(--ink);border:1px solid var(--line);border-radius:var(--r-2);padding:0 8px 0 12px;height:46px}
.composer input{flex:1;border:0;background:none;outline:none;font-size:14px}
.composer input::placeholder{color:var(--tx-3)}
.composer button{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--tx-3)}
.composer button:hover{color:var(--tx);background:rgba(255,255,255,.07)}
.composer .send{color:var(--brand)}
/* ── карточки ── */
.center{flex:1;min-height:0;display:grid;place-items:center;padding:18px;overflow:auto}
.card{width:100%;max-width:460px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-4);padding:28px;box-shadow:0 26px 60px -34px #000}
.card--wide{max-width:640px}
.card--narrow{max-width:392px}
.card h3{font-size:22px;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.card p{color:var(--tx-2);font-size:14.5px;line-height:1.55;margin-top:9px}
.card__top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:22px}
.glyph{width:60px;height:60px;border-radius:20px;display:grid;place-items:center;flex:none;background:var(--brand-dk);color:var(--brand)}
.glyph--ok{background:var(--ok-dk);color:var(--ok)}
.glyph--bad{background:var(--bad-dk);color:#ff8a8a}
.glyph--warn{background:var(--warn-dk);color:var(--warn)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 20px;border-radius:var(--r-2);font-size:15px;font-weight:700;width:100%;transition:background .14s,transform .1s}
.btn:active{transform:scale(.985)}
.btn--go{background:var(--brand);color:#0b1120}
.btn--go:hover{background:#96baff}
.btn--ok{background:var(--ok);color:#04150c}
.btn--ok:hover{background:#4bdd92}
.btn--soft{background:var(--ink-4);color:var(--tx)}
.btn--soft:hover{background:#2f3d5c}
.btn--line{background:none;border:1px solid var(--line);color:var(--tx-2)}
.btn--line:hover{border-color:var(--tx-3);color:var(--tx)}
.btns{display:flex;flex-direction:column;gap:9px;margin-top:20px}
.btns--row{flex-direction:row}
.field{margin-top:14px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--tx-2);margin-bottom:7px}
.inp{width:100%;height:50px;padding:0 14px;background:var(--ink);border:1px solid var(--line);border-radius:var(--r-2);font-size:15px;outline:none}
.inp:focus{border-color:var(--brand)}
.inp--code{font:500 20px/1 var(--mono);letter-spacing:.14em;text-align:center}
.hint{color:var(--tx-3);font-size:12.5px;margin-top:7px}
.code{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--ink);border:1px dashed var(--line);border-radius:var(--r-2);padding:13px 14px;margin-top:14px}
.code__v{font:500 16px/1 var(--mono);letter-spacing:.08em}
.code__l{font-size:12px;color:var(--tx-3);margin-bottom:5px}
.rowlist{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r-2);text-align:left;width:100%}
.row:hover{background:rgba(255,255,255,.035)}
.row__t{flex:1;min-width:0}
.row__t b{display:block;font-size:14.5px;font-weight:600}
.row__t span{display:block;color:var(--tx-3);font-size:12.5px;margin-top:2px}
.row__i{width:38px;height:38px;border-radius:11px;background:var(--ink-4);display:grid;place-items:center;color:var(--tx-2);flex:none}
.sw{width:48px;height:28px;border-radius:999px;background:var(--ink-4);position:relative;flex:none;transition:background .16s}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#8896b0;transition:transform .16s,background .16s}
.sw.is-on{background:var(--ok)}
.sw.is-on::after{transform:translateX(20px);background:#04150c}
.sel{display:flex;align-items:center;gap:10px;width:100%;height:48px;padding:0 12px;background:var(--ink);border:1px solid var(--line);border-radius:var(--r-2);font-size:14px;text-align:left}
.sel:hover{border-color:var(--tx-3)}
.sel span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sel .i{color:var(--tx-3)}
.meter{display:flex;gap:3px;align-items:center}
.meter i{display:block;width:4px;height:14px;border-radius:2px;background:var(--ink-4)}
.meter i.on{background:var(--ok)}
.strip{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r-2);background:var(--warn-dk);border:1px solid rgba(245,165,36,.28);color:#ffdca8;font-size:13.5px;font-weight:600}
.strip--info{background:var(--brand-dk);border-color:rgba(127,169,255,.28);color:#d7e5ff}
.strip .btn--mini{margin-left:auto;height:32px;padding:0 12px;border-radius:9px;font-size:13px;background:rgba(255,255,255,.1);color:inherit;width:auto;flex:none}
.veil{position:absolute;inset:0;z-index:50;background:rgba(6,9,16,.72);backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px;overflow:auto}
.modal{width:100%;max-width:660px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-4);box-shadow:0 40px 90px -40px #000;overflow:hidden;display:flex;flex-direction:column;max-height:100%}
.modal__h{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line-2)}
.modal__h h3{flex:1;font-size:18px;font-weight:700}
.modal__b{display:flex;min-height:0;flex:1}
.modal__nav{width:196px;flex:none;padding:12px;border-right:1px solid var(--line-2);display:flex;flex-direction:column;gap:2px}
.modal__nav button{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:11px;font-size:14px;color:var(--tx-2);text-align:left}
.modal__nav button:hover{background:rgba(255,255,255,.05);color:var(--tx)}
.modal__nav button.is-here{background:var(--ink-4);color:var(--tx);font-weight:600}
.modal__c{flex:1;min-width:0;overflow:auto;padding:18px 20px;display:flex;flex-direction:column;gap:16px}
.block{background:var(--ink);border:1px solid var(--line-2);border-radius:var(--r-3);padding:16px}
.block__h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.block__h b{flex:1;font-size:14.5px;font-weight:700}
.menu{position:absolute;z-index:55;min-width:250px;padding:7px;background:#1a2336;border:1px solid var(--line);border-radius:var(--r-3);box-shadow:0 26px 50px -24px #000}
.menu button{display:flex;align-items:center;gap:11px;width:100%;padding:10px 11px;border-radius:10px;font-size:14px;color:var(--tx)}
.menu button:hover{background:rgba(255,255,255,.07)}
.menu button .i{color:var(--tx-2)}
.menu hr{border:0;border-top:1px solid var(--line-2);margin:6px 4px}
.rec{display:flex;align-items:center;gap:12px;background:var(--ink);border:1px solid var(--line);border-radius:var(--r-3);padding:12px 14px;margin-top:16px}
.rec__p{width:40px;height:40px;border-radius:50%;background:var(--brand);color:#0b1120;display:grid;place-items:center;flex:none}
.rec__b{flex:1;min-width:0}
.rec__t{font-size:13.5px;font-weight:600}
.rec__w{display:flex;align-items:flex-end;gap:2px;height:22px;margin-top:6px}
.rec__w i{display:block;flex:1;background:var(--ink-4);border-radius:1px}
.rec__w i.on{background:var(--brand)}
.rec__d{font:400 12px/1 var(--mono);color:var(--tx-3);flex:none}
.pager{display:flex;align-items:center;justify-content:center;gap:8px}
.pager__d{width:7px;height:7px;border-radius:50%;background:var(--ink-4)}
.pager__d.on{background:var(--brand);width:20px;border-radius:4px}
/* места под кнопки стало мало (открыли панель, окно узкое) — снимаем подписи */
@container (max-width: 1000px){
.ctl__t{display:none}
.ctl{padding:0;width:52px}
}
/* ─────────────────  узкий контейнер: телефонный браузер  ───────────────── */
@container (max-width: 560px){
.app{flex-direction:column}
.app__body{padding:10px;gap:8px}
.top{padding:14px 14px 0}
.grid[data-n="2"]{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
.grid[data-n="4"],.grid[data-n="9"]{grid-template-columns:1fr 1fr;grid-auto-rows:1fr;grid-template-rows:none}
.scene[data-view="side"]{flex-direction:column}
.scene[data-view="side"] .scene__strip{flex-direction:row;width:auto;height:96px}
.scene__strip{height:96px}
.pip{width:112px;right:12px;bottom:12px;border-radius:12px}
/* один ряд круглых кнопок и трубка отдельной строкой — как в телефоне */
  .bar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;padding:6px 10px 22px;gap:8px}
.bar__g--l,.bar__g--c{display:contents}
.bar__g--r{flex-basis:100%;display:flex;justify-content:center;margin-top:4px}
.ctl[data-ctl="link"],.ctl[data-ctl="share"]{display:none}
.ctl__t{display:none}
.ctl{width:50px;height:50px;min-width:50px;padding:0;border-radius:50%}
.ctl--end,.ctl--answer{width:104px;height:54px;border-radius:999px}
.ctl__b{position:absolute;top:-2px;right:-2px}
/* панель поднимается снизу */
  .side{position:absolute;left:0;right:0;bottom:0;top:auto;width:auto;height:74%;z-index:45;border-left:0;border-top:1px solid var(--line);border-radius:var(--r-5) var(--r-5) 0 0;box-shadow:0 -20px 50px -24px #000}
.side::before{content:'';position:absolute;top:9px;left:50%;transform:translateX(-50%);width:40px;height:4px;border-radius:2px;background:var(--ink-4)}
.side__h{padding-top:24px}
.card{padding:22px;border-radius:var(--r-4)}
.card h3{font-size:20px}
.ava{--s:96px}
.modal{max-width:none;height:100%;border-radius:var(--r-5) var(--r-5) 0 0}
.veil{padding:0;align-items:end}
.modal__b{flex-direction:column}
.modal__nav{width:auto;flex-direction:row;overflow:auto;border-right:0;border-bottom:1px solid var(--line-2)}
.modal__nav button{white-space:nowrap}
.btns--row{flex-direction:column}
}

/* Скрытое должно быть скрытым: у .app__col и .side есть свой display,
   и без этого правила он перебивает атрибут hidden. Уже наступали. */
[hidden]{display:none !important}

/* Видео вставляем как есть, без рамок браузера */
video{background:var(--ink-3)}

/* Своё видео показываем зеркально, чужое — как есть.
   Человек привык видеть себя как в зеркале: незеркальная картинка сбивает,
   рука тянется поправить волосы не в ту сторону. А вот собеседника зеркалить
   нельзя — на листе, который он поднесёт к камере, текст окажется наизнанку.
   При показе экрана зеркало снимается: там тоже текст. */
.zerkalo{transform:scaleX(-1)}

/* Числа поверх встречи: открывается адресом с ?diag. Нарочно неброско —
   это не часть продукта, это инструмент для разбора «подвисает». */
.cifry{
  position:absolute;left:14px;top:14px;z-index:70;
  max-width:min(560px,80vw);
  padding:10px 12px;border-radius:var(--r-2);
  background:rgba(8,12,20,.82);border:1px solid var(--line);
  font:400 11.5px/1.55 var(--mono);color:#cfe0ff;white-space:pre;
  pointer-events:none;
}