/* ─── Main ─── */
#main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  height: 100vh;
  padding-right: calc(var(--legal-w) + var(--redact-w));
  transition: padding-right 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.legal-resizing #main,
body.redact-resizing #main { transition: none; }
body.legal-fullscreen #main,
body.redact-fullscreen #main { padding-right: 0; }

/* ═══ WELCOME MODE: input slightly above center ═══ */
#main.welcome-mode {
  justify-content: flex-start;
  padding-top: 28vh;
}

/* welcome-mode 与 project-mode 叠加时（点了「新建对话」还没发第一条就打开项目浏览器），
   上面的 padding-top:28vh 仍然生效，把整个项目浏览器顶下去、上半屏全空白
   （2026-07-29 用户反馈）。project-mode 下项目浏览器独占主区，不需要 welcome 的下沉留白；
   用三叠类提优先级压掉，不回动 welcome-mode 类本身——退出浏览器回到未发送的新对话时，
   欢迎页态还要靠它恢复。 */
#main.welcome-mode.project-mode { padding-top: 0; }

/* In welcome mode, hide chat box; show welcome */
#main.welcome-mode #chat-box { display: none; }
#main:not(.welcome-mode) #welcome { display: none; }

/* In chat mode, chat-box fills space */
#main:not(.welcome-mode) #chat-box {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 24px;
}

/* ─── Welcome screen ─── */
#welcome {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: fadeUp 0.5s ease;
}

.welcome-tagline {
  font-size: 12.5px; color: var(--text-3);
  margin-bottom: 14px; letter-spacing: 0.5px;
}

#welcome h1 {
  font-family: var(--font-serif);
  font-size: 40px; font-weight: 500;
  letter-spacing: -0.8px; color: var(--text);
  margin-bottom: 12px;
  line-height: 1.15;
}

.welcome-icon { color: var(--accent); flex-shrink: 0; display: flex; align-items: center; }

#welcome p {
  font-size: 14px; color: var(--text-3);
  line-height: 1.8; max-width: 380px; font-weight: 300;
}

/* ─── Input area ─── */
#input-wrap { flex-shrink: 0; padding: 20px 24px 0; }
.input-outer { max-width: var(--content-w); margin: 0 auto; position: relative; }

.input-box {
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: border-color 0.2s, box-shadow 0.2s, border-radius 0.3s, padding 0.3s;
  padding: 12px 54px 12px 46px;   /* 右 54px 给绝对定位的发送/停止键让位（right10+宽34+间隙10），
                                     否则长行文字会钻到气泡底下（2026-08-07 用户反馈遮挡） */
  backdrop-filter: blur(12px);
  position: relative;
}
.input-box:focus-within {
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.09), 0 0 0 3px rgba(0, 0, 0, 0.04);
}
#drop-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  align-items: center; justify-content: center; flex-direction: column; gap: 16px;
  pointer-events: none;
}
#drop-overlay.show { display: flex; }
#drop-overlay .drop-border {
  border: 2px dashed #7c3aed;
  border-radius: 20px;
  padding: 48px 64px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
#drop-overlay .drop-icon { color: #7c3aed; }
#drop-overlay .drop-title { font-size: 18px; font-weight: 600; color: #1a1a1a; }
#drop-overlay .drop-sub { font-size: 13px; color: #666; }

/* Welcome mode: narrower, taller input box */
#main.welcome-mode .input-box {
  padding: 16px 54px 16px 50px;   /* 右侧同样给发送键让位，与对话态一致 */
  border-radius: 22px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
}
#main.welcome-mode #user-input {
  height: 96px;
  min-height: 96px;
  font-size: 15px;
}
#main.welcome-mode .input-outer {
  max-width: min(860px, calc(100vw - var(--sidebar-w) - 48px));
}

#attach-btn {
  position: absolute; left: 10px; bottom: 10px;
  width: 28px; height: 28px; border-radius: 7px; border: none;
  background: transparent; color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: color 0.15s, background 0.15s;
}
#attach-btn:hover { color: var(--accent); background: rgba(139,92,246,0.1); }
#upload-tip {
  position: fixed; z-index: 9999;
  background: #333; color: #fff; font-size: 12px; line-height: 1.5;
  padding: 6px 10px; border-radius: 6px; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
#upload-tip.show { opacity: 1; }

/* ─── File attachment cards (Claude 式) ─── */
#file-chips {
  display: flex; gap: 10px; margin-bottom: 10px;
  overflow-x: auto; overflow-y: hidden; padding-bottom: 4px;
  scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.18) transparent;
}
#file-chips:empty { display: none; }
#file-chips::-webkit-scrollbar { height: 7px; }
#file-chips::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 4px; }
#file-chips::-webkit-scrollbar-track { background: transparent; }

