/* ============================================================
   app.html · 统一工作台（2026-10-09 改 4 顶导）
     · 顶部 4 导航：首页(外链) / 派个活 / 工位 / 员工设置
     · 三视图由 .stage[data-view="dispatch|station|settings"] 控制
     · 预览面板是 dispatch 视图内的叠加态 .stage[data-state="preview"]
     · 风格栏是叠加开关 .stage[data-style="open|closed"]（仅 dispatch 视图有效）
   视觉沿用 site.css / dashboard.css 的 token 与组件类（card/feed/kpi/kpis 等）。
   ============================================================ */

body.unified-app { overflow: hidden; }
.unified-app .topbar { display: flex; align-items: center; gap: 18px; padding: 0 20px; }
.unified-app .brand img { height: 40px; }

/* ---------- 顶部 4 导航 ---------- */
.mainnav { display: flex; align-items: center; gap: 4px; }
.mainnav a { font-size: 13.5px; font-weight: 600; color: var(--ink-3); padding: 8px 14px; border-radius: 9px; white-space: nowrap; }
.mainnav a:hover { background: var(--teal-mist); color: var(--ink-2); }
.mainnav a.on { background: var(--teal); color: #fff; }

.stage { position: relative; height: calc(100vh - 73px); overflow: hidden; }

/* ---------- 聊天列（派个活）：默认居中；预览态靠左；非 dispatch 视图隐藏 ---------- */
.chatcol {
  position: absolute; top: 14px; bottom: 14px; left: 50%; transform: translateX(-50%);
  width: min(760px, calc(100% - 32px));
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden;
  transition: left .26s ease, transform .26s ease, width .26s ease;
}
.stage[data-view="dispatch"][data-state="preview"] .chatcol { left: 14px; transform: none; width: 382px; }
.stage:not([data-view="dispatch"]) .chatcol { display: none; }
.chatcol-hd { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.chatcol-hd .cc-title { font-size: 14.5px; font-weight: 700; }
.chatcol-hd .cc-sub { font-size: 12px; color: var(--ink-3); }
.stage[data-view="dispatch"][data-state="preview"] .chatcol-hd .cc-sub { display: none; }

/* 复用 site.css 的 .chat-log / .msg，但改成撑满整列 */
.unified-app .chat-log { height: auto; flex: 1 1 auto; min-height: 0; border-radius: 0; }

/* 输入框上方入口 */
.chat-tools { display: flex; gap: 8px; padding: 10px 14px 0; flex-wrap: wrap; flex: 0 0 auto; }
.ct-btn { font-size: 12.5px; font-weight: 600; color: var(--teal-dark); background: var(--teal-light); border-radius: 10px; padding: 7px 11px; white-space: nowrap; }
.ct-btn:hover { background: #D8EFEB; }
.ct-btn[aria-pressed="true"] { background: var(--teal); color: #fff; }

/* 聊天列里的零碎条：不许被压缩 */
.unified-app .rate-hint,
.unified-app .attach-strip,
.unified-app .kind-tiles,
.unified-app .sel-hint,
.unified-app .gcomposer { flex: 0 0 auto; }
.unified-app .chatcol .gcomposer { margin-bottom: 14px; }

/* ---------- 风格设置侧栏（叠加开关，仅 dispatch 视图） ---------- */
.stylepanel {
  position: absolute; top: 14px; bottom: 14px; right: 14px; width: 380px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(calc(100% + 24px)); transition: transform .26s ease;
}
.stage[data-view="dispatch"][data-style="open"] .stylepanel { transform: none; z-index: 6; }
/* 2026-10-10 P2 修正：面板位置分两态——
   预览态：面板叠在工作区左缘（原设计，chat 已缩到左栏）；
   默认态（聊天居中）：面板贴屏幕最右，聊天列左移让位——不能盖在对话框左边 */
.stage[data-view="dispatch"][data-state="preview"][data-style="open"] .stylepanel { left: 410px; right: auto; width: 340px; }
/* 2026-10-10 批A⑤：风格栏打开、无预览时——聊天框在「左侧留白区」居中（不盖在对话框左边，也不被风格栏压住） */
.stage[data-view="dispatch"][data-style="open"]:not([data-state="preview"]) .chatcol { left: 14px; right: 408px; transform: none; width: min(680px, calc(100% - 440px)); margin: 0 auto; }
.stage:not([data-view="dispatch"]) .stylepanel { display: none; }
.sp-hd { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14.5px; font-weight: 700; flex: 0 0 auto; }
.sp-hd .tag { font-size: 11.5px; color: var(--teal); background: var(--teal-light); border-radius: 6px; padding: 3px 8px; font-weight: 600; }
.sp-hd .sp { flex: 1; }
.sp-bd { padding: 14px 16px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.icon-btn { font-size: 12px; color: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; background: #fff; }
.icon-btn:hover { border-color: var(--teal); color: var(--teal-dark); }

/* ---------- 右侧工作区（预览 / 工位 / 员工设置） ---------- */
.workpanel {
  position: absolute; top: 14px; bottom: 14px; left: 410px; right: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, left .26s ease;
}
.stage[data-view="dispatch"][data-state="preview"] .workpanel,
.stage[data-view="station"] .workpanel,
.stage[data-view="settings"] .workpanel { opacity: 1; pointer-events: auto; }
.stage[data-view="station"] .workpanel,
.stage[data-view="settings"] .workpanel { left: 14px; }
/* ★ 修（Boss 2026-10-11 截图实锤）：此前漏了 dispatch 守卫——风格栏开着时切到工位/员工设置，
   workpanel 被推到 left:766px，整页半空。风格栏本来就"仅 dispatch 视图有效"（见文件头注释）。 */
.stage[data-view="dispatch"][data-style="open"] .workpanel { left: 766px; }

.wp-pane { display: none; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.stage[data-view="dispatch"][data-state="preview"] #previewPanel { display: flex; }
.stage[data-view="station"] #stationPanel { display: flex; }
.stage[data-view="settings"] #settingsPanel { display: flex; }
.stage[data-view="dispatch"] #stationPanel,
.stage[data-view="dispatch"] #settingsPanel { display: none; }
.stage[data-view="station"] #previewPanel,
.stage[data-view="settings"] #previewPanel { display: none; }

/* 预览 */
.wp-pv-hd { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); flex: 0 0 auto; flex-wrap: wrap; }
.wp-pv-hd .tag { font-size: 11.5px; color: var(--teal); background: var(--teal-light); border-radius: 6px; padding: 3px 8px; font-weight: 600; }
#previewPanel .result-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 18px 20px 36px; }

/* ---------- 工位：4 区 ---------- */
.wp-station { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 18px 44px; }
.station-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.station-left, .station-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.card .more { margin-top: 10px; font-size: 12.5px; }
.card .more a { color: var(--teal-dark); font-weight: 600; cursor: pointer; }
.kpis-wrap { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }

/* ---------- 员工设置：档案 + 设置 两 tab ---------- */
/* 2026-10-10 批A⑧：tab 上方好处引导语 */
.set-guide { margin: 0 0 14px; padding: 12px 16px; background: linear-gradient(135deg, var(--teal-light), #EAF7F4); border: 1px solid rgba(22,159,145,.25); border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--teal-dark); line-height: 1.55; }
.set-card-acts { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.wp-set-tabs { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.wp-set-tabs button { font-size: 13px; font-weight: 600; color: var(--ink-3); background: var(--teal-light); border: 0; border-radius: 9px; padding: 8px 16px; cursor: pointer; }
.wp-set-tabs button.on { background: var(--teal); color: #fff; }
.wp-set-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 18px 44px; }
.station-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.set-pane { min-width: 0; }

/* 移动端专用返回按钮 */
.wp-back { display: none; }

/* ---------- 移动端（≤860px） ---------- */
@media (max-width: 860px) {
  body.unified-app { overflow-x: hidden; overflow-y: auto; }
  /* ★ 2026-10-12 Boss：顶栏改两行排——上行 logo+登录/账号、下行导航铺满整行。
     根因：登录后 4 导航+用户名区最小内容宽 ~566 撑破 390，此前的横滚方案把右侧
     登录/账号区裁掉，用户要右滑才看得见。两行后一屏全见。 */
  .unified-app .topbar { gap: 4px 10px; padding: 8px 12px 0; flex-wrap: wrap; height: auto; line-height: normal; }
  .unified-app .brand { flex: 0 0 auto; line-height: normal; }
  .unified-app .brand img { height: 34px; }
  .unified-app .topbar-right { order: 2; margin-left: auto; flex: 0 0 auto; max-width: 60vw; overflow: hidden; white-space: nowrap; }
  .unified-app .mainnav { order: 3; flex: 1 1 100%; width: 100%; justify-content: space-between; padding: 2px 0 8px; line-height: normal; }
  .unified-app .mainnav a { padding: 7px 10px; }
  .stage { height: auto; min-height: calc(100vh - 73px); overflow: visible; }
  .chatcol { position: static; transform: none; width: auto; margin: 12px 12px 0; height: calc(100vh - 100px); border-radius: 14px; }
  .stage:not([data-view="dispatch"]) .chatcol { display: none; }
  .workpanel { position: static; opacity: 1; pointer-events: auto; margin: 12px; height: auto; min-height: calc(100vh - 100px); left: auto !important; }
  .stage[data-view="dispatch"] .workpanel { display: none; }
  .stage[data-view="dispatch"][data-state="preview"] .workpanel { display: flex; }
  .wp-station, .wp-set-body { overflow: visible; padding: 14px 14px 60px; }
  .station-grid { grid-template-columns: 1fr; }
  .wp-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--teal-dark); background: var(--teal-light); border-radius: 9px; padding: 7px 12px; margin: 10px 12px 0; flex: 0 0 auto; }
  .stylepanel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 84vh; border-radius: 18px 18px 0 0; z-index: 95; transform: translateY(100%); box-shadow: 0 -12px 40px rgba(18, 60, 56, .18); }
  .stage[data-style="open"] .stylepanel { transform: none; }
  .stage[data-view="dispatch"][data-style="open"] .stylepanel { left: 0; right: 0; width: auto; }
  .stylepanel::before { content: ""; position: fixed; inset: 0; background: rgba(18, 60, 56, .32); z-index: -1; }
  .sp-bd { padding-bottom: 28px; }
}

/* ---------- 已选命令芯片（命令协议 v0.1，2026-10-05） ---------- */
.cmd-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 12px 4px; }
.cmd-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; line-height: 1; white-space: nowrap; padding: 4px 5px 4px 9px; border-radius: 999px; background: var(--teal-light); color: var(--teal-dark); border: 1px solid rgba(22, 159, 145, .28); }
.cmd-chip .cc-x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 3px; opacity: .55; }
.cmd-chip .cc-x:hover { opacity: 1; }
@media (max-width: 860px) {
  .cmd-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .cmd-chips::-webkit-scrollbar { display: none; }
}

/* ==== b5mobile-tap 2026-10-15 批次5 移动端点按区增强 ====
   390 宽下高度 <30px 的可点元素提到 ≥32px；仅 ≤860px 生效，PC 零改动 */
@media (max-width: 860px) {
  .topbar-link, .lnk, .tab, .btn-sm, .card-acts .btn, .set-card-acts .btn, a.more, .more-link {
    min-height: 32px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
}