/* ============================================================
   AI 业务工作台 - 聊天对话列表样式(与 workbench.js 构建逻辑对应)
   - 样式由 JS 内联迁移而来,像素级保持原视觉
   - 桌面端默认;移动端覆盖见 official-responsive.css
   ============================================================ */

/* ---------- 字号 / 尺寸基准 ----------
   统一工作台各区域字号:此前用户消息继承 body 16px、AI 回复 .md-render
   13px,同一段对话两种字号,视觉割裂。现以 14px 为正文基准,
   12px 仅用于分组标签,13px 用于按钮与次级说明。 */
#page-workbench {
  --wb-fs-body: 14px;       /* 对话正文 */
  --wb-fs-secondary: 13px;  /* 次级说明:来源引用、原型标记 */
  --wb-fs-label: 12px;      /* 侧栏分组标签 */
  --wb-fs-btn: 13px;        /* 按钮文字 */
  --wb-lh-body: 1.75;       /* 正文行高 */
  --wb-control-h: 30px;     /* 小控件最小高度:胶囊 / 评分 / 重新生成 */
  --wb-action-h: 38px;      /* 操作按钮最小高度:下拉菜单项 */
  --wb-chat-max: 1000px;    /* 对话内容列最大宽度:消息区与回底按钮共用同一基准 */
}

/* ---------- 聊天容器基础 ---------- */
/* 关键:main 是 #wbLayout(flex row)的子项,默认 min-width:auto 会被长内容
   (代码块/宽表格的 min-content)撑宽,导致聊天区整体溢出视口。
   设 min-width:0 后 main 可收缩,超宽内容由内部 overflow 处理。 */
#wbLayout main {
  min-width: 0;
}

/* 对话内容容器:大屏限宽居中(仅消息区,顶部栏/输入区保持全宽)。
   超过 1000px 时消息不再无限拉宽,AI 头像与用户头像间距受控;小屏不受影响。
   消息间距由本容器 gap 承担(原 space-y-5)。 */
.wb-chat-inner {
  max-width: var(--wb-chat-max);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;   /* 底部留白:给浮动回底按钮让位,避免遮挡最后一条消息 */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 聊天区包裹容器:相对定位,容纳浮动回底按钮 */
.wb-chat-wrap {
  position: relative;
  min-height: 0;
}

/* 滚动容器占满包裹层高度(h-full 类不在编译产物中,必须显式声明,
   否则 aiChatBox 会随内容增高、永不产生滚动溢出) */
.wb-chat-wrap #aiChatBox {
  height: 100%;
}

/* 回底按钮定位层:与对话内容列同宽居中。
   按钮原本锚在 .wb-chat-wrap(全宽)右下角,宽屏时对话内容限宽居中,
   按钮便被甩到视口边缘、脱离消息区;现改为锚定内容列右缘,随对话区走。 */
.wb-chat-overlay {
  position: absolute;
  inset: 0;
  max-width: var(--wb-chat-max);
  margin-left: auto;
  margin-right: auto;
  pointer-events: none; /* 不拦截聊天区的滚动与点击 */
}

/* 一键回到底部按钮:浮动于对话内容列右下,默认隐藏(距底 >100px 时显示) */
.wb-scroll-bottom {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 10;
  pointer-events: auto; /* 父层已禁用事件,按钮自身需恢复可点击 */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(37, 99, 235, 0.9);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.wb-scroll-bottom.wb-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.wb-scroll-bottom:hover {
  background: rgba(37, 99, 235, 1);
}

/* ---------- 顶部栏 ---------- */
/* 标题:移动端缩小并超长省略,不挤压右侧按钮区 */
.wb-topbar-title {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .wb-topbar-title {
    font-size: 16px;
  }
}

/* 标题前的强调圆点 */
.wb-topbar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2563eb;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

/* 视角/快捷胶囊按钮:未选中灰底,选中高亮(移动端横向滚动时可滑动查看) */
.wb-pill {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: var(--wb-fs-btn);
  line-height: 1.4;
  min-height: var(--wb-control-h);
  display: inline-flex;
  align-items: center;
  background: rgba(51, 65, 85, 0.55);
  color: #cbd5e1;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.wb-pill:hover {
  background: rgba(71, 85, 105, 0.7);
  color: #e2e8f0;
}

.wb-pill.is-active {
  background: rgba(37, 99, 235, 0.28);
  border-color: rgba(37, 99, 235, 0.65);
  color: #93c5fd;
  font-weight: 500;
}

/* ---------- 消息行(头像 + 内容列) ----------
   宽度策略:不用 fit-content + margin-left:auto(移动端 Safari/WebView 下
   会被内容 max-content 撑宽并推出屏幕),改用全宽 flex 容器 + justify-content
   对齐,内容列由 max-width 硬约束,任何浏览器都不会溢出。 */
.wb-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  justify-content: flex-start;
}

