/* ==========================================================================
   AIR CINEMA PC DESKTOP APP DESIGN SYSTEM — LEADNODE MEET
   Fiel ao aplicativo para PC do Air Cinema:
   - SF Pro (fonte do sistema no iPhone e no Mac) e Inter nos demais, barras finas, destaque branco (--accent)
   - Janela frameless com titlebar personalizada (40px)
   - Menu lateral (sidebar: 216px) com destaque vertical esquerdo
   - Cartões de vidro (--glass) com backdrop-filter
   - Grade de 12 colunas, kickers em caixa alta, pills com indicadores de status (i)
   - Statusbar inferior de 28px
   ========================================================================== */

/* Inter variável (100–900), só caracteres latinos; baixada apenas em aparelhos sem SF Pro */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-wght.woff2") format("woff2-variations"),
       url("/assets/fonts/inter-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Item escolhido nos menus de escolha (no G.Form é o laranja da marca; aqui, o destaque branco) */
  --menu-ativo: var(--accent);
  --menu-ativo-texto: var(--accent-ink);
  --glass: rgba(18, 19, 22, .65);
  --glass-2: rgba(255, 255, 255, .055);
  --glass-3: rgba(255, 255, 255, .09);
  --line: rgba(255, 255, 255, .10);
  --line-soft: rgba(255, 255, 255, .06);
  --text: #E8E9EC;
  --dim: #92959E;
  --dimmer: #6C6F78;
  --accent: #FFFFFF;
  --accent-ink: #12120F;
  --live: #35C26B;
  --warn: #F2B73A;
  --danger: #E5484D;
  --danger-strong: #C42B1C;
  --blur: blur(26px) saturate(150%);
  --radius: 14px;
  /* SF Pro: no iPhone e no Mac vem do sistema (a licença da Apple não permite hospedar o arquivo no site).
     Onde não há SF Pro, a Inter (licença livre, desenho parecido) é servida pelo próprio app. */
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
  --input-fill: #0b0c0e;
  --titlebar-h: 40px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  background: #060708;
  color: var(--text);
  font-family: var(--ui);
  font-size: 13px;
  line-height: 1.45;
  overflow: hidden;
  cursor: default;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Todo texto pode ser selecionado e copiado; só os controles ficam fora da seleção */
button,
.titlebar,
.sidebar,
.side-tabs-header,
.stage-toolbar,
.switch-label,
.sw,
.menu-gatilho,
.menu-lista,
.video-tile-pc,
.toast-container {
  -webkit-user-select: none;
  user-select: none;
}

.content,
.overlay {
  cursor: auto;
}

[hidden] {
  display: none !important;
}

/* Fundo: Shader / Canvas WebGL sutil idêntico ao Air Cinema PC */
.app-intro {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.65;
}
.app-intro-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.app {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   BARRA DE TÍTULO (FRAMELESS PC DESKTOP TITLEBAR)
   ========================================================================== */
.titlebar {
  flex: none;
  height: var(--titlebar-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(8, 9, 11, .45);
  backdrop-filter: var(--blur);
}

.drag {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 14px;
  min-width: 0;
}

body[data-page="workspace"] .drag {
  flex: none;
  width: var(--sidebar-w, 216px);
  box-sizing: border-box;
}

/* Na página do workspace a sala tem a própria tela cheia; o botão da barra não aparece */
body[data-page="workspace"] #btnFullscreen {
  display: none;
}

.titlebar-workspace-slot {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  min-width: 0;
}

/* Logo e identidade LeadNode (idêntico ao Emissor) */
.org {
  display: flex;
  align-items: center;
  gap: 10px;
}

.org b {
  font-size: 13px;
  font-weight: 600;
  flex: none;
  min-width: 0;
  color: #FFF;
  letter-spacing: -0.01em;
}

.marca-icone {
  width: 18px;
  height: 18px;
  flex: none;
  color: #FFF;
}

.amb {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim, #8C8C8C);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  padding: 2px 7px;
  line-height: normal;
}

/* Logo legado do LeadNode Workspace (quadrado preto com o símbolo em branco) */
.brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  overflow: hidden;
  flex: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
}

.app-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.app-name-light {
  font-weight: 200;
  color: #cfd1d6;
  letter-spacing: 0;
}

.win-btn {
  width: 46px;
  height: var(--titlebar-h);
  flex: none;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: var(--dim);
  cursor: pointer;
  transition: all 0.15s ease;
}

.win-btn:hover {
  background: var(--glass-3);
  color: var(--text);
}

.win-btn.close:hover {
  background: var(--danger-strong);
  color: #fff;
}

/* ÍCONES LUCIDE: mesmo desenho e traço em todo o app; o tamanho vem de cada lugar */
svg.lucide {
  flex: none;
  width: 16px;
  height: 16px;
}

.girando {
  animation: girar 1s linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

.win-btn svg {
  width: 12px;
  height: 12px;
}

/* ==========================================================================
   SHELL (MENU LATERAL + CONTEÚDO PRINCIPAL)
   ========================================================================== */
.shell {
  flex: 1;
  min-height: 0;
  display: flex;
}

/* MENU LATERAL (SIDEBAR) */
.sidebar {
  width: 216px;
  flex: none;
  display: flex;
  flex-direction: column;
  padding: 14px 10px 12px;
  border-right: 1px solid var(--line-soft);
  background: rgba(8, 9, 11, .35);
  backdrop-filter: var(--blur);
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 9px;
  border: 0;
  background: none;
  color: var(--dim);
  font-weight: 600;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.nav-item svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.nav-item:hover {
  background: var(--glass-2);
  color: var(--text);
}

.nav-item[aria-current="page"] {
  background: var(--glass-3);
  color: var(--text);
}

/* Destaque branco na lateral do item selecionado (marca registrada do PC app) */
.nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}

.nav-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--accent-ink);
}

.sidebar-foot {
  margin-top: auto;
}

/* Conta: pílula só com contorno, foto de perfil e nome; à direita, o ícone discreto de sair */
.account-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  transition: border-color .15s ease;
}

.account-pill:has(.account-pill-main:hover) {
  border-color: rgba(255, 255, 255, .28);
}

.account-pill:has(:focus-visible) {
  border-color: rgba(255, 255, 255, .45);
}

.account-pill-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.account-pill button:focus-visible {
  outline: none;
}

.account-logout {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: 2px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--dimmer);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.account-logout svg {
  width: 15px;
  height: 15px;
}

.account-logout:hover,
.account-logout:focus-visible {
  background: var(--glass-3);
  color: var(--text);
}

.account-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--glass-3);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}

.account-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-avatar.large {
  width: 44px;
  height: 44px;
  font-size: 15px;
}

.account-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
}

.avatar-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.avatar-edit-foto {
  display: inline-flex;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.avatar-edit-foto:hover .account-avatar,
.avatar-edit-foto:focus-visible .account-avatar {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}

.avatar-edit-foto:focus-visible {
  outline: none;
}

/* Entrada do administrador: a conta num cartão do tamanho dos campos do convidado */
.lobby-account {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .03);
}

.lobby-account-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lobby-account-text b {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-account-text small {
  color: var(--dim);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   CONTEÚDO DAS PÁGINAS (CONTENT)
   ========================================================================== */
.content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 24px 28px 30px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

body[data-page="workspace"] .content {
  padding: 0;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.content::-webkit-scrollbar {
  width: 6px;
}
.content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .15);
  border-radius: 3px;
}

.page {
  display: none;
  flex-direction: column;
}

.page.active {
  display: flex;
}

#pageWorkspace {
  height: 100%;
  width: 100%;
  flex: 1;
  min-height: 0;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.page-head h1 {
  margin: 0;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.page-head p {
  margin: 3px 0 0;
  color: var(--dim);
  font-size: 13px;
}

/* GRADE DE 12 COLUNAS DO AIR CINEMA PC */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-12 { grid-column: span 12; }

@media (max-width: 1180px) {
  .span-3, .span-4, .span-5 { grid-column: span 6; }
  .span-7, .span-8, .span-6 { grid-column: span 12; }
}

@media (max-width: 768px) {
  .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9 { grid-column: span 12; }
}

/* CARTÕES DE VIDRO AIR CINEMA */
.card {
  position: relative;
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: var(--blur);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  min-height: 22px;
}

.kicker {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dimmer);
}

.card h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.muted {
  color: var(--dim);
}

.note {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--dimmer);
  line-height: 1.5;
}

/* PILLS DE STATUS (COM O PONTO CIRCULAR i) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--glass-2);
  border: 1px solid var(--line-soft);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--dim);
  white-space: nowrap;
}

.pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dimmer);
  flex: none;
}

.pill.on { color: var(--text); } .pill.on i { background: var(--accent); }
.pill.ok { color: var(--text); } .pill.ok i { background: var(--live); box-shadow: 0 0 6px var(--live); }
.pill.warn { color: var(--text); } .pill.warn i { background: var(--warn); }
.pill.bad { color: #F6B3B5; } .pill.bad i { background: var(--danger); }

/* BOTÕES ESTILO PC */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--glass-2);
  color: var(--text);
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  outline: none;
}

.btn:hover:not(:disabled) {
  background: var(--glass-3);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn:disabled {
  color: var(--dimmer);
  cursor: not-allowed;
}

.btn svg {
  width: 14px;
  height: 14px;
}

.btn.primary {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-ink);
}

.btn.primary:hover:not(:disabled) {
  background: #E4E5E8;
  box-shadow: 0 2px 12px rgba(255, 255, 255, 0.2);
}

/* Desativado: o branco fica apagado e translúcido */
.btn.primary:disabled {
  opacity: .35;
}

.btn.danger {
  background: rgba(229, 72, 77, 0.2);
  border-color: rgba(229, 72, 77, 0.4);
  color: #ff8b8e;
}

.btn.danger:hover:not(:disabled) {
  background: var(--danger-strong);
  border-color: transparent;
  color: #fff;
}

.btn.small {
  padding: 4px 9px;
  font-size: 11.5px;
  border-radius: 7px;
}

.icon-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 0;
  background: none;
  color: var(--dim);
  cursor: pointer;
  transition: all 0.15s ease;
}

.icon-btn:hover {
  background: var(--glass-3);
  color: var(--text);
}

.icon-btn svg {
  width: 14px;
  height: 14px;
}

/* INTERRUPTOR (SWITCH AIR DEV / PC) */
.sw {
  position: relative;
  width: 34px;
  height: 19px;
  flex: none;
  display: inline-block;
}

.sw input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.sw i {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  background: rgba(255, 255, 255, .10);
  border: 1px solid var(--line);
  transition: background .14s ease, border-color .14s ease;
}

.sw i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #E8E9EC;
  transition: transform .14s ease;
}

.sw input:checked + i {
  background: var(--accent);
  border-color: transparent;
}

.sw input:checked + i::after {
  transform: translateX(15px);
  background: var(--accent-ink);
}

/* CAMPOS DE ENTRADA (INPUTS) */
.input-pc {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  /* Cor sólida: o preenchimento automático do navegador usa a mesma (ver --input-fill) */
  background: var(--input-fill);
  color: var(--text);
  font-size: 12.5px;
  outline: none;
  transition: border-color .15s ease;
}

/* Select nativo estilizado para dark theme */
select.input-pc {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}

select.input-pc option {
  background: #1a1c20;
  color: #e4e4e7;
  padding: 8px 12px;
  border-radius: 0;
}

select.input-pc option:checked {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

select.input-pc option:hover {
  background: rgba(255, 255, 255, 0.08);
}

.input-pc:focus {
  border-color: rgba(255, 255, 255, .35);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .08);
}

/* LISTAS (ÍCONE + TEXTO + STATUS) */
.list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--glass-2);
  border: 1px solid var(--line-soft);
}

.device-icon {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--line-soft);
  font-size: 15px;
  color: var(--text);
}

.device-icon svg {
  width: 16px;
  height: 16px;
}

.list-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.list-main b,
.list-main small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-main b {
  font-size: 12.5px;
  font-weight: 600;
}

.list-main small {
  font-size: 11px;
  color: var(--dim);
}

.list-side {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.list-empty {
  padding: 18px 12px;
  border-radius: 10px;
  border: 1px dashed var(--line);
  color: var(--dimmer);
  font-size: 12px;
  text-align: center;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* AJUSTES (LINHAS DE CONFIGURAÇÃO) */
#pageSettings {
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

#pageSettings.active {
  animation: boot-rise .35s cubic-bezier(.16, 1, .3, 1) both;
}

#pageSettings .page-head {
  margin-bottom: 20px;
}

.settings-card {
  width: 100%;
  padding: 10px 22px;
}

.settings {
  display: flex;
  flex-direction: column;
}

.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line-soft);
}

.set-row:first-child {
  padding-top: 2px;
}

.set-row:last-child {
  padding-bottom: 2px;
  border-bottom: 0;
}

.set-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.set-text b {
  font-size: 13px;
  font-weight: 600;
}

.set-text small {
  font-size: 11.5px;
  color: var(--dim);
}

.set-row .input-pc,
.set-row .menu-escolha {
  width: 260px;
  flex: none;
}

/* PRÉVIA DE CÂMERA DO PAINEL */
.preview-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 6px;
}

/* Texto de conversa, transcrição e notas pode ser selecionado e copiado */
.chat-bubble-pc,
.whisper-feed-item,
.inline-notes-editor,
.postmeeting-editor-pc,
#summaryRawBox,
.input-pc {
  user-select: text;
}

input.input-pc,
[contenteditable="true"] {
  cursor: text;
}

/* BIG FIGURES (HERO STATS) */
.big-state {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: #fff;
}

.sub {
  color: var(--dim);
  margin-top: 3px;
  font-size: 12.5px;
}

/* CAIXA DE ENDEREÇO / CÓDIGO (.address) */
.address {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 7px 10px 7px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--line-soft);
  min-width: 0;
}

.address .kicker {
  flex: none;
}

.address code {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: text;
}

/* ==========================================================================
   SALA DE REUNIÃO ATIVA (LAYOUT INTEGRADO PC DESKTOP)
   ========================================================================== */
/* A reunião ocupa exatamente a área de conteúdo (cabeçalho + palco), sem rolar */
#pageMeeting.active {
  height: 100%;
}

