/* ============================================================
   FALAMIGO V8.8 — Busca global (janela de busca)
   Usa os tokens de cor do styles.css; funciona nos temas claro e
   escuro e no Modo Lousa (lousa.css amplia tudo).
   ============================================================ */
.fl-busca{position:fixed; inset:0; z-index:180; display:flex; justify-content:center; align-items:flex-start}
.fl-busca[hidden]{display:none!important}
.fl-busca-bg{position:absolute; inset:0; background:rgba(38,57,63,.42); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.fl-busca-panel{
  position:relative; display:flex; flex-direction:column; min-height:0;
  width:min(720px, calc(100% - 32px)); max-height:min(78vh, 720px); max-height:min(78dvh, 720px);
  margin-top:max(7vh, env(safe-area-inset-top,0px));
  background:var(--card); color:var(--ink); border:1.5px solid var(--line);
  border-radius:var(--r-l); box-shadow:var(--sh-2); overflow:hidden;
  transform:translateY(-8px) scale(.985); opacity:0; transition:transform .18s ease, opacity .18s ease;
}
.fl-busca.on .fl-busca-panel{transform:none; opacity:1}
.fl-busca-sr{position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

.fl-busca-bar{display:flex; align-items:center; gap:10px; padding:12px 12px 12px 18px; border-bottom:1.5px solid var(--line-soft); background:var(--card)}
.fl-busca-lupa{display:grid; place-items:center; color:var(--deep)}
.fl-busca-lupa svg.ic{width:24px; height:24px; stroke-width:2.2}
.fl-busca-input{
  flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink);
  font:700 1.15rem/1.3 var(--f-body); padding:10px 2px; min-height:48px; letter-spacing:-.01em;
}
.fl-busca-input::placeholder{color:var(--muted); font-weight:600}
.fl-busca-fechar{width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; border-radius:16px;
  border:1.5px solid var(--line); background:var(--card-2); color:var(--ink)}
.fl-busca-fechar:focus-visible{outline:3px solid var(--deep); outline-offset:3px}

.fl-busca-corpo{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
.fl-busca-lista{padding:6px 10px 14px}
.fl-busca-grupo{padding-top:6px}
.fl-busca-gt{display:flex; align-items:center; gap:8px; padding:10px 10px 6px; font-size:.74rem; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.fl-busca-gn{font-weight:700; letter-spacing:0; padding:1px 8px; border-radius:99px; background:var(--card-2); border:1px solid var(--line-soft)}

.fl-busca-op{
  display:flex; align-items:center; gap:12px; padding:10px 10px; min-height:56px; border-radius:18px;
  cursor:pointer; border:1.5px solid transparent; color:var(--ink); scroll-margin:48px 0 12px;
}
.fl-busca-op.on{background:var(--action); border-color:var(--action-edge)}
.fl-busca-op.on .fl-busca-ic{background:var(--card); border-color:var(--action-edge)}
.fl-busca-ic{width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center; border-radius:14px;
  background:var(--card-2); border:1px solid var(--line-soft); color:var(--deep)}
.fl-busca-ic svg.ic{width:20px; height:20px}
.fl-k-jogo .fl-busca-ic{background:var(--ok-soft); color:var(--ok-ink)}
.fl-k-falso .fl-busca-ic{background:var(--live-soft); color:var(--live-ink)}
.fl-k-gramatica .fl-busca-ic{background:var(--lavender); color:var(--ink)}
.fl-k-expedicao .fl-busca-ic{background:var(--butter); color:var(--warn-ink)}
.fl-k-situacao .fl-busca-ic{background:var(--sky); color:var(--ink)}
.fl-busca-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.fl-busca-t{font-weight:800; font-size:1rem; line-height:1.3; overflow-wrap:anywhere}
.fl-busca-s{font-size:.84rem; color:var(--ink-2); line-height:1.35; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden}
.fl-busca-ipa{font-family:var(--f-ipa); font-weight:500; color:var(--muted); font-size:.92rem}
.fl-busca-meta{flex:0 0 auto; font-size:.74rem; font-weight:800; padding:4px 9px; border-radius:99px; background:var(--card-2);
  border:1px solid var(--line-soft); color:var(--ink-2); max-width:9.5em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fl-busca-ouvir{flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:14px;
  background:var(--card); border:1.5px solid var(--line); font-size:.8rem; font-weight:800; color:var(--deep)}
.fl-busca-ouvir svg.ic{width:17px; height:17px}
.fl-busca-op.tocando .fl-busca-ouvir{background:var(--deep); color:var(--on-deep); border-color:var(--deep)}
/* seta desenhada em CSS (mais leve que um SVG por linha) */
.fl-busca-ir{flex:0 0 auto; width:10px; height:10px; margin:0 6px 0 2px; border:solid var(--muted); border-width:2.5px 2.5px 0 0; transform:rotate(45deg); border-radius:1px}
.fl-busca-ver{width:12px; height:12px; border-width:2.5px; border-radius:50%; transform:none}
.fl-busca-op.on .fl-busca-ir{border-color:var(--deep)}
.fl-busca-mais{min-height:44px; color:var(--deep)}
.fl-busca-mais .fl-busca-t{font-size:.9rem}
.fl-busca-op mark{background:var(--butter); color:inherit; border-radius:5px; padding:0 1px; box-shadow:0 2px 0 var(--gold)}

.fl-busca-vazio{display:flex; flex-direction:column; gap:6px; padding:28px 18px; text-align:center; color:var(--ink-2)}
.fl-busca-vazio b{color:var(--ink); font-size:1.05rem}

.fl-busca-rodape{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; padding:9px 14px; border-top:1.5px solid var(--line-soft);
  font-size:.76rem; color:var(--muted); background:var(--card-2)}
.fl-busca-rodape kbd{font:700 .72rem var(--f-mono); padding:2px 6px; margin-right:3px; border-radius:6px; border:1px solid var(--line); background:var(--card); color:var(--ink)}
@media (hover:none), (pointer:coarse){ .fl-busca-rodape{display:none} }

/* Detalhe (falso amigo, regra, aula) dentro da própria janela */
.fl-busca-detalhe{padding:14px 20px 22px; display:flex; flex-direction:column; gap:12px; outline:0}
.fl-busca-voltar{align-self:flex-start}
.fl-busca-kicker{font-size:.74rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.fl-busca-detalhe h3{font-size:1.7rem; line-height:1.15; letter-spacing:-.03em; outline:0}
.fl-busca-cartao{display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:var(--r-m); background:var(--card-2); border:1.5px solid var(--line-soft)}
.fl-busca-cartao p{line-height:1.45}
.fl-busca-nao,.fl-busca-sim{display:flex; gap:10px; align-items:flex-start}
.fl-busca-cartao svg.ic{width:22px; height:22px; flex:0 0 auto; margin-top:1px}
.fl-busca-nao{color:var(--live-ink)}
.fl-busca-nao span{text-decoration:line-through; text-decoration-thickness:2px}
.fl-busca-sim{color:var(--ok-ink); font-weight:700}
.fl-busca-dica,.fl-busca-tarefa{color:var(--ink-2)}
.fl-busca-acoes{display:flex; flex-wrap:wrap; gap:10px}

/* Celular: ocupa a tela toda, campo grande no topo */
@media (max-width:640px){
  .fl-busca{align-items:stretch}
  .fl-busca-panel{width:100%; max-height:none; height:100%; margin:0; border-radius:0; border:0;
    padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
  .fl-busca-bar{padding:10px 10px 10px 14px}
  .fl-busca-lista{padding:4px 6px 18px}
  .fl-busca-op{padding:10px 8px; gap:10px}
  .fl-busca-meta{display:none}
  .fl-busca-ouvir span{display:none}
  .fl-busca-ouvir{padding:9px}
}
@media (prefers-reduced-motion:reduce){ .fl-busca-panel{transition:none} }
:root[data-motion="reduce"] .fl-busca-panel{transition:none}
.fl-busca-corpo:focus-visible{outline:3px solid var(--deep); outline-offset:-3px}

/* Gatilho no topo do Início: parece um campo de busca e abre a janela. */
.fl-busca-gatilho{
  display:flex; align-items:center; gap:10px; width:100%; min-height:52px; padding:10px 14px 10px 16px;
  border-radius:var(--r-m); border:1.5px solid var(--line); background:var(--card); color:var(--muted);
  font:650 .98rem/1.3 var(--f-body); text-align:left; cursor:pointer; box-shadow:0 3px 0 var(--line-soft);
}
.fl-busca-gatilho svg.ic{width:21px; height:21px; color:var(--deep); stroke-width:2.2; flex:0 0 auto}
.fl-busca-gatilho span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fl-busca-gatilho kbd{flex:0 0 auto; font:700 .72rem var(--f-mono); padding:3px 7px; border-radius:7px; border:1px solid var(--line); background:var(--card-2); color:var(--ink-2)}
.fl-busca-gatilho:focus-visible{outline:3px solid var(--deep); outline-offset:3px}
.fl-busca-gatilho:active{transform:translateY(1px)}
@media (hover:none), (pointer:coarse){ .fl-busca-gatilho kbd{display:none} }