/* ==================================================================
   手机版工作台（#/mini）专用样式 · public/css/mini.css
   ------------------------------------------------------------------
   这一页**自带完整移动布局**：现有外壳在 ≤900px 时把侧栏移出屏幕、开合按钮也隐藏
   （`app.css` 的 `@media (max-width:900px)`），所以本页不依赖侧栏/顶栏：
   自己一个顶栏 + 固定底部四页签 tabbar。
   规则：
     · 只用 `mini-` 前缀的选择器，**不覆盖 app.css 的任何类**（不改那份文件）；
     · 全部走 :root 令牌（颜色 / 字号 / 间距 / 圆角），不写死色值；
     · 竖屏 375~430px 必须能用：KPI 两列、表格块内自己横向滚动、**整页绝不横向滚动**；
     · 桌面端（≥901px）把它当"手机那一列"居中显示，同时给固定 tabbar 让开侧栏宽度。
   ================================================================== */

/* ---------------- 页面骨架 ---------------- */
.mini-page {
  min-width: 0;
  overflow-x: hidden;             /* 整页不横向滚动（长内容在块内自己滚） */
  padding-bottom: 84px;           /* 给固定 tabbar 留位（tabbar 是 fixed，不会推内容） */
}

/* ---------------- 顶栏 ---------------- */
.mini-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin: calc(-1 * var(--sp-7)) calc(-1 * var(--sp-8)) var(--sp-4);  /* 抵消 #view 的内边距，铺满整宽 */
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(6px);
}
.mini-topbar-main { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; flex: 1; }
.mini-topbar-main svg { color: var(--primary); flex: none; }
.mini-topbar-actions { flex: none; display: flex; align-items: center; gap: var(--sp-2); }
.mini-hotel-sel {
  max-width: 190px; height: 32px; padding: 0 8px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-xs);
  background: var(--card); color: var(--text); font-size: var(--fs-sm);
}
.mini-hotel-name-static {
  font-size: var(--fs-md); font-weight: 650; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mini-domain {
  flex: none; font-size: var(--fs-2xs); padding: 2px 8px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: var(--bg-soft); color: var(--text-sub);
}
.mini-domain.hotel { background: var(--success-soft); border-color: #B8E3D6; color: var(--success-ink); }
.mini-domain.ops { background: var(--info-soft); border-color: var(--brand-200); color: var(--info-ink); }

/* ---------------- 底部 tabbar（固定四页签） ---------------- */
.mini-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: stretch;
  background: var(--card);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(16, 34, 61, .06);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mini-tab {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 8px 4px; border: none; background: transparent; cursor: pointer;
  color: var(--text-mute); font-size: var(--fs-2xs); font-family: var(--font);
}
.mini-tab span { line-height: 1.2; }
.mini-tab.active { color: var(--primary); font-weight: 650; }
.mini-tab.active svg { transform: translateY(-1px); }

/* ---------------- 内容块 ---------------- */
.mini-content { min-width: 0; }
.mini-tabpane { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

.mini-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-4); box-shadow: var(--shadow-sm); min-width: 0;
}
.mini-card-tight { padding: 0; overflow: hidden; }
.mini-block-head {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  font-size: var(--fs-sm); font-weight: 650; margin-bottom: var(--sp-3);
}

/* KPI：两列（竖屏），缺失一律「—」并淡一档 */
.mini-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.mini-kpi {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px;
  background: var(--bg-soft); min-width: 0;
}
.mini-kpi.missing { border-style: dashed; background: #fff; }
.mini-kpi-label { font-size: var(--fs-xs); color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-kpi-value { font-size: 22px; font-weight: 700; letter-spacing: -.4px; margin-top: 2px; overflow-wrap: anywhere; }
.mini-kpi.missing .mini-kpi-value { color: var(--text-mute); font-weight: 600; }
.mini-kpi-value small { font-size: var(--fs-xs); font-weight: 500; color: var(--text-mute); margin-left: 3px; }
.mini-kpi-hint { font-size: var(--fs-2xs); color: var(--text-mute); margin-top: 2px; }

/* 环比 / 同比 */
.mini-delta-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.mini-delta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  border: 1px dashed var(--border); border-radius: var(--radius-xs); padding: 6px 9px; background: #fff;
}
.mini-delta-label { font-size: var(--fs-2xs); color: var(--text-mute); }
.mini-delta-val { font-size: var(--fs-sm); font-weight: 650; }
.mini-delta-val.up { color: var(--success-ink); }
.mini-delta-val.down { color: var(--danger-ink); }
.mini-delta-val.mute { color: var(--text-mute); }

/* 数据状态 / 缺口 */
.mini-datastate {
  border: 1px dashed var(--border-strong); border-radius: var(--radius-xs);
  padding: var(--sp-3) 10px; background: var(--bg-soft); font-size: var(--fs-xs); color: var(--text-sub);
  margin-bottom: var(--sp-3);
}
.mini-datastate-note { margin-top: 4px; color: var(--warning-ink); }
.mini-miss-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mini-miss {
  font-size: var(--fs-xs); padding: 1px 8px; border-radius: var(--radius-pill);
  background: var(--warning-soft); color: var(--warning-ink); border: 1px solid #F3D9A6;
}

/* 渠道结构 */
.mini-chan { display: flex; flex-direction: column; }
.mini-chan-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 6px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm);
}
.mini-chan-name { color: var(--text-sub); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-chan-val { font-variant-numeric: tabular-nums; color: var(--text); }

/* 诊断 */
.mini-diag-counts { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.mini-diag-c { font-size: var(--fs-xs); padding: 2px 9px; border-radius: var(--radius-pill); background: var(--bg-soft); border: 1px solid var(--border); }
.mini-diag-c.high { background: var(--danger-soft); color: var(--danger-ink); border-color: #F0C4B8; }
.mini-diag-c.mid { background: var(--warning-soft); color: var(--warning-ink); border-color: #F3D9A6; }
.mini-diag-summary { margin: var(--sp-2) 0; color: var(--text-sub); }
.mini-diag-item {
  border-left: 3px solid var(--border-strong); border-radius: var(--radius-xs);
  padding: var(--sp-2) 10px; margin-top: var(--sp-2); background: var(--bg-soft);
}
.mini-diag-item.lv-high { border-left-color: var(--danger); }
.mini-diag-item.lv-mid { border-left-color: var(--warning); }
.mini-diag-item.lv-low { border-left-color: var(--info); }
.mini-diag-title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; }
.mini-suggest { color: var(--info-ink); margin-top: 2px; }
.mini-more { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-sub); }
.mini-more > summary { cursor: pointer; color: var(--primary); }

/* 报表 */
.mini-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.mini-chip {
  border: 1px solid var(--border-strong); background: #fff; color: var(--text-sub);
  border-radius: var(--radius-pill); padding: 3px 12px; font-size: var(--fs-xs); cursor: pointer;
  font-family: var(--font);
}
.mini-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.mini-report-meta { margin-bottom: var(--sp-2); }
.mini-section { margin-top: var(--sp-4); }
.mini-section-title { font-size: var(--fs-sm); font-weight: 650; margin-bottom: var(--sp-2); }
.mini-text { color: var(--text-sub); overflow-wrap: anywhere; }
.mini-report-summary {
  margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px dashed var(--border); color: var(--text-sub);
}
/* 表格：块内滚动，绝不撑破页面 */
.mini-page .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.mini-page .table th, .mini-page .table td { padding: 8px 10px; font-size: var(--fs-xs); white-space: nowrap; }

/* ---------------- 工作流节点 ---------------- */
.mini-node {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--border);
}
.mini-node:last-child { border-bottom: none; }
.mini-node-main { flex: 1; min-width: 0; }
.mini-node-title { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-sm); font-weight: 600; }
.mini-node-code { font-size: var(--fs-2xs); color: var(--text-mute); font-family: var(--font-mono); }
.mini-node-due { font-size: var(--fs-2xs); color: var(--text-mute); }
.mini-node-meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: 4px; }
.mini-node.late { border-left: 3px solid var(--danger); padding-left: 10px; background: var(--danger-soft); border-radius: var(--radius-xs); }
.mini-node.done .mini-node-title { color: var(--text-mute); }
.mini-need-evi { color: var(--warning-ink); }
.mini-block-err { margin: var(--sp-3) 0; }