/* 用户消息:row-reverse 主轴起点在右侧 → flex-start 即右对齐(头像在右缘) */
.wb-msg-user {
  flex-direction: row-reverse;
}

/* 内容列:按内容收缩(flex:0 1 auto),硬上限防撑破 */
.wb-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 85%;
}

/* ---------- 气泡 ---------- */
.wb-bubble {
  border-radius: 12px;
  padding: 0.875rem 1rem;
  font-size: var(--wb-fs-body);
  line-height: var(--wb-lh-body);
}

.wb-bubble-user {
  background: rgba(37, 99, 235, 0.15);   /* 原 bg-accent/15 */
  /* 长内容兜底强制换行,杜绝文本把气泡/消息行撑宽 */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.wb-bubble-assistant {
  background: #142135;                    /* 原 bg-panelBg */
}

/* ---------- 头像 ---------- */
.wb-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}

.wb-avatar-user {
  background: #ddd;
}

.wb-avatar-assistant {
  background: #1b4b91;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* ---------- 内容列下段操作区(评分 / 重新生成) ----------
   横向布局:评分行靠左、重新生成按钮靠右,同一行显示;窄屏自动换行 */
.wb-footer {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed rgba(148, 163, 184, 0.28);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
}

/* ---------- 评分行 ---------- */
.wb-rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--wb-fs-secondary);
}

/* 评分/重新生成按钮统一小尺寸:28px 高、一致内边距与圆角 */
.wb-rating-btn,
.wb-regen-btn {
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: var(--wb-fs-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
}

.wb-rating-btn {
  min-width: 28px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(51, 65, 85, 0.5);
  color: #cbd5e1;
}

.wb-rating-btn:hover {
  border-color: rgba(148, 163, 184, 0.6);
}

/* 评分选中态:单选互斥,只亮一侧 */
.wb-rating-btn.is-chosen {
  background: rgba(37, 99, 235, 0.35);
  border-color: #2563eb;
  color: #93c5fd;
}

/* ---------- 系统提示(欢迎语) ---------- */
.wb-welcome {
  max-width: 88%;
}

.wb-welcome-title {
  color: #7dd3fc;                          /* 原 text-sky-300 */
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
}

.wb-welcome-body {
  font-size: var(--wb-fs-body);
  line-height: var(--wb-lh-body);
}

/* ---------- 重新生成按钮 ---------- */
.wb-regen-row {
  margin-top: 0;   /* 横向布局下不再需要上方间距,由 footer 的 gap 承担 */
  margin-left: auto; /* 吸收剩余空间:复制 / 评分靠左,重新生成单独靠右 */
}

.wb-regen-btn {
  border: 1px solid rgba(147, 197, 253, 0.55);
  color: #93c5fd;
  background: rgba(37, 99, 235, 0.18);
    line-height: 0.9;
}

.wb-regen-btn:hover {
  background: rgba(37, 99, 235, 0.3);
}

/* ---------- 单条回复复制按钮 ---------- */
.wb-copy-row {
  margin-top: 0;   /* 横向布局下由 footer 的 gap 承担间距 */
  display: flex;
  align-items: center;
  gap: 8px;
}

.wb-copy-btn {
  min-height: 28px;
  min-width: 28px;   /* M / T 单字符:正方块,与评分图标按钮对齐 */
  padding: 4px 8px;
  border-radius: 6px;
  font-size: var(--wb-fs-btn);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
}

.wb-copy-btn:hover {
  background: rgba(148, 163, 184, 0.18);
}

/* ---------- 自定义悬浮说明(替代原生 title) ----------
   跟随按钮的气泡:鼠标移入 / 键盘聚焦消息底部操作按钮(M/T 复制、评分、
   重新生成)时显示,挂于 body(fixed 定位),避免被聊天滚动容器裁剪。 */
.wb-tip {
  position: fixed;
  z-index: 2000;
  max-width: 240px;
  padding: 6px 10px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.5);
  pointer-events: none; /* 不拦截鼠标,避免移入气泡时闪烁 */
  white-space: normal;
}

