/* Esconder o menu principal (js/menu-esconder.js).
   data-nav-fora: o menu saiu da tela (escolha, foco ou rolagem).
   data-nav-livre: o conteúdo ocupa a largura (só escolha e foco).
   Recolher continua sendo o modo só ícones das telas largas. */
.nav-alca[hidden] { display: none !important; }
.nav-esconder {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex: 0 0 auto; border: 0; background: transparent; color: var(--tinta-2);
  cursor: pointer; font: inherit; font-size: 13px; border-radius: 14px;
}
.nav-esconder .nav-icone { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
.nav-esconder:hover { color: var(--metal-texto); }
.nav-esconder:focus-visible, .nav-alca:focus-visible { outline: 2px solid var(--metal-texto); outline-offset: 3px; }
.nav-esconder-rotulo {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Brasão NK como botão: o próprio brasão do topo aparece por baixo; o botão
   desenha o anel dourado e um selo de menu. */
.nav-alca {
  position: fixed; z-index: 25; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer;
  box-shadow: 0 0 0 2px var(--barra-ouro, #e8b04ac2), 0 0 18px -2px #e8b04a66, 0 10px 24px -10px #000c;
  animation: nav-alca-entra .36s cubic-bezier(.2, .8, .2, 1) both;
}
.nav-alca:hover { box-shadow: 0 0 0 2px var(--barra-ouro-luz, #fff1bfd9), 0 0 24px 0 #e8b04a88, 0 10px 24px -10px #000c; }
.nav-alca:active { transform: scale(.94); }
.nav-alca-selo {
  position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--barra-ouro, #e8b04a); color: #1a1408;
  box-shadow: 0 0 0 2px var(--plano, #090909);
}
.nav-alca-brasao { display: none; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.nav-alca-solta { background: var(--plano, #090909); }
.nav-alca-solta .nav-alca-brasao { display: block; padding: 4px; }
@keyframes nav-alca-entra { from { opacity: 0; transform: scale(.8); } }

.nav-puxador { display: none; }

.conteudo, .tema-fundo { transition: margin-left .32s cubic-bezier(.2, .8, .2, 1), left .32s cubic-bezier(.2, .8, .2, 1), padding-left .32s cubic-bezier(.2, .8, .2, 1); }
.nav-inferior { transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .22s ease, visibility 0s; }

/* ---- menu lateral (iPad, Mac, iPhone deitado) ---- */
@media (min-width: 768px), (min-width: 568px) and (orientation: landscape) {
  .nav-esconder { width: 100%; min-height: 44px; margin-top: 4px; padding: 0; border-top: 1px solid var(--hairline, #ffffff14); border-radius: 0 0 14px 14px; }
  html:root[data-tema][data-nav-livre="1"],
  html[data-aki-menu-lateral-disponivel="1"][data-nav-livre="1"]:not([data-aki-menu-compacto="1"]) { --rail: 0px; }
  html:root[data-tema][data-nav-fora="1"]:not([data-nav-espiando="1"], [data-aki-menu-compacto="1"]) .nav-inferior {
    transform: translateX(calc(-100% - 28px)); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .22s ease .08s, visibility 0s .32s;
  }
  html:root[data-tema][data-nav-espiando="1"] .nav-inferior {
    box-shadow: 0 1px 0 #ffffff0d inset, 0 24px 60px -18px #000e, 0 0 0 1px var(--barra-ouro, #e2be5f55);
  }
  html:root[data-tema][data-nav-livre="1"] .tema-fundo { left: 0; }
}
@media (min-width: 1100px) {
  html:root[data-tema]:not([data-nav-compacta="1"]) .nav-esconder { justify-content: flex-start; padding: 0 8px; gap: 10px; }
  html:root[data-tema]:not([data-nav-compacta="1"]) .nav-esconder .nav-icone { flex: 0 0 28px; min-width: 28px; }
  html:root[data-tema]:not([data-nav-compacta="1"]) .nav-esconder-rotulo {
    position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible;
  }
}

/* ---- barra inferior (iPhone em pé): arrastar esconde, sem botão ---- */
@media (max-width: 567px), (max-width: 767px) and (orientation: portrait) {
  .nav-esconder { display: none; }
  .nav-inferior { touch-action: pan-x; }
  html:root[data-tema][data-nav-fora="1"] .nav-inferior {
    transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .22s ease .08s, visibility 0s .32s;
  }
  html:root[data-tema][data-nav-livre="1"] body { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  /* o que ficava acima da barra desce junto */
  html:root[data-tema][data-nav-livre="1"] .chat-entrada:not(.ia-lab-chat-entrada) { bottom: calc(26px + env(safe-area-inset-bottom)); }
  html:root[data-tema][data-nav-livre="1"] .chat-nova-resposta { bottom: calc(102px + env(safe-area-inset-bottom)); }
  html:root[data-tema][data-nav-livre="1"] #camada-toast { bottom: calc(34px + env(safe-area-inset-bottom)); }
  /* dica de que dá para puxar a barra de volta */
  html[data-nav-fora="1"] .nav-puxador {
    display: block; position: fixed; z-index: 19; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom));
    width: 40px; height: 4px; margin-left: -20px; border-radius: 2px;
    background: var(--barra-ouro, #e8b04ac2); opacity: .55; pointer-events: none;
    animation: nav-alca-entra .36s ease both;
  }
}
/* App nativo com a barra embaixo também deitado (iPhone): mesmo gesto do rodapé. */
html[data-aki-menu-compacto="1"] .nav-esconder { display: none; }
html[data-aki-menu-compacto="1"] .nav-inferior { touch-action: pan-x; }
html:root[data-tema][data-aki-menu-compacto="1"][data-nav-fora="1"] .nav-inferior {
  transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .22s ease .08s, visibility 0s .32s;
}
html:root[data-tema][data-aki-menu-compacto="1"][data-nav-livre="1"] body { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
html:root[data-tema][data-aki-menu-compacto="1"][data-nav-livre="1"] :is(.iamac-compositor, .chat-entrada:not(.iamac-entrada)) {
  bottom: max(calc(26px + env(safe-area-inset-bottom)), var(--aki-teclado-inset, 0px));
}
html[data-aki-menu-compacto="1"][data-nav-fora="1"] .nav-puxador {
  display: block; position: fixed; z-index: 19; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom));
  width: 40px; height: 4px; margin-left: -20px; border-radius: 2px;
  background: var(--barra-ouro, #e8b04ac2); opacity: .55; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .nav-inferior, .conteudo, .tema-fundo { transition: none !important; }
  .nav-alca, .nav-puxador { animation: none !important; }
}

/* ---- Conversa minimizada que vira bolha (js/voz-doca-esconder.js) ---- */
.voz-doca-mostrar, .voz-doca-selo { display: none; }
.voz-doca { transition: width .3s cubic-bezier(.2, .8, .2, 1), height .3s cubic-bezier(.2, .8, .2, 1), border-radius .3s ease, padding .3s ease, bottom .32s cubic-bezier(.2, .8, .2, 1); }
.voz-doca.voz-doca-movendo { transition: none; cursor: grabbing; opacity: .94; }
/* Bolha: um anel só, nítido, e o rosto preenchendo o círculo. No iPhone o
   avatar mini é 46×54 — com raio de 50% virava oval, e o anel próprio dele
   (que pisca) aparecia como um segundo círculo dourado desalinhado. */
html:root .voz-doca.voz-doca-bolha {
  left: auto; right: max(14px, env(safe-area-inset-right)); width: 60px; height: 60px; max-height: none;
  padding: 0; border-radius: 50%; overflow: visible; display: grid; place-items: center;
  border: 2px solid var(--barra-ouro, #e8b04a); background: #120f0b;
  box-shadow: 0 0 16px -4px #e8b04a66, 0 12px 28px -10px #000c;
  touch-action: none; cursor: grab;
}
@media (min-width: 768px) { html:root .voz-doca.voz-doca-bolha { right: 20px; } }
/* quatro botões (esconder, microfone, abrir, encerrar): a barrinha ganha largura */
@media (min-width: 768px) { .voz-doca:not(.voz-doca-bolha) { width: 420px; } }
.voz-doca-bolha .voz-comando.mini { display: grid; place-items: center; gap: 0; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; }
.voz-doca-bolha .voz-comando.mini > :not(.voz-orbe-area) { display: none !important; }
.voz-doca-bolha .voz-comando.mini > .voz-orbe-area { padding: 0; display: grid; place-items: center; width: 56px; height: 56px; }
html:root .voz-doca.voz-doca-bolha .voz-comando.mini .voz-orbe {
  width: 56px !important; height: 56px !important; border-radius: 50% !important; overflow: hidden; transform: none;
  box-shadow: none; border: 0;
}
.voz-doca-bolha .voz-orbe::before, .voz-doca-bolha .voz-orbe::after { display: none !important; }
.voz-doca-bolha .voz-orbe :is(canvas, img, video) { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 50%; }
.voz-doca-bolha .voz-doca-mostrar {
  display: block; position: absolute; inset: -2px; z-index: 2; padding: 0; border: 0;
  border-radius: 50%; background: transparent; cursor: inherit; touch-action: none;
}
.voz-doca-bolha .voz-doca-mostrar:focus-visible { outline: 2px solid var(--metal-texto); outline-offset: 3px; }
/* Selo do estado, no canto da bolha */
.voz-doca-bolha .voz-doca-selo {
  display: grid; place-items: center; position: absolute; right: -4px; bottom: -4px; z-index: 3;
  width: 22px; height: 22px; border-radius: 50%; pointer-events: none;
  background: var(--barra-ouro, #e8b04a); color: #1a1408; box-shadow: 0 0 0 2px #120f0b;
}
.voz-doca-bolha[data-estado="pausado"] .voz-doca-selo { background: #3a332a; color: #f1d9a4; }
.voz-doca-bolha[data-estado="conectando"] .voz-doca-selo svg { animation: voz-selo-gira 1s linear infinite; }
.voz-doca-bolha[data-estado="trabalhando"] .voz-doca-selo { animation: voz-selo-pulsa 1.2s ease-in-out infinite; }
.voz-doca-bolha[data-estado="pausado"] { border-color: #6d6252; box-shadow: 0 12px 28px -10px #000c; }
.voz-doca-bolha[data-estado="pausado"] .voz-orbe { filter: saturate(.4) brightness(.8); }
/* a bolha respira quando o Aki fala e clareia quando ouve você */
.voz-doca-bolha[data-estado="falando"] { animation: voz-bolha-fala 1.4s ease-in-out infinite; }
.voz-doca-bolha:has(.voz-mini-fala[data-avatar-estado="Ouvindo você"]) { border-color: var(--barra-ouro-luz, #fff1bf); }
@keyframes voz-bolha-fala { 50% { box-shadow: 0 0 0 4px #e8b04a44, 0 0 26px 0 #e8b04a99, 0 12px 28px -10px #000c; } }
@keyframes voz-selo-gira { to { transform: rotate(360deg); } }
@keyframes voz-selo-pulsa { 50% { transform: scale(1.12); } }

/* Barrinha: a fala inteira ao tocar no texto; arraste pelo avatar no toque */
.voz-mini-fala[role="button"] { cursor: pointer; border-radius: 8px; }
.voz-mini-fala[role="button"]:focus-visible { outline: 2px solid var(--metal-texto); outline-offset: 2px; }
.voz-comando.mini .voz-mini-fala.voz-mini-fala-aberta {
  display: block; -webkit-line-clamp: unset; overflow-y: auto; max-height: min(34dvh, 260px);
  overscroll-behavior: contain; color: var(--tinta); touch-action: pan-y;
}
.voz-comando.mini[data-mic-pausado="1"] .voz-mini-fala::before { content: 'Microfone pausado'; color: #c9b48a; }
html:root .voz-doca .voz-mini-acoes .voz-mini-mic[aria-pressed="true"] {
  color: #1a1408; background: var(--barra-ouro, #e8b04a); border-color: transparent; border-radius: 50%;
}
/* fala aberta: o texto ocupa a largura toda e os botões descem para a linha de baixo */
.voz-comando.mini .voz-mini-barra:has(.voz-mini-fala-aberta) { flex-wrap: wrap; row-gap: 6px; }
.voz-comando.mini .voz-mini-barra:has(.voz-mini-fala-aberta) > .voz-mini-fala { flex: 1 1 100%; }
.voz-comando.mini .voz-mini-barra:has(.voz-mini-fala-aberta) > .voz-mini-acoes { margin-left: auto; }
.voz-doca:has(.voz-mini-fala-aberta) { max-height: none; }
@media (hover: none) { .voz-doca:not(.voz-doca-bolha) .voz-comando.mini > .voz-orbe-area { touch-action: none; } }
@media (hover: hover) and (pointer: fine) { .voz-doca:not(.voz-doca-bolha) .voz-comando.mini > .voz-orbe-area { cursor: grab; } }

/* com a barra de baixo fora, a conversa minimizada desce junto; no iPhone o
   gesto (arrastar para baixo) substitui o botão, como no menu */
html[data-aki-menu-compacto="1"] .voz-mini-esconder { display: none; }
.voz-doca:not(.voz-doca-bolha) { touch-action: pan-x; }
@media (max-width: 567px), (max-width: 767px) and (orientation: portrait) {
  .voz-mini-esconder { display: none; }
  html:root[data-tema][data-nav-fora="1"] .voz-doca { bottom: calc(26px + env(safe-area-inset-bottom)); }
}
html:root[data-tema][data-aki-menu-compacto="1"][data-nav-fora="1"] .voz-doca { bottom: calc(26px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { .voz-doca { transition: none; } .voz-doca-bolha, .voz-doca-selo, .voz-doca-selo svg { animation: none !important; } }