/* chat.css — 消息气泡、输入框、列表项 */

/* ---- 消息滚动区 ---- */
.msg-list {
  flex: 1; overflow-y: auto; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.msg-list::-webkit-scrollbar { width: 4px; }

/* ---- 消息行 ---- */
.msg-row {
  display: flex; gap: 8px; align-items: flex-start;
  animation: msgIn .15s ease;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msg-row.mine { flex-direction: row-reverse; align-items: flex-start; }
.msg-row .msg-avatar { flex-shrink: 0; }

/* 跳转高亮 */
.msg-row.flash .bubble {
  animation: msgFlash 1.5s ease;
}
@keyframes msgFlash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  20%      { box-shadow: 0 0 0 3px rgba(74,144,226,.45); }
}

/* ---- 气泡 ---- */
.msg-content { max-width: 65%; display: flex; flex-direction: column; gap: 2px; }
.msg-row.mine .msg-content { align-items: flex-end; }
.bubble {
  padding: 9px 13px; border-radius: 12px;
  background: var(--c-bubble-other); color: var(--c-text);
  word-break: break-word; white-space: pre-wrap; line-height: 1.55;
  position: relative; cursor: pointer; user-select: text;
  transition: filter var(--trans);
}
.bubble:hover { filter: brightness(1.08); }
.msg-row.mine .bubble {
  background: var(--c-bubble-me); color: #fff;
  border-bottom-right-radius: 4px;
}
.msg-row:not(.mine) .bubble { border-bottom-left-radius: 4px; }

/* 钉钉风格：名字 + 时间 同一行紧贴头像顶部 */
.msg-meta-line {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 4px; padding: 0 2px;
}
.msg-name {
  font-size: 13px; color: var(--c-text2); font-weight: 500;
}
.msg-time-inline { font-size: 11px; color: var(--c-text3); }
.msg-time { font-size: 11px; color: var(--c-text3); padding: 0 2px; margin-top: 2px; }
/* 对方消息连续时的时间，左对齐 */
.msg-row:not(.mine) .msg-time { text-align: left; }

/* ---- 引用块（气泡内顶部，紧凑单行省略） ---- */
.msg-quote {
  background: rgba(0,0,0,.06);
  border-left: 3px solid var(--c-text3);
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 5px;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-quote:hover { background: rgba(0,0,0,.1); }
.msg-row.mine .msg-quote {
  background: rgba(255,255,255,.18);
  border-left-color: rgba(255,255,255,.6);
  color: rgba(255,255,255,.9);
}
.msg-row.mine .msg-quote:hover { background: rgba(255,255,255,.28); }
.msg-quote-name {
  color: var(--c-primary);
  font-weight: 500;
  margin-right: 2px;
}
.msg-row.mine .msg-quote-name { color: #fff; }

/* 已撤回提示 */
.bubble.recalled {
  background: transparent; border: 1px dashed var(--c-border);
  color: var(--c-text3); font-style: italic; cursor: default;
  filter: none;
}

/* 图片消息 */
.msg-img {
  max-width: 240px; max-height: 300px; border-radius: 8px;
  cursor: zoom-in; display: block;
}

/* 附件列表 */
.msg-attachments { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.attach-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--c-bg4); border: 1px solid var(--c-border);
  border-radius: 5px; padding: 4px 10px; font-size: 12px;
  color: var(--c-primary); text-decoration: none; max-width: 220px;
}
.attach-chip:hover { background: var(--c-border); }
.attach-chip span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 系统消息（居中小字） */
.msg-system {
  text-align: center; color: var(--c-text3); font-size: 12px;
  padding: 2px 0;
}

/* ---- 输入框区域 ---- */
.chat-input-area {
  background: var(--c-bg2);
  padding: 0 14px 8px; display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
/* 拖拽分割线 */
.resize-handle {
  height: 6px; cursor: ns-resize;
  background: transparent; position: relative;
  flex-shrink: 0;
}
.resize-handle::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 3px; border-radius: 2px;
  background: var(--c-border);
  transition: background var(--trans);
}
.resize-handle:hover::after { background: var(--c-primary); }

/* @ 提及候选浮层 */
.mention-panel {
  position: absolute; left: 14px; right: 14px;
  bottom: calc(100% + 4px);
  max-height: 220px; overflow-y: auto;
  background: var(--c-bg2); border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 -6px 20px rgba(0,0,0,.18);
  z-index: 50;
}
.mention-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer;
  transition: background var(--trans);
}
.mention-item:hover, .mention-item.active { background: var(--c-bg3); }

/* @ 提及高亮（消息气泡内） */
.mention-tag {
  color: var(--c-primary); font-weight: 600;
  background: rgba(99,102,241,.12);
  padding: 0 3px; border-radius: 3px;
}
.msg-row.mine .mention-tag {
  color: #fff; background: rgba(255,255,255,.22);
}
.input-toolbar {
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
}
.tool-btn {
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  background: transparent; color: var(--c-text2); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--trans);
}
.tool-btn:hover { background: var(--c-bg3); color: var(--c-text); }
.file-preview-bar {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.file-chip {
  display: flex; align-items: center; gap: 5px; max-width: 160px;
  background: var(--c-bg4); border-radius: 4px; padding: 3px 8px;
  font-size: 12px;
}
.file-chip span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip button {
  background: transparent; color: var(--c-text3); font-size: 14px; padding: 0 2px;
}
.input-row {
  display: flex; gap: 8px; align-items: flex-end;
}
/* 底部栏：工具按钮左 + 发送右 */
.input-bottom-bar {
  display: flex; align-items: center; justify-content: space-between;
}
.msg-textarea {
  flex: 1; background: var(--c-bg4); color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  padding: 9px 12px; resize: none; max-height: 120px;
  line-height: 1.5; transition: border-color var(--trans);
}
.msg-textarea:focus { border-color: var(--c-primary); }
.msg-textarea::placeholder { color: var(--c-text3); }

/* ---- 富文本编辑器 ---- */
.msg-editor {
  background: var(--c-bg4); color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  padding: 10px 12px; height: 72px; overflow-y: auto;
  line-height: 1.6; outline: none;
  white-space: pre-wrap; word-break: break-word;
  transition: border-color var(--trans);
}
.msg-editor:focus { border-color: var(--c-primary); }
.msg-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--c-text3); pointer-events: none;
}
.msg-editor .seg-mention {
  display: inline-block;
  color: var(--c-primary); font-weight: 600;
  background: rgba(99,102,241,.12);
  padding: 0 4px; border-radius: 3px;
  user-select: all;
}
.msg-editor .seg-emoji {
  display: inline-block; font-size: 1.1em;
}
.msg-editor .seg-link { color: var(--c-primary); text-decoration: underline; }
.msg-editor .seg-code,
.msg-editor .seg-codeblock code {
  background: rgba(99,102,241,.12); padding: 2px 6px; border-radius: 3px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em;
  border: 1px solid rgba(99,102,241,.2);
}
.msg-editor .seg-codeblock {
  display: block;
  background: rgba(30,30,50,.45); padding: 10px 12px; border-radius: var(--radius-sm);
  margin: 6px 0; overflow-x: auto;
  border: 1px solid var(--c-border);
  white-space: pre-wrap;
}
.msg-editor .seg-codeblock code { background: transparent; padding: 0; border: none; }
.msg-editor .seg-quote {
  border-left: 3px solid var(--c-primary);
  padding: 2px 10px; margin: 6px 0;
  color: var(--c-text2); background: rgba(99,102,241,.06);
}
.msg-editor .seg-heading { font-weight: 700; margin: 8px 0 4px; border-bottom: 1px solid var(--c-border); padding-bottom: 2px; }
.msg-editor h1.seg-heading { font-size: 1.5em; }
.msg-editor h2.seg-heading { font-size: 1.3em; }
.msg-editor h3.seg-heading { font-size: 1.15em; }
.msg-editor .seg-divider { display: block; border: none; border-top: 2px solid var(--c-primary); opacity: .5; margin: 8px 0; height: 0; }
.msg-editor .seg-list { padding-left: 20px; margin: 4px 0; }

