/* chrome.css -- MiniApp 外壳：顶栏 / 底部导航 / 设置面板（WEB-THEME-004）。
 *
 * 结构照搬 POS 剧情终端那套外壳（`<header id="top">` + `<nav id="bnav">` +
 * `#setbtn` 打开的显示与声音面板 + 根元素上的 data-theme 配色），
 * 因为它把这四件事都放在了正确的位置上：
 *
 *   顶栏      品牌 + 本机开关（音效 / 动效 / 终端质感）+ 一个进设置的按钮
 *   底部导航  跨页导航常驻，拇指够得着（移动端最重要的一条可达性）
 *   设置面板  皮肤的「配色 / 字体 / 动效」这类本机表现，不与业务功能开关混在一起
 *
 * 只含结构与形状；颜色一律走主题令牌，所以六个配色、两个皮肤都不用改这里一行。
 *
 * 文案策略：零用户可见文案（bebot/text_audit.py 把新增静态资源里的 CJK 字符串
 *   当硬编码文案）。注释里的中文用「」包，且不要用反引号把中文夹在中间。
 *
 * 资源版本：引用本文件必须带 ?v=版本号（Cloudflare 对 /static/*.css 缓存 4 小时）。
 */

/* ─────────────────────────────────────────────────────────────── 顶栏 ─── */
/* 吸附在顶部。滚动时始终可见 —— 与「确定按钮常驻顶部」同一条道理
 * （docs/architecture/WEB-UI-PRINCIPLES.md 通识 3）。 */
.tc-top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin: -8px -10px 8px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}

.tc-brand {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-shadow: var(--glow);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-cluster {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ─────────────────────────────────────────────────── 底部导航（bnav）─── */
/* 与 sticky 动作条（`.ui-actionbar`）会打架，所以页面要么用动作条、
 * 要么用底部导航；`.tc-bottom` 存在时正文底部留出安全距离。 */
.tc-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  gap: 4px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

.tc-bottom::-webkit-scrollbar {
  display: none;
}

.tc-bottom a {
  flex: 1 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 56px;
  padding: 5px 8px;
  border-radius: var(--radius);
  color: var(--muted);
  text-decoration: none;
  font-size: 11px;
  line-height: 1.2;
}

.tc-bottom a.is-active {
  color: var(--accent);
  background: var(--accent-soft, transparent);
}

.tc-bottom .tc-icon {
  font-size: 15px;
  line-height: 1;
}

/* 有底部导航时给正文留位（避免最后一屏被永久遮住）。 */
body.has-tc-bottom {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* ──────────────────────────────────────────────────── 设置面板（sheet）── */
.tc-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: color-mix(in srgb, #000 55%, transparent);
}

.tc-sheet[hidden] {
  display: none;
}

.tc-sheet-body {
  width: 100%;
  max-width: 520px;
  max-height: 86vh;
  overflow: auto;
  padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--bg-elevated);
  color: var(--text);
  animation: t-enter var(--motion-enter-duration) ease-out both;
}

.tc-sheet-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.tc-sheet-title {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 600;
}

.tc-group {
  margin: 12px 0;
}

.tc-group-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--muted);
}

.tc-group-title::before {
  content: "";
  width: 3px;
  height: 12px;
  border-radius: 1px;
  background: var(--accent);
  box-shadow: var(--glow);
}

/* ───────────────────────────────────────────────── 配色色板（六色）─── */
.tc-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tc-swatch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.tc-swatch:hover {
  border-color: var(--accent-line, var(--accent));
  color: var(--text);
}

.tc-swatch.is-on {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--glow);
}

/* 色点用行内 style 给的 swatch 值（注册表里的 --accent），
 * 所以这里不写任何颜色 —— 加新配色不需要动这个文件。 */
.tc-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--text) 30%, transparent);
}

/* ─────────────────────── 顶栏开关与皮肤胶囊（与 t-switch 同族，尺寸更小）── */
.tc-top .t-switch {
  padding: 4px 8px;
  font-size: 11px;
}

.tc-iconbtn {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.tc-iconbtn:hover {
  border-color: var(--accent-line, var(--accent));
  color: var(--text);
}

@media print {
  .tc-top,
  .tc-bottom,
  .tc-sheet {
    display: none;
  }
}