/* ============================================================
   知微 · 手机版样式  mobile.css

   只在两种情况下生效（由 public/index.html 里那个 <link media> 决定）：
     1. 屏幕宽度 ≤ 768px  —— 电脑版在窄屏上自动降级，不用手动切
     2. 访问 /m 路径       —— 显式进入手机版，宽屏上也按手机单列渲染

   策略：桌面把导航放在左侧竖排；手机版用同一个 DOM 塌缩成底部标签栏。
   不复制第二套导航，避免两处维护走样 —— 版本差异全在这一个文件里。
   ============================================================ */

/* 底层容器：给底部标签栏让出空间 */
.app {
  display: block;
  min-height: 100vh;
  padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
}

/* ---------- 侧边栏 → 底部标签栏 ---------- */
.sidebar {
  position: fixed; left: 0; right: 0; bottom: 0; top: auto;
  width: 100%; flex: none; height: auto; z-index: 60;
  flex-direction: row;
  border-right: none; border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 16px rgba(16, 24, 40, 0.07);
}
/* 品牌、分组标题、系统状态在手机上让位给内容 */
.sidebar .brand,
.sidebar .sidebar-foot,
.sidebar .nav-group { display: none; }

.nav {
  flex-direction: row; flex: 1; gap: 0; padding: 5px 4px;
  overflow: visible; align-items: stretch;
}
.nav-item {
  flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px;
  padding: 7px 2px 6px; border-radius: 12px;
  font-size: 10.5px; line-height: 1.25; text-align: center;
  justify-content: center; position: relative;
}
.nav-item svg { width: 21px; height: 21px; flex: 0 0 21px; }
.nav-label { display: none; }
.nav-label-sm { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* 角标钉到图标右上角，不占标签宽度 */
.nav-item .chip {
  position: absolute; top: 3px; left: 50%; margin-left: 3px;
  font-size: 9.5px; padding: 0 5px; min-width: 15px; text-align: center;
  border: 1.5px solid var(--surface);
}
.nav-item .chip.live::before { display: none; }

/* ---------- 顶栏 ---------- */
.topbar { padding: 10px 14px; gap: 10px; align-items: center; flex-wrap: wrap; }
.topbar .spacer { display: none; }
.topbar-title { flex: 1 1 auto; }
#top-actions { justify-content: flex-end; flex: 1 1 100%; }
.topbar-brand {
  display: grid; place-items: center; flex: 0 0 32px;
  width: 32px; height: 32px; border-radius: 9px; font-size: 16px;
  background: linear-gradient(140deg, var(--accent), #ff9068);
  box-shadow: 0 3px 10px rgba(228, 87, 46, 0.28);
}
.topbar-title { flex: 1; }
.topbar h1 { font-size: 16px; }
.topbar .sub { display: none; }
.topbar .row { gap: 6px; }

/* 顶栏：标题不再被按钮挤成竖排，放不下就省略 */
.topbar h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .btn { padding: 7px 10px; font-size: 12.5px; }
.topbar .ver-switch { padding: 5px 10px; font-size: 12px; }

/* ---------- 内容区 ---------- */
.view { padding: 14px 13px 34px; }
.card-head { padding: 12px 14px; flex-wrap: wrap; row-gap: 8px; }
.card-body { padding: 14px; }
.grid { gap: 12px; }

/* 有些页面用内联 style 写了双列网格（优先级高于类断点），手机上强制回单列 */
.view .grid[style] { grid-template-columns: minmax(0, 1fr) !important; }

/* 不可断长串（URL、路径、命令、参数名）的最小宽度 = 整串宽度，
   是布局视口被悄悄撑大的头号根源；anywhere 只在真放不下时才断 */
.view, .view * { overflow-wrap: anywhere; }

/* 表格：窄屏改为横向滚动，不压缩列宽（压缩会让文字全变成省略号） */
.card-body.tight { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { min-width: 560px; }
.table th, .table td { padding: 10px 12px; }

/* 列表项：给右侧操作区留出空间，避免按钮被挤到第二行 */
.list-item { padding: 11px 14px; gap: 10px; }

/* 分段控件过长时横向滚动 */
.seg { max-width: 100%; overflow-x: auto; }
.seg button { white-space: nowrap; }

/* 合成台：手机上竖屏视频才是主角，别让深色底吃掉半屏 */
.stage-wrap { padding: 10px; }
.stage-wrap canvas { max-height: 48vh; }

.danmaku-box { height: 220px; }

/* 弹层：从底部弹出，避开手势条 */
.modal-mask { padding: 12px; align-items: flex-end; }
.modal { max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.modal-head { padding: 15px 16px; }
.modal-body { padding: 16px; }
.modal-foot { padding: 13px 16px calc(13px + env(safe-area-inset-bottom, 0px)); }

/* Toast 上移，别被底部标签栏盖住 */
.toasts {
  left: 12px; right: 12px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
.toast { min-width: 0; max-width: none; }

/* iOS 上输入框字号 < 16px 会触发自动放大，必须顶到 16px */
.input, .select, .textarea, .input:focus, .scene textarea { font-size: 16px; }
.input, .select { padding: 10px 12px; }

/* 触屏热区：小按钮容易点不中 */
.btn.sm, .btn.xs { padding: 7px 11px; font-size: 12.5px; }

/* ---------- 公开分享页 ----------
   手机上是单列：画面满宽铺开，信息依次排在下面（宽屏那套「舞台 + 侧栏」
   在 app.css 的媒体查询里，且已排除手机版）。 */
.pub { padding: 14px 12px calc(40px + env(safe-area-inset-bottom, 0px)); }
.pub-title { font-size: 16px; }
.pub-fs { top: 8px; right: 8px; padding: 5px 10px; font-size: 12px; }
.pub-top { margin-bottom: 4px; }
.pub-top-actions { gap: 6px; }
.pub-share { padding: 8px 13px; }
/* 窄屏上「分享 + 进入首页」两个按钮要和品牌名共处一行：
   最先让"进入首页"收成图标（它是返回，不是观众的目标），保住分享的文字。 */
.pub-brand { font-size: 12px; }
@media (max-width: 400px) {
  .pub-home span { display: none; }
  .pub-home { padding: 8px 11px; }
}

/* ============================================================
   在宽屏上打开 /m：收成一个居中的手机视口，一眼可辨
   （只有在显式进入手机版时 html 才会带 .mv，窄屏本来就不需要这段）
   ============================================================ */
@media (min-width: 769px) {
  html.mv body { background: #e6eaf0; }
  html.mv .app {
    width: 430px; margin: 0 auto;
    background: var(--bg);
    box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.06), 0 20px 60px rgba(16, 24, 40, 0.16);
    padding-bottom: 62px;
  }
  /* 430px 里塞不下四列统计卡 —— 多列网格一律收成两列 */
  html.mv .g2, html.mv .g3, html.mv .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 底部标签栏跟着收进这个手机视口，而不是横贯整个显示器 */
  html.mv .sidebar {
    left: 50%; right: auto; margin-left: -215px; width: 430px;
    border-radius: 14px 14px 0 0;
  }
  html.mv .topbar { border-radius: 0; }
}