/*
  Parlatorio: tinta, papel e âmbar. Títulos em Instrument Serif, texto em Geist e rótulos em Geist Mono
  (fontes em css/fontes.css). Os componentes Syncfusion (material3) recebem as mesmas cores no fim do :root.
*/

:root {
    --pl-tinta: #15161F;
    --pl-tinta-2: #23242F;
    --pl-tinta-3: #2B2D3A;
    --pl-papel: #F4F1EA;
    --pl-cartao: #FFFDF8;
    --pl-borda: #E4DFD3;
    --pl-divisoria: #EEE9DF;
    --pl-tracejado: #CFC8B9;
    --pl-areia: #ECE7DC;
    --pl-areia-2: #E9E3D6;
    --pl-desativado: #DCD5C7;
    --pl-suave: #6E6A63;
    --pl-suave-escuro: #A19D95;
    --pl-claro-sobre-escuro: #C9C4BA;
    --pl-cinza-sobre-escuro: #8C8893;
    --pl-ambar: #F2B13C;
    --pl-ambar-claro: #FBE6BE;
    --pl-ambar-escuro: #9A6408;
    --pl-vermelho: #E0412F;
    --pl-vermelho-escuro: #B33222;
    --pl-verde: #5BC48A;
    --pl-ok-fundo: #E2EFE7;
    --pl-ok-texto: #245E45;
    --pl-ok-ponto: #2F7D5B;

    --pl-serifa: "Instrument Serif", Georgia, "Times New Roman", serif;
    --pl-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --pl-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --pl-topo-seguro: env(safe-area-inset-top, 0px);
    --pl-base-segura: env(safe-area-inset-bottom, 0px);
    --pl-altura-navegacao: 76px;

    --pl-icone-primaria: var(--pl-tinta);
    --pl-icone-secundaria: var(--pl-ambar);

    /* Tema Syncfusion (material3): cores em tripletos RGB. */
    --color-sf-primary: 21, 22, 31;
    --color-sf-on-primary: 244, 241, 234;
    --color-sf-primary-container: 251, 230, 190;
    --color-sf-on-primary-container: 21, 22, 31;
    --color-sf-surface-tint-color: 21, 22, 31;
    --color-sf-inverse-primary: 242, 177, 60;
    --color-sf-secondary: 242, 177, 60;
    --color-sf-secondary-container: 251, 230, 190;
    --color-sf-on-secondary-container: 21, 22, 31;
    --color-sf-surface: 255, 253, 248;
    --color-sf-on-surface: 21, 22, 31;
    --color-sf-on-surface-variant: 110, 106, 99;
    --color-sf-outline: 207, 200, 185;
    --color-sf-outline-variant: 228, 223, 211;
    --color-sf-error: 224, 65, 47;
}

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

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--pl-papel);
    color: var(--pl-tinta);
    font-family: var(--pl-sans);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}

body .e-control,
body .e-control input,
body .e-btn,
body .e-dialog,
body .e-toast-container .e-toast {
    font-family: var(--pl-sans);
}

h1, h2, h3, p {
    margin: 0;
}

a {
    color: var(--pl-tinta);
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
}

.pl-oculto {
    display: none !important;
}

.pl-mono {
    font-family: var(--pl-mono);
}

/* Marca: o círculo âmbar e o círculo vazado. --pl-logo é o diâmetro. */

.pl-logo {
    --pl-logo: 22px;
    position: relative;
    flex: none;
    display: inline-block;
    width: calc(var(--pl-logo) * 1.45);
    height: var(--pl-logo);
}

.pl-logo > span {
    position: absolute;
    top: 0;
    width: var(--pl-logo);
    height: var(--pl-logo);
    border-radius: 50%;
}

.pl-logo > span:first-child {
    left: 0;
    background: var(--pl-ambar);
}

.pl-logo > span:last-child {
    left: calc(var(--pl-logo) * .45);
    border: max(1.5px, calc(var(--pl-logo) * .04)) solid var(--pl-logo-traco, var(--pl-tinta));
}

/* Abertura (index.html + js/abertura.js) */

.pl-abertura {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    background: var(--pl-tinta);
    color: var(--pl-papel);
    transition: opacity .4s ease;
}

.pl-abertura.pl-fechando {
    opacity: 0;
    pointer-events: none;
}