/* 气泡里的附件预览（发送后保留） */
.bubble-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.bubble-chips .file-card { cursor: default; }
.bubble-chips .file-card-remove { display: none; }

.file-card {
  position: relative; flex-shrink: 0;
  width: 168px; height: 112px;
  background: #fff; border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  overflow: hidden; cursor: default;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.file-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.10); border-color: rgba(0,0,0,0.16); }

/* 文档/代码卡：文件名 + 元数据 + 左下角角标 */
.file-card-name {
  position: absolute; top: 12px; left: 14px; right: 14px;
  font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.file-card-meta {
  position: absolute; top: 50px; left: 14px; right: 14px;
  font-size: 11.5px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-card-badge {
  position: absolute; bottom: 12px; left: 14px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--text-2); background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.08);
  padding: 2px 7px; border-radius: 5px; text-transform: uppercase;
}

/* 图片卡：缩略图铺满 */
.file-card.image { background: #f3f3f3; }
.file-card.image .file-card-thumb {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* 右上角移除按钮，悬停出现 */
.file-card-remove {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; cursor: pointer; padding: 0;
  opacity: 0; transition: opacity 0.15s, background 0.15s;
}
.file-card:hover .file-card-remove { opacity: 1; }
.file-card-remove:hover { background: rgba(0,0,0,0.78); }

/* 上传状态 */
.file-card.uploading { opacity: 0.6; }
.file-card.uploading::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border: 2px solid rgba(0,0,0,0.15); border-top-color: var(--accent, #7c5cff);
  border-radius: 50%; animation: fc-spin 0.7s linear infinite;
}
@keyframes fc-spin { to { transform: rotate(360deg); } }
.file-card.uploaded .file-card-badge { color: #16a34a; border-color: rgba(22,163,74,0.3); background: rgba(22,163,74,0.08); }

/* ─── Rewind button ─── */
.user-msg-row { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.rewind-btn {
  opacity: 0; flex-shrink: 0;
  background: none; border: 1px solid rgba(0,0,0,0.12); border-radius: 6px;
  padding: 3px 9px; font-size: 11.5px; color: var(--text-3);
  cursor: pointer; transition: opacity 0.15s, background 0.1s; white-space: nowrap;
  margin-bottom: 2px;
}
.turn.user:hover .rewind-btn { opacity: 1; }
.rewind-btn:hover { background: rgba(0,0,0,0.06); color: var(--text); border-color: rgba(0,0,0,0.2); }

#user-input {
  display: block; width: 100%; background: transparent;
  border: none; outline: none;
  color: var(--text); font-family: var(--font);
  font-size: 14.5px; line-height: 1.6;
  resize: none; height: 24px; max-height: 200px; overflow-y: auto;
  transition: height 0.3s, min-height 0.3s;
}
#user-input::placeholder { color: var(--text-3); }

/* 脱敏文档附件标签（输入框上方） */
#redact-chip { padding: 4px 2px 2px; }
.rd-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--accent, #7c5cff);
  background: rgba(124,92,255,0.08); border: 1px solid rgba(124,92,255,0.25);
  border-radius: 14px; padding: 3px 8px 3px 10px;
}
.rd-chip-x {
  border: none; background: transparent; cursor: pointer;
  color: inherit; font-size: 12px; line-height: 1; padding: 0 2px; opacity: .7;
}
.rd-chip-x:hover { opacity: 1; }

/* 对话气泡里的脱敏文档折叠块 */
.user-bubble .redact-doc {
  margin-bottom: 6px; border: 1px solid rgba(0,0,0,0.12); border-radius: 8px;
  background: rgba(0,0,0,0.03); overflow: hidden;
}
.user-bubble .redact-doc > summary {
  cursor: pointer; padding: 6px 10px; font-size: 12px; font-weight: 600;
  list-style: none; user-select: none;
}
.user-bubble .redact-doc > summary::-webkit-details-marker { display: none; }
.user-bubble .redact-doc > summary::before { content: "▸ "; }
.user-bubble .redact-doc[open] > summary::before { content: "▾ "; }
.user-bubble .redact-doc-body {
  margin: 0; padding: 8px 10px; border-top: 1px solid rgba(0,0,0,0.10);
  max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font-family: var(--mono, monospace); font-size: 12px; line-height: 1.5;
}
.user-bubble .redact-q { white-space: pre-wrap; }

/* 录音转写附件（输入框上方）：跟文档/图片一样的方形卡片视觉，单独一个容器，
   不放进 #file-chips——避免发送时被克隆进气泡（气泡里已经用折叠块展示全文，会重复）。 */
#audio-chip { display: flex; gap: 10px; margin-bottom: 10px; }
#audio-chip:empty { display: none; }

/* 对话气泡里的录音转写折叠块 */
.user-bubble .audio-transcript {
  margin-bottom: 6px; border: 1px solid rgba(0,0,0,0.12); border-radius: 8px;
  background: rgba(0,0,0,0.03); overflow: hidden;
}
.user-bubble .audio-transcript > summary {
  cursor: pointer; padding: 6px 10px; font-size: 12px; font-weight: 600;
  list-style: none; user-select: none;
}
.user-bubble .audio-transcript > summary::-webkit-details-marker { display: none; }
.user-bubble .audio-transcript > summary::before { content: "▸ "; }
.user-bubble .audio-transcript[open] > summary::before { content: "▾ "; }
.user-bubble .audio-transcript-body {
  margin: 0; padding: 8px 10px; border-top: 1px solid rgba(0,0,0,0.10);
  max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font-family: var(--mono, monospace); font-size: 12px; line-height: 1.5;
}

#send-btn {
  position: absolute; right: 10px; bottom: 7px;   /* bottom 7px：对话态单行输入框高 48px
    (12+24+12)，(48-34)/2=7 正好垂直居中；原 10px 偏上（2026-07-29 用户反馈） */
  width: 34px; height: 34px; border-radius: 10px; border: none;
  /* 2026-07-29 用户拍板去紫：不用 accent 紫，改中性墨色并跟随主题反转——
     --text（亮主题深/暗主题浅）做底、--user-bg（亮主题浅/暗主题深）做箭头色 */
  background: var(--text); color: var(--user-bg);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: opacity 0.15s;
}
#send-btn:hover:not(:disabled) { opacity: 0.85; }
#send-btn:disabled { opacity: 0.35; cursor: not-allowed; }

#stop-btn {
  position: absolute; right: 10px; bottom: 7px;   /* 与发送键同位同高，轮流出现 */
  width: 34px; height: 34px; border-radius: 50%;
  border: none;
  background: rgba(217,112,96,0.12); color: #d97060;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s;
}
#stop-btn:hover { background: rgba(217,112,96,0.22); }

.action-bar { display: flex; gap: 2px; margin-top: 8px; }
.action-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 6px; border: none;
  background: none; color: var(--text-3); font-size: 12px;
  cursor: pointer; transition: background 0.15s, color 0.15s; font-family: var(--font);
}
.action-btn:hover { background: rgba(0,0,0,0.05); color: var(--text-2); }

