/* 配色令牌来自 app.wxss（全站唯一来源），本页不留副本。
   整体沿用首页的「暖白纸面 + 白卡 + 浅橙衬底」语言：
   AI 气泡走白卡（白面 + 2rpx 发丝边），用户气泡走浅橙衬底，避免实心橙泛滥。 */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-sizing: border-box;
  /* 页面自身不滚，滚动只交给中间的消息区；
     overflow: hidden 是兜底，避免任何子项溢出到视口外变成"看得见滑不到" */
  overflow: hidden;
  /* 给 fixed 的自定义 tabBar 留位；安全区由这里统一承担，输入区不再重复加。
     tabBar 实测高度 = 12+12 内距 + 44 图标 + 6 间距 + 24 文字 + 2 边框 = 100rpx(+安全区)。
     140 → 120 → 112rpx：按钮下边只剩 12rpx(6px) 空隙，已贴近下限——
     再往下（<100rpx）胶囊就会被 tabBar 盖住；这 12rpx 同时是防微信字体放大
     把 tabBar 撑高的缓冲，不宜再压 */
  padding-bottom: calc(112rpx + env(safe-area-inset-bottom));
  background-color: var(--paper);
}

/* ===== 辅助入口（在输入区下方：常见问题 + 清空聊天）===== */
/* 空心描边小按钮：2rpx 暖橙描边、无填充。
   两者都是低频辅助动作，用"只描边"与输入区右侧那个浅橙底发送键区分开；
   描边在纸面上 4.66:1、文字 6.10:1，均过线。
   圆角 20rpx 与输入框、发送键、气泡同档——全页统一为圆角矩形，不再有胶囊。
   容器是 column，靠 align-self: flex-end 把整行右对齐 */
.tool-bar {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 16rpx;
  flex-shrink: 0;
  /* 上 12 贴住输入区，右 32 对齐页面页边距；下不留边距，底部空气统一交给容器 */
  margin: 12rpx 32rpx 0;
}

.tool-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 10rpx 26rpx;
  border-radius: 20rpx;
  border: 2rpx solid var(--brand-strong);
  transition: transform 0.15s ease;
}

.tool-btn:active {
  transform: scale(0.96);
}

.tool-btn-text {
  font-size: 24rpx;
  font-weight: 500;
  color: var(--brand-ink);
  letter-spacing: 1rpx;
}

/* ===== 消息列表 ===== */
.message-list {
  flex: 1;
  /* 关键：flex 子项的自动最小高度是「内容高度」，消息多于一屏后它就不肯收缩，
     会把 100vh 的容器撑破、把下方输入区顶出视口（且因容器锁死高度而滑不回来）。
     置 0 后它才能正确收缩到剩余空间，并触发 scroll-view 自身滚动 */
  min-height: 0;
  padding: 20rpx 0;
}

/* ===== 欢迎区 ===== */
.welcome-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 上方留白收小：消息区本身已有 20rpx 内距，这里 80rpx 会显得图标吊得太低 */
  padding: 40rpx 40rpx 80rpx;
  text-align: center;
}

/* 空态图标：浅橙衬底 + 暖陶土图标，替代原橙/绿渐变与彩色辉光 */
.welcome-icon {
  width: 140rpx;
  height: 140rpx;
  margin-bottom: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40rpx;
  background: var(--brand-soft);
  border: 2rpx solid var(--brand-line);
}

/* 空态图标改为 ai-ink.png（暖墨线稿的 AI 气泡）：与头像区的 home-ink.png 同源，
   落在浅橙衬底上仍清晰（暖陶土线稿约 6.8:1）。
   88rpx 略大于原 t-icon 的 72rpx，因为该图是满画布的气泡轮廓，缩小会显弱 */
.welcome-icon-img {
  width: 88rpx;
  height: 88rpx;
}

.welcome-title {
  margin-bottom: 12rpx;
  font-size: 40rpx;
  font-weight: 700;
  color: var(--ink);
}

.welcome-desc {
  margin-bottom: 56rpx;
  font-size: 28rpx;
  line-height: 1.6;
  color: var(--muted);
}