.pl-abertura-centro {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.pl-abertura-marca {
    font: 400 60px/1 var(--pl-serifa);
    letter-spacing: -.01em;
}

.pl-abertura-saudacao {
    height: 44px;
    display: flex;
    align-items: baseline;
    gap: 12px;
    transition: opacity .22s ease, transform .22s ease;
}

.pl-abertura-saudacao.pl-trocando {
    opacity: 0;
    transform: translateY(6px);
}

.pl-saudacao {
    font: italic 400 34px/1 var(--pl-serifa);
    color: var(--pl-ambar);
}

.pl-saudacao-idioma {
    font: 400 11px var(--pl-mono);
    color: var(--pl-suave-escuro);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.pl-abertura-rodape {
    padding: 0 40px calc(var(--pl-base-segura) + 56px);
    text-align: center;
    font: 400 11px/1.6 var(--pl-mono);
    color: var(--pl-suave-escuro);
    letter-spacing: .12em;
    text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
    .pl-abertura-saudacao {
        transition: none;
    }
}

/* Ícones duotone */

.pl-icone {
    display: inline-block;
    flex: none;
    vertical-align: -0.2em;
}

.pl-icone-primaria {
    fill: var(--pl-icone-primaria);
}

.pl-icone-secundaria {
    fill: var(--pl-icone-secundaria);
}

/* Tipografia */

.pl-titulo {
    font: 400 40px/1 var(--pl-serifa);
    padding: 0 4px;
}

.pl-titulo-linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-right: 0;
}

.pl-rotulo {
    font: 500 12px var(--pl-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pl-suave);
    padding: 6px 4px 0;
}

.pl-rotulo-linha {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 4px 0;
}

.pl-rotulo-linha .pl-rotulo {
    padding: 0;
}

.pl-rotulo-linha-acoes {
    align-items: center;
}

.pl-rotulo-acoes {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* Link que é botão: área de toque maior sem empurrar a linha. */
.pl-link-botao {
    padding: 8px 0;
    margin: -8px 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.pl-link-botao:focus-visible {
    outline: 2px solid var(--pl-ambar);
    outline-offset: 2px;
    border-radius: 6px;
}

.pl-rotulo-com-nota {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 4px 0;
}

.pl-rotulo-com-nota .pl-rotulo {
    padding: 0;
}

.pl-rotulo-com-nota .pl-nota {
    font-size: 13px;
    line-height: 1.4;
}

.pl-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 500 13px var(--pl-sans);
    color: var(--pl-tinta);
}

.pl-link:active {
    color: var(--pl-ambar-escuro);
}

.pl-texto {
    font: 400 16px/1.5 var(--pl-sans);
    text-wrap: pretty;
}

.pl-texto-suave {
    color: var(--pl-suave);
}

.pl-nota {
    font: 400 14px/1.5 var(--pl-sans);
    color: var(--pl-suave);
    text-wrap: pretty;
}

.pl-nota strong {
    color: var(--pl-tinta);
    font-weight: 600;
}

.pl-nota-ponto {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.pl-nota-ponto > .pl-ponto {
    margin-top: 7px;
}

.pl-nota-ambar {
    background: var(--pl-ambar-claro);
    border-radius: 18px;
    padding: 14px 16px;
    font: 400 14px/1.5 var(--pl-sans);
    color: var(--pl-tinta);
    text-wrap: pretty;
}

.pl-nota-alerta {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #F9DDD8;
    border-radius: 18px;
    padding: 14px 16px;
    font: 400 14px/1.5 var(--pl-sans);
    color: #6B1D14;
    --pl-icone-primaria: var(--pl-vermelho-escuro);
    --pl-icone-secundaria: #F2B5AC;
}

.pl-ponto {
    flex: none;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pl-ambar);
}

.pl-ponto-verde {
    background: var(--pl-verde);
}

.pl-ponto-vermelho {
    background: var(--pl-vermelho);
}

.pl-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 48px 24px;
    text-align: center;
    color: var(--pl-suave);
    font: 400 15px/1.5 var(--pl-sans);
    --pl-icone-primaria: var(--pl-suave);
    --pl-icone-secundaria: var(--pl-desativado);
}

/* Estrutura das telas com navegação */

.pl-pagina {
    min-height: 100dvh;
    background: var(--pl-papel);
}

.pl-conteudo {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: calc(var(--pl-topo-seguro) + 20px) 20px calc(var(--pl-altura-navegacao) + var(--pl-base-segura) + 24px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pl-navegacao {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(var(--pl-itens, 4), 1fr);
    height: calc(var(--pl-altura-navegacao) + var(--pl-base-segura));
    padding-bottom: calc(var(--pl-base-segura) + 6px);
    background: var(--pl-cartao);
    border-top: 1px solid var(--pl-borda);
}

.pl-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--pl-suave);
    font: 500 11px var(--pl-sans);
    --pl-icone-primaria: var(--pl-suave);
    --pl-icone-secundaria: var(--pl-tracejado);
}

.pl-nav-icone {
    display: grid;
    place-items: center;
    width: 56px;
    height: 30px;
    border-radius: 15px;
    transition: background-color .15s ease;
}

.pl-nav-item.pl-ativo {
    color: var(--pl-tinta);
    font-weight: 600;
    --pl-icone-primaria: var(--pl-tinta);
    --pl-icone-secundaria: var(--pl-ambar);
}

.pl-nav-item.pl-ativo .pl-nav-icone {
    background: var(--pl-ambar-claro);
}

.pl-carregando {
    display: grid;
    place-items: center;
    min-height: 40vh;
    position: relative;
}

.pl-fundo {
    min-height: 100dvh;
    background: var(--pl-papel);
}

/* Telas de um passo só (nova chamada, entrar com código, trocar senha): voltar, título e a ação na base. */

.pl-passo {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    background: var(--pl-papel);
}

.pl-passo-topo {
    padding: calc(var(--pl-topo-seguro) + 12px) 20px 0;
}

.pl-passo-corpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px 24px 8px;
}

.pl-passo-corpo > .pl-titulo {
    padding: 0 0 4px;
}

.pl-passo-rodape {
    padding: 16px 20px calc(var(--pl-base-segura) + 32px);
}

.pl-voltar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--pl-borda);
    background: var(--pl-cartao);
}

.pl-voltar:active {
    background: var(--pl-areia);
}

/* Botões */

.pl-botao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 58px;
    padding: 0 24px;
    border: none;
    border-radius: 999px;
    font: 600 16px var(--pl-sans);
    cursor: pointer;
    transition: transform .1s ease, background-color .15s ease;
}

.pl-botao:active:not(:disabled) {
    transform: scale(.98);
}

.pl-botao-ambar {
    background: var(--pl-ambar);
    color: var(--pl-tinta);
    --pl-icone-primaria: var(--pl-tinta);
    --pl-icone-secundaria: var(--pl-cartao);
}

.pl-botao-tinta {
    background: var(--pl-tinta);
    color: var(--pl-papel);
    --pl-icone-primaria: var(--pl-papel);
    --pl-icone-secundaria: var(--pl-ambar);
}

.pl-botao-contorno {
    background: transparent;
    color: var(--pl-tinta);
    border: 1px solid var(--pl-tracejado);
}

.pl-botao-texto {
    background: transparent;
    color: var(--pl-tinta);
    height: 48px;
}

.pl-botao-perigo {
    color: var(--pl-vermelho-escuro);
    --pl-icone-primaria: var(--pl-vermelho-escuro);
    --pl-icone-secundaria: #F2B5AC;
}

.pl-botao:disabled {
    background: var(--pl-desativado);
    color: var(--pl-suave);
    border-color: transparent;
    cursor: default;
    --pl-icone-primaria: var(--pl-suave);
    --pl-icone-secundaria: var(--pl-areia);
}

.pl-botao-texto:disabled {
    background: transparent;
}

.pl-botao:focus-visible,
.pl-pilula:focus-visible,
.pl-voltar:focus-visible,
.pl-botao-icone:focus-visible {
    outline: 2px solid var(--pl-ambar);
    outline-offset: 2px;
}

.pl-pilula {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border: none;
    border-radius: 999px;
    background: var(--pl-tinta);
    color: var(--pl-papel);
    font: 500 13px var(--pl-sans);
    cursor: pointer;
}

.pl-botao-icone {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.pl-botao-icone:active:not(:disabled) {
    background: var(--pl-areia);
}

.pl-botao-icone:disabled {
    cursor: default;
    --pl-icone-primaria: var(--pl-suave);
    --pl-icone-secundaria: var(--pl-desativado);
}

/* Seletor de duas ou três opções (vídeo ou voz, entrar ou criar conta, como ouvir na chamada) */

.pl-segmentos {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    padding: 4px;
    border-radius: 999px;
    background: var(--pl-areia);
}

.pl-segmentos > button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 8px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--pl-suave);
    font: 500 14px var(--pl-sans);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
    --pl-icone-primaria: var(--pl-suave);
    --pl-icone-secundaria: var(--pl-tracejado);
}

.pl-segmentos > button[aria-checked="true"] {
    background: var(--pl-tinta);
    color: var(--pl-papel);
    --pl-icone-primaria: var(--pl-papel);
    --pl-icone-secundaria: var(--pl-ambar);
}

