/*
 * Celular e toque (v6.2). Carregado por último de propósito: só SOBRESCREVE o que precisa.
 *
 *  - ≤ 720 px: a barra lateral sai e entra uma barra de abas embaixo, ao alcance do polegar;
 *    "Nova fonte" vira um botão flutuante (só na Biblioteca); modais viram "folhas" que sobem
 *    de baixo; a revisão tem botões grandes fixos na base da tela.
 *  - (pointer: coarse): alvos de toque ≥ 44 px e campos com 16 px (abaixo disso o iOS dá zoom
 *    ao focar). Vale também para tablets, que não usam a barra inferior.
 *  - Áreas seguras (notch, barra de gestos) via env(safe-area-inset-*): o index.html usa viewport-fit=cover.
 */

/* ---------- desktop: os elementos do celular existem no DOM, mas não aparecem ---------- */
.bottom-nav, .fab{ display:none; }
.video-offline{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--sp-3); padding:var(--sp-5); text-align:center; color:#f1ede2; background:#1b1912; font-size:var(--fs-small); line-height:1.5;
}
.video-offline .btn{ color:var(--ink); }
.kbd-hint{ white-space:nowrap; }

button, .btn, a, .chip, .nav-link, .bn-item, .fab{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; }

/* ---------- toque (celular E tablet) ---------- */
@media (pointer: coarse){
  input, textarea, select{ font-size:max(16px, 1rem); }       /* evita o zoom automático do iOS ao focar */
  .btn{ min-height:44px; }
  .btn-sm{ min-height:40px; }
  .btn-icon, .fav-btn, .speak-mini, .speak-btn, .banner-x{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .chip{ min-height:38px; }
  .nav-link{ min-height:44px; }
  .level-badge{ min-height:32px; }
  .flash-actions{ gap:2px; }
  .setting-row input[type=checkbox] + span{ transform:scale(1.1); }
  /* sem mouse não há "teclas" para sugerir */
  kbd, .kbd-hint{ display:none; }
}

/* ---------- selo de ação sobre a seleção, ancorado embaixo no toque ---------- */
.selection-toolbar.is-docked{
  left:50%; top:auto; transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom, 0px) + var(--bottom-nav-h, 0px) + var(--sp-4));
  max-width:calc(100vw - 24px); gap:12px; padding:8px 8px 8px 18px; font-size:.95rem;
}
.selection-toolbar.is-docked button{ min-height:44px; padding:0 20px; font-size:.95rem; }
body.is-reading .selection-toolbar.is-docked{ bottom:calc(env(safe-area-inset-bottom, 0px) + var(--sp-4)); }

