/* ==================================================================
   pages/chat.css — AI 助教对话页（页面层：只写本页布局几何）
   ------------------------------------------------------------------
   依赖 static/base.css（公共层，唯一视觉来源）：
        · 卡片/错误态（card + g-error）· 空态家族（g-empty-icon/title/desc）
        · 按钮 4 型 2 档 · 状态反馈（toast）· 页脚（footer）· 焦点环（:focus-visible）
   纪律（对应《前端显示优化方案_20260925.md》§3/§9）：
     1. 无强制覆盖（important 关键字 0 处），不重复定义 base 既有组件；
     2. 无字面色值，颜色一律 var(--g-*)；
     3. 字号一律走 --g-fs-*（最小 12.5px）；
     4. 焦点样式全部交给 base.css，本文件不声明这类属性；
     5. 不改 HTML 既有 class 名与任何 id（页内 JS 依赖）。
   本页修：§4-3(P0) 输入区被裁、P1 窄屏会话无入口（抽屉）、4-25 删除按钮触控过小。
   ================================================================== */

/* ---------- 1. 页面骨架：一屏内 flex 列（修 4-3） ----------
   旧写法 body{height:100vh;overflow:hidden} + .app-wrap{height:calc(100vh - 52px)}
   把导航高度写死成 52px：≤860px 导航换行后实际 80px，底部输入区被裁 28px，
   且 body 不可滚 → 输入区完全不可达。
   现在改为「动态视口高度 + flex 撑满 + 聊天区自己滚」，全程不出现与导航高度
   耦合的 calc()：主体 flex:1 且 min-height:0 允许被压缩，输入区 flex:0 0 auto
   永不被压掉，页脚也在视口内。 */
body[data-page="chat"] {
  display: flex; flex-direction: column;
  min-height: 100vh;   /* 降级：不支持 dvh 的浏览器 */
  min-height: 100dvh;  /* 移动端地址栏收展时跟随真实可视高度 */
  height: 100vh;       /* 降级 */
  height: 100dvh;      /* 钉在一屏内：输入区与页脚恒在视口内可见可点 */
}
.app-wrap {
  flex: 1 1 auto;
  min-height: 0;      /* 4-3 关键：主体允许被压缩，聊天区自己滚，不吃输入区高度 */
  min-height: 12rem;  /* 兜底下限（覆盖上一行）：视口短到「导航+页脚+12rem」都放不下时，
                         宁可整页可滚，也不把输入区压出可视区；正常视口不生效 */
  width: 100%; max-width: var(--g-page); margin: 0 auto;
  display: flex; align-items: stretch;
}

/* ---------- 2. 侧边栏（桌面常驻；≤560px 变抽屉，见第 7 段） ---------- */
.sidebar {
  flex: 0 0 260px; width: 260px; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--g-surface);
  border-right: 1px solid var(--g-line);
}
.sidebar-header {
  flex: 0 0 auto; padding: var(--g-sp-3);
  border-bottom: 1px solid var(--g-line-2);
}
.btn-new-chat {
  width: 100%; min-height: 40px; padding: var(--g-sp-2);
  border: 1px dashed var(--g-line); border-radius: var(--g-r-sm);
  background: var(--g-surface); color: var(--g-primary);
  font-size: var(--g-fs-sm); font-weight: 600; cursor: pointer;
  transition: background var(--g-dur) var(--g-ease), border-color var(--g-dur) var(--g-ease);
}
.btn-new-chat:hover { background: var(--g-surface-2); border-color: var(--g-primary); }

