/* Widget do chat multilíngue — mesma linguagem visual do site (prancheta técnica) */
.cw-lancador, .cw-painel {
  --cw-navy: #221d3a;
  --cw-teal: #17636f;
  --cw-teal-escuro: #124e58;
  --cw-violeta: #6f5fbf;
  --cw-fundo: #f6f5fc;
  --cw-borda: #d3cfe6;
  --cw-borda-suave: #e0dbf0;
  --cw-texto: #4f496b;
  --cw-mudo: #8b83ac;
  --cw-ouro: #c9a94a;
  --cw-verde: #2f9e7a;
}

.cw-lancador {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px;
  background: var(--cw-navy); color: var(--cw-fundo);
  border: 0; cursor: pointer;
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; font-weight: 600; letter-spacing: .03em;
  box-shadow: 0 18px 40px -18px rgba(34, 29, 58, .7);
}
.cw-lancador:hover { background: var(--cw-teal); }
.cw-lancador:focus-visible { outline: 2px solid var(--cw-teal); outline-offset: 3px; }
.cw-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--cw-ouro); flex: 0 0 auto; }
.cw-lancador--online .cw-ponto { background: #7fd4c0; box-shadow: 0 0 0 3px rgba(127, 212, 192, .25); }

.cw-painel {
  position: fixed; right: 24px; bottom: 84px; z-index: 60;
  width: min(400px, calc(100vw - 32px)); height: min(600px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--cw-borda);
  box-shadow: 0 30px 70px -30px rgba(60, 50, 110, .55);
  font-family: 'IBM Plex Sans', sans-serif; color: var(--cw-navy);
}
.cw-painel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .cw-painel:not([hidden]) { animation: cwSobe .22s ease both; }
  @keyframes cwSobe { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

.cw-cantos i { position: absolute; width: 10px; height: 10px; pointer-events: none; z-index: 2; }
.cw-cantos i:nth-child(1) { top: 6px; left: 6px; border-top: 1.5px solid var(--cw-teal); border-left: 1.5px solid var(--cw-teal); }
.cw-cantos i:nth-child(2) { top: 6px; right: 6px; border-top: 1.5px solid var(--cw-teal); border-right: 1.5px solid var(--cw-teal); }
.cw-cantos i:nth-child(3) { bottom: 6px; left: 6px; border-bottom: 1.5px solid var(--cw-teal); border-left: 1.5px solid var(--cw-teal); }
.cw-cantos i:nth-child(4) { bottom: 6px; right: 6px; border-bottom: 1.5px solid var(--cw-teal); border-right: 1.5px solid var(--cw-teal); }

.cw-topo {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 18px 18px 14px 20px; border-bottom: 1px solid var(--cw-borda);
  background: var(--cw-fundo);
}
.cw-titulo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cw-titulo strong { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.cw-rotulo { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cw-teal); }
.cw-status { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--cw-mudo); }
.cw-status--online { color: var(--cw-teal); }

.cw-idioma-btn {
  display: flex; align-items: center; gap: 6px; max-width: 150px;
  padding: 7px 10px; background: #fff; border: 1px solid var(--cw-borda); cursor: pointer;
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--cw-navy);
}
.cw-idioma-btn:hover { border-color: var(--cw-teal); }
.cw-idioma-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-idioma-seta { color: var(--cw-teal); }
.cw-fechar {
  width: 32px; height: 32px; flex: 0 0 auto; background: transparent; border: 1px solid transparent; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--cw-texto);
}
.cw-fechar:hover { border-color: var(--cw-borda); color: var(--cw-navy); }
.cw-painel button:focus-visible, .cw-painel textarea:focus-visible, .cw-painel input:focus-visible { outline: 2px solid var(--cw-teal); outline-offset: 2px; }