.meeting-split-container {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 380px;
  /* A linha não cresce com o tamanho natural do vídeo: a barra de controles sempre cabe */
  grid-template-rows: minmax(0, 1fr);
  gap: 14px;
  min-height: 520px;
}

@media (max-width: 1080px) {
  #pageMeeting.active {
    height: auto;
  }

  .meeting-split-container {
    flex: none;
    grid-template-rows: none;
    grid-template-columns: 1fr;
  }
}

.video-stage-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 0;
}

.video-grid-pc {
  flex: 1;
  display: grid;
  gap: 10px;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: transparent;
  border: 0;
  padding: 0;
  box-sizing: border-box;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  min-height: 0;
}

.video-grid-pc[data-count="1"] {
  grid-template-columns: 1fr;
}
.video-grid-pc[data-count="2"] {
  grid-template-columns: repeat(2, 1fr);
}
.video-grid-pc[data-count="3"],
.video-grid-pc[data-count="4"] {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.video-grid-pc[data-count="5"],
.video-grid-pc[data-count="6"] {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.video-grid-pc[data-count="7"],
.video-grid-pc[data-count="8"],
.video-grid-pc[data-count="9"] {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.video-tile-pc {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #0d0e11;
  border-radius: 10px;
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .45s ease, box-shadow .45s ease;
}

/* Quem está falando: contorno branco fino com um leve neon saindo dele */
.video-tile-pc.speaking {
  border-color: rgba(255, 255, 255, .95);
  box-shadow:
    0 0 0 .5px rgba(255, 255, 255, .95),
    0 0 14px rgba(255, 255, 255, .32),
    0 0 36px rgba(255, 255, 255, .14);
}

.video-tile-pc video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-tile-pc video.local {
  transform: scaleX(-1);
}

/* Oculta marcadores de extensões de navegador (ex.: Video Speed Controller) injetados sobre os vídeos da chamada */
.vsc-controller,
[class*="vsc-"],
.video-tile-pc .vsc-controller,
.preview-frame .vsc-controller {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.tile-avatar-pc {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111216;
}

.avatar-badge-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--glass-3);
  border: 1px solid var(--line);
  color: #fff;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Nome no quadro: texto solto com sombra, sem pílula */
.tile-overlay-pill {
  position: absolute;
  bottom: 14px;
  left: 16px;
  max-width: calc(100% - 32px);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

.tile-overlay-pill > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .tile-overlay-pill {
    bottom: 10px;
    left: 12px;
    max-width: calc(100% - 24px);
    gap: 6px;
    font-size: 13px;
  }
}

/* Estado de reconexão: esmaecimento suave e badge com spinner */
.video-tile-pc.reconnecting video,
.video-tile-pc.reconnecting .tile-avatar-pc {
  opacity: 0.35 !important;
  filter: grayscale(40%) brightness(0.65) !important;
  transition: opacity .4s ease, filter .4s ease !important;
}

.tile-reconnecting-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 16, 20, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  padding: 8px 16px 8px 12px;
  color: #ffffff;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  pointer-events: none;
  animation: boot-rise .3s cubic-bezier(.16, 1, .3, 1) both;
}

.tile-reconnecting-badge .tv-spinner {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}

/* BARRA DE FERRAMENTAS INFERIOR DO PALCO (TOOLBAR PC) */
.stage-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: var(--blur);
}

.stage-toolbar-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* PAINEL LATERAL INTEGRADO (TABS & DRAWERS) */
.meeting-side-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: var(--blur);
  padding: 12px;
  gap: 10px;
}

.side-tabs-header {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: rgba(0, 0, 0, .35);
  border-radius: 8px;
  border: 1px solid var(--line-soft);
}

.side-tab-btn {
  flex: 1;
  padding: 5px 8px;
  border-radius: 6px;
  border: 0;
  background: none;
  color: var(--dim);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}

.side-tab-btn.active {
  background: var(--glass-3);
  color: var(--text);
}

.side-tab-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* WHISPER LIVE FEED */
.whisper-feed-box {
  flex: 1;
  max-height: 200px;
  overflow-y: auto;
  padding: 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}

.whisper-feed-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.whisper-feed-item b {
  color: var(--dim);
  font-size: 10.5px;
  font-weight: 600;
}

/* EDITOR DAS NOTAS NA REUNIÃO */
.inline-notes-editor {
  flex: 1;
  min-height: 140px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  overflow-y: auto;
  white-space: pre-wrap;
  outline: none;
}

/* CHAT MESSAGES */
.chat-scroll-pc {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px;
}

.chat-bubble-pc {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 90%;
}

.chat-bubble-pc.mine {
  align-self: flex-end;
}

.chat-bubble-pc.mine .chat-bubble-msg {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.chat-bubble-msg {
  padding: 8px 11px;
  border-radius: 8px;
  background: var(--glass-2);
  border: 1px solid var(--line-soft);
  font-size: 12px;
}

/* ==========================================================================
   TELA DE RESUMO E NOTAS PÓS-REUNIÃO (POST-MEETING SUMMARY)
   ========================================================================== */
.postmeeting-editor-pc {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
  min-height: 280px;
  max-height: 480px;
  overflow-y: auto;
  white-space: pre-wrap;
  outline: none;
}

/* NOTIFICAÇÃO TOAST ESTILO PC */
.toast-container {
  position: fixed;
  bottom: 18px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}

.toast-pc {
  background: rgba(18, 19, 22, 0.95);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 14px;
  color: var(--text);
  font-size: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Ícone do aviso sempre branco */
.toast-pc svg {
  width: 15px;
  height: 15px;
  color: #fff;
}

/* ==========================================================================
   ANIMAÇÕES AIR CINEMA, MODAIS OVERLAY & PREVIEW DE TELA (PIP)
   ========================================================================== */

/* Overlays / Modais com Blur estilo Air Cinema PC */
.overlay {
  position: fixed;
  inset: var(--titlebar-h) 0 0 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 7, 8, .65);
  backdrop-filter: blur(14px);
  animation: overlayFadeIn .25s ease;
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.overlay .card {
  max-width: 440px;
  width: 90%;
  text-align: center;
  padding: 26px 28px;
  animation: cardScaleUp .28s cubic-bezier(.16, 1, .3, 1);
}

@keyframes cardScaleUp {
  from { opacity: 0; transform: scale(.94) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.overlay h2 {
  font-size: 18px;
  margin: 8px 0 6px 0;
  font-family: var(--display);
}

.overlay p {
  margin: 0 0 16px;
  color: var(--dim);
  font-size: 12.5px;
  line-height: 1.5;
}

.overlay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
}

/* Spinner Air Cinema de 12 Barras */
.tv-spinner {
  position: relative;
  width: 32px;
  height: 32px;
  flex: none;
  margin: 0 auto 16px auto;
}

.tv-spinner span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22%;
  height: 8%;
  margin: -4% 0 0 -11%;
  border-radius: 6px;
  background: #fff;
  animation: tv-spinner-fade 1.2s linear infinite;
}

.tv-spinner span:nth-child(1)  { transform: rotate(0deg) translate(146%); animation-delay: -1.2s; }
.tv-spinner span:nth-child(2)  { transform: rotate(30deg) translate(146%); animation-delay: -1.1s; }
.tv-spinner span:nth-child(3)  { transform: rotate(60deg) translate(146%); animation-delay: -1.0s; }
.tv-spinner span:nth-child(4)  { transform: rotate(90deg) translate(146%); animation-delay: -.9s; }
.tv-spinner span:nth-child(5)  { transform: rotate(120deg) translate(146%); animation-delay: -.8s; }
.tv-spinner span:nth-child(6)  { transform: rotate(150deg) translate(146%); animation-delay: -.7s; }
.tv-spinner span:nth-child(7)  { transform: rotate(180deg) translate(146%); animation-delay: -.6s; }
.tv-spinner span:nth-child(8)  { transform: rotate(210deg) translate(146%); animation-delay: -.5s; }
.tv-spinner span:nth-child(9)  { transform: rotate(240deg) translate(146%); animation-delay: -.4s; }
.tv-spinner span:nth-child(10) { transform: rotate(270deg) translate(146%); animation-delay: -.3s; }
.tv-spinner span:nth-child(11) { transform: rotate(300deg) translate(146%); animation-delay: -.2s; }
.tv-spinner span:nth-child(12) { transform: rotate(330deg) translate(146%); animation-delay: -.1s; }

@keyframes tv-spinner-fade {
  from { opacity: 1; }
  to { opacity: .12; }
}

/* Transição em Cascata ao Entrar no Resumo Pós-Reunião */
@keyframes boot-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

#pageSummary.active .page-head {
  animation: boot-rise .45s cubic-bezier(.16,1,.3,1) both;
}

#pageSummary.active .grid > *:nth-child(1) { animation: boot-rise .45s cubic-bezier(.16,1,.3,1) .06s both; }
#pageSummary.active .grid > *:nth-child(2) { animation: boot-rise .45s cubic-bezier(.16,1,.3,1) .12s both; }
#pageSummary.active .grid > *:nth-child(3) { animation: boot-rise .45s cubic-bezier(.16,1,.3,1) .18s both; }
#pageSummary.active .grid > *:nth-child(4) { animation: boot-rise .45s cubic-bezier(.16,1,.3,1) .24s both; }
#pageSummary.active .grid > *:nth-child(5) { animation: boot-rise .45s cubic-bezier(.16,1,.3,1) .30s both; }
#pageSummary.active .grid > *:nth-child(6) { animation: boot-rise .45s cubic-bezier(.16,1,.3,1) .36s both; }

/* ==========================================================================
   SESSÃO: ADMINISTRADOR, CONVIDADO E VISITANTE
   ========================================================================== */
/* O menu e as ações de administrador só existem para administradores */
body:not([data-role="admin"]) .sidebar,
body:not([data-role="admin"]) [data-admin-only] {
  display: none !important;
}

body[data-role="admin"] [data-guest-only] {
  display: none !important;
}

/* Convidado vê só o essencial: sem o botão de tela cheia no topo */
body:not([data-role="admin"]) #btnFullscreen {
  display: none !important;
}

/* Painel: mesma prévia da entrada, abaixo do título do cartão */
.preview-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
}


/* Conteúdo centralizado (carregamento, login, saída) */
.center-stage {
  flex: 1;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 12px 0;
}

.page.active:has(> .center-stage) {
  min-height: 100%;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  padding: 24px 26px;
  animation: boot-rise .45s cubic-bezier(.16, 1, .3, 1) both;
}

/* No login e na entrada da reunião o logo legado em imagem ficava oculto */
body[data-page="login"] .titlebar .brand-mark,
body[data-page="lobby"] .titlebar .brand-mark {
  display: none;
}

/* Login: ícone e nome como no cabeçalho, em tamanho de título */
.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Símbolo da marca no login e entrada da reunião */
.auth-mark {
  display: block;
  flex: none;
  width: 26px;
  height: 26px;
  color: #FFF;
}

.auth-title {
  margin: 0;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* Badge WORKSPACE maior na tela de login, proporcional ao título de 22px */
.auth-brand .amb {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 4px 11px;
  border-radius: 999px;
  border-color: rgba(255, 255, 255, .12);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dimmer);
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

/* FORMULÁRIOS */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.field-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dimmer);
}

.inline-form {
  display: flex;
  gap: 8px;
}

.form-error {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(229, 72, 77, .12);
  border: 1px solid rgba(229, 72, 77, .35);
  color: #F6B3B5;
  font-size: 12px;
  user-select: text;
}

.btn.block {
  width: 100%;
  padding: 9px 16px;
}

/* Aceite: a linha inteira é tocável (≥ 44 px) e a caixa tem desenho próprio, visível em qualquer navegador */
.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .03);
  font-size: 12.5px;
  line-height: 1.4;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, background .15s ease;
}

.check-row:has(input:checked) {
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .07);
}

.check-row input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, .5);
  background: rgba(0, 0, 0, .35);
  cursor: pointer;
}

.check-row input:checked {
  border-color: var(--accent);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2312120F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.check-row input:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .6);
  outline-offset: 2px;
}

/* Preenchimento automático do navegador: mesmo fundo e mesma borda dos outros campos.
   O navegador pinta o fundo por cima do CSS; uma sombra interna da cor do campo cobre essa pintura. */
.input-pc:-webkit-autofill,
.input-pc:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--input-fill) inset;
  box-shadow: 0 0 0 1000px var(--input-fill) inset;
  transition: background-color 99999s ease-out 0s;
}

.input-pc:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--input-fill) inset, 0 0 0 2px rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 1000px var(--input-fill) inset, 0 0 0 2px rgba(255, 255, 255, .08);
  transition: background-color 99999s ease-out 0s;
}

/* Firefox aplica um filtro amarelado no preenchimento automático */
.input-pc:autofill {
  filter: none;
}

.captcha-box {
  min-height: 65px;
}

/* PRÉVIA DE CÂMERA (PAINEL E ENTRADA) */
.preview-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #0b0c0e;
  border: 1px solid var(--line);
}

.preview-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.preview-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #121316;
}

/* Espectro do microfone em tempo real, abaixo das iniciais */
.audio-spectrum {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 40px;
}

.audio-spectrum span {
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  transition: height .06s linear;
}

.preview-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vu-track {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.vu-fill {
  width: 0%;
  height: 100%;
  background: var(--live);
  transition: width .08s;
}

.switch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.switch-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  cursor: pointer;
}

/* LINHAS DE REUNIÃO (PAINEL) */
.list-row .list-side .btn {
  flex: none;
}

/* Apagar (contatos e histórico): só a lixeira, na altura dos botões com texto; no hover, fundo branco e ícone preto */
.list-side .btn.icon-only {
  align-self: stretch;
  width: 27px;
  padding: 0;
}

.list-side .btn.icon-only:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

