/* Orbi 1.1 · Tokens da identidade visual (logo: âmbar #FCAD08 com dobras #E08A00 sobre quase-preto).
   Use sempre var(--o-*) em código novo. Este arquivo é carregado depois dos estilos internos do Orbi.html,
   por isso também liga os tokens antigos (--bg-*, --text, --brand...) aos tokens novos. */
:root,html[data-theme=dark]{
  color-scheme:dark;
  --o-bg:#0b0b0c; --o-bg-2:#111113;
  --o-surface:#17171a; --o-surface-2:#1f1f23; --o-surface-3:#29292e; --o-hover:#2a251c; --o-active:#35312a;
  --o-line:#ffffff14; --o-line-strong:#ffffff26;
  --o-text:#ece9e3; --o-text-strong:#fffaf0; --o-muted:#a39e95; --o-faint:#8f8a81;
  --o-brand:#FCAD08; --o-brand-hover:#ffbe33; --o-brand-deep:#E08A00; --o-brand-ink:#1b1300;
  --o-brand-text:#FCAD08; --o-brand-soft:rgba(252,173,8,.12); --o-brand-glow:rgba(252,173,8,.35);
  --o-danger:#f0564f; --o-danger-ink:#1a0b0b; --o-success:#37c26b; --o-warning:#ffb020; --o-info:#5fb4ff;
  --o-board-light:#efdcb0; --o-board-dark:#b07428;
  --o-shadow:0 18px 50px rgba(0,0,0,.45); --o-radius:16px; --o-radius-sm:10px;
  /* painéis do layout principal e da barra lateral */
  --o-panel:linear-gradient(135deg,rgba(25,25,28,.86),rgba(17,17,19,.94));
  --o-sidebar:linear-gradient(155deg,rgba(22,22,24,.93),rgba(14,14,16,.97));
  --o-panel-shadow:0 12px 32px rgba(0,0,0,.18);
  --o-arc:rgba(224,138,0,.30); --o-arc-2:rgba(224,138,0,.18);
}
html[data-theme=light]{
  color-scheme:light;
  --o-bg:#f6f3ee; --o-bg-2:#efebe4;
  --o-surface:#ffffff; --o-surface-2:#faf7f2; --o-surface-3:#f0ebe3; --o-hover:#fff3d6; --o-active:#e8e0d3;
  --o-line:rgba(43,32,15,.10); --o-line-strong:rgba(43,32,15,.18);
  --o-text:#2b2721; --o-text-strong:#15120d; --o-muted:#6b645a; --o-faint:#716a5f;
  --o-brand:#FCAD08; --o-brand-hover:#e89c00; --o-brand-deep:#c97a00; --o-brand-ink:#1b1300;
  --o-brand-text:#9a5a00; --o-brand-soft:rgba(252,173,8,.16); --o-brand-glow:rgba(252,173,8,.30);
  --o-danger:#c9302c; --o-danger-ink:#ffffff; --o-success:#17733f; --o-warning:#b86e00; --o-info:#1f6fb8;
  --o-board-light:#f3e3bf; --o-board-dark:#c08433;
  --o-shadow:0 14px 40px rgba(60,40,10,.12);
  --o-panel:rgba(255,255,255,.88);
  --o-sidebar:rgba(251,249,245,.92);
  --o-panel-shadow:0 10px 30px rgba(60,40,10,.06);
  --o-arc:rgba(201,122,0,.28); --o-arc-2:rgba(201,122,0,.16);
}

/* ---------- Tokens antigos do Orbi.html → identidade Orbi ----------
   html[data-theme] tem a mesma especificidade das regras internas html[data-theme=dark|light]
   e vem depois delas, então vence nos dois temas. */
