/* ============ Main ============ */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  background: var(--bg);
}
/* 拖拽上传 overlay：
   非 project 视图 → .main.is-dragover::before/::after 盖整屏，提示"添加到当前对话"。
   project 视图 → 两个 overlay 同时出现：
     - #cecpsProjView.is-dragover::before 盖三栏，提示"添加到项目资料"（project.css）
     - .main.is-dragover 的 overlay 只盖 footer.composer 区域（子选择器实现），
       提示"添加到当前对话"。两者并列，让用户自己选择拖到哪个区域。
   两种落点的 drop 路由靠 cecpsProjView.drop stopPropagation 分发：
   三栏内 drop → project-level；其余 → 冒泡到 .main → chat-level。 */
.main.is-dragover::before {
  content: "";
  position: absolute;
  inset: 12px;
  background: var(--ink-soft);
  border: 2px dashed var(--ink);
  border-radius: 14px;
  z-index: 50;
  pointer-events: none;
}
.main.is-dragover::after {
  content: "松开即添加到当前对话";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
  z-index: 51;
  pointer-events: none;
}
/* project 视图：.main 的 overlay 收窄到 footer.composer 区域，不再盖整个三栏。
   footer.composer 需要 position:relative 才能成为 ::before/::after 的定位根。 */
body[data-view="project"] .main.is-dragover::before,
body[data-view="project"] .main.is-dragover::after { display: none; }
body[data-view="project"] .main.is-dragover > footer.composer { position: relative; z-index: 0; }
body[data-view="project"] .main.is-dragover > footer.composer::before {
  content: "";
  position: absolute;
  inset: 6px;
  background: var(--ink-soft);
  border: 2px dashed var(--ink);
  border-radius: 14px;
  z-index: 50;
  pointer-events: none;
}
body[data-view="project"] .main.is-dragover > footer.composer::after {
  content: "添加到当前对话";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
  z-index: 51;
  pointer-events: none;
}
.main-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--gutter-main);
  height: 56px;
  flex-shrink: 0;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms;
}
.main-header.with-border { border-bottom-color: var(--border-soft); }
.header-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  transition: background 120ms, color 120ms;
}
.header-btn:hover { background: var(--hover); color: var(--text); }
/* 高危操作按钮：默认跟其他按钮一样克制，hover 才显示警示色，
   提醒这不是普通刷新而是会真的重启服务进程的操作。 */
.header-btn-danger:hover {
  background: rgba(220, 38, 38, 0.10);
  color: #dc2626;
}
html[data-theme="dark"] .header-btn-danger:hover {
  background: rgba(248, 113, 113, 0.14);
  color: #f87171;
}
.header-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  max-width: 60%;
}
/* 普通对话视图（非 welcome / project / chat-in-project）下，标题可点击编辑 */
body[data-view="chat"] .header-title {
  cursor: pointer;
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: 6px;
  transition: background 120ms;
}
body[data-view="chat"] .header-title:hover {
  background: var(--hover, rgba(0,0,0,0.04));
}
/* chat-in-project 视图：只让会话标题 span 可点击编辑，项目名面包屑保持原状 */
.cip-header-sess {
  cursor: pointer;
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: 6px;
  transition: background 120ms;
}
.cip-header-sess:hover {
  background: var(--hover, rgba(0,0,0,0.04));
}
/* 编辑模式：input 替换 div content，视觉跟 header-title 完全一致 */
.header-title-input {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  min-width: 120px;
  letter-spacing: inherit;
}
.header-title > * {
  /* button / span 都按基线居中，避免 button 自带 padding 造成的视觉错位 */
  display: inline-flex;
  align-items: center;
}
/* 项目页面包屑：点击回到该项目主页，加 chip 化 hover 提示可点 */
.cip-header-proj {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 6px;
  margin: -4px -6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background 140ms, border-color 140ms;
}
.cip-header-proj:hover {
  background: var(--hover);
  border-color: var(--border-soft);
}
.cip-header-proj-name { font-weight: 600; color: var(--ink); }
.cip-header-sep { margin: 0 6px; color: var(--text-4); }
.cip-header-sess { color: var(--text-2); }
/* AI 提示：跟在标题右侧，灰色小字。把"内容由 AI 生成"从底部
   挪到顶部 —— 用户始终能看到这个提醒，不被"对话太长底部看不见"
   挡住。flex:1 让它占据中段空间把右侧按钮推到尾部。 */