@media (max-width: 768px) {
  .list-row.meeting-row {
    flex-wrap: wrap;
  }

  .list-row.meeting-row .list-side {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .auth-card {
    padding: 20px 18px;
  }
}

/* ==========================================================================
   CHAT COM ANEXOS E HISTÓRICO DA REUNIÃO
   ========================================================================== */
.chat-body {
  position: relative;
}

.chat-body.drop-active::after {
  content: "Solte para anexar";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(255, 255, 255, .45);
  border-radius: 10px;
  background: rgba(6, 7, 8, .75);
  font-weight: 600;
  pointer-events: none;
}

.chat-empty {
  margin: auto 0;
  padding: 0 12px;
  text-align: center;
  color: var(--dimmer);
  font-size: 11.5px;
}

.chat-meta {
  font-size: 10px;
  color: var(--dimmer);
}

.chat-bubble-pc.mine .chat-meta {
  text-align: right;
}

.chat-bubble-msg {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-bubble-msg a {
  color: #fff;
  text-decoration: underline;
}

.chat-attachments {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
}

.chat-bubble-pc.mine .chat-attachments {
  justify-content: flex-end;
}

.chat-image {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: #0b0c0e;
}

.chat-image img {
  display: block;
  max-width: 220px;
  max-height: 160px;
  object-fit: cover;
}

.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--glass-2);
  border: 1px solid var(--line-soft);
  color: var(--text);
  font-size: 11.5px;
  text-decoration: none;
}

a.file-chip:hover {
  background: var(--glass-3);
}

.file-chip-icon {
  flex: none;
  display: inline-flex;
}

.file-chip-icon svg {
  width: 14px;
  height: 14px;
}

.file-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.file-chip small {
  flex: none;
  color: var(--dim);
}

.file-chip-remove {
  flex: none;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--text);
  cursor: pointer;
  line-height: 1;
}

.chat-pending {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.meeting-chat-input-area {
  padding: 8px 0 0;
  margin-top: auto;
  width: 100%;
}

.meeting-chat-input-area .ws-chat-input-form {
  gap: 6px;
  padding: 5px 8px;
}

.meeting-chat-input-area .ws-chat-textarea {
  font-size: 13px;
  padding: 4px 0;
  max-height: 120px;
}

.meeting-chat-input-area .ws-input-btn {
  width: 28px;
  height: 28px;
}

.meeting-chat-input-area .ws-input-btn svg {
  width: 16px;
  height: 16px;
}

.meeting-chat-input-area .ws-chat-send-btn {
  width: 28px;
  height: 28px;
}

.meeting-chat-input-area .ws-chat-send-btn svg {
  width: 14px;
  height: 14px;
}

.chat-compose {
  display: flex;
  gap: 6px;
  margin-top: auto;
}

.btn.icon-only {
  flex: none;
  padding: 4px 8px;
}

.tab-badge {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 700;
}

/* Legenda ao vivo sobre o palco */
.video-stage-column {
  position: relative;
}

.stage-captions {
  position: absolute;
  left: 50%;
  bottom: 112px;
  z-index: 20;
  width: max-content;
  max-width: min(760px, 92%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateX(-50%);
  pointer-events: none;
}

.caption-line {
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(6, 7, 8, .82);
  border: 1px solid var(--line-soft);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  backdrop-filter: blur(8px);
}

.caption-line b {
  margin-right: 6px;
  color: var(--dim);
  font-weight: 600;
}

.caption-line.interim span {
  color: #cfd1d6;
}

/* Alternância Reunião / Histórico */
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--line-soft);
}

.segmented-btn {
  padding: 3px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--dim);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.segmented-btn.active {
  background: var(--glass-3);
  color: var(--text);
}

.meeting-history {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.history-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.history-title {
  margin-bottom: 10px !important;
  font-family: var(--display);
  font-size: 18px !important;
}

.info-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  font-size: 12px;
}

.info-list dt {
  color: var(--dimmer);
}

.info-list dd {
  min-width: 0;
  overflow-wrap: anywhere;
  user-select: text;
}

.info-list code {
  font-family: var(--mono);
}

.history-stats {
  margin-top: 14px;
}

.history-scroll {
  max-height: 360px;
  overflow-y: auto;
}

.history-transcript {
  max-height: 420px;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.gallery-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gallery-item .chat-image img {
  width: 100%;
  max-width: none;
  height: 100px;
}

.gallery-item figcaption {
  font-size: 10.5px;
  color: var(--dimmer);
}

.list-row > .file-chip {
  flex: 0 1 auto;
}

/* ==========================================================================
   DETALHE DA REUNIÃO (NOTAS, VERSÕES E ARQUIVOS)
   ========================================================================== */
.head-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* A largura do compacto vem do JS (a da opção mais longa) e fica fixa */
.menu-escolha.compacto {
  flex: none;
  width: auto;
  max-width: 320px;
}

/* Régua invisível que mede a opção mais longa */
.menu-popup.menu-regua {
  width: max-content;
  visibility: hidden;
  pointer-events: none;
  animation: none;
}

.editor-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

a.export-row {
  color: var(--text);
  text-decoration: none;
}

a.export-row:hover {
  background: var(--glass-3);
}

.section-title {
  margin: 26px 0 12px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .menu-escolha.compacto {
    max-width: 100%;
  }

  #pageSummary .card-head {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   PÁGINAS DO ADMINISTRADOR (PAINEL, AGENDA, HISTÓRICO E ARQUIVO)
   ========================================================================== */
.nav {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.nav-section {
  margin: 12px 12px 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dimmer);
}

.sidebar-foot {
  flex: none;
  margin-top: 12px;
}

.sidebar .nav {
  flex: 1;
}

.stat-card .big-state {
  font-size: 30px;
}

.next-meeting-time {
  font-size: 20px !important;
}

/* Só a primeira letra maiúscula ("Qua., 16 de set.") */
.next-meeting-time::first-letter,
.agenda-day::first-letter,
.week-day-head span::first-letter {
  text-transform: uppercase;
}

.next-meeting-actions {
  margin-top: 12px;
}

.count-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--dim);
}

.count-chips span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.count-chips svg {
  width: 12px;
  height: 12px;
}

.list-row.clickable,
.card.clickable {
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.list-row.clickable:hover {
  background: var(--glass-3);
}

.card.clickable:hover {
  border-color: rgba(255, 255, 255, .2);
}

.list-main.wrap b,
.list-main.wrap small {
  white-space: normal;
  overflow-wrap: anywhere;
}

mark {
  padding: 0 2px;
  border-radius: 3px;
  background: rgba(242, 183, 58, .3);
  color: #fff;
}

.toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.toolbar-row input[type="search"] {
  flex: 1;
  min-width: 220px;
}

.load-more-row {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .3);
  cursor: pointer;
}

.link-btn:hover {
  text-decoration-color: #fff;
}

.page-card {
  margin-bottom: 14px;
}

textarea.input-pc {
  resize: vertical;
  min-height: 60px;
  line-height: 1.45;
}

input[type="date"].input-pc,
input[type="time"].input-pc {
  color-scheme: dark;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.form-grid .span-full {
  grid-column: 1 / -1;
}

/* Mensagens de todas as reuniões */
.message-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.message-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--glass-2);
  border: 1px solid var(--line-soft);
}

.message-item-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.message-item .chat-bubble-pc {
  max-width: 100%;
}

/* Contatos */
.contact-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-entries {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: 44px;
}

.avatar-small {
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--display);
}

/* Arquivos */
.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.file-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: var(--glass);
  border: 1px solid var(--line);
}

.file-card-preview {
  height: 130px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .35);
}

.file-card-preview .chat-image {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}

.file-card-preview .chat-image img {
  width: 100%;
  height: 130px;
  max-width: none;
  max-height: none;
}

.file-card-icon {
  display: inline-flex;
  color: var(--dim);
}

.file-card-icon svg {
  width: 36px;
  height: 36px;
}

.file-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px 12px;
}

.file-card-body > b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.file-card-body small {
  color: var(--dim);
  font-size: 11px;
}

.file-card-body .link-btn {
  font-size: 11.5px;
}

/* Notas */
.note-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.note-excerpt {
  color: var(--dim);
  font-size: 12.5px;
  line-height: 1.55;
  user-select: text;
}

/* Agenda */
.agenda-day {
  margin: 18px 0 8px;
  font-size: 14px;
}

.agenda-day:first-child {
  margin-top: 0;
}

.agenda-week-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.agenda-week-nav b {
  margin-left: 8px;
  font-size: 13px;
}

.agenda-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.week-day {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 180px;
  padding: 8px;
  border-radius: 12px;
  background: var(--glass);
  border: 1px solid var(--line);
}

.week-day.today {
  border-color: rgba(255, 255, 255, .35);
}

.week-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 2px 4px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--dim);
  font-size: 11px;
}

.week-day-head span {
  display: inline-block;
}

.week-day-head b {
  color: var(--text);
  font-family: var(--display);
  font-size: 18px;
}

.week-empty {
  margin: auto;
  color: var(--dimmer);
}

.week-chip {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 6px 7px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent);
  border-radius: 7px;
  background: var(--glass-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.week-chip:hover {
  background: var(--glass-3);
}

.week-chip span {
  color: var(--dim);
  font-size: 10.5px;
}

.week-chip {
  min-width: 0;
  overflow: hidden;
}

.week-chip b {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.week-chip.status-live {
  border-left-color: var(--live);
}

.week-chip.status-ended {
  border-left-color: var(--dimmer);
}

.week-chip.status-cancelled {
  border-left-color: var(--danger);
  opacity: .7;
}

@media (max-width: 1080px) {
  .agenda-week {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .week-day {
    min-height: 0;
  }
}

@media (max-width: 768px) {
  .nav-section {
    display: none;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .agenda-week {
    grid-template-columns: 1fr;
  }

  .contact-entries {
    margin-left: 0;
  }

  /* Botões do contato descem para baixo do nome */
  .contact-item > .list-row {
    flex-wrap: wrap;
  }

  .contact-item > .list-row .list-side {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .toolbar-row input[type="search"] {
    min-width: 0;
    width: 100%;
  }
}

/* ==========================================================================
   GRAVAÇÃO
   ========================================================================== */
.rec-pill i {
  animation: rec-blink 1.2s ease-in-out infinite;
}

@keyframes rec-blink {
  50% { opacity: .25; }
}

#tbBtnRecord svg circle:last-child {
  fill: currentColor;
}

#tbBtnRecord.recording svg circle:last-child {
  animation: rec-blink 1.2s ease-in-out infinite;
}

.recording-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.recording-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: var(--glass-2);
  border: 1px solid var(--line-soft);
}

.recording-item video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.recording-poster {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #0b0c0e;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.recording-poster-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.recording-poster:hover {
  background: #121316;
}

.recording-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px 12px;
}

.recording-body small {
  color: var(--dim);
  font-size: 11px;
}

.recording-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.recording-actions a.btn {
  text-decoration: none;
}

.storage-track {
  height: 6px;
}

/* ==========================================================================
   MENU DE ESCOLHA (DROPDOWN) — desenho do MenuEscolha do G.Form Dashboard
   ========================================================================== */
.menu-escolha {
  position: relative;
  width: 100%;
  min-width: 0;
}

/* O <select> continua no DOM guardando o valor, mas fora da vista */
.menu-nativo {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
  pointer-events: none;
}

.menu-gatilho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--input-fill);
  color: var(--text);
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -.006em;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.menu-gatilho:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, .2);
}

.menu-gatilho:focus-visible,
.menu-escolha.aberto .menu-gatilho {
  outline: none;
  border-color: rgba(255, 255, 255, .35);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1);
}

.menu-gatilho:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.menu-gatilho-texto {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-gatilho-texto.vazio {
  color: var(--dimmer);
}

.menu-gatilho svg {
  flex: none;
  width: 14px;
  height: 14px;
  stroke: var(--dimmer);
  transition: transform .15s ease;
}

.menu-escolha.aberto .menu-gatilho svg {
  transform: rotate(180deg);
}

.menu-escolha.compacto .menu-gatilho {
  height: 30px;
  padding: 0 8px;
  font-size: 12px;
}

/* Camada fixa sobre a página (posição e largura do campo vêm do JS): nada a corta */
.menu-popup {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  max-width: calc(100vw - 16px);
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0a0a0a;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .8);
  animation: menu-surge .14s cubic-bezier(.16, 1, .3, 1);
}

@keyframes menu-surge {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}

.menu-popup.para-cima {
  animation-name: menu-surge-cima;
}

@keyframes menu-surge-cima {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

/* shrink-0 em cada item: sem ele o flex espreme a lista na altura máxima */
.menu-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

.menu-lista-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #d4d4d8;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -.006em;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease;
}

.menu-lista-item > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-lista-item:hover,
.menu-lista-item:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, .06);
}

.menu-lista-item[data-ativo='1'],
.menu-lista-item[data-ativo='1']:hover {
  background: var(--menu-ativo);
  color: var(--menu-ativo-texto);
}

/* Check do escolhido: duas bordas de um retângulo girado, na cor do texto */
.menu-lista-item[data-ativo='1']::after {
  content: '';
  flex: none;
  margin-left: auto;
  width: 5px;
  height: 9px;
  border: solid currentColor;
  border-width: 0 1.75px 1.75px 0;
  transform: translateY(-1.5px) rotate(45deg);
}

.menu-lista-item:disabled,
.menu-lista-item:disabled:hover {
  opacity: .45;
  background: transparent;
  cursor: not-allowed;
}

.menu-busca {
  position: relative;
  margin-bottom: 6px;
}

.menu-busca input.input-pc {
  height: 32px;
  padding: 0 32px;
  font-size: 13px;
}

.menu-busca > svg,
.menu-busca-limpar svg {
  width: 14px;
  height: 14px;
  stroke: var(--dimmer);
}

.menu-busca > svg {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  pointer-events: none;
}

.menu-busca-limpar {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  background: none;
  transform: translateY(-50%);
  cursor: pointer;
}

.menu-busca-limpar:hover svg {
  stroke: var(--text);
}

.menu-vazio {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--dimmer);
}

@media (pointer: coarse) {
  .menu-lista-item {
    padding: 10px;
    font-size: 15px;
  }

  .menu-busca input.input-pc {
    font-size: 16px;
  }
}

/* ==========================================================================
   RESPONSIVIDADE (TABLET E CELULAR)
   ========================================================================== */

/* Altura real da tela em navegadores móveis (barra de endereço dinâmica) */
@supports (height: 100dvh) {
  .app {
    height: 100dvh;
  }
}

/* iPhone e iPad dão zoom ao focar campos com fonte menor que 16 px: em telas de toque os campos usam 16 px */
@media (pointer: coarse), (max-width: 768px) {
  .input-pc,
  input.input-pc,
  textarea.input-pc,
  .menu-gatilho {
    font-size: 16px;
  }
}

/* Em telas de toque o hover "gruda" no último item tocado */
@media (hover: none) {
  .nav-item:hover:not([aria-current="page"]) {
    background: none;
    color: var(--dim);
  }
}