/* ---------------- 我的 ---------------- */
.mini-me-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.mini-me-name { font-size: var(--fs-xl); font-weight: 700; }
.mini-me-actions { display: flex; flex-direction: column; gap: var(--sp-3); }
.mini-hotel-list { display: flex; flex-direction: column; }
.mini-hotel-row {
  display: flex; align-items: center; gap: var(--sp-3); padding: 9px 0;
  border-bottom: 1px solid var(--border); font-size: var(--fs-sm); cursor: pointer;
}
.mini-hotel-row.active { font-weight: 650; color: var(--primary); }
.mini-hotel-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-perm-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.mini-perm {
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 1px 7px; background: var(--bg-soft);
}

/* ---------------- 智能体页签：大号语音按钮 ---------------- */
.mini-chat { height: auto; }
.mini-chat-body { gap: var(--sp-3); padding: var(--sp-4); }
.mini-chat .chat-bubble { max-width: 92%; }
.mini-voice-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  width: 100%; padding: 16px; border-radius: var(--radius);
  border: 1px solid var(--primary); background: var(--primary); color: #fff;
  font-size: var(--fs-lg); font-weight: 700; font-family: var(--font); cursor: pointer;
  box-shadow: var(--shadow);
}
.mini-voice-btn:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
.mini-voice-btn:disabled { background: var(--bg-soft); color: var(--text-mute); border-color: var(--border-strong); box-shadow: none; cursor: not-allowed; }
.mini-voice-note { line-height: 1.6; margin-top: calc(-1 * var(--sp-2)); }

/* ---------------- 窄屏细化（375~430px 竖屏） ---------------- */
@media (max-width: 900px) {
  .mini-topbar { margin: 0 0 var(--sp-3); padding: var(--sp-3) 0; }
  .mini-hotel-sel { max-width: 132px; }
  .mini-kpi-value { font-size: 20px; }
}
@media (max-width: 360px) {
  .mini-kpi-grid { grid-template-columns: minmax(0, 1fr); }
  .mini-delta-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- 宽屏：当"手机那一列"居中，tabbar 让开侧栏 ---------------- */
@media (min-width: 901px) {
  .mini-page { max-width: 620px; margin: 0 auto; }
  .mini-topbar { margin: 0 0 var(--sp-4); border-radius: var(--radius); border: 1px solid var(--border); }
  .mini-tabbar {
    left: var(--sidebar-w); max-width: 620px; margin: 0 auto;
    border-radius: var(--radius) var(--radius) 0 0; border: 1px solid var(--border); border-bottom: none;
  }
}