/* 小尾巴:默认在气泡底部指向按钮(气泡位于按钮上方)。
   用 ::before(边框色) + ::after(填充色) 两层三角形叠出带边框的箭头,
   外圈比内芯大 1px,露出 1px 边框;--tip-tail 对齐按钮中心。 */
.wb-tip::before,
.wb-tip::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  left: var(--tip-tail, 50%);
  transform: translateX(-50%);
}

/* 外圈:边框色(略大) */
.wb-tip::before {
  top: 100%;
  border: 6px solid transparent;
  border-top-color: rgba(148, 163, 184, 0.3);
}

/* 内芯:填充色(略小,露出 1px 边框) */
.wb-tip::after {
  top: 100%;
  border: 5px solid transparent;
  border-top-color: #0f172a;
}

/* 气泡位于按钮下方时:尾巴翻到顶部、指向上方 */
.wb-tip.wb-tip-below::before {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: rgba(148, 163, 184, 0.3);
}

.wb-tip.wb-tip-below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #0f172a;
}

/* ---------- toast 轻提示 ---------- */
.wb-toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 999;
  background: #1e293b;
  color: #e2e8f0;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: var(--wb-fs-secondary);
  opacity: 0;
  transition: opacity 0.25s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ---------- 聊天区正文基准 ----------
   此前用户气泡继承 body 16px、AI 回复 .md-render 13px,同一段对话
   两种字号。这里给聊天容器定 14px 基准,并在工作台局部把 .md-render
   提到 14px(全局 13px 保留给其它页面,不受影响)。 */
#aiChatBox {
  font-size: var(--wb-fs-body);
  line-height: var(--wb-lh-body);
}

#aiChatBox .md-render {
  font-size: var(--wb-fs-body);
  line-height: var(--wb-lh-body);
}

/* ---------- 次级说明文字 ---------- */
/* 来源引用行:JS 内联了 font-size:12px,需 !important 才能覆盖 */
#aiChatBox [data-sources-row] {
  font-size: var(--wb-fs-secondary) !important;
  line-height: 1.6;
}

/* 气泡内的"原型回复 / 模型异常"标记 */
#aiChatBox .wb-bubble > .text-slate-400 {
  font-size: var(--wb-fs-secondary);
}

/* ---------- 快捷提问按钮(quickBar) ----------
   由 JS 生成,原为 text-xs + py-1(高度约 24px)。这里与顶部胶囊
   统一尺寸:直接用选择器覆盖,不改动 JS,也不需要重建 Tailwind。 */
#quickBar button {
  font-size: var(--wb-fs-btn);
  line-height: 1.4;
  padding: 6px 12px;
  min-height: var(--wb-control-h);
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
}

/* ---------- 侧栏列表项 ----------
   .menu-item 原为 text-sm(14px),与对话正文同级:在仅 240px 宽的侧栏里
   既拥挤又层级倒挂(导航不该与正文同等权重)。这里降为 13px。 */
#wbSidebar .menu-item {
  font-size: var(--wb-fs-secondary);
  line-height: 1.5;
  padding: 7px 12px;
}

/* 会话项为"标题 + 副标题"双行结构,行距收紧以免条目过高 */
#historyList .menu-item > div:first-child {
  line-height: 1.45;
}

/* ---------- 历史会话:鼠标悬停反馈 ----------
   .menu-item 自带 hover:bg-slate-700/40,在 #101c2e 侧栏底色上对比过弱,
   几乎看不出反馈。这里加深悬停底色,并补左侧指示条与标题提亮,
   让"可点击"更明确;当前会话保持指示条常亮。 */
#historyList .menu-item {
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

#historyList .menu-item:hover {
  background: rgba(71, 85, 105, 0.55);
}

/* 当前会话:悬停时加深蓝色,而不是转灰,否则看起来像"取消选中" */
#historyList .menu-item.active:hover {
  background: rgba(37, 99, 235, 0.32);
}

/* 标题:悬停提亮(当前会话保持 sky-300,不参与) */
#historyList .menu-item:not(.active):hover > div:first-child {
  color: #e2e8f0;
}

/* 副标题:悬停时从 slate-500 提亮一档 */
#historyList .menu-item:hover .text-slate-500 {
  color: #94a3b8;
}

/* 左侧指示条:悬停时从中间展开;当前会话常亮 */
#historyList .menu-item::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: #3b82f6;
  transform: translateY(-50%);
  transition: height 0.15s ease;
}