/* Reunião em coluna única: tiles com proporção fixa em vez de altura da tela */
@media (max-width: 1080px) {
  .video-grid-pc {
    height: auto;
    grid-auto-rows: auto;
  }

  .video-tile-pc {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .meeting-side-card {
    height: auto;
    min-height: 420px;
  }
}

@media (max-width: 768px) {
  /* Menu lateral vira barra de abas inferior */
  .shell {
    flex-direction: column;
  }

  .sidebar {
    order: 2;
    width: 100%;
    flex-direction: row;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    border-right: 0;
    border-top: 1px solid var(--line-soft);
  }

  /* Menu inferior com todas as páginas: rola na horizontal */
  .nav {
    flex: 1;
    flex-direction: row;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .nav-item {
    flex: 0 0 auto;
    min-width: 66px;
    flex-direction: column;
    gap: 3px;
    padding: 6px 6px;
    font-size: 10.5px;
    text-align: center;
    white-space: nowrap;
  }

  .nav-item[aria-current="page"]::before {
    top: 0;
    bottom: auto;
    left: 30%;
    width: 40%;
    height: 2px;
  }

  /* "Ao vivo" vira um ponto verde sobre o ícone */
  .nav-badge {
    position: absolute;
    top: 5px;
    right: calc(50% - 16px);
    width: 7px;
    height: 7px;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 0;
    background: var(--live);
    box-shadow: 0 0 6px var(--live);
  }

  .sidebar-foot {
    display: none;
  }

  /* Conteúdo */
  .content {
    min-height: 0;
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
  }



  .page-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .page-head h1 {
    font-size: 20px;
    overflow-wrap: anywhere;
  }

  .page-head > div {
    flex-wrap: wrap;
  }

  .page-head > div > .btn {
    flex: 1;
  }

  .preview-layout {
    grid-template-columns: 1fr;
  }

  .set-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .set-row .input-pc,
  .set-row .menu-escolha {
    width: 100%;
  }

  /* Reunião: três ou mais pessoas em grade 2x */
  .video-grid-pc:not([data-count="1"]):not([data-count="2"]) {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
  }

  .video-grid-pc:not([data-count="1"]):not([data-count="2"]) .video-tile-pc {
    aspect-ratio: 1;
  }

  .stage-toolbar,
  .stage-toolbar-group {
    flex-wrap: wrap;
    justify-content: center;
  }

  .postmeeting-editor-pc {
    max-height: none;
    padding: 14px;
  }

  .toast-container {
    left: 16px;
    right: 16px;
    bottom: 76px;
  }
}

/* Celular: duas pessoas empilhadas e barra da reunião só com ícones */
@media (max-width: 600px) {
  .video-grid-pc[data-count="2"] {
    grid-template-columns: 1fr;
  }

  .stage-toolbar .btn {
    padding: 9px 12px;
  }

  .stage-toolbar .btn span {
    display: none;
  }
}

/* ==========================================================================
   FOTO DE PERFIL (janela com recorte — mesma ferramenta do G.Form)
   ========================================================================== */
.foto-modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: overlayFadeIn .2s ease;
}

.foto-modal {
  width: 100%;
  max-width: 420px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0a0a0a;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .6);
  color: var(--text);
  animation: cardScaleUp .24s cubic-bezier(.16, 1, .3, 1);
}

.foto-modal-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 20px 0;
}

.foto-modal-icone {
  display: inline-flex;
  color: var(--accent);
}

.foto-modal-topo h3 {
  flex: 1;
  margin: 0;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
}

.foto-modal-fechar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--dimmer);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.foto-modal-fechar:hover {
  background: var(--glass-2);
  color: var(--text);
}

.foto-modal-corpo {
  padding: 12px 20px 20px;
}

.foto-modal-corpo > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.foto-modal-corpo > div[hidden] {
  display: none;
}

/* Área de soltar: também é o botão que abre a pasta */
.foto-soltar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  border: 2px dashed var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s ease;
  outline: none;
}

.foto-soltar:hover,
.foto-soltar:focus-visible {
  border-color: rgba(255, 255, 255, .22);
  background: var(--glass-2);
}

.foto-soltar.arrastando {
  border-color: var(--accent);
  background: rgba(255, 255, 255, .08);
  transform: scale(1.02);
}

.foto-soltar.ocupado {
  pointer-events: none;
  opacity: .6;
}

.foto-previa {
  position: relative;
  display: grid;
  place-items: center;
  width: 176px;
  height: 176px;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid var(--line);
  transition: transform .2s ease;
  outline: none;
}

.foto-soltar.arrastando .foto-previa {
  transform: scale(1.1);
}

.foto-previa.com-foto {
  cursor: pointer;
}

.foto-previa-conteudo,
.foto-previa-conteudo img,
.foto-previa-iniciais {
  display: block;
  width: 100%;
  height: 100%;
}

.foto-previa-conteudo img {
  object-fit: cover;
}

.foto-previa-iniciais {
  display: grid;
  place-items: center;
  background: var(--glass-2);
  color: var(--dim);
  font-size: 28px;
  font-weight: 500;
}

.foto-previa-ajustar,
.foto-previa-carregando,
.foto-previa-pronto {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.foto-previa-ajustar {
  grid-auto-flow: column;
  gap: 6px;
  align-content: center;
  justify-content: center;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  opacity: 0;
  transition: opacity .15s ease;
}

.foto-previa-ajustar svg {
  width: 14px;
  height: 14px;
}

.foto-previa.com-foto:hover .foto-previa-ajustar,
.foto-previa.com-foto:focus-visible .foto-previa-ajustar {
  opacity: 1;
}

.foto-previa-carregando {
  background: rgba(0, 0, 0, .45);
  color: #fff;
}

.foto-previa-carregando svg {
  width: 28px;
  height: 28px;
}

.foto-previa-pronto {
  background: rgba(16, 185, 129, .8);
  color: #fff;
}

.foto-previa-pronto svg {
  width: 36px;
  height: 36px;
  stroke-width: 2.5;
}

.foto-previa [hidden] {
  display: none;
}

.foto-soltar-texto {
  text-align: center;
}

.foto-soltar-texto p {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
}

.foto-soltar-titulo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}

.foto-soltar-titulo svg {
  width: 14px;
  height: 14px;
  color: var(--dim);
}

.foto-soltar-dica {
  margin-top: 2px !important;
  color: var(--dimmer);
}

.foto-erro {
  margin: 0;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(239, 68, 68, .25);
  background: rgba(239, 68, 68, .1);
  color: #f87171;
  font-size: 12px;
  font-weight: 500;
}

.foto-erro[hidden] {
  display: none;
}

.foto-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.foto-nome {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--dimmer);
  font-size: 13px;
}

.foto-remover {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: #fff;
  color: #000;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}

.foto-remover:hover:not(:disabled) {
  background: #e4e4e7;
}

.foto-remover svg {
  width: 14px;
  height: 14px;
}

.foto-remover:disabled {
  opacity: .4;
}

.foto-remover[hidden] {
  display: none;
}

/* Visor quadrado (é o quadrado que é salvo); o círculo por cima mostra como o avatar vai aparecer */
.foto-visor {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(0, 0, 0, .4);
  touch-action: none;
  user-select: none;
  cursor: grab;
}

.foto-visor:active {
  cursor: grabbing;
}

.foto-visor img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  pointer-events: none;
}

/* closest-side: o buraco da máscara coincide com o círculo inscrito onde o anel é desenhado */
.foto-visor-mascara {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, .55);
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, transparent 0 99%, #000 100%);
  mask-image: radial-gradient(circle closest-side at 50% 50%, transparent 0 99%, #000 100%);
}

.foto-visor-anel {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .6);
}

/* Ícone de workspace: o que aparece é um quadrado de cantos suaves, então sem máscara circular */
.foto-modal--quadrado .foto-previa,
.foto-modal--quadrado .foto-visor-anel {
  border-radius: 22%;
}

.foto-modal--quadrado .foto-visor-mascara {
  display: none;
}

.foto-visor-carregando {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .45);
  color: #fff;
}

.foto-visor-carregando[hidden] {
  display: none;
}

.foto-visor-carregando svg {
  width: 28px;
  height: 28px;
}

.foto-zoom {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--dimmer);
}

.foto-zoom svg {
  width: 14px;
  height: 14px;
}

.foto-zoom span {
  width: 40px;
  text-align: right;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.slider-foto {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  outline: none;
}

.slider-foto::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .22);
  cursor: grab;
  transition: transform .12s ease;
}

.slider-foto::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.12);
}

.slider-foto::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .22);
  cursor: grab;
}

.slider-foto::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--line);
}

.foto-dica {
  margin: 0;
  text-align: center;
  color: var(--dimmer);
  font-size: 12px;
  font-weight: 500;
}

.foto-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
}

.foto-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.foto-btn.salvar {
  border-color: transparent;
  background: #fff;
  color: #000;
  font-weight: 600;
}

.foto-btn.salvar:hover:not(:disabled) {
  background: #e6e6e6;
  color: #000;
}

.foto-btn:disabled {
  opacity: .4;
  cursor: default;
}

.foto-btn svg {
  width: 14px;
  height: 14px;
}

/* Confirmações e avisos (LeadNodeDialog e saída da reunião): o mesmo card da foto de perfil */
.dialogo-texto p {
  margin: 0;
  color: var(--dim);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.dialogo-texto p:first-child {
  color: var(--text);
}

.dialogo-texto p + p {
  margin-top: 8px;
}

.dialogo-acoes {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  margin-top: 14px;
}

.dialogo-acoes .foto-btn {
  flex: 0 0 auto;
  min-width: 90px;
  padding: 0 16px;
  white-space: nowrap;
}

/* Sair da reunião tem três botões: um pouco mais larga para caberem numa linha */
#exitModal .foto-modal {
  max-width: 480px;
}

/* Sem "Encerrar para todos" (convidado), "Sair da reunião" é o botão principal */
body:not([data-role="admin"]) #btnConfirmExitMeeting {
  border-color: transparent;
  background: #404040;
  color: #fff;
}

body:not([data-role="admin"]) #btnConfirmExitMeeting:hover:not(:disabled) {
  background: #fff;
  color: #000;
}

.dialogo-carregando {
  padding: 28px 20px 24px;
  text-align: center;
}

.dialogo-carregando h3 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
}

.dialogo-carregando p {
  margin: 0;
  color: var(--dim);
  font-size: 13px;
  line-height: 1.5;
}

.tile-mic,
.tile-icon {
  display: inline-flex;
}

.tile-overlay-pill svg {
  width: 16px;
  height: 16px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
}

@media (max-width: 768px) {
  .tile-overlay-pill svg {
    width: 14px;
    height: 14px;
  }
}

/* ==========================================================================
   CABEÇALHO DA REUNIÃO: título e situação | Reunião/Histórico | ações
   (mesma linguagem da barra de baixo: pílulas, vidro e botões sem borda)
   ========================================================================== */
.meeting-head {
  align-items: center;
  margin-bottom: 14px;
}

.meeting-head-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#pageMeeting #meetingTitleHead {
  min-width: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meeting-head-meta {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.meeting-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.meeting-live i {
  position: relative;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--live);
}

/* Onda saindo do ponto verde */
.meeting-live i::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--live);
  opacity: 0;
  animation: live-pulse 2s ease-out infinite;
}

@keyframes live-pulse {
  from { transform: scale(.6); opacity: .8; }
  to { transform: scale(1.8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .meeting-live i::after {
    animation: none;
  }
}

.meeting-timer {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.meeting-live + .meeting-timer::before {
  content: "·";
  margin-right: 8px;
  color: var(--dimmer);
}

body[data-role="admin"] .meeting-head-meta .pill {
  padding: 3px 10px;
  font-weight: 500;
}

/* Reunião / Histórico: pílula de vidro, aba ativa em branco */
.meeting-view-switch {
  justify-self: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: var(--blur);
}

.meeting-view-switch .segmented-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 12.5px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

.meeting-view-switch .segmented-btn svg {
  width: 15px;
  height: 15px;
}

.meeting-view-switch .segmented-btn:not(.active):hover {
  background: rgba(255, 255, 255, .06);
  color: var(--text);
}

.meeting-view-switch .segmented-btn.active {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Ações: pílulas sem borda como os botões da barra (sair e encerrar ficam só na barra de baixo) */
.meeting-head-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.head-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  flex: none;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease;
}

.head-pill-btn svg {
  width: 16px;
  height: 16px;
}

.head-pill-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, .16);
}

/* Administrador: três colunas (as abas ficam no centro) */
body[data-role="admin"] #pageMeeting .meeting-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "info switch actions";
  gap: 16px;
}

body[data-role="admin"] .meeting-head-info { grid-area: info; }
body[data-role="admin"] .meeting-view-switch { grid-area: switch; }
body[data-role="admin"] .meeting-head-actions { grid-area: actions; }

/* Sem espaço para as três colunas: abas e ações descem para a segunda linha */
@media (max-width: 1180px) {
  body[data-role="admin"] #pageMeeting .meeting-head {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "info info"
      "switch actions";
    gap: 12px 16px;
  }

  body[data-role="admin"] .meeting-view-switch {
    justify-self: start;
  }
}

/* Celular: título menor e ações só com ícone */
@media (max-width: 600px) {
  #pageMeeting #meetingTitleHead {
    font-size: 17px;
  }

  body[data-role="admin"] #pageMeeting .meeting-head {
    gap: 10px 8px;
  }

  .meeting-view-switch .segmented-btn {
    padding: 0 12px;
  }

  .head-pill-btn {
    width: 40px;
    padding: 0;
  }

  .head-pill-btn span {
    display: none;
  }
}

/* Foto de perfil dentro do círculo do tile */
.avatar-badge-circle.has-photo {
  overflow: hidden;
  border: 0;
  background: none;
}

.avatar-badge-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pessoas: o mesmo círculo dos quadros da chamada, no tamanho da lista */
.avatar-badge-circle.list-avatar {
  flex: none;
  width: 34px;
  height: 34px;
  font-size: 12px;
}

/* ==========================================================================
   SALA DO CONVIDADO: PALCO EM TELA CHEIA, BARRA FLUTUANTE E PAINEL SOB DEMANDA
   ========================================================================== */
.call-actions,
.side-panel-head {
  display: none;
}

