/* ============================================================================
 * 移动端导航与搜索条（由 app.js 的 mobileChromeHtml() 渲染）
 * 说明：桌面端保持原有「顶栏 + 左侧边栏」结构不变；≤760px 时隐藏侧边栏与顶栏导航，
 *       改由顶栏的两个按钮提供「站内搜索」与「全站导航抽屉」，底部仍保留 5 项快捷导航。
 * 设计约束：只用 theme.css 已有的 CSS 变量，不写死颜色；间距取 4/8/12/16/24 阶梯；
 *          圆角用 --radius / --radius-sm；动效统一 500ms 移动、300ms 颜色/透明度。
 * ========================================================================== */

.mobile-search,
.mobile-drawer {
  display: none;
}

.mobile-only {
  display: none !important;
}

.desktop-only {
  display: inline-flex;
}

@media (max-width: 760px) {
  .mobile-only {
    display: inline-flex !important;
  }

  .desktop-only {
    display: none !important;
  }

  /* 顶栏收紧：隐藏副标题，避免 390px 下品牌名换行 */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    gap: 6px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .topbar .brand {
    min-width: 0;
  }

  .topbar .brand .brand-sub {
    display: none;
  }

  .topbar .brand > span:not(.brand-mark) {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 124px;
  }

  .topbar .topbar-actions {
    gap: 0;
    flex-shrink: 0;
  }

  .topbar .topbar-actions .btn-sm {
    padding: 5px 8px;
    font-size: 12px;
    border-radius: 8px;
  }

  /* 纯图标按钮（搜索 / 菜单）压窄，给品牌名腾出空间 */
  .topbar .topbar-actions .mobile-only {
    padding: 5px 4px;
    font-size: 15px;
    line-height: 1;
  }

  /* 「登录」在移动端降级为纯文字按钮，给搜索/菜单按钮腾位置 */
  .topbar .topbar-actions .btn-outline {
    padding: 5px 6px;
    border-color: transparent;
    background: transparent;
  }

  /* ---------- 可折叠搜索条 ---------- */
  .mobile-search {
    display: none;
    padding: 4px 14px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--background);
    animation: ec-slide-down 300ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mobile-search.open {
    display: block;
  }

  .mobile-search form {
    margin: 0;
  }

  .mobile-search .input {
    width: 100%;
  }

  /* ---------- 全站导航抽屉 ---------- */
  .mobile-drawer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
  }

  .mobile-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: oklch(0% 0 0 / 0.42);
    opacity: 0;
    transition: opacity 300ms var(--ease-default, cubic-bezier(0.22, 1, 0.36, 1));
  }

  .mobile-drawer-panel {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(86vw, 360px);
    display: flex;
    flex-direction: column;
    background: var(--card);
    color: var(--card-foreground);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  }

  html.drawer-open .mobile-drawer {
    pointer-events: auto;
  }

  html.drawer-open .mobile-drawer-backdrop {
    opacity: 1;
  }

  html.drawer-open .mobile-drawer-panel {
    transform: translateX(0);
  }

  html.drawer-open body {
    overflow: hidden;
  }

  .mobile-drawer-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--card);
  }

  .mobile-drawer-head .brand {
    font-size: 15px;
    font-weight: 600;
  }

  .mobile-drawer-nav {
    padding: 12px 10px 24px;
  }

  .mobile-drawer-nav .side-group {
    margin-bottom: 12px;
  }

  .mobile-drawer-nav .side-item {
    min-height: 44px; /* 触控目标不小于 44px */
  }

  /* 底部快捷导航适配 iPhone 安全区 */
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(var(--bottom-nav-height, 60px) + env(safe-area-inset-bottom, 0px));
  }

  /* 抽屉打开时禁止背景滚动 */
  html.drawer-open,
  html.drawer-open body {
    overscroll-behavior: none;
  }
}

@keyframes ec-slide-down {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-search {
    animation: none;
  }
  .mobile-drawer-backdrop,
  .mobile-drawer-panel {
    transition: opacity 200ms linear;
  }
  .mobile-drawer-panel {
    transition: none;
  }
}