.conv-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.conv-item {
  display: flex; align-items: center; gap: var(--g-sp-2);
  padding: 10px var(--g-sp-3); cursor: pointer;
  border-bottom: 1px solid var(--g-line-2);
  transition: background var(--g-dur) var(--g-ease);
}
.conv-item:hover { background: var(--g-surface-2); }
.conv-item.active { background: var(--g-primary-soft); }
.conv-title {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--g-fs-sm); color: var(--g-ink-2); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv-meta { flex: 0 0 auto; font-size: var(--g-fs-xs); color: var(--g-mute); white-space: nowrap; }
/* 删除按钮：指针端 hover / 键盘聚焦才出现；触摸端无 hover，改常显（4-25：触控 ≥32px） */
.btn-del-conv {
  display: none; flex: 0 0 auto;
  width: 32px; height: 32px; align-items: center; justify-content: center;
  border: none; border-radius: var(--g-r-sm); background: none;
  color: var(--g-mute); font-size: var(--g-fs-sm); line-height: 1; cursor: pointer;
  transition: background var(--g-dur) var(--g-ease), color var(--g-dur) var(--g-ease);
}
.conv-item:hover .btn-del-conv, .conv-item:focus-within .btn-del-conv { display: flex; }
.btn-del-conv:hover { background: var(--g-danger-bg); color: var(--g-danger); }
@media (hover: none) { .btn-del-conv { display: flex; } }

.sidebar-empty {
  padding: var(--g-sp-6) var(--g-sp-4);
  text-align: center; color: var(--g-mute); font-size: var(--g-fs-xs);
}

/* 抽屉遮罩：桌面不渲染（窄屏规则在第 7 段） */
.sidebar-mask { display: none; }

/* ---------- 3. 对话主区 ---------- */
.chat-main {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
}
/* 窄屏抽屉入口条：桌面不占位（窄屏规则在第 7 段） */
.chat-topbar { display: none; }

.chat-area {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--g-sp-4);
  padding: var(--g-sp-5);
  overscroll-behavior: contain;
}
/* 空态撑满可用高度并居中（.empty-state 出自 base 的 .g-empty 家族） */
.chat-area > .empty-state { flex: 1 1 auto; }

/* ---------- 4. 消息气泡 + Markdown 正文 ---------- */
.msg-row { display: flex; flex-direction: column; gap: 2px; max-width: 88%; }
.msg-row.user { align-self: flex-end; align-items: flex-end; }
.msg-row.assistant { align-self: flex-start; }

.msg-bubble {
  padding: var(--g-sp-3) var(--g-sp-4);
  border-radius: var(--g-r-md);
  font-size: var(--g-fs-base); line-height: 1.7;
  overflow-wrap: anywhere;
}
.msg-row.user .msg-bubble {
  background: var(--g-grad); color: var(--g-surface);
  border-bottom-right-radius: var(--g-r-sm);
}
.msg-row.assistant .msg-bubble {
  background: var(--g-surface); color: var(--g-ink);
  border: 1px solid var(--g-line); box-shadow: var(--g-sh-sm);
  border-bottom-left-radius: var(--g-r-sm);
}
.msg-meta {
  display: flex; align-items: center; gap: var(--g-sp-3);
  font-size: var(--g-fs-xs); color: var(--g-mute);
}
.msg-row.user .msg-meta { justify-content: flex-end; }

.msg-bubble p { margin: 0 0 var(--g-sp-2); }
.msg-bubble p:last-child { margin-bottom: 0; }
/* base.css 的 reset 清掉了 ul/ol 的符号，只对 .md/.chat-msg/.detail-content 恢复；
   本页正文容器是 .msg-bubble（不是 .chat-msg），这里自行恢复符号与缩进 */
.msg-bubble ul, .msg-bubble ol { margin: var(--g-sp-1) 0; padding-left: 1.4em; list-style: revert; }
.msg-bubble li { margin-bottom: 2px; }
.msg-bubble h3 { margin: var(--g-sp-3) 0 var(--g-sp-1); font-size: var(--g-fs-md); }
.msg-bubble h4 { margin: var(--g-sp-2) 0 var(--g-sp-1); font-size: var(--g-fs-base); }
.msg-bubble code {
  padding: 1px 6px; border-radius: 4px;
  background-color: var(--g-surface-3); color: var(--g-ink);
  font-size: var(--g-fs-xs);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}
.msg-bubble pre {
  margin: var(--g-sp-2) 0; padding: var(--g-sp-3);
  border-radius: var(--g-r-sm); background-color: var(--g-surface-3);
  font-size: var(--g-fs-xs); line-height: 1.6; overflow-x: auto;
}
.msg-bubble pre code { padding: 0; background: none; color: inherit; font-size: inherit; }
.msg-bubble blockquote {
  margin: var(--g-sp-2) 0; padding: 4px var(--g-sp-3);
  border-left: 3px solid var(--g-primary-3);
  border-radius: 0 var(--g-r-sm) var(--g-r-sm) 0;
  background-color: var(--g-surface-2); color: var(--g-mute);
}