.call-action-btn {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text);
  cursor: pointer;
  transition: background .15s ease;
}

.call-action-btn:hover {
  background: var(--glass-2);
}

.call-action-btn.active {
  background: rgba(255, 255, 255, .14);
}

.call-action-btn svg {
  width: 20px;
  height: 20px;
}

.call-action-btn .tab-badge {
  position: absolute;
  top: 3px;
  right: 1px;
  margin: 0;
}

body[data-role="guest"][data-page="meeting"] .titlebar {
  display: none;
}

body[data-role="guest"][data-page="meeting"] .content {
  padding: 16px 16px 0;
  overflow: hidden;
}

body[data-role="guest"][data-page="meeting"] .toast-container {
  bottom: 96px;
}

/* Grade da página: palco em cima; embaixo, informações | barra | painéis */
body[data-role="guest"] #pageMeeting.active {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 80px;
  grid-template-areas:
    "stage stage stage"
    "info bar actions";
  column-gap: 16px;
}

body[data-role="guest"] #pageMeeting[data-panel].active {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 360px;
  grid-template-areas:
    "stage stage stage side"
    "info bar actions actions";
}

/* Os contêineres do layout do administrador não existem para o convidado */
body[data-role="guest"] #pageMeeting .meeting-split-container,
body[data-role="guest"] #pageMeeting .video-stage-column {
  display: contents;
}

/* Informações: título, tempo e avisos de transcrição e gravação */
body[data-role="guest"] #pageMeeting .page-head {
  grid-area: info;
  align-self: center;
  min-width: 0;
  margin: 0;
  flex-direction: row;
}

body[data-role="guest"] .meeting-head-info {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

body[data-role="guest"] .meeting-head-meta {
  flex-wrap: nowrap;
  gap: 10px;
}

body[data-role="guest"] #pageMeeting #meetingTitleHead {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: normal;
}

body[data-role="guest"] #meetingTimerPill {
  font-size: 11.5px;
  font-weight: 600;
}

body[data-role="guest"] #meetingTimerPill::before {
  content: none;
}

body[data-role="guest"] #meetingLivePill,
body[data-role="guest"] #meetingSttPill,
body[data-role="guest"] .meeting-head-actions {
  display: none;
}

/* Palco */
body[data-role="guest"] #videoGridPC {
  grid-area: stage;
  height: auto;
  padding: 0;
  gap: 12px;
  border: 0;
  border-radius: 0;
  background: none;
  grid-auto-rows: minmax(0, 1fr);
}

body[data-role="guest"] #videoGridPC .video-tile-pc {
  border: 0;
  border-radius: 16px;
  background: #121317;
}

body[data-role="guest"] #videoGridPC:not(.presenting) .video-tile-pc {
  height: 100%;
  aspect-ratio: auto;
}

/* Sem borda no convidado: o contorno fino vem da primeira sombra */
body[data-role="guest"] #videoGridPC .video-tile-pc.speaking {
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, .95),
    0 0 14px rgba(255, 255, 255, .32),
    0 0 36px rgba(255, 255, 255, .14);
}

body[data-role="guest"] #videoGridPC .tile-avatar-pc {
  background: radial-gradient(circle at center, #1c1e24 0%, #121317 70%);
}

body[data-role="guest"] #videoGridPC .avatar-badge-circle {
  width: 96px;
  height: 96px;
  font-size: 2rem;
}

/* Legenda ao vivo sobre a parte de baixo do palco */
body[data-role="guest"] #liveCaptions {
  grid-area: stage;
  align-self: end;
  justify-self: center;
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  margin-bottom: 24px;
}

/* Barra da reunião (convidado e administrador): pílula centralizada com botões redondos só com ícone,
   desligado em vermelho, ativo em branco e "Sair" em pílula vermelha */
#pageMeeting .stage-toolbar {
  align-self: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
}

body[data-role="guest"] #pageMeeting .stage-toolbar {
  grid-area: bar;
}

#pageMeeting .stage-toolbar-group {
  gap: 10px;
}

#pageMeeting .stage-toolbar .btn {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: var(--text);
}

#pageMeeting .stage-toolbar .btn:not(.primary):not(.danger):hover:not(:disabled) {
  background: rgba(255, 255, 255, .16);
}

#pageMeeting .stage-toolbar .btn span {
  display: none;
}

#pageMeeting .stage-toolbar .btn svg {
  width: 20px;
  height: 20px;
}

#pageMeeting .stage-toolbar .btn.danger {
  background: var(--danger-strong);
  color: #fff;
}

#pageMeeting .stage-toolbar .btn.danger:hover:not(:disabled) {
  background: #d93a2b;
}

#pageMeeting .stage-toolbar .btn.primary {
  background: var(--accent);
  color: var(--accent-ink);
}

#pageMeeting .stage-toolbar .btn.primary:hover:not(:disabled) {
  background: #E4E5E8;
}

#pageMeeting #tbBtnLeave {
  width: 68px;
  border-radius: 999px;
}

/* Gravando: vira pílula vermelha clara com o tempo ("Parar 01:23") */
#pageMeeting #tbBtnRecord.recording {
  width: auto;
  gap: 8px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(229, 72, 77, .22);
  color: #ff8b8e;
}

#pageMeeting #tbBtnRecord.recording:hover:not(:disabled) {
  background: rgba(229, 72, 77, .32);
}

#pageMeeting #tbBtnRecord.recording span {
  display: inline;
  font-variant-numeric: tabular-nums;
}

/* Celular: a barra do administrador tem sete botões; menores para caber numa linha (quebra em telas bem estreitas) */
@media (max-width: 600px) {
  body[data-role="admin"] #pageMeeting .stage-toolbar {
    gap: 6px;
    padding: 6px;
    border-radius: 25px;
  }

  body[data-role="admin"] #pageMeeting .stage-toolbar-group {
    gap: 6px;
  }

  body[data-role="admin"] #pageMeeting .stage-toolbar .btn {
    width: 38px;
    height: 38px;
  }

  body[data-role="admin"] #pageMeeting #tbBtnLeave {
    width: 52px;
  }

  body[data-role="admin"] #pageMeeting #tbBtnRecord.recording {
    width: 38px;
    padding: 0;
  }

  body[data-role="admin"] #pageMeeting #tbBtnRecord.recording span {
    display: none;
  }
}

/* Painéis */
body[data-role="guest"] #pageMeeting .call-actions {
  grid-area: actions;
  display: flex;
  align-self: center;
  justify-self: end;
  gap: 6px;
}

body[data-role="guest"] #pageMeeting .meeting-side-card {
  grid-area: side;
  display: none;
  height: auto;
  min-height: 0;
}

body[data-role="guest"] #pageMeeting[data-panel] .meeting-side-card {
  display: flex;
}

body[data-role="guest"] #pageMeeting .side-tabs-header {
  display: none;
}

body[data-role="guest"] .side-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -4px -4px 0 4px;
}

body[data-role="guest"] .side-panel-head b {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
}

@media (max-width: 768px) {
  body[data-role="guest"][data-page="meeting"] .content {
    padding: 8px 8px 0;
  }

  body[data-role="guest"][data-page="meeting"] .toast-container {
    bottom: 84px;
  }

  body[data-role="guest"] #pageMeeting.active,
  body[data-role="guest"] #pageMeeting[data-panel].active {
    height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "stage"
      "bar";
  }

  /* Avisos no canto de cima do vídeo; botões dos painéis no outro canto */
  body[data-role="guest"] #pageMeeting .page-head {
    grid-area: stage;
    z-index: 5;
    align-self: start;
    justify-self: start;
    max-width: calc(100% - 160px);
    margin: 10px;
  }

  body[data-role="guest"] #meetingTitleHead,
  body[data-role="guest"] #meetingTimerPill {
    display: none;
  }

  body[data-role="guest"] .meeting-head-meta {
    flex-wrap: wrap;
  }

  body[data-role="guest"] #pageMeeting .call-actions {
    grid-area: stage;
    z-index: 5;
    align-self: start;
    justify-self: end;
    margin: 8px;
    border-radius: 999px;
    background: rgba(6, 7, 8, .6);
    backdrop-filter: blur(12px);
  }

  body[data-role="guest"] #videoGridPC:not(.presenting)[data-count="2"] {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  body[data-role="guest"] #videoGridPC:not(.presenting):not([data-count="1"]):not([data-count="2"]) {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    grid-auto-rows: minmax(0, 1fr);
  }

  body[data-role="guest"] #pageMeeting .stage-toolbar {
    margin: 10px 0;
    justify-self: center;
    flex-wrap: nowrap;
  }

  body[data-role="guest"] #pageMeeting .stage-toolbar-group {
    flex-wrap: nowrap;
  }

  body[data-role="guest"] #pageMeeting .stage-toolbar .btn {
    width: 44px;
    height: 44px;
  }

  body[data-role="guest"] #pageMeeting #tbBtnLeave {
    width: 60px;
  }

  /* Painel em tela cheia sobre a sala */
  body[data-role="guest"] #pageMeeting[data-panel] .meeting-side-card {
    position: fixed;
    inset: 0;
    z-index: 90;
    border: 0;
    border-radius: 0;
    background: #0b0c0e;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   TELA COMPARTILHADA: QUADRO PRÓPRIO NA PROPORÇÃO DA TELA, EM DESTAQUE
   ========================================================================== */
/* O quadro é a célula; a moldura dentro dele tem a proporção da tela e o maior tamanho que cabe */
.screen-tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
}

.screen-frame {
  --ratio: var(--screen-ratio, 1.7778);
  position: relative;
  /* Navegador sem unidades de contêiner (Safari antes do iOS 16) fica com a primeira */
  width: 100%;
  width: min(100cqw, 100cqh * var(--ratio));
  aspect-ratio: var(--ratio);
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #000;
}

body[data-role="guest"] .screen-frame {
  border: 0;
  border-radius: 16px;
}

.screen-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.screen-frame:fullscreen {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
}

/* Safari do iPad (seletor separado: um seletor desconhecido anularia a regra inteira) */
.screen-frame:-webkit-full-screen {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
}

.screen-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  gap: 8px;
  align-items: center;
}

.screen-btn,
.screen-fullscreen {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(6, 7, 8, .6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}

.screen-btn:hover,
.screen-fullscreen:hover {
  background: rgba(6, 7, 8, .85);
  transform: scale(1.05);
}

.screen-btn:active,
.screen-fullscreen:active {
  transform: scale(0.95);
}

.screen-btn svg,
.screen-fullscreen svg {
  width: 18px;
  height: 18px;
}

/* Alguém compartilhando: a tela em destaque e as pessoas numa coluna ao lado */
#videoGridPC.presenting {
  display: flex;
  flex-flow: column wrap;
  align-content: flex-start;
  justify-content: center;
  overflow: hidden;
}

#videoGridPC.presenting > * {
  flex: none;
  width: 240px;
  height: auto;
  aspect-ratio: 16 / 9;
}

#videoGridPC.presenting > .screen-tile.main,
#videoGridPC.presenting > .focused-tile.main {
  order: -1;
  width: calc(100% - 250px);
  height: 100%;
  aspect-ratio: auto;
}

#videoGridPC.presenting > .focused-tile.main {
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.tile-pin-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.15s ease, transform 0.15s ease;
  z-index: 15;
}

.video-tile-pc:hover .tile-pin-btn,
.video-tile-pc:focus-within .tile-pin-btn,
.tile-pin-btn.active {
  opacity: 1;
}

.tile-pin-btn:hover {
  background: rgba(40, 40, 45, 0.95);
  transform: scale(1.08);
}

.tile-pin-btn.active {
  background: #ffffff;
  color: #111318;
  border-color: #ffffff;
}

.tile-pin-btn svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 768px) {
  .tile-pin-btn {
    opacity: 0.85;
    width: 34px;
    height: 34px;
  }
}

/* Quadros das pessoas ficam pequenos: iniciais no tamanho padrão também para o convidado */
body[data-role] #videoGridPC.presenting .avatar-badge-circle {
  width: 56px;
  height: 56px;
  font-size: 1.4rem;
}

/* Tablet e celular: a tela em cima, na largura toda, e as pessoas embaixo em duas colunas */
@media (max-width: 1080px) {
  #videoGridPC.presenting {
    display: grid;
    overflow: visible;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
  }

  #videoGridPC.presenting > * {
    width: auto;
  }

  body[data-role] #videoGridPC.presenting .avatar-badge-circle {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }

  #videoGridPC.presenting > .screen-tile.main {
    grid-column: 1 / -1;
    width: auto;
    height: auto;
    container-type: inline-size;
  }

  /* A página rola: tela em pé (9:16) limitada a 65% da altura */
  #videoGridPC.presenting > .screen-tile.main .screen-frame {
    width: min(100cqw, 65svh * var(--ratio));
  }

  /* Convidado: o palco tem altura fixa e a tela ocupa o que sobra acima das pessoas */
  body[data-role="guest"] #videoGridPC.presenting {
    grid-template-rows: minmax(0, 1fr);
    grid-auto-rows: auto;
  }

  /* A altura vem da linha da grade; o mínimo garante a tela visível no Safari, que pode não calcular a linha
     (com container-type: size o quadro não tem altura própria) */
  body[data-role="guest"] #videoGridPC.presenting > .screen-tile.main {
    container-type: size;
    min-height: 40vh;
    min-height: 40svh;
  }

  body[data-role="guest"] #videoGridPC.presenting > .screen-tile.main .screen-frame {
    width: min(100cqw, 100cqh * var(--ratio));
  }
}

/* ==========================================================================
   MINI CARD DA REUNIÃO: fora da sala, quem está falando (sem contorno de fala)
   ========================================================================== */
.mini-call {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  width: 280px;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0d0e11;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  cursor: pointer;
  animation: mini-call-in .35s cubic-bezier(.16, 1, .3, 1);
  transition: transform .2s ease, border-color .2s ease;
}

.mini-call:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .22);
}

@keyframes mini-call-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to { opacity: 1; transform: none; }
}

.mini-call-face {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .45s ease;
}

.mini-call-face.active {
  opacity: 1;
}

.mini-call-face video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mini-call-face video.local {
  transform: scaleX(-1);
}

.mini-call-avatar {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111216;
}