/* Scroll-to-bottom button */
#scroll-to-bottom {
  position: fixed;
  left: calc(var(--sidebar-w) + (100vw - var(--sidebar-w)) / 2);
  transform: translateX(-50%);
  bottom: -50px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: left 0.2s ease, bottom 0.2s ease, background 0.15s ease;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
#scroll-to-bottom.show { bottom: 130px; }
#scroll-to-bottom:hover {
  background: #f5f5f5;
  border-color: rgba(0,0,0,0.18);
}
#scroll-to-bottom svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #111;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── Input footer hint ─── */
#input-footer {
  text-align: center; font-size: 11px;
  color: var(--text-3); padding: 8px 24px 18px;
}

/* ─── Scroll-to-bottom: removed ─── */

/* ─── Messages ─── */
.turn {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 20px 24px 0;
  animation: fadeUp 0.25s ease;
}

/* ─── 本对话「提问导航」——静默刻度 · 悬停展开（GPT 式） ─── */
/* 平时只有一列极淡刻度线（无字无框）；鼠标移上/键盘聚焦才展开成干净卡片列出提问。
   位置/显隐由 JS positionTurnNav() 按实际留白动态设定，抗缩放/抗右侧面板。 */
/* 中性灰阶（不使用主题紫）——刻度/文字/当前项都走这套 */
#turn-nav {
  --tnav-ink:    #1c1c1e;               /* 当前项/hover 的深墨 */
  --tnav-mute:   rgba(28,28,30,0.30);   /* 静默刻度灰 */
  --tnav-text:   rgba(28,28,30,0.62);   /* 展开文字灰 */
  display: none;               /* 默认隐藏，JS 决定是否显示 */
  position: fixed;
  top: 50%; transform: translateY(-50%);
  z-index: 50;                 /* 低于边栏(300)与右侧面板 */
  box-sizing: border-box;
  max-height: 74vh;
  padding: 3px 5px;            /* 静默态极紧凑 */
  border: 1px solid transparent;      /* 静默态无边框，展开时才现 */
  border-radius: 13px;
  overflow: hidden;
  transition: padding 0.18s ease, background 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease, backdrop-filter 0.18s ease;
}
body.private-active #turn-nav {
  --tnav-ink:  #f2f2f4;
  --tnav-mute: rgba(235,235,240,0.28);
  --tnav-text: rgba(235,235,240,0.60);
}
#turn-nav-list { display: flex; flex-direction: column; gap: 1px; }