.header-ai-note {
  flex: 1;
  font-size: 12px;
  color: var(--text-4);
  margin-left: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 主题切换：单图标 toggle。当前 light → 渲染月亮（点击切 dark），
   当前 dark → 渲染太阳。靠 [data-theme] 选择性显示一个，另一
   个 display:none 不占空间。

   上色：填充色让图标在 hover 之外也有明确的视觉重量。月亮用
   indigo（暗色含义）、太阳用 amber（暖光含义）—— 跟 macOS /
   Tailwind 等业界配色对齐。深色态颜色再亮一档保证对比度。 */
.theme-icon-moon, .theme-icon-sun { display: none; }
/* icon 跟随当前主题：浅色显示太阳（白天）、深色显示月亮（夜晚）。
   按钮的语义是"状态指示"，hover/click 才是切换动作。 */
html[data-theme="light"] .theme-icon-sun { display: block; }
html[data-theme="dark"] .theme-icon-moon { display: block; }
.theme-icon-moon {
  color: #6366f1;  /* indigo-500 */
  fill: currentColor;
}
.theme-icon-sun {
  color: #f59e0b;  /* amber-500 */
}
.theme-icon-sun circle {
  fill: currentColor;
}
html[data-theme="dark"] .theme-icon-moon { color: #818cf8; }
html[data-theme="dark"] .theme-icon-sun { color: #fbbf24; }
/* hover 时按钮整体描边色仍走 .header-btn 的逻辑，不打扰图标本身
   的填充色 —— 让图标颜色稳定可识别，避免 hover 一闪一变。 */
#themeToggle:hover .theme-icon-moon,
#themeToggle:hover .theme-icon-sun {
  filter: brightness(1.1);
}

/* ── 右上角按钮自定义 hover 气泡 ──
   浏览器原生 title tooltip 要等 500ms+ 才弹、样式丑，用户分不清按钮
   做什么。给 .main-header 下带 data-tip 的按钮加一个轻量 CSS 气泡，
   hover 立刻显示。startup JS 会把这些按钮的 title 转成 data-tip。 */
.main-header [data-tip] { position: relative; }
.main-header [data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background: rgba(20, 23, 26, 0.92);
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms, transform 120ms;
  z-index: 70;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
html[data-theme="dark"] .main-header [data-tip]::after {
  background: rgba(245, 245, 245, 0.95);
  color: #14171a;
}
.main-header [data-tip]:hover::after,
.main-header [data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* 标题右侧的按钮群都贴着窗口右缘：气泡保持居中定位会向右出界被视口
   截断（长文案如分享按钮实测被切）。这一排统一右对齐——气泡右缘对齐
   按钮右缘、往左伸展，左侧空间充裕，多长的文案都不会出界。 */
.main-header .header-title ~ [data-tip]::after {
  left: auto;
  right: 0;
  transform: translateY(-2px);
}
.main-header .header-title ~ [data-tip]:hover::after,
.main-header .header-title ~ [data-tip]:focus-visible::after {
  transform: translateY(0);
}

/* ============ Theme switcher ============ */
.theme-seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--hover);
  border-radius: 10px;
}
.theme-seg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 26px;
  padding: 0;
  font-size: 11.5px;
  color: var(--text-3);
  border-radius: 7px;
  transition: background 150ms, color 150ms;
}
.theme-seg-btn:hover { color: var(--text); }
.theme-seg-btn.active {
  background: var(--card-bg);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}


/* 视图切换 cross-fade：旧容器淡出（is-fading-out）+ 新容器淡入（viewFadeIn）
   两者同时跑，效果接近切 session 时的流畅感。位移加大到 6px 增强可感知度。
   util.js fadeOutAndHide 给被切走的容器加 .is-fading-out，160ms 后 display:none。 */
@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes viewFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-2px); }
}
#welcomeScreen,
.messages,
#cecpsProjView {
  animation: viewFadeIn 240ms var(--ease) both;
}
.is-fading-out {
  animation: viewFadeOut 160ms var(--ease) both !important;
  pointer-events: none;
}
/* M1 关键：fade-out 期间，旧容器（messages/welcome/projView）必须脱离 flex 流，
   否则它和入场容器同时 flex:1 占高度，会把入场容器（justify-content:center）的
   内容挤压到上半部分——160ms 后旧容器 display:none，内容才"回弹"到正中。
   用 absolute + inset:0 让它在视觉上覆盖 .main 但不参与 flex 高度分配。
   .main 本来就是 position:relative（main.css:7）—— absolute 定位有锚点。 */
.main > .is-fading-out {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
}
/* hidden 时不要让 animation 占位，否则下次显示时浏览器可能跳过重启 */
#cecpsProjView[hidden] { display: none !important; animation: none; }

/* ── 通用 modal 蒙层 ──
   .modal-backdrop 是所有弹窗（usageModal、proj-modal 等）共用的基类。
   缺这套样式时 backdrop 会被 body[display:flex] 当成兄弟节点挤进主流，
   把侧栏和主区压扁。.proj-modal-backdrop 在 project.css 有自己的 fixed
   覆盖，本规则只兜底「只设了 modal-backdrop 但没特化」的场景（如 usageModal）。
   display 由 inline style / JS 控制（none ↔ flex），这里只兜定位/层级。 */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop, rgba(20, 22, 20, 0.42));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 250;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}