.mini-call-name {
  position: absolute;
  left: 12px;
  bottom: 9px;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

/* Avisos sobem para não ficar atrás do card */
body:has(.mini-call:not([hidden])) .toast-container {
  bottom: 196px;
}

@media (max-width: 768px) {
  .mini-call {
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: 168px;
    border-radius: 12px;
  }

  .mini-call .avatar-badge-circle {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }

  .mini-call-name {
    left: 10px;
    bottom: 7px;
    font-size: 12px;
  }

  body:has(.mini-call:not([hidden])) .toast-container {
    bottom: calc(76px + 95px + 12px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mini-call,
  .mini-call-face {
    animation: none;
    transition: none;
  }
}

/* Desktop: páginas com largura máxima e centralizadas (a sala de reunião e workspace usam a tela toda) */
.content > .page:not(#pageMeeting):not(#pageWorkspace) {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.content > #pageSettings {
  max-width: 800px;
}

#pageWorkspace {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  flex: 1;
  min-height: 0;
}

.btn.pill {
  border-radius: 999px;
  padding: 10px 22px;
}

.btn.block.pill {
  min-height: 46px;
}

/* Aviso sobre a prévia: câmera ainda não aberta (painel) ou bloqueada pelo navegador */
.preview-gate {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: #121317;
}

.preview-gate b {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 500;
}

.preview-gate small {
  max-width: 380px;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.5;
}

/* ==========================================================================
   ENTRADA NA REUNIÃO: VÍDEO À ESQUERDA, DADOS À DIREITA, SEM CARTÕES
   ========================================================================== */
#pageLobby.active {
  min-height: 100%;
  justify-content: center;
}

.lobby-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 56px;
  align-items: center;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 0;
}

.media-preview {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.media-preview .preview-frame {
  width: 100%;
  border: 0;
  border-radius: 16px;
  background: #121317;
}

/* Espaço para os botões redondos embaixo do aviso */
.media-preview .preview-gate {
  padding-bottom: 88px;
}

.preview-toggles {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 4;
  display: flex;
  gap: 14px;
  transform: translateX(-50%);
}

.preview-toggle {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(20, 21, 24, .55);
  backdrop-filter: blur(12px);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.preview-toggle:hover:not(:disabled) {
  background: rgba(44, 45, 50, .75);
}

.preview-toggle.primary,
.preview-toggle.active {
  background: #ffffff;
  border-color: #ffffff;
  color: #111318;
}

.preview-toggle.primary svg,
.preview-toggle.active svg {
  stroke: #111318;
}

.preview-toggle.primary:hover:not(:disabled),
.preview-toggle.active:hover:not(:disabled) {
  background: #e4e5e8;
  border-color: #e4e5e8;
  color: #111318;
}

.preview-toggle.off {
  border-color: transparent;
  background: var(--danger-strong);
}

.preview-toggle.off:hover:not(:disabled) {
  background: #d83a2b;
}

.preview-toggle:disabled {
  cursor: not-allowed;
  opacity: .6;
}

.preview-toggle svg {
  width: 22px;
  height: 22px;
}

/* Aparelhos em pílulas com contorno */
/* As duas pílulas dividem a largura do vídeo em partes iguais */
.device-pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.device-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  height: 40px;
  padding: 0 4px 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--dim);
  transition: border-color .15s ease;
}

.device-pill:hover {
  border-color: rgba(255, 255, 255, .2);
}

.device-pill > svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.device-pill .menu-escolha {
  flex: 1;
  width: auto;
  min-width: 0;
}

.device-pill .menu-gatilho,
.device-pill .menu-gatilho:focus-visible,
.device-pill .menu-escolha.aberto .menu-gatilho {
  height: 36px;
  padding: 0 10px 0 6px;
  border: 0;
  border-radius: 999px;
  background: none;
  box-shadow: none;
}

/* Coluna dos dados */
/* Mesma largura dos campos do login (cartão de 420 px menos bordas e espaço interno) */
.lobby-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-self: center;
  width: 100%;
  max-width: 366px;
  min-width: 0;
  text-align: center;
}

/* Marca do login no topo e, embaixo, o nome da reunião */
.lobby-side .lobby-brand {
  justify-content: center;
  margin-bottom: 6px;
}

.lobby-meeting-title {
  margin: 0;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

.lobby-subtitle {
  margin: 0 0 22px;
  color: var(--dim);
  font-size: 13.5px;
}

.lobby-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

/* Aceite com o aviso de privacidade dentro do mesmo cartão (o ícone abre o texto) */
.consent-card {
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .03);
  transition: border-color .15s ease, background .15s ease;
}

.consent-card:has(input:checked) {
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .07);
}

.consent-row {
  display: flex;
  align-items: center;
}

.consent-card .check-row,
.consent-card .check-row:has(input:checked) {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
}

.consent-info {
  flex: none;
  width: 36px;
  height: 36px;
  margin-right: 4px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--dim);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.consent-info:hover,
.consent-info[aria-expanded="true"] {
  background: var(--glass-3);
  color: var(--text);
}

.consent-info svg {
  width: 17px;
  height: 17px;
}

/* Alinhado ao texto do aceite (depois da caixa de marcar) */
.consent-text {
  margin: 0;
  padding: 0 14px 12px 42px;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.5;
}

/* Celular: sem escolha de aparelho nas prévias (o sistema escolhe câmera e microfone) */
@media (max-width: 768px) {
  .device-pills {
    display: none;
  }
}

@media (max-width: 900px) {
  .lobby-layout {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 560px;
    padding: 0;
  }

  .lobby-meeting-title {
    font-size: 17px;
  }
}

@media (max-width: 600px) {
  .preview-toggle {
    width: 46px;
    height: 46px;
  }

  .device-pills {
    grid-template-columns: 1fr;
  }

  /* Celular vertical: prévia em 3:4 aproveitando o campo de visão completo da câmera frontal do iPhone */
  .preview-frame,
  .media-preview .preview-frame {
    aspect-ratio: 3 / 4;
    max-height: 52vh;
    max-width: 100%;
    margin: 0 auto;
  }

  .media-preview .preview-gate {
    gap: 10px;
    padding: 16px 16px 76px;
  }

  .preview-gate b {
    font-size: 16px;
  }
}

/* Lista de pessoas: microfone de cada participante (organizador desliga para todos) */
.peer-mute {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.peer-mute svg {
  width: 16px;
  height: 16px;
}

.peer-mute:disabled,
.peer-mute:disabled:hover {
  background: none;
  color: var(--danger);
  cursor: default;
}

/* ==========================================================================
   SALA DE ESPERA
   ========================================================================== */

/* Convidado: no lugar do formulário, o pedido enviado e o botão de desistir */
.lobby-waiting {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.lobby-waiting-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--glass-2);
}

.lobby-waiting-card svg {
  width: 20px;
  height: 20px;
  color: var(--text);
}

.lobby-waiting-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lobby-waiting-text b {
  font-size: 13.5px;
  font-weight: 600;
}

.lobby-waiting-text small {
  color: var(--dim);
  font-size: 12px;
}

/* Organizador: pedidos no topo da aba Pessoas */
.lobby-requests {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lobby-requests .list {
  margin-bottom: 6px;
}

.lobby-request {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .07);
  animation: lobby-chega .25s ease;
}

.lobby-request .list-side .btn {
  min-height: 28px;
}

@keyframes lobby-chega {
  from { opacity: 0; transform: translateY(-4px); }
}

/* Aviso que abre a aba Pessoas ao ser tocado */
.toast-pc.clickable {
  pointer-events: auto;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .lobby-request {
    animation: none;
  }
}

/* ==========================================================
   EFEITOS VISUAIS E PLANOS DE FUNDO (GOOGLE MEET STYLE)
   ========================================================== */
.effects-drawer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.effects-drawer[hidden] {
  display: none !important;
}

.effects-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.effects-drawer:not([hidden]) .effects-drawer-backdrop {
  opacity: 1;
}

.effects-drawer-content {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 100%;
  background: #18191d;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.effects-drawer:not([hidden]) .effects-drawer-content {
  transform: translateX(0);
}

.effects-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.effects-drawer-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.effects-drawer-title svg {
  width: 20px;
  height: 20px;
  color: #4f8bf9;
}

.effects-drawer-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.effects-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.effects-section-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9aa0a6;
}

/* Grade dos 4 botões de desfoque e upload */
.effects-pill-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.effect-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid transparent;
  color: #e8eaed;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.effect-card:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  transform: translateY(-2px);
}

.effect-card.active {
  border-color: #1a73e8;
  background: rgba(26, 115, 232, 0.18);
  color: #fff;
}

.effect-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  display: grid;
  place-items: center;
}

.effect-card.active .effect-icon-wrap {
  background: #1a73e8;
  color: #fff;
}

.effect-label {
  font-size: 11.5px;
  font-weight: 500;
  text-align: center;
}

/* Grade de imagens de fundo profissionais */
.effects-presets-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.effect-preset-card {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  background: #111;
  transition: all 0.2s ease;
}

.effect-preset-card:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.effect-preset-card.active {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.5);
}

.effect-preset-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.effect-preset-name {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  padding: 6px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 600px) {
  .effects-drawer {
    align-items: flex-end;
    justify-content: center;
  }

  .effects-drawer-content {
    max-width: 100%;
    height: 78vh;
    max-height: 82vh;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.7);
  }

  .effects-drawer:not([hidden]) .effects-drawer-content {
    transform: translateY(0);
  }

  .effects-drawer-head {
    padding: 14px 16px;
  }

  .effects-drawer-body {
    padding: 16px;
    gap: 20px;
  }

  .effects-presets-grid {
    gap: 8px;
  }
}

/* ==========================================================================
   CÂMERA TRASEIRA (DESESPELHAMENTO) E ROTAÇÃO DO CELULAR (HORIZONTAL/PAISAGEM)
   ========================================================================== */
.video-tile-pc[data-facing="environment"] video.local,
.video-tile-pc video.local.unmirrored,
.preview-frame[data-facing="environment"] video,
.preview-frame video.unmirrored {
  transform: scaleX(1) !important;
}

/* Celular girado de lado (Paisagem / Landscape) */
@media (max-width: 950px) and (orientation: landscape) {
  .app {
    height: 100dvh;
  }

  #pageMeeting,
  #pageMeeting.active,
  body[data-role="guest"] #pageMeeting.active {
    height: 100%;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "stage"
      "bar" !important;
  }

  .video-stage-column,
  .meeting-split-container {
    height: 100%;
    min-height: 0;
    grid-template-columns: 1fr !important;
  }

  #videoGridPC,
  body[data-role="guest"] #videoGridPC {
    height: 100%;
    max-height: calc(100vh - 60px);
    padding: 4px;
    gap: 6px;
  }

  /* 2 participantes lado a lado em widescreen */
  #videoGridPC:not(.presenting)[data-count="2"],
  body[data-role="guest"] #videoGridPC:not(.presenting)[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
  }

  #videoGridPC:not(.presenting)[data-count="3"],
  #videoGridPC:not(.presenting)[data-count="4"],
  body[data-role="guest"] #videoGridPC:not(.presenting):not([data-count="1"]):not([data-count="2"]) {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    grid-template-rows: 1fr !important;
  }

  #pageMeeting .stage-toolbar,
  body[data-role="guest"] #pageMeeting .stage-toolbar {
    margin: 4px 0 !important;
    padding: 4px 8px !important;
  }

  #pageMeeting .stage-toolbar .btn,
  body[data-role="guest"] #pageMeeting .stage-toolbar .btn {
    width: 38px !important;
    height: 38px !important;
  }

  #pageMeeting #tbBtnLeave,
  body[data-role="guest"] #pageMeeting #tbBtnLeave {
    width: 50px !important;
  }
}

/* ==========================================================================
   ENQUADRAMENTO NO CELULAR VERTICAL (RETRATO) SEM CROP EXCESSIVO
   ========================================================================== */
@media (max-width: 768px) and (orientation: portrait), (max-width: 600px) {
  #videoGridPC {
    height: 100% !important;
    max-height: calc(100dvh - 120px) !important;
    gap: 8px !important;
    padding: 6px !important;
    align-content: center !important;
  }

  /* 1 pessoa: aproveita a tela vertical em proporção de câmera de celular (sem cropar a cabeça/peito) */
  #videoGridPC:not(.presenting)[data-count="1"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    height: 100% !important;
  }

  #videoGridPC:not(.presenting)[data-count="1"] .video-tile-pc {
    height: 100% !important;
    max-height: calc(100dvh - 140px) !important;
    aspect-ratio: auto !important;
  }

  /* 2 pessoas: empilhadas verticalmente (uma em cima e outra embaixo) */
  #videoGridPC:not(.presenting)[data-count="2"],
  body[data-role="guest"] #videoGridPC:not(.presenting)[data-count="2"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    height: 100% !important;
  }

  #videoGridPC:not(.presenting)[data-count="2"] .video-tile-pc,
  body[data-role="guest"] #videoGridPC:not(.presenting)[data-count="2"] .video-tile-pc {
    height: 100% !important;
    max-height: 100% !important;
    aspect-ratio: auto !important;
  }

  /* 3 ou 4 pessoas: grade 2x2 com proporções verticais */
  #videoGridPC:not(.presenting)[data-count="3"],
  #videoGridPC:not(.presenting)[data-count="4"],
  body[data-role="guest"] #videoGridPC:not(.presenting):not([data-count="1"]):not([data-count="2"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    height: 100% !important;
  }

  #videoGridPC:not(.presenting):not([data-count="1"]):not([data-count="2"]) .video-tile-pc {
    height: 100% !important;
    max-height: 100% !important;
    aspect-ratio: auto !important;
  }
}

/* ==========================================================================
   LEADNODE WORKSPACES (FASE 1: SIDEBAR, TREE, CANAIS & VIEW)
   ========================================================================== */

/* Cabeçalho da seção com botão de ação (+) */
.nav-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 12px 6px;
}

.nav-section-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dimmer);
}

.nav-section-action {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all .15s ease;
}

.nav-section-action:hover {
  background: var(--glass-2);
  color: var(--text);
}

.nav-section-action svg {
  width: 14px;
  height: 14px;
}

/* Lista de Workspaces */
.workspaces-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ws-empty-hint {
  padding: 10px 12px;
  font-size: 11px;
  color: var(--dimmer);
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.35;
}