/* 消息气泡中的 segment 样式（渲染后的 HTML）*/
.bubble .seg-mention {
  color: var(--c-primary); font-weight: 600;
  background: rgba(99,102,241,.12);
  padding: 0 3px; border-radius: 3px;
}
.msg-row.mine .bubble .seg-mention {
  color: #fff; background: rgba(255,255,255,.22);
}
.bubble .seg-link { color: var(--c-primary); text-decoration: underline; word-break: break-all; }
.msg-row.mine .bubble .seg-link { color: #fff; text-decoration: underline; }
.bubble .seg-code {
  background: rgba(0,0,0,.16); padding: 1px 5px; border-radius: 3px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92em;
}
.bubble .seg-codeblock {
  background: rgba(0,0,0,.18); padding: 8px 10px; border-radius: 6px;
  margin: 6px 0; overflow-x: auto; font-size: .92em;
}
.bubble .seg-codeblock code { background: transparent; padding: 0; }
.bubble .seg-quote {
  border-left: 3px solid currentColor;
  padding: 2px 10px; margin: 6px 0; opacity: .9;
}
.bubble .seg-heading { font-weight: 700; margin: 4px 0; }
.bubble h1.seg-heading { font-size: 1.2em; }
.bubble h2.seg-heading { font-size: 1.1em; }
.bubble h3.seg-heading { font-size: 1.0em; }
.bubble .seg-divider { display: block; border: none; border-top: 1px dashed currentColor; opacity: .5; margin: 8px 0; height: 0; }
.bubble .seg-list { padding-left: 22px; margin: 4px 0; }
.bubble .seg-emoji { display: inline-block; }

/* ---- 工具栏小件 ---- */
.toolbar-sep { width: 1px; height: 18px; background: var(--c-border); margin: 0 4px; }

/* ---- 未读 @ 我 预览标记 ---- */
.mention-flag { color: var(--c-accent, #f43f5e); font-weight: 600; margin-right: 2px; }

/* ---- Emoji 弹窗 ---- */
.emoji-popup {
  position: fixed; z-index: 200;
  display: grid; grid-template-columns: repeat(8, 28px); gap: 2px;
  padding: 8px;
  background: var(--c-bg2); border: 1px solid var(--c-border);
  border-radius: var(--radius-sm); box-shadow: 0 6px 24px rgba(0,0,0,.22);
  max-width: 280px;
}
.emoji-popup.hidden { display: none; }
.emoji-popup .emoji-btn {
  width: 28px; height: 28px; border-radius: 4px;
  background: transparent; border: none; cursor: pointer;
  font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.emoji-popup .emoji-btn:hover { background: var(--c-bg3); }
.send-btn {
  width: 36px; height: 30px; border-radius: var(--radius-sm);
  background: var(--c-primary); color: #fff; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background var(--trans);
}
.send-btn:hover { background: var(--c-primary-h); }
.send-btn:disabled { opacity: .45; pointer-events: none; }

/* 图片灯箱 */
#lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.88);
  display: flex; align-items: center; justify-content: center;
  z-index: 500; cursor: zoom-out;
}
#lightbox.hidden { display: none; }
#lightbox img {
  max-width: 92vw; max-height: 92dvh;
  border-radius: 6px; box-shadow: var(--shadow);
}

/* 在线状态点 */
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-text3); flex-shrink: 0;
}
.status-dot.online { background: var(--c-green); }

