/* ============================================================
 * 创归思伴学 · 共享外壳骨架（shared split-shell）
 * ------------------------------------------------------------
 * 职责（P0 抽取一次，全站可挂）：
 *   1. 三档形态 morph 的 grid 容器：
 *        A 诊断/复盘 = 小伴窄栏常驻 + 大画布 (clamp(320px,30%,400px) 1fr)
 *        B 阅读/报告 = 画布优先·对话折叠侧栏 (56px 窄 rail，点击展开变两列)
 *        C 沉浸/作答 = 全屏画布·对话浮窗      (companion 收进 dock)
 *   2. 左栏 companion（.who/.role/.chips/.body/.foot）与右栏 canvas
 *      （业务原生结构由页面自己填，本文件不写业务 DOM）
 *   3. C 档浮窗对话坞容器 .dock（复用 #xbTalkDock 的样式挂载点）
 *   4. 三档切换按钮样式
 *
 * 红线 / 约定：
 *   - 只给通用骨架 token（间距阶梯 / 字号阶梯 / 圆角 / 阴影 / 中性面线），
 *     **不写学科配色**（学科 tone 由各页各写各的，防雷同）；
 *     公仔头像与品牌主操作按钮可用品牌紫→青渐变（IP 标识，非学科色）。
 *   - 离线优先：仅系统字体栈 + CSS transform/opacity 动效，
 *     不引任何 CDN / 外链 / 动效库 / iconfont。
 *   - 本文件由页面自行 <link> 引入，不污染 page.css / desktop.css 共享通路。
 *   - 引擎 B 红线（M01–M09 只大类、不出子码/置信度/严重度、拒识证据驱动）
 *     由业务层守，本文件不含任何业务逻辑。
 * ============================================================ */

/* ---------- 1. 通用骨架 token ---------- */
:root{
  /* 间距阶梯 */
  --shell-space-1: 4px;
  --shell-space-2: 8px;
  --shell-space-3: 12px;
  --shell-space-4: 16px;
  --shell-space-5: 24px;
  --shell-space-6: 32px;

  /* 字号阶梯 */
  --shell-fs-1: 13px;
  --shell-fs-2: 14px;
  --shell-fs-3: 16px;
  --shell-fs-4: 20px;
  --shell-fs-5: 26px;

  /* 圆角 */
  --shell-radius-sm: 10px;
  --shell-radius: 14px;
  --shell-radius-lg: 18px;

  /* 阴影（柔和中性的容器阴影，无品牌色倾向） */
  --shell-shadow-1: 0 6px 22px rgba(44,44,42,.07);
  --shell-shadow-2: 0 18px 50px -22px rgba(60,50,160,.45);

  /* 中性面 / 线 / 字（业务层可整体覆写） */
  --shell-bg: #FFF6F0;
  --shell-surface: #FFFFFF;
  --shell-surface-2: #FBF7F3;
  --shell-ink: #2C2C2A;
  --shell-ink-2: #5F5E5A;
  --shell-ink-3: #8A8780;
  --shell-line: #ECE5DD;
  --shell-line-2: #E3DAD0;

  /* 品牌渐变（仅公仔头像 / 主操作按钮使用，IP 标识） */
  --shell-brand: linear-gradient(135deg, #6D5EFC 0%, #28C2C8 100%);
  --shell-brand-soft: linear-gradient(135deg, #6D5EFC22 0%, #28C2C822 100%);

  /* 形态列宽令牌：三档默认形态由 data-morph 驱动 */
  --shell-rail: 56px;                 /* B 档折叠态窄 rail */
  --shell-col-A: var(--shell-side) 1fr;    /* A 诊断/复盘 = 小伴窄栏常驻 + 大画布 */
  --shell-col-B: var(--shell-rail) 1fr; /* B 折叠：窄 rail + 画布 */
  --shell-col-B-open: var(--shell-side) 1fr; /* B 展开：小伴窄栏 + 大画布 */
  --shell-col-C: 0 1fr;               /* C 全屏画布，companion 收进 dock */
  --shell-side: clamp(320px, 30%, 400px); /* 小伴常驻窄栏宽度（A 档 / B 展开共用）：小伴小、画布大 */
}

/* ---------- 2. 壳：grid 容器，data-morph 驱动列数 ---------- */
.shell{
  display: grid;
  grid-template-columns: var(--shell-col-A);
  grid-template-rows: 1fr;
  height: 100%;
  min-height: 0;
  background: var(--shell-bg);
  color: var(--shell-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: var(--shell-fs-2);
  line-height: 1.6;
  overflow: hidden;
  transition: grid-template-columns .28s ease;
}
.shell[data-morph="B"]{ grid-template-columns: var(--shell-col-B); }
.shell[data-morph="B"].is-rail-open{ grid-template-columns: var(--shell-col-B-open); }
.shell[data-morph="C"]{ grid-template-columns: var(--shell-col-C); }

/* C 档：companion 列宽为 0，去掉右边框避免左侧残留 1px 线 */
.shell[data-morph="C"] .companion{ border-right: 0; }

/* ---------- 3. 左栏 companion ---------- */
.companion{
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--shell-surface);
  border-right: 1px solid var(--shell-line);
  overflow: hidden;
}
.companion .head{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--shell-space-4);
  border-bottom: 1px solid var(--shell-line);
}
.companion .avatar{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--shell-brand);
  color: #fff;
}
.companion .avatar svg{ width: 22px; height: 22px; display: block; }
.companion .who{ font-weight: 600; font-size: var(--shell-fs-2); }
.companion .role{ font-size: 11px; color: var(--shell-ink-3); }

