/* leitor-menu.css — menu de ações do versículo.
 *
 * Arquivo próprio pelo mesmo motivo do css/audio-biblia.css e do
 * css/leitor-fonte.css: o leitor vive em mais de uma tela e cópias de <style>
 * divergem no primeiro ajuste.
 *
 * Mobile = bottom sheet ancorado na base. Desktop = dialog centrado. Os dois
 * usam a MESMA marcação; só o posicionamento muda.
 *
 * Raios, sombras e superfícies saem dos tokens reais do design system
 * (--radius-xl 28px, --shadow-xl, --surface-hover) — nada de valor solto. */

.leitor-menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--scrim);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: leitor-menu-fade var(--dur-base) var(--ease-out);
}

.leitor-menu-sheet {
  width: 100%;
  background: var(--bg-deep);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 14px 16px calc(22px + env(safe-area-inset-bottom, 0px));
  animation: leitor-menu-subir var(--dur-base) var(--ease-out);
  max-height: 86dvh;
  overflow-y: auto;
}

/* Alça: afordância de "isto arrasta para baixo". Não é botão — o fechar de
   verdade é o scrim, o Esc e a própria ação. */
.leitor-menu-alca {
  width: 36px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--mark-subtle);
  margin: 0 auto 13px;
}

.leitor-menu-ref {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--primary-text);
  margin-bottom: 6px;
}

/* Clamp de 3 linhas: o versículo aqui é referente, não leitura. Versículos
   longos (Ester 8:9) empurrariam as ações para fora da tela.
   Fonte: acompanha a escolha do texto bíblico (--leitura-fonte-biblica, decisão j,
   frontend/js/leitura-preferencias.js) — é texto bíblico, não interface. */
.leitor-menu-texto {
  font-family: var(--leitura-fonte-biblica, var(--font-read));
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg);
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.leitor-menu-acoes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.leitor-menu-acao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 4px;
  border-radius: var(--radius-md);
  background: var(--surface-hover);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.leitor-menu-acao:hover:not(:disabled) { background: var(--surface-2); }
.leitor-menu-acao:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; }
.leitor-menu-acao .ic { width: 20px; height: 20px; color: var(--primary-text); }

/* Desabilitado de verdade (o <button> recusa o clique), não só apagado: uma
   ação que parece clicável e não faz nada é pior do que uma ação visivelmente
   fora do ar. O porquê vai na nota abaixo do grid. */
.leitor-menu-acao:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.leitor-menu-acao:disabled .ic { color: var(--mark-subtle); }

.leitor-menu-nota {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--warning-bg);
  color: var(--warning-fg);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.5;
}
.leitor-menu-nota .ic { width: 14px; height: 14px; margin-top: 1px; flex-shrink: 0; }

/* O versículo de origem mantém um wash enquanto o menu está aberto — sem isso a
   pessoa perde o referente ao olhar para o sheet. */
.leitor-versiculo.leitor-versiculo--menu { background: var(--surface-2); }

@keyframes leitor-menu-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes leitor-menu-subir {
  from { transform: translateY(14px); opacity: .6 }
  to   { transform: none; opacity: 1 }
}

@media (min-width: 769px) {
  .leitor-menu-scrim { align-items: center; }
  .leitor-menu-sheet {
    max-width: 460px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: 22px;
    animation: leitor-menu-crescer var(--dur-base) var(--ease-out);
  }
  .leitor-menu-alca { display: none; }
}

@keyframes leitor-menu-crescer {
  from { transform: scale(.97); opacity: .6 }
  to   { transform: none; opacity: 1 }
}

@media (prefers-reduced-motion: reduce) {
  .leitor-menu-scrim,
  .leitor-menu-sheet { animation: none; }
}