/* ============================================================================
 * 会谈工作区（session-workspace.html）· 页面专用样式
 *
 * 本文件**只放本页独有的东西**。下面这些都已由既有文件提供，不要在这里重复定义：
 *   · 卡片 / 栅格 / 按钮 / 表单 / note / empty 骨架
 *     （.card / .grid--split / .stack / .btn / .field / .note / .empty）→ app.css
 *   · 会谈类辅助（.ws-title / .ws-meta / .s-points / .s-risk / .s-save
 *     / .s-tag / .s-hide / .s-meta / .s-sr / .s-conn / .s-drop / .s-prog）→ session.css
 *   · 徽标（.badge --pending / --confirmed / --cancelled / --risk-high|mid|low）→ app.css
 * 本页已引入 tokens.css / app.css / session.css / interactions.css，
 * 再加本文件 —— 少引一个就会"样式莫名丢失"。
 * ========================================================================== */

/* ------------------------------------------------------------------ 三态条
   加载中 / 出错 / 找不到这一场。**出错必须与"没有"分开** ——
   一次网络故障不能被渲染成"这场会谈不存在"（那是把故障说成用户工作里的一个事实，
   与「读不到 ≠ 没有」是同一条纪律）。

   样式与 session-records 页的 .sr-state 同源；那份定义在 session-records.css 里，
   而那是那一页的专用文件，所以这里另立一份而不是跨页引用
   （跨页引用会在"哪天删掉那一页"时静默失效）。 */
.ws-state {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink-700);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.ws-state[hidden] { display: none; }
.ws-state__icon { flex: 0 0 auto; display: inline-flex; }

/* 出错 = 红；"找不到这一场" = 暖色，两者刻意不同色。
   把后者画成红色会让咨询师以为系统坏了，跑去重试一件重试不出结果的事。 */
.ws-state--error {
  background: var(--risk-bg);
  color: var(--risk);
  border-color: transparent;
}
.ws-state--missing {
  background: var(--warn-bg);
  color: var(--warn-ink);
  border-color: transparent;
}

/* .btn 是 inline-flex → [hidden] 会被 display 盖掉，属性设了照样显示。
   同族已经踩过三次（.badge / .clients-state / .btn），每加一个组件都要查。 */
.ws-state .btn[hidden] { display: none; }

/* 出错时只留一个"重试"，不希望两个按钮同时跳出来把注意力分掉 */
.ws-state__ops { margin-left: auto; display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ------------------------------------------------------- 本机草稿的说明与状态
   ★ 这一块是整页"撤掉假话"的落点。原型的 [data-autosave] 会在输入时打出
   「已自动保存 · 09-22 00:45」，而全文件 localStorage 零出现 ——
   咨询师写完一整次会谈的速记，看到"已自动保存"就放心关页面，刷新全丢。

   现在的口径：**状态文字必须对应一次真实发生过的写入**。
   草稿真的写进这台电脑的浏览器（localStorage），所以才能说"已存本机草稿"；
   并且必须同时讲清"它不会上传、换电脑就没了" ——
   让用户自己去备份的前提，是**先别拦着他知道真相**。 */
.ws-draft {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.ws-draft .s-save { margin: 0; }
.ws-draft__ops { margin-left: auto; display: flex; gap: var(--space-2); }

/* 说明条贴在输入框下方，用软色（不抢注意力，但一定看得见） */
.ws-draft__note { margin: var(--space-2) 0 0; }

/* 草稿状态的三档语义色。★ 用**点**而不是整块变色 —— 整块变色会被读成"出错" */
.ws-draft .s-save::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-300);
  flex: 0 0 auto;
}
.ws-draft[data-ws-draft-state="saved"] .s-save::before { background: var(--ok); }
.ws-draft[data-ws-draft-state="dirty"] .s-save::before { background: var(--warn); }
.ws-draft[data-ws-draft-state="off"] .s-save::before { background: var(--ink-300); }
/* 已落库到服务器：与"只存本机"用不同颜色，让"换台电脑还在不在"一眼可辨 */
.ws-draft[data-ws-draft-state="remote"] .s-save::before { background: var(--ok); }
/* ★ 服务端没存上 —— 这不是"已保存"，是降级。用 warn 色，不许长成 ok 的样子 */
.ws-draft[data-ws-draft-state="local"] .s-save::before { background: var(--warn); }

/* ------------------------------------------------------------ 未接通的分区
   卡片留着（让功能位置在版面上可见），内容换成一条说明。
   与 session-records / client-profile 同一种做法：这是**产品事实**，
   既不是空态（"你还没有…"）也不是出错（"系统坏了"）。 */
