/*
 * 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; }
  /* sem mouse não existe "hover": favoritar e o menu ficam sempre à vista, e maiores */
  .source-fav, .source-more{ opacity:1; width:38px; height:38px; }
  .source-actions{ top:6px; right:6px; }
  .card-menu{ top:44px; }
  .card-menu button{ min-height:44px; }
  .fc-speak{ opacity:1; }
  .fc-main{ min-height:44px; }
  .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); }

  /* 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-bar input#fc-search{ flex:1 1 100%; max-width:none; }
  .fc-bar select{ flex:1 1 0; min-width:0; }
  .fc-more{ flex-direction:column; align-items:stretch; }
  .fc-field select{ width:100%; max-width:none; }
  .fc-clear{ margin-left:0; }

  /* biblioteca */
  .source-grid{ grid-template-columns:1fr; }
  .lib-tools{ width:100%; flex-wrap:wrap; padding-bottom:var(--sp-3); }
  .lib-search-wrap{ flex:1 1 100%; min-width:0; }
  .lib-search-wrap input{ width:100%; }
  .lib-tools select{ flex:1 1 0; min-width:0; width:auto; }
  .view-head-actions:has(#lib-add){ display:none; }   /* no celular, "Nova fonte" é o botão flutuante */
  .stats-line{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:var(--sp-5); }
  .stats-line::-webkit-scrollbar{ display:none; }
  .stat-item{ flex:none; white-space:nowrap; }
  .stats-line .btn{ display:none; }
  .continue-thumb{ width:96px; }
  .is-list .source-link .cover{ width:112px; }

  /* 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; }
}

/* 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); }
}

/* ---------- v6.4: pílula do Foco, Hoje, Sons e Treinos no celular ---------- */
@media (max-width: 720px){
  .main{ padding-top:calc(env(safe-area-inset-top, 0px) + 56px); }
  .focus-pill{
    display:inline-flex; align-items:center; gap:6px; position:fixed; z-index:115;
    top:calc(env(safe-area-inset-top, 0px) + 10px); right:max(var(--sp-4), env(safe-area-inset-right, 0px));
    height:36px; padding:0 14px; border-radius:var(--radius-pill); cursor:pointer;
    border:1px solid var(--hairline-strong); background:var(--paper-raised); color:var(--ink-soft);
    font-family:var(--font-ui); font-size:.82rem; font-weight:600; box-shadow:0 2px 10px -6px rgba(0,0,0,.35);
  }
  .focus-pill.active, .focus-pill.is-live{ border-color:var(--accent); color:var(--accent); }
  .focus-pill .nav-focus-time{ margin:0; font-variant-numeric:tabular-nums; color:inherit; }
  .focus-pill:has(.nav-focus-time:not([hidden])) .fp-label{ display:none; }
  body.in-review .focus-pill{ display:none; }

  .today-card{ padding:var(--sp-4); }
  .today-card h2{ font-size:1.3rem; }
  .today-heat{ padding:var(--sp-4); }
  .snd-hero{ gap:var(--sp-4); }
  .snd-big{ width:96px; height:96px; font-size:2.2rem; }
  .snd-facts > div{ grid-template-columns:1fr; gap:4px; }
  .ex-row{ grid-template-columns:auto 1fr auto; row-gap:0; }
  .ex-row .ipa{ grid-column:2; }
  .ex-row .ex-pt{ grid-column:2; }
  .ex-row .ex-pick{ grid-column:3; grid-row:1; }
  .vowel-wrap{ padding-left:12px; margin:0 calc(-1 * var(--sp-4)); }
  .vowel-chart{ min-width:520px; }
  .vc-close, .vc-open{ display:none; }
  .ipa-table th[scope="row"]{ font-size:.62rem; padding:4px 6px; }
  .reader-tools{ flex-wrap:wrap; justify-content:flex-end; }
  .snd{ min-width:44px; height:44px; }
  .vowel-dot{ min-width:36px; height:36px; font-size:1rem; }
  .pair-word{ font-size:1.35rem; }
  .pair-opt{ min-height:96px; }
  .drill-word{ font-size:1.65rem; }
  .drill-sentence{ font-size:1.15rem; }
  .drill-form{ flex-direction:column; }
  .gender-btn{ min-height:72px; }
  .nav-sub{ display:none; }
}