/* Ligações e compartilhamento de tela no atendimento (chat/js/comum/chamadas.js): painel flutuante, aviso de chamada
 * recebida, visualizador da tela, faixa "compartilhando" e janela "Toque de ligação". Usa as variáveis de tema das
 * duas telas (cliente: --bg-card; atendente: --bg-sidebar), então segue o tema claro/escuro de cada uma. */
.chamada-painel, .chamada-convite, .chamada-tela, .chamada-toque, .chamada-aviso {
    --ch-fundo: var(--bg-card, var(--bg-sidebar, #ffffff));
    --ch-texto: var(--text-main, #0f172a);
    --ch-suave: var(--text-muted, #5b6778);
    --ch-borda: var(--border-color, #e2e8f0);
    --ch-destaque: var(--primary-color, #00bfa5);
    --ch-perigo: #c62828;
    color: var(--ch-texto);
    background: var(--ch-fundo);
    font-family: inherit;
}
.chamada-painel[hidden], .chamada-convite[hidden], .chamada-tela[hidden], .chamada-faixa[hidden], .chamada-aviso[hidden],
.chamada-painel [hidden], .client-call-actions[hidden], .client-call-button[hidden], .call-unavailable[hidden],
.client-call-note[hidden], .chamada-menu-ancora[hidden], .chamada-menu [hidden] { display: none !important; }

.chamada-painel {
    position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 12500; width: min(340px, calc(100vw - 32px)); box-sizing: border-box; padding: 14px;
    border: 1px solid var(--ch-borda); border-radius: 18px; box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28);
    display: flex; flex-direction: column; gap: 10px;
}
.chamada-painel.is-encerrada { opacity: 0.92; }
.chamada-cabecalho { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chamada-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; background: var(--ch-borda); }
.chamada-dados { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chamada-dados strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chamada-tipo { font-size: 11px; color: var(--ch-suave); text-transform: uppercase; letter-spacing: 0.04em; }
.chamada-linha { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.chamada-tempo { font-variant-numeric: tabular-nums; color: var(--ch-suave); }
.chamada-qualidade { font-size: 18px; color: #2e7d32; }
.chamada-qualidade[data-nivel="regular"] { color: #b26a00; }
.chamada-qualidade[data-nivel="ruim"] { color: var(--ch-perigo); }
.chamada-remoto-mudo { margin: 0; font-size: 12px; color: var(--ch-suave); }
.chamada-videos { position: relative; border-radius: 12px; overflow: hidden; background: #0b132b; aspect-ratio: 16 / 9; }
.chamada-camera-remota { width: 100%; height: 100%; object-fit: cover; }
.chamada-camera-local { position: absolute; right: 8px; bottom: 8px; width: 32%; border-radius: 8px; border: 2px solid #ffffff; object-fit: cover; }
.chamada-acoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chamada-botao {
    min-width: 44px; min-height: 44px; border-radius: 50%; border: 1px solid var(--ch-borda); color: var(--ch-texto);
    background: color-mix(in srgb, var(--ch-texto) 6%, transparent); cursor: pointer; display: inline-grid; place-items: center;
    font-size: 17px; padding: 0;
}
.chamada-botao:hover:not(:disabled) { background: color-mix(in srgb, var(--ch-texto) 12%, transparent); }
.chamada-botao[aria-pressed="true"] { background: var(--ch-destaque); border-color: var(--ch-destaque); color: #06231e; }
.chamada-botao:disabled { opacity: 0.45; cursor: not-allowed; }
.chamada-desligar { background: var(--ch-perigo); border-color: var(--ch-perigo); color: #ffffff; }
.chamada-desligar:hover:not(:disabled) { background: #a31f1f; }
.chamada-botao:focus-visible, .chamada-convite button:focus-visible, .chamada-faixa button:focus-visible,
.chamada-toque button:focus-visible, .chamada-toque-enviar:focus-within {
    outline: 3px solid var(--ch-destaque, #00bfa5); outline-offset: 2px;
}
.chamada-dispositivos { display: grid; gap: 8px; font-size: 12px; }
.chamada-dispositivos label { display: grid; gap: 4px; }
.chamada-dispositivos select {
    min-height: 36px; border-radius: 8px; border: 1px solid var(--ch-borda); background: var(--ch-fundo); color: var(--ch-texto); font: inherit;
}

.chamada-convite {
    position: fixed; left: 50%; top: max(16px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 13000;
    width: min(420px, calc(100vw - 32px)); box-sizing: border-box; padding: 16px; border-radius: 18px;
    border: 1px solid var(--ch-borda); box-shadow: 0 22px 60px rgba(15, 23, 42, 0.35);
    display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; animation: chamada-entrar 0.2s ease-out;
}
.chamada-convite-dados strong { display: block; font-size: 15px; line-height: 1.4; }
.chamada-convite-dados p { margin: 2px 0 0; font-size: 12.5px; color: var(--ch-suave); line-height: 1.5; }
.chamada-convite-acoes { grid-column: 1 / -1; display: flex; gap: 10px; }
.chamada-convite-acoes button {
    flex: 1; min-height: 44px; border-radius: 12px; border: 0; font: inherit; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.chamada-aceitar { background: #1b7f3b; color: #ffffff; }
.chamada-recusar { background: var(--ch-perigo); color: #ffffff; }
@keyframes chamada-entrar { from { transform: translate(-50%, -8px); } }

.chamada-tela {
    position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 12400;
    width: min(560px, calc(100vw - 32px)); height: min(380px, 60vh); min-width: 240px; min-height: 180px;
    max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); box-sizing: border-box; resize: both; overflow: hidden;
    display: flex; flex-direction: column; border-radius: 14px; border: 1px solid var(--ch-borda);
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.3);
}
.chamada-tela.is-ampliada { width: min(1100px, calc(100vw - 32px)); height: min(720px, calc(100vh - 120px)); }
.chamada-tela header { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; font-size: 13px; }
.chamada-tela header strong { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chamada-tela-acoes { display: flex; gap: 6px; }
.chamada-tela-acoes .chamada-botao { min-width: 36px; min-height: 36px; font-size: 15px; }
.chamada-tela video { flex: 1; min-height: 0; width: 100%; background: #000000; object-fit: contain; }
.chamada-tela:fullscreen { width: 100vw; height: 100vh; max-width: none; max-height: none; border-radius: 0; resize: none; }

.chamada-faixa {
    position: fixed; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 12600;
    display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px; border-radius: 999px;
    background: #b3261e; color: #ffffff; font-size: 13px; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    max-width: calc(100vw - 32px); flex-wrap: wrap; justify-content: center;
}
.chamada-faixa button {
    min-height: 36px; border-radius: 999px; border: 0; padding: 0 14px; background: #ffffff; color: #8c1d18;
    font: inherit; font-weight: 700; cursor: pointer;
}

.chamada-aviso {
    position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 12700;
    max-width: min(360px, calc(100vw - 32px)); padding: 12px 14px; border-radius: 12px; border: 1px solid var(--ch-borda);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22); font-size: 13px; line-height: 1.5;
}
.chamada-painel:not([hidden]) ~ .chamada-aviso { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 220px); }

/* Linha da conversa: "Ligação de voz · 3 min 12 s" */
.mensagem.sistema.chamada-evento { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.mensagem.sistema.chamada-evento time { font-size: 0.9em; font-variant-numeric: tabular-nums; }

/* Botões do cabeçalho */
.client-call-actions { display: flex; gap: 6px; margin-left: auto; }
.client-call-button {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-color, #e2e8f0); background: transparent;
    color: inherit; cursor: pointer; display: inline-grid; place-items: center; font-size: 17px;
}
.client-call-button:hover:not(:disabled) { background: color-mix(in srgb, currentColor 8%, transparent); }
.client-call-button:disabled { opacity: 0.45; cursor: not-allowed; }
.client-call-button:focus-visible { outline: 3px solid var(--primary-color, #00bfa5); outline-offset: 2px; }
.call-unavailable, .client-call-note { font-size: 11.5px; color: var(--text-muted, #5b6778); display: inline-flex; gap: 6px; align-items: center; }
.client-call-note { margin: 0 16px 6px; }
.chamada-menu-ancora { position: relative; display: inline-flex; }
.chamada-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 300; min-width: 250px; padding: 6px; border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0); background: var(--bg-sidebar, var(--bg-card, #ffffff));
    color: var(--text-main, #0f172a); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.2); display: grid; gap: 2px;
}
.chamada-menu[hidden] { display: none; }
.chamada-menu button {
    display: flex; gap: 10px; align-items: center; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 8px;
    background: transparent; color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.chamada-menu button:hover, .chamada-menu button:focus-visible { background: var(--hover-bg, #f1f5f9); outline: none; }

/* Janela "Toque de ligação" */
.chamada-toque {
    width: min(440px, calc(100vw - 32px)); box-sizing: border-box; max-height: calc(100dvh - 32px); overflow: auto; padding: 22px;
    border: 1px solid var(--ch-borda); border-radius: 18px; box-shadow: 0 24px 90px rgba(0, 0, 0, 0.25);
}
.chamada-toque::backdrop { background: rgba(11, 20, 37, 0.5); }
.chamada-toque header { display: flex; gap: 12px; align-items: center; }
.chamada-toque h2 { font-size: 17px; margin: 0 0 4px; }
.chamada-toque header p { margin: 0; font-size: 12px; color: var(--ch-suave); }
.chamada-toque-icone { padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--ch-destaque) 16%, transparent); }
.chamada-toque-fechar { margin-left: auto; border: 0; background: transparent; color: inherit; padding: 10px; border-radius: 8px; cursor: pointer; min-width: 44px; min-height: 44px; }
.chamada-toque-atual { display: flex; gap: 12px; align-items: center; margin-top: 18px; padding: 14px; border-radius: 12px; background: color-mix(in srgb, var(--ch-texto) 5%, transparent); }
.chamada-toque-atual strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.chamada-toque-atual small { display: block; margin-top: 4px; font-size: 11px; color: var(--ch-suave); }
.chamada-toque audio { width: 100%; margin-top: 12px; }
.chamada-toque-acoes { display: grid; gap: 8px; margin-top: 14px; }
.chamada-toque-acoes button, .chamada-toque-enviar {
    display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; box-sizing: border-box; padding: 10px;
    border: 1px solid var(--ch-borda); border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer;
}
.chamada-toque-enviar { position: relative; }
.chamada-toque-enviar input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chamada-toque-status { min-height: 1.4em; font-size: 12px; margin: 10px 0 0; }

@media (max-width: 600px) {
    .chamada-painel { right: 8px; left: 8px; width: auto; bottom: max(8px, env(safe-area-inset-bottom)); }
    .chamada-tela { left: 8px; right: 8px; width: auto; top: max(56px, env(safe-area-inset-top)); bottom: auto; height: 45vh; resize: none; }
    .chamada-tela.is-ampliada { height: calc(100vh - 260px); }
    .chamada-convite-acoes button { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .chamada-convite { animation: none; } }