/* ================= 钉钉风格聊天界面（覆盖层） =================
   统一作用于：模型聊天 / 群聊 / 私聊
   说明：本文件在 style.css 之后加载，仅覆盖视觉样式，不改动任何结构或逻辑 */

/* ---------- 消息区底色 ---------- */
.chat-messages {
  background: #F5F6F8;
}

/* ---------- 头像：圆形、无阴影 ---------- */
.msg-item .msg-avatar,
.msg-row .msg-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 14px;
  box-shadow: none;
}

/* ---------- 对方气泡：白底、细边、统一圆角 ---------- */
.msg-item.msg-left .msg-bubble,
.msg-row.ai .msg-bubble {
  background: #FFFFFF;
  color: #1A1A1A;
  border: 1px solid #E7E9ED;
  border-radius: 10px;
  box-shadow: none;
}

/* ---------- 自己气泡：钉钉浅蓝、深色文字 ---------- */
.msg-item.msg-right .msg-bubble,
.msg-row.user .msg-bubble {
  background: #D2E7FC;
  color: #1A1A1A;
  border: none;
  border-radius: 10px;
  box-shadow: none;
}

.msg-item .msg-bubble,
.msg-row .msg-bubble {
  padding: 9px 12px;
  font-size: 15px;
  line-height: 1.5;
}

/* 气泡内链接、代码在浅色底上保持可读 */
.msg-item.msg-right .msg-bubble a,
.msg-row.user .msg-bubble a {
  color: #1E6FFF;
}

/* ---------- 昵称与时间：更接近钉钉的小灰字 ---------- */
.msg-sender-name {
  font-size: 12px;
  color: #8A9099;
  margin-bottom: 4px;
}

.msg-time-row {
  font-size: 11px;
  color: #B7BCC4;
}

/* ---------- 系统消息 ---------- */
.msg-system span {
  background: rgba(0, 0, 0, 0.05);
  color: #8A9099;
}

/* ---------- 群聊 / 私聊输入区：胶囊输入框 ---------- */
.im-chat-input-bar {
  background: #F5F6F8;
  border-top: none;
  padding: 6px 12px 8px;
}

.im-chat-input-wrap {
  background: #FFFFFF;
  border: 1px solid #E7E9ED;
  border-radius: 22px;
  margin: 0 0 6px;
  padding: 8px 12px;
  min-height: 40px;
  border-bottom: 1px solid #E7E9ED;
}

/* ---------- 钉钉工具栏（输入框下方一排） ---------- */
.im-chat-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 2px;
}

.im-tool-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 17px;
  line-height: 1;
  color: #5A6270;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
  transition: background 0.15s;
}

.im-tool-btn:active {
  background: #EBEEF2;
}

.im-tool-btn.im-chat-emoji-btn,
.im-tool-btn.im-chat-add-btn {
  width: 32px;
  height: 32px;
  font-size: 18px;
}

.im-chat-toolbar .im-chat-send-btn {
  margin-left: auto;
}

.im-chat-input-wrap:focus-within {
  background: #FFFFFF;
  border-color: #C9D6E8;
}

.im-chat-send-btn {
  width: 52px;
  height: 32px;
  border-radius: 16px;
  background: #1E6FFF;
  box-shadow: none;
  font-size: 13px;
}

.im-chat-send-btn:active {
  background: #145EDB;
  transform: scale(0.97);
  box-shadow: none;
}

/* ---------- 模型聊天输入区：同款胶囊 + 工具栏 ---------- */
.chat-input-bar {
  background: #F5F6F8;
  border-top: none;
  padding: 6px 12px 8px;
}

.chat-input-wrap {
  background: #FFFFFF;
  border: 1px solid #E7E9ED;
  border-radius: 22px;
  margin: 0 0 6px;
  padding: 8px 12px;
  min-height: 40px;
}

.chat-input-wrap:focus-within {
  background: #FFFFFF;
  border-color: #C9D6E8;
}

/* + 号按钮在工具栏中的尺寸 */
.im-chat-toolbar .chat-image-btn {
  width: 32px;
  height: 32px;
  font-size: 20px;
  background: transparent;
  border: none;
  color: #5A6270;
}

/* 模型聊天表情面板（内嵌，与群聊一致） */
.chat-emoji-panel {
  margin: 0 -12px -8px;
  background: #FFFFFF;
  border-top: 1px solid #E7E9ED;
  padding: 10px 12px 14px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  max-height: 190px;
  overflow-y: auto;
}

.chat-emoji-panel.hidden {
  display: none;
}

.chat-emoji-item {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}

.chat-emoji-item:active {
  background: #EBEEF2;
}

@media (max-width: 768px) {
  .im-chat-input-bar {
    padding: 6px 10px 8px;
  }
  .chat-input-bar {
    padding: 6px 10px 8px;
  }
  .chat-input-wrap {
    margin: 0 0 6px;
  }
}

/* ================= 修复：输入栏被固定高度挤出 ================= */
/* 模型聊天输入栏原为固定 55px，加工具栏后内容被裁切 */
#chatView .chat-input-bar {
  height: auto;
  min-height: 0;
  flex-shrink: 0;
}

/* 覆盖 #chatView 下的旧胶囊样式，保证与群聊一致 */
#chatView .chat-input-wrap {
  padding: 8px 12px;
  border-radius: 22px;
  gap: 0;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #E7E9ED;
}

#chatView .chat-input {
  height: auto;
  min-height: 24px;
  max-height: 96px;
  line-height: 24px;
  padding: 0;
  overflow-y: auto;
}

/* 消息区允许收缩，避免输入栏变高后内容被裁切 */
#chatView .chat-messages,
#imChatView .chat-messages {
  min-height: 0;
}

/* 输入栏整体不允许被压缩 */
#imChatView .im-chat-input-bar,
#chatView .chat-input-bar {
  flex-shrink: 0;
}

/* 平板断点下的旧 padding / min-height 一并覆盖 */
@media (max-width: 1100px) {
  #chatView .chat-input-bar,
  #imChatView .im-chat-input-bar {
    padding: 6px 12px 8px;
    min-height: 0;
  }
}

@media (max-width: 768px) {
  #chatView .chat-input-bar,
  #imChatView .im-chat-input-bar {
    padding: 6px 10px 8px;
  }
}