.ws-empty-hint .link-btn {
  color: var(--text);
  font-weight: 600;
  font-size: 11px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Item de Workspace Individual */
.workspace-nav-item {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  user-select: none;
}

.workspace-nav-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 4px;
  border-radius: 8px;
  color: var(--dim);
  transition: background .15s ease, color .15s ease;
}

.workspace-nav-header:hover {
  background: var(--glass-2);
  color: var(--text);
}

.workspace-nav-header.active {
  color: var(--text);
}

.workspace-chevron {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  border-radius: 4px;
  padding: 0;
  flex: none;
  transition: transform .15s ease, background .15s ease;
}

.workspace-chevron:hover {
  background: rgba(255, 255, 255, .08);
}

.workspace-chevron svg {
  width: 13px;
  height: 13px;
}

.workspace-nav-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.workspace-avatar {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--line-soft);
  color: var(--text);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
}

.workspace-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.workspace-nav-name {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-menu-btn {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--dimmer);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
  flex: none;
}

.workspace-nav-header:hover .workspace-menu-btn {
  opacity: 1;
}

.workspace-menu-btn:hover {
  background: rgba(255, 255, 255, .1);
  color: var(--text);
}

.workspace-menu-btn svg {
  width: 13px;
  height: 13px;
}

/* Conteúdo interno do Workspace (Categorias e Canais) */
.workspace-nav-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 800px;
  opacity: 1;
  transition: max-height .22s cubic-bezier(0.4, 0, 0.2, 1), opacity .18s ease;
  padding-left: 6px;
}

.workspace-nav-content.collapsed {
  max-height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Categorias */
.workspace-category-group {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}

.workspace-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dimmer);
  padding: 4px 6px 4px 10px;
  user-select: none;
  border-radius: 4px;
  transition: color .12s ease;
}

.workspace-category-main {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}

.workspace-category-main:hover {
  color: var(--text);
}

.workspace-category-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  opacity: .7;
}

.workspace-category-chevron svg {
  width: 12px;
  height: 12px;
}

.workspace-category-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-category-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity .15s ease;
}

.workspace-category-header:hover .workspace-category-actions,
.workspace-category-actions:focus-within {
  opacity: 1;
}

.category-action-btn {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .12s, background .12s;
}

.category-action-btn:hover {
  background: var(--glass-2);
  color: var(--text);
}

.category-action-btn svg {
  width: 14px;
  height: 14px;
}

.workspace-channels-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.workspace-channels-list.collapsed {
  display: none;
}

/* Canal Individual */
.channel-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 6px 3px 12px;
  border-radius: 7px;
  background: transparent;
  color: var(--dim);
  font-size: 13px;
  font-weight: 600;
  transition: background .12s ease, color .12s ease;
  width: 100%;
}

.channel-nav-item:hover {
  background: var(--glass-2);
  color: var(--text);
}

.channel-nav-item[aria-current="page"] {
  background: var(--glass-3);
  color: var(--text);
  font-weight: 600;
}

.channel-nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  bottom: 6px;
  width: 2.5px;
  border-radius: 2px;
  background: var(--accent);
}

.channel-nav-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  padding: 3px 0;
  outline: none;
}

.channel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  flex: none;
  opacity: .75;
}

.channel-icon svg {
  width: 14px;
  height: 14px;
}

.channel-hash {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  opacity: .8;
}

.channel-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-size: 13px;
  font-weight: 600;
}

.channel-action-btn {
  background: none;
  border: 0;
  color: var(--dimmer);
  cursor: pointer;
  padding: 3px 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .12s, color .12s, background .12s;
  flex: none;
  margin-left: 4px;
}

.channel-nav-item:hover .channel-action-btn,
.channel-action-btn:focus-within {
  opacity: 1;
}

.channel-action-btn:hover {
  color: var(--text);
  background: var(--glass-3);
}

.channel-action-btn svg {
  width: 12px;
  height: 12px;
}

/* Popover Menu Contextual */
.leadnode-popover-menu {
  position: fixed;
  z-index: 9999;
  min-width: 180px;
  padding: 5px;
  border-radius: 10px;
  background: rgba(18, 20, 24, .95);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .55);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.popover-header {
  padding: 6px 10px 4px;
  font-size: 11px;
  color: var(--dimmer);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 4px;
}

.popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease;
  width: 100%;
}

.popover-item svg {
  width: 14px;
  height: 14px;
  opacity: .7;
}

.popover-item:hover {
  background: var(--glass-2);
}

.popover-item.danger {
  color: var(--danger);
}

.popover-item.danger:hover {
  background: rgba(229, 72, 77, .12);
}

/* Modal de Criação e Edição de Workspace / Canais */
.ws-modal-box {
  max-width: 460px;
}

.ws-modal-box .foto-acoes,
.ws-modal-box .dialogo-acoes {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  margin-top: 16px;
}

.ws-modal-box .foto-acoes .foto-btn,
.ws-modal-box .dialogo-acoes .foto-btn {
  flex: 0 0 auto;
  min-width: 90px;
  padding: 0 16px;
  white-space: nowrap;
}

/* Personalizar workspace: ícone clicável ao lado do texto de ajuda */
/* Precisa de mais especificidade que ".foto-modal-corpo > div", que empilha os filhos em coluna */
.foto-modal-corpo > .ws-icon-editor {
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.ws-icon-preview {
  position: relative;
  width: 64px;
  height: 64px;
  flex: none;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--glass-2);
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}

.ws-icon-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ws-icon-preview-edit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  opacity: 0;
  transition: opacity .15s ease;
}

.ws-icon-preview:hover .ws-icon-preview-edit,
.ws-icon-preview:focus-visible .ws-icon-preview-edit {
  opacity: 1;
}

.ws-icon-preview-edit svg {
  width: 18px;
  height: 18px;
}

.ws-icon-hint {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--dim);
}

.ws-type-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}

.ws-type-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--glass-1);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.ws-type-card:hover {
  border-color: var(--line-soft);
  background: var(--glass-2);
}

.ws-type-card.selected {
  border-color: var(--accent);
  background: var(--glass-3);
}

.ws-type-card input[type="radio"] {
  margin-top: 2px;
  accent-color: var(--accent);
}

.ws-type-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ws-type-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ws-type-title svg {
  width: 14px;
  height: 14px;
}

.ws-type-hint {
  font-size: 11px;
  color: var(--dim);
  line-height: 1.35;
}

.ws-input-prefix-box {
  display: flex;
  align-items: center;
  position: relative;
}

.ws-input-prefix {
  position: absolute;
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--dim);
  pointer-events: none;
}

.ws-input-prefix svg {
  width: 15px;
  height: 15px;
}

.ws-input-prefix-box input {
  padding-left: 32px !important;
}

/* ==========================================================================
   VIEW DO WORKSPACE (PÁGINA PRINCIPAL DO CANAL)
   ========================================================================== */
.ws-page-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: transparent;
}

.ws-header {
  height: 48px;
  min-height: 48px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(8, 9, 11, .25);
  backdrop-filter: var(--blur);
}

.ws-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ws-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dim);
}

.ws-header-icon svg {
  width: 18px;
  height: 18px;
}

.ws-head-hash {
  font-size: 18px;
  font-weight: 700;
  color: var(--dim);
}

.ws-header-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

/* Nome do workspace › ícone e nome do canal */
.ws-header-workspace {
  font-size: 13px;
  font-weight: 600;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.ws-header-sep {
  display: flex;
  align-items: center;
  color: var(--dimmer);
  margin: 0 -2px;
}

.ws-header-sep svg {
  width: 14px;
  height: 14px;
}

.btn-icon-subtle {
  background: none;
  border: 0;
  color: var(--dimmer);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .12s, background .12s;
  flex: none;
}

.btn-icon-subtle:hover {
  color: var(--text);
  background: var(--glass-3);
}

.btn-icon-subtle svg {
  width: 13px;
  height: 13px;
}

.ws-content-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 24px;
}

.ws-welcome-stage {
  margin: auto;
  max-width: 480px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px 20px;
}

.ws-welcome-avatar {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--glass-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.ws-welcome-avatar svg {
  width: 26px;
  height: 26px;
}

.ws-welcome-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--dim);
}

.ws-welcome-desc b {
  color: var(--text);
  font-weight: 600;
}

.ws-welcome-actions {
  margin-top: 6px;
  display: flex;
  gap: 10px;
}

/* ==========================================================================
   CHAT EM TEMPO REAL DOS CANAIS DE TEXTO (FASE 3)
   ========================================================================== */
.ws-chat-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.ws-chat-layout.drop-active {
  background: rgba(0, 209, 138, .03);
}

.ws-messages-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ws-chat-intro {
  margin-top: auto;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 4px;
}

.ws-chat-intro-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--glass-3);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.ws-chat-intro-avatar .channel-hash {
  font-size: 34px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ws-chat-intro-avatar .channel-hash svg {
  width: 32px;
  height: 32px;
}

.ws-chat-intro-title {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0 0 6px 0;
}

.ws-chat-intro-subtitle {
  font-size: 14px;
  color: var(--dim);
  margin: 0 0 14px 0;
}

.ws-intro-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--glass-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 12px;
  color: var(--text);
  cursor: pointer;
  transition: all .15s ease;
}

.ws-intro-edit-btn:hover {
  background: var(--glass-3);
  color: #fff;
}

.ws-intro-edit-btn svg {
  width: 14px;
  height: 14px;
}

.ws-messages-feed {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Linha de Mensagem */
.ws-message-row {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 6px 14px;
  border-radius: 8px;
  transition: background .12s ease;
}

.ws-message-row:hover {
  background: rgba(255, 255, 255, .03);
}

.ws-msg-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--glass-3);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  flex: none;
  overflow: hidden;
}

.ws-msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ws-msg-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ws-msg-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ws-msg-author {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.ws-msg-time {
  font-size: 11px;
  color: var(--dimmer);
}

.ws-msg-edited {
  font-size: 10px;
  color: var(--dimmer);
  font-style: italic;
}

.ws-msg-body {
  font-size: 13.5px;
  color: rgba(255, 255, 255, .9);
  line-height: 1.5;
  word-break: break-word;
}

.ws-msg-body code {
  background: rgba(255, 255, 255, .08);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
}

/* Anexos de Mensagem */
.ws-msg-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.ws-attachment-card {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--glass-2);
  border: 1px solid var(--line-soft);
  transition: background .12s, border-color .12s;
}

.ws-attachment-card:hover {
  background: var(--glass-3);
  border-color: var(--line);
}

.ws-attachment-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
}

.ws-attachment-link svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

.ws-attachment-name {
  font-weight: 500;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-attachment-size {
  color: var(--dimmer);
  font-size: 10.5px;
}

/* Reações */
.ws-msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.ws-reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--glass-2);
  border: 1px solid var(--line-soft);
  font-size: 11.5px;
  color: var(--dim);
  cursor: pointer;
  transition: all .12s ease;
}

.ws-reaction-pill:hover {
  border-color: var(--accent);
  color: var(--text);
}

.ws-reaction-pill.active {
  background: rgba(0, 209, 138, .12);
  border-color: rgba(0, 209, 138, .35);
  color: var(--accent);
}

.ws-reaction-count {
  font-size: 11px;
  font-weight: 600;
}

/* Barra de Ações Hover da Mensagem */
.ws-msg-actions {
  position: absolute;
  right: 12px;
  top: -12px;
  background: rgba(18, 20, 24, .95);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: flex;
  gap: 2px;
  padding: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
}

.ws-message-row:hover .ws-msg-actions,
.ws-msg-actions:focus-within {
  opacity: 1;
  pointer-events: auto;
}

.ws-msg-action-btn {
  background: none;
  border: 0;
  color: var(--dim);
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .12s, background .12s;
}

.ws-msg-action-btn:hover {
  background: var(--glass-3);
  color: var(--text);
}

.ws-msg-action-btn.danger:hover {
  background: rgba(229, 72, 77, .15);
  color: var(--danger);
}

.ws-msg-action-btn svg {
  width: 13px;
  height: 13px;
}

/* Área de Entrada do Chat */
.ws-chat-input-area {
  padding: 0 20px 20px;
  flex: none;
}

.ws-chat-input-form {
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 6px 12px;
  gap: 10px;
  transition: border-color .15s;
}

.ws-chat-input-form:focus-within {
  border-color: rgba(255, 255, 255, 0.25);
}

.ws-chat-textarea {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  resize: none;
  max-height: 180px;
  padding: 6px 0;
  font-family: inherit;
}

.ws-input-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .12s, background .12s;
  flex: none;
}

.ws-input-btn:hover {
  color: #fff;
  background: var(--glass-3);
}

.ws-input-btn svg {
  width: 18px;
  height: 18px;
}

.ws-chat-send-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
  transition: opacity .12s, transform .12s;
}

.ws-chat-send-btn:hover {
  opacity: .9;
  transform: scale(1.06);
}

.ws-chat-send-btn:disabled {
  opacity: .3;
  cursor: default;
  transform: none;
}

.ws-chat-send-btn svg {
  width: 16px;
  height: 16px;
}

.ws-input-send-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
}

.ws-input-send-btn svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

/* Anexos Pendentes na Caixa de Envio */
.ws-pending-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  background: var(--glass-1);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

.ws-pending-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--glass-3);
  font-size: 11px;
  color: var(--text);
  border: 1px solid var(--line-soft);
}

.ws-pending-chip svg {
  width: 12px;
  height: 12px;
  color: var(--accent);
}

.ws-pending-chip-del {
  background: none;
  border: 0;
  color: var(--dimmer);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}

.ws-pending-chip-del:hover {
  color: var(--danger);
}

.ws-pending-chip-del svg {
  width: 11px;
  height: 11px;
}

/* Seletor de Reação Rápida */
.ws-reaction-picker {
  min-width: unset;
  padding: 4px;
}

.ws-reaction-picker-grid {
  display: flex;
  gap: 4px;
}

.ws-reaction-opt {
  background: none;
  border: 0;
  font-size: 17px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: transform .12s, background .12s;
}

.ws-reaction-opt:hover {
  transform: scale(1.25);
  background: var(--glass-3);
}