/* 分组标题（日期线） */
.date-sep {
  text-align: center; color: var(--c-text3); font-size: 11px;
  position: relative; margin: 4px 0;
}
.date-sep::before, .date-sep::after {
  content: ''; position: absolute; top: 50%;
  width: 30%; height: 1px; background: var(--c-border);
}
.date-sep::before { left: 0; }
.date-sep::after  { right: 0; }

/* 成员列表侧边栏 */
.members-panel {
  width: 220px; flex-shrink: 0; background: var(--c-bg2);
  border-left: 1px solid var(--c-border);
  padding: 14px 0; overflow-y: auto;
  display: none;
}
.members-panel.open { display: flex; flex-direction: column; }
.members-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px 10px; border-bottom: 1px solid var(--c-border);
}
.member-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; cursor: pointer;
}
.member-item:hover { background: var(--c-bg3); }
.member-item .owner-tag {
  display: inline-block; font-size: 10px; color: #fff;
  background: var(--c-primary); padding: 1px 6px; border-radius: 4px;
  margin-left: 4px; vertical-align: middle;
}
.member-del {
  background: transparent; color: var(--c-text3);
  font-size: 16px; line-height: 1; padding: 2px 6px;
  border-radius: 4px; opacity: 0; transition: all var(--trans);
}
.member-item:hover .member-del { opacity: 1; }
.member-del:hover { background: rgba(239,68,68,.15); color: #ef4444; }
@media (max-width: 767px) { .members-panel { display: none !important; } }

/* 多选选人列表（建群/邀请） */
.multi-pick-list {
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
}
.multi-pick-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer;
  transition: background var(--trans);
}
.multi-pick-item:hover { background: var(--c-bg3); }
.multi-pick-item.selected { background: var(--c-bg4); }
.multi-pick-item .check-box {
  width: 18px; height: 18px; border-radius: 4px;
  border: 1.5px solid var(--c-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #fff; flex-shrink: 0;
}
.multi-pick-item.selected .check-box {
  background: var(--c-primary); border-color: var(--c-primary);
}

/* 已选 chips */
.picked-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  min-height: 24px; margin-bottom: 8px;
}
.picked-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--c-primary); color: #fff;
  padding: 3px 8px; border-radius: 12px;
  font-size: 12px; cursor: pointer;
  transition: filter var(--trans);
}
.picked-chip:hover { filter: brightness(.92); }
.picked-chip .x { opacity: .8; font-size: 14px; line-height: 1; }