/* 常见问题清单：整块收成一张白卡，行与行之间只用横线分隔、不留间隙。
   空会话的欢迎区与会话流里由「常见问题」按钮唤起的清单共用同一套语言——
   都是一份"可点的清单"，不该一处是散卡、一处才收成块 */
.question-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 2rpx solid var(--line);
  border-radius: 20rpx;
  box-shadow: var(--shadow-card);
  /* 裁掉行的直角与点按底色，保住卡片自身的圆角 */
  overflow: hidden;
}

/* 清单行：文字 + 右侧 chevron 做点击暗示 */
.quick-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rpx;
  padding: 26rpx 28rpx;
  font-size: 28rpx;
  color: var(--ink-2);
  text-align: left;
  transition: background 0.15s ease;
}

/* 行分隔线用 --sep（比 --line 深一档，白面上才看得见） */
.quick-item + .quick-item {
  border-top: 2rpx solid var(--sep);
}

/* 行嵌在整块里，不能像独立卡那样整体缩放（会撕裂分隔线），
   点按反馈改由底色承担 */
.quick-item:active {
  background: var(--brand-soft);
}

/* ===== 消息项 ===== */
/* 头像在上、气泡在下；用户消息整条靠右 */
.message-item {
  display: flex;
  flex-direction: column;
  padding: 16rpx 24rpx;
}

.message-item.user {
  align-items: flex-end;
}

/* 头像行：头像在左，时间紧跟其右 */
.message-head {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 10rpx;
}

/* 用户侧镜像为「时间 → 头像」：整行仍贴右边缘，于是头像正好落在气泡右边缘上，
   与 AI 侧头像对齐气泡左边缘形成对称；时间退到头像左侧，不再顶在最右 */
.message-item.user .message-head {
  flex-direction: row-reverse;
}

/* 头像底座：AI 与用户同构——浅橙衬底 + 2rpx 暖橙描边
   （浅橙块落在纸面上只有约 1.03:1，必须靠描边托形）。
   身份只由图形区分：AI 是品牌标记，用户是人像图标；
   左右位置本来就把两者分开了，不必再用"实心橙 vs 浅橙"区分，
   否则同一列里两种底板并排出现会读成没做完 */
.avatar {
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20rpx;
  background: var(--brand-soft);
  border: 2rpx solid var(--brand-line);
  flex-shrink: 0;
}

/* AI 的品牌标记用暖墨版 home-ink.png：白色版 home-w.png 只能压在实心色块上，
   落在浅橙底会看不见。
   36rpx 与用户侧的 t-icon 同尺寸（两个图形的笔画都约占画布 95%），视觉齐平 */
.avatar-img {
  width: 36rpx;
  height: 36rpx;
}

/* 头像行里的时间：放头像右侧 */
.message-time {
  font-size: 22rpx;
  color: var(--muted);
}

/* 头像已移到气泡上方，气泡不再被头像占位挤压，版心随之放宽：
   84% → 92%（约 646rpx），仍留一档余量不顶到屏幕边缘 */
.message-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 92%;
}

.message-item.user .message-content {
  align-items: flex-end;
}

/* ===== 气泡 ===== */
.message-bubble {
  padding: 20rpx 24rpx;
  border-radius: 20rpx;
  word-wrap: break-word;
  word-break: break-all;
}

/* AI：白卡（白面 + 发丝边），安静、不与用户消息争色 */
.message-item.ai .message-bubble {
  background: var(--white);
  border: 2rpx solid var(--line);
  border-top-left-radius: 6rpx;
}

/* 用户：浅橙衬底 + 暖陶土字，避免一排实心橙（浅橙底 5.96:1，过 AA）。
   气泡落在纸面上，浅橙底与纸面明度差仅约 1.03:1，必须靠 2rpx --brand-line 描边托形 */
.message-item.user .message-bubble {
  background: var(--brand-soft);
  border: 2rpx solid var(--brand-line);
  border-top-right-radius: 6rpx;
}

