/* ============================================================
   聊天面板样式  （服务器路径：public/css/chat.css，由 index.html 的 link 标签引入）
   颜色沿用宿主页面（index.html）<style> 里定义的 CSS 变量（--blueprint 等），
   这个文件本身不重复定义颜色，只要宿主页面已经定义了那些变量就能正常显示。

   用到的变量：--paper-raised(面板底色) --paper(浅底) --rule(分隔线) --blueprint(主蓝) --blueprint-dark(深蓝)
              --blueprint-pale(淡蓝) --ink(文字) --ink-soft(灰字) --accent(橙色强调) --warn(红色提示)

   结构对应 index.html 末尾的聊天面板 HTML 和 public/js/chat.js 动态生成的元素：
     .chat-panel（整个面板，从屏幕右侧滑出）
       ├ .chat-panel-header   顶部标题栏（返回、标题、"新消息"、关闭）
       ├ .chat-view           三个视图容器，同一时间只显示一个（脚本用 hidden 属性切换）：
       │    会话列表（.chat-conversation-list / .chat-conv-row...）
       │    单个会话（.chat-messages / .chat-bubble... + .chat-compose 输入区）
       │    新消息（.chat-new-view / .chat-target-chip...）
   改类名时要同步改 chat.js 和 index.html 里的 HTML。
   ============================================================ */

/* 聊天面板整体：固定在屏幕右侧、占满高度，宽 400px；默认移出屏幕右侧并隐藏，加 open 类后滑入 */
.chat-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 100vw;
  background: var(--paper-raised);
  box-shadow: -6px 0 28px rgba(0, 0, 0, 0.18);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.25s ease;
}
/* 面板打开状态：移回屏幕内并显示（配合上面的 transition 产生滑入动画） */
.chat-panel.open {
  transform: translateX(0);
  visibility: visible;
}

/* 手机适配（≤480px） */
@media (max-width: 480px) {
  /* 手机上面板占满整个屏幕宽度 */
  .chat-panel { width: 100vw; }
  /* 手机屏幕小：输入框默认只有约 2.5 行，免得挤占消息区（同样可以拖动调整） */
  .chat-compose textarea { height: calc(2.5 * 1.5em + 18px); }
}

/* 面板顶部标题栏：蓝底白字，横向排列；顶部留出手机刘海安全区 */
.chat-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--rule);
  background: var(--blueprint);
  color: #fff;
  flex-shrink: 0;
}
/* "←"返回和"×"关闭按钮：无边框透明底、白色、可点击 */
.chat-back-btn, .chat-close-btn {
  background: none; border: none; color: #fff; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 4px 6px;
}
/* 标题文字：占满剩余宽度，超长时用省略号截断 */
.chat-panel-title {
  flex: 1;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* "+ 新消息"按钮：半透明白底白色细边框 */
.chat-new-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  font-size: 12.5px;
  padding: 5px 10px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
/* 新消息按钮悬停：背景略亮 */
.chat-new-btn:hover { background: rgba(255,255,255,0.25); }

/* 三个视图的通用容器：纵向弹性布局，占满标题栏以下的空间 */
.chat-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* 让内部的滚动容器能正确算高度 */
}

/* ---------- 会话列表 ---------- */
/* 会话列表区域：占满剩余高度，内容多时垂直滚动 */
.chat-conversation-list {
  flex: 1;
  overflow-y: auto;
}
/* 会话列表里的一行：头像 + 文字 + 未读数横向排列，底部分隔线，可点击 */
.chat-conv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
/* 会话行悬停：淡灰底 */
.chat-conv-row:hover { background: rgba(0,0,0,0.03); }
/* 会话头像：38px 淡蓝圆形，里面放名称首字 */
.chat-conv-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--blueprint-pale);
  color: var(--blueprint-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px;
  flex-shrink: 0;
}
/* 头像右侧的文字区：占满剩余宽度，允许收缩（配合省略号） */
.chat-conv-body { flex: 1; min-width: 0; }
/* 名称和时间同一行，左右两端对齐 */
.chat-conv-label-row { display: flex; justify-content: space-between; gap: 8px; }
/* 会话名称：加粗 */
.chat-conv-label { font-weight: 600; font-size: 13.5px; }
/* 最后一条消息的时间：灰色小号等宽字，不收缩 */
.chat-conv-time { font-size: 11px; color: var(--ink-soft); font-family: 'IBM Plex Mono', monospace; flex-shrink: 0; }
/* 最后一条消息预览：灰色单行，超长用省略号 */
.chat-conv-preview {
  font-size: 12.5px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
/* 未读数小圆点：橙底白字胶囊，位于会话行右侧 */
.chat-conv-unread {
  min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--accent); color: #fff;
  font-size: 10.5px; font-family: 'IBM Plex Mono', monospace;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px; flex-shrink: 0;
}
/* 空状态/加载状态的居中灰色提示文字 */
.chat-empty-hint {
  padding: 40px 20px; text-align: center; color: var(--ink-soft); font-size: 13px;
}

