/* web/css/layout.css —— 响应式布局 + 顶部导航（取代旧底部 tabbar）
 * 布局：
 *   顶部 Navbar（fixed，毛玻璃） → body padding-top: nav-height → page content
 *   没有底部 tabbar（移除），也没有桌面端左侧 sidebar（移除）
 *   ↑/↓ 翻页/翻屏按钮：右下 ↓ / 右上 ↑（fixed，不遮挡内容，避开 iOS 安全区）
 */

:root {
  --nav-h: 56px;       /* 顶部 navbar 高度 */
  --nav-h-mobile: 52px;
}

.page {
  display: flex;
  flex-direction: column;
  /* body 已用 padding-top 让出顶部 navbar（52/56px）；这里必须减掉同一高度，
     否则 .page 的 100dvh 会与 body 的 padding 叠加 → 整页多出 52/56px 冗余可滚
     （实测 390×844：docSh 896 / ch 844；1440×900：docSh 956 / ch 900）。
     长页面内容超过该 min-height 时仍正常滚动，不会截断。 */
  min-height: calc(100vh - var(--nav-h-mobile));
  min-height: calc(100dvh - var(--nav-h-mobile));
}
@media (min-width: 600px) {
  .page {
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100dvh - var(--nav-h));
  }
}
.page-body {
  flex: 1;
  /* 底部留白给翻页按钮（不被压住） */
  padding-bottom: calc(env(safe-area-inset-bottom, 0) + 16px);
}

body {
  /* 让顶部 navbar 不遮挡页面：navbar 是 fixed，所以 body 给顶 padding */
  padding-top: var(--nav-h-mobile);
}
@media (min-width: 600px) {
  body { padding-top: var(--nav-h); }
}

/* ---------- 顶部导航 Navbar（fixed） ---------- */
.app-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h-mobile);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
  z-index: 200;
  /* 毛玻璃 */
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
}
@media (min-width: 600px) {
  .app-navbar { height: var(--nav-h); }
}
.app-navbar-inner {
  max-width: var(--content-max);   /* none：与页面内容列同宽（见 tokens.css） */
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  position: relative;
}
/* 桌面端 ≥1024：内容列被固定左栏推开（sidebar.css 给 body 加 padding-left），而导航栏是通栏
   fixed、内层仍居中 → 内层比页面内容列窄且整体左移（1522 视口实测：内层 [166,1346] vs
   分泡页卡片 [276,1496]）。这里让内层盒子跟随同一个左栏偏移：内层盒子与内容列完全重合，
   内边距 16px 与 .card 的左右外边距 16px 对齐 → logo 左缘 / 最后一项右缘正落在卡片边缘
   （实测 276 / 1496）。折叠态同幅跟随（内容列也由 body padding-left 同步）。 */
@media (min-width: 1024px) {
  .app-navbar-inner { margin-left: var(--sidebar-w); margin-right: 0; }
  body.sidebar-collapsed .app-navbar-inner { margin-left: var(--sidebar-w-collapsed); }
}

/* logo + 字标 */
.app-navbar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--c-text);
  flex-shrink: 0;
  min-height: var(--tap-min);
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.app-navbar-logo:hover { background: var(--c-tint-primary); text-decoration: none; }
.app-navbar-logo-mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--c-primary);
  color: var(--c-primary-ink);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.app-navbar-logo-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.1;
  font-family: var(--font-display);
}
.app-navbar-logo-text > span:first-child {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -0.01em;
}
.app-navbar-logo-sub {
  font-size: 10px;
  color: var(--c-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}
@media (max-width: 599px) {
  .app-navbar-logo-sub { display: none; }
}

/* nav items 容器 */
.app-navbar-items {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;        /* 推到右侧 */
  flex-shrink: 0;
  height: 100%;
}
.app-navbar-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--c-ink);
  text-decoration: none;
  border-radius: 8px;
  position: relative;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.app-navbar-item:hover {
  background: var(--c-tint-primary);
  color: var(--c-text);
  text-decoration: none;
}
.app-navbar-item:focus-visible {
  box-shadow: var(--shadow-focus);
}
.app-navbar-item.active {
  color: var(--c-text);
  font-weight: 700;
}
/* active 下划线（细墨线，暗夜下细白线） */
.app-navbar-item.active::after {
  content: '';
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 6px;
  height: 1.5px;
  background: var(--c-primary);
  border-radius: 2px;
}