/* 气泡正文 28 → 30rpx（15px）：长回答连续阅读时 14px 偏吃力，上调一号。
   markdown 与纯文本两条路径同步，避免同一气泡里两种字号 */
.message-text {
  font-size: 30rpx;
  line-height: 1.6;
}

.message-item.ai .message-text {
  color: var(--ink-2);
}

.message-item.user .message-text {
  color: var(--brand-ink);
}

/* Markdown 渲染区：字号与 .message-text 对齐（30rpx） */
.message-markdown {
  width: 100%;
  font-size: 30rpx;
  line-height: 1.6;
  color: var(--ink-2);
}

/* 表格在聊天气泡中的样式覆盖 */
.message-markdown .t-chat-markdown-table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 2rpx solid var(--line);
  border-radius: 8rpx;
}

.message-markdown .t-chat-markdown-table__container {
  display: table;
  min-width: 100%;
  max-width: max-content;
  border-collapse: collapse;
  white-space: normal;
  table-layout: fixed;
  word-break: break-word;
}

.message-markdown .t-chat-markdown-table__th,
.message-markdown .t-chat-markdown-table__td {
  padding: 8rpx 12rpx;
  font-size: 24rpx;
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 240rpx;
}

.message-markdown .t-chat-markdown-table__th {
  background-color: var(--brand-soft);
  font-weight: 600;
  color: var(--ink);
}

.message-markdown .t-chat-markdown-table__tr:nth-child(2n) {
  background-color: var(--paper);
}

/* 代码块 */
.message-markdown .t-chat-markdown-codespan,
.message-markdown .t-chat-markdown-code {
  font-size: 24rpx;
  word-break: break-all;
}

.message-image {
  max-width: 400rpx;
  border-radius: 12rpx;
}

/* ===== 正在输入 ===== */
.typing-bubble {
  padding: 24rpx 32rpx;
}

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.dot {
  width: 14rpx;
  height: 14rpx;
  border-radius: 50%;
  background-color: var(--brand-ink);
  animation: typing 1.4s infinite ease-in-out both;
}

.dot:nth-child(1) {
  animation-delay: -0.32s;
}

.dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typing {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===== 输入区 ===== */
.input-area {
  display: flex;
  align-items: center;
  gap: 16rpx;
  /* 钉在容器底部，不被消息区挤压 */
  flex-shrink: 0;
  padding: 16rpx 24rpx;
  background: var(--white);
  border-top: 2rpx solid var(--line);
}

.message-input {
  flex: 1;
  height: 76rpx;
  padding: 0 28rpx;
  background: var(--paper);
  border: 2rpx solid var(--line);
  /* 20rpx = 10px：与气泡、常见问题卡、用户徽记的统一圆角档，
     比原 999rpx 胶囊更贴合"输入条"的体量（76rpx 高≈38px，10px 圆角约占四分之一） */
  border-radius: 20rpx;
  font-size: 28rpx;
  color: var(--ink);
}

.input-placeholder {
  color: var(--muted);
}

/* 发送按钮：默认浅橙底 + 描边，有内容时转实心暖橙（全页唯一的实心橙块）。
   默认态落在白面输入区上，浅橙底同样靠 --brand-line 描边托形。
   圆角由正圆（50%）改为 20rpx，与左侧输入框、上方气泡同档，成对出现 */
.action-btn {
  width: 76rpx;
  height: 76rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20rpx;
  background: var(--brand-soft);
  border: 2rpx solid var(--brand-line);
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.send-btn.active {
  background: var(--brand-strong);
  border-color: var(--brand-strong);
}

/* ===== AI 声明注释 ===== */
/* 原为页面底部一行常驻声明，改为挂在每条 AI 回复的气泡正下方：
   既省下底部固定高度，又让声明紧贴它要限定的内容。
   无背景无边框，靠 muted 小字安静收尾；
   24rpx 是中文最小可用字号下限（12px），不能再小 */
.message-note {
  margin-top: 8rpx;
  font-size: 24rpx;
  line-height: 1.5;
  color: var(--muted);
}