/* ============================================================
 * topbar.css — 手机端顶部功能条（Monogatari quick-menu）默认收起 + 手势唤起
 * 仅作用于窄屏（≤ 37.5em）；桌面端保持原生形态，不受影响。
 *
 * 交互：
 *   - 默认：功能条收起（上滑出屏幕），顶部透明热区常驻。
 *   - 点击或长按屏幕顶部热区 → 展开功能条。
 *   - 展开后点击顶部细条，或 5 秒无操作 → 自动收起。
 * ============================================================ */

@media screen and (max-width: 37.5em) {

  /* ── 顶部热区：透明、常驻、置于功能条之上 ── */
  #ltc-topbar-hotzone {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
    height: calc(48px + env(safe-area-inset-top, 0px));
    z-index: 12;                       /* 高于 quick-menu(11) */
    background: transparent;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  /* 展开后，热区收窄为顶部细条：既可再次点击收起，又不影响下方按钮点击 */
  body.ltc-topbar-visible #ltc-topbar-hotzone {
    height: calc(10px + env(safe-area-inset-top, 0px));
  }

  /* ── 顶部功能条默认收起 ── */
  [data-component="quick-menu"] {
    transform: translateY(-118%);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .2s ease;
  }

  /* ── 展开态 ── */
  body.ltc-topbar-visible [data-component="quick-menu"] {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* ── 倒计时 HUD 跟随：功能条隐藏时贴在顶端；展开时下移避让 ── */
  #ltc-countdown.mode-compact {
    top: 4px;
  }
  body.ltc-topbar-visible #ltc-countdown.mode-compact {
    top: calc(var(--quick-menu-height, 44px) + 4px);
  }

  /* 适配微信等浏览器刘海/状态栏安全区 */
  #ltc-topbar-hotzone {
    top: env(safe-area-inset-top, 0px);
    height: calc(48px + env(safe-area-inset-top, 0px));
  }
}