:root,html[data-theme]{
  --bg-0:var(--o-bg); --bg-1:var(--o-surface); --bg-2:var(--o-surface-2); --bg-3:var(--o-surface-3);
  --bg-hover:var(--o-hover); --bg-active:var(--o-active);
  --text:var(--o-text); --text-strong:var(--o-text-strong); --muted:var(--o-muted); --faint:var(--o-faint);
  --brand:var(--o-brand); --brand-hover:var(--o-brand-hover); --brand-highlight:var(--o-brand-text);
  --brand-text:var(--o-brand-text); --brand-soft:var(--o-brand-soft);
  --line:var(--o-line); --button-ink:var(--o-brand-ink); --link:var(--o-brand-text); --gold:var(--o-brand);
  --green:var(--o-success); --red:var(--o-danger); --red-hover:color-mix(in srgb,var(--o-danger) 85%,#000); --yellow:var(--o-warning);
  --orbi-panel:var(--o-panel); --orbi-sidebar:var(--o-sidebar); --orbi-shadow:var(--o-panel-shadow);
}
/* No tema claro, o cartão elevado (modal, menu) é o branco; o painel fica creme. */
html[data-theme=light]{ --bg-1:var(--o-surface-2); --bg-2:var(--o-surface); }
html,body{ background:var(--o-bg); color:var(--o-text); }
::selection{ background:rgba(252,173,8,.35); color:inherit; }

/* Botões e itens preenchidos com a cor da marca usam tinta escura (contraste ≥ 9:1).
   Fundos de perigo usam --o-danger-ink: quase preto no escuro, branco no claro (≥ 5:1 nos dois). */
.btn.primary,.btn.primary:hover,#login-go,.dynamic-room-btn,.ctx-item:hover,.watch-btn:hover,
.orbi-share-area>.btn,.orbi-share-buttons>.primary,.tile .live-badge{ color:var(--o-brand-ink); }
.btn.primary:hover{ background:var(--o-brand-hover); }
.ctx-item.danger:hover{ color:var(--o-danger-ink); }
.ctx-item.orbi-exit-server{ color:var(--o-danger); }

/* ---------- Topo: nome real do servidor, sem botão inativo ---------- */
#server-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.orbi-top-actions .top-explore,.top-explore{ display:none!important; }

/* ---------- Avisos (toasts): canto superior direito, abaixo da barra do topo ---------- */
.toasts{
  top:calc(76px + env(safe-area-inset-top)); bottom:auto; right:24px; left:auto; transform:none;
  align-items:flex-end; width:min(380px,calc(100vw - 32px)); z-index:65;
}
html[data-theme] .toast,.toast{
  max-width:100%; padding:11px 16px; border-radius:12px; font-size:14px; line-height:1.4;
  background:var(--o-surface-2); color:var(--o-text-strong); border:1px solid var(--o-line-strong);
  border-left:4px solid var(--o-brand); box-shadow:var(--o-shadow); animation:orbi-toast-in .18s ease-out;
  overflow-wrap:anywhere;
}
html[data-theme] .toast.err,.toast.err{ border-left-color:var(--o-danger); }
html[data-theme=light] .toast{ background:var(--o-surface); border-color:var(--o-line-strong); border-left-color:var(--o-brand); }
html[data-theme=light] .toast.err{ border-left-color:var(--o-danger); }
html.orbi-has-update .toasts{ top:calc(124px + env(safe-area-inset-top)); }
@keyframes orbi-toast-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@media (max-width:760px){
  .toasts{ top:calc(70px + env(safe-area-inset-top)); left:50%; right:auto; transform:translateX(-50%); align-items:stretch; width:calc(100vw - 24px); }
  .toast{ font-size:13px; }
  html.orbi-has-update .toasts{ top:calc(118px + env(safe-area-inset-top)); }
}
@media (prefers-reduced-motion:reduce){ .toast{ animation:none; } }

/* ---------- Faixa "Nova versão da Orbi disponível." ---------- */
.orbi-update-banner{
  position:fixed; z-index:66; top:calc(12px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px; max-width:calc(100vw - 32px);
  padding:6px 6px 6px 14px; border-radius:999px; font-size:13px; line-height:1.3;
  background:var(--o-surface-2); color:var(--o-text-strong); border:1px solid rgba(252,173,8,.45);
  box-shadow:0 10px 30px rgba(0,0,0,.28); animation:orbi-toast-in .2s ease-out;
}
html[data-theme=light] .orbi-update-banner{ background:var(--o-surface); box-shadow:0 10px 30px rgba(60,40,10,.14); }
.orbi-update-dot{ width:8px; height:8px; flex:none; border-radius:50%; background:var(--o-brand); box-shadow:0 0 0 4px var(--o-brand-soft); }
.orbi-update-text{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.orbi-update-go{
  flex:none; padding:6px 14px; border-radius:999px; font-weight:700; font-size:13px;
  background:var(--o-brand); color:var(--o-brand-ink);
}
.orbi-update-go:hover{ background:var(--o-brand-hover); }
.orbi-update-close{ flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; color:var(--o-muted); }
.orbi-update-close:hover{ background:var(--o-hover); color:var(--o-text-strong); }
@media (max-width:760px){
  .orbi-update-banner{ top:calc(66px + env(safe-area-inset-top)); width:calc(100vw - 24px); justify-content:space-between; border-radius:14px; }
  .orbi-update-text{ white-space:normal; }
}

/* ---------- Versão no menu do servidor e no diagnóstico ---------- */
.ctx-version,.orbi-version-line{ color:var(--o-muted); font-size:12px; letter-spacing:.02em; }
.ctx-version{ padding:8px 10px 4px; text-align:right; user-select:text; }
.orbi-version-line{ margin:16px 0 0; text-align:right; }

/* ---------- Removido ou banido do servidor ---------- */
.orbi-removed-lead{ font-size:16px; line-height:1.5; color:var(--o-text-strong); margin:4px 0 10px; }
.orbi-removed-lead b{ color:var(--o-text-strong); }
.orbi-removed-meta{ margin:0 0 8px; color:var(--o-text); font-size:14px; overflow-wrap:anywhere; }
.orbi-removed .muted-text{ font-size:13px; line-height:1.5; margin:12px 0 0; }
.orbi-removed-modal .modal-foot{ background:transparent; border-top:1px solid var(--o-line); }
#modal:focus{ outline:none; }

/* ---------- Tela de acesso: tema, logo e Orbizinho ---------- */
#login.orbi-welcome{ background:radial-gradient(ellipse at 15% 15%,var(--o-brand-soft),transparent 50%),radial-gradient(ellipse at 90% 95%,rgba(224,138,0,.07),transparent 45%),var(--o-bg); color:var(--o-text); }
.account-shell h1,.account-panel h2,.account-servers h2{ color:var(--o-text-strong); }
.account-sub,.account-note,.account-server-item small,.account-migrate{ color:var(--o-muted); }
.account-form small{ color:var(--o-muted); }
.account-form input::placeholder{ color:var(--o-faint); }
.account-tabs button{ color:var(--o-text); }
.account-tabs button:not(.active):hover{ background:var(--o-hover); }
.account-server-item:hover{ border-color:rgba(252,173,8,.45); background:var(--o-hover); }
.account-link:hover{ text-decoration:underline; }
.orbi-welcome-top .theme-toggle{ background:var(--o-surface); color:var(--o-text); }
.orbi-welcome-top .theme-toggle:hover{ border-color:rgba(252,173,8,.45); }
.orbi-welcome-brand{ color:var(--o-text-strong); }
/* O Orbizinho fica à esquerda do cartão, olhando para o formulário. */
.account-shell.has-mascot{ position:relative; }
.account-mascot{ position:absolute; left:max(12px,calc(50% - 225px - 236px)); top:calc(50% + 24px); transform:translateY(-50%); width:210px; height:210px; pointer-events:none; z-index:0; }
.account-shell.has-mascot .account-panel{ position:relative; z-index:1; }
@media (max-width:960px){ .account-mascot{ display:none; } }

/* ---------- Tema claro: superfícies que tinham cor escura fixa ---------- */
html[data-theme=light] .ctx-menu,html[data-theme=light] .modal{ background:var(--o-surface); }
html[data-theme=light] .modal-back{ background:rgba(43,32,15,.38); }
html[data-theme=light] .user-panel{ background:var(--o-surface-2); }

/* ---------- Início compacto: "Ao vivo agora" e "Agora no servidor" ---------- */
#app.orbi-layout .home-view:has(> .orbi-home){ padding:24px 26px 26px; }
.orbi-home{ display:flex; flex-direction:column; gap:22px; min-width:0; }
.orbi-home>div:empty{ display:none; }
html[data-theme] .orbi-home-hero{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px 24px; margin:0; }
.orbi-home-hero-copy{ flex:1 1 320px; min-width:min(100%,260px); }
.orbi-home-hero h2{ margin:0 0 8px; }
.orbi-home-hero p b{ color:var(--o-text-strong); font-weight:600; }
.orbi-home-cta{ display:flex; flex-wrap:wrap; gap:10px; flex:none; }
.orbi-home-cta .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:10px 22px; border-radius:11px; font-size:14px; font-weight:700; }
.orbi-home-cta .btn.primary{ background:var(--o-brand); color:var(--o-brand-ink); box-shadow:0 8px 22px rgba(252,173,8,.18); }
.orbi-home-cta .btn.primary:hover{ background:var(--o-brand-hover); }
.orbi-home-cta .orbi-home-ghost{ background:transparent; color:var(--o-text-strong); border:1px solid var(--o-line-strong); }
.orbi-home-cta .orbi-home-ghost:hover{ background:var(--o-hover); }

.orbi-home-head{ display:flex; align-items:center; gap:8px; min-width:0; margin:0 0 10px; }
.orbi-home-head h3{ display:flex; align-items:center; gap:8px; margin:0; font-size:14px; font-weight:700; letter-spacing:-.01em; color:var(--o-text-strong); }
.orbi-home-count{ font-size:11px; font-weight:600; color:var(--o-muted); background:var(--o-surface-2); border:1px solid var(--o-line); border-radius:999px; padding:2px 8px; line-height:1.4; }
.orbi-home-link{ font-size:12px; font-weight:700; color:var(--o-brand-text); padding:5px 8px; border-radius:7px; background:transparent; }
.orbi-home-link:hover{ background:var(--o-brand-soft); }
.orbi-live-dot{ width:8px; height:8px; flex:none; border-radius:50%; background:#ed3b42; box-shadow:0 0 0 4px rgba(237,59,66,.16); animation:orbi-live-pulse 1.8s ease-in-out infinite; }
@keyframes orbi-live-pulse{ 50%{ box-shadow:0 0 0 6px rgba(237,59,66,.05); } }
.orbi-home-nolive{ display:flex; align-items:center; gap:8px; margin:0; padding:2px 0; font-size:13px; color:var(--o-muted); }
.orbi-home-nolive .ico{ color:var(--o-faint); }

.orbi-live-strip{ display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; padding:2px 2px 8px; margin:0 -2px; scrollbar-width:thin; }
.orbi-live-mini{ flex:0 0 212px; width:212px; display:flex; flex-direction:column; min-width:0; border:1px solid var(--o-line); border-radius:12px; overflow:hidden; background:var(--o-surface); scroll-snap-align:start; transition:border-color .15s; }
html[data-theme=light] .orbi-live-mini{ background:var(--o-surface); box-shadow:0 4px 14px rgba(60,40,10,.06); }
.orbi-live-mini:hover,.orbi-live-mini:focus-within{ border-color:color-mix(in srgb,var(--o-brand) 55%,var(--o-line)); }
.orbi-mini-preview .orbi-card-live{ top:7px; right:7px; padding:4px 7px; border-radius:6px; font-size:9px; }
.orbi-mini-preview .orbi-card-preview-status{ left:6px; right:6px; bottom:6px; padding:4px 6px; border-radius:6px; font-size:10px; line-height:1.35; }
.orbi-mini-preview .orbi-card-placeholder .ico{ transform:translateY(-8px); }
.orbi-mini-preview .orbi-card-play{ width:40px; height:40px; }
.orbi-mini-body{ display:flex; align-items:center; gap:9px; min-width:0; padding:9px 10px 0; }
.orbi-card-avatar.orbi-mini-avatar{ width:30px; height:30px; }
.orbi-mini-id{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.orbi-mini-id b{ font-size:13px; color:var(--o-text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.orbi-mini-id small{ font-size:11px; color:var(--o-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.orbi-live-mini .orbi-card-watch.btn{ width:auto; margin:9px 10px 10px; min-height:32px; padding:6px 10px; gap:7px; border-radius:8px; font-size:12px; }

.orbi-now-list{ display:flex; flex-direction:column; border:1px solid var(--o-line); border-radius:12px; background:var(--o-surface); overflow:hidden; }
.orbi-now-row{ display:flex; align-items:center; gap:12px; min-width:0; padding:10px 12px; }
.orbi-now-row+.orbi-now-row{ border-top:1px solid var(--o-line); }
.orbi-now-row.is-mine{ background:var(--o-brand-soft); }
.orbi-now-icon{ width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:10px; background:var(--o-surface-2); border:1px solid var(--o-line); color:var(--o-muted); }
.orbi-now-icon .orbi-room-symbol{ width:20px; height:20px; }
.orbi-now-icon .ico{ width:17px; height:17px; }
.orbi-now-icon .orbi-member-status{ width:10px; height:10px; }
.orbi-now-id{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:0 1 210px; }
.orbi-now-id b{ font-size:13px; color:var(--o-text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.orbi-now-id small{ font-size:11px; color:var(--o-muted); }
.orbi-now-live{ color:#ed3b42; font-weight:700; }
html[data-theme=light] .orbi-now-live{ color:#c62b32; }
.orbi-now-people{ display:flex; flex-wrap:wrap; gap:6px; flex:1; min-width:0; }
.orbi-now-person,.orbi-watch-person{ display:inline-flex; align-items:center; gap:6px; max-width:160px; padding:2px 10px 2px 2px; border-radius:999px; border:1px solid var(--o-line); background:var(--o-surface-2); color:var(--o-text); font-size:12px; line-height:1.2; }
.orbi-now-person>span:last-child,.orbi-watch-person>span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.orbi-now-person:hover,.orbi-watch-person:hover{ border-color:var(--o-line-strong); background:var(--o-hover); }
#app.orbi-layout .orbi-now-person .speak-ring.speaking,#app.orbi-layout .orbi-watch-person .speak-ring.speaking{ box-shadow:0 0 0 2px var(--o-surface),0 0 0 4px var(--o-success); }
.orbi-now-more{ align-self:center; font-size:12px; color:var(--o-muted); }
.orbi-now-go.btn{ flex:none; min-height:34px; padding:7px 18px; border-radius:9px; font-size:12px; font-weight:700; }
.orbi-now-go.btn:not(.primary){ background:transparent; border:1px solid var(--o-line-strong); color:var(--o-text-strong); }
.orbi-now-go.btn:disabled{ opacity:.6; cursor:default; }
.orbi-now-empty{ display:flex; align-items:center; gap:18px; padding:12px 18px; border:1px dashed var(--o-line-strong); border-radius:12px; }
.orbi-now-empty b{ display:block; margin:0 0 4px; font-size:15px; color:var(--o-text-strong); }
.orbi-now-empty p{ margin:0 0 10px; font-size:13px; line-height:1.5; color:var(--o-muted); }
.orbi-now-empty .btn{ display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:7px 14px; border-radius:9px; font-size:12px; background:transparent; border:1px solid var(--o-line-strong); }
.orbi-now-empty-mark{ width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:var(--o-brand-soft); color:var(--o-brand-text); }

/* ---------- Orbizinho nos estados vazios (um por tela) ---------- */
.orbi-mascot-slot{ display:inline-grid; place-items:center; flex:none; }
.orbi-mascot-slot.has-mascot{ width:var(--slot-size); height:var(--slot-size); }
.chat-empty-premium .orbi-mascot-slot{ display:grid; margin:0 auto; }
.chat-empty-premium .orbi-mascot-slot.has-mascot{ margin:0 auto 8px; }
.orbi-directory-empty .orbi-mascot-slot{ margin-bottom:12px; }
.orbi-directory-empty .orbi-mascot-slot>.ico{ color:var(--brand-text); opacity:.65; }

/* ---------- Página da sala e modo assistir ---------- */
#app.orbi-layout #voice-view.orbi-watching{ flex:1 1 auto; min-height:0; padding:14px 16px 16px; gap:10px; }
#app.orbi-layout #voice-view.orbi-watching #orbi-voice-preview,#app.orbi-layout #voice-view.orbi-watching #voice-controls{ display:none; }
#app.orbi-layout #voice-view.orbi-watching .tiles{ flex:none; margin:0; }
#app.orbi-layout #voice-view.orbi-watching .stage{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding:0; }
#app.orbi-layout #voice-view.orbi-watching .stage-video{ flex:1 1 auto; height:auto; min-height:160px; }
#app.orbi-layout #voice-view.orbi-watching .stage-bar{ flex:none; row-gap:7px; }
#app.orbi-layout #voice-view.orbi-watching .stage-bar .vol input{ width:96px; }
#app.orbi-layout #voice-view.hide-participants .orbi-watch-people{ display:none; }
.orbi-watch-people{ display:flex; align-items:center; gap:6px; min-width:0; padding:1px; overflow-x:auto; scrollbar-width:none; }
.orbi-watch-people::-webkit-scrollbar{ display:none; }
.orbi-watch-room{ display:inline-flex; align-items:center; gap:7px; flex:none; max-width:240px; padding:0 12px 0 2px; margin-right:4px; border-right:1px solid var(--o-line); font-size:13px; color:var(--o-text-strong); }
.orbi-watch-room .orbi-room-symbol{ width:18px; height:18px; }
.orbi-watch-room b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.orbi-watch-room small{ font-size:11px; color:var(--o-muted); background:var(--o-surface-2); border:1px solid var(--o-line); border-radius:999px; padding:1px 7px; }
.orbi-watch-person{ flex:none; background:var(--o-surface); }
.orbi-watch-person.is-live{ border-color:color-mix(in srgb,#ed3b42 55%,var(--o-line)); }
#app.orbi-layout .stage-bar .orbi-theater-btn[aria-pressed=true]{ background:var(--o-brand); color:var(--o-brand-ink); }
#voice-view #orbi-voice-preview .orbi-home-live{ margin:0 0 18px; }

/* Modo teatro: sem navegação lateral nem conversa enquanto assiste (Esc sai). */
#app.orbi-layout.orbi-theater{ grid-template-columns:minmax(0,1fr); }
#app.orbi-layout.orbi-theater>.orbi-sidebar{ display:none!important; }
#app.orbi-layout.orbi-theater>.orbi-topbar,#app.orbi-layout.orbi-theater>.main{ grid-column:1; }
#app.orbi-layout.orbi-theater .main-body{ grid-template-columns:minmax(0,1fr)!important; }
#app.orbi-layout.orbi-theater #orbi-chat-panel{ display:none!important; }

/* ---------- Moderação ---------- */
.orbi-mod-confirm{ display:flex; align-items:center; gap:14px; padding:6px 0 2px; }
.orbi-mod-confirm .avatar{ flex:none; }
.orbi-mod-confirm p{ margin:0; font-size:14px; line-height:1.55; color:var(--o-text); }
.orbi-ban-reason-field{ display:block; margin-top:16px; }
.orbi-ban-reason-field .lbl{ display:block; margin-bottom:8px; font-size:12px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--o-muted); }
.orbi-ban-reason-field textarea{ display:block; width:100%; min-height:76px; resize:vertical; padding:10px 12px; border-radius:10px; border:1px solid var(--o-line-strong); background:var(--o-bg); color:var(--o-text); font:inherit; font-size:14px; line-height:1.5; }
html[data-theme=light] .orbi-ban-reason-field textarea{ background:var(--o-surface); }
.orbi-ban-reason-field textarea::placeholder{ color:var(--o-faint); }
.orbi-ban-reason-field textarea:focus{ outline:none; border-color:var(--o-brand); box-shadow:0 0 0 3px var(--o-brand-soft); }
.orbi-ban-reason-field small{ display:block; margin-top:5px; text-align:right; font-size:11px; color:var(--o-muted); }
.orbi-mod-modal .modal-foot,.orbi-bans-modal .modal-foot{ background:transparent; border-top:1px solid var(--o-line); }
.orbi-mod-modal .modal-foot .btn,.orbi-bans-modal .modal-foot .btn{ display:inline-flex; align-items:center; gap:8px; border-radius:9px; }
.orbi-mod-modal .modal-foot .btn.danger{ background:var(--o-danger); color:var(--o-danger-ink); }
.orbi-mod-modal .modal-foot .btn.danger:hover{ background:color-mix(in srgb,var(--o-danger) 86%,#000); }
.orbi-bans{ display:flex; flex-direction:column; gap:8px; max-height:min(60vh,460px); overflow-y:auto; }
.orbi-ban-row{ display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--o-line); border-radius:12px; background:var(--o-surface-2); }
.orbi-ban-row .avatar{ flex:none; }
.orbi-ban-info{ flex:1; min-width:0; }
.orbi-ban-info b{ display:block; font-size:14px; color:var(--o-text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.orbi-ban-info small{ display:block; margin-top:2px; font-size:12px; color:var(--o-muted); }
.orbi-ban-info p{ margin:6px 0 0; font-size:13px; line-height:1.45; color:var(--o-text); overflow-wrap:anywhere; }
.orbi-ban-info p.is-empty{ color:var(--o-muted); }
.orbi-unban.btn{ flex:none; min-height:34px; padding:7px 14px; border-radius:9px; font-size:12px; background:transparent; border:1px solid var(--o-line-strong); color:var(--o-text-strong); }
.orbi-unban.btn:hover{ background:var(--o-hover); }
.orbi-bans-empty{ text-align:center; padding:28px 12px 20px; color:var(--o-muted); }
.orbi-bans-empty .ico{ color:var(--o-faint); }
.orbi-bans-empty h3{ margin:10px 0 6px; font-size:16px; color:var(--o-text-strong); }
.orbi-bans-empty p{ margin:0; font-size:13px; }
.orbi-bans-loading,.orbi-bans-error{ margin:8px 0; font-size:13px; color:var(--o-muted); }
.orbi-bans-error{ color:var(--o-danger); }
.orbi-member-mod{ margin-top:18px; padding-top:14px; border-top:1px solid var(--o-line); }
.orbi-member-mod .lbl{ display:block; font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--o-muted); }
.orbi-member-mod-actions{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.orbi-member-mod-actions .btn{ display:inline-flex; align-items:center; gap:8px; border-radius:9px; font-size:13px; padding:8px 14px; background:transparent; border:1px solid color-mix(in srgb,var(--o-danger) 55%,var(--o-line)); color:var(--o-danger); }
.orbi-member-mod-actions .btn:hover{ background:color-mix(in srgb,var(--o-danger) 12%,transparent); }

/* ---------- Celular ---------- */
@media (max-width:760px){
  #app.orbi-layout .home-view:has(> .orbi-home){ padding:18px 14px 20px; }
  .orbi-home{ gap:18px; }
  .orbi-home-cta{ width:100%; }
  .orbi-home-cta .btn{ flex:1 1 auto; }
  .orbi-live-mini{ flex-basis:186px; width:186px; }
  .orbi-now-row{ flex-wrap:wrap; row-gap:8px; }
  .orbi-now-id{ flex:1 1 140px; }
  .orbi-now-people{ order:3; flex-basis:100%; }
  .orbi-now-empty{ padding:12px; gap:12px; }
  #app.orbi-layout #voice-view.orbi-watching{ padding:12px; }
  #app.orbi-layout .orbi-chat-panel .chat-empty-premium{ margin:6px auto; padding:14px 8px; }
  #app.orbi-layout .orbi-chat-panel .chat-empty-premium .empty-brand{ margin-bottom:12px; }
  #app.orbi-layout #voice-view.orbi-watching .stage-video{ flex:none; height:auto; min-height:0; aspect-ratio:16/9; }
  .orbi-watch-person{ padding-right:2px; }
  .orbi-watch-person>span:last-child{ display:none; }
  .orbi-watch-room{ max-width:150px; }
  #app.orbi-layout #voice-view.orbi-watching .stage-bar{ max-height:none; overflow:visible; }
  #app.orbi-layout #voice-view.orbi-watching .stage-bar .res-tag{ display:none; }
  .orbi-ban-row{ flex-wrap:wrap; }
  .orbi-ban-info{ flex:1 1 calc(100% - 52px); }
  .orbi-unban.btn{ margin-left:50px; }
}
@media (prefers-reduced-motion:reduce){ .orbi-live-dot{ animation:none; } }
/* fim: início compacto, modo assistir e moderação */

/* ---------- Orbi 1.1: ajustes de layout e acessibilidade ---------- */
/* Cor de cargo: no tema claro, escurece a cor salva para manter o nome legível (ex.: #b5bac1 do "Membro"). */
html[data-theme=light] [style*="--role-c"]{ --role-ink:color-mix(in oklab,var(--role-c) 55%,var(--o-text-strong)); }

/* Menu de menções: item escolhido pelo teclado. */
.mention-menu button.is-active{ background:var(--o-hover); box-shadow:inset 3px 0 0 var(--o-brand); }

/* Avisos (toasts): no Orbi Play ficam abaixo das abas e do botão de ajustes; com um modal aberto,
   ficam embaixo, acima do rodapé do modal, sem cobrir título, abas e botão de fechar. */
html:has(#home-view:not(.hidden) > .orbi-play) .toasts{ top:max(var(--op-toast-top,140px),calc(76px + env(safe-area-inset-top))); }
html:has(#modal-back #modal) .toasts{
  top:auto; bottom:calc(96px + env(safe-area-inset-bottom)); left:50%; right:auto; transform:translateX(-50%); align-items:center;
}

/* Nome do servidor ao lado do ☰ quando a barra lateral vira gaveta. */
.orbi-top-server{ display:none; }
@media (max-width:1100px){
  .orbi-topbar .orbi-top-server:not([hidden]){
    display:block; flex:0 1 auto; min-width:0; max-width:46vw; padding:0 4px 0 2px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; font-weight:650; color:var(--o-text-strong);
  }
}

/* Tela de servidores: "Meus servidores" vem primeiro quando a lista não está vazia. */
.account-servers.is-first{ margin:0 0 26px; }

/* Barra inferior: a seta (⌄) fica ao lado do botão redondo, sem encostar no texto "Microfone mudo". */
.orbi-control-group>.orbi-control-arrow{ top:15px; bottom:auto; right:auto; left:calc(50% + 25px); }

/* Palco: o chip de estatísticas encolhe com reticências antes de mandar os botões para outra linha. */
#app.orbi-layout .stage-bar>.res-tag{ flex:1 1 0; min-width:min(9.5em,100%); max-width:max-content; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#app.orbi-layout .stage-bar>.grow{ flex:0 0 0; min-width:0; }
#app.orbi-layout .stage-bar>.grow+*{ margin-left:auto; }

/* Barra lateral em telas baixas: itens mais compactos e esmaecimento quando há mais salas ou pessoas abaixo. */
#app.orbi-layout .orbi-room-list.more-below{
  -webkit-mask-image:linear-gradient(#000 calc(100% - 34px),transparent); mask-image:linear-gradient(#000 calc(100% - 34px),transparent);
}
@media (min-width:1101px) and (max-height:800px){
  #app.orbi-layout>.orbi-sidebar{ padding-top:16px; padding-bottom:14px; }
  #app.orbi-layout .orbi-sidebar-brand{ margin-bottom:14px; }
  #app.orbi-layout .orbi-community{ margin-bottom:14px; height:42px; }
  #app.orbi-layout .orbi-sidebar-nav{ gap:2px; margin-bottom:16px; }
  #app.orbi-layout .orbi-sidebar-nav button{ min-height:38px; padding-top:7px; padding-bottom:7px; }
}

@media (max-width:760px){
  .orbi-control-group>.orbi-control-arrow{ top:10px; left:calc(50% + 19px); }
  /* Faixa de nova versão: embaixo, acima da barra de voz, para não cobrir o título da página. */
  .orbi-update-banner{ top:auto; bottom:calc(12px + env(safe-area-inset-bottom)); }
  html:has(#lounge-dock:not(.hidden)) .orbi-update-banner{ bottom:calc(var(--orbi-footer) + 8px); }
  html.orbi-has-update .toasts{ top:calc(70px + env(safe-area-inset-top)); }
  html:has(#modal-back #modal) .toasts{ bottom:calc(92px + env(safe-area-inset-bottom)); width:calc(100vw - 24px); align-items:stretch; }
}