.cw-corpo { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* seletor de idioma */
.cw-seletor { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 0; }
.cw-seletor[hidden] { display: none; }
.cw-seletor-texto { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--cw-texto); }
.cw-busca {
  width: 100%; padding: 10px 12px; border: 1px solid var(--cw-borda); background: #fff;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--cw-navy);
}
.cw-lista-idiomas { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -18px; padding: 0 18px 14px; }
.cw-grupo-idiomas {
  position: sticky; top: 0; z-index: 1; padding: 10px 0 6px; background: #fff;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cw-violeta);
}
.cw-opcao {
  width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; align-items: baseline;
  padding: 9px 10px; text-align: left; background: #fff; border: 0; border-bottom: 1px solid #ece8f6; cursor: pointer;
}
.cw-opcao:hover { background: #efeaf8; }
.cw-opcao--atual { background: #e6f3f4; }
.cw-opcao-nativo { font-family: 'Space Grotesk', sans-serif; font-size: 14.5px; font-weight: 600; color: var(--cw-navy); }
.cw-opcao-ingles { grid-column: 1; font-size: 12px; color: var(--cw-mudo); }
.cw-opcao-codigo { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--cw-teal); }
.cw-vazio { margin: 18px 0; font-size: 13px; color: var(--cw-mudo); }

/* mensagens */
.cw-mensagens {
  flex: 1; min-height: 0; overflow-y: auto; padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  background-color: #fff;
  background-image: linear-gradient(#f1eef9 1px, transparent 1px), linear-gradient(90deg, #f1eef9 1px, transparent 1px);
  background-size: 24px 24px;
}
.cw-mensagens[hidden] { display: none; }
.cw-msg { max-width: 86%; padding: 10px 13px; border: 1px solid var(--cw-borda); background: #fff; }
.cw-msg--admin { align-self: flex-start; border-left: 2px solid var(--cw-teal); }
.cw-msg--eu { align-self: flex-end; background: var(--cw-navy); border-color: var(--cw-navy); color: #f6f5fc; }
.cw-msg--pendente { opacity: .65; }
.cw-msg-autor { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--cw-mudo); margin-bottom: 4px; }
.cw-msg--eu .cw-msg-autor { color: #b9b3d6; }
.cw-msg-texto, .cw-msg-original { margin: 0; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.cw-msg-nota { margin-top: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--cw-mudo); }
.cw-msg--eu .cw-msg-nota { color: #b9b3d6; }
.cw-msg-original { margin-top: 6px; padding: 7px 9px; background: var(--cw-fundo); border-left: 2px solid var(--cw-violeta); font-size: 13.5px; color: var(--cw-texto); }
.cw-msg-original[hidden] { display: none; }
.cw-link {
  padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--cw-teal); text-decoration: underline; text-underline-offset: 2px;
}
.cw-msg--eu .cw-link { color: #7fd4c0; }

.cw-erro { padding: 9px 18px; background: #fbeeee; border-top: 1px solid #f0d0d0; font-size: 12.5px; color: #8a2b2b; }
.cw-erro[hidden] { display: none; }

.cw-form { display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--cw-borda); background: var(--cw-fundo); }
.cw-form[hidden] { display: none; }
.cw-texto {
  flex: 1; resize: none; min-height: 40px; max-height: 120px; padding: 10px 12px;
  border: 1px solid var(--cw-borda); background: #fff;
  font-family: 'IBM Plex Sans', sans-serif; font-size: 14.5px; line-height: 1.4; color: var(--cw-navy);
}
.cw-enviar {
  padding: 11px 16px; border: 0; cursor: pointer; background: var(--cw-teal); color: #f6f5fc;
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; font-weight: 600;
}
.cw-enviar:hover { background: var(--cw-teal-escuro); }
.cw-texto[hidden], .cw-enviar[hidden], .cw-mic[hidden] { display: none; }

/* identificação do visitante: nome + e-mail antes da conversa; depois, "Chatting as … · Not you?" acima da mensagem */
.cw-ident { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 18px; background: #fff; }
.cw-ident[hidden] { display: none; }
.cw-ident-texto { margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; color: var(--cw-texto); }
.cw-ident-rotulo { margin-top: 4px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cw-teal); }
.cw-campo {
  width: 100%; padding: 10px 12px; border: 1px solid var(--cw-borda); background: #fff;
  font-family: 'IBM Plex Sans', sans-serif; font-size: 14.5px; color: var(--cw-navy);
}
.cw-campo:hover { border-color: var(--cw-teal); }
.cw-ident-enviar { align-self: flex-start; margin-top: 10px; }
.cw-ident-enviar:disabled { opacity: .6; cursor: wait; }
.cw-quem {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px 0; border-top: 1px solid var(--cw-borda); background: var(--cw-fundo);
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--cw-mudo);
}
.cw-quem[hidden] { display: none; }
.cw-quem:not([hidden]) + .cw-form { border-top: 0; padding-top: 8px; }
.cw-quem-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-quem .cw-link { flex: 0 0 auto; font-size: 11px; }

/* início da conversa, no topo das mensagens */
.cw-inicio {
  align-self: center; padding: 3px 10px; background: #fff; border: 1px solid var(--cw-borda-suave);
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--cw-mudo);
}
.cw-inicio a { color: var(--cw-teal); }

/* ícones duotone: --cw-duo-1 no traço/frente, --cw-duo-2 translúcido no fundo */
.cw-icone { --cw-duo-1: var(--cw-teal); --cw-duo-2: var(--cw-violeta); width: 22px; height: 22px; flex: 0 0 auto; }
.cw-icone .cw-duo-2 { fill: var(--cw-duo-2); opacity: .32; }
.cw-icone-mic .cw-duo-1 { fill: none; stroke: var(--cw-duo-1); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cw-icone-play .cw-duo-1 { fill: var(--cw-duo-1); }
/* microfone: teal profundo + âmbar; câmera: violeta vivo + coral (cada botão com a sua dupla, mais saturada que o padrão) */
.cw-mic .cw-icone { --cw-duo-1: #0c7a86; --cw-duo-2: #f2a23a; }
.cw-cam .cw-icone { --cw-duo-1: #5a3fd0; --cw-duo-2: #ff6f8e; }
.cw-mic .cw-icone .cw-duo-2, .cw-cam .cw-icone .cw-duo-2 { opacity: .6; }
.cw-mic:hover .cw-icone .cw-duo-2, .cw-cam:hover .cw-icone .cw-duo-2 { opacity: .85; }

/* e-mail ao lado da minha mensagem: envelope em âmbar sobre o fundo escuro, pessoa em verde-água */
.cw-msg-autor { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cw-email { display: inline-flex; padding: 1px; margin: -3px -2px -3px 0; background: none; border: 0; cursor: pointer; border-radius: 6px; }
.cw-email .cw-icone { width: 20px; height: 20px; --cw-duo-1: #ffc15a; --cw-duo-2: #7fd4c0; --cw-duo-3: #0f2a3f; }
.cw-email .cw-duo-2 { opacity: .75; }
.cw-email .cw-icone-email .cw-duo-1 { fill: #ffc15a; }
.cw-email .cw-duo-linha { fill: none; stroke: #0f2a3f; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cw-email .cw-duo-3 { fill: var(--cw-duo-3); }
.cw-email:hover .cw-icone, .cw-email:focus-visible .cw-icone { transform: scale(1.12); }
.cw-email:focus-visible { outline: 2px solid #7fd4c0; outline-offset: 1px; }
.cw-email:disabled { opacity: .5; cursor: progress; }
.cw-email--ok .cw-icone { --cw-duo-1: #5fe0a0; }
.cw-email--ok .cw-icone-email .cw-duo-1 { fill: #5fe0a0; }

/* microfone */
.cw-mic {
  position: relative; width: 42px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  background: #fff; border: 1px solid var(--cw-borda);
}
.cw-mic:hover { border-color: var(--cw-teal); }

/* gravando: ⊗ cancela (X vermelho sobre violeta) e ■ para e envia (teal sobre violeta) */
.cw-gravacao-btn {
  position: relative; width: 42px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  background: #fff; border: 1px solid var(--cw-borda);
}
.cw-gravacao-btn[hidden] { display: none; }
.cw-gravacao-btn .cw-icone { width: 26px; height: 26px; }
.cw-gravacao-btn:hover .cw-duo-2 { opacity: .45; }
.cw-gravacao-btn--cancelar:hover { border-color: #c4473a; }
.cw-gravacao-btn--parar:hover { border-color: var(--cw-teal); }
.cw-gravacao-btn--cancelar .cw-icone { --cw-duo-1: #c4473a; }
.cw-icone-cancelar .cw-duo-1 { fill: none; stroke: var(--cw-duo-1); stroke-width: 2; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .cw-gravacao-btn--parar::after { content: ""; position: absolute; inset: -1px; border: 2px solid rgba(23, 99, 111, .45); animation: cwPulso 1.4s ease-out infinite; pointer-events: none; }
  @keyframes cwPulso { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.18); } }
}

.cw-gravando {
  flex: 1; min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 12px;
  border: 1px solid var(--cw-borda); background: #fff;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--cw-navy);
}
.cw-gravando[hidden] { display: none; }
.cw-gravando-ponto { width: 9px; height: 9px; border-radius: 50%; background: #c4473a; flex: 0 0 auto; }
.cw-gravando-tempo { margin-left: auto; color: var(--cw-mudo); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .cw-gravando-ponto { animation: cwPisca 1s ease-in-out infinite alternate; }
  @keyframes cwPisca { to { opacity: .3; } }
}

/* badge de mensagem de voz */
.cw-audio {
  display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 6px; padding: 4px 11px 4px 5px;
  background: #fff; border: 1px solid var(--cw-borda); border-radius: 999px; cursor: pointer;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--cw-navy);
}
.cw-audio:hover:not(:disabled) { border-color: var(--cw-teal); }
.cw-audio:disabled { cursor: default; opacity: .7; }
.cw-msg--eu .cw-audio { background: rgba(246, 245, 252, .08); border-color: rgba(185, 179, 214, .45); color: #f6f5fc; }
.cw-msg--eu .cw-audio .cw-icone { --cw-duo-1: #7fd4c0; --cw-duo-2: #b9b3d6; }
.cw-audio--tocando { border-color: var(--cw-teal); }
@media (prefers-reduced-motion: no-preference) {
  .cw-audio--carregando .cw-icone { animation: cwCarregando 1s ease-in-out infinite alternate; }
  @keyframes cwCarregando { to { opacity: .35; } }
}

/* balão do dono do site (js/chat-atendente.js): lista de conversas e aviso de mensagem nova */
.cw-lancador-badge { min-width: 20px; padding: 1px 6px; background: var(--cw-violeta); color: #fff; font-size: 11px; text-align: center; }
.cw-lancador-badge[hidden] { display: none; }
.cw-voltar {
  width: 30px; height: 30px; margin: -4px 0 0 -8px; flex: 0 0 auto; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  background: transparent; border: 1px solid transparent;
}
.cw-voltar .cw-icone { width: 26px; height: 26px; --cw-duo-1: #0c7a86; --cw-duo-2: #f2a23a; }
.cw-icone-seta .cw-duo-1 { fill: none; stroke: var(--cw-duo-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cw-voltar .cw-icone .cw-duo-2 { opacity: .55; }
.cw-voltar:hover { border-color: var(--cw-borda); }
.cw-voltar:hover .cw-icone .cw-duo-2 { opacity: .85; }
.cw-voltar[hidden] { display: none; }
.cw-aviso {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 18px;
  background: #e6f3f4; border-bottom: 1px solid var(--cw-borda-suave);
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--cw-teal);
}
.cw-aviso[hidden] { display: none; }
.cw-conversas { flex: 1; min-height: 0; overflow-y: auto; }
.cw-conversas[hidden] { display: none; }
.cw-conversa {
  width: 100%; display: flex; flex-direction: column; gap: 3px; padding: 12px 18px 12px 20px; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-bottom: 1px solid var(--cw-borda-suave); color: var(--cw-navy);
}
.cw-conversa:hover { background: #efeaf8; }
.cw-conversa--nova { background: #f3fafa; box-shadow: inset 2px 0 0 var(--cw-teal); }
.cw-conversa-linha { display: flex; align-items: center; gap: 8px; }
.cw-conversa-linha strong { font-family: 'Space Grotesk', sans-serif; font-size: 14.5px; }
/* Presença do visitante na frente do nome: online = bolinha verde duotone pulsante; offline = X num círculo de duas cores. */
.cw-conversa-status { position: relative; width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; box-sizing: border-box; }
.cw-conversa-status--online {
  background: radial-gradient(circle at 35% 35%, #7ee2b8 0 38%, #1f8a63 40% 100%);
  animation: cw-pulso-verde 1.6s ease-in-out infinite;
}
@keyframes cw-pulso-verde {
  0%, 100% { filter: hue-rotate(0deg) brightness(1); box-shadow: 0 0 0 0 rgba(47, 158, 122, .55); }
  50% { filter: hue-rotate(-14deg) brightness(1.18); box-shadow: 0 0 0 5px rgba(126, 226, 184, 0); }
}
.cw-conversa-status:not(.cw-conversa-status--online) { border: 1.5px solid var(--cw-mudo); background: #f1eef9; }
.cw-conversa-status:not(.cw-conversa-status--online)::before,
.cw-conversa-status:not(.cw-conversa-status--online)::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 1.5px; border-radius: 1px;
}
.cw-conversa-status:not(.cw-conversa-status--online)::before { background: #c0506a; transform: translate(-50%, -50%) rotate(45deg); }
.cw-conversa-status:not(.cw-conversa-status--online)::after { background: var(--cw-mudo); transform: translate(-50%, -50%) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .cw-conversa-status--online { animation: none; } }
.cw-conversa-badge { min-width: 20px; padding: 1px 6px; background: var(--cw-violeta); color: #fff; font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-align: center; }
.cw-conversa-hora { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--cw-mudo); }
.cw-conversa-idioma { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--cw-teal); }
.cw-conversa-previa { font-size: 12.5px; color: var(--cw-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-vazio--lista { padding: 0 20px; line-height: 1.5; }
.cw-audio-linha { display: inline-flex; align-items: center; gap: 10px; }
.cw-conversa-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--cw-mudo); }
.cw-conversa-meta .cw-conversa-idioma { color: var(--cw-teal); }
.cw-historico {
  align-self: flex-start; margin-top: -2px; padding: 6px 9px; flex: 0 0 auto;
  border: 1px solid var(--cw-borda); background: #fff; color: var(--cw-navy); text-decoration: none;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
}
.cw-historico:hover { border-color: var(--cw-teal); color: var(--cw-teal); }
.cw-historico:focus-visible { outline: 2px solid var(--cw-teal); outline-offset: 2px; }

@media (max-width: 640px) {
  .cw-lancador { right: 16px; bottom: 16px; }
  .cw-painel { inset: 0; width: 100%; height: 100%; border: 0; }
  .cw-lancador--aberto { display: none; }
}

/* Aviso de microfone na área de voz/vídeo (borda vermelha, letra roxa, fundo branco) */
.cw-aviso-mic {
  margin: 0 14px 8px; padding: 6px 10px; background: #fff; border: 1px solid #d23a2c; border-radius: 4px;
  color: var(--cw-violeta); font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; line-height: 1.35; text-align: center;
}
.cw-aviso-mic[hidden] { display: none; }

/* botão de câmera (chamada de vídeo) na barra de composição */
.cw-cam {
  position: relative; width: 42px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  background: #fff; border: 1px solid var(--cw-borda);
}
.cw-cam:hover { border-color: var(--cw-teal); }
.cw-cam[hidden] { display: none; }

/* ===== Chamada de vídeo (js/chat-chamada.js) ===== */
.cc-painel {
  position: fixed; z-index: 70; right: 24px; bottom: 24px;
  width: min(420px, calc(100vw - 32px)); height: min(560px, calc(100vh - 48px));
  background: #0a0a14; border: 1px solid #221d3a; overflow: hidden; display: flex;
  box-shadow: 0 30px 70px -20px rgba(10, 10, 20, .7);
}
.cc-painel[hidden] { display: none; }
.cc-remoto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0a0a14; }
.cc-remoto[hidden] { display: none; }
.cc-local {
  position: absolute; right: 12px; top: 12px; width: 28%; max-width: 128px; aspect-ratio: 3/4;
  object-fit: cover; border: 2px solid rgba(255, 255, 255, .6); border-radius: 6px; background: #000; z-index: 2;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45); transform: scaleX(-1);
}
.cc-local[hidden] { display: none; }
/* na espera (sem vídeo remoto), um fundo com leve brilho */
.cc-painel[data-fase="chamando"], .cc-painel[data-fase="recebendo"], .cc-painel[data-fase="conectando"] {
  background: radial-gradient(120% 90% at 50% 20%, #2a2350, #0a0a14 70%);
}
.cc-barra {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .66));
}
.cc-info { display: flex; flex-direction: column; min-width: 0; color: #fff; }
.cc-titulo { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-sub { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #b9b3d6; }
.cc-controles { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.cc-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border: 0; border-radius: 999px;
  cursor: pointer; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #fff; background: rgba(255, 255, 255, .16);
}
.cc-btn:hover { filter: brightness(1.12); }
.cc-btn[hidden] { display: none; }
.cc-btn--atender { background: #2f9e7a; }
.cc-btn--encerrar { background: #c4473a; }
.cc-btn--toggle { width: 42px; height: 42px; justify-content: center; padding: 0; }
.cc-btn--off { background: #c4473a; }
.cc-icone { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) { .cc-painel { inset: 0; width: 100%; height: 100%; border: 0; } }

/* legenda da tradução ao vivo sobre o vídeo */
.cc-legenda {
  position: absolute; left: 12px; right: 12px; bottom: 74px; z-index: 4; margin: 0 auto; width: fit-content; max-width: calc(100% - 24px);
  padding: 7px 13px; background: rgba(0, 0, 0, .62); color: #fff; border-radius: 7px;
  font-family: 'IBM Plex Sans', sans-serif; font-size: 15px; line-height: 1.35; text-align: center;
}
.cc-legenda[hidden] { display: none; }

/* aviso de fones de ouvido na chamada (badge, ícone de alerta duotone) */
.cc-aviso-fones {
  position: absolute; left: 12px; top: 12px; z-index: 5; max-width: 62%;
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px;
  background: #fff; border: 1px solid #d23a2c; border-radius: 7px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; line-height: 1.3; color: #6f5fbf;
}
.cc-aviso-fones[hidden] { display: none; }
.cc-alerta { width: 18px; height: 18px; flex: 0 0 auto; }
.cc-alerta-2 { fill: #6f5fbf; opacity: .34; }
.cc-alerta-1 { fill: #17636f; }