#historyList .menu-item:hover::before,
#historyList .menu-item.active::before {
  height: 60%;
}

/* 触摸设备没有 hover,补一个按下反馈,避免点击毫无响应 */
@media (hover: none) {
  #historyList .menu-item:active {
    background: rgba(71, 85, 105, 0.55);
  }
}

/* ---------- 侧栏分组标签 ---------- */
.wb-group-title {
  font-size: var(--wb-fs-label);
  font-weight: 500;
  margin: 14px 0 6px;
  padding-left: 2px;
}

/* ---------- 顶部快捷操作下拉菜单 ----------
   原右侧面板 / 移动端 ActionSheet 合并为顶部栏右上角下拉,全尺寸统一入口。
   样式全部走自定义类:tailwind 构建仅扫描 official.blade.php,
   新增 tailwind 工具类不会被编译进 official.css,故此处不依赖工具类。 */
.wb-dropdown {
  position: relative;
}

.wb-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--wb-control-h);
  padding: 0 8px;
  font-size: var(--wb-fs-btn);
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.wb-dropdown-toggle:hover {
  background: rgba(148, 163, 184, 0.18);
  color: #fff;
}

.wb-dropdown-toggle[aria-expanded='true'] {
  background: rgba(37, 99, 235, 0.25);
  color: #fff;
}

.wb-dd-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.wb-dd-caret {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.wb-dropdown-toggle[aria-expanded='true'] .wb-dd-caret {
  transform: rotate(180deg);
}

/* 窄屏只留图标,避免与左侧标题、视角胶囊争抢空间 */
.wb-dd-label {
  display: none;
}

@media (min-width: 640px) {
  .wb-dd-label {
    display: inline;
  }
}

.wb-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 168px;
  padding: 6px;
  background: #101c2e;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.45);
  /* 收起态不可见且不拦截点击 */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.wb-dropdown-menu.wb-show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.wb-dropdown-item {
  display: block;
  width: 100%;
  min-height: var(--wb-action-h);
  padding: 8px 10px;
  font-size: var(--wb-fs-btn);
  color: #e2e8f0;
  text-align: left;
  background: transparent;
  border-radius: 6px;
}

.wb-dropdown-item:hover {
  background: rgba(148, 163, 184, 0.18);
}

.wb-dropdown-item-danger {
  color: #fca5a5;
}

.wb-dropdown-item-danger:hover {
  background: rgba(153, 27, 27, 0.45);
}

.wb-dropdown-sep {
  height: 1px;
  margin: 4px 2px;
  background: rgba(148, 163, 184, 0.22);
}

/* 发送按钮忙状态:AI 思考/输出期间禁用并显示加载动画 */
#wbSendBtn.wb-send-busy {
  pointer-events: none;
  opacity: 0.75;
}

/* 加载动画:旋转圆环 */
.wb-send-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: wb-spin 0.8s linear infinite;
  vertical-align: middle;
}

@keyframes wb-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- 输入框 ---------- */
.wb-input {
  font-size: 14px;
  line-height: 1.6;
}

.wb-input::placeholder {
  color: #64748b;   /* 与输入文字同字号(继承),仅用颜色区分语义,避免聚焦跳变 */
}

/* 输入区网格布局(web端默认):
   第一行:输入框通栏;第二行:快捷栏(左) + 发送按钮(右) */
.wb-input-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "input input"
    "quick send";
  gap: 10px 12px;
  align-items: end;
  /* 内容列与对话区对齐:消息区是「20px 内边距 + 限宽居中」,
     这里让左右内边距随容器变宽而增大,得到同样的限宽居中效果,
     同时外层仍全宽,顶部分隔线保持通栏。
     窄屏时 calc 为负,由 max() 回落到 20px,等同原 p-5。 */
  padding-left: max(1.25rem, calc((100% - var(--wb-chat-max)) / 2));
  padding-right: max(1.25rem, calc((100% - var(--wb-chat-max)) / 2));
}

.wb-input-area #aiInput {
  grid-area: input;
  width: 100%;
}

.wb-input-area #quickBar {
  grid-area: quick;
  min-width: 0;
}

.wb-input-area #wbSendBtn {
  grid-area: send;
  height: 30px;
  padding: 0 22px;
  align-self: end;
}

/* 自动增高输入框:JS 控制 height,这里只兜底滚动行为 */
.wb-input-grow {
  overflow-y: hidden;
}