/* 用户项（登录态：头像 / 未登录：登录/注册） */
.nav-user {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: 0 var(--space-3);
  color: var(--c-ink);
  text-decoration: none;
  border-radius: 8px;
  position: relative;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-user:hover {
  background: var(--c-tint-primary);
  color: var(--c-text);
  text-decoration: none;
}
.nav-user:focus-visible {
  box-shadow: var(--shadow-focus);
}
/* 用户项也要有和其它项一致的 active 视觉（/user* 高亮） */
.nav-user.active {
  color: var(--c-text);
}
.nav-user.active .nav-user-text { font-weight: 700; }
.nav-user.active::after {
  content: '';
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 6px;
  height: 1.5px;
  background: var(--c-primary);
  border-radius: 2px;
}
.nav-user.active .nav-user-avatar { border-color: var(--c-text); }
.nav-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-card-2);
  border: 1px solid var(--c-line-strong);
  object-fit: cover;
  flex-shrink: 0;
}
.nav-user-avatar-initial {
  background: var(--c-primary);
  color: var(--c-primary-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}
.nav-user-text {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  white-space: nowrap;
}

/* 桌面端 CTA（立即询价） */
.app-navbar-cta {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--space-4);
  background: var(--c-primary);
  color: var(--c-primary-ink);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  flex-shrink: 0;
  margin-left: var(--space-2);
  transition: background 0.15s ease, transform 0.06s ease;
}
.app-navbar-cta:hover {
  background: var(--c-primary-hover);
  text-decoration: none;
}
.app-navbar-cta:active { transform: scale(0.98); }
.app-navbar-cta:focus-visible { box-shadow: var(--shadow-focus); }

/* 移动端：收紧间距。5 项（服务/API/价格/动态/用户）+ logo 必须在 390px 内一行放下：
   logo 标记 28 + 5 项各 ~34 + 用户项 ~70 + 内边距/间隔 ≈ 330–360px（实测见验收报告）。 */
@media (max-width: 599px) {
  .app-navbar-inner { padding: 0 var(--space-1); gap: var(--space-1); }
  .app-navbar-items { gap: 0; }
  .app-navbar-logo { padding: 4px 6px; gap: 6px; }
  .app-navbar-item { padding: 0 6px; font-size: var(--fs-sm); }
  .nav-user { padding: 0 6px; min-width: 0; }
  .nav-user-text { font-size: var(--fs-sm); }
  .nav-user.active::after { left: 4px; right: 4px; }
}

/* ---------- 翻页/翻屏按钮（FAB） ---------- */
.scroll-fab-host {
  position: fixed;
  right: var(--space-4);
  bottom: calc(env(safe-area-inset-bottom, 0) + 80px);  /* 避开底部（移动端 home indicator 区域） */
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 高于页面内容（sticky 页头 z=10 等），低于弹层(99998)/toast(100000)；
     否则资讯详情等页面 elementFromPoint 会被正文段落吃掉 */
  z-index: 300;
  pointer-events: none;    /* 容器本身不接收事件 */
}
.scroll-fab {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-card);
  color: var(--c-text);
  border: 1px solid var(--c-line-strong);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.scroll-fab:hover { background: var(--c-card-2); box-shadow: var(--shadow-card-hover); }
.scroll-fab:active { transform: scale(0.94); }
.scroll-fab:focus-visible { box-shadow: var(--shadow-focus); }
.scroll-fab svg { width: 18px; height: 18px; display: block; }
/* 禁用态：只做视觉降权，保留可命中（pointer-events 不能设 none —— 否则 elementFromPoint
   会穿透到正文段落，且「置灰」按钮在测试/无障碍上应仍可被识别与聚焦）；点击本身在处理器里
   已按边界提前 return，行为仍是"点了不动"。 */
.scroll-fab.disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.scroll-fab.hidden {
  display: none;
}

/* ↑ 固定在右上角（导航栏 + 页头之下、主题切换按钮之下）；↓ 保持右下角。
   首页同样适用（用户规格：首页 ↑ = 对话顶部 在右上、↓ = 最新对话 在右下）。 */
.scroll-fab-host .scroll-fab-top {
  position: fixed;
  top: calc(var(--nav-h-mobile) + var(--header-h) + 13px);   /* 52 + 44 + 1px 页头描边 + 12 间距 */
  right: var(--space-4);
  bottom: auto;
}
@media (min-width: 600px) {
  .scroll-fab-host .scroll-fab-top {
    top: calc(var(--nav-h) + var(--header-h) + 13px);
  }
}
/* 移动端与 ↓ 同一条右边线（.scroll-fab-host 在 ≤599px 用 --space-3） */
@media (max-width: 599px) {
  .scroll-fab-host .scroll-fab-top {
    right: var(--space-3);
  }
}
/* 桌面端靠右，离内容稍远一些 */
@media (min-width: 1024px) {
  .scroll-fab-host { right: var(--space-5); bottom: calc(env(safe-area-inset-bottom, 0) + 24px); }
}

