/* 聊天层：消息流、气泡、输入区、Markdown 渲染样式、角色扮演语义标注。
   禁止出现 hex / rgb 字面量。 */

.chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-1);
}
.chat-head-main { flex: 1 1 auto; min-width: 0; }
.chat-head-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-head-sub { font-size: var(--fs-xxs); color: var(--ink-subtle); }
.chat-head-actions { display: flex; gap: var(--sp-1); flex: 0 0 auto; }

.chat-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-5) var(--sp-4);
  scroll-behavior: smooth;
}
.chat-inner {
  max-width: var(--chat-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* ---------------- 消息 ---------------- */
.msg {
  display: flex;
  gap: var(--sp-3);
  animation: msgIn var(--dur) var(--ease-out);
}
.msg-user { flex-direction: row-reverse; }

@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.msg-body { min-width: 0; max-width: 78%; display: flex; flex-direction: column; gap: var(--sp-1); }
.msg-user .msg-body { align-items: flex-end; }

.msg-name {
  font-size: var(--fs-xxs);
  color: var(--ink-subtle);
  padding: 0 var(--sp-1);
}

.bubble {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  color: var(--ink-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.msg-user .bubble {
  background: var(--primary-soft);
  border-color: var(--primary-soft);
  color: var(--ink);
}
/* 旁白气泡。
   形式对齐微信里的时间、拍一拍、撒回提示:居中、浅色半透明、深灰字。
   不带头像与名字 —— 它不是某个角色说的话。 */
.msg-narration {
  display: flex;
  justify-content: center;
  margin: var(--sp-1) 0;
}
.narration-bubble {
  max-width: 72%;
  padding: 5px var(--sp-3);
  /* 小圆角而不是胶囊:内容一多就换行,胶囊形会被拉成椭圆很难看。
     取 --radius-xs(4px):看上去既不像椭圆也不像硬方形。 */
  border-radius: var(--radius-xs);
  /* 半透明白底:让它看起来“浮”在对话流上而不是一条消息 */
  background: rgba(255, 255, 255, .62);
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  text-align: center;
  word-break: break-word;
  backdrop-filter: blur(2px);
}
/* 深色主题下“浅白半透明”会过亮,换成浅灰半透明。
   选择器必须与 tokens.css 一致:项目用的是 :root[data-theme='dark'] */
:root[data-theme='dark'] .narration-bubble {
  background: rgba(255, 255, 255, .10);
  color: var(--ink-subtle);
}

.bubble-error {
  background: var(--danger-soft);
  border-color: var(--danger-soft);
  color: var(--danger);
  font-size: var(--fs-sm);
}

.msg-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-1);
  padding: 0 var(--sp-1);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.msg:hover .msg-tools, .msg:focus-within .msg-tools { opacity: 1; }
/* 常驻工具条:不需要 hover 也一直显示 */
.msg-tools.is-fixed { opacity: 1; }
/* 纯文字统计(时长、字数),不可点击 */
.msg-stat {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink-subtle);
  font-size: var(--fs-xxs);
  font-variant-numeric: tabular-nums;
  cursor: default;
  user-select: none;
}

/* 输入中指示 */
.typing { display: inline-flex; gap: 4px; align-items: center; padding: var(--sp-1) 0; }
.typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-subtle);
  animation: blink 1.2s infinite;
}
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }

@keyframes blink {
  0%, 60%, 100% { opacity: .25; }
  30% { opacity: 1; }
}