.companion .body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--shell-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--shell-space-3);
}

.companion .chips{
  display: flex;
  flex-wrap: wrap;
  gap: var(--shell-space-2);
  padding: 0 var(--shell-space-4) var(--shell-space-3);
}
.companion .chip{
  border: 1px solid var(--shell-line-2);
  background: var(--shell-surface);
  color: var(--shell-ink);
  font-size: var(--shell-fs-1);
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
}
.companion .chip:hover{ background: var(--shell-surface-2); border-color: var(--shell-line); }
.companion .chip:focus-visible{ outline: 2px solid #6D5EFC; outline-offset: 2px; }

.companion .foot{
  padding: var(--shell-space-3) var(--shell-space-4);
  border-top: 1px solid var(--shell-line);
  display: flex;
  gap: var(--shell-space-2);
}
.companion .foot input{
  flex: 1;
  min-width: 0;
  border: 1px solid var(--shell-line-2);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: var(--shell-fs-1);
  font-family: inherit;
  outline: none;
  background: var(--shell-surface);
  color: var(--shell-ink);
}
.companion .foot input:focus{ border-color: #6D5EFC; }
.companion .foot button{
  border: 0;
  background: var(--shell-brand);
  color: #fff;
  border-radius: 10px;
  padding: 0 16px;
  cursor: pointer;
  font-size: var(--shell-fs-1);
  font-family: inherit;
  white-space: nowrap;
}

/* B 档折叠态：只留窄 rail（公仔 + 展开提示），隐藏完整对话面 */
.companion .railicon{ display: none; }
.companion .railtip{ display: none; }

.shell[data-morph="B"] .companion .who,
.shell[data-morph="B"] .companion .role,
.shell[data-morph="B"] .companion .chips,
.shell[data-morph="B"] .companion .body,
.shell[data-morph="B"] .companion .foot{ display: none; }

.shell[data-morph="B"] .companion .railicon{
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  cursor: pointer;
}
.shell[data-morph="B"] .companion .railtip{
  display: block;
  text-align: center;
  font-size: 11px;
  color: var(--shell-ink-3);
  padding-bottom: var(--shell-space-3);
  cursor: pointer;
}

/* B 档展开态：恢复完整对话面，隐藏 rail 提示 */
.shell[data-morph="B"].is-rail-open .companion .who{ display: block; }
.shell[data-morph="B"].is-rail-open .companion .role{ display: block; }
.shell[data-morph="B"].is-rail-open .companion .chips{ display: flex; }
.shell[data-morph="B"].is-rail-open .companion .body{ display: flex; }
.shell[data-morph="B"].is-rail-open .companion .foot{ display: flex; }
.shell[data-morph="B"].is-rail-open .companion .railicon,
.shell[data-morph="B"].is-rail-open .companion .railtip{ display: none; }

/* ---------- 4. 右栏 canvas（业务原生结构容器，页面自填） ---------- */
.canvas{
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: var(--shell-space-5) var(--shell-space-6) var(--shell-space-6);
}
/* 业务画布内部被联动协议高亮的导航目标 */
.canvas [data-nav-target].nav-active{
  outline: 2px solid #6D5EFC;
  outline-offset: 3px;
  border-radius: var(--shell-radius-sm);
}

/* ---------- 5. C 档浮窗对话坞容器（复用 #xbTalkDock 的挂载点） ---------- */
/* .dock 作为 .shell 的子节点、position:fixed 脱离 grid 流，不占列宽；
   真实页面由 #xbTalkDock（app.html / mascot-v5-talk.css 已样式化）承载，
   此处 .dock 仅作无头验证 / 降级时的浮窗骨架。 */
.dock{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 300px;
  max-width: calc(100vw - 36px);
  max-height: 60vh;
  background: var(--shell-surface);
  border: 1px solid var(--shell-line-2);
  border-radius: var(--shell-radius-lg);
  box-shadow: var(--shell-shadow-2);
  overflow: hidden;
  display: none;
  flex-direction: column;
  z-index: 25;
}
.shell[data-dock-open="true"] .dock{ display: flex; }
.dock .head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--shell-line);
  background: var(--shell-brand);
  color: #fff;
}
.dock .head .who{ font-weight: 600; font-size: var(--shell-fs-2); }
.dock .head .role{ font-size: 11px; opacity: .9; }
.dock .head .dock-x{
  border: 0; background: transparent; color: #fff;
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.dock .body{
  padding: 12px 14px;
  font-size: var(--shell-fs-1);
  color: var(--shell-ink-2);
  overflow-y: auto;
}

/* ---------- 6. 三档切换按钮 ---------- */
.shell-morph{
  display: inline-flex;
  gap: 4px;
  background: var(--shell-surface-2);
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--shell-line);
}
.shell-morph button{
  border: 0;
  background: transparent;
  color: var(--shell-ink-2);
  font-size: var(--shell-fs-1);
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.shell-morph button.on{
  background: var(--shell-surface);
  color: var(--shell-ink);
  font-weight: 600;
  box-shadow: var(--shell-shadow-1);
}

/* ---------- 7. 流式三态指示（供 stream_state.js 复用） ---------- */
.ss-typing{ display: inline-flex; gap: 4px; align-items: center; }
.ss-typing i{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--shell-ink-3);
  animation: ss-blink 1.1s infinite;
}
.ss-typing i:nth-child(2){ animation-delay: .18s; }
.ss-typing i:nth-child(3){ animation-delay: .36s; }
@keyframes ss-blink{ 0%,60%,100%{ opacity:.3 } 30%{ opacity:1 } }

/* 拒识态：证据驱动的中性提示样式（不渲染子码/置信/严重度） */
.ss-refuse{
  border: 1px solid #F7C1C1;
  background: #FCEBEB;
  color: #A32D2D;
  border-radius: var(--shell-radius-sm);
  padding: 10px 12px;
  font-size: var(--shell-fs-1);
}
.ss-refuse b{ color: #A32D2D; }

/* ---------- 8. 无障碍 / 动效偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  .shell{ transition: none; }
  .ss-typing i{ animation: none; opacity: .4; }
}

/* ===== [2026-09-30 深色收尾] shell 壳深色适配（变量重定义，对所有引用方生效） ===== */
html[data-theme="dark"]{
  --shell-bg:#151229;
  --shell-surface:#2D2748;
  --shell-surface-2:#332E47;
  --shell-ink:rgba(255,255,255,.92);
  --shell-ink-2:#B8AEE0;
  --shell-ink-3:#8f88b8;
  --shell-line:#3A3164;
  --shell-line-2:#443B6E;
  --shell-shadow-1:0 6px 22px rgba(0,0,0,.35);
}
html[data-theme="dark"] .shell{background:var(--shell-bg)}