/* ---------- celular ---------- */
@media (max-width: 720px){
  :root{ --bottom-nav-h:60px; }

  .app-shell{ display:block; min-height:100vh; min-height:100dvh; }
  .sidebar{ display:none; }
  .main{
    padding:var(--sp-4);
    padding-left:max(var(--sp-4), env(safe-area-inset-left, 0px));
    padding-right:max(var(--sp-4), env(safe-area-inset-right, 0px));
    padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + var(--sp-6));
  }
  body.is-reading .main, body.in-review .main{ padding-bottom:calc(env(safe-area-inset-bottom, 0px) + var(--sp-6)); }

  /* barra de abas */
  .bottom-nav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:120;
    height:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom:env(safe-area-inset-bottom, 0px);
    background:var(--paper-raised); border-top:1px solid var(--hairline-strong);
  }
  body.is-reading .bottom-nav, body.in-review .bottom-nav{ display:none; }
  .bn-item{
    flex:1; min-width:0; position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    background:none; border:none; padding:6px 2px; cursor:pointer;
    color:var(--ink-faint); font-family:var(--font-ui); font-size:.68rem; font-weight:500; text-decoration:none;
  }
  .bn-item svg{ width:22px; height:22px; }
  .bn-item span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bn-item.active{ color:var(--accent); font-weight:600; }
  .bn-item.active::before{ content:''; position:absolute; top:0; left:25%; right:25%; height:3px; border-radius:0 0 3px 3px; background:var(--accent); }
  .bn-item:focus-visible{ outline:2px solid var(--accent); outline-offset:-4px; }
  .bn-item .nav-focus-time{
    position:absolute; top:4px; left:calc(50% + 6px); margin:0; padding:1px 5px; border-radius:var(--radius-pill);
    background:var(--accent); color:var(--accent-ink); font-size:.6rem; font-weight:600; font-variant-numeric:tabular-nums;
  }
  .bn-item.is-live{ color:var(--accent); }

  /* botão flutuante */
  .fab{
    display:flex; align-items:center; justify-content:center;
    position:fixed; z-index:110; width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
    right:max(var(--sp-4), env(safe-area-inset-right, 0px));
    bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + var(--sp-4));
    background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow-modal);
  }
  .fab[hidden]{ display:none; }
  .fab svg{ width:26px; height:26px; }
  .fab:active{ transform:scale(.96); }

  /* avisos, foco e toasts acima da barra de baixo */
  .toast-host{ bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + var(--sp-4)); max-width:calc(100vw - 24px); }
  body.is-reading .toast-host, body.in-review .toast-host{ bottom:calc(env(safe-area-inset-bottom, 0px) + var(--sp-4)); }
  .focus-panel{ bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + var(--sp-3)); }
  body.is-reading .focus-panel, body.in-review .focus-panel{ bottom:calc(env(safe-area-inset-bottom, 0px) + var(--sp-3)); }
  .banner{ padding:var(--sp-3); }
  .banner-actions{ width:100%; }
  .banner-actions .btn{ flex:1; justify-content:center; }

  /* cabeçalhos de tela */
  .view-head{ flex-direction:column; align-items:stretch; gap:var(--sp-3); margin-bottom:var(--sp-4); }
  .view-head h1{ font-size:var(--fs-h1); }
  .view-head-actions{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); }
  .view-head-actions .btn{ width:100%; justify-content:center; }
  .reader-head{ flex-wrap:wrap; gap:var(--sp-3); }
  .today-panel{ gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); }
  .today-num{ font-size:2rem; }

  /* grades de uma coluna */
  .flash-grid{ grid-template-columns:1fr; }
  .continue-strip{ grid-template-columns:1fr; }
  .summary-tiles{ grid-template-columns:1fr 1fr 1fr; gap:var(--sp-2); }
  .summary-tile{ padding:var(--sp-3); }
  .summary-tile b{ font-size:1.25rem; }
  .fc-filters select, .fc-filters input{ max-width:none; width:100%; }

  /* modais viram folhas que sobem de baixo */
  .modal-backdrop{ align-items:flex-end; padding:0; }
  .modal{
    width:100%; max-height:92vh; max-height:92dvh;
    border-radius:var(--radius-md) var(--radius-md) 0 0;
    padding:var(--sp-5) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
    animation:sheet-in var(--dur-base) var(--ease);
  }
  @keyframes sheet-in{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }
  .modal-actions{ flex-direction:column-reverse; }
  .modal-actions-stack{ flex-direction:column; }
  .modal-actions .btn{ width:100%; justify-content:center; min-height:48px; }

  /* revisão: o cartão ocupa a largura, e os botões ficam fixos na base, sob o polegar */
  .review-stage{ padding:var(--sp-3) 0 0; gap:var(--sp-4); }
  .flip-card{ width:100%; height:min(46vh, 340px); height:min(46dvh, 340px); }
  .flip-face{ padding:var(--sp-4); }
  .flip-face .word{ font-size:1.7rem; }
  #rv-reveal, #rv-grades{
    position:sticky; z-index:5; width:100%;
    bottom:calc(env(safe-area-inset-bottom, 0px) + var(--sp-3));
  }
  #rv-reveal{ min-height:58px; font-size:1.05rem; justify-content:center; }
  #rv-grades{ padding:var(--sp-2) 0; background:var(--paper); }
  .rate-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-2); width:100%; }
  .rate-btn{ min-width:0; min-height:64px; padding:var(--sp-2); justify-content:center; }
  .review-nav{ width:100%; display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-1); }
  .review-nav .btn{ justify-content:center; }
  .review-summary{ padding:var(--sp-3) 0; }
  .summary-actions .btn{ flex:1 1 100%; justify-content:center; min-height:48px; }

  /* vídeo e configurações */
  .video-layout{ gap:var(--sp-4); }
  .setting-row select, .setting-row input[type=number]{ width:100%; }
  .ds-item-actions{ width:100%; }
  .ds-item-actions .btn{ flex:1; justify-content:center; }
}

/* telas muito estreitas */
@media (max-width: 360px){
  .bn-item{ font-size:.62rem; }
  .today-panel{ flex-direction:column; align-items:flex-start; }
}

/* paisagem em celular: a barra de baixo come altura demais */
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape){
  :root{ --bottom-nav-h:48px; }
  .bn-item span{ display:none; }
  .flip-card{ height:min(60vh, 260px); }
}