/* Orbi 1.3 · voz da 1.3: qualidade da conexão, push-to-talk na barra, reações na transmissão */
/* Só tokens var(--o-*): os dois temas (claro e escuro) usam as mesmas regras. */

/* ---------- Qualidade da conexão (bolinha verde, amarela ou vermelha; cinza quando ainda não há medição) ---------- */
.ov-conn{ display:inline-flex; align-items:center; gap:6px; flex:none; color:var(--o-muted); font-size:11px; line-height:1.4; white-space:nowrap; }
.ov-dot{ display:block; flex:none; width:8px; height:8px; border-radius:50%; background:var(--o-faint); box-shadow:inset 0 0 0 1px color-mix(in srgb,#000 24%,transparent); }
.ov-conn[data-level=good] .ov-dot{ background:var(--o-success); }
.ov-conn[data-level=mid] .ov-dot{ background:var(--o-warning); }
.ov-conn[data-level=bad] .ov-dot{ background:var(--o-danger); }
.ov-ms{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.ov-ms:empty{ display:none; }
.ov-conn.ov-seat{ display:flex; flex:0 1 auto; min-width:0; max-width:100%; margin-top:4px; }
.ov-conn.ov-side{ margin:0 2px; }
/* No assento o texto quebra em duas linhas em vez de perder os ms. */
.ov-conn.ov-seat{ align-items:flex-start; }
.ov-conn.ov-seat .ov-dot{ margin-top:.3em; }
.ov-conn.ov-seat .ov-ms{ white-space:normal; overflow:visible; text-overflow:clip; }
.ov-conn.ov-pill{ margin:0 -1px 0 1px; }

/* ---------- Falar (push-to-talk) na barra de baixo ---------- */
.ov-ptt{ touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.ov-ptt .orbi-control-orb{ transition:background .12s,box-shadow .12s,border-color .12s; }
.ov-ptt-word{ font-size:11px; font-weight:700; letter-spacing:.01em; color:var(--o-text-strong); pointer-events:none; }
.ov-ptt .orbi-control-caption{ max-width:76px; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
.ov-ptt.held .orbi-control-orb{ border-color:var(--o-brand); background:var(--o-brand-soft); }
.ov-ptt.on .orbi-control-orb{ background:var(--o-brand); border-color:var(--o-brand); box-shadow:0 0 0 4px var(--o-brand-glow); }
.ov-ptt.on .ov-ptt-word{ color:var(--o-brand-ink); }
.ov-ptt.on .orbi-control-caption{ color:var(--o-brand-text); font-weight:600; }
.ov-ptt:focus-visible{ outline:none; }
.ov-ptt:focus-visible .orbi-control-orb{ outline:2px solid var(--o-brand); outline-offset:3px; }
.ov-ptt:disabled .orbi-control-caption{ opacity:.7; }
@media (max-width:760px){
  .ov-ptt-word{ font-size:10px; }
  .ov-ptt.on .orbi-control-orb{ box-shadow:0 0 0 3px var(--o-brand-glow); }
  /* Celular: com o "Falar" na barra sobra pouco espaço. O controle fica do tamanho da bolinha, o rótulo da tecla corta com reticências e o vão entre os botões diminui. */
  #orbi-dock-actions.ov-has-ptt{ gap:6px; }
  #orbi-dock-actions.ov-has-ptt .orbi-control{ min-width:0; }
  #orbi-dock-actions.ov-has-ptt .ov-ptt-group .orbi-control{ min-width:40px; }
  #orbi-dock-actions.ov-has-ptt .ov-ptt .orbi-control-caption{ max-width:44px; }
  #orbi-dock-actions.ov-has-ptt .orbi-control-caption{ max-width:84px; overflow:hidden; text-overflow:ellipsis; }
  #orbi-dock-actions.ov-has-ptt .orbi-control-arrow{ right:-8px; }
}
@media (prefers-reduced-motion:reduce){ .ov-ptt .orbi-control-orb{ transition:none; } }

/* ---------- Reações rápidas ---------- */
.ov-react{ display:inline-flex; align-items:center; gap:2px; flex:none; padding:2px; border:1px solid var(--o-line); border-radius:999px; background:var(--o-surface-2); }
.ov-react[hidden],.ov-react-fs[hidden]{ display:none!important; }
.ov-react-btn{ display:grid; place-items:center; width:28px; height:28px; padding:0; border-radius:50%; font-size:16px; line-height:1; color:inherit; transition:transform .12s,background .12s; }
.ov-react-btn:hover{ background:var(--o-hover); transform:scale(1.12); }
.ov-react-btn:active{ transform:scale(.92); }
.ov-react-btn:focus-visible{ outline:2px solid var(--o-brand); outline-offset:1px; }
/* Camada sobre o vídeo: os emojis sobem e somem em cerca de 2 segundos. Não pega clique. */
.ov-layer{ position:absolute; inset:0; z-index:4; overflow:hidden; border-radius:inherit; pointer-events:none; }
.ov-float{ position:absolute; left:var(--x,50%); bottom:10px; font-size:34px; line-height:1; opacity:0; will-change:transform,opacity; filter:drop-shadow(0 2px 6px rgba(0,0,0,.45)); animation:ov-rise 2.1s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes ov-rise{
  0%{ opacity:0; transform:translate(0,0) scale(.5); }
  12%{ opacity:1; transform:translate(0,-6%) scale(1.15); }
  70%{ opacity:1; }
  100%{ opacity:0; transform:translate(var(--sway,0),calc(var(--rise,200px) * -1)) scale(1); }
}
/* Com "reduzir movimento": o emoji aparece parado no lugar e some depois de um instante (o script o retira).
   O estilo global de reduzir movimento do app tira toda animação, então aqui não há animação nenhuma: o estado final é o visível. */
.ov-float.calm{ opacity:1; bottom:18%; animation:none; will-change:auto; }
@media (prefers-reduced-motion:reduce){
  .ov-float{ opacity:1; bottom:18%; animation:none; will-change:auto; }
  .ov-react-btn{ transition:none; }
  .ov-react-btn:hover,.ov-react-btn:active{ transform:none; }
}
/* Em tela cheia só o vídeo aparece (a barra fica de fora), então as reações ganham uma fileira dentro dele. */
.ov-react-fs{ display:none; position:absolute; left:50%; bottom:16px; transform:translateX(-50%); gap:4px; padding:5px 7px; border-radius:999px; background:rgba(15,15,17,.72); border:1px solid rgba(255,255,255,.18); color:#fff; pointer-events:auto; opacity:.45; transition:opacity .2s; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.ov-react-fs:hover,.ov-react-fs:focus-within{ opacity:1; }
.ov-react-fs .ov-react-btn{ width:40px; height:40px; font-size:22px; }
.ov-react-fs .ov-react-btn:hover{ background:rgba(255,255,255,.16); }
#stage-video:fullscreen .ov-react-fs{ display:flex; }
#stage-video:-webkit-full-screen .ov-react-fs{ display:flex; }
@media (prefers-reduced-motion:reduce){ .ov-react-fs{ transition:none; } }

/* ---------- Barra do palco numa linha só ----------
   Base (palco médio, como no 1280x720): reações, volume e ícones. As ações menos usadas ficam no menu "Mais opções".
   Palco largo (1260 px ou mais): os botões com texto voltam para a barra. Celular: a barra pode ter uma segunda linha. */
#stage{ container:ovstage / inline-size; }
#app.orbi-layout #stage .stage-bar{ flex-wrap:nowrap; align-items:center; gap:8px; padding:8px 10px; row-gap:6px; }
#app.orbi-layout #stage .stage-bar>*{ flex:none; }
#app.orbi-layout #stage .stage-bar>b{ flex:1 1 auto; min-width:48px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#app.orbi-layout #stage .stage-bar>.res-tag{ display:none; }
#app.orbi-layout #stage .stage-bar>.grow{ display:none; }
#app.orbi-layout #stage .stage-bar>.ov-react{ margin-left:0; }
#app.orbi-layout #stage .stage-bar .vol{ gap:5px; }
#app.orbi-layout #voice-view.orbi-watching #stage .stage-bar .vol input,#app.orbi-layout #stage .stage-bar .vol input{ width:72px; }
#app.orbi-layout #stage .stage-bar .ov-sec{ display:none; }
#app.orbi-layout #stage .stage-bar .ov-more{ display:inline-block; }
/* Modo teatro: só o ícone na barra; o texto fica para leitores de tela. */
#app.orbi-layout #stage .stage-bar .ov-theater{ position:relative; display:grid; place-items:center; width:32px; height:32px; padding:0; border-radius:6px; background:transparent; color:var(--o-muted); }
#app.orbi-layout #stage .stage-bar .ov-theater:hover{ background:var(--o-hover); color:var(--o-text-strong); }
#app.orbi-layout #stage .stage-bar .ov-theater[aria-pressed=true]{ background:var(--o-brand); color:var(--o-brand-ink); }
#app.orbi-layout #stage .stage-bar .ov-theater .ov-lbl{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.ov-more{ position:relative; display:none; }
.ov-more-btn{ color:var(--o-muted); }
.ov-more-btn[aria-expanded=true]{ background:var(--o-hover); color:var(--o-text-strong); }
.ov-menu{ position:absolute; right:0; bottom:calc(100% + 8px); z-index:30; min-width:210px; max-width:min(300px,calc(100vw - 24px)); padding:6px; border:1px solid var(--o-line-strong); border-radius:12px; background:var(--o-surface); box-shadow:var(--o-shadow); }
.ov-menu[hidden]{ display:none; }
.ov-menu-info{ margin:0 0 4px; padding:6px 10px 8px; border-bottom:1px solid var(--o-line); font-size:11px; line-height:1.4; color:var(--o-muted); overflow-wrap:anywhere; }
.ov-menu-info:empty{ display:none; }
.ov-menu-item{ display:block; width:100%; padding:9px 10px; border-radius:8px; text-align:left; font-size:13px; font-weight:550; color:var(--o-text-strong); }
.ov-menu-item[hidden]{ display:none; }
.ov-menu-item:hover{ background:var(--o-hover); }
.ov-menu-item:focus-visible{ outline:none; background:var(--o-hover); box-shadow:inset 0 0 0 2px var(--o-brand); }

@container ovstage (min-width:820px){
  #app.orbi-layout #stage .stage-bar>.res-tag{ display:block; flex:0 1 190px; min-width:0; }
}
@container ovstage (min-width:1260px){
  #app.orbi-layout #stage .stage-bar{ gap:10px; }
  #app.orbi-layout #stage .stage-bar>.res-tag{ flex-basis:220px; }
  #app.orbi-layout #stage .stage-bar .ov-sec{ display:inline-block; }
  #app.orbi-layout #stage .stage-bar .ov-more{ display:none; }
  #app.orbi-layout #stage .stage-bar .ov-theater{ display:inline-flex; align-items:center; gap:6px; width:auto; height:auto; padding:6px 8px; background:var(--o-surface-3); color:var(--o-text-strong); }
  #app.orbi-layout #stage .stage-bar .ov-theater:hover{ background:var(--o-active); }
  #app.orbi-layout #stage .stage-bar .ov-theater .ov-lbl{ position:static; width:auto; height:auto; overflow:visible; clip:auto; clip-path:none; }
  #app.orbi-layout #voice-view.orbi-watching #stage .stage-bar .vol input,#app.orbi-layout #stage .stage-bar .vol input{ width:96px; }
}
/* Palco estreito (celular): reações e volume descem para uma segunda linha. */
@container ovstage (max-width:560px){
  #app.orbi-layout #stage .stage-bar{ flex-wrap:wrap; }
  #app.orbi-layout #stage .stage-bar>b{ flex:1 1 56px; }
  #app.orbi-layout #stage .stage-bar>.ov-react{ order:8; flex:1 1 auto; justify-content:space-between; }
  #app.orbi-layout #stage .stage-bar>.vol{ order:9; }
  .ov-react-btn{ width:34px; height:34px; font-size:19px; }
}
@media (max-width:760px){
  #app.orbi-layout #stage .stage-bar{ flex-wrap:wrap; }
  #app.orbi-layout #stage .stage-bar>b{ flex:1 1 56px; }
  #app.orbi-layout #stage .stage-bar>.ov-react{ order:8; flex:1 1 auto; justify-content:space-between; }
  #app.orbi-layout #stage .stage-bar>.vol{ order:9; }
  .ov-react-btn{ width:34px; height:34px; font-size:19px; }
  .ov-react-fs .ov-react-btn{ width:38px; height:38px; font-size:21px; }
}

/* Texto só para leitores de tela (aviso da reação enviada). */
.ov-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* Orbi 1.4: estado do áudio sempre visível no painel do usuário. */
.orbi-audio-chip{display:block;margin-top:2px;font-size:11px;color:var(--muted)}
.orbi-audio-chip.is-strong{color:#FCAD08}
.orbi-audio-chip.is-dead,.orbi-audio-chip.is-fallback{color:#e5484d;font-weight:600}

/* Orbi 1.4: arrastar membros entre salas. */
[data-orbi-drag]{ cursor:grab; }
[data-orbi-drag].is-dragging{ opacity:.45; cursor:grabbing; }
[data-orbi-drag].is-moving{ opacity:.55; pointer-events:none; }
[data-orbi-drag].is-moving::after{ content:'movendo…'; margin-left:6px; font-size:10px; color:var(--muted); }
.orbi-dragging .orbi-drop-ok{ outline:2px dashed #FCAD08; outline-offset:2px; border-radius:12px; }
.orbi-dragging .orbi-drop-ok.orbi-drop-over{ outline-style:solid; background:#fcad0816; }
.orbi-dragging .orbi-drop-no{ opacity:.45; }