.ws-off { margin: 0; }
.ws-off:not(:first-child) { margin-top: var(--space-3); }
/* ★ `.note` 是 `display:flex` —— `[hidden]` 会被它盖掉，属性设了照样显示。
   这是本仓踩过三次的同一条坑（.badge / .clients-state / .btn），新建组件必查。 */
.ws-off[hidden] { display: none; }
.ws-state [hidden],
[data-ws-content][hidden] { display: none; }

/* 说明文字里的外链：督导服务已上线但落在 saas.anlan.space（2026-10-07），
   本页各 AI 区块需要一个明确出口，否则咨询师会读成"督导没做"。
   用主色 + 下划线-less 的行内链接，避免抢走 note 本身的说明语气。 */
/* 说明文字里的督导出口。按钮元素需要抹掉浏览器默认外观，
   否则会冒出一个灰底方框，跟周围说明文字的语气对不上。 */
.ws-cta {
  display: inline-block;
  margin-left: 0.35em;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--anlan-blue);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.ws-cta:hover { text-decoration: underline; }

/* 在 .kv（两列栅格）里插一条占满整行的说明 —— 只给 note 类会被塞进第二列 */
.ws-kv-full { grid-column: 1 / -1; }

/* ⑫「咨询中」那一栏是 ⑥ 的镜像（只读回显）：
   textarea 里的换行必须照原样显示，否则多行目标会被压成一行 */
.ws-goal { white-space: pre-line; }

/* ③ 上一场的小结：咨询师写的时候会换行，照原样显示（同 ⑫ 的 .ws-goal）。
   同一格里还会出现"没写 / 读不到"两种说明文字，用弱化色与真内容区分开 */
.ws-prev-summary { white-space: pre-line; }

/* -------------------------------------------------- ⑰ AI 督导报告（站内）
   生成器 + 查看器共用一套轻量布局。基调：不抢咨询三段的主流程，
   但「已落库报告」要像一页真实文档（有框、有留白、正文 pre-line 保换行）。

   ⚠️ 安全：`.note` / `.btn` 都是 `display:flex/inline-flex`，会把 `[hidden]` 盖掉。
   本组件里用 `hidden` 切换的元素（`[data-sup-report]` / `[data-sup-error]` /
   `[data-sup-last-off]`）**都不带**这些类，或已各自声明 `[hidden]{display:none}`，
   所以属性切换可靠（同 .ws-off[hidden] 那条纪律）。 */
.ws-sup__row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.ws-sup__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 160px;
  min-width: 150px;
}
.ws-sup__lbl {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ink-600);
}
.ws-sup__file {
  font-size: var(--text-sm);
  max-width: 100%;
}
.ws-sup__confirm {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-700);
  cursor: pointer;
}
.ws-sup__confirm input { margin-top: 2px; flex: 0 0 auto; }

/* 查看器：报告正文是一段原文（含换行），pre-line 保换行；
   推理过程与兜底扫描提示用弱一级颜色，让"报告本体"最显眼 */
.ws-sup__report {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.ws-sup__content {
  white-space: pre-line;
  font-size: var(--text-sm);
  line-height: 1.85;
  color: var(--ink-900);
}
.ws-sup__reasoning {
  white-space: pre-line;
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--ink-600);
}
.ws-sup__sub { font-weight: 600; color: var(--ink-700); }
.ws-sup__warn {
  white-space: pre-line;
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--warn-ink);
  background: var(--warn-bg);
  border-radius: var(--radius-sm);
}
.ws-sup__privacy { margin-top: var(--space-3); }
.ws-sup__ops { margin-top: var(--space-3); }

/* ② 最近心理测量结果（`10` §7 W2）。
   只详细渲染最近一次：量表名 + 完成日期 + 分项（复用 .kv），
   更早的降级成一行"另有 N 次"—— 这一屏是"进会谈前扫一眼"，不是量表历史页。 */
.ws-scale__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.ws-scale__head strong {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-900);
}
.ws-scale__head .s-meta { margin-left: auto; }
.ws-scale__more { margin: var(--space-3) 0 0; }

/* ------------------------------------------------------------------ 窄屏 */
@media (max-width: 900px) {
  .ws-state { font-size: var(--text-xs); }
  .ws-draft { align-items: flex-start; }
  .ws-draft__ops { margin-left: 0; }
  .ws-sup__row { align-items: stretch; }
}