/* ---------------- 输入区 ---------------- */
.composer {
  flex: 0 0 auto;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--hairline);
  background: var(--surface-1);
}
.composer-inner {
  max-width: var(--chat-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.composer-box {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.composer-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.composer-input {
  flex: 1 1 auto;
  min-height: 24px;
  max-height: 180px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  resize: none;
  outline: none;
  padding: var(--sp-1) var(--sp-2);
}
.composer-input::placeholder { color: var(--ink-subtle); }
.composer-send {
  width: 38px; height: 38px;
  border: 0;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--on-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color var(--dur-fast) var(--ease);
}
.composer-send:hover { background: var(--primary-hover); }
.composer-send:disabled { opacity: .5; cursor: not-allowed; }

/* 输入框上方的悬浮气泡(可整体收起) */
.composer-chips-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.composer-chips-wrap.is-collapsed { gap: 0; }
.chips-toggle-row { display: flex; justify-content: center; }
.chips-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  color: var(--ink-subtle);
  font-size: var(--fs-xxs);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.chips-toggle:hover { color: var(--primary); border-color: var(--primary); }
.composer-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.chip-toggle,
.chip-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  color: var(--ink-muted);
  font-size: var(--fs-xxs);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.chip-toggle { cursor: pointer; }
.chip-toggle:hover { border-color: var(--primary); color: var(--primary); }
.chip-toggle.is-on { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.chip-toggle span,
.chip-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-icon { display: inline-flex; flex: 0 0 auto; }

.composer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-xxs);
  color: var(--ink-subtle);
  flex-wrap: wrap;
}

/* 手机端:气泡区高度限制,超出时内部滚动,不挤占对话区 */
@media (max-width: 720px) {
  .composer { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
  .composer-chips { max-height: 92px; overflow-y: auto; }
}

/* ============================================================
   Markdown 渲染（markdown.js 生成的类名）
   ============================================================ */
.bubble .md-p { margin: 0 0 var(--sp-3); }
.bubble .md-p:last-child { margin-bottom: 0; }

.bubble .md-h { margin: var(--sp-3) 0 var(--sp-2); font-family: var(--font-display); }
.bubble .md-h:first-child { margin-top: 0; }
.bubble .md-h1 { font-size: var(--fs-h3); }
.bubble .md-h2 { font-size: 17px; }
.bubble .md-h3 { font-size: var(--fs-body); }
.bubble .md-h4, .bubble .md-h5, .bubble .md-h6 { font-size: var(--fs-sm); color: var(--ink-muted); }

.bubble strong { color: var(--ink); font-weight: 600; }
.bubble del { color: var(--ink-subtle); }

.bubble .md-ul, .bubble .md-ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); }
.bubble .md-ul:last-child, .bubble .md-ol:last-child { margin-bottom: 0; }
.bubble li { margin-bottom: var(--sp-1); }

.bubble .md-quote {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-left: 2px solid var(--primary);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  color: var(--ink-muted);
}
.bubble .md-quote:last-child { margin-bottom: 0; }

.bubble .md-hr { margin: var(--sp-4) 0; height: 1px; border: 0; background: var(--hairline); }

.bubble .md-code {
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  background: var(--surface-3);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.bubble .md-pre {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--radius);
  background: var(--surface-invert);
  overflow-x: auto;
}
.bubble .md-pre:last-child { margin-bottom: 0; }
.bubble .md-pre code {
  background: none;
  padding: 0;
  color: var(--on-invert);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

.bubble .md-link { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   角色扮演语义标注（rpFormat.js 生成的类名）
   ============================================================ */

/* 台词：主色 + 略加重，让对话在长段落里一眼可辨 */
.rp-speech { color: var(--rp-speech); font-weight: 500; }

/* 心里话 / 内心独白：淡化 + 斜体 */
.rp-inner { color: var(--rp-inner); font-style: italic; }

/* 动作 / 旁白：次级色斜体（由 Markdown 的 em 兼任） */
.rp-action { color: var(--rp-action); font-style: italic; }

/* 系统提示 / OOC */
.rp-system {
  display: inline-block;
  padding: 1px var(--sp-2);
  border-radius: var(--radius-xs);
  background: var(--rp-system-bg);
  color: var(--rp-system-fg);
  font-size: var(--fs-xs);
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 768px) {
  .chat-head { padding: var(--sp-2) var(--sp-4); }
  .chat-body { padding: var(--sp-4) var(--sp-3); }
  .msg-body { max-width: 86%; }
  .composer { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
  .msg-tools { opacity: 1; }
  .composer-chips { gap: var(--sp-1); }
}

/* 管理后台会话详情:复用普通消息气泡,但只读且在弹窗内独立滚动 */
.readonly-chat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-height: min(65vh, 720px);
  overflow-y: auto;
  padding: var(--sp-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.readonly-chat .msg { width: 100%; }
.readonly-chat .bubble { max-width: min(100%, 680px); }