/* ---------- 单个会话的消息视图 ---------- */
/* 单个会话的消息区：占满剩余高度，垂直滚动，气泡纵向排列 */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* 一条消息的容器（发送人名 + 气泡 + 时间），最宽占 80% */
.chat-bubble-row { display: flex; flex-direction: column; max-width: 80%; }
/* 我发的消息：整行靠右 */
.chat-bubble-row.mine { align-self: flex-end; align-items: flex-end; }
/* 别人发的消息：整行靠左 */
.chat-bubble-row.theirs { align-self: flex-start; align-items: flex-start; }
/* 别人发的消息上方的发送人姓名：灰色小字 */
.chat-bubble-sender { font-size: 11px; color: var(--ink-soft); margin-bottom: 3px; }
/* 消息气泡通用样式：内边距、字号、保留换行（pre-wrap）、长词自动折行 */
.chat-bubble {
  padding: 8px 12px;
  font-size: 13.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
/* 我的气泡：蓝底白字，右下角圆角小 */
.chat-bubble-row.mine .chat-bubble { background: var(--blueprint); color: #fff; border-radius: 12px 12px 2px 12px; }
/* 别人的气泡：浅底深字，左下角圆角小 */
.chat-bubble-row.theirs .chat-bubble { background: var(--paper); color: var(--ink); border-radius: 12px 12px 12px 2px; }
/* 气泡下方的发送时间：灰色极小号等宽字 */
.chat-bubble-time { font-size: 10px; color: var(--ink-soft); margin-top: 3px; font-family: 'IBM Plex Mono', monospace; }

/* 底部输入区：输入框 + 发送按钮横向排列，顶部分隔线；底部留出手机安全区 */
.chat-compose {
  position: relative;      /* 让顶部的"拖动条"(.chat-compose-resizer)能相对输入区定位 */
  display: flex;
  align-items: flex-end;   /* 输入框变高时，发送按钮贴着底部，不跟着被拉高 */
  gap: 8px;
  padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--rule);
  flex-shrink: 0;
  background: var(--paper-raised);
}
/* 消息输入框：占满剩余宽度；默认约 5 行高；不用浏览器自带的右下角拉伸（改用顶部拖动条，见 .chat-compose-resizer）；
   高度由脚本（chat.js 的 initComposeResizer）在拖动时直接写入 style.height，并记在浏览器里 */
.chat-compose textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--rule);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;                          /* 固定行高，下面的默认高度才能按"行数"算准 */
  height: calc(5 * 1.5em + 18px);            /* 默认高度：5 行文字 + 上下内边距 16px + 上下边框 2px */
  min-height: 56px;                          /* 拖动时最矮不低于这个高度（约 2 行） */
  max-height: 70vh;                          /* 最高不超过屏幕高度的 70%（脚本拖动时还会再限制，保证消息区不被挤没） */
  overflow-y: auto;                          /* 内容超出时输入框内部出现滚动条 */
}
/* 输入框聚焦：去掉默认轮廓，边框变蓝 */
.chat-compose textarea:focus { outline: none; border-color: var(--blueprint); }
/* 发送按钮：蓝底白字，固定 36px 高、贴底，不收缩 */
.chat-compose button {
  background: var(--blueprint); color: #fff; border: none;
  padding: 0 16px; font-size: 13px; cursor: pointer; font-family: inherit;
  flex-shrink: 0;
  height: 36px;
}
/* 输入框顶部的拖动条：盖在输入区上边框上，鼠标移上去变成上下拖动的光标；向上拖 = 输入框变高（见 chat.js 的 initComposeResizer） */
.chat-compose-resizer {
  position: absolute;
  top: -4px; left: 0; right: 0;
  height: 9px;
  cursor: ns-resize;
  z-index: 1;
  touch-action: none;      /* 触屏上拖动时不要触发页面滚动 */
}
/* 鼠标悬停或正在拖动时：显示淡蓝色的条，提示这里可以拖 */
.chat-compose-resizer:hover, .chat-compose-resizer.dragging { background: var(--blueprint-pale); }
/* 发送按钮悬停：深蓝 */
.chat-compose button:hover { background: var(--blueprint-dark); }
/* 发送按钮不可用时：半透明、禁止点击 */
.chat-compose button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- 新消息 / 群发选择器 ---------- */
/* "新消息"视图容器：内边距、纵向排列、内容多时滚动 */
.chat-new-view { padding: 14px 16px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 12px; }
/* 选择器里每一段的小标题（如"按专业群发送"）：灰色小号等宽字 */
.chat-new-section-label { font-size: 11.5px; color: var(--ink-soft); font-family: 'IBM Plex Mono', monospace; }
/* 人员搜索框：满宽、细边框 */
.chat-new-search {
  width: 100%; padding: 8px 10px; border: 1px solid var(--rule);
  font-family: inherit; font-size: 13px; box-sizing: border-box;
}
/* 一组发送对象标签：横向排列，放不下自动换行 */
.chat-new-targets-list { display: flex; flex-wrap: wrap; gap: 6px; }
/* 发送对象标签（专业群/人员）：圆角胶囊，可点击，禁止选中文字 */
.chat-target-chip {
  border: 1px solid var(--rule); padding: 5px 10px; font-size: 12.5px;
  cursor: pointer; user-select: none; border-radius: 14px;
}
/* 已选中的标签：蓝底白字 */
.chat-target-chip.selected { background: var(--blueprint); border-color: var(--blueprint); color: #fff; }
/* 群发内容输入框：满宽、最小高度 80px、可上下拉伸 */
.chat-new-content {
  width: 100%; min-height: 80px; border: 1px solid var(--rule);
  padding: 10px; font-family: inherit; font-size: 13.5px; box-sizing: border-box; resize: vertical;
}
/* 群发"发送"按钮：橙底白字、满宽 */
.chat-new-send-btn {
  background: var(--accent); color: #fff; border: none;
  padding: 10px; font-size: 13.5px; cursor: pointer; font-family: inherit; font-weight: 500;
}
/* 群发按钮发送中不可用：半透明、禁止点击 */
.chat-new-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* 群发错误提示：红色小字 */
.chat-new-error { color: var(--warn); font-size: 12px; }