/* Edição Inline */
.ws-inline-edit {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ws-edit-textarea {
  width: 100%;
  background: var(--glass-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}

.ws-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

/* ==========================================================================
   SALAS DE VOZ E VÍDEO (FASE 4 WEBRTC)
   ========================================================================== */
.ws-voice-stage-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  flex: 1;
  padding: 0;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
}

.ws-voice-stage-wrapper {
  display: flex;
  height: 100%;
  width: 100%;
  flex: 1;
  min-height: 0;
  padding: 16px;
  gap: 0;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  justify-content: flex-end;
}

#wsVoiceGridContainer {
  flex: 1;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ws-voice-main {
  flex: 1;
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: flex 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.ws-voice-side-chat {
  width: 380px;
  max-width: 42vw;
  height: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: var(--blur);
  display: flex;
  flex-direction: column;
  flex: none;
  min-height: 0;
  z-index: 10;
  margin-left: 0;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.28s ease,
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              margin 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateX(0);
  opacity: 1;
}

.ws-voice-side-chat.open {
  margin-left: 14px;
}

.ws-voice-side-chat:not(.open) {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  opacity: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  border-width: 0 !important;
  transform: translateX(24px) !important;
  pointer-events: none !important;
  visibility: hidden;
}

@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.ws-side-chat-header {
  height: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--line-soft);
  flex: none;
}

.ws-side-chat-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.ws-side-chat-title svg {
  width: 16px;
  height: 16px;
  color: var(--dim);
}

.ws-side-chat-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ws-chat-layout.is-side-chat .ws-messages-scroll {
  padding: 14px 16px 4px;
}

.ws-chat-layout.is-side-chat .ws-chat-input-area {
  padding: 8px 14px 14px;
}

.ws-chat-layout.is-side-chat .ws-chat-intro {
  margin-bottom: 12px;
}

.ws-chat-layout.is-side-chat .ws-chat-intro-avatar {
  width: 50px;
  height: 50px;
  margin-bottom: 8px;
}

.ws-chat-layout.is-side-chat .ws-chat-intro-avatar svg {
  width: 24px;
  height: 24px;
}

.ws-chat-layout.is-side-chat .ws-chat-intro-title {
  font-size: 18px;
}

#wsVoiceGridContainer {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-height: 0;
  position: relative;
}

.ws-voice-room {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 0;
}

.ws-voice-grid {
  flex: 1;
  display: grid;
  gap: 12px;
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  padding: 0;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 1 usuário: aproveita 100% do espaço total disponível */
.ws-voice-grid[data-count="1"] {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.ws-voice-grid[data-count="1"] .ws-voice-tile {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

/* 2 usuários: divide 50% / 50% aproveitando 100% do espaço */
.ws-voice-grid[data-count="2"] {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
}

.ws-voice-grid[data-count="2"] .ws-voice-tile {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

/* 3 usuários: 2 em cima, 1 embaixo ocupando o espaço total */
.ws-voice-grid[data-count="3"] {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.ws-voice-grid[data-count="3"] .ws-voice-tile:last-child {
  grid-column: 1 / span 2;
  width: 100%;
}

/* 4 usuários: grade 2x2 ocupando 100% do espaço */
.ws-voice-grid[data-count="4"] {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* 5 ou 6 usuários: grade 3x2 */
.ws-voice-grid[data-count="5"],
.ws-voice-grid[data-count="6"] {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* 7 a 9 usuários: grade 3x3 */
.ws-voice-grid[data-count="7"],
.ws-voice-grid[data-count="8"],
.ws-voice-grid[data-count="9"] {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.ws-voice-tile {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #0d0e11;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .3s ease, box-shadow .3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Quem está falando: contorno branco fino com leve neon saindo dele (estética LeadNode Meet) */
.ws-voice-tile.is-speaking {
  border-color: rgba(255, 255, 255, .95);
  box-shadow:
    0 0 0 .5px rgba(255, 255, 255, .95),
    0 0 14px rgba(255, 255, 255, .32),
    0 0 36px rgba(255, 255, 255, .14);
}

.ws-voice-avatar-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ws-voice-avatar-stage .avatar-badge-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--glass-3);
  border: 1px solid var(--line);
  color: #fff;
  font-family: var(--display);
  font-size: 1.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.ws-voice-avatar-stage .avatar-badge-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ws-voice-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ws-voice-video.local {
  transform: scaleX(-1);
}

.ws-voice-pill {
  position: absolute;
  bottom: 14px;
  left: 16px;
  max-width: calc(100% - 32px);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}

.ws-voice-pill .tile-mic,
.ws-voice-pill .tile-screen-icon {
  display: flex;
  align-items: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

.ws-voice-pill .tile-mic svg {
  width: 16px;
  height: 16px;
}

.ws-voice-pill .tile-mic.muted {
  color: #ff4d4f;
  display: flex;
  align-items: center;
}

.ws-voice-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Card de compartilhamento de tela dedicado (janela extra) */
.ws-voice-tile.ws-voice-screen-tile {
  background: #050608;
  border-color: rgba(255, 255, 255, 0.14);
}

.ws-voice-tile.ws-voice-screen-tile .screen-share-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Botão de foco / maximizar janela individual */
.ws-tile-focus-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
  z-index: 10;
  padding: 0;
}

.ws-voice-tile:hover .ws-tile-focus-btn,
.ws-tile-focus-btn:focus-visible {
  opacity: 1;
  transform: scale(1);
}

.ws-tile-focus-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.ws-tile-focus-btn svg {
  width: 16px;
  height: 16px;
}

.ws-voice-tile.is-focused {
  grid-column: 1 / -1 !important;
  grid-row: 1 / -1 !important;
  z-index: 20 !important;
}

/* ==========================================================================
   Modo Apresentação / Compartilhamento de Tela (Estilo Meet - Tela grande + Lateral empilhada)
   ========================================================================== */
.ws-voice-grid.has-screen-share {
  display: flex !important;
  flex-direction: row !important;
  gap: 14px !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
}

/* Área principal: tela do jogo ou janela aberta grande */
.ws-voice-presentation-area {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: flex .3s cubic-bezier(0.16, 1, 0.3, 1), width .3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ws-voice-presentation-area .ws-voice-tile.ws-voice-screen-tile {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: var(--radius) !important;
  background: #000 !important;
  border: 1px solid var(--line) !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
  overflow: hidden !important;
}

.ws-voice-presentation-area .ws-voice-tile.ws-voice-screen-tile video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000 !important;
}

/* Telas secundárias dentro da coluna lateral de participantes */
.ws-voice-side-participants .ws-voice-tile.ws-voice-screen-tile {
  cursor: pointer !important;
  border: 1px solid var(--line-soft) !important;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease !important;
}

.ws-voice-side-participants .ws-voice-tile.ws-voice-screen-tile:hover {
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
  transform: translateY(-1px);
}

.ws-voice-side-participants .ws-voice-tile.ws-voice-screen-tile video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  background: #000 !important;
  border-radius: 9px !important;
}

/* Coluna Lateral de Usuários empilhados na direita (igual ao Meet da reunião) */
.ws-voice-side-strip {
  flex: 0 0 240px !important;
  width: 240px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: width .28s cubic-bezier(0.16, 1, 0.3, 1), margin .28s cubic-bezier(0.16, 1, 0.3, 1), opacity .22s ease !important;
}

/* Cabeçalho da coluna lateral com título e botão de recolher */
.ws-side-strip-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 6px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.ws-side-strip-toggle-btn {
  background: transparent;
  border: 0;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease;
}

.ws-side-strip-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.ws-side-strip-toggle-btn svg {
  width: 16px;
  height: 16px;
}

/* Lista vertical dos participantes empilhados */
.ws-voice-side-participants {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding-right: 2px;
}

.ws-voice-side-participants::-webkit-scrollbar {
  width: 4px;
}
.ws-voice-side-participants::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

/* Cada card de participante na coluna lateral */
.ws-voice-side-participants .ws-voice-tile {
  flex: 0 0 135px !important;
  width: 100% !important;
  height: 135px !important;
  max-height: 135px !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 10px !important;
}

.ws-voice-side-participants .ws-voice-avatar-stage .avatar-badge-circle {
  width: 52px !important;
  height: 52px !important;
  font-size: 1.3rem !important;
}

.ws-voice-side-participants .ws-voice-pill {
  font-size: 13px !important;
  bottom: 8px !important;
  left: 10px !important;
  gap: 6px !important;
}

.ws-voice-side-participants .ws-voice-pill .tile-mic svg {
  width: 14px !important;
  height: 14px !important;
}

/* Estado Recolhido da Coluna Lateral (Foco 100% na Tela Grande) */
.ws-voice-side-strip.collapsed,
.ws-voice-grid.strip-collapsed .ws-voice-side-strip {
  flex: 0 0 0px !important;
  width: 0px !important;
  margin-left: -14px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Botão flutuante para restaurar a coluna de participantes */
.ws-strip-expand-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  display: none;
  align-items: center;
  gap: 8px;
  background: rgba(15, 17, 21, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  z-index: 25;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: all .2s ease;
}

.ws-strip-expand-btn:hover {
  background: rgba(30, 34, 42, 0.95);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  transform: translateY(-1px);
}

.ws-strip-expand-btn.visible {
  display: flex !important;
}

.ws-strip-expand-btn svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 900px) {
  .ws-voice-grid.has-screen-share {
    flex-direction: column !important;
  }
  .ws-voice-side-strip {
    flex: none !important;
    width: 100% !important;
    height: 140px !important;
  }
  .ws-voice-side-participants {
    flex-direction: row !important;
  }
  .ws-voice-side-participants .ws-voice-tile {
    flex: 0 0 160px !important;
    width: 160px !important;
    height: 100% !important;
  }
}

.ws-voice-footer {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  pointer-events: auto;
  z-index: 15;
  padding: 14px 20px 0;
  box-sizing: border-box;
}

.ws-voice-footer > * {
  pointer-events: auto;
}

/* Barra Flutuante de Controles de Voz */
.ws-voice-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: rgba(18, 20, 24, .92);
  backdrop-filter: var(--blur);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}

.ws-voice-ctrl-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--glass-2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s ease;
}

.ws-voice-ctrl-btn:hover {
  background: var(--glass-3);
  transform: scale(1.06);
}

.ws-voice-ctrl-btn.muted {
  background: rgba(255, 77, 79, 0.18);
  color: #ff4d4f;
  border: 1px solid rgba(255, 77, 79, 0.35);
}

.ws-voice-ctrl-btn.active {
  background: var(--accent);
  color: #000;
}

.ws-voice-ctrl-btn.leave {
  background: #e53935;
  color: #fff;
  width: 58px;
  border-radius: 22px;
}

.ws-voice-ctrl-btn.leave:hover {
  background: #f44336;
}

.ws-voice-ctrl-btn svg {
  width: 18px;
  height: 18px;
}

/* Canto inferior direito: chat do canal sempre à vista; tela cheia só ao passar o mouse na sala */
.ws-voice-corner-actions {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Antes de entrar na sala não há barra de controles: o chat vai para o canto da própria área */
.ws-voice-stage-body > .ws-voice-corner-actions {
  top: auto;
  bottom: 14px;
  right: 16px;
  transform: none;
}

.ws-voice-corner-btn.active {
  background: var(--glass-3);
  color: #fff;
}

.ws-voice-fullscreen-btn {
  opacity: 0;
}

.ws-voice-room:hover .ws-voice-fullscreen-btn,
.ws-voice-fullscreen-btn:focus-visible {
  opacity: 1;
}

/* Sem mouse (celular) não existe hover: os botões de tela cheia ficam sempre visíveis */
@media (hover: none) {
  .ws-voice-fullscreen-btn,
  .ws-tile-focus-btn {
    opacity: 1;
  }
}

.ws-voice-corner-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s ease;
}

.ws-voice-corner-btn:hover {
  background: var(--glass-2);
  color: #fff;
}

.ws-voice-corner-btn svg {
  width: 18px;
  height: 18px;
}

/* Presença de Voz na Sidebar */
.ws-channel-presence {
  padding: 2px 6px 4px 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ws-presence-user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 4px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.ws-presence-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--glass-3);
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: none;
}

.ws-presence-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ws-presence-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.ws-presence-muted {
  color: var(--danger);
  display: flex;
  opacity: .8;
}

.ws-presence-muted svg {
  width: 10px;
  height: 10px;
}

/* ==========================================================================
   MENSAGENS DIRETAS (DMs - FASE 5)
   ========================================================================== */
.dm-split-layout {
  display: flex;
  height: calc(100vh - 200px);
  min-height: 400px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--glass-1);
}

.dm-conversations-list {
  width: 280px;
  min-width: 240px;
  border-right: 1px solid var(--line-soft);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: rgba(10, 12, 16, .35);
}

.dm-conv-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background .12s ease;
  border-bottom: 1px solid rgba(255, 255, 255, .03);
}

.dm-conv-item:hover {
  background: var(--glass-2);
}

.dm-conv-item.active {
  background: var(--glass-3);
  border-left: 3px solid var(--accent);
}

.dm-conv-avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--glass-3);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  flex: none;
}

.dm-conv-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dm-conv-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dm-conv-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-conv-time {
  font-size: 10.5px;
  color: var(--dimmer);
}

.dm-chat-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
}

.dm-chat-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dm-chat-header {
  padding: 12px 20px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(14, 16, 20, .4);
}

.dm-header-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dm-header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--glass-3);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
}

.dm-header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dm-header-name {
  font-size: 14px;
  color: var(--text);
  display: block;
}

.dm-header-email {
  font-size: 11px;
  color: var(--dim);
}

.dm-messages-feed {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dm-msg-bubble-wrap {
  display: flex;
  width: 100%;
}

.dm-msg-bubble-wrap.mine {
  justify-content: flex-end;
}

.dm-msg-bubble-wrap.theirs {
  justify-content: flex-start;
}

.dm-msg-bubble {
  max-width: 70%;
  padding: 9px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dm-msg-bubble-wrap.mine .dm-msg-bubble {
  background: var(--accent);
  color: #000;
  border-bottom-right-radius: 3px;
}

.dm-msg-bubble-wrap.theirs .dm-msg-bubble {
  background: var(--glass-3);
  border: 1px solid var(--line-soft);
  color: var(--text);
  border-bottom-left-radius: 3px;
}

.dm-msg-time {
  font-size: 10px;
  opacity: .65;
  align-self: flex-end;
}

.dm-input-row {
  padding: 12px 20px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  gap: 8px;
  background: rgba(14, 16, 20, .3);
}

.dm-input-row .input-pc {
  flex: 1;
}