.pl-segmentos > button:focus-visible {
    outline: 2px solid var(--pl-ambar);
    outline-offset: -2px;
}

.pl-segmentos-escuro {
    background: var(--pl-tinta-2);
}

.pl-segmentos-escuro > button {
    height: 38px;
    color: var(--pl-claro-sobre-escuro);
    font-size: 13px;
}

.pl-segmentos-escuro > button[aria-checked="true"] {
    background: var(--pl-papel);
    color: var(--pl-tinta);
    font-weight: 600;
}

/* Cartões e listas */

.pl-cartao {
    background: var(--pl-cartao);
    border: 1px solid var(--pl-borda);
    border-radius: 22px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pl-lista {
    background: var(--pl-cartao);
    border: 1px solid var(--pl-borda);
    border-radius: 22px;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
}

.pl-lista > * + * {
    border-top: 1px solid var(--pl-divisoria);
}

.pl-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    min-width: 0;
}

.pl-item-link {
    color: inherit;
}

.pl-item-link:active {
    background: var(--pl-areia);
}

.pl-circulo {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pl-areia);
    font: 500 11px var(--pl-mono);
    color: var(--pl-tinta);
}

.pl-circulo-ambar {
    background: var(--pl-ambar);
    font-size: 13px;
}

.pl-circulo-vazado {
    background: transparent;
    border: 1.5px solid var(--pl-tinta);
    font-size: 13px;
}

.pl-item-texto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pl-item-texto > strong {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 600 15px var(--pl-sans);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pl-item-texto > span,
.pl-item-texto > small {
    font: 400 13px/1.35 var(--pl-sans);
    color: var(--pl-suave);
}

.pl-item-valor {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    font: 600 15px var(--pl-sans);
    font-variant-numeric: tabular-nums;
}

.pl-item-valor small {
    font: 400 12px var(--pl-sans);
    color: var(--pl-suave);
}

.pl-item-convidado {
    font: 400 12px var(--pl-sans);
    color: var(--pl-suave);
}

.pl-entrada {
    color: var(--pl-ok-texto);
}

.pl-selo {
    flex: none;
    font: 500 10px var(--pl-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--pl-ambar);
    color: var(--pl-tinta);
    border-radius: 6px;
    padding: 3px 6px;
}

/* Início */

.pl-inicio-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -12px 4px 0;
}

.pl-marca-linha {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 400 24px/1 var(--pl-serifa);
}

.pl-avatar-topo {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pl-tinta);
    color: var(--pl-papel);
    font: 500 14px var(--pl-sans);
}

.pl-ola {
    font: 400 38px/1.05 var(--pl-serifa);
    padding: 14px 4px 6px;
    overflow-wrap: anywhere;
}

.pl-saldo-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--pl-cartao);
    border: 1px solid var(--pl-borda);
    border-radius: 18px;
    padding: 14px 14px 14px 18px;
}

.pl-saldo-linha > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pl-saldo-linha strong {
    font: 600 16px var(--pl-sans);
}

.pl-saldo-linha span {
    font: 400 13px var(--pl-sans);
    color: var(--pl-suave);
}

.pl-acao-destaque {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px;
    border-radius: 26px;
    background: var(--pl-tinta);
    color: var(--pl-papel);
    transition: transform .1s ease;
}

.pl-acao-destaque-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    --pl-icone-primaria: var(--pl-papel);
    --pl-icone-secundaria: var(--pl-ambar);
}

.pl-acao-destaque .pl-circulo {
    width: 48px;
    height: 48px;
    background: var(--pl-ambar);
    --pl-icone-primaria: var(--pl-tinta);
    --pl-icone-secundaria: var(--pl-cartao);
}

.pl-acao-titulo {
    display: block;
    font: 400 30px/1 var(--pl-serifa);
}

.pl-acao-destaque .pl-acao-detalhe {
    display: block;
    margin-top: 6px;
    font: 400 14px/1.4 var(--pl-sans);
    color: var(--pl-suave-escuro);
}

.pl-acoes-duplas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.pl-acao {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    background: var(--pl-cartao);
    border: 1px solid var(--pl-borda);
    color: var(--pl-tinta);
    transition: transform .1s ease;
}

.pl-acao strong {
    display: block;
    font: 600 15px var(--pl-sans);
}

.pl-acao .pl-acao-detalhe {
    display: block;
    margin-top: 4px;
    font: 400 13px/1.35 var(--pl-sans);
    color: var(--pl-suave);
}

.pl-acao-codigo {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1.5px dashed var(--pl-tracejado);
    border-radius: 20px;
    color: var(--pl-tinta);
    transition: transform .1s ease;
}

.pl-acao:active,
.pl-acao-destaque:active,
.pl-acao-codigo:active {
    transform: scale(.98);
}

.pl-caixinhas {
    flex: none;
    display: flex;
    gap: 4px;
}

.pl-caixinhas > span {
    width: 18px;
    height: 24px;
    border-radius: 5px;
    background: var(--pl-areia-2);
}

/* Saldo em destaque (Créditos) */

.pl-saldo-grande {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
    border-radius: 26px;
    background: var(--pl-tinta);
    color: var(--pl-papel);
}

