/* Agente de voz "Bia, a abelha da Agenda" (voz.js). Sem nada piscando: o estado muda de cor e
   de texto, o tempo anda numa barra neutra e prefers-reduced-motion tira a única transição. */

:root {
    --voz-mel: #fbbf24;
    --voz-mel-claro: #fef3c7;
    --voz-marrom: #422006;
    --voz-borda: #fcd34d;
}

/* ---------- A Bia na barra de abas (voz.js) ----------
   Celular: botão redondo no centro da barra (Início · Agenda · [Bia] · Rede · Passeios), elevado
   ~18px acima dela. O anel branco em volta do disco "recorta" a borda da barra. Fica fora do <nav>
   (#bia-barra), sobre a vaga do meio (.aba-bar-vaga): assim, com a conversa minimizada, ele sobe
   acima das folhas do app (dia z 200, detalhe z 210) como a antiga pílula fazia.
   Durante a voz, um arco de mel em volta do disco mostra o tempo desta conversa (o tempo exato
   continua na folha). Nada pisca: as asas batem devagar ao ouvir; reduced-motion para tudo. */
:root { --bia-disco: 60px; --bia-vao: #fff; }
body.dark-theme { --bia-vao: #0f172a; }

.bia-btn[hidden], .aba-bar-vaga[hidden] { display: none !important; }
.bia-btn { -webkit-tap-highlight-color: transparent; color: var(--voz-marrom); }
.bia-disco {
    position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: var(--bia-disco); height: var(--bia-disco); border-radius: 999px;
    background: radial-gradient(circle at 50% 38%, #FFFDF5 0%, var(--mel-creme, #FFF6E0) 55%, #FCE596 100%);
    border: 2px solid var(--voz-borda);
    box-shadow: 0 0 0 4px var(--bia-vao), 0 8px 18px -8px rgba(66, 32, 6, .55);
}
.bia-corpo { display: block; width: 76%; height: 76%; line-height: 0; }
.bia-corpo .abelha { width: 100%; height: 100%; }
/* Selo: microfone (voz) ou balão (só texto); some durante a conversa */
.bia-selo {
    position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; font-size: 12px;
    background: var(--voz-marrom); color: #fff; border: 2px solid var(--bia-vao);
}
.bia-selo[hidden] { display: none; }
/* Arco do tempo desta conversa (só voz): cobre o vão branco, de mel, do topo no sentido horário */
.bia-disco::after {
    content: ''; position: absolute; inset: -6px; border-radius: 999px; pointer-events: none; opacity: 0;
    background: conic-gradient(#b45309 calc(var(--bia-pct, 0) * 1%), rgba(180, 83, 9, .14) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
.bia-btn.bia--anel .bia-disco::after { opacity: 1; }
/* Conversa em andamento (minimizada): borda de mel mais forte e rótulo com o estado */
.bia-btn.bia--conversa .bia-disco { border-color: #d97706; }
.bia-btn.bia--conversa .bia-rotulo { color: var(--voz-marrom); }
/* Passar o mouse ou focar: as asas batem duas vezes (como no logo) */
.bia-btn:hover .ab-asa, .bia-btn:focus-visible .ab-asa { animation: ab-bater .6s ease-in-out 2; }
.bia-rotulo { font-size: 12px; line-height: 1.2; font-weight: 800; letter-spacing: .01em; white-space: nowrap; color: #92400e; }

/* Celular: o botão fica sobre a vaga central da barra. Altura = disco + rótulo; o rótulo
   cai na mesma linha dos outros e o disco passa ~18px acima da barra. */
.bia-barra {
    position: fixed; z-index: 55; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 76px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    padding: 0 0 calc(8px + env(safe-area-inset-bottom)); border-radius: 999px 999px 14px 14px;
}
.bia-barra .bia-rotulo { margin-top: 1px; }
.bia-barra:focus-visible { outline: none; }
.bia-barra:focus-visible .bia-disco { outline: 3px solid #92400e; outline-offset: 5px; }
.bia-barra:focus-visible .bia-rotulo { text-decoration: underline; text-underline-offset: 3px; }
.bia-barra:active .bia-disco { transform: translateY(1px); }
/* Conversa minimizada (a Bia abriu uma tela): por cima das folhas do app, abaixo da folha dela */
body.bia-minimizada .bia-barra { z-index: 225; }
body.voz-aberta .bia-btn .ab-asa { animation-play-state: paused; }
@media (min-width: 640px) { .bia-barra { display: none !important; } }

/* Barra com a Bia: 5 colunas (a do meio é a vaga) e um respiro a mais embaixo das páginas */
body.com-bia .aba-bar { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 639.98px) { body.com-bia { --bia-sobra: 22px; } }

/* Computador: botão em destaque à direita das abas do header */
.bia-topo { display: none; }
@media (min-width: 640px) {
    .bia-topo {
        display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; flex-shrink: 0;
        padding: 0 1rem 0 .3rem; border-radius: 999px; margin-right: auto;
        background: var(--voz-mel-claro); border: 2px solid var(--voz-borda); font-weight: 800; font-size: .9rem;
        transition: background-color .15s;
    }
    .bia-topo .bia-disco { --bia-vao: var(--voz-mel-claro); width: 38px; height: 38px; border-width: 0; box-shadow: none; background: #fff; }
    .bia-topo .bia-disco::after { inset: -4px; }
    .bia-topo .bia-rotulo { font-size: .9rem; color: var(--voz-marrom); }
    .bia-topo:hover { background: #fde68a; }
    .bia-topo:focus-visible { outline: 3px solid #92400e; outline-offset: 2px; }
    body.com-bia .abas-topo { flex: 0 1 auto; margin-left: auto; }
}
@media (min-width: 640px) and (max-width: 860px) { .bia-topo { padding-right: .3rem; } .bia-topo .bia-rotulo { display: none; } }

body.dark-theme .bia-btn .bia-rotulo { color: #fde68a; }
body.dark-theme .bia-topo { background: rgba(146, 64, 14, .3); border-color: #92400e; }
body.dark-theme .bia-topo .bia-rotulo { color: #fde68a; }
body.dark-theme .bia-topo .bia-disco { --bia-vao: #1e293b; }
body.dark-theme .bia-btn .abelha { filter: none; }
@media (prefers-reduced-motion: reduce) { .bia-btn .abelha, .bia-btn .ab-asa { animation: none !important; } .bia-barra:active .bia-disco { transform: none; } }

/* Folha: de baixo no celular, centrada no computador. Por cima das telas que a Bia abre (folha
   do dia z 200); antes do "Avisar a rede" (z 140) a Bia vai para a bolha (voz.js, confirmar). */
.voz-folha { position: fixed; inset: 0; z-index: 230; display: flex; align-items: flex-end; justify-content: center; }
.voz-folha[hidden] { display: none; }
.voz-fundo { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.voz-painel {
    position: relative; width: 100%; max-width: 30rem; max-height: 92vh; overflow-y: auto;
    background: #fff; color: #1e293b; border-radius: 1.5rem 1.5rem 0 0;
    padding: 1rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .15);
    animation: voz-sobe .2s ease-out;
}
@media (min-width: 640px) {
    .voz-folha { align-items: center; padding: 1rem; }
    .voz-painel { border-radius: 1.5rem; padding: 1.5rem; }
}
@keyframes voz-sobe { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .voz-painel { animation: none; } }
body.voz-aberta { overflow: hidden; }

.voz-topo { display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem; }
.voz-avatar {
    width: 52px; height: 52px; flex-shrink: 0; border-radius: 999px; padding: 6px;
    background: var(--mel-creme, #FFF6E0); border: 2px solid var(--voz-borda); overflow: visible;
}
.voz-avatar .abelha { width: 100%; height: 100%; }

/* A Bia (abelha oficial, abelha.js/abelha.css) segue o estado da conversa. Nada pisca nem
   corre: as batidas reusam o ab-bater do abelha.css; reduced-motion para tudo (abelha.css). */
.voz-bia--conectando .abelha { animation: ab-arco 2.6s ease-in-out infinite alternate; }
.voz-bia--conectando .ab-asa { animation: ab-bater .7s ease-in-out infinite; }
.voz-bia--ouvindo .ab-asa { animation: ab-bater 1.6s ease-in-out infinite; }
.voz-bia--falando .ab-asa { animation: ab-bater .9s ease-in-out infinite; }
.voz-bia--ouvindo .ab-asa-t, .voz-bia--falando .ab-asa-t { animation-delay: -.15s; }
@media (prefers-reduced-motion: reduce) { .voz-avatar .abelha, .voz-avatar .ab-asa { animation: none !important; } }
.voz-tit { font-size: 1.2rem; font-weight: 800; line-height: 1.2; margin: 0; }
.voz-sub { font-size: .8rem; font-weight: 600; color: #64748b; margin: 0; }
.voz-x {
    margin-left: auto; width: 40px; height: 40px; border-radius: 999px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; background: #f1f5f9; color: #475569; font-size: 1.1rem;
}

.voz-bloco { display: flex; flex-direction: column; gap: .85rem; }
.voz-aviso-tit { font-weight: 800; margin: 0; }
.voz-lista { display: flex; flex-direction: column; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.voz-lista li { display: flex; gap: .6rem; font-size: .9rem; line-height: 1.4; color: #334155; }
.voz-lista i { font-size: 1.15rem; color: #92400e; flex-shrink: 0; margin-top: 1px; }
.voz-nota, .voz-dica { font-size: .8rem; color: #64748b; margin: 0; line-height: 1.4; }
.voz-hoje { font-size: .8rem; font-weight: 700; color: #475569; margin: 0; }
.voz-msg { margin: 0; padding: .6rem .75rem; border-radius: .9rem; font-size: .85rem; font-weight: 600; background: #f1f5f9; color: #334155; }
.voz-msg-erro { background: #fff7ed; color: #9a3412; }

/* Etapas: Conectar -> Conversar */
.voz-etapas { display: flex; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.voz-etapas li {
    flex: 1; display: flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; color: #94a3b8;
    border-top: 4px solid #e2e8f0; padding-top: .4rem;
}
.voz-etapas li b {
    width: 20px; height: 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    font-size: .7rem; background: #e2e8f0; color: #64748b;
}
.voz-etapas li.ok { color: #166534; border-top-color: #86efac; }
.voz-etapas li.atual { color: var(--voz-marrom); border-top-color: var(--voz-mel); }
.voz-etapas li.atual b { background: var(--voz-mel); color: var(--voz-marrom); }

/* Estado atual: cor e texto, nunca piscando */
.voz-estado { display: flex; align-items: center; gap: .75rem; padding: .8rem .9rem; border-radius: 1rem; background: #f8fafc; border: 1px solid #e2e8f0; }
.voz-estado i { font-size: 1.6rem; flex-shrink: 0; }
.voz-estado b { display: block; font-size: 1rem; }
.voz-estado small { display: block; font-size: .78rem; font-weight: 600; color: #64748b; }
.voz-estado-conectando i { color: #64748b; }
.voz-estado-ouvindo { background: #f0fdf4; border-color: #bbf7d0; }
.voz-estado-ouvindo i { color: #15803d; }
.voz-estado-falando { background: var(--voz-mel-claro); border-color: var(--voz-borda); }
.voz-estado-falando i { color: #92400e; }
.voz-estado-pausado i { color: #64748b; }

.voz-tempo-linha { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: .8rem; color: #475569; font-weight: 600; margin-bottom: .35rem; }
.voz-barra { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.voz-barra i { display: block; height: 100%; background: #a8a29e; border-radius: 999px; transition: width 1s linear; }
@media (prefers-reduced-motion: reduce) { .voz-barra i { transition: none; } }

/* Legenda (acessibilidade): a fala da Bia em letra grande */
.voz-legenda { min-height: 4.5rem; padding: .75rem .9rem; border-radius: 1rem; background: #fafaf9; border: 1px solid #e7e5e4; }
.voz-legenda p { margin: 0; line-height: 1.45; }
.voz-legenda span { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #78716c; }
.voz-fala-bia { font-size: 1.05rem; font-weight: 600; color: #1c1917; }
.voz-fala-voce { font-size: .85rem; color: #57534e; margin-bottom: .5rem !important; }

/* Cartões: nada grava sem o toque */
.voz-cartoes { display: flex; flex-direction: column; gap: .6rem; }
.voz-cartao { border: 2px solid var(--voz-borda); background: #fffbeb; border-radius: 1rem; padding: .8rem .9rem; }
.voz-cartao p { margin: 0; }
.voz-cartao-tipo { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #92400e; display: flex; align-items: center; gap: .35rem; }
.voz-cartao-resumo { font-size: 1rem; font-weight: 800; margin: .25rem 0 !important; color: var(--voz-marrom); }
.voz-cartao-resumo::first-letter { text-transform: uppercase; }
.voz-cartao-linha { font-size: .82rem; color: #57534e; }
.voz-cartao-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .7rem; }
.voz-cartao-ok { margin-top: .5rem !important; font-weight: 700; color: #166534; display: flex; align-items: center; gap: .35rem; }
.voz-cartao-nao { margin-top: .5rem !important; font-weight: 600; color: #57534e; }
/* Cartões que não gravam nada (imagem, painel, instalar): borda neutra, não âmbar */
.voz-cartao-img, .voz-cartao-nav { border-color: #e2e8f0; background: #fff; }
.voz-cartao-nav .voz-cartao-linha { margin-top: .25rem !important; }
.voz-miniatura { display: block; width: 100%; max-height: 220px; object-fit: contain; margin: .4rem 0; border-radius: .75rem; border: 1px solid #e2e8f0; background: #f8fafc; }
a.voz-btn { text-decoration: none; }
.voz-min { margin-left: auto; }
.voz-x[hidden] { display: none; }
.voz-min:not([hidden]) + .voz-x { margin-left: .4rem; }

/* Botões grandes (alvo >= 48 px) */
.voz-acoes { display: flex; flex-direction: column; gap: .5rem; }
.voz-btn {
    min-height: 48px; border-radius: 1rem; padding: .7rem 1rem; font-weight: 800; font-size: .95rem;
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    background: var(--voz-mel); color: var(--voz-marrom); border: 2px solid transparent;
}
.voz-btn:disabled { opacity: .5; }
.voz-btn-leve { background: #fff; color: #334155; border-color: #e2e8f0; }
.voz-btn-ok { background: #166534; color: #fff; }
.voz-btn-fim { min-height: 56px; font-size: 1.05rem; background: #1e293b; color: #fff; }
.voz-btn:focus-visible, .voz-x:focus-visible { outline: 3px solid #92400e; outline-offset: 2px; }

/* Tema escuro do app */
body.dark-theme .voz-painel { background: #1e293b; color: #f1f5f9; }
body.dark-theme .voz-sub, body.dark-theme .voz-nota, body.dark-theme .voz-dica, body.dark-theme .voz-estado small { color: #94a3b8; }
body.dark-theme .voz-lista li, body.dark-theme .voz-hoje, body.dark-theme .voz-tempo-linha { color: #cbd5e1; }
body.dark-theme .voz-x { background: #0f172a; color: #cbd5e1; }
body.dark-theme .voz-estado { background: #0f172a; border-color: #334155; }
body.dark-theme .voz-estado-ouvindo { background: rgba(22, 101, 52, .25); border-color: #166534; }
body.dark-theme .voz-estado-falando { background: rgba(146, 64, 14, .3); border-color: #92400e; }
body.dark-theme .voz-legenda { background: #0f172a; border-color: #334155; }
body.dark-theme .voz-fala-bia { color: #f8fafc; }
body.dark-theme .voz-fala-voce { color: #cbd5e1; }
body.dark-theme .voz-msg { background: #0f172a; color: #e2e8f0; }
body.dark-theme .voz-btn-leve { background: #0f172a; color: #e2e8f0; border-color: #334155; }
body.dark-theme .voz-barra { background: #334155; }
body.dark-theme .voz-etapas li { border-top-color: #334155; }
body.dark-theme .voz-cartao-img, body.dark-theme .voz-cartao-nav { background: #0f172a; border-color: #334155; }
body.dark-theme .voz-cartao-img .voz-cartao-resumo, body.dark-theme .voz-cartao-nav .voz-cartao-tipo { color: #fde68a; }
body.dark-theme .voz-cartao-img .voz-cartao-linha, body.dark-theme .voz-cartao-nav .voz-cartao-linha { color: #cbd5e1; }

/* ---------- Bia por texto: a conversa e o campo "Escreva para a Bia" (voz.js) ---------- */
.voz-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.voz-conversa { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.voz-conversa li { max-width: 88%; padding: .55rem .8rem; border-radius: 1rem; font-size: .95rem; line-height: 1.45; overflow-wrap: anywhere; }
.voz-conversa li span { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .1rem; }
.voz-msg-bia { align-self: flex-start; background: var(--voz-mel-claro); color: #1c1917; border-bottom-left-radius: .35rem; }
.voz-msg-bia span { color: #92400e; }
.voz-msg-voce { align-self: flex-end; background: #f1f5f9; color: #1e293b; border-bottom-right-radius: .35rem; }
.voz-msg-voce span { color: #64748b; }
.voz-escrevendo { font-style: italic; color: #57534e !important; }
.voz-acoes-falar .voz-hoje { text-align: center; }
/* Segurar para falar (lugar barulhento): a escolha antes de ligar e o botão grande na conversa */
.voz-segurar-opcao { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; font-weight: 700; color: #334155; cursor: pointer; padding: .25rem .1rem; }
.voz-segurar-opcao input { width: 22px; height: 22px; margin: .1rem 0 0; accent-color: #92400e; flex-shrink: 0; }
.voz-segurar-opcao small { display: block; font-weight: 500; font-size: .78rem; color: #64748b; line-height: 1.35; }
.voz-btn-segurar { min-height: 72px; font-size: 1.1rem; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.voz-btn-segurar[aria-pressed="true"] { background: #15803d; color: #fff; box-shadow: 0 0 0 4px #bbf7d0; }
body.dark-theme .voz-segurar-opcao { color: #e2e8f0; }
body.dark-theme .voz-segurar-opcao small { color: #94a3b8; }
.voz-cartao-acoes-1 { grid-template-columns: 1fr; }

/* O campo fica preso no pé da folha: a conversa rola por cima dele */
.voz-escrever {
    position: sticky; bottom: calc(-1.25rem - env(safe-area-inset-bottom)); z-index: 1;
    margin: .9rem -1rem calc(-1.25rem - env(safe-area-inset-bottom));
    padding: .7rem 1rem calc(.8rem + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid #e2e8f0;
}
.voz-escrever[hidden] { display: none; }
@media (min-width: 640px) {
    .voz-escrever { bottom: -1.5rem; margin: 1rem -1.5rem -1.5rem; padding: .8rem 1.5rem 1rem; border-radius: 0 0 1.5rem 1.5rem; }
}
.voz-escrever-rot { display: block; font-size: .8rem; font-weight: 800; color: var(--voz-marrom); margin-bottom: .35rem; }
.voz-escrever-linha { display: flex; gap: .5rem; align-items: stretch; }
.voz-campo {
    flex: 1; min-width: 0; min-height: 48px; border-radius: 1rem; padding: .6rem .9rem; font-size: 1rem;
    border: 2px solid #e2e8f0; background: #fff; color: #1e293b;
}
.voz-campo:focus { outline: none; border-color: #d97706; box-shadow: 0 0 0 3px rgba(251, 191, 36, .35); }
.voz-campo:disabled { background: #f8fafc; }
.voz-enviar {
    width: 48px; min-height: 48px; flex-shrink: 0; border-radius: 1rem; font-size: 1.25rem;
    display: inline-flex; align-items: center; justify-content: center; background: var(--voz-mel); color: var(--voz-marrom);
}
.voz-enviar:disabled { opacity: .5; }
.voz-enviar:focus-visible { outline: 3px solid #92400e; outline-offset: 2px; }
.voz-escrever-info { margin: .35rem 0 0; font-size: .75rem; color: #64748b; }

body.dark-theme .voz-msg-bia { background: rgba(146, 64, 14, .35); color: #fef3c7; }
body.dark-theme .voz-msg-bia span { color: #fde68a; }
body.dark-theme .voz-msg-voce { background: #0f172a; color: #e2e8f0; }
body.dark-theme .voz-escrever { background: #1e293b; border-top-color: #334155; }
body.dark-theme .voz-escrever-rot { color: #fde68a; }
body.dark-theme .voz-campo { background: #0f172a; color: #f1f5f9; border-color: #334155; }
body.dark-theme .voz-escrever-info { color: #94a3b8; }

/* Cartões da entrevista (a Bia te conhece): prévia de 2 semanas e aviso de substituição */
.voz-previa { margin: .55rem 0 .4rem; max-width: 22rem; }
.voz-cartao-aviso { color: #92400e; font-weight: 600; }
body.dark-theme .voz-cartao-aviso { color: #fcd34d; }