/* 联系人列表 */
.contacts-count {
  padding: 8px 16px; font-size: 12px; color: var(--c-text3);
  border-bottom: 1px solid var(--c-border);
}
.contact-item .room-preview { color: var(--c-text3); }

/* ---- 引用回复预览条（输入区上方） ---- */
.reply-preview {
  display: flex; align-items: stretch; gap: 8px;
  background: var(--c-bg3);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 0 12px 6px 12px;
  position: relative;
}
.reply-preview-bar {
  width: 3px; background: var(--c-primary); border-radius: 2px; flex-shrink: 0;
}
.reply-preview-body { flex: 1; min-width: 0; overflow: hidden; }
.reply-preview-name {
  font-size: 12px; color: var(--c-primary); font-weight: 500;
  margin-bottom: 2px;
}
.reply-preview-text {
  font-size: 12px; color: var(--c-text2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reply-preview-close {
  background: transparent; border: 0; color: var(--c-text3);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px;
  align-self: center; transition: color var(--trans);
}
.reply-preview-close:hover { color: var(--c-danger); }

/* ---- 附件卡片（钉钉风） ---- */
.msg-attachments { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.attach-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--c-bg3); border: 1px solid var(--c-border);
  border-radius: 8px; padding: 10px 12px;
  cursor: pointer; transition: all var(--trans);
  text-decoration: none; color: inherit;
  max-width: 360px; min-width: 240px;
  white-space: normal;
  line-height: 1.4;
}
.attach-card:hover {
  border-color: var(--c-primary);
  background: rgba(79, 140, 255, .08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.attach-icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  font-size: 11px; font-weight: 700; color: #fff;
  letter-spacing: .3px; user-select: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
}
.attach-info { flex: 1 1 auto; min-width: 0; }
.attach-name {
  font-size: 13px; font-weight: 500; color: var(--c-text1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 3px;
}
.attach-meta {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--c-text3);
}
.attach-dot { color: var(--c-border); }
.attach-actions {
  flex: 0 0 auto;
  display: flex; gap: 6px;
  opacity: 0; transition: opacity var(--trans);
}
.attach-card:hover .attach-actions { opacity: 1; }
.attach-btn {
  display: inline-flex; align-items: center;
  background: rgba(79, 140, 255, .15); color: var(--c-primary);
  border: 0; padding: 4px 10px; border-radius: 4px;
  font-size: 12px; cursor: pointer; transition: all var(--trans);
  font-family: inherit;
  white-space: nowrap;
}
.attach-btn:hover { background: var(--c-primary); color: #fff; }
.attach-btn-preview { background: rgba(100, 116, 139, .2); color: var(--c-text2); }
.attach-btn-preview:hover { background: var(--c-text2); color: var(--c-bg1); }

/* 手机端：操作按钮常驻（没有 hover） */
@media (max-width: 768px) {
  .attach-card { max-width: 100%; min-width: 0; }
  .attach-actions { opacity: 1; }
}

/* ---- Markdown 预览弹层 ---- */
.md-modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.md-modal.open { display: block; }
.md-modal-mask { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.md-modal-card {
  position: relative; margin: 5vh auto 0; width: min(820px, 92vw); max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--c-bg2); color: var(--c-text1);
  border: 1px solid var(--c-border); border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
  overflow: hidden;
}
.md-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--c-border);
  background: var(--c-bg3);
}
.md-modal-title { font-weight: 600; font-size: 14px; }
.md-modal-name { margin-left: 4px; }
.md-modal-actions { display: flex; align-items: center; gap: 8px; }
.md-modal-dl {
  font-size: 12px; padding: 4px 10px; border-radius: 6px;
  background: var(--c-primary); color: #fff; text-decoration: none;
}
.md-modal-dl:hover { opacity: .9; }
.md-modal-close {
  background: transparent; border: 0; color: var(--c-text2);
  font-size: 18px; cursor: pointer; padding: 0 4px;
}
.md-modal-close:hover { color: var(--c-danger); }
.md-modal-body {
  flex: 1 1 auto; overflow: auto; padding: 18px 22px;
  background: var(--c-bg1);
}
.md-loading, .md-error { padding: 24px; text-align: center; color: var(--c-text3); }
.md-error { color: var(--c-danger); }

/* ---- Markdown 文本样式 ---- */
.md-content { line-height: 1.7; font-size: 14px; word-break: break-word; }
.md-content .md-h { margin: 1em 0 .6em; font-weight: 700; line-height: 1.3; }
.md-content h1.md-h { font-size: 1.7em; border-bottom: 1px solid var(--c-border); padding-bottom: .3em; }
.md-content h2.md-h { font-size: 1.4em; border-bottom: 1px solid var(--c-border); padding-bottom: .25em; }
.md-content h3.md-h { font-size: 1.2em; }
.md-content h4.md-h { font-size: 1.05em; }
.md-content h5.md-h, .md-content h6.md-h { font-size: 1em; color: var(--c-text2); }
.md-content .md-p { margin: .6em 0; }
.md-content .md-hr { border: 0; border-top: 1px solid var(--c-border); margin: 1.2em 0; }
.md-content .md-ul, .md-content .md-ol { padding-left: 1.6em; margin: .5em 0; }
.md-content .md-ul li, .md-content .md-ol li { margin: .25em 0; }
.md-content .md-quote {
  border-left: 3px solid var(--c-primary); padding: .2em 0 .2em 12px;
  background: var(--c-bg3); margin: .8em 0; color: var(--c-text2);
}
.md-content .md-quote p { margin: .3em 0; }
.md-content .md-ic {
  background: var(--c-bg3); padding: 1px 6px; border-radius: 4px;
  font-family: ui-monospace, Consolas, monospace; font-size: .92em;
  color: var(--c-primary);
}
.md-content .md-pre {
  background: var(--c-bg3); border: 1px solid var(--c-border);
  border-radius: 6px; padding: 10px 12px; overflow: auto;
  margin: .8em 0;
}
.md-content .md-pre code {
  font-family: ui-monospace, Consolas, monospace; font-size: 13px;
  white-space: pre; color: var(--c-text1);
}
.md-content a { color: var(--c-primary); text-decoration: underline; }
.md-content a:hover { opacity: .85; }
.md-content .md-img { max-width: 100%; border-radius: 4px; margin: .4em 0; }
.md-content .md-table {
  border-collapse: collapse; margin: .8em 0; width: 100%;
  font-size: 13px;
}
.md-content .md-table th, .md-content .md-table td {
  border: 1px solid var(--c-border); padding: 6px 10px;
}
.md-content .md-table thead { background: var(--c-bg3); }
.md-content strong { font-weight: 700; color: var(--c-text1); }
.md-content del { color: var(--c-text3); }

/* ---- HTML 预览 iframe ---- */
.html-preview-frame {
  width: 100%; height: 100%; min-height: 50vh;
  border: none; background: #fff;
  border-radius: 0 0 10px 10px;
}