.pl-saldo-grande > div {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.pl-saldo-numero {
    font: 400 68px/.9 var(--pl-serifa);
    font-variant-numeric: lining-nums;
}

.pl-saldo-unidade {
    font: 400 16px var(--pl-sans);
    color: var(--pl-suave-escuro);
}

.pl-saldo-estimativa {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 400 14px var(--pl-sans);
    color: var(--pl-claro-sobre-escuro);
}

/* Créditos: pacotes e extrato */

.pl-pacote {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.pl-lista > .pl-pacote + .pl-pacote {
    border-top: 1px solid var(--pl-divisoria);
}

.pl-pacote:disabled {
    cursor: default;
}

.pl-pacote:active:not(:disabled) {
    background: var(--pl-papel);
}

.pl-pacote:focus-visible {
    outline: 2px solid var(--pl-ambar);
    outline-offset: -2px;
}

.pl-preco {
    flex: none;
    font: 500 15px var(--pl-mono);
}

/* Histórico */

.pl-filtros {
    display: flex;
    gap: 8px;
    padding: 4px 0 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.pl-filtros > button {
    flex: none;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--pl-desativado);
    border-radius: 999px;
    background: transparent;
    color: var(--pl-tinta);
    font: 500 13px var(--pl-sans);
    cursor: pointer;
}

.pl-filtros > button[aria-pressed="true"] {
    background: var(--pl-tinta);
    border-color: var(--pl-tinta);
    color: var(--pl-papel);
}

/* Escolha numa lista (idioma, como ouvir): o visual do mockup com um <select> nativo transparente por cima. */

.pl-escolha {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    --pl-icone-secundaria: var(--pl-tinta);
}

.pl-escolha > select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    font-size: 16px;
    cursor: pointer;
    appearance: none;
}

.pl-escolha > select:disabled {
    cursor: default;
}

.pl-escolha:focus-within {
    outline: 2px solid var(--pl-ambar);
    outline-offset: 2px;
    border-radius: 12px;
}

.pl-escolha-texto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pl-escolha-texto > small {
    font: 400 12px var(--pl-sans);
    color: var(--pl-suave);
}

.pl-escolha-texto > strong {
    font: 600 16px var(--pl-sans);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pl-escolha-circulo {
    padding: 14px 0;
}

.pl-escolha-linha {
    padding: 12px 0;
}

.pl-escolha-linha .pl-escolha-texto > strong {
    font: 500 15px var(--pl-sans);
}

.pl-grupo-escolha {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pl-escolha-caixa {
    height: 56px;
    padding: 0 16px;
    gap: 12px;
    border-radius: 16px;
    background: var(--pl-cartao);
    border: 1px solid var(--pl-borda);
}

.pl-escolha-caixa:focus-within {
    outline: none;
    border: 1.5px solid var(--pl-tinta);
}

.pl-escolha-caixa .pl-escolha-texto > strong {
    font: 500 16px var(--pl-sans);
}

.pl-etiqueta {
    flex: none;
    font: 500 12px var(--pl-mono);
    background: var(--pl-ambar);
    border-radius: 6px;
    padding: 3px 6px;
}

.pl-linha-tracejada {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px dashed var(--pl-desativado);
}

.pl-cartao-idiomas {
    padding: 6px 18px;
    gap: 0;
}

.pl-linha-tracejada .pl-item-texto > strong {
    font-weight: 500;
}

.pl-cartao-idiomas > .pl-escolha + .pl-escolha {
    border-top: 1px dashed var(--pl-desativado);
}

/* Campos de texto: rótulo acima e uma caixa arredondada (SfTextBox sem rótulo flutuante). */

.pl-grupo-campo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pl-rotulo-campo {
    font: 400 13px var(--pl-sans);
    color: var(--pl-suave);
}

.pl-caixa .e-input-group.e-control-wrapper,
.pl-caixa .e-input-group.e-control-wrapper:not(.e-disabled):hover {
    display: flex;
    align-items: center;
    height: 54px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--pl-borda) !important;
    border-radius: 16px;
    background: var(--pl-cartao);
    box-shadow: none;
}

.pl-caixa .e-input-group.e-control-wrapper.e-input-focus {
    border: 1.5px solid var(--pl-tinta) !important;
}

.pl-caixa .e-input-group.e-control-wrapper.e-error {
    border-color: var(--pl-vermelho) !important;
}

.pl-caixa .e-input-group.e-control-wrapper::before,
.pl-caixa .e-input-group.e-control-wrapper::after {
    display: none !important;
}

.pl-caixa .e-input-group.e-control-wrapper input.e-input {
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    font: 500 16px var(--pl-sans);
    color: var(--pl-tinta);
}

.pl-caixa .e-input-group.e-control-wrapper input.e-input::placeholder {
    color: var(--pl-tracejado);
    font-weight: 400;
}

.pl-erro-campo {
    margin: 0;
    color: var(--pl-vermelho-escuro);
    font: 400 13px/1.3 var(--pl-sans);
}

/* Campo de senha: o olho fica dentro da caixa, à direita, com a área de toque de um botão. */

.pl-campo-senha {
    position: relative;
}

.pl-campo-senha .e-input-group.e-control-wrapper input.e-input {
    padding-right: 40px;
}

.pl-campo-senha input.e-input[type="password"] {
    letter-spacing: .2em;
}

.pl-ver-senha {
    position: absolute;
    right: 5px;
    bottom: 5px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    --pl-icone-primaria: var(--pl-suave);
    --pl-icone-secundaria: var(--pl-desativado);
}

.pl-ver-senha:active {
    background: var(--pl-areia);
}

.pl-ver-senha:focus-visible {
    outline: 2px solid var(--pl-ambar);
    outline-offset: -2px;
}

/* Regras da senha: selos que ficam verdes quando atendidos. */

.pl-regras {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pl-regras > li {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px 0 7px;
    border-radius: 999px;
    background: var(--pl-areia);
    color: var(--pl-suave);
    font: 500 12px var(--pl-sans);
    transition: background-color .15s ease, color .15s ease;
}

.pl-regras > li.pl-regra-ok {
    background: var(--pl-ok-fundo);
    color: var(--pl-ok-texto);
}

/* "Esqueci minha senha" */

.pl-link-esqueci {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    margin-top: -6px;
    padding: 0 4px;
    border: none;
    background: transparent;
    color: var(--pl-tinta);
    font: 500 13px var(--pl-sans);
    cursor: pointer;
    --pl-icone-primaria: var(--pl-tinta);
    --pl-icone-secundaria: var(--pl-ambar);
}

.pl-link-esqueci:disabled {
    color: var(--pl-suave);
    cursor: default;
}

.pl-link-esqueci:focus-visible {
    outline: 2px solid var(--pl-ambar);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Interruptor (liga e desliga) */

.pl-interruptor {
    position: relative;
    flex: none;
    width: 48px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 14px;
    background: var(--pl-desativado);
    cursor: pointer;
    transition: background-color .15s ease;
}

.pl-interruptor::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pl-cartao);
    transition: left .15s ease, background-color .15s ease;
}

.pl-interruptor[aria-checked="true"] {
    background: var(--pl-tinta);
}

.pl-interruptor[aria-checked="true"]::after {
    left: 23px;
    background: var(--pl-ambar);
}

.pl-interruptor:focus-visible {
    outline: 2px solid var(--pl-ambar);
    outline-offset: 2px;
}

/* Conta */

.pl-perfil {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 4px 6px;
    min-width: 0;
}

.pl-perfil > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pl-perfil strong {
    font: 600 17px var(--pl-sans);
}

.pl-perfil > div > span {
    font: 400 14px var(--pl-sans);
    color: var(--pl-suave);
    overflow: hidden;
    text-overflow: ellipsis;
}

.pl-avatar-conta {
    flex: none;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--pl-tinta);
    color: var(--pl-papel);
    font: 400 26px var(--pl-serifa);
}

.pl-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    min-height: 54px;
}

.pl-linha > span {
    flex: 1;
    font: 500 15px var(--pl-sans);
}

.pl-linha-campo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 0;
}

.pl-linha-campo > small {
    font: 400 12px var(--pl-sans);
    color: var(--pl-suave);
}

.pl-linha-campo > input {
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    font: 500 15px var(--pl-sans);
    color: var(--pl-tinta);
}