/* 展开态卡片：干净中性浅色 / 深色，无紫 */
#turn-nav:hover, #turn-nav:focus-within {
  padding: 8px;
  background: rgba(252,252,253,0.97);
  border-color: rgba(0,0,0,0.09);
  box-shadow: 0 12px 34px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.05);
  backdrop-filter: saturate(1.05) blur(8px);
  overflow-y: auto;
}
body.private-active #turn-nav:hover,
body.private-active #turn-nav:focus-within {
  background: rgba(24,24,26,0.96);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 14px 38px rgba(0,0,0,0.5);
}
#turn-nav::-webkit-scrollbar { width: 3px; }

/* 小标题「本对话」：仅展开时淡入 */
.tnav-head {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--tnav-text);
  padding: 2px 8px; user-select: none;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.2s ease, opacity 0.2s ease, margin 0.2s ease;
}
#turn-nav:hover .tnav-head,
#turn-nav:focus-within .tnav-head { max-height: 22px; opacity: 1; margin-bottom: 4px; }

/* 单条：刻度线 + 文字标签（文字默认收起） */
.tnav-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  height: 12px;                       /* 静默态更小 */
  padding: 0 5px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font); text-align: left;
  border-radius: 7px;
  transition: height 0.18s ease, padding 0.18s ease, background 0.12s ease;
}
.tnav-tick {
  flex: 0 0 auto;
  width: 10px; height: 1.5px; border-radius: 2px;
  background: var(--tnav-mute);
  transition: width 0.18s ease, background 0.18s ease;
}
.tnav-item.active .tnav-tick { width: 16px; background: var(--tnav-ink); }
.tnav-label {
  min-width: 0; max-width: 0; opacity: 0; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
  font-size: 12.5px; line-height: 1.4; color: var(--tnav-text);
  transition: max-width 0.22s ease, opacity 0.2s ease;
}

/* 展开：刻度收起、文字铺开、行变高可点 */
#turn-nav:hover .tnav-item,
#turn-nav:focus-within .tnav-item { height: 27px; padding: 0 10px; }
#turn-nav:hover .tnav-tick,
#turn-nav:focus-within .tnav-tick { width: 0; margin-right: -10px; }
#turn-nav:hover .tnav-label,
#turn-nav:focus-within .tnav-label { max-width: 214px; opacity: 1; }
#turn-nav:hover .tnav-item:hover { background: rgba(0,0,0,0.05); }
body.private-active #turn-nav:hover .tnav-item:hover { background: rgba(255,255,255,0.07); }
#turn-nav:hover .tnav-item:hover .tnav-label { color: var(--tnav-ink); }
/* 当前所看那条：展开后用深墨 + 左侧细竖条（灰阶，不用紫） */
.tnav-item.active .tnav-label { color: var(--tnav-ink); font-weight: 600; }
#turn-nav:hover .tnav-item.active::before,
#turn-nav:focus-within .tnav-item.active::before {
  content: ""; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  width: 2px; height: 15px; border-radius: 2px; background: var(--tnav-ink);
}
.tnav-item:focus-visible { outline: 2px solid var(--tnav-text); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  #turn-nav, .tnav-item, .tnav-tick, .tnav-label, .tnav-head { transition: none; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.turn.user { display: flex; flex-direction: column; align-items: flex-end; }

.user-bubble {
  max-width: 85%;
  background: var(--user-bg);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 18px 18px 4px 18px;
  padding: 11px 16px; font-size: 14.5px;
  line-height: 1.65; white-space: pre-wrap;
  word-break: break-word; color: var(--text);
}

.turn.assistant { display: flex; gap: 14px; align-items: flex-start; }

.asst-avatar {
  width: 26px; height: 26px; flex-shrink: 0;
  margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}

.asst-body { flex: 1; min-width: 0; }
.asst-name {
  font-size: 11.5px; font-weight: 600; color: var(--text-3);
  margin-bottom: 6px; letter-spacing: 0.3px; text-transform: uppercase;
}
.asst-content { font-size: 15.5px; line-height: 1.78; color: var(--text); word-break: break-word; }
.stream-pre { font-family: inherit; font-size: 15.5px; line-height: 1.78; color: var(--text); white-space: pre-wrap; word-break: break-word; margin: 0; background: none; border: none; padding: 0; }