/* LIVEKO — спільний стиль у дусі Telegram (темна тема). */
:root{
  --bg:#0e1621;          /* найглибший фон */
  --bg-1:#17212b;        /* основний фон/панелі */
  --bg-2:#232e3c;        /* картки, інпути, вторинні кнопки */
  --bg-3:#2b3847;        /* hover */
  --accent:#3390ec;      /* фірмовий синій Telegram */
  --accent-press:#4ca0f0;
  --danger:#ec3942;
  --fg:#ffffff;
  --muted:#708499;       /* вторинний текст */
  --line:#101921;
  --radius:14px;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; }
body{
  background:var(--bg-1); color:var(--fg);
  font:15px/1.45 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---- Логін / картка ---- */
.app-center{ min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:20px; }
.card{ width:100%; max-width:400px; background:var(--bg-2); border-radius:18px;
  padding:26px 22px 24px; box-shadow:0 12px 40px #0006; }
.langbar{ display:flex; justify-content:flex-end; margin-bottom:4px; }
.langsel{ background:var(--bg-1); color:var(--fg); border:1px solid var(--bg-3); border-radius:8px;
  padding:5px 8px; font:inherit; font-size:13px; cursor:pointer; outline:none; }
.langsel:focus{ border-color:var(--accent); }
.brand{ text-align:center; font-size:26px; font-weight:700; letter-spacing:.06em; }
.tag{ text-align:center; color:var(--muted); margin:4px 0 22px; font-size:14px; }
label{ display:block; font-size:13px; color:var(--accent); margin:18px 0 6px; font-weight:500; }

/* підпис із кнопкою-інфо */
.lbl{ display:flex; align-items:center; gap:7px; margin:18px 0 6px; }
.lbl label{ margin:0; }
.info{ width:18px; height:18px; flex:0 0 auto; border-radius:50%; padding:0;
  background:var(--bg-3); color:var(--muted); font:700 12px/18px Georgia,serif; text-align:center; cursor:pointer; }
.info::before{ content:"i"; }
.info:hover, .info:focus-visible{ background:var(--accent); color:#fff; }

/* спливаюча підказка (позиціонується в JS) */
.tip{ position:fixed; z-index:50; max-width:min(280px,90vw); background:var(--bg-1); color:var(--fg);
  border:1px solid var(--bg-3); border-radius:12px; padding:10px 13px; font-size:13px; line-height:1.45;
  box-shadow:0 10px 34px #0009; opacity:0; transform:translateY(-4px); pointer-events:none;
  transition:opacity .12s, transform .12s; }
.tip.show{ opacity:1; transform:translateY(0); }
input[type=text]{ width:100%; padding:13px 14px; font-size:16px; color:var(--fg);
  background:var(--bg-1); border:1px solid transparent; border-radius:10px; outline:none; }
input[type=text]:focus{ border-color:var(--accent); }
#pin{ letter-spacing:.16em; }
.inputrow{ display:flex; gap:8px; } .inputrow input{ flex:1; }

button{ font:inherit; cursor:pointer; border:0; border-radius:10px; color:var(--fg); }
.ghost{ padding:0 16px; background:var(--bg-3); white-space:nowrap; }
.ghost:active{ background:var(--accent); }
.roles{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px; }
.role{ padding:16px 12px; text-align:center; background:var(--bg-1); border:2px solid transparent;
  border-radius:12px; color:var(--fg); transition:border-color .15s,background .15s; }
.role small{ display:block; color:var(--muted); font-size:12px; margin-top:4px; }
.role.active{ border-color:var(--accent); background:var(--bg-3); }
.connect{ width:100%; margin-top:22px; padding:14px; font-size:16px; font-weight:600;
  background:var(--accent); }
.connect:active{ background:var(--accent-press); }
.connect:disabled{ opacity:.45; cursor:not-allowed; }
.sharerow{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:12px; }
.share{ display:block; width:fit-content; padding:11px 18px; font-size:15px; background:var(--bg-3); color:var(--fg); }
.share:active{ background:var(--accent); }
.share.ok{ background:#2e7d4f; }
.err{ color:#ff6b6b; font-size:13px; min-height:18px; margin-top:12px; text-align:center; }

/* ---- Сторінки трансляції (камера/глядач) ---- */
.stage{ position:fixed; inset:0; background:#000; }
#video{ position:fixed; top:50%; left:50%; width:100%; height:100%; background:#000;
  transform:translate(-50%,-50%) rotate(0deg); transform-origin:center center; transition:transform .2s; }
.stage--cover #video{ object-fit:cover; }
.stage--contain #video{ object-fit:contain; }
/* локальний поворот відео (на цьому пристрої). Для 90/270 міняємо габарити,
   щоб після обертання заповнити в'юпорт. */
#video.r90  { transform:translate(-50%,-50%) rotate(90deg);  width:100vh; height:100vw; }
#video.r180 { transform:translate(-50%,-50%) rotate(180deg); }
#video.r270 { transform:translate(-50%,-50%) rotate(270deg); width:100vh; height:100vw; }

.topbar{ position:fixed; top:0; left:0; right:0; z-index:3; display:flex; align-items:center;
  flex-wrap:wrap; gap:6px; row-gap:6px; padding:10px clamp(8px,3vw,12px);
  padding-top:max(10px,env(safe-area-inset-top)); background:linear-gradient(#000a,#0000); }
.pill{ background:#0008; border-radius:16px; padding:6px clamp(8px,2.5vw,12px);
  font-size:clamp(11px,3.2vw,13px); line-height:1.2; backdrop-filter:blur(6px); white-space:nowrap; }
.pill b{ font-weight:700; }
.pill:active{ background:var(--bg-3); }
.copyico{ opacity:.7; font-size:12px; margin-left:2px; }
.pincol{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.build{ font-size:10px; color:var(--muted); letter-spacing:.04em; padding-left:6px; }
.grow{ flex:1; min-width:0; }

/* вузькі екрани (телефон, книжний) — менше тексту в топбарі, щоб усі іконки влізли */
@media (max-width:440px){
  .build{ display:none; }
  .langsel{ font-size:11px; padding:4px 5px; }
  .topbar .pill#status{ max-width:42vw; overflow:hidden; text-overflow:ellipsis; }
}

/* нижня панель з керуванням */
.controls[hidden]{ display:none; }   /* інакше display:flex перебиває атрибут hidden */
.controls{ position:fixed; left:0; right:0; bottom:0; z-index:4; display:flex; align-items:center;
  justify-content:center; flex-wrap:wrap; gap:clamp(7px,2.6vw,22px);
  padding:14px clamp(6px,3vw,16px) max(14px,env(safe-area-inset-bottom));
  background:linear-gradient(#0000,#000b); }
.iconbtn{ width:clamp(38px,10.5vw,52px); height:clamp(38px,10.5vw,52px); border-radius:50%;
  background:#0009; color:var(--fg); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-size:clamp(17px,5vw,22px); backdrop-filter:blur(6px); }
.iconbtn:active{ background:var(--bg-3); }
.iconbtn.danger:active{ background:var(--danger); }
.iconbtn[disabled]{ opacity:.4; }
.iconbtn[hidden]{ display:none; }              /* інакше display:flex перебиває hidden */
.iconbtn.on{ background:var(--accent); }       /* ліхтарик увімкнено */
.iconbtn.txt{ font-size:clamp(11px,3.4vw,14px); font-weight:700; letter-spacing:.02em; }  /* кнопка з текстом (якість) */

/* кнопка-мікрофон (push-to-talk) — велика, по центру, у стилі голосової Telegram */
.mic{ width:clamp(60px,17vw,84px); height:clamp(60px,17vw,84px); border-radius:50%; background:var(--accent); color:#fff;
  flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:clamp(26px,8vw,34px);
  box-shadow:0 8px 28px #0007; transition:transform .12s, background .12s;
  touch-action:none; user-select:none; -webkit-user-select:none; }
.mic:disabled{ opacity:.45; }
.mic.talking{ background:var(--danger); transform:scale(1.12);
  box-shadow:0 0 0 10px #ec394233, 0 8px 28px #0007; }
.mic-hint{ position:fixed; left:0; right:0; bottom:118px; z-index:4; text-align:center;
  color:var(--muted); font-size:12px; pointer-events:none; }

/* оверлей-підказка */
.overlay{ position:fixed; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:24px; background:#000a; }
.hint{ color:var(--fg); max-width:320px; font-size:15px; }

/* вертикальний ростер ліворуч: глядачі (круглі) стосом, камера (квадрат) знизу */
.roster{ position:fixed; left:10px; bottom:104px; z-index:3; display:flex; flex-direction:column;
  gap:10px; align-items:center; max-height:60vh; overflow-y:auto; }
.rtile{ display:flex; flex-direction:column; align-items:center; gap:3px; flex:0 0 auto; }
.rava{ position:relative; width:46px; height:46px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:700;
  box-shadow:0 4px 12px #0006; user-select:none; -webkit-user-select:none; touch-action:none;
  transition:transform .12s, background .12s, box-shadow .12s; }
.rava.cam{ border-radius:13px; }                 /* камера — квадратна */
.rtile.inactive .rava{ background:var(--bg-3); color:var(--muted); filter:grayscale(1); opacity:.55;
  box-shadow:none; }
.rava.pressing{ background:var(--danger); transform:scale(1.15);
  box-shadow:0 0 0 8px #ec394233, 0 4px 12px #0006; }
.rname{ font-size:11px; color:var(--fg); max-width:56px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }

/* ---- чат ---- */
.chatbtn{ position:relative; cursor:pointer; border:0; }
.badge{ position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:var(--danger); color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center; }
.hidden{ display:none !important; }
/* фон чату напівпрозорий; прозорість регулюється повзунком (--chat-alpha, на пристрій) */
.chat{ position:fixed; z-index:6; right:0; top:0; bottom:0; width:min(380px,100%);
  background:rgba(23,33,43,var(--chat-alpha,.85)); backdrop-filter:blur(3px);
  display:flex; flex-direction:column; box-shadow:-8px 0 30px #0007; }
.chat-head{ display:flex; align-items:center; gap:10px; padding:14px 16px;
  background:transparent; font-weight:600; padding-top:max(14px,env(safe-area-inset-top)); }
.chat-head > span{ margin-right:auto; }
.chat-alpha{ width:96px; accent-color:var(--accent); cursor:pointer; }
.chat-head button{ background:transparent; color:var(--muted); font-size:18px; cursor:pointer; border:0; }
.chat-list{ flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; }
.msg{ max-width:85%; align-self:flex-start; background:var(--bg-2); border-radius:12px;
  padding:7px 11px; }
.msg.mine{ align-self:flex-end; background:#2b5278; }     /* свої — синюваті (як Telegram) */
.msg .who{ font-size:12px; color:var(--accent); font-weight:600; margin-bottom:2px; }
.msg.mine .who{ color:#9bd0ff; }
.msg .txt{ font-size:15px; white-space:pre-wrap; word-break:break-word; }
.msg .at{ font-size:10px; color:var(--muted); margin-top:3px; text-align:right; }
.chat-input{ display:flex; gap:8px; padding:10px; background:transparent;
  padding-bottom:max(10px,env(safe-area-inset-bottom)); }
.chat-input input{ flex:1; padding:11px 14px; border-radius:20px; border:0; background:var(--bg-1);
  color:var(--fg); font-size:15px; outline:none; }
.chat-input button{ width:44px; border-radius:50%; background:var(--accent); color:#fff;
  font-size:18px; cursor:pointer; border:0; }

/* порожній чат / транзієнтна помилка чату */
.chat-empty{ margin:auto; text-align:center; color:var(--muted); font-size:13px; padding:24px; }
.chat-flash{ margin:6px 12px 0; padding:8px 11px; border-radius:10px; background:#ec394222;
  color:#ff9a9f; font-size:13px; text-align:center; }

/* ---- доступність / рух ---- */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:8px; }
.role:focus-visible{ outline-offset:-2px; }

/* підказка, що аватар глядача — «натисни-говори» */
.rava.ptt{ cursor:pointer; }
.rava.ptt::after{ content:"🎤"; position:absolute; right:-2px; bottom:-2px; font-size:11px;
  background:var(--bg-1); border-radius:50%; width:18px; height:18px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px #0007; }
.rtile{ position:relative; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
  .mic.talking, .rava.pressing{ transform:none; }
}