.pl-linha-campo:focus-within > small {
    color: var(--pl-ambar-escuro);
}

.pl-linha-link {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 54px;
    padding: 0 16px;
    border-radius: 22px;
    background: var(--pl-cartao);
    border: 1px solid var(--pl-borda);
    color: var(--pl-tinta);
    font: 500 15px var(--pl-sans);
    --pl-icone-secundaria: var(--pl-ambar);
}

.pl-linha-link > span {
    flex: 1;
}

.pl-linha-link:active {
    background: var(--pl-papel);
}

.pl-acoes-conta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 16px;
}

.pl-acoes-conta .pl-botao {
    height: 50px;
}

.pl-versao {
    padding-top: 6px;
    color: var(--pl-suave);
    font: 400 11px var(--pl-mono);
    letter-spacing: .06em;
}

/* Telas de acesso (entrar, criar conta) */

.pl-acesso {
    width: 100%;
    max-width: 480px;
    min-height: 100dvh;
    margin: 0 auto;
    padding: calc(var(--pl-topo-seguro) + 48px) 20px calc(var(--pl-base-segura) + 24px);
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.pl-marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}

.pl-marca h1 {
    font: 400 52px/1 var(--pl-serifa);
    letter-spacing: -.01em;
}

.pl-marca p {
    max-width: 300px;
    font: 400 15px/1.5 var(--pl-sans);
    color: var(--pl-suave);
}

.pl-formulario {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/*
  Código da chamada (SfOtpInput): seis caixas, com um traço entre as três primeiras e as três últimas.
  O primeiro filho do componente é um <input type="hidden">; as caixas são do 2º ao 7º filho.
*/

.e-otpinput.e-outline.pl-codigo {
    --pl-otp: min(46px, calc((100% - 62px) / 6));
    position: relative;
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    padding: 18px 0 4px;
}

.e-otpinput.e-outline.pl-codigo .e-otp-input-field {
    box-sizing: border-box;
    flex: none;
    width: var(--pl-otp);
    height: 60px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--pl-borda);
    border-radius: 14px;
    background: var(--pl-cartao);
    box-shadow: none;
    font: 500 26px var(--pl-mono);
    color: var(--pl-tinta);
    text-align: center;
    text-transform: uppercase;
}

.e-otpinput.e-outline.pl-codigo .e-otp-input-field:not(:placeholder-shown) {
    border: 1.5px solid var(--pl-tinta);
}

.e-otpinput.e-outline.pl-codigo .e-otp-input-field:focus {
    border: 2px solid var(--pl-ambar);
    box-shadow: 0 0 0 4px var(--pl-ambar-claro);
    outline: none;
}

.e-otpinput.e-outline.pl-codigo .e-otp-input-field:nth-child(4) {
    margin-right: 22px;
}

.e-otpinput.e-outline.pl-codigo::after {
    content: "";
    position: absolute;
    top: calc(18px + 29px);
    left: calc(3 * var(--pl-otp) + 26px);
    width: 10px;
    height: 2px;
    background: var(--pl-tracejado);
    pointer-events: none;
}

/* Avisos */

.e-toast-container .e-toast.pl-toast-sucesso,
.e-toast-container .e-toast.pl-toast-alerta,
.e-toast-container .e-toast.pl-toast-erro,
.e-toast-container .e-toast.pl-toast-info {
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(21, 22, 31, .25);
    font: 400 14px/1.45 var(--pl-sans);
}

.e-toast-container .e-toast .e-toast-message .e-toast-content {
    color: inherit;
    font: inherit;
    padding: 0;
}

.e-toast-container .e-toast.pl-toast-sucesso {
    background: var(--pl-ok-texto);
    color: #fff;
}

.e-toast-container .e-toast.pl-toast-alerta {
    background: var(--pl-ambar);
    color: var(--pl-tinta);
}

.e-toast-container .e-toast.pl-toast-erro {
    background: var(--pl-vermelho-escuro);
    color: #fff;
}

.e-toast-container .e-toast.pl-toast-info {
    background: var(--pl-tinta);
    color: var(--pl-papel);
}

.e-toast-container {
    margin-bottom: calc(var(--pl-base-segura) + 84px);
}

/* Diálogos */

.e-dialog.pl-dialogo {
    border-radius: 24px;
    background: var(--pl-cartao);
    box-shadow: 0 24px 64px rgba(21, 22, 31, .3);
    overflow: hidden;
}

.e-dialog.pl-dialogo .e-dlg-header-content {
    padding: 22px 22px 6px;
    background: var(--pl-cartao);
    border: none;
}

.e-dialog.pl-dialogo .e-dlg-header,
.e-dialog.pl-dialogo .e-dlg-header * {
    font: 400 28px/1.1 var(--pl-serifa);
    color: var(--pl-tinta);
}

.e-dialog.pl-dialogo .e-dlg-content {
    padding: 6px 22px 8px;
    background: var(--pl-cartao);
    font: 400 15px/1.5 var(--pl-sans);
    color: var(--pl-suave);
}

.e-dialog.pl-dialogo .e-dlg-content p + p {
    margin-top: 6px;
}

.e-dialog.pl-dialogo .e-footer-content {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px 18px;
    background: var(--pl-cartao);
    border: none;
}

.e-dialog.pl-dialogo .e-footer-content .e-btn {
    height: 44px;
    margin: 0;
    padding: 0 18px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--pl-tinta);
    font: 600 14px var(--pl-sans);
    text-transform: none;
    box-shadow: none;
}

/* O tema pinta o botão principal "flat" (sem fundo) com seletores mais fortes: daí o !important. */
.e-dialog.pl-dialogo .e-footer-content .e-btn.e-primary {
    background: var(--pl-tinta) !important;
    color: var(--pl-papel) !important;
}

.e-dialog.pl-dialogo .e-footer-content .e-btn.e-primary.pl-perigo {
    background: var(--pl-vermelho) !important;
    color: #fff !important;
}

.e-dialog.pl-dialogo .e-footer-content .e-btn:focus-visible {
    outline: 2px solid var(--pl-ambar);
    outline-offset: 2px;
}

.e-dialog.pl-dialogo .pl-grupo-campo {
    margin-top: 16px;
}

.e-dlg-overlay {
    background-color: rgba(21, 22, 31, .55);
}

/* Indicador de carregamento */

.e-spinner-pane .e-spinner-inner .e-spin-material3 {
    stroke: var(--pl-tinta);
}

.pl-chamada .e-spinner-pane .e-spinner-inner .e-spin-material3 {
    stroke: var(--pl-ambar);
}

/* Chamada: tela escura; o vídeo da outra pessoa (ou os anéis) fica atrás de tudo. */

.pl-tela-cheia {
    min-height: 100dvh;
}

