/* «🎧 Дискорд-Торрент» — как Discord, но в палитре сайта (токены rec.css). Телефон — внизу, блок «телефон» */
.talk { --side:color-mix(in srgb, var(--card) 55%, var(--bg)); --soft:color-mix(in srgb, var(--text) 6%, transparent);
  --grad:linear-gradient(135deg, #FF5A7A, #C04BE8 55%, #7B61FF); --spk:var(--ok); --c-in:var(--blue); --c-out:var(--violet); }
.i { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
kbd { font:500 11px/1 var(--mono); padding:2px 5px; border-radius:5px; border:1px solid var(--line); background:var(--hover); }
.tk-lbl { font-size:12.5px; color:var(--text2); }

/* кнопка-иконка */
.tk-ib { display:inline-grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:8px; background:none; color:var(--text2); cursor:pointer; flex:none; }
.tk-ib:hover, .tk-ib[aria-expanded="true"] { background:var(--soft); color:var(--text); }
.tk-ib .i { width:16px; height:16px; }
/* главная кнопка — градиент как у иконок сайта */
.btn.tk-go { background:var(--grad); border:0; color:#fff; box-shadow:0 10px 26px -12px rgba(192,75,232,.9); }
.btn.tk-go:hover { background:var(--grad); filter:brightness(1.08); }
.btn.tk-go:disabled { filter:grayscale(.4); }

/* кружок-аватар: цвет человека и первая буква; зелёное кольцо — говорит */
.tk-av { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; flex:none; font-weight:700; font-size:14px; line-height:1; user-select:none;
  box-shadow:0 0 0 2px transparent; transition:box-shadow .12s; }
.tk-av.xs { width:20px; height:20px; font-size:10px; }
.tk-av.sm { width:24px; height:24px; font-size:11px; }
.tk-av.md { width:36px; height:36px; font-size:15px; }
.tk-av.big { width:52px; height:52px; font-size:22px; }
.tk-av.xl { width:72px; height:72px; font-size:30px; }
.tk-av.spk { box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--spk); }
.tk-av.xl.spk { box-shadow:0 0 0 3px var(--card), 0 0 0 6px var(--spk), 0 0 24px 4px color-mix(in srgb, var(--spk) 45%, transparent); }
/* цвет: 12 кружков ровной сеткой (на телефоне — 2 ряда по 6), выбранный — с кольцом */
.tk-colors { display:grid; grid-template-columns:repeat(12, minmax(0, 26px)); justify-content:space-between; gap:8px 4px; }
.sw { width:100%; aspect-ratio:1; border-radius:50%; border:0; padding:0; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); transition:box-shadow .12s, transform .12s; }
.sw:hover { box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 2px var(--card), 0 0 0 4px var(--line); }
.sw[aria-checked="true"] { box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--text); }
.sw:focus-visible { outline-offset:4px; border-radius:50%; }
@media (max-width: 480px) { .tk-colors { grid-template-columns:repeat(6, 32px); gap:10px; justify-content:start; } }

/* ---------- главная ---------- */
.tk-home { max-width:640px; margin:3vh auto 0; display:flex; flex-direction:column; gap:22px; text-align:center; }
.tk-hero { display:flex; flex-direction:column; align-items:center; gap:8px; }
.tk-mesh { width:220px; height:110px; overflow:visible; }
.tk-links path { stroke:var(--line); stroke-width:3; fill:none; }
.tk-pulse path { stroke:url(#tkg); stroke-width:3; fill:none; stroke-linecap:round; stroke-dasharray:14 130; animation:tk-run 2.2s linear infinite; }
.tk-pulse path:nth-child(2) { animation-delay:-.7s; }
.tk-pulse path:nth-child(3) { animation-delay:-1.4s; }
@keyframes tk-run { from { stroke-dashoffset:144; } to { stroke-dashoffset:0; } }
.tk-node circle { stroke:var(--bg); stroke-width:4; }
.tk-node text { font:700 16px var(--body); text-anchor:middle; fill:#141414; }
.tk-node.n1 circle { fill:#5cd6ff; } .tk-node.n2 circle { fill:#e58bef; } .tk-node.n3 circle { fill:#6ee7a0; }
.tk-node { animation:tk-bob 3s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.tk-node.n2 { animation-delay:-1s; } .tk-node.n3 { animation-delay:-2s; }
@keyframes tk-bob { 50% { transform:translateY(-3px); } }
.tk-title { font-size:36px; font-weight:800; letter-spacing:-.02em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tk-sub { max-width:500px; margin:0 auto; color:var(--text2); font-size:15px; line-height:1.55; text-wrap:balance; }
.tk-sub b { color:var(--text); font-weight:500; }
.tk-start { text-align:left; }
.tk-me-row { display:flex; align-items:center; gap:14px; }
.tk-me-in { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.tk-me-in label { font-size:12.5px; color:var(--text2); }
.tk-me-in input { min-height:44px; font-size:16px; }
.tk-color-row { margin-top:-2px; }
.tk-create { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.tk-create input { min-height:44px; }
.tk-pass { margin:-2px 0 0; font-size:12.5px; color:var(--text2); text-align:center; }
.tk-start .err { text-align:center; font-size:13.5px; }
/* недавние */
.tk-recent { width:100%; max-width:420px; margin:0 auto; text-align:left; }
.tk-recent h2 { font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--text2); margin:0 0 8px 4px; }
.tk-recent ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.tk-rc { display:flex; align-items:center; gap:4px; padding-right:8px; border-radius:14px; border:1px solid var(--line); background:var(--card); transition:border-color .15s, transform .15s; }
.tk-rc:hover, .tk-rc:focus-within { border-color:color-mix(in srgb, var(--violet) 55%, var(--line)); }
.tk-rc:hover { transform:translateY(-1px); }
.tk-rc-a { flex:1; min-width:0; display:flex; align-items:center; gap:12px; padding:10px 12px; text-decoration:none; border-radius:13px; }
.tk-rc-a:focus-visible { outline-offset:-2px; }
.tk-rc-av { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex:none; background:var(--grad); color:#fff; font-weight:700; font-size:16px; }
.tk-rc-t { min-width:0; display:flex; flex-direction:column; }
.tk-rc-t b { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-rc-t small { color:var(--text2); font-size:12px; }
.tk-code { font-family:var(--mono); letter-spacing:.12em; }
.tk-feats { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.tk-join { text-align:left; }
.tk-join h1 { text-align:center; overflow-wrap:anywhere; }
.tk-join-sub { margin:-6px 0 4px; text-align:center; color:var(--text2); font-size:14px; line-height:1.5; text-wrap:balance; }
.tk-join .tk-lbl { margin-top:4px; }
.tk-join .tk-colors { margin-bottom:6px; }

/* ---------- пространство: ровно на экран под шапкой, страница не прокручивается; три колонки ---------- */
body.in-space { height:100dvh; overflow:hidden; }
body.in-space .brand-foot { display:none; }
body.in-space .tk-wrap { max-width:1680px; padding:12px 16px 4px; }
body.talk.in-space .bar-in { max-width:1680px; }
@media (max-height: 460px) { body.in-space { height:auto; overflow:visible; } }
.tk-app { position:relative; display:grid; grid-template-columns:268px minmax(0, 1fr) 312px; grid-template-rows:minmax(0, 1fr) auto;
  grid-template-areas:"side center stats" "me center stats";
  height:calc(100dvh - var(--barH, 57px) - 16px); min-height:400px; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:var(--card); box-shadow:0 1px 2px rgba(0,0,0,.04), 0 18px 40px -24px rgba(0,0,0,.35); }
.tk-app.no-stats { grid-template-columns:268px minmax(0, 1fr); grid-template-areas:"side center" "me center"; }
.tk-app.no-stats .tk-stats { display:none; }
.tk-tabs { display:none; }
.tk-scroll { overflow-y:auto; overscroll-behavior:contain; min-height:0; scrollbar-width:thin; }

/* левая колонка */
.tk-side { grid-area:side; display:flex; flex-direction:column; min-height:0; background:var(--side); border-right:1px solid var(--line); }
.tk-shead { position:relative; padding:12px 10px 12px 16px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.tk-sname { display:flex; align-items:center; gap:4px; min-width:0; }
.tk-sname b { font-size:16px; font-weight:700; margin-right:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.tk-scode { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tk-scode .tk-code { font-size:13px; font-weight:700; padding:3px 8px; border-radius:8px; background:var(--soft); }
.tk-invite { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:4px 10px 4px 8px; border-radius:14px; border:1px solid var(--line); background:var(--card); color:var(--text2); font-size:12px; cursor:pointer; }
.tk-invite:hover { color:var(--text); border-color:var(--text2); }
.tk-invite .i { width:14px; height:14px; }
/* 🔒 код пространства скрыт («••••••»), 👁 — показать на 10 с (полоска внизу убывает). Ширина плашки постоянная — ничего не прыгает */
.tk-codebox { position:relative; display:inline-flex; align-items:center; flex:none; min-height:28px; padding-right:2px; border-radius:8px; background:var(--soft); overflow:hidden; }
.tk-scode .tk-codebox .tk-code { display:inline-block; box-sizing:content-box; width:calc(6ch + .72em); padding:3px 2px 3px 8px; background:none; border-radius:0; line-height:20px; white-space:nowrap; overflow:hidden; text-align:center; color:var(--text2); }
.tk-codebox.shown .tk-code { color:var(--text); }
.tk-eye { display:grid; place-items:center; width:26px; height:24px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--text2); cursor:pointer; }
.tk-eye:hover { color:var(--text); background:color-mix(in srgb, var(--text) 8%, transparent); }
.tk-eye .i { width:15px; height:15px; }
.tk-codebox::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--violet, var(--blue)); transform:scaleX(0); transform-origin:left; pointer-events:none; }
.tk-codebox.shown::after { animation:tk-codebar 10s linear forwards; }
@keyframes tk-codebar { from { transform:scaleX(1); } to { transform:scaleX(0); } }
/* 🎲 случайное название — внутри поля справа (поле той же ширины) */
.tk-namebox { position:relative; display:block; }
.tk-namebox input { width:100%; padding-right:46px; }
.tk-dice { position:absolute; top:50%; right:5px; transform:translateY(-50%); width:34px; height:34px; display:grid; place-items:center; padding:0; border:0; border-radius:9px; background:transparent; font-size:18px; line-height:1; cursor:pointer; }
.tk-dice:hover, .tk-dice:focus-visible { background:var(--soft); }
.tk-dice.roll { animation:tk-dice .4s ease; }
@keyframes tk-dice { from { transform:translateY(-50%) rotate(0); } to { transform:translateY(-50%) rotate(360deg); } }
@media (max-width: 760px) {
  .tk-codebox { min-height:34px; }
  .tk-eye { width:34px; height:32px; }
}
@media (prefers-reduced-motion: reduce) { .tk-dice.roll { animation:none; } }
/* выпадающее меню пространства «⋯» */
.tk-pop { position:absolute; z-index:6; top:46px; right:10px; min-width:220px; display:flex; flex-direction:column; padding:6px; border-radius:14px; background:var(--card); border:1px solid var(--line);
  box-shadow:0 18px 44px -14px rgba(0,0,0,.45); animation:tk-pop .14s ease-out; }
.tk-pop button { display:flex; align-items:center; gap:10px; min-height:38px; padding:0 10px; border:0; border-radius:9px; background:none; color:var(--text); cursor:pointer; text-align:left; font-size:13.5px; }
.tk-pop button:hover { background:var(--soft); }
.tk-pop button .i { width:17px; height:17px; color:var(--text2); }
.tk-pop button.bad, .tk-pop button.bad .i { color:var(--bad); }
.tk-pop button.sep { margin-top:5px; position:relative; }
.tk-pop button.sep::before { content:""; position:absolute; left:6px; right:6px; top:-3px; height:1px; background:var(--line); }
.tk-pop button.bad:hover { background:var(--rec-soft); }
.tk-side .tk-scroll { flex:1; padding:8px 8px 14px; }
.tk-sec { display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:30px; padding:10px 8px 2px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text2); }
.tk-sec:first-child { padding-top:2px; }
.tk-cnt { font:500 11.5px var(--body); letter-spacing:0; color:var(--text2); font-variant-numeric:tabular-nums; }
.tk-tip { display:flex; align-items:center; gap:6px; margin:2px 8px 6px; padding:7px 10px; border-radius:10px; font-size:12.5px; line-height:1.35; color:var(--text2);
  background:color-mix(in srgb, var(--spk) 9%, transparent); border:1px dashed color-mix(in srgb, var(--spk) 40%, var(--line)); }
.tk-chans, .tk-people, .tk-vms { list-style:none; margin:0; padding:0; }
.tk-ch-row { display:flex; align-items:center; border-radius:8px; }
.tk-ch-row:hover { background:var(--soft); }
.tk-ch-btn { flex:1; min-width:0; display:flex; align-items:center; gap:8px; min-height:36px; padding:6px 8px; border:0; background:none; color:var(--text2); cursor:pointer; text-align:left; border-radius:8px; font-weight:500; }
.tk-ch-row:hover .tk-ch-btn { color:var(--text); }
.tk-ch-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-ch-n { flex:none; font-size:11px; font-weight:500; color:var(--text2); font-variant-numeric:tabular-nums; }   /* видно всегда, и при наведении (владелец) */
.tk-ch-n.full { color:var(--bad); }
/* «Войти» — главное действие: при наведении (на телефоне — всегда, пока вы не в голосе) */
.tk-ch-go { display:none; flex:none; padding:2px 10px; border-radius:10px; font-size:12px; font-weight:500; line-height:18px; color:var(--text); background:var(--soft);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--spk) 45%, transparent); }
.tk-ch:not(.mine) .tk-ch-row:hover .tk-ch-go, .tk-ch:not(.mine) .tk-ch-btn:focus-visible .tk-ch-go { display:inline-block; }
@media (hover: none) { .tk-chans:not(.voiced) .tk-ch-go { display:inline-block; } }
.tk-ch.mine .tk-ch-row { background:color-mix(in srgb, var(--spk) 14%, transparent); }
.tk-ch.mine .tk-ch-btn { color:var(--text); cursor:default; }
.tk-ch.mine .tk-ch-btn .i { color:var(--spk); }
.tk-own { opacity:0; }
.tk-ch-row:hover .tk-own, .tk-own:focus-visible { opacity:1; }
@media (hover: none) { .tk-own { opacity:.8; } }
.tk-vms { padding:2px 0 6px 22px; }
/* человек в списке */
.tk-p-btn { width:100%; display:flex; align-items:center; gap:8px; padding:4px 8px; border:0; border-radius:8px; background:none; cursor:pointer; text-align:left; color:var(--text2); min-height:34px; }
.tk-p-btn:hover { background:var(--soft); color:var(--text); }
.tk-p-name { flex:1; min-width:0; display:flex; align-items:center; gap:4px; white-space:nowrap; font-size:13.5px; }
.tk-p-t { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-vms .tk-p-name { color:var(--text); }
.tk-p-name.me { font-weight:500; }
.tk-crown { display:inline-flex; flex:none; color:#E8B400; }
.tk-crown .i { width:13px; height:13px; fill:currentColor; stroke-width:1.4; }
.tk-fl { display:inline-flex; flex:none; color:var(--text2); }
.tk-fl .i { width:15px; height:15px; }
.tk-fl.bad { color:var(--bad); }
.tk-p.off { opacity:.5; }
.tk-people .tk-p-name { color:var(--text2); }
/* пинг и тип связи: значок того же цвета, что и число */
.tk-ping { display:inline-flex; align-items:center; gap:3px; flex:none; font-size:11px; font-variant-numeric:tabular-nums; color:var(--text2); white-space:nowrap; }
.tk-ping .i { width:12px; height:12px; stroke-width:2.2; }
.tk-ping.g { color:var(--ok); } .tk-ping.y { color:var(--warn); } .tk-ping.r, .tk-ping.bad { color:var(--bad); }
/* «соединяемся» — пульсирующая точка */
.tk-wdot { display:inline-block; width:6px; height:6px; margin:0 3px; border-radius:50%; background:var(--text2); animation:tk-blink 1.2s ease-in-out infinite; }
@keyframes tk-blink { 50% { opacity:.25; } }

/* панель «я»: сверху полоска «Голос подключён» с красной кнопкой выхода (как в Discord), ниже — я и кнопки */
.tk-me { grid-area:me; display:grid; grid-template-columns:minmax(0, 1fr) auto; background:color-mix(in srgb, var(--side) 70%, var(--bg)); border-right:1px solid var(--line); border-top:1px solid var(--line); }
.tk-me .tk-me-row { grid-column:1 / -1; grid-row:2; display:flex; align-items:center; gap:4px; padding:8px; }
.tk-vc:not([hidden]) ~ .tk-me-row { border-top:1px solid var(--line); }
.tk-vc { grid-column:1; grid-row:1; min-width:0; display:flex; align-items:center; gap:10px; padding:10px 6px 9px 12px; }
#hangBtn { grid-column:2; grid-row:1; align-self:center; margin-right:10px; }
.tk-vc-ico { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; flex:none; color:var(--ok); background:color-mix(in srgb, var(--ok) 14%, transparent); }
.tk-vc-ico .i { width:18px; height:18px; stroke-width:2.4; }
.tk-vc-t { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.tk-vc-t b { font-size:13px; font-weight:700; color:var(--ok); }
.tk-vc-t small, .tk-me-t small { display:flex; align-items:center; gap:4px; min-width:0; white-space:nowrap; }
.tk-vc-t small { font-size:12px; color:var(--text2); }
.tk-st-t { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.tk-vc.warn .tk-vc-t b { color:var(--warn); }
.tk-vc.warn .tk-vc-ico { color:var(--warn); background:rgba(242,193,78,.14); }
.tk-me-who { flex:1; min-width:0; display:flex; align-items:center; gap:6px; padding:4px; border:0; border-radius:10px; background:none; cursor:pointer; text-align:left; }
.tk-me-who:hover { background:var(--soft); }
.tk-me-t { min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.tk-me-t b { font-size:13.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-me-t small { font-size:11.5px; color:var(--text2); overflow:hidden; }
.tk-me-t small.ok { color:var(--ok); }
.tk-me-t small.warn, .tk-me-t small.warn .tk-ping { color:var(--warn); }
.tk-me-t small.bad { color:var(--bad); }
.tk-me-btns { display:flex; gap:2px; }
.tk-me .tk-me-btns .tk-cb { width:32px; }   /* 4 кнопки + «Не в голосе» / «Звук выкл» влезают в колонку 268 px без обрезки */
.tk-cb { position:relative; display:grid; place-items:center; width:34px; height:34px; padding:0; border:0; border-radius:9px; background:none; color:var(--text2); cursor:pointer; transition:background-color .12s, color .12s; }
.tk-cb:hover { background:var(--soft); color:var(--text); }
.tk-cb .i { width:20px; height:20px; }
.tk-cb .on-on { display:none; }
.tk-cb[aria-pressed="true"] { color:var(--bad); }
.tk-cb[aria-pressed="true"] .on-on { display:block; }
.tk-cb[aria-pressed="true"] .on-off { display:none; }
.tk-cb.hang { color:#fff; background:var(--rec); }
.tk-cb.hang:hover { background:color-mix(in srgb, var(--rec) 84%, #000); color:#fff; }

/* центр: баннер, плитки голоса, чат */
.tk-center { grid-area:center; display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--card); }
/* «нет связи с сервером» — предупреждение, а не авария: голос-то работает */
.tk-banner { display:flex; align-items:flex-start; gap:10px; margin:10px 12px 0; padding:9px 12px; border-radius:12px; font-size:13px; line-height:1.45; color:var(--text);
  background:rgba(242,193,78,.14); border:1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
.tk-banner > .i { width:18px; height:18px; margin-top:1px; color:var(--warn); }
.tk-b-t { flex:1; min-width:0; }
.tk-b-t b { font-weight:500; }
.tk-b-more { color:var(--text2); }
.tk-banner .btn { margin:0; min-height:32px; flex:none; }
.tk-b-tog { display:none; flex:none; padding:0 2px; border:0; background:none; color:var(--text2); font-size:12.5px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; min-height:22px; }
.tk-banner.wait, .tk-banner.kick { background:var(--chip); border-color:var(--line); color:var(--text2); }
.tk-banner.wait > .i, .tk-banner.kick > .i { color:var(--text2); }
.tk-banner.kick { align-items:center; flex-wrap:wrap; }
.tk-stage { margin:12px 12px 0; padding:8px 10px 10px 12px; border-radius:16px; background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--spk) 10%, transparent), transparent 60%), var(--side); border:1px solid var(--line); }
.tk-stage-h { display:flex; align-items:center; gap:8px; min-width:0; font-size:13.5px; }
.tk-stage-h > .i { color:var(--spk); }
.tk-stage-h b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; max-width:40%; }
.tk-stage-h .muted { font-size:12px; flex:none; font-variant-numeric:tabular-nums; }
.tk-stage-avs { flex:1; min-width:0; display:flex; align-items:center; gap:6px; padding:3px 2px 3px 6px; overflow:hidden; }
.tk-stage:not(.fold) .tk-stage-avs { visibility:hidden; }
.tk-stage.fold { padding-bottom:8px; }
.tk-stage.fold .tk-tiles { display:none; }
.tk-stage.fold #stageFold .i { transform:rotate(-90deg); }
/* до 4 человек — крупные плитки по центру (рядом — плитка «Позвать друзей») */
/* запас по краям внутри прокрутки: подъём плитки при наведении и свечение «говорит» не обрезаются */
.tk-tiles { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:2px -8px -8px; padding:6px 8px 8px; max-height:38vh; overflow-y:auto; scrollbar-width:thin; }
.tk-tile, .tk-inv { flex:0 0 172px; }
.tk-tile { --c:#888; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-width:0; min-height:132px; padding:16px 10px 12px; border-radius:14px;
  border:1px solid var(--line); cursor:pointer; color:var(--text);
  background:radial-gradient(90% 90% at 50% 30%, color-mix(in srgb, var(--c) 26%, transparent), transparent 70%), var(--card); transition:transform .12s, border-color .12s; }
.tk-tile:hover { transform:translateY(-1px); border-color:color-mix(in srgb, var(--c) 60%, var(--line)); }
.tk-tile:has(.spk) { border-color:var(--spk); }
.tk-tile-b { display:flex; align-items:center; gap:4px; min-width:0; max-width:100%; }
.tk-tile-n { min-width:0; font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-tile-st { position:absolute; top:8px; right:10px; }
/* больше 4 человек — компактные плитки, не больше двух рядов (дальше — прокрутка внутри) */
.tk-tiles.many { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:6px; max-height:calc(2 * 96px + 6px + 14px); }
.tk-tiles.many .tk-tile { min-height:96px; padding:10px 8px 8px; gap:6px; }
.tk-tiles.many .tk-av.xl { width:48px; height:48px; font-size:20px; }
.tk-tiles.many .tk-av.xl.spk { box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--spk), 0 0 16px 2px color-mix(in srgb, var(--spk) 45%, transparent); }
/* плитка-приглашение на свободном месте */
.tk-inv { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:132px; padding:12px; border-radius:14px; border:1px dashed var(--line);
  background:none; color:var(--text2); cursor:pointer; font-size:13px; font-weight:500; }
.tk-inv:hover { color:var(--text); border-color:var(--text2); background:var(--soft); }
.tk-inv .i { width:22px; height:22px; }
/* чат */
.tk-chat-h { display:flex; align-items:center; gap:8px; min-height:48px; padding:8px 12px 8px 18px; border-bottom:1px solid var(--line); }
.tk-chat-h .i { color:var(--text2); }
.tk-chat-h b { font-size:15px; }
.tk-chat-sub { font-size:12px; margin-right:auto; }
.tk-msgs { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:10px 0 8px; scrollbar-width:thin; }
.tk-empty { height:100%; min-height:160px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--text2); text-align:center; padding:20px; }
.tk-empty b { color:var(--text); font-size:16px; font-weight:500; }
.tk-empty-inv { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin-top:12px; }
.tk-empty-inv .tk-invite { min-height:32px; padding:4px 12px 4px 10px; font-size:12.5px; }
.tk-day { display:flex; align-items:center; gap:10px; margin:10px 18px 4px; font-size:11.5px; color:var(--text2); }
.tk-day::before, .tk-day::after { content:""; flex:1; height:1px; background:var(--line); }
.tk-msg { --c:#888; position:relative; display:grid; grid-template-columns:36px minmax(0, 1fr); column-gap:12px; padding:6px 52px 2px 18px; margin-top:8px; }
.tk-msg.cont { margin-top:0; padding-top:1px; }
.tk-msg:hover { background:var(--soft); }
.tk-msg.pend { opacity:.6; }
.tk-mh { display:flex; align-items:baseline; gap:8px; flex-wrap:nowrap; min-width:0; }
.tk-mname { min-width:0; max-width:70%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; color:var(--c); }
@media (prefers-color-scheme: light) { .tk-mname { color:color-mix(in srgb, var(--c) 62%, #000); } }
.tk-mh time { flex:none; font-size:11.5px; color:var(--text2); }
.tk-mtext { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.45; }
.tk-mtext a { color:var(--blue); }
.tk-mside { font-size:10px; color:var(--text2); opacity:0; align-self:center; text-align:right; font-variant-numeric:tabular-nums; }
.tk-msg:hover .tk-mside { opacity:1; }
@media (hover: none) { .tk-mside { opacity:.6; } }
.tk-direct { display:inline-flex; align-items:center; gap:3px; flex:none; margin-left:6px; padding:0 7px; border-radius:9px; font-size:11px; font-weight:500; line-height:18px; color:var(--warn); background:rgba(242,193,78,.14); white-space:nowrap; vertical-align:1px; }
.tk-direct .i { width:11px; height:11px; stroke-width:2.2; }
.tk-mh .tk-direct { margin-left:0; }
.tk-mdel { position:absolute; top:2px; right:14px; display:grid; place-items:center; width:30px; height:30px; padding:0; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--text2); cursor:pointer; opacity:0; }
.tk-msg:hover .tk-mdel, .tk-mdel:focus-visible { opacity:1; }
.tk-mdel:hover { color:var(--bad); border-color:var(--bad); }
.tk-mdel .i { width:15px; height:15px; }
@media (hover: none) { .tk-mdel { opacity:.6; } }
.tk-compose { display:flex; align-items:flex-end; gap:6px; margin:4px 14px 14px; padding:6px 6px 6px 14px; border-radius:14px; background:var(--hover); border:1px solid transparent; }
.tk-compose:focus-within { border-color:var(--line); }
.tk-compose textarea { flex:1; min-width:0; resize:none; border:0; background:none; padding:8px 0; min-height:36px; max-height:160px; font:inherit; line-height:1.4; color:var(--text); outline:none; }
.tk-send { display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:10px; background:var(--grad); color:#fff; cursor:pointer; flex:none; }
.tk-send .i { width:17px; height:17px; }
.tk-send:hover { filter:brightness(1.1); }

/* правая колонка: статистика соединения */
.tk-stats { grid-area:stats; display:flex; flex-direction:column; min-height:0; background:var(--side); border-left:1px solid var(--line); }
.tk-st-h { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:48px; padding:8px 10px 8px 16px; border-bottom:1px solid var(--line); font-size:14px; }
.tk-st-h b { display:inline-flex; align-items:center; gap:8px; }
.tk-st-h b .i { width:16px; height:16px; color:var(--text2); stroke-width:2.4; }
.tk-stats .tk-scroll { flex:1; padding:14px 14px 16px; }
.tk-st-empty { display:flex; flex-direction:column; align-items:center; gap:6px; padding:28px 8px 12px; text-align:center; color:var(--text2); font-size:13px; line-height:1.45; }
.tk-st-empty b { color:var(--text); font-size:15px; font-weight:500; }
.tk-st-eico { display:grid; place-items:center; width:56px; height:56px; margin-bottom:6px; border-radius:16px; color:var(--text2); background:var(--soft); }
.tk-st-eico .i { width:40px; height:40px; stroke-width:2; }
.tk-st-ping { margin:10px 0 0; padding-top:12px; border-top:1px solid var(--line); align-self:stretch; font-size:12.5px; }
.tk-big { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tk-kpi { display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:12px; background:var(--card); border:1px solid var(--line); }
.tk-kpi span { font-size:12px; color:var(--text2); }
.tk-kpi b { font:700 26px/1.1 var(--body); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.tk-kpi small { font-size:11px; color:var(--text2); }
.tk-kpi.in b { color:var(--c-in); } .tk-kpi.out b { color:var(--c-out); }
.tk-chart { --c-in:var(--blue); --c-out:var(--violet); --c-grid:var(--line); --c-txt:var(--text2); display:block; width:100%; height:92px; margin-top:10px; border-radius:12px; background:var(--card); border:1px solid var(--line); }
.tk-legend { display:flex; gap:12px; margin:6px 2px 0; font-size:11.5px; color:var(--text2); }
.tk-legend span::before { content:""; display:inline-block; width:10px; height:3px; border-radius:2px; margin-right:5px; vertical-align:middle; background:currentColor; }
.tk-legend .in::before { background:var(--c-in); } .tk-legend .out::before { background:var(--c-out); }
.tk-legend .muted { margin-left:auto; } .tk-legend .muted::before { display:none; }
.tk-facts { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:6px 10px; margin:14px 0 0; font-size:12.5px; }
.tk-facts dt { color:var(--text2); }
.tk-facts dt small { font-size:11px; }
.tk-facts dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tk-facts .tk-vrow { grid-column:1 / -1; white-space:normal; display:flex; flex-wrap:wrap; justify-content:flex-start; gap:4px; text-align:left; }
.tk-h3 { margin:18px 0 8px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text2); }
.tk-ptab { display:flex; flex-direction:column; gap:6px; }
.tk-pr { padding:8px 10px; border-radius:12px; background:var(--card); border:1px solid var(--line); }
.tk-pr-h { display:flex; align-items:center; gap:8px; }
.tk-pr-h b { flex:1; min-width:0; font-weight:500; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-via { display:inline-flex; align-items:center; gap:4px; min-width:0; max-width:100%; font-size:11.5px; white-space:nowrap; padding:1px 8px; border-radius:9px; background:var(--soft); color:var(--text2); }
.tk-via .i { width:12px; height:12px; stroke-width:2.2; }
.tk-via > span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.tk-via.direct { color:var(--ok); } .tk-via.turn { color:var(--warn); } .tk-via.relay { color:var(--violet); } .tk-via.bad { color:var(--bad); }
.tk-pr-h .tk-via { max-width:55%; }
.tk-pr-n { display:flex; flex-wrap:wrap; gap:2px 12px; margin-top:6px; padding-left:28px; font-size:12px; color:var(--text2); font-variant-numeric:tabular-nums; }
.tk-pr-n .pg b { font-size:13px; }
.tk-pr-n small { font-size:10.5px; }
.tk-pr-n .warn { color:var(--warn); } .tk-pr-n .bad { color:var(--bad); }
.tk-none { margin:0; }
/* как идёт голос: три плашки с пояснением и цвета пинга */
.tk-key { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:7px 10px; margin:0; font-size:12px; color:var(--text2); line-height:1.35; }
.tk-key dt { margin:0; }
.tk-key dd { margin:0; }
.tk-key-pg { margin:10px 0 0; font-size:12px; color:var(--text2); }
.tk-key-pg .pg { font-weight:700; }
.tk-key-pg .pg.g { color:var(--ok); } .tk-key-pg .pg.y { color:var(--warn); } .tk-key-pg .pg.r { color:var(--bad); }
.tk-small { margin:0; font-size:12px; line-height:1.45; color:var(--text2); }

/* меню человека */
.tk-menu { position:fixed; z-index:40; width:268px; display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:16px; background:var(--card); border:1px solid var(--line);
  box-shadow:0 18px 50px -12px rgba(0,0,0,.45); animation:tk-pop .14s ease-out; }
@keyframes tk-pop { from { opacity:0; transform:scale(.97); } }
.tk-menu-bg { display:none; }
.tk-mn-h { display:flex; align-items:center; gap:10px; }
.tk-mn-h > span:not(.tk-av) { min-width:0; display:flex; flex-direction:column; }
.tk-mn-h b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-mn-h small { font-size:12px; color:var(--text2); }
.tk-vol { display:flex; justify-content:space-between; font-size:12.5px; color:var(--text2); margin-top:2px; }
.tk-vol-v { color:var(--text); font-variant-numeric:tabular-nums; font-weight:500; }
.tk-menu input[type=range] { width:100%; min-height:0; height:18px; padding:0; border:0; background:none; accent-color:var(--violet); cursor:pointer; }
.tk-mn-chk { font-size:13.5px; color:var(--text); align-items:center; }
.tk-mn-chk input { accent-color:var(--bad); margin:0; }
.tk-mn-b { min-height:36px; font-size:13px; }
.tk-mn-b .i { width:16px; height:16px; }
/* действие владельца — отдельно, ниже черты */
.tk-mn-own { margin-top:2px; padding-top:8px; border-top:1px solid var(--line); }
.tk-mn-own .btn { width:100%; justify-content:flex-start; min-height:36px; padding:0 8px; border-radius:10px; font-size:13px; color:var(--bad); }
.tk-mn-own .btn:hover { background:var(--rec-soft); color:var(--bad); }

/* диалоги */
.tk-dlg { width:min(460px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); border:1px solid var(--line); border-radius:18px; padding:20px 22px 18px; background:var(--card); color:var(--text);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.55); }
.tk-dlg::backdrop { background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.tk-dlg h2 { font-size:19px; margin:0; }
.tk-dlg-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.tk-set { display:flex; flex-direction:column; gap:14px; }
.tk-grp { display:flex; flex-direction:column; gap:12px; }
.tk-grp + .tk-grp { border-top:1px solid var(--line); padding-top:12px; }
.tk-gh { margin:0; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text2); }
.tk-row { display:flex; flex-direction:column; gap:6px; }
.tk-row label { font-size:12.5px; color:var(--text2); }
.tk-row select, .tk-row input { width:100%; }
.tk-lvl-box { display:flex; flex-direction:column; gap:4px; margin-top:2px; }
.tk-lvl { height:8px; }
.tk-out { display:grid; grid-template-columns:1fr 1fr; width:100%; }
.tk-out span { display:flex; align-items:center; justify-content:center; gap:7px; padding:7px 10px; }
.tk-out .i { width:16px; height:16px; }
.tk-bg { display:flex; align-items:center; gap:10px; width:100%; min-height:40px; padding:4px 8px 4px 4px; margin:-2px 0; border:0; border-radius:10px; background:none; font-size:13px; color:var(--text2); cursor:pointer; text-align:left; }
.tk-bg:hover, .tk-bg[aria-expanded="true"] { color:var(--text); background:var(--soft); }
.tk-hint { display:grid; place-items:center; width:24px; height:24px; flex:none; border-radius:50%; border:1px solid var(--line); background:var(--hover); color:var(--text2); font-weight:700; font-size:12px; }
.tk-bg:hover .tk-hint, .tk-bg[aria-expanded="true"] .tk-hint { color:var(--text); border-color:var(--text2); }
.tk-bg-t { padding:10px 12px; border-radius:10px; background:var(--hover); }
.tk-set .chk b { font-size:13.5px; }
.tk-ver { margin:2px 0 0; padding-top:12px; border-top:1px solid var(--line); text-align:center; font-size:11.5px; color:var(--text2); opacity:.8; font-variant-numeric:tabular-nums; }
.tk-ver a { color:inherit; }
.tk-phones { text-align:center; width:min(420px, calc(100vw - 32px)); }
.tk-ph-ico { font-size:46px; line-height:1; margin:4px 0 8px; }
.tk-phones p { margin:8px 0 0; color:var(--text2); line-height:1.5; }
.tk-ph-acts { display:flex; flex-direction:column; gap:8px; margin:16px 0 14px; }
.tk-ph-acts .btn { width:100%; white-space:normal; text-align:center; }
.btn.tk-two { flex-direction:column; gap:1px; min-height:52px; padding:6px 18px; border-radius:16px; line-height:1.25; }
.btn.tk-two small { font-size:12px; font-weight:400; color:var(--text2); }
.tk-phones .tk-small { margin-top:4px; }
.tk-ask { width:min(400px, calc(100vw - 32px)); }
.tk-ask form { display:flex; flex-direction:column; gap:14px; }
.tk-ask input { min-height:44px; font-size:15px; }
.tk-badge { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; margin-left:4px; border-radius:9px; background:var(--rec); color:#fff; font-size:11px; font-weight:700; }
/* всплывающее сообщение — над полем ввода, не закрывает его и кнопки */
body.in-space .toast { bottom:96px; max-width:min(320px, calc(100vw - 32px)); text-align:center; line-height:1.4; }

/* ---------- телефон: вкладки «Каналы · Чат · Связь», панель «я» внизу ---------- */
@media (max-width: 760px) {
  body.in-space .tk-wrap { padding:8px 8px 0; }
  .tk-app, .tk-app.no-stats { grid-template-columns:minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr) auto; grid-template-areas:"tabs" "pane" "me";
    height:calc(100dvh - var(--barH, 57px) - 8px); min-height:360px; border-radius:16px 16px 0 0; border-bottom:0; }
  .tk-tabs { grid-area:tabs; display:flex; gap:4px; padding:6px; border-bottom:1px solid var(--line); background:var(--side); }
  .tk-tabs button { flex:1; display:inline-flex; align-items:center; justify-content:center; min-height:40px; border:0; border-radius:11px; background:none; color:var(--text2); font-weight:500; cursor:pointer; }
  .tk-tabs button[aria-selected="true"] { background:var(--card); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.18); }
  .tk-side, .tk-center, .tk-stats { grid-area:pane; border:0; display:none; }
  .tk-app[data-pane="chans"] .tk-side, .tk-app[data-pane="chat"] .tk-center, .tk-app[data-pane="stats"] .tk-stats { display:flex; }
  .tk-app.no-stats .tk-stats { display:none; }
  .tk-app.no-stats[data-pane="stats"] .tk-stats { display:flex; }
  #statsClose, #statsOpen { display:none; }
  /* заголовок «Связь» повторяет вкладку — не нужен; у чата — компактный: какой текстовый канал открыт (# имя, 🎵 режим) */
  .tk-st-h { display:none; }
  .tk-chat-h { min-height:40px; padding:4px 12px 4px 14px; }
  /* панель «я» — одной строкой: я · красная «выйти из голоса» · микрофон, звук, настройки */
  .tk-me { grid-area:me; grid-template-columns:minmax(0, 1fr) auto auto; align-items:center; border-right:0; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); }
  .tk-me .tk-vc { display:none; }
  .tk-me .tk-me-row { display:contents; }
  .tk-me-who { grid-column:1; grid-row:1; }
  #hangBtn { grid-column:2; grid-row:1; margin:0 6px 0 4px; }
  .tk-me-btns { grid-column:3; grid-row:1; }
  .tk-cb { width:40px; height:40px; }
  .tk-cb .i { width:22px; height:22px; }
  .tk-ib, .tk-own, .tk-mdel { width:40px; height:40px; }
  .tk-own + .tk-own { margin-left:8px; }
  .tk-own { opacity:.8; }
  .tk-pop button { min-height:44px; }
  .tk-p-btn { min-height:40px; }
  .tk-ch-btn { min-height:44px; padding:8px; }
  .tk-shead { padding:10px 6px 10px 14px; }
  .tk-invite { min-height:34px; }
  .tk-pop { top:52px; right:6px; }
  .tk-stage { margin:8px 8px 0; padding:6px 6px 8px 10px; }
  .tk-stage.fold { padding-bottom:6px; }
  .tk-stage-avs { gap:0; padding-left:10px; }
  .tk-stage-avs .tk-av { margin-left:-5px; box-shadow:0 0 0 2px var(--side); }
  .tk-stage-avs .tk-av.spk { box-shadow:0 0 0 2px var(--side), 0 0 0 4px var(--spk); position:relative; z-index:1; }
  .tk-tiles, .tk-tiles.many { display:flex; flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; overflow-y:hidden; gap:8px; max-height:none; padding:6px 8px 8px; scrollbar-width:none; }
  .tk-tile, .tk-tiles.many .tk-tile { flex:none; width:104px; min-width:0; min-height:104px; padding:12px 6px 8px; gap:8px; }
  .tk-tile .tk-av.xl, .tk-tiles.many .tk-av.xl { width:52px; height:52px; font-size:22px; }
  .tk-tile-n { font-size:12px; }
  .tk-tile-st { top:5px; right:6px; font-size:10px; }
  .tk-inv { flex:none; width:104px; min-height:104px; padding:8px; font-size:12px; text-align:center; }
  .tk-msg { padding:6px 48px 2px 12px; column-gap:10px; }
  .tk-mdel { right:4px; top:0; }
  .tk-compose { margin:4px 8px 8px; }
  .tk-banner { margin:8px 8px 0; padding:8px 10px; }
  /* баннер на телефоне — одной строкой, «Подробнее» раскрывает */
  .tk-banner:not(.open) .tk-b-more { display:none; }
  .tk-b-tog { display:inline-block; }
  .tk-menu { left:0 !important; right:0; top:auto !important; bottom:0; width:auto; border-radius:20px 20px 0 0; padding:22px 16px calc(16px + env(safe-area-inset-bottom)); border-bottom:0; animation:tk-sheet .18s ease-out; }
  .tk-menu::before { content:""; position:absolute; top:8px; left:50%; width:36px; height:4px; margin-left:-18px; border-radius:2px; background:var(--line); }
  .tk-menu-bg:not([hidden]) { display:block; position:fixed; inset:0; z-index:39; background:rgba(0,0,0,.4); }
  .tk-home { margin-top:1vh; gap:18px; }
  .tk-title { font-size:30px; }
  .tk-feats { grid-template-columns:1fr; }
  body.in-space .toast { bottom:calc(var(--meH, 64px) + 76px); }
}
@keyframes tk-sheet { from { transform:translateY(24px); opacity:.6; } }
@media (max-width: 380px) {
  .tk-me-t small { font-size:11px; }
  .tk-me { padding-left:4px; padding-right:4px; }
  .tk-me-who { padding:4px; gap:6px; }
  #hangBtn { margin:0 2px; }
}
/* высота окна до 800 px — плитки по умолчанию свёрнуты (talk.js), так что чату хватает места */
.tk-direct.bad { color:var(--bad); background:var(--rec-soft); }
.tk-mb { min-width:0; }
.tk-mb.fail .tk-mtext { opacity:.6; }
.tk-retry { border:0; cursor:pointer; font:inherit; font-size:11px; font-weight:500; }
.tk-retry:hover { text-decoration:underline; }
/* связь человека с сервером оборвалась — ещё в канале, но «переподключается» */
.tk-p.away .tk-p-btn, .tk-tile.away { opacity:.55; }
.tk-p.away .tk-p-name::after, .tk-tile.away .tk-tile-n::after { content:" ⟳"; color:var(--warn); }

/* меньше движения — по просьбе системы */
@media (prefers-reduced-motion: reduce) {
  .tk-pulse path, .tk-node, .tk-menu, .tk-pop, .tk-wdot { animation:none; }
  .tk-tile:hover, .tk-rc:hover { transform:none; }
  .tk-av, .tk-tile, .tk-rc, .sw { transition:none; }
}

/* ---------- 📎 файлы в чате: скрепка, лоток вложений, картинки и файлы в ленте, перетаскивание, просмотр ---------- */
.tk-center { position:relative; }
.tk-compose { flex-wrap:wrap; padding-left:6px; }
.tk-compose textarea { padding-left:2px; }
.tk-clip { display:grid; place-items:center; width:36px; height:36px; flex:none; padding:0; border:0; border-radius:10px; background:none; color:var(--text2); cursor:pointer; transition:color .12s, background-color .12s; }
.tk-clip:hover { color:var(--text); background:var(--soft); }
.tk-clip .i { width:20px; height:20px; }
.tk-clip[aria-disabled="true"] { opacity:.38; cursor:not-allowed; }
.tk-clip[aria-disabled="true"]:hover { color:var(--text2); background:none; }
/* «ждём загрузку…» вместо стрелки */
.tk-send .tk-sw { display:none; }
.tk-send.wait { width:auto; padding:0 12px; font-size:12.5px; font-weight:500; white-space:nowrap; cursor:progress; filter:saturate(.75); }
.tk-send.wait > .i { display:none; }
.tk-send.wait .tk-sw { display:inline-flex; align-items:center; gap:7px; }
.tk-spin { width:13px; height:13px; flex:none; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:tk-rot .8s linear infinite; }
@keyframes tk-rot { to { transform:rotate(360deg); } }

/* лоток: ряд карточек над полем ввода (не помещается — прокрутка вбок) */
.tk-tray { flex:1 0 100%; order:-1; display:flex; gap:8px; overflow-x:auto; overscroll-behavior-x:contain; margin:0 0 6px; padding:4px 2px 10px; border-bottom:1px solid var(--line); scrollbar-width:thin; }
.tk-at { position:relative; flex:none; width:132px; display:flex; flex-direction:column; border-radius:12px; background:var(--card); border:1px solid var(--line); overflow:hidden; animation:tk-pop .14s ease-out; }
.tk-at-pv { position:relative; display:grid; place-items:center; height:88px; background:var(--soft); overflow:hidden; }
.tk-at-pv img { display:block; width:100%; height:100%; object-fit:cover; transition:opacity .2s; }
.tk-at.up .tk-at-pv img, .tk-at.wait .tk-at-pv img { opacity:.7; }
.tk-at-b { display:flex; flex-direction:column; gap:1px; min-width:0; padding:6px 9px 8px; }
.tk-at-n { font-size:12.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-at-m { font-size:11px; color:var(--text2); font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-at-bar { position:absolute; left:8px; right:8px; top:76px; height:5px; border-radius:3px; background:rgba(0,0,0,.45); box-shadow:0 0 0 1px rgba(255,255,255,.12); overflow:hidden; }
.tk-at-bar i { display:block; width:0; height:100%; border-radius:3px; background:var(--grad); transition:width .2s linear; }
.tk-at:not(.up):not(.wait) .tk-at-bar { display:none; }
.tk-at-x { position:absolute; top:5px; right:5px; display:grid; place-items:center; width:24px; height:24px; padding:0; border:0; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; cursor:pointer;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.tk-at-x:hover { background:var(--rec); }
.tk-at-x .i { width:13px; height:13px; stroke-width:2.6; }
.tk-at-re { display:none; position:absolute; top:24px; left:50%; width:40px; height:40px; margin-left:-20px; padding:0; border:0; border-radius:50%; background:var(--rec); color:#fff; cursor:pointer;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.6); }
.tk-at-re:hover { filter:brightness(1.1); }
.tk-at-re .i { width:20px; height:20px; stroke-width:2.4; }
.tk-at.err { border-color:var(--bad); background:color-mix(in srgb, var(--bad) 8%, var(--card)); }
.tk-at.err .tk-at-pv > * { opacity:.3; }
.tk-at.err .tk-at-re { display:grid; place-items:center; }
.tk-at.err .tk-at-m { color:var(--bad); white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.3; }

/* значок файла: лист с цветной меткой расширения */
.tk-fi { --fc:var(--text2); position:relative; display:inline-grid; place-items:center; width:40px; height:46px; flex:none; color:var(--fc); }
.tk-fi .i { position:absolute; inset:0; width:100%; height:100%; stroke-width:1.3; fill:color-mix(in srgb, var(--fc) 13%, transparent); }
.tk-fi-e { position:absolute; left:50%; bottom:9px; transform:translateX(-50%); padding:1px 4px; border-radius:4px; background:var(--fc); color:#fff; font:700 8.5px/1.25 var(--body); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.tk-fi[data-k="arc"] { --fc:#E0952B; } .tk-fi[data-k="vid"] { --fc:#A855F7; } .tk-fi[data-k="aud"] { --fc:#22A863; } .tk-fi[data-k="pdf"] { --fc:#E5484D; }
.tk-fi[data-k="doc"] { --fc:#2F86EB; } .tk-fi[data-k="tab"] { --fc:#16A34A; } .tk-fi[data-k="pres"] { --fc:#EA6A1F; } .tk-fi[data-k="code"] { --fc:#0EA5B7; }
.tk-fi[data-k="img"] { --fc:#DB4FA4; } .tk-fi[data-k="app"] { --fc:#6B7280; } .tk-fi[data-k="other"] { --fc:#7C8494; }
.tk-fi.gone { --fc:var(--text2); }
.tk-fi.gone .i { inset:auto; width:26px; height:26px; position:static; fill:none; stroke-width:1.8; }
.tk-at-pv .tk-fi { width:46px; height:54px; }
.tk-at-pv .tk-fi-e { bottom:11px; font-size:9.5px; }

/* картинки и гифки в ленте */
.tk-media { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin:4px 0 2px; min-width:0; }
.tk-mtext + .tk-media { margin-top:6px; }
.tk-mmarks { margin-top:2px; }
.tk-mmarks .tk-direct { margin-left:0; }
.tk-pic { position:relative; display:block; min-width:0; min-height:0; overflow:hidden; background:var(--soft); cursor:zoom-in; }
.tk-pic img { display:block; transition:filter .15s; }
.tk-pic:hover img { filter:brightness(.92); }
.tk-pic:focus-visible { outline-offset:2px; }
.tk-gal { display:grid; gap:4px; max-width:100%; border-radius:12px; overflow:hidden; }
.tk-gal.one { display:block; width:fit-content; }
.tk-gal.one .tk-pic { border-radius:12px; }
.tk-gal.one img { max-width:100%; height:auto; }
.tk-gal.one .nodim img { object-fit:cover; }
.tk-gal:not(.one) { width:min(420px, 100%); }
.tk-gal:not(.one) img { width:100%; height:100%; object-fit:cover; }
.tk-gal.n2 { grid-template-columns:1fr 1fr; aspect-ratio:2 / 1; }
.tk-gal.n3 { grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; aspect-ratio:3 / 2; }
.tk-gal.n3 .tk-pic:first-child { grid-row:span 2; }
.tk-gal.n4 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; aspect-ratio:4 / 3; }
.tk-gal.n5 { grid-template-columns:repeat(3, 1fr); }
.tk-gal.n5 .tk-pic { aspect-ratio:1; }
.tk-gif { position:absolute; left:6px; bottom:6px; padding:0 6px; border-radius:6px; background:rgba(0,0,0,.62); color:#fff; font:700 10px/17px var(--body); letter-spacing:.06em; pointer-events:none; }
/* успела истечь, а лента ещё не знает — вместо картинки серая плашка */
.tk-pic.broken { cursor:default; background:var(--soft); border:1px dashed var(--line); }
.tk-pic.broken img { visibility:hidden; }
.tk-pic.broken .tk-gif { display:none; }
.tk-pic.broken::after { content:"Файл удалён — файлы хранятся сутки"; position:absolute; inset:0; display:grid; place-items:center; padding:8px; text-align:center; font-size:12px; color:var(--text2); }
.tk-gal.one .tk-pic.broken img { min-width:200px; min-height:70px; }

/* файл — карточка: значок, имя, размер и «до ЧЧ:ММ завтра», «⬇ Скачать» */
.tk-fc { display:flex; align-items:center; gap:12px; width:min(440px, 100%); padding:10px; border-radius:12px; background:var(--side); border:1px solid var(--line); }
.tk-fc-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.tk-fc-n { min-width:0; font-weight:500; color:var(--blue); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
a.tk-fc-n:hover { text-decoration:underline; text-underline-offset:2px; }
.tk-fc-t small { font-size:12px; color:var(--text2); font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-fc-exp { opacity:.8; }
.tk-fc-dl { display:inline-flex; align-items:center; gap:6px; flex:none; min-height:34px; padding:0 14px 0 11px; border-radius:17px; border:1px solid var(--line); background:var(--card); color:var(--text);
  font-size:13px; font-weight:500; text-decoration:none; white-space:nowrap; transition:border-color .12s, background-color .12s; }
.tk-fc-dl:hover { border-color:color-mix(in srgb, var(--violet) 55%, var(--line)); background:color-mix(in srgb, var(--violet) 8%, var(--card)); }
.tk-fc-dl .i { width:16px; height:16px; stroke-width:2.2; }
.tk-fc.gone { background:none; border-style:dashed; }
.tk-fc.gone .tk-fc-n { color:var(--text2); font-weight:500; text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--text2) 50%, transparent); }
.tk-fc.gone .tk-fi { width:40px; height:40px; border-radius:10px; background:var(--soft); }

/* перетаскивание: подсветка всего чата */
.tk-drop { position:absolute; inset:8px; z-index:8; display:grid; place-items:center; border-radius:16px; pointer-events:none;
  border:2px dashed color-mix(in srgb, var(--violet) 75%, transparent); background:color-mix(in srgb, var(--card) 84%, transparent);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:tk-pop .12s ease-out; }
.tk-drop-in { display:flex; flex-direction:column; align-items:center; gap:6px; padding:20px; text-align:center; }
.tk-drop-ico { display:grid; place-items:center; width:68px; height:68px; margin-bottom:6px; border-radius:22px; background:var(--grad); color:#fff; box-shadow:0 16px 34px -14px rgba(192,75,232,.95); }
.tk-drop-ico .i { width:32px; height:32px; stroke-width:2.2; }
.tk-drop b { font-size:18px; font-weight:700; }
.tk-drop small { font-size:13px; color:var(--text2); }
.tk-drop.off { border-color:color-mix(in srgb, var(--warn) 70%, transparent); }
.tk-drop.off .tk-drop-ico { background:var(--soft); color:var(--warn); box-shadow:none; }

/* просмотр картинки поверх страницы */
.tk-lb { width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; inset:0; overflow:hidden; color:#fff; background:rgba(6,6,8,.9); }
.tk-lb[open] { display:flex; flex-direction:column; animation:tk-fade .14s ease-out; }
.tk-lb::backdrop { background:rgba(0,0,0,.35); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
@keyframes tk-fade { from { opacity:0; } }
.tk-lb-top { display:flex; align-items:center; gap:8px; padding:12px 14px 12px 20px; padding-top:max(12px, env(safe-area-inset-top)); background:linear-gradient(rgba(0,0,0,.5), transparent); }
.tk-lb-t { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.tk-lb-t b { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-lb-t small { font-size:12px; color:rgba(255,255,255,.62); font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-lb-b { display:inline-flex; align-items:center; justify-content:center; gap:7px; flex:none; min-height:38px; padding:0 15px 0 12px; border:0; border-radius:19px; background:rgba(255,255,255,.1);
  color:#fff; font-size:13.5px; font-weight:500; text-decoration:none; cursor:pointer; transition:background-color .12s; }
.tk-lb-b:hover { background:rgba(255,255,255,.2); }
.tk-lb-b .i { width:17px; height:17px; stroke-width:2.1; }
.tk-lb-b.ic { width:38px; padding:0; }
.tk-lb :focus-visible { outline-color:#fff; }
.tk-lb-stage { position:relative; flex:1; min-height:0; }
.tk-lb-stage img { position:absolute; inset:0; margin:auto; max-width:calc(100% - 136px); max-height:calc(100% - 28px); width:auto; height:auto; border-radius:6px;
  box-shadow:0 24px 70px -10px rgba(0,0,0,.7); background:repeating-conic-gradient(#2a2a2a 0 25%, #222 0 50%) 0 0 / 16px 16px; }
.tk-lb-nav { position:absolute; top:50%; display:grid; place-items:center; width:48px; height:48px; margin-top:-24px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; }
.tk-lb-nav:hover { background:rgba(255,255,255,.24); }
.tk-lb-nav .i { width:24px; height:24px; stroke-width:2.2; }
.tk-lb-nav.prev { left:16px; } .tk-lb-nav.next { right:16px; }

/* телефон: всё помещается, лоток вбок, картинки — во всю колонку */
@media (max-width: 760px) {
  .tk-clip { width:40px; height:40px; }
  .tk-clip .i { width:22px; height:22px; }
  .tk-send.wait { height:40px; }
  .tk-at { width:112px; }
  .tk-at-pv { height:76px; }
  .tk-at-bar { top:65px; }
  .tk-at-x { width:28px; height:28px; top:4px; right:4px; }
  .tk-gal:not(.one) { width:100%; }
  .tk-fc { gap:10px; padding:8px; }
  .tk-lb-top { padding:10px 8px 10px 14px; padding-top:max(10px, env(safe-area-inset-top)); gap:6px; }
  .tk-lb-b { padding:0; width:40px; min-height:40px; }
  .tk-lb-b span { display:none; }
  .tk-lb-stage img { max-width:100%; max-height:calc(100% - 16px); border-radius:0; }
  .tk-lb-nav { top:auto; bottom:calc(14px + env(safe-area-inset-bottom)); margin:0; width:44px; height:44px; background:rgba(0,0,0,.5); }
  .tk-lb-nav.prev { left:12px; } .tk-lb-nav.next { right:12px; }
  .tk-drop b { font-size:16px; }
}
@media (max-width: 400px) {
  .tk-fc-dl { width:38px; padding:0; justify-content:center; }
  .tk-fc-dl span, .tk-sw-l { display:none; }
  .tk-fc .tk-fi { width:34px; height:40px; }
  .tk-fc-t small { white-space:normal; line-height:1.3; }
  .tk-fc-exp { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}
@media (prefers-reduced-motion: reduce) {
  .tk-at, .tk-drop, .tk-lb[open] { animation:none; }
  .tk-spin { animation-duration:2.4s; }
}
@media (max-width: 400px) { .tk-fc-sep { display:none; } }
.tk-lb:focus { outline:none; }

/* ---------- 🎙 голос: настройки как в Discord — режим ввода, чувствительность со шкалой, проверка, обработка; рация ---------- */
#setDlg { width:min(520px, calc(100vw - 32px)); }
/* заголовок окна прилипает сверху — ✕ всегда под рукой в длинных настройках */
#setDlg .tk-dlg-h { position:sticky; top:-20px; z-index:3; margin:-20px -22px 6px; padding:16px 22px 10px; background:var(--card); }
/* строка «заголовок + серая подпись — справа тумблер / кнопка» */
.tk-swr { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.tk-swr-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tk-swr-t b, .tk-set .tk-swr-t label { font-size:14px; font-weight:500; color:var(--text); line-height:1.35; }
.tk-set .tk-swr-t label { cursor:pointer; }
.tk-swr-t small { font-size:12px; line-height:1.4; color:var(--text2); }
.tk-swr-t small.tk-live { color:var(--ok); font-weight:500; font-variant-numeric:tabular-nums; }
/* тумблер: role="switch", Space/Enter — как у кнопки; в ручке — ✕ / ✓ */
.tk-tg { position:relative; flex:none; width:42px; height:24px; min-height:0; padding:0; border:0; border-radius:12px; cursor:pointer;
  background:color-mix(in srgb, var(--text) 26%, transparent); transition:background-color .18s; }
.tk-tg:hover { background:color-mix(in srgb, var(--text) 34%, transparent); }
.tk-tg[aria-checked="true"] { background:var(--ok); }
.tk-tg[aria-checked="true"]:hover { background:color-mix(in srgb, var(--ok) 88%, var(--text)); }
.tk-tg:focus-visible { outline-offset:3px; border-radius:12px; }
.tk-tg-k { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .2s cubic-bezier(.3, .7, .4, 1); }
.tk-tg[aria-checked="true"] .tk-tg-k { transform:translateX(18px); }
.tk-tg-k::before, .tk-tg-k::after { content:""; position:absolute; left:50%; top:50%; width:8px; height:2px; margin:-1px 0 0 -4px; border-radius:1px;
  background:#8a8a8a; transition:transform .2s, width .2s, background-color .2s; }
.tk-tg-k::before { transform:rotate(45deg); }
.tk-tg-k::after { transform:rotate(-45deg); }
.tk-tg[aria-checked="true"] .tk-tg-k::before { width:5px; background:var(--ok); transform:translate(-2px, 1.5px) rotate(45deg); }
.tk-tg[aria-checked="true"] .tk-tg-k::after { width:9px; background:var(--ok); transform:translate(1.6px, -.2px) rotate(-45deg); }

/* режим ввода — две карточки с кружком */
.tk-modes { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tk-set .tk-mode { position:relative; display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:12px;
  font-size:13px; color:var(--text); cursor:pointer; transition:border-color .15s, background-color .15s; }
.tk-mode:hover { background:var(--soft); }
.tk-row .tk-mode input { position:absolute; width:1px; height:1px; min-height:0; margin:0; padding:0; opacity:0; pointer-events:none; }
.tk-mode-r { flex:none; width:18px; height:18px; margin-top:1px; border-radius:50%; border:2px solid color-mix(in srgb, var(--text) 40%, transparent); transition:border-color .15s, box-shadow .15s, background-color .15s; }
.tk-mode-t { min-width:0; display:flex; flex-direction:column; gap:2px; }
.tk-mode-t b { font-size:13.5px; font-weight:500; line-height:1.3; }
.tk-mode-t small { font-size:12px; line-height:1.4; color:var(--text2); }
.tk-mode:has(input:checked) { border-color:color-mix(in srgb, var(--ok) 65%, var(--line)); background:color-mix(in srgb, var(--ok) 8%, transparent); }
.tk-mode input:checked + .tk-mode-r { border-color:var(--ok); background:var(--ok); box-shadow:inset 0 0 0 3px var(--card); }
.tk-mode input:focus-visible + .tk-mode-r { outline:2px solid var(--blue); outline-offset:2px; }

/* клавиша рации: [Ё] Изменить → «Нажмите клавишу» */
.tk-keybtn { flex:none; display:inline-flex; align-items:center; gap:9px; min-height:40px; padding:0 13px 0 6px; border:1px solid var(--line); border-radius:11px;
  background:var(--hover); color:var(--text2); font-size:12.5px; cursor:pointer; transition:border-color .15s, color .15s; }
.tk-keybtn:hover { color:var(--text); border-color:color-mix(in srgb, var(--text) 30%, var(--line)); }
.tk-keybtn kbd { display:inline-grid; place-items:center; min-width:30px; height:28px; padding:0 8px; border-radius:7px; border:1px solid var(--line);
  background:var(--card); color:var(--text); font:600 14px/1 var(--body); box-shadow:0 2px 0 var(--line); }
.tk-keybtn.wait { border-color:var(--blue); color:var(--blue); }
.tk-keybtn.wait kbd { animation:tk-blink 1s ease-in-out infinite; }

/* шкала уровня: --lv — уровень, --th — порог (0…1 по шкале −60…0 дБ) */
.tk-sens { gap:8px; }
.tk-vu { --lv:0; --th:.17; position:relative; display:flex; align-items:center; height:24px; }
.tk-vu-bar { position:relative; flex:1; height:10px; border-radius:5px; transition:box-shadow .2s, opacity .2s;
  background:linear-gradient(90deg, color-mix(in srgb, var(--warn) 20%, var(--chip)) 0 calc(var(--th) * 100%), color-mix(in srgb, var(--ok) 22%, var(--chip)) 0); }
.tk-vu-fill { position:absolute; inset:0; border-radius:inherit; clip-path:inset(0 calc((1 - var(--lv)) * 100%) 0 0 round 5px);
  background:linear-gradient(90deg, var(--warn) 0 calc(var(--th) * 100%), var(--ok) 0); transition:clip-path .07s linear; }
.tk-vu-mark { position:absolute; top:-5px; bottom:-5px; left:calc(var(--th) * 100%); width:3px; margin-left:-1.5px; border-radius:2px;
  background:var(--text); box-shadow:0 0 0 2px var(--card); transition:left .3s ease; }
.tk-vu:not(.live) .tk-vu-bar { opacity:.55; }
.tk-vu.open .tk-vu-bar { box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.tk-vu.nomark .tk-vu-bar { background:var(--chip); }
.tk-vu.nomark .tk-vu-fill { background:color-mix(in srgb, var(--text) 38%, transparent); }
.tk-vu.nomark.open .tk-vu-fill { background:var(--ok); }
.tk-vu.nomark .tk-vu-mark, .tk-vu.manual .tk-vu-mark { display:none; }
/* вручную — ползунок порога прямо на шкале (центр ручки совпадает с делением шкалы) */
.tk-vu-range { -webkit-appearance:none; appearance:none; position:absolute; top:0; left:-7px; width:calc(100% + 14px); height:24px; min-height:0; margin:0; padding:0;
  border:0; border-radius:0; background:none; cursor:pointer; }
.tk-vu-range:focus { outline:none; }
.tk-vu-range::-webkit-slider-runnable-track { height:24px; background:transparent; border:0; }
.tk-vu-range::-moz-range-track { height:24px; background:transparent; border:0; }
.tk-vu-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:22px; margin-top:1px; border:0; border-radius:7px; background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.35); transition:transform .12s; }
.tk-vu-range::-moz-range-thumb { width:14px; height:22px; border:0; border-radius:7px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.35); }
.tk-vu-range:hover::-webkit-slider-thumb, .tk-vu-range:active::-webkit-slider-thumb { transform:scale(1.08); }
.tk-vu-range:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--blue); }
.tk-vu-range:focus-visible::-moz-range-thumb { box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--blue); }
.tk-vu-foot { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.tk-vu-st { flex:none; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--text2); white-space:nowrap; font-variant-numeric:tabular-nums; }
.tk-vu-st:empty { display:none; }
.tk-vu-st::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.5; transition:box-shadow .15s; }
.tk-vu-st.on { color:var(--ok); }
.tk-vu-st.on::before { opacity:1; box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }

/* «Проверить» / «Остановить» */
.btn.tk-test { flex:none; min-height:36px; padding:0 16px; gap:8px; font-size:13px; font-weight:500; }
.tk-test-dot { width:8px; height:8px; border-radius:50%; background:color-mix(in srgb, var(--text) 35%, transparent); }
.btn.tk-test.on { border-color:color-mix(in srgb, var(--ok) 60%, var(--line)); color:var(--ok); }
.btn.tk-test.on .tk-test-dot { background:var(--ok); animation:tk-blink 1.2s ease-in-out infinite; }
.btn.tk-test:disabled { cursor:progress; }

/* шумоподавление: три варианта, две строки в каждом */
.seg.tk-nz { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); width:100%; border-radius:14px; }
.tk-nz label > span { display:flex; flex-direction:column; align-items:center; gap:1px; height:100%; padding:7px 4px; border-radius:11px; white-space:normal; text-align:center; line-height:1.2; }
.tk-nz b { font-size:13px; font-weight:500; }
.tk-nz small { font-size:11px; color:var(--text2); font-weight:400; }
.tk-nz input:checked + span b { color:var(--text); }
.tk-warn-t { color:var(--warn); }
.tk-lat { padding:8px 11px; border-radius:10px; background:var(--hover); font-variant-numeric:tabular-nums; }

/* «Обработка голоса» — главный тумблер; выключена — шумодав и громкость неактивны */
.tk-procrow { padding:10px 12px; margin:0 -2px; border-radius:12px; background:var(--hover); }
.tk-procbody { display:flex; flex-direction:column; gap:12px; transition:opacity .2s, filter .2s; }
.tk-procbody.off { opacity:.42; filter:grayscale(.6); user-select:none; }
.tk-procoff { padding:8px 11px; border-radius:10px; border:1px dashed var(--line); }
.seg .tk-nz-ms { display:inline; padding:0; border-radius:0; font-size:inherit; color:inherit; white-space:nowrap; font-variant-numeric:tabular-nums; }
/* 📶 задержка своей обработки — рядом с пингом */
.tk-proc-parts .tk-via { color:var(--text2); }

/* рация в панели «я»: держать — говорить (на телефоне — большая, над строкой с именем) */
.tk-me .tk-me-row { grid-row:3; }
.tk-ptt { grid-column:1 / -1; grid-row:2; display:flex; align-items:center; justify-content:center; gap:8px; min-height:40px; margin:0 8px 8px; padding:0 12px;
  border:1px solid color-mix(in srgb, var(--ok) 45%, var(--line)); border-radius:12px; background:color-mix(in srgb, var(--ok) 10%, transparent); color:var(--text);
  font-size:13px; font-weight:500; cursor:pointer; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
  transition:background-color .1s, border-color .1s, color .1s, box-shadow .15s, transform .08s; }
.tk-ptt .i { width:18px; height:18px; color:var(--ok); }
.tk-ptt:hover { background:color-mix(in srgb, var(--ok) 16%, transparent); }
.tk-ptt-t { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-ptt-k { flex:none; font-size:11px; padding:1px 6px; }
.tk-ptt.on { background:var(--ok); border-color:var(--ok); color:#fff; transform:scale(.985); }
.tk-ptt.on .i { color:#fff; }
.tk-ptt.on .tk-ptt-k { background:rgba(255,255,255,.2); border-color:transparent; color:#fff; }
.tk-ptt.on.live { box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 30%, transparent), 0 0 18px -2px color-mix(in srgb, var(--ok) 60%, transparent); }
.tk-ptt.off { background:none; border-color:var(--line); color:var(--text2); cursor:not-allowed; }
.tk-ptt.off .i { color:var(--bad); }
@media (hover: none) { .tk-ptt-k { display:none; } }
/* компьютер: колонка узкая — вместо значка микрофона клавиша, текст целиком */
@media (min-width: 761px) and (hover: hover) { .tk-ptt { gap:7px; padding:0 10px; font-size:12.5px; } .tk-ptt .i { display:none; } }

/* телефон */
@media (max-width: 760px) {
  .tk-ptt { grid-row:1; min-height:56px; margin:2px 0 8px; border-radius:16px; font-size:15px; }
  .tk-ptt .i { width:22px; height:22px; }
  .tk-me.ptt .tk-me-who, .tk-me.ptt #hangBtn, .tk-me.ptt .tk-me-btns { grid-row:2; }
}
@media (max-width: 520px) {
  .tk-dlg, #setDlg { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); padding:16px 14px 14px; }
  #setDlg .tk-dlg-h { top:-16px; margin:-16px -14px 4px; padding:12px 14px 8px; }
  .tk-modes { grid-template-columns:1fr; }
  .tk-swr { gap:12px; }
  .tk-keyrow { flex-wrap:wrap; }
}
@media (max-width: 440px) {
  .tk-vu-foot { flex-wrap:wrap; row-gap:4px; }
  .tk-vu-foot .tk-small { flex:1 1 220px; }
  .tk-testrow, .tk-keyrow { flex-wrap:wrap; row-gap:8px; }
  .tk-testrow .tk-swr-t, .tk-keyrow .tk-swr-t { flex-basis:100%; }
  .btn.tk-test { width:100%; min-height:40px; }
}
@media (max-width: 360px) {
  .tk-nz small { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .tk-tg, .tk-tg-k, .tk-tg-k::before, .tk-tg-k::after, .tk-vu-fill, .tk-vu-mark, .tk-ptt { transition:none; }
  .tk-keybtn.wait kbd, .btn.tk-test.on .tk-test-dot { animation:none; }
}

/* ---------- 🖥 стрим экрана: кнопка, окно выбора, «🔴 В эфире», LIVE, сцена просмотра, «Видео» в статистике ---------- */
.talk { --live:#ED2B4F; }
/* кнопка «Стрим» — рядом с выходом из голоса */
.tk-scr-btn { color:var(--text2); }
.tk-scr-btn:hover { color:var(--text); }
.tk-scr-btn.on { color:var(--live); background:color-mix(in srgb, var(--live) 13%, transparent); }
.tk-scr-btn.busy { opacity:.55; cursor:progress; }
@media (min-width: 761px) {
  .tk-me { grid-template-columns:minmax(0, 1fr) auto auto; }
  #scrBtn { grid-column:2; grid-row:1; align-self:center; margin-right:4px; }
  #hangBtn { grid-column:3; }
  .tk-live { grid-row:2; }
  .tk-ptt { grid-row:4; }
  .tk-me .tk-me-row { grid-row:5; }
}
/* «🔴 В эфире» — красная плашка над именем */
.tk-live { grid-column:1 / -1; margin:0 8px 8px; padding:8px 6px 8px 11px; border-radius:12px; border:1px solid color-mix(in srgb, var(--live) 42%, var(--line));
  background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--live) 20%, transparent), transparent 70%), color-mix(in srgb, var(--live) 6%, var(--card)); }
.tk-live-h { display:flex; align-items:center; gap:6px; min-width:0; }
.tk-live-dot { position:relative; display:inline-block; width:10px; height:10px; flex:none; border-radius:50%; background:var(--live); margin-right:2px; }
.tk-live-dot::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--live); opacity:0; animation:tk-ring 1.8s ease-out infinite; }
@keyframes tk-ring { 0% { transform:scale(.5); opacity:.8; } 100% { transform:scale(1.35); opacity:0; } }
.tk-live-t { flex:1; min-width:0; font-size:13px; font-weight:700; color:var(--live); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tk-live-sub { display:block; margin:3px 0 0 18px; font-size:12px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tk-live-sub[hidden] { display:none; }
.tk-live .tk-ib { width:28px; height:28px; }
.tk-live .tk-ib:disabled { opacity:.45; cursor:default; }   /* 🔁 идёт смена источника */
.tk-live-stop { display:inline-flex; align-items:center; gap:5px; flex:none; min-height:28px; padding:0 10px 0 7px; border:0; border-radius:8px; background:var(--live); color:#fff; font-size:12px; font-weight:500; cursor:pointer; transition:filter .12s; }
.tk-live-stop:hover { filter:brightness(1.1); }
.tk-live-stop .i { width:14px; height:14px; }
.tk-live-warn, .tk-live-fps { margin:7px 0 0; padding:6px 8px; border-radius:8px; font-size:12px; line-height:1.35; }
.tk-live-warn { color:var(--warn); background:color-mix(in srgb, var(--warn) 13%, transparent); }
.tk-live-fps { color:var(--text2); background:var(--soft); font-variant-numeric:tabular-nums; }
.tk-live-enc { margin-top:1px; color:var(--text2); }
.tk-live-relay { color:var(--violet); }
.tk-live-box { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin:7px 0 0; padding:7px 9px; border-radius:9px; font-size:12px; line-height:1.4;
  color:var(--text); background:color-mix(in srgb, var(--violet) 11%, transparent); }
.tk-live-box[hidden] { display:none; }
.tk-live-box.warn { color:var(--warn); background:color-mix(in srgb, var(--warn) 13%, transparent); }
.tk-live-act { align-self:stretch; min-height:28px; padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:0; border-radius:8px; background:var(--card); color:var(--text); font-size:12px; font-weight:500; cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .12s; }
.tk-live-act:hover { box-shadow:inset 0 0 0 1px var(--text2); }
.tk-live-act[hidden] { display:none; }
.tk-me-t small.fwd, .tk-fwd { color:var(--violet); }
.tk-relayrow { display:flex; flex-direction:column; gap:6px; padding:10px 12px; margin:0 -2px; border-radius:12px; background:color-mix(in srgb, var(--violet) 8%, var(--hover)); }
.tk-relay-h { display:flex; align-items:center; gap:14px; }
.tk-relay-seg { flex:none; }
.tk-relay-seg span { padding:5px 11px; font-size:12.5px; }
.tk-relay-n { font-size:12px; color:var(--violet); }
.tk-gentlerow { padding:10px 12px; margin:0 -2px; border-radius:12px; background:color-mix(in srgb, var(--ok) 9%, var(--hover)); }
/* пункты сверх «🎮 Бережно» — обычные, с мелкой пометкой «выключит 🎮» */
.tk-q-f.gx { color:var(--warn); }
.tk-swr-t .tk-gentle-n { align-self:flex-start; margin-top:4px; padding:4px 8px; border-radius:7px; font-size:12px; line-height:1.35; color:var(--text); background:color-mix(in srgb, var(--ok) 14%, transparent); }
.tk-swr-t .tk-gentle-n[hidden] { display:none; }
.tk-live-auto { color:var(--ok); white-space:normal; line-height:1.35; }
/* 🔁 я раздаю чужой стрим (лёгкий стрим) — строка в панели «я» */
.tk-fwdp { grid-column:1 / -1; display:flex; align-items:center; gap:8px; margin:0 8px 8px; padding:6px 10px; border-radius:10px; font-size:12px; line-height:1.35;
  color:var(--violet); background:color-mix(in srgb, var(--violet) 10%, transparent); }
.tk-fwdp[hidden] { display:none; }
@media (min-width: 761px) { .tk-fwdp { grid-row:3; } }
@media (max-width: 760px) { .tk-fwdp { display:none; } }
@media (max-width: 520px) { .tk-relay-h { flex-direction:column; align-items:stretch; gap:8px; } .tk-relay-seg { align-self:flex-start; } }
.tk-live-enc.hw { color:var(--ok); }
.tk-live-enc.cpu { color:var(--warn); }
/* 🐢 «Маша лагает — снизить качество?»: ненавязчивая строка + две кнопки; ⚙ мягко светится (3 вспышки, потом ровно) */
.tk-live-box.tk-lag { color:var(--text); background:color-mix(in srgb, var(--warn) 12%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warn) 30%, transparent); }
.tk-lag-acts { display:flex; gap:6px; align-self:stretch; min-width:0; }
.tk-lag-acts .tk-live-act { align-self:auto; }
.tk-lag-go { flex:1; min-width:0; color:var(--warn); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warn) 55%, transparent); }
.tk-lag-go:hover { box-shadow:inset 0 0 0 1px var(--warn); }
.tk-lag-no { flex:none; background:none; color:var(--text2); box-shadow:none; }
.tk-lag-no:hover { color:var(--text); box-shadow:none; background:var(--soft); }
.tk-live .tk-ib.lag { color:var(--warn); background:color-mix(in srgb, var(--warn) 14%, transparent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--warn) 70%, transparent); }
.tk-live .tk-ib.lag.lag-p { animation:tk-lag-glow 1.1s ease-in-out 3; }
@keyframes tk-lag-glow {
  0%, 100% { box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--warn) 70%, transparent), 0 0 0 0 color-mix(in srgb, var(--warn) 0%, transparent); }
  50% { box-shadow:inset 0 0 0 1.5px var(--warn), 0 0 0 5px color-mix(in srgb, var(--warn) 28%, transparent); }
}
/* «Без перекодирования (бета)» — под переключателем лёгкого стрима */
.tk-fwdrow { margin-top:4px; padding-top:9px; border-top:1px solid color-mix(in srgb, var(--violet) 18%, transparent); }
.tk-fwdrow .tk-swr-t b { font-size:13px; }
.tk-fwdrow.dis .tk-swr-t b { color:var(--text2); }
.tk-beta { display:inline-block; margin-left:4px; padding:0 6px; border-radius:6px; font-size:10.5px; font-weight:600; line-height:16px; letter-spacing:.03em; vertical-align:1px;
  color:var(--violet); background:color-mix(in srgb, var(--violet) 14%, transparent); }

/* значок «LIVE» и кнопка «LIVE» в списке канала */
.tk-live-b { display:inline-flex; align-items:center; flex:none; height:18px; padding:0 6px; border-radius:5px; background:var(--live); color:#fff; font:700 10.5px/18px var(--body); letter-spacing:.06em; }
.tk-p { display:flex; align-items:center; gap:2px; }
.tk-p > .tk-p-btn { flex:1; min-width:0; }
.tk-live-btn { display:inline-flex; align-items:center; gap:3px; flex:none; height:20px; margin-right:4px; padding:0 7px; border:0; border-radius:6px; background:var(--live); color:#fff;
  font:700 10.5px/20px var(--body); letter-spacing:.06em; cursor:pointer; box-shadow:0 4px 12px -6px var(--live); transition:filter .12s, transform .12s; }
.tk-live-btn:hover { filter:brightness(1.1); transform:translateY(-1px); }
.tk-live-btn.on { background:none; color:var(--live); box-shadow:inset 0 0 0 1.5px var(--live); }
.tk-live-btn.warn { background:color-mix(in srgb, var(--live) 55%, #555); }
.tk-live-btn .i { width:11px; height:11px; stroke-width:2.6; }
/* плитка стримера: «LIVE» в углу, кнопка «Смотреть» под именем */
.tk-tile-w { position:relative; display:flex; flex:0 0 172px; min-width:0; }
.tk-tile-w > .tk-tile { flex:1; }
.tk-tile.live { padding-bottom:50px; border-color:color-mix(in srgb, var(--live) 45%, var(--line)); }
.tk-tile-live { position:absolute; top:8px; left:10px; }
.tk-watch-row { position:absolute; left:8px; right:8px; bottom:12px; display:flex; justify-content:center; align-items:center; gap:6px; pointer-events:none; }
.tk-watch-row > * { pointer-events:auto; }
.tk-watch-fs { display:grid; place-items:center; flex:none; width:30px; height:30px; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--card); color:var(--text2); cursor:pointer; transition:color .12s, border-color .12s; }
.tk-watch-fs:hover { color:var(--text); border-color:var(--text2); }
.tk-watch-fs .i { width:15px; height:15px; stroke-width:2.2; }
.tk-watch { display:inline-flex; align-items:center; gap:6px; min-width:0; max-width:100%; min-height:30px; padding:0 13px 0 10px;
  border:0; border-radius:15px; background:var(--grad); color:#fff; font-size:12.5px; font-weight:500; white-space:nowrap; cursor:pointer; box-shadow:0 8px 20px -10px rgba(192,75,232,.95); transition:filter .12s; }
.tk-watch:hover { filter:brightness(1.1); }
.tk-watch .i { width:13px; height:13px; }
.tk-watch.on { background:var(--soft); color:var(--text2); box-shadow:inset 0 0 0 1px var(--line); }
.tk-watch.warn { background:color-mix(in srgb, var(--warn) 18%, var(--card)); color:var(--warn); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warn) 50%, transparent); }
.tk-tiles.many .tk-tile-w { flex:auto; }
.tk-tiles.many .tk-tile.live { padding-bottom:42px; }
.tk-tiles.many .tk-watch-row { bottom:8px; }
.tk-tiles.many .tk-watch { min-height:26px; font-size:12px; }
.tk-tiles.many .tk-watch-fs { width:26px; height:26px; }
/* меню человека: «▶ Смотреть стрим» */
.btn.tk-mn-watch { justify-content:flex-start; gap:8px; background:var(--grad); border:0; color:#fff; }
.btn.tk-mn-watch:hover { background:var(--grad); filter:brightness(1.08); }
.btn.tk-mn-watch small { margin-left:auto; font-size:11.5px; opacity:.85; font-weight:400; }
.btn.tk-mn-watch.warn { background:color-mix(in srgb, var(--warn) 16%, var(--card)); color:var(--warn); }

/* окно «Демонстрация экрана» */
.tk-dlg.tk-scr { width:min(580px, calc(100vw - 32px)); }
.tk-scr-sub { margin:0 0 14px; }
.tk-qs { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
.tk-fs { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.tk-cs { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.tk-q, .tk-cc { position:relative; display:flex; flex-direction:column; gap:1px; min-width:0; padding:9px 12px; border:1px solid var(--line); border-radius:12px; cursor:pointer;
  transition:border-color .15s, background-color .15s, box-shadow .15s; }
.tk-cc { padding:10px 12px; gap:2px; }
.tk-q:hover, .tk-cc:hover { background:var(--soft); }
.tk-q input, .tk-cc input { position:absolute; width:1px; height:1px; margin:0; padding:0; opacity:0; pointer-events:none; }
.tk-q.on, .tk-cc.on { border-color:transparent; background:color-mix(in srgb, var(--violet) 9%, var(--card));
  box-shadow:0 0 0 2px var(--violet), 0 10px 24px -16px color-mix(in srgb, var(--violet) 90%, transparent); }
.tk-q:has(input:focus-visible), .tk-cc:has(input:focus-visible) { outline:2px solid var(--blue); outline-offset:3px; }
.tk-q b { font-size:16px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; }
.tk-q-u { font-size:12px; font-weight:500; letter-spacing:0; }
.tk-q-f { font-size:11.5px; color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-q.on b { color:var(--violet); }
.tk-cc-h { display:flex; align-items:center; gap:6px; min-width:0; }
.tk-cc-h b { font-size:15px; font-weight:700; }
.tk-rec { margin-left:auto; padding:0 6px; border-radius:6px; background:var(--grad); color:#fff; font-size:10px; font-weight:700; line-height:16px; letter-spacing:.02em; white-space:nowrap; }
.tk-cc small { margin-top:3px; font-size:11.5px; line-height:1.35; color:var(--text2); }
.tk-av1-dl { white-space:nowrap; color:inherit; text-decoration:underline; text-underline-offset:2px; }   /* AV1 в браузере до 60 к/с → «Скачать приложение» */
.tk-tag { display:inline-flex; align-items:center; gap:5px; align-self:flex-start; margin-top:3px; padding:1px 8px 1px 7px; border-radius:9px; font-size:11.5px; font-weight:500; white-space:nowrap; background:var(--soft); color:var(--text2); }
.tk-tag i { width:6px; height:6px; border-radius:50%; background:currentColor; }
.tk-tag .tk-wdot { margin:0; }
.tk-tag.hw { color:var(--ok); background:color-mix(in srgb, var(--ok) 14%, transparent); }
.tk-tag.cpu { color:var(--warn); background:color-mix(in srgb, var(--warn) 15%, transparent); }
.tk-tag.bad { color:var(--bad); background:color-mix(in srgb, var(--bad) 13%, transparent); }
.tk-tag.off { color:var(--text2); background:var(--soft); }
.tk-cc.off { cursor:not-allowed; opacity:.5; border-style:dashed; }
.tk-cc.off:hover { background:none; }
.tk-cc.cpu:not(.on) .tk-cc-h b { color:var(--text2); }
#scrCNote { min-height:1.45em; }
.tk-scr-warn { display:flex; gap:8px; align-items:flex-start; padding:8px 10px; border-radius:10px; background:color-mix(in srgb, var(--warn) 11%, transparent); }
.tk-scr-warn .i { width:16px; height:16px; margin-top:1px; }
.tk-tg:disabled { opacity:.45; cursor:not-allowed; }
/* битрейт: «Авто» или ползунок 1…50 Мбит/с */
.tk-rate { gap:8px; }
.tk-rate-h { display:flex; align-items:center; gap:10px; }
.tk-rate-v { margin-left:auto; font-size:13.5px; font-weight:500; font-variant-numeric:tabular-nums; }
.tk-rate-auto { font-size:12.5px; color:var(--text2); }
.tk-rate-in { --p:30%; -webkit-appearance:none; appearance:none; width:100%; height:22px; min-height:0; margin:0; padding:0; border:0; background:none; cursor:pointer; }
.tk-rate-in[hidden] { display:none; }
.tk-rate-in::-webkit-slider-runnable-track { height:6px; border-radius:3px; background:linear-gradient(90deg, var(--violet) var(--p), color-mix(in srgb, var(--text) 18%, transparent) 0); }
.tk-rate-in::-moz-range-track { height:6px; border-radius:3px; background:color-mix(in srgb, var(--text) 18%, transparent); }
.tk-rate-in::-moz-range-progress { height:6px; border-radius:3px; background:var(--violet); }
.tk-rate-in::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:18px; height:18px; margin-top:-6px; border:0; border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.35); }
.tk-rate-in::-moz-range-thumb { width:18px; height:18px; border:0; border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.35); }
.tk-rate-in:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--blue); }
.tk-rate-f { display:flex; justify-content:space-between; gap:12px; margin-top:-4px; font-size:11.5px; color:var(--text2); }
.tk-rate-f[hidden] { display:none; }
.tk-rate-live { padding:7px 10px; border-radius:9px; background:var(--hover); font-variant-numeric:tabular-nums; }
/* оценка отдачи */
.tk-est { display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:12px; background:var(--hover); border:1px solid var(--line); }
.tk-est-i { display:grid; place-items:center; width:36px; height:36px; flex:none; border-radius:11px; background:var(--grad); color:#fff; }
.tk-est-i .i { width:19px; height:19px; stroke-width:2.2; }
.tk-est-t { min-width:0; display:flex; flex-direction:column; gap:2px; line-height:1.35; }
.tk-est-t b { font-size:14px; font-weight:500; font-variant-numeric:tabular-nums; }
.tk-est-n { font-size:12px; font-weight:400; color:var(--ok); }
.tk-est-t small { font-size:12px; color:var(--text2); }
.tk-scr-acts { margin-top:16px; }
.tk-scr-acts .btn.tk-go { gap:8px; }
.tk-scr-acts .btn .i { width:18px; height:18px; }

/* сцена: стрим над чатом */
.tk-scene { display:flex; flex-direction:column; gap:8px; margin:10px 12px 0; }
.tk-scene[hidden] { display:none; }
.tk-sc-tabs { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.tk-sc-tabs[hidden] { display:none; }
.tk-sc-tab { display:inline-flex; align-items:center; flex:none; border-radius:11px; border:1px solid var(--line); background:var(--side); transition:border-color .12s, background-color .12s; }
.tk-sc-tab.on { border-color:color-mix(in srgb, var(--live) 50%, var(--line)); background:color-mix(in srgb, var(--live) 8%, var(--card)); }
.tk-sc-tb { display:inline-flex; align-items:center; gap:7px; min-height:32px; padding:0 4px 0 8px; border:0; background:none; color:var(--text2); font-size:13px; font-weight:500; cursor:pointer; }
.tk-sc-tab.on .tk-sc-tb { color:var(--text); }
.tk-sc-tb > .i { width:14px; height:14px; color:var(--warn); }
.tk-sc-tb .tk-live-dot { width:7px; height:7px; margin:0 2px; }
.tk-sc-tb .tk-live-dot::after { inset:-3px; border-width:1.5px; }
.tk-sc-x { display:grid; place-items:center; width:26px; height:26px; margin-right:3px; padding:0; border:0; border-radius:8px; background:none; color:var(--text2); cursor:pointer; }
.tk-sc-x:hover { background:var(--soft); color:var(--text); }
.tk-sc-x .i { width:14px; height:14px; }
.tk-sv { position:relative; width:100%; aspect-ratio:16 / 9; min-height:200px; max-height:max(220px, min(66vh, calc(100dvh - var(--barH, 57px) - 330px)));
  border-radius:14px; overflow:hidden; background:#060608; color:#fff; isolation:isolate; user-select:none; }
.tk-sv[hidden] { display:none; }
.tk-sv::before { content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(110% 90% at 25% 15%, rgba(192,75,232,.24), transparent 60%), radial-gradient(90% 80% at 85% 100%, rgba(62,166,255,.16), transparent 60%), #111116; }
.tk-sv[data-st="play"]::before { display:none; }
.tk-sv-v { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.tk-sv:not([data-st="play"]) .tk-sv-v { visibility:hidden; }
.tk-sv-ph { position:absolute; inset:0; display:grid; place-items:center; padding:52px 20px 48px; text-align:center; }
.tk-sv[data-st="play"] .tk-sv-ph { display:none; }
.tk-sv-wait, .tk-sv-err { display:flex; flex-direction:column; align-items:center; gap:6px; max-width:440px; }
.tk-sv-wait b, .tk-sv-err b { font-size:15px; font-weight:500; line-height:1.35; text-wrap:balance; }
.tk-sv-wait small, .tk-sv-err small { font-size:12.5px; line-height:1.45; color:rgba(255,255,255,.66); text-wrap:balance; }
.tk-spin.big { width:30px; height:30px; border-width:3px; margin-bottom:8px; }
.tk-sv-ei { display:grid; place-items:center; width:56px; height:56px; margin-bottom:6px; border-radius:18px; color:#F2C14E; background:rgba(242,193,78,.13); box-shadow:inset 0 0 0 1px rgba(242,193,78,.28); }
.tk-sv-ei .i { width:30px; height:30px; stroke-width:1.9; }
.tk-sv-retry { display:inline-flex; align-items:center; gap:7px; min-height:34px; margin-top:10px; padding:0 15px 0 12px; border:0; border-radius:17px; background:rgba(255,255,255,.12); color:#fff; font-size:13px; font-weight:500; cursor:pointer; }
.tk-sv-retry:hover { background:rgba(255,255,255,.2); }
.tk-sv-retry .i { width:16px; height:16px; }
/* поверх видео: имя и качество сверху, LIVE, звук игры и полный экран снизу; прячутся, когда мышь не двигается */
.tk-sv-top, .tk-sv-bot { position:absolute; left:0; right:0; z-index:2; display:flex; align-items:center; gap:8px; transition:opacity .2s; }
.tk-sv-top { top:0; padding:10px 10px 26px 12px; background:linear-gradient(rgba(0,0,0,.62), transparent); }
.tk-sv-bot { bottom:0; padding:26px 10px 10px 12px; background:linear-gradient(transparent, rgba(0,0,0,.62)); }
/* прячется и курсор; фокус мышью (кнопка нажата) не держит панель — только с клавиатуры (:focus-visible) */
.tk-sv[data-st="play"]:not(.act):not(.menu):not(.paused):not(:has(:focus-visible)) .tk-sv-top, .tk-sv[data-st="play"]:not(.act):not(.menu):not(.paused):not(:has(:focus-visible)) .tk-sv-bot { opacity:0; pointer-events:none; }
.tk-sv[data-st="play"]:not(.act):not(.menu):not(.paused):not(:has(:focus-visible)) { cursor:none; }
.tk-sv-b.tk-sv-big { width:40px; height:40px; background:rgba(255,255,255,.16); }
.tk-sv-b.tk-sv-big:hover { background:rgba(255,255,255,.28); }
.tk-sv-b.tk-sv-big .i { width:20px; height:20px; stroke-width:2.3; }
.tk-sv-b.on { background:#fff; color:#111; }
.tk-sv-av { display:inline-flex; flex:none; }
.tk-sv-av .tk-av { box-shadow:0 0 0 2px rgba(0,0,0,.35); }
.tk-sv-t { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.tk-sv-t b { font-size:13.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-sv-t small { font-size:11.5px; color:rgba(255,255,255,.75); font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-sv-sp { flex:1; }
.tk-sv-b { display:grid; place-items:center; flex:none; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:rgba(0,0,0,.42); color:#fff; cursor:pointer;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:background-color .12s; }
.tk-sv-b:hover { background:rgba(0,0,0,.72); }
.tk-sv-b .i { width:18px; height:18px; stroke-width:2.1; }
.tk-sv :focus-visible { outline:2px solid #fff; outline-offset:2px; }
.tk-sv-aud { display:inline-flex; align-items:center; gap:2px; padding-right:12px; border-radius:18px; background:rgba(0,0,0,.42); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.tk-sv-aud[hidden] { display:none; }
.tk-sv:not([data-st="play"]) .tk-sv-aud, .tk-sv:not([data-st="play"]) .tk-sv-fs { display:none; }   /* нет видео — нечего слушать и растягивать */
.tk-sv-aud .tk-sv-b { background:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.tk-sv-vol { --p:100%; -webkit-appearance:none; appearance:none; width:92px; height:18px; min-height:0; margin:0; padding:0; border:0; background:none; cursor:pointer; }
.tk-sv-vol::-webkit-slider-runnable-track { height:4px; border-radius:2px; background:linear-gradient(90deg, #fff var(--p), rgba(255,255,255,.3) 0); }
.tk-sv-vol::-moz-range-track { height:4px; border-radius:2px; background:linear-gradient(90deg, #fff var(--p), rgba(255,255,255,.3) 0); }
.tk-sv-vol::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:13px; height:13px; margin-top:-4.5px; border:0; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.5); }
.tk-sv-vol::-moz-range-thumb { width:13px; height:13px; border:0; border-radius:50%; background:#fff; }
/* 🔊 громкость: значок + ползунок + % слева в нижней панели; нет звука игры — значок перечёркнут */
.tk-sv-aud.na, .tk-sv-aud.fixed { padding-right:0; }
.tk-sv-aud.na .tk-sv-b { opacity:.7; cursor:help; }
.tk-sv-vol[hidden] { display:none; }
.tk-sv-volb .i { width:20px; height:20px; }
/* «🔊 55 %» на миг по центру (клавиши, колесо) */
.tk-sv-flash { position:absolute; left:50%; top:50%; z-index:3; display:inline-flex; align-items:center; gap:8px; padding:9px 16px 9px 13px; border-radius:22px; transform:translate(-50%, -50%);
  background:rgba(0,0,0,.62); color:#fff; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; pointer-events:none; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.tk-sv-flash[hidden] { display:none; }
.tk-sv-flash .i { width:22px; height:22px; }
/* браузер не дал звук без нажатия — большая кнопка по центру */
.tk-sv-tap { position:absolute; left:50%; top:50%; z-index:4; display:inline-flex; align-items:center; gap:9px; min-height:46px; padding:0 22px 0 17px; border:0; border-radius:23px; transform:translate(-50%, -50%);
  background:#fff; color:#111; font-size:15px; font-weight:600; cursor:pointer; box-shadow:0 8px 28px rgba(0,0,0,.45); }
.tk-sv-tap:hover { background:#f1f1f1; }
.tk-sv-tap .i { width:20px; height:20px; }
/* ⋯ меню сцены */
.tk-sv-menu { position:absolute; right:10px; bottom:60px; z-index:5; min-width:230px; padding:6px; border-radius:12px; background:rgba(22,22,26,.94); color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.tk-sv-menu[hidden] { display:none; }
.tk-sv-mi { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:38px; padding:0 10px; border:0; border-radius:8px; background:none; color:#fff; font-size:13.5px; text-align:left; cursor:pointer; }
.tk-sv-mi:hover, .tk-sv-mi:focus-visible { background:rgba(255,255,255,.1); }
.tk-sv-mi .i { width:16px; height:16px; stroke-width:2.4; color:#7fd8a6; visibility:hidden; }
.tk-sv-mi.on .i { visibility:visible; }
/* 📊 статистика видео (как на Twitch): слева сверху, полупрозрачная, моноширинные цифры */
.tk-vs { position:absolute; top:58px; left:12px; z-index:3; width:max-content; max-width:min(440px, calc(100% - 24px)); max-height:calc(100% - 128px); overflow:auto; overscroll-behavior:contain;
  padding:8px 10px 10px; border-radius:10px; background:rgba(0,0,0,.72); color:#fff; font-size:12px; line-height:1.4; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.tk-vs[hidden] { display:none; }
.tk-vs-h { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.tk-vs-h b { flex:1; font-size:12.5px; font-weight:600; }
.tk-vs-b { min-height:24px; padding:0 9px; border:0; border-radius:6px; background:rgba(255,255,255,.14); color:#fff; font-size:11.5px; cursor:pointer; }
.tk-vs-b:hover { background:rgba(255,255,255,.24); }
.tk-vs-x { display:grid; place-items:center; width:24px; height:24px; padding:0; border:0; border-radius:6px; background:none; color:#fff; cursor:pointer; }
.tk-vs-x:hover { background:rgba(255,255,255,.16); }
.tk-vs-x .i { width:14px; height:14px; }
.tk-vs-dl { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:2px 14px; margin:0; }
.tk-vs-dl dt { color:rgba(255,255,255,.62); white-space:nowrap; }
.tk-vs-dl dd { margin:0; font-family:ui-monospace, "Cascadia Mono", Consolas, monospace; font-size:11.5px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.tk-sv:fullscreen .tk-vs { top:78px; left:20px; font-size:13px; }
.tk-sv:fullscreen .tk-vs-dl dd { font-size:12.5px; }
.tk-sv-tap[hidden] { display:none; }
/* 🐢 «Лагает» — попросить стримера снизить качество */
/* подпись «Переключил на Олю — у Маши медленный интернет»: 5 с, видна и когда кнопки спрятаны */
.tk-sv-note { position:absolute; top:58px; left:50%; z-index:3; max-width:calc(100% - 24px); transform:translateX(-50%); padding:5px 12px; border-radius:14px;
  background:rgba(0,0,0,.62); color:#fff; font-size:12px; line-height:1.35; text-align:center; text-wrap:balance; pointer-events:none;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.tk-sv-note[hidden] { display:none; }
/* сенсорный экран: маленькая полупрозрачная ⛶ в углу, пока панель спрятана (панель видна — на её месте обычная ⛶) */
.tk-sv-fsm { display:none; }
@media (hover: none) {
  .tk-sv { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  .tk-sv[data-st="play"]:not(.act):not(.menu):not(.paused):not(:has(:focus-visible)) .tk-sv-fsm { position:absolute; right:6px; bottom:6px; z-index:3; display:grid; place-items:center; width:48px; height:48px; padding:0; border:0;
    background:none; color:#fff; opacity:.92; cursor:pointer; touch-action:manipulation; }
  .tk-sv-fsm .i { width:23px; height:23px; stroke-width:2.2; filter:drop-shadow(0 1px 2px rgba(0,0,0,.7)) drop-shadow(0 0 6px rgba(0,0,0,.35)); }
}

/* полный экран: видео на весь экран, без скруглений */
.tk-sv:fullscreen { width:100vw; height:100vh; max-height:none; aspect-ratio:auto; border-radius:0; }
.tk-sv:fullscreen .tk-sv-top { padding:16px 18px 40px 20px; }
.tk-sv:fullscreen .tk-sv-bot { padding:40px 18px 16px 20px; }
.tk-sv:fullscreen .tk-sv-t b { font-size:15px; }

/* 📶 «Видео» в статистике */
.tk-vcard .tk-pr-h .tk-via { margin-left:auto; }
.tk-vcard .tk-pr-h b { flex:0 1 auto; }
.tk-vcard .tk-pr-h .tk-live-b { height:17px; font-size:10px; }
.tk-vf { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:3px 12px; margin:8px 0 0; padding-left:28px; font-size:12px; }
.tk-vf dt { color:var(--text2); }
.tk-vf dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-vf dd.ok { color:var(--ok); } .tk-vf dd.warn { color:var(--warn); } .tk-vf dd.bad { color:var(--bad); }
.tk-via.wait { color:var(--text2); }

/* телефон: стримить нельзя (кнопки нет), смотреть — сцена во всю ширину */
@media (max-width: 760px) {
  #scrBtn, .tk-live { display:none; }
  .tk-scene { margin:8px 8px 0; }
  .tk-sv { min-height:0; max-height:46dvh; border-radius:12px; }
  .tk-sv-b { width:40px; height:40px; }
  .tk-sv-vol { width:72px; }
  .tk-vs { top:50px; left:6px; right:6px; width:auto; max-width:none; max-height:calc(100% - 104px); padding:6px 8px 8px; font-size:11px; }
  .tk-vs-dl { gap:1px 10px; }
  .tk-vs-dl dt { white-space:normal; }
  .tk-vs-dl dd { font-size:10.5px; }
  .tk-sv-menu { right:6px; bottom:56px; min-width:0; }
  .tk-sv-ph { padding:44px 14px 44px; }
  .tk-sv-wait b, .tk-sv-err b { font-size:14px; }
  .tk-sv-err small { font-size:12px; }
  .tk-sv-ei { width:44px; height:44px; border-radius:14px; margin-bottom:2px; }
  .tk-sv-ei .i { width:24px; height:24px; }
  .tk-tile-w { flex:none; width:104px; }
  .tk-tile.live { padding-bottom:42px; }
  .tk-tile-live { top:5px; left:6px; height:16px; font-size:9.5px; padding:0 4px; }
  .tk-watch-row { bottom:8px; left:4px; right:4px; }
  .tk-watch-fs { display:none; }
  .tk-watch { min-height:28px; padding:0 10px 0 8px; font-size:12px; }
  .tk-live-btn { height:24px; padding:0 8px; }
  .tk-sv-note { top:52px; font-size:11.5px; }
}
@media (max-width: 560px) {
  .tk-qs { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 440px) { .tk-cs { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) {
  .tk-live-dot::after { animation:none; }
  .tk-sv-top, .tk-sv-bot, .tk-live-btn { transition:none; }
  .tk-live .tk-ib.lag.lag-p { animation:none; }
}

/* AV1 на видеокарте выключен Chrome на Windows: подсказка под кодеками и окно «Как включить» */
.tk-av1h { display:flex; align-items:center; gap:8px; padding:8px 8px 8px 10px; border-radius:10px; font-size:12.5px; line-height:1.4; color:var(--warn);
  background:color-mix(in srgb, var(--warn) 11%, transparent); }
.tk-av1h[hidden] { display:none; }
.tk-av1h > .i { flex:none; width:16px; height:16px; }
.tk-av1h > span { flex:1; min-width:0; }
.tk-av1h-b { flex:none; min-height:30px; padding:0 12px; border:0; border-radius:8px; background:var(--card); color:var(--text); font-size:12.5px; font-weight:500; cursor:pointer;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warn) 50%, transparent); }
.tk-av1h-b:hover { box-shadow:inset 0 0 0 1px var(--warn); }
.tk-av1d { width:min(500px, calc(100vw - 32px)); }
.tk-av1d > .tk-small { margin:4px 0 0; color:var(--text2); line-height:1.5; }
.tk-av1-steps { margin:14px 0 18px; padding-left:22px; display:flex; flex-direction:column; gap:12px; font-size:14px; line-height:1.5; }
.tk-av1-steps li::marker { color:var(--text2); font-weight:600; }
.tk-av1-steps b { font-weight:600; }
.tk-av1-steps small { display:block; margin-top:4px; font-size:12px; color:var(--text2); word-break:break-all; }
.tk-av1-code { display:flex; align-items:center; gap:8px; margin-top:7px; padding:5px 5px 5px 10px; border-radius:9px; background:var(--soft); }
.tk-av1-code code { flex:1; min-width:0; font:500 12.5px/1.4 ui-monospace, Consolas, monospace; overflow-wrap:anywhere; }
.tk-av1-copy { flex:none; min-height:30px; padding:0 12px; font-size:12.5px; }
@media (max-width: 520px) { .tk-av1h { flex-wrap:wrap; } .tk-av1h-b { margin-left:24px; } }
.tk-av1-steps small code { font:12px/1.4 ui-monospace, Consolas, monospace; }
.tk-nowrap { white-space:nowrap; }

/* нижняя панель сцены — как на Twitch/YouTube: белые значки без подложек, с мягкой тенью; громкость — значок + тонкая полоса */
.tk-sv-bot .tk-sv-b, .tk-sv-bot .tk-sv-b.tk-sv-big { width:40px; height:40px; border-radius:8px; background:none; color:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; }
.tk-sv-bot .tk-sv-b:hover, .tk-sv-bot .tk-sv-b.tk-sv-big:hover, .tk-sv-bot .tk-sv-b.on { background:none; }
.tk-sv-bot .tk-sv-b .i, .tk-sv-bot .tk-sv-b.tk-sv-big .i { width:22px; height:22px; stroke-width:2.1; filter:drop-shadow(0 1px 2px rgba(0,0,0,.65)); transition:transform .12s; }
.tk-sv-bot .tk-sv-b:hover .i { transform:scale(1.12); }
.tk-sv-bot .tk-sv-b.on { color:#9fd0ff; }
.tk-sv-bot .tk-sv-set[aria-expanded="true"] .i { transform:rotate(30deg); }
.tk-sv-aud { gap:2px; padding:0; border-radius:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.tk-sv-vol { width:104px; height:24px; margin-right:4px; }
.tk-sv-vol::-webkit-slider-runnable-track { height:4px; border-radius:2px; background:linear-gradient(90deg, #fff var(--p), rgba(255,255,255,.3) 0); box-shadow:0 1px 2px rgba(0,0,0,.35); }
.tk-sv-vol::-moz-range-track { height:4px; border-radius:2px; background:rgba(255,255,255,.3); box-shadow:0 1px 2px rgba(0,0,0,.35); }
.tk-sv-vol::-moz-range-progress { height:4px; border-radius:2px; background:#fff; }
.tk-sv-vol::-webkit-slider-thumb { width:13px; height:13px; margin-top:-4.5px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.55); transition:transform .12s; }
.tk-sv-vol::-moz-range-thumb { width:13px; height:13px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.55); transition:transform .12s; }
.tk-sv-vol:hover::-webkit-slider-thumb, .tk-sv-vol:active::-webkit-slider-thumb, .tk-sv-vol:focus-visible::-webkit-slider-thumb { transform:scale(1.2); }
.tk-sv-vol:hover::-moz-range-thumb, .tk-sv-vol:active::-moz-range-thumb { transform:scale(1.2); }
.tk-sv-vol:focus-visible { outline:none; }
.tk-sv-vol:focus-visible::-webkit-slider-runnable-track { box-shadow:0 0 0 2px rgba(255,255,255,.55); }
@media (max-width: 760px) {
  .tk-sv-bot { gap:4px; }
  .tk-sv-bot .tk-sv-b, .tk-sv-bot .tk-sv-b.tk-sv-big { width:44px; height:44px; }
  .tk-sv-vol { width:76px; height:44px; }
}
@media (prefers-reduced-motion: reduce) { .tk-sv-bot .tk-sv-b .i, .tk-sv-vol::-webkit-slider-thumb { transition:none; } }

/* кодеки: пока идёт проверка видеокарты — лёгкий скелетон */
.tk-cc.sk { cursor:progress; animation:tk-sk 1.2s ease-in-out infinite alternate; }
.tk-cc.sk small { visibility:hidden; }
@keyframes tk-sk { from { opacity:.55; } to { opacity:.9; } }
@media (prefers-reduced-motion: reduce) { .tk-cc.sk { animation:none; opacity:.7; } }

/* ▶/❚❚: в панели — белый значок; большая круглая ▶ по центру, когда видео стоит */
.tk-sv-bot .tk-sv-play .i { width:21px; height:21px; }
.tk-sv-bot .tk-sv-play[hidden] { display:none; }
.tk-sv-bigplay { position:absolute; left:50%; top:50%; z-index:4; display:grid; place-items:center; width:76px; height:76px; padding:0; border:0; border-radius:50%; transform:translate(-50%, -50%);
  background:rgba(0,0,0,.55); color:#fff; cursor:pointer; box-shadow:0 6px 26px rgba(0,0,0,.45); touch-action:manipulation; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background-color .12s, transform .12s; }
.tk-sv-bigplay:hover { background:rgba(0,0,0,.72); transform:translate(-50%, -50%) scale(1.05); }
.tk-sv-bigplay[hidden] { display:none; }
.tk-sv-bigplay .i { width:34px; height:34px; margin-left:4px; fill:currentColor; stroke-width:1.6; }
/* пункт меню с подписью: «🐢 Попросить снизить качество» / «можно через N с» */
.tk-sv-mi[hidden] { display:none; }
.tk-sv-mit { display:flex; flex-direction:column; gap:1px; min-width:0; padding:5px 0; }
.tk-sv-mis { font-size:11.5px; color:rgba(255,255,255,.6); }
.tk-sv-mi:disabled { cursor:default; opacity:.6; }
.tk-sv-mi:disabled:hover { background:none; }
@media (max-width: 760px) { .tk-sv-bigplay { width:64px; height:64px; } .tk-sv-bigplay .i { width:28px; height:28px; } }
@media (prefers-reduced-motion: reduce) { .tk-sv-bigplay { transition:none; } }

/* ⏱ буфер в меню ⚙: заголовок раздела и радиопункты */
.tk-sv-mh { display:flex; flex-direction:column; gap:2px; margin:6px 4px 2px; padding:8px 6px 4px; border-top:1px solid rgba(255,255,255,.12); font-size:12.5px; font-weight:600; }
.tk-sv-mh small { font-size:11px; font-weight:400; line-height:1.35; color:rgba(255,255,255,.6); max-width:250px; }
.tk-sv-mr { min-height:34px; }
.tk-sv-mr b { font-weight:500; }
.tk-sv-menu { max-height:calc(100% - 70px); overflow-y:auto; overscroll-behavior:contain; }

/* 👁 глазик (как в Discord): смотреть / перестать смотреть; «👁 3» — сколько смотрят */
.tk-live-g { display:inline-flex; align-items:center; gap:2px; flex:none; margin-right:4px; }
.tk-live-g .tk-live-btn { margin-right:0; }
.tk-eye { display:grid; place-items:center; flex:none; width:24px; height:24px; padding:0; border:0; border-radius:6px; background:none; color:var(--text2); cursor:pointer; transition:color .12s, background-color .12s; }
.tk-eye:hover { color:var(--text); background:var(--soft); }
.tk-eye.on { color:var(--live); }
.tk-eye .i { width:16px; height:16px; stroke-width:2; }
.tk-eye.tk-eye-t { width:30px; height:30px; border:1px solid var(--line); border-radius:50%; background:var(--card); }
.tk-eye.tk-eye-t.on { border-color:color-mix(in srgb, var(--live) 55%, var(--line)); background:color-mix(in srgb, var(--live) 12%, var(--card)); }
.tk-tiles.many .tk-eye.tk-eye-t { width:26px; height:26px; }
.tk-vw { display:inline-flex; align-items:center; gap:2px; flex:none; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--text2); }
.tk-vw .i { width:13px; height:13px; stroke-width:2.2; }
.tk-tile-live { display:inline-flex; align-items:center; gap:5px; }
.tk-vw.tk-vw-t { height:18px; padding:0 6px 0 5px; border-radius:5px; background:rgba(0,0,0,.55); color:#fff; }
.tk-mn-watch.on { color:var(--live); }
/* сцена: несколько стримов сразу — сетка; развёрнутый крупно, остальные превью сбоку */
.tk-sc-box.multi { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.tk-sc-box.multi .tk-sv { min-height:0; max-height:none; border-radius:12px; }
.tk-sc-box.multi .tk-sv.main { box-shadow:0 0 0 2px color-mix(in srgb, var(--live) 55%, transparent); }
.tk-sc-box.multi .tk-sv-vol { width:72px; }
.tk-sc-box.multi .tk-sv-bot { gap:2px; padding:22px 6px 6px 8px; }
.tk-sc-box.multi .tk-sv-top { padding:8px 8px 22px 10px; }
.tk-sc-box.focus { grid-template-columns:minmax(0, 1fr) minmax(150px, 26%); grid-auto-rows:min-content; align-items:start; }
.tk-sc-box.focus .tk-sv.big { grid-column:1; grid-row:1 / span 3; box-shadow:none; }
.tk-sc-box.focus .tk-sv.mini { grid-column:2; cursor:pointer; }
.tk-sv.mini .tk-sv-bot > :not(.tk-sv-volb):not(.tk-sv-aud):not(.tk-sv-play), .tk-sv.mini .tk-sv-vol, .tk-sv.mini .tk-vs, .tk-sv.mini .tk-sv-t small, .tk-sv.mini .tk-sv-av, .tk-sv.mini .tk-sv-note { display:none; }
.tk-sv.mini .tk-sv-t b { font-size:12px; }
.tk-sv.mini .tk-sv-bigplay { width:44px; height:44px; }
.tk-sv.mini .tk-sv-bigplay .i { width:20px; height:20px; }
.tk-sv-foc[hidden] { display:none; }
.tk-sv-top .tk-sv-b.tk-sv-foc { margin-left:auto; }
.tk-sv-top .tk-sv-foc + .tk-sv-b { margin-left:0; }
@media (max-width: 760px) {
  .tk-sc-box.multi { display:flex; flex-direction:column; gap:8px; }
  .tk-sc-box.multi .tk-sv { max-height:40dvh; }
  .tk-sv-foc { display:none; }
}

/* «бета» — приглушённо, как BETA в Discord; у кодека — в строке с названием */
.tk-beta { cursor:help; color:color-mix(in srgb, var(--violet) 75%, var(--text2)); background:color-mix(in srgb, var(--violet) 11%, transparent); text-transform:lowercase; }
.tk-cc-h .tk-beta { margin-left:auto; }
.tk-cc-h .tk-rec + .tk-beta { margin-left:0; }

/* 🎮 что показываем: окно игры / весь экран */
.tk-qs.tk-srfs { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.tk-q.tk-srf.dis { opacity:.55; cursor:not-allowed; }
#scrSTip { margin:2px 0 0; }
/* плашка поверх страницы, пока открыт выбор браузера («Шаг 1 из 2…») */
.tk-pick { position:fixed; top:14px; left:50%; z-index:2147483000; transform:translateX(-50%); display:flex; flex-direction:column; gap:2px; max-width:min(560px, calc(100vw - 24px)); padding:12px 18px;
  border-radius:14px; background:var(--grad, #7c4dff); color:#fff; box-shadow:0 12px 34px rgba(0,0,0,.4); text-align:center; }
.tk-pick[hidden] { display:none; }
.tk-pick b { font-size:15px; font-weight:700; line-height:1.35; }
.tk-pick small { font-size:12.5px; opacity:.9; }
.tk-live-noaud { flex-direction:row; align-items:center; justify-content:space-between; }
.tk-live-noaud .tk-live-act { align-self:auto; flex:none; }

/* 🧱 без прыжков: окно стрима — постоянная ширина и высота, полоса прокрутки не сдвигает раскладку, кнопки внизу на месте */
.tk-dlg.tk-scr { width:min(640px, calc(100vw - 32px)); height:min(1400px, calc(100dvh - 32px)); max-height:none; padding:20px 12px 0 22px;
  overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; scroll-padding-bottom:96px; }
.tk-dlg.tk-scr[open] { display:flex; flex-direction:column; }
.tk-dlg.tk-scr > * { flex:none; }
.tk-scr-acts { position:sticky; bottom:0; z-index:2; margin-top:auto; padding:12px 0 18px; background:var(--card); box-shadow:0 -1px 0 var(--line); }
.tk-dlg.tk-scr .tk-set { padding-bottom:16px; }
/* «Что показываем»: совет (окно игры) и предупреждение (весь экран) — в одной клетке, место под бо́льшее */
#scrDlg section[aria-labelledby="scrSL"]:not([hidden]) { display:grid; grid-template-columns:minmax(0, 1fr); row-gap:12px; }
#scrDlg #scrSHint, #scrDlg #scrSTip { grid-row:3; grid-column:1; align-self:start; }
#scrDlg #scrSHint[hidden] { display:flex !important; visibility:hidden; }
#scrDlg #scrSTip[hidden] { display:block !important; visibility:hidden; }
/* битрейт: ползунок всегда на месте; «Авто» — бледный */
.tk-rate-in.auto, .tk-rate-f.auto { opacity:.4; }
.tk-rate-in.auto:hover, .tk-rate-in.auto:focus-visible { opacity:.7; }
/* 🎮 строка «Бережно … включено» — поверх пояснения, а не под ним */
#scrDlg .tk-gentlerow .tk-swr-t { display:grid; grid-template-columns:minmax(0, 1fr); row-gap:2px; }
#scrDlg #scrGentleD, #scrDlg #scrGentleN { grid-row:2; grid-column:1; }
#scrDlg #scrGentleN { justify-self:start; }
#scrDlg .tk-gentlerow .tk-swr-t:has(#scrGentleN:not([hidden])) #scrGentleD { visibility:hidden; }
/* спрятано, но место держит */
.tk-ghost { visibility:hidden; }
@media (max-width: 760px) {
  .tk-dlg.tk-scr { width:calc(100vw - 16px); height:calc(100dvh - 16px); padding:16px 8px 0 14px; }
  .tk-scr-acts { padding-bottom:14px; }
}
/* 🧱 без прыжков: ⚙ Настройки — полоса прокрутки не сужает содержимое, окно не перецентрируется по высоте,
   переключатель стоит у заголовка строки (меняется пояснение — сам не уезжает) */
#setDlg { scrollbar-gutter:stable; }
#setDlg[open] { margin:max(16px, calc((100dvh - 1600px) / 2)) auto auto; }
#setDlg .tk-swr:has(> .tk-tg) { align-items:flex-start; }
#setDlg .tk-swr > .tk-tg { margin-top:-2px; }
/* 📶 Статистика соединения: появилась полоса — строки не переносятся заново */
.tk-stats .tk-scroll { scrollbar-gutter:stable; }
/* 💻 тексты приложения: кнопка в тосте («Открыть настройки Windows») — тост светлый на тёмном, кнопка — контурная в цвет текста тоста */
.toast .tk-toast-b { display:block; margin:8px auto 0; padding:5px 14px; border-radius:16px; border:1px solid currentColor; background:transparent; color:inherit; font:inherit; font-weight:600; cursor:pointer; }
.toast .tk-toast-b:hover { background:color-mix(in srgb, currentColor 12%, transparent); }
.toast .tk-toast-b:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
/* 🦊 ⚙ Профиль → «Аватарка»: крупный кружок (эмодзи Apple на своём цвете, EMOJI.md) и две кнопки; размер постоянный — без прыжков */
.tk-avset { display:flex; align-items:center; gap:16px; min-height:72px; }
.tk-avset > .tk-av { width:72px; height:72px; font-size:30px; }
.tk-avset-b { display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.tk-avdice { display:inline-block; }
.tk-avdice.roll { animation:tk-avdice .4s ease; }
@keyframes tk-avdice { from { transform:rotate(0); } to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tk-avdice.roll { animation:none; } }