/* 输入中指示器（原 .typing-indicator 搬过来，动画名加页前缀避免与全站撞名） */
.typing-indicator { display: flex; align-items: center; gap: 6px; min-height: 20px; }
.typing-indicator span {
  width: 8px; height: 8px; border-radius: var(--g-r-pill);
  background-color: var(--g-mute-2);
  animation: chat-typing 1.4s infinite ease-in-out both;
}
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
.typing-indicator span:nth-child(3) { animation-delay: -0.32s; }
@keyframes chat-typing {
  0%, 80%, 100% { transform: scale(0.4); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* 失败反馈：外观走 base 的 .card + .g-error（本页不再用 alert / 自定义红框） */
.chat-error { align-self: stretch; font-size: var(--g-fs-sm); line-height: 1.6; }

/* ---------- 5. 状态栏 ---------- */
.status-bar {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-sp-4);
  padding: var(--g-sp-2) var(--g-sp-5);
  border-top: 1px solid var(--g-line-2); background: var(--g-surface-2);
  color: var(--g-mute); font-size: var(--g-fs-xs);
}
.status-bar strong { color: var(--g-ink-2); }
.status-warn { color: var(--g-warn); font-weight: 600; }
.status-danger { color: var(--g-danger); font-weight: 600; }

/* ---------- 6. 输入区：不参与压缩，始终完整可见（4-3） ---------- */
.input-area {
  flex: 0 0 auto;
  padding: var(--g-sp-3) var(--g-sp-5) var(--g-sp-4);
  border-top: 1px solid var(--g-line); background: var(--g-surface);
}
.input-row { display: flex; align-items: flex-end; gap: var(--g-sp-3); }
.input-row textarea {
  flex: 1 1 auto; min-width: 0;
  min-height: 44px; max-height: 150px;
  padding: 10px var(--g-sp-3);
  border-radius: var(--g-r-md); background-color: var(--g-surface-2);
  resize: none;
}
/* 发送键外观走 base 的 .btn .btn-primary .btn-lg（44px 档），这里只锁不压缩 */
.btn-send { flex: 0 0 auto; }

/* ---------- 7. 响应式（断点与 base.css 的 860 / 560 对齐） ---------- */
@media (max-width: 860px) {
  .sidebar { flex-basis: 200px; width: 200px; }
  .chat-area { padding: var(--g-sp-4) var(--g-sp-3); gap: var(--g-sp-3); }
  .status-bar { padding: var(--g-sp-2) var(--g-sp-3); gap: var(--g-sp-3); }
  .input-area { padding: var(--g-sp-2) var(--g-sp-3) var(--g-sp-3); }
}

/* ≤560px：会话列表从「直接 display:none」改为可折叠抽屉（顶部按钮 + 遮罩，
   点会话/遮罩/Esc 自动收起），窄屏不再是死路 */
@media (max-width: 560px) {
  .chat-topbar {
    display: flex; flex: 0 0 auto; align-items: center; gap: var(--g-sp-2);
    padding: var(--g-sp-2) var(--g-sp-3) 0;
  }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 160;
    width: min(82vw, 300px);
    border-right: 1px solid var(--g-line); box-shadow: var(--g-sh-lg);
    transform: translateX(-101%); visibility: hidden;
    transition: transform var(--g-dur-2) var(--g-ease), visibility var(--g-dur-2) var(--g-ease);
  }
  .sidebar.open { transform: translateX(0); visibility: visible; }
  .sidebar-header { padding-top: var(--g-sp-4); }
  .sidebar-mask {
    display: block; position: fixed; inset: 0; z-index: 150;
    background-color: var(--g-ink); opacity: 0;
    visibility: hidden; pointer-events: none;
    transition: opacity var(--g-dur-2) var(--g-ease), visibility var(--g-dur-2) var(--g-ease);
  }
  .sidebar-mask.show { opacity: 0.45; visibility: visible; pointer-events: auto; }
  .msg-row { max-width: 92%; }
}