.pl-chamada {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--pl-tinta);
    color: var(--pl-papel);
    --pl-icone-primaria: var(--pl-papel);
    --pl-icone-secundaria: var(--pl-ambar);
}

.pl-palco {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.pl-video-remoto {
    position: absolute;
    inset: 0;
    background: var(--pl-tinta);
}

.pl-video-remoto video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pl-aneis {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}

.pl-aneis > span {
    position: absolute;
    border-radius: 50%;
    border: 1px solid;
}

.pl-aneis > span:nth-child(1) {
    width: 560px;
    height: 560px;
    margin: -280px 0 0 -280px;
    border-color: #272221;
}

.pl-aneis > span:nth-child(2) {
    width: 420px;
    height: 420px;
    margin: -210px 0 0 -210px;
    border-color: #342C23;
}

.pl-aneis > span:nth-child(3) {
    width: 290px;
    height: 290px;
    margin: -145px 0 0 -145px;
    border-color: #463825;
}

.pl-avatar-chamada {
    position: relative;
    display: grid;
    place-items: center;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: var(--pl-ambar);
    color: var(--pl-tinta);
    font: 400 52px/1 var(--pl-serifa);
    box-shadow: 0 0 0 0 var(--pl-tinta-2);
    transition: box-shadow .2s ease;
}

.pl-avatar-chamada.pl-falando {
    box-shadow: 0 0 0 12px #4E422B;
}

.pl-chamada-topo {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: calc(var(--pl-topo-seguro) + 14px) 20px 10px 24px;
}

/* Com a própria câmera à mostra, o topo abre espaço para a miniatura no canto. */
.pl-chamada-com-local .pl-chamada-topo {
    min-height: calc(var(--pl-topo-seguro) + 152px);
    padding-right: 128px;
}

.pl-chamada-titulo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pl-chamada-titulo strong {
    font: 600 17px var(--pl-sans);
}

.pl-chamada-titulo span {
    font: 400 13px var(--pl-sans);
    color: var(--pl-suave-escuro);
}

.pl-chamada-numeros {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
}

.pl-cronometro {
    font: 500 17px var(--pl-mono);
    font-variant-numeric: tabular-nums;
}

.pl-chamada-numeros > span:not(.pl-cronometro) {
    font: 400 12px var(--pl-sans);
    color: var(--pl-suave-escuro);
}

.pl-chamada-chips {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.pl-chip-escuro {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    background: rgba(21, 22, 31, .7);
    font: 500 13px var(--pl-sans);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sem vídeo atrás, o chip translúcido sumiria no fundo: ganha a superfície escura. */
.pl-chamada:not(.pl-chamada-com-video) .pl-chip-escuro {
    background: var(--pl-tinta-2);
}

.pl-chip-escuro.pl-mono {
    padding: 8px 14px;
    font: 500 12px var(--pl-mono);
    font-variant-numeric: tabular-nums;
}

.pl-chip-suave {
    color: var(--pl-claro-sobre-escuro);
    font-size: 12px;
    padding: 6px 12px;
}

.pl-video-local {
    position: absolute;
    top: calc(var(--pl-topo-seguro) + 14px);
    right: 20px;
    z-index: 2;
    width: 96px;
    height: 128px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--pl-tinta-3);
    border: 1px solid #45464F;
}

.pl-video-local video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pl-espelhado {
    transform: scaleX(-1);
}

/* O meio fica abaixo do resto: os anéis passam por trás do topo e dos controles. */
.pl-chamada-meio {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pl-convite {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 0 28px;
    text-align: center;
}

.pl-convite-rotulo {
    font: 500 11px var(--pl-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pl-suave-escuro);
}

.pl-convite-codigo {
    font: 500 52px/1 var(--pl-mono);
    letter-spacing: .1em;
    color: var(--pl-ambar);
    white-space: nowrap;
}

.pl-convite p {
    margin: 4px 0 8px;
    max-width: 330px;
    font: 400 15px/1.5 var(--pl-sans);
    color: var(--pl-claro-sobre-escuro);
    text-wrap: pretty;
}

.pl-convite-acoes {
    display: flex;
    gap: 10px;
}

.pl-convite-acoes .pl-botao {
    width: auto;
    height: 48px;
    padding: 0 22px;
    font-size: 15px;
    gap: 8px;
}

.pl-botao-contorno-claro {
    background: transparent;
    color: var(--pl-papel);
    border: 1px solid #6F6D6A;
    font-weight: 500;
    --pl-icone-primaria: var(--pl-papel);
    --pl-icone-secundaria: var(--pl-ambar);
}

.pl-ativar-som {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    width: auto;
    height: 44px;
    padding: 0 18px;
    font-size: 14px;
    white-space: nowrap;
}

.pl-faixa-aviso {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 14px 12px;
    padding: 10px 10px 10px 16px;
    border-radius: 18px;
    background: var(--pl-ambar);
    color: var(--pl-tinta);
    font: 500 13px/1.35 var(--pl-sans);
}

.pl-faixa-aviso .pl-pilula {
    height: 34px;
}

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

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

.pl-faixa-topo {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 8px 16px;
    white-space: nowrap;
}

/* Legendas da chamada: um cartão escuro com as últimas falas (desenhadas pelo legendas.js). */

.pl-legendas {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 34vh;
    margin: 0 14px 16px;
    padding: 18px 20px;
    overflow-y: auto;
    border-radius: 26px;
    background: rgba(21, 22, 31, .88);
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.pl-legendas:empty {
    display: none;
}

.pl-legendas .pl-fala {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pl-legendas .pl-fala + .pl-fala {
    padding-top: 14px;
    border-top: 1px solid #2E2F39;
}

.pl-fala-quem {
    font: 500 11px var(--pl-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pl-suave-escuro);
}

.pl-fala-quem:empty,
.pl-fala-principal:empty,
.pl-fala-secundario:empty {
    display: none;
}

/* Fala da outra pessoa: o original pequeno em cima e a tradução em destaque embaixo. */
.pl-legendas .pl-fala:not(.pl-fala-propria) .pl-fala-secundario {
    order: 1;
    font: 400 14px/1.4 var(--pl-sans);
    color: var(--pl-cinza-sobre-escuro);
}

.pl-legendas .pl-fala:not(.pl-fala-propria) .pl-fala-principal {
    order: 2;
    font: 400 26px/1.15 var(--pl-serifa);
    color: var(--pl-papel);
}

/* Fala própria: o que a pessoa disse e, menor, como saiu traduzido. */
.pl-legendas .pl-fala-propria .pl-fala-quem {
    color: var(--pl-ambar);
}

.pl-legendas .pl-fala-propria .pl-fala-principal {
    font: 400 15px/1.4 var(--pl-sans);
    color: var(--pl-claro-sobre-escuro);
}

.pl-legendas .pl-fala-propria .pl-fala-secundario {
    font: 400 13px/1.4 var(--pl-sans);
    color: var(--pl-cinza-sobre-escuro);
}

/* Como ouvir e controles */

.pl-escuta {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 20px 16px;
}

.pl-chamada-com-video .pl-segmentos-escuro {
    background: rgba(35, 36, 47, .9);
}

.pl-mistura {
    display: flex;
    align-items: center;
    gap: 12px;
    font: 500 12px var(--pl-sans);
    color: var(--pl-claro-sobre-escuro);
}

.pl-mistura .pl-slider {
    flex: 1;
}

.pl-mistura .e-slider-container .e-slider .e-range {
    background-color: var(--pl-ambar);
}

.pl-mistura .e-slider-container .e-slider .e-slider-track {
    background-color: var(--pl-tinta-3);
}

.pl-mistura .e-slider-container .e-slider .e-handle {
    background-color: var(--pl-ambar);
    border-color: var(--pl-ambar);
}

.pl-controles {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 0 20px calc(var(--pl-base-segura) + 34px);
}

.pl-controles-video {
    justify-content: space-between;
    gap: 8px;
}

.pl-controle {
    flex: none;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--pl-tinta-2);
    color: var(--pl-papel);
    cursor: pointer;
    --pl-icone-primaria: var(--pl-papel);
    --pl-icone-secundaria: var(--pl-cinza-sobre-escuro);
}

.pl-controles-video .pl-controle {
    width: 56px;
    height: 56px;
}

.pl-controle:disabled {
    cursor: default;
    --pl-icone-primaria: #5E5B66;
    --pl-icone-secundaria: #45464F;
}

.pl-controle.pl-desligado {
    background: var(--pl-papel);
    --pl-icone-primaria: var(--pl-tinta);
    --pl-icone-secundaria: var(--pl-suave);
}

.pl-controle-texto {
    font: 600 13px var(--pl-mono);
    color: var(--pl-ambar);
}

.pl-controle-texto.pl-legendas-desligadas {
    color: #5E5B66;
    text-decoration: line-through;
}

.pl-controle.pl-desligar {
    width: 88px;
    border-radius: 30px;
    background: var(--pl-vermelho);
    --pl-icone-primaria: #fff;
    --pl-icone-secundaria: #F6C3BC;
}

.pl-controles-video .pl-controle.pl-desligar {
    width: 80px;
    border-radius: 28px;
}

.pl-controle:focus-visible {
    outline: 2px solid var(--pl-ambar);
    outline-offset: 3px;
}

.pl-controle:active:not(:disabled) {
    transform: scale(.95);
}

/* Chat: cada um escreve ou grava no seu idioma e lê (ou ouve) o outro no dele. Tela de leitura, em papel. */

.pl-chat {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    max-width: 640px;
    margin: 0 auto;
    background: var(--pl-papel);
    color: var(--pl-tinta);
}

.pl-chat-topo {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: calc(var(--pl-topo-seguro) + 10px) 10px 10px 14px;
    background: var(--pl-papel);
    border-bottom: 1px solid var(--pl-borda);
}

.pl-chat-topo > .pl-voltar {
    width: 40px;
    height: 40px;
    margin-right: 6px;
}

.pl-chat-topo > .pl-circulo {
    width: 38px;
    height: 38px;
    margin-right: 8px;
}

.pl-chat-quem {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pl-chat-quem > strong {
    font: 600 15px var(--pl-sans);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pl-chat-quem > span {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 400 12px var(--pl-sans);
    color: var(--pl-suave);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pl-chat-quem > span > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pl-chat-ponto-fora {
    background: var(--pl-tracejado);
}

.pl-chat-topo .pl-botao-icone {
    flex: none;
    width: 40px;
    height: 40px;
}

.pl-chat-faixa {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--pl-ambar);
    color: var(--pl-tinta);
    font: 500 12px var(--pl-sans);
    --pl-icone-primaria: var(--pl-tinta);
    --pl-icone-secundaria: var(--pl-cartao);
}

.pl-chat-ligacao {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 14px 0;
    padding: 10px 12px;
    border-radius: 18px;
    background: var(--pl-tinta);
    color: var(--pl-papel);
    font: 400 13px/1.3 var(--pl-sans);
    --pl-icone-primaria: var(--pl-papel);
    --pl-icone-secundaria: var(--pl-ambar);
}

.pl-chat-ligacao > span {
    flex: 1;
    min-width: 0;
}

.pl-chat-ligacao .pl-pilula {
    height: 34px;
    padding: 0 14px;
    background: var(--pl-ambar);
    color: var(--pl-tinta);
    font-weight: 600;
}

.pl-chat-ligacao .pl-pilula.pl-chat-recusar {
    background: transparent;
    color: var(--pl-claro-sobre-escuro);
    font-weight: 500;
    padding: 0 8px;
}

.pl-chat-ligacao .pl-pilula:disabled {
    opacity: .6;
}

/* Lista de mensagens */

.pl-chat-lista {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 14px 10px;
}

.pl-chat-lista > :first-child {
    margin-top: auto;
}

.pl-chat-convite {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    padding: 22px 18px 16px;
    border: 1px solid var(--pl-borda);
    border-radius: 22px;
    background: var(--pl-cartao);
    text-align: center;
}

.pl-chat-convite-rotulo {
    font: 500 11px var(--pl-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pl-suave);
}

.pl-chat-convite-codigo {
    font: 500 40px/1 var(--pl-mono);
    letter-spacing: .1em;
    color: var(--pl-tinta);
    white-space: nowrap;
}

.pl-chat-convite p {
    max-width: 300px;
    font: 400 14px/1.45 var(--pl-sans);
    color: var(--pl-suave);
    text-wrap: pretty;
}

.pl-chat-convite-acoes {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.pl-chat-convite-acoes .pl-botao {
    width: auto;
    height: 46px;
    padding: 0 20px;
    font-size: 14px;
    gap: 8px;
}

.pl-chat-convite small {
    font: 400 12px/1.4 var(--pl-sans);
    color: var(--pl-suave);
    text-wrap: pretty;
}

.pl-chat-dia {
    align-self: center;
    margin: 8px 0 4px;
}

.pl-chat-dia > span {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--pl-areia);
    font: 500 11px var(--pl-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pl-suave);
}

.pl-chat-sistema {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--pl-areia);
    font: 400 12px var(--pl-sans);
    color: var(--pl-suave);
    --pl-icone-primaria: var(--pl-suave);
    --pl-icone-secundaria: var(--pl-tracejado);
}

.pl-chat-linha {
    display: flex;
    justify-content: flex-start;
}

.pl-chat-linha.pl-chat-minha {
    justify-content: flex-end;
}

.pl-chat-balao {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    max-width: 82%;
    padding: 10px 14px 8px;
    border: 1px solid var(--pl-borda);
    border-radius: 20px 20px 20px 6px;
    background: var(--pl-cartao);
    overflow-wrap: anywhere;
}

.pl-chat-minha .pl-chat-balao {
    align-items: flex-end;
    border-color: transparent;
    border-radius: 20px 20px 6px 20px;
    background: var(--pl-ambar-claro);
}

.pl-chat-texto {
    font: 400 15px/1.4 var(--pl-sans);
    white-space: pre-wrap;
    text-wrap: pretty;
}

.pl-chat-aviso {
    font: 400 12px/1.35 var(--pl-sans);
    color: var(--pl-ambar-escuro);
}

.pl-chat-ver-original {
    padding: 2px 0;
    border: none;
    background: none;
    font: 500 12px var(--pl-sans);
    color: var(--pl-suave);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.pl-chat-ver-original:focus-visible,
.pl-chat-tocar:focus-visible,
.pl-chat-botao:focus-visible,
.pl-chat-mini-seg > button:focus-visible {
    outline: 2px solid var(--pl-ambar);
    outline-offset: 2px;
}

.pl-chat-original {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 6px;
    border-top: 1px dashed var(--pl-tracejado);
}

.pl-chat-original small {
    font: 500 10px var(--pl-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pl-suave);
}

.pl-chat-original p {
    font: 400 13px/1.4 var(--pl-sans);
    color: var(--pl-suave);
    white-space: pre-wrap;
}

.pl-chat-hora {
    align-self: flex-end;
    font: 400 11px var(--pl-mono);
    color: var(--pl-suave);
}

.pl-chat-vazio {
    align-self: center;
    max-width: 280px;
    margin-top: 8px;
    text-align: center;
    font: 400 13px/1.45 var(--pl-sans);
    color: var(--pl-suave);
    text-wrap: pretty;
}

/* Mensagem de voz */

.pl-chat-voz {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.pl-chat-tocar {
    flex: none;
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--pl-tinta);
    cursor: pointer;
    --pl-icone-primaria: var(--pl-papel);
    --pl-icone-secundaria: var(--pl-ambar);
}

.pl-chat-tocar:disabled {
    background: var(--pl-desativado);
    cursor: default;
    --pl-icone-primaria: var(--pl-suave);
    --pl-icone-secundaria: var(--pl-areia);
}

.pl-chat-onda {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 24px;
}

.pl-chat-onda > i {
    display: block;
    width: 3px;
    height: 8px;
    border-radius: 2px;
    background: var(--pl-tracejado);
}

.pl-chat-onda > i:nth-child(3n + 1) { height: 14px; }
.pl-chat-onda > i:nth-child(4n + 2) { height: 20px; }
.pl-chat-onda > i:nth-child(5n) { height: 10px; }

.pl-chat-onda-ativa > i {
    background: var(--pl-ambar-escuro);
    animation: pl-chat-onda 1s ease-in-out infinite;
}

.pl-chat-onda-ativa > i:nth-child(even) {
    animation-delay: .25s;
}

@keyframes pl-chat-onda {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(.45); }
}

.pl-chat-mini-seg {
    display: inline-flex;
    padding: 2px;
    border-radius: 999px;
    background: var(--pl-areia);
}

.pl-chat-mini-seg > button {
    height: 24px;
    padding: 0 10px;
    border: none;
    border-radius: 999px;
    background: transparent;
    font: 500 11px var(--pl-sans);
    color: var(--pl-suave);
    cursor: pointer;
}

.pl-chat-mini-seg > button[aria-checked="true"] {
    background: var(--pl-tinta);
    color: var(--pl-papel);
}

/* Rodapé: encerrada, sem crédito e compositor */

.pl-chat-fim {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 16px calc(var(--pl-base-segura) + 16px);
    border-top: 1px solid var(--pl-borda);
    background: var(--pl-areia);
    font: 500 14px var(--pl-sans);
    color: var(--pl-suave);
    --pl-icone-primaria: var(--pl-suave);
    --pl-icone-secundaria: var(--pl-tracejado);
}

.pl-chat-sem-credito {
    flex: none;
    margin: 0 14px 8px;
}

.pl-chat-compositor {
    flex: none;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px calc(var(--pl-base-segura) + 10px);
    border-top: 1px solid var(--pl-borda);
    background: var(--pl-papel);
}

.pl-chat-caixa {
    flex: 1;
    min-width: 0;
    display: flex;
    border: 1px solid var(--pl-tracejado);
    border-radius: 24px;
    background: var(--pl-cartao);
}

.pl-chat-caixa:focus-within {
    border-color: var(--pl-tinta);
}

.pl-chat-campo {
    flex: 1;
    min-width: 0;
    min-height: 46px;
    max-height: 120px;
    padding: 12px 16px;
    border: none;
    border-radius: 24px;
    background: transparent;
    color: var(--pl-tinta);
    font: 400 15px/1.35 var(--pl-sans);
    resize: none;
    outline: none;
}

.pl-chat-campo::placeholder {
    color: var(--pl-suave);
}

.pl-chat-botao {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: transform .1s ease;
}

.pl-chat-botao:active:not(:disabled) {
    transform: scale(.94);
}

.pl-chat-enviar {
    background: var(--pl-tinta);
    --pl-icone-primaria: var(--pl-papel);
    --pl-icone-secundaria: var(--pl-ambar);
}

.pl-chat-microfone {
    background: var(--pl-ambar);
    --pl-icone-primaria: var(--pl-tinta);
    --pl-icone-secundaria: var(--pl-cartao);
}

.pl-chat-cancelar {
    background: var(--pl-areia);
    --pl-icone-primaria: var(--pl-vermelho-escuro);
    --pl-icone-secundaria: #F2B5AC;
}

.pl-chat-botao:disabled {
    background: var(--pl-desativado);
    cursor: default;
    --pl-icone-primaria: var(--pl-suave);
    --pl-icone-secundaria: var(--pl-areia);
}

.pl-chat-gravando {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--pl-tracejado);
    border-radius: 24px;
    background: var(--pl-cartao);
    font: 500 15px var(--pl-sans);
    font-variant-numeric: tabular-nums;
}

.pl-chat-gravando small {
    font: 400 12px var(--pl-sans);
    color: var(--pl-suave);
}

.pl-chat-rec {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pl-vermelho);
    animation: pl-chat-rec 1.2s ease-in-out infinite;
}

@keyframes pl-chat-rec {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

/* Erro não tratado do Blazor */

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 12px 16px calc(var(--pl-base-segura) + 12px);
    background: var(--pl-ambar);
    color: var(--pl-tinta);
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: 16px;
    top: 10px;
    cursor: pointer;
}