/* ---------- 内容禁区：右上 ↑ 浮标下方的「搜索栏」让位 ---------- */
/* ↑ 浮标（.scroll-fab-top）是 position:fixed + z-index:300，宽 44px、右边线 var(--space-4)
   （≤599px 为 var(--space-3)），纵向正好压在被 sticky 固定在页头下方的 .search-bar 上。
   三字码页的「清空」按钮原本落在它的命中带里 —— 实测 1440×900：清空 x1382 y117 42×32、
   浮标 x1380 y113 44×44，document.elementFromPoint(清空中心) 命中的是浮标里的 <svg>，
   于是按钮鼠标点不到（键盘仍可达）。
   这里给搜索栏留出「浮标宽 44px + 8px 间隙」的右侧让位，使「清空」整体移到浮标命中带之外：
   浮标是禁用态还是启用态都能真实点到按钮。
   采用「布局让位」而不是把浮标禁用态改成 pointer-events:none —— 后者只解决 scrollY≈0 的禁用态，
   一旦滚动让 ↑ 变回启用态，贴着页头的搜索栏又会被压住；且会改变全站浮标的 hit-test 语义
   （见 .scroll-fab.disabled 处的既有说明）。 */
.page-body .search-bar { padding-right: calc(var(--space-4) + 52px); }

/* 首页（对话滚动模式）：FAB 组上移，避免 ↓ 压住对话输入区的发送按钮。
   composer 高约 134px（输入框 66 + 胶囊 44 + 内边距 24），故 ↓ 底边取 safe + 150px。
   桌面端同样适用（首页在桌面端也是「对话区吸底」布局）。 */
.scroll-fab-host.scroll-fab-host-chat {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 150px);
}

/* 移动端按钮稍小 */
@media (max-width: 599px) {
  .scroll-fab-host { right: var(--space-3); bottom: calc(env(safe-area-inset-bottom, 0) + 64px); gap: 8px; }
  .scroll-fab { width: 40px; height: 40px; }
  .scroll-fab svg { width: 16px; height: 16px; }
}

/* ---------- 工具卡网格（保持） ---------- */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
@media (min-width: 600px) {
  .tool-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); padding: var(--space-4); }
}
@media (min-width: 1024px) {
  .tool-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); padding: 0; }
}

.tool-card {
  background: var(--c-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--c-line);
  padding: var(--space-4) var(--space-3);
  display: flex; flex-direction: column;
  cursor: pointer;
  position: relative;
  min-height: 100px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.tool-card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--c-line-strong); transform: translateY(-1px); }
.tool-card:active { transform: translateY(0); }
.tool-card .tool-icon { font-size: 26px; margin-bottom: var(--space-2); line-height: 1; }
.tool-card .tool-name { font-size: var(--fs-md); font-weight: 600; color: var(--c-text); line-height: 1.3; letter-spacing: -0.005em; }
.tool-card .tool-desc { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 4px; line-height: 1.5; }
@media (min-width: 1024px) {
  .tool-card { min-height: 108px; padding: var(--space-5); }
  .tool-card .tool-name { font-size: var(--fs-lg); }
}

/* 编辑态工具卡 */
.tool-card.edit {
  border-color: var(--c-text);
  background: var(--c-tint-primary);
}
.tool-card.edit::after {
  content: '拖动 / 点击按钮调整';
  position: absolute;
  bottom: -22px; left: 0; right: 0;
  text-align: center;
  font-size: 11px;
  color: var(--c-text);
  opacity: 0.7;
}
.tool-card.edit .move-btns {
  position: absolute;
  top: 6px; right: 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.tool-card .move-btn {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--c-primary); color: var(--c-primary-ink);
  border: none; font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-mid);
  transition: transform 0.12s ease, background 0.15s ease;
}
.tool-card .move-btn:hover { background: var(--c-primary-hover); }
.tool-card .move-btn:active { transform: scale(0.92); }
.tool-card .move-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* ---------- 价格卡片网格（保持） ---------- */
.region-list { padding: var(--space-3) var(--space-4) var(--space-5); }
.region-card { margin-bottom: var(--space-3); }
.region-header {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--c-line);
  margin-bottom: var(--space-1);
}
.region-name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--c-text); letter-spacing: -0.01em; }
.price-row {
  display: flex; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-line);
  gap: var(--space-2);
}
.price-row:last-child { border-bottom: none; }
.price-airport {
  width: 64px;
  font-size: var(--fs-md); font-weight: 600; color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.price-value { flex: 1; text-align: right; font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.price-trend { width: 20px; text-align: right; font-size: var(--fs-md); font-weight: 700; }

@media (min-width: 600px) {
  .region-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); padding: var(--space-4); }
}
@media (min-width: 1024px) {
  .region-list { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); padding: 0; }
}

/* 兼容旧类名（页面内可能仍引用 .tab-bar）—— 全部隐藏不再渲染 */
.tab-bar, .tab-bar-inner, .tab-item, .middle-btn, .tab-icon, .tab-text, .tab-bar-safe {
  /* 不渲染 */
  display: none !important;
}