/* 视觉精修层：在基础样式之上做细节打磨（气泡、列表、头部、输入区、空状态、暗色、移动端）。
   仅调整观感，不改变布局骨架；全部颜色来自 tokens.css 变量。 */

/* ============ 会话列表 ============ */
.list-head { padding: 16px 14px 10px; display: flex; flex-direction: column; gap: 9px; }
.list-title-row h1 { font-size: 20px; letter-spacing: -0.025em; }
.list-title-row .icon-btn { width: 32px; height: 32px; }
.list-filters { gap: 2px; }
.list-filter { height: 27px; padding: 0 9px; font-size: 12.5px; letter-spacing: 0.01em; }
.list-filter.active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 12%, transparent); }
.search-all-link {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
  margin-top: -3px; font-size: 11.5px; color: var(--text-3); transition: color var(--speed);
}
.search-all-link:hover { color: var(--brand); }
.list-scroll { padding: 8px 7px; }
.list-foot { padding: 9px 14px; font-size: 11.5px; color: var(--text-3); }
.list-foot .dot { width: 6px; height: 6px; }

.conversation-item {
  padding: 10px 10px 10px 9px; gap: 11px; border-radius: 13px;
  transition: background var(--speed) var(--ease), transform 120ms var(--ease);
}
.conversation-item:hover { background: color-mix(in srgb, var(--brand) 4%, var(--surface-2)); }
.conversation-item.active {
  background: linear-gradient(96deg,
    color-mix(in srgb, var(--brand) 13%, var(--surface)) 0%,
    color-mix(in srgb, var(--brand) 5%, var(--surface)) 62%,
    var(--surface) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 12%, transparent);
}
.conversation-item.active::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 26px; border-radius: 3px; background: var(--brand);
  box-shadow: 0 0 10px color-mix(in srgb, var(--brand) 55%, transparent);
}
.conversation-item .ci-avatar { width: 42px; height: 42px; font-size: 15px; }
.conversation-item .ci-avatar.has-unread { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px color-mix(in srgb, var(--brand) 42%, transparent); }
.ci-name { font-size: 14px; letter-spacing: -0.01em; }
.ci-time { font-variant-numeric: tabular-nums; font-size: 10.5px; margin-top: 1px; }
.ci-preview { font-size: 12.5px; line-height: 1.5; }
.ci-channel { font-size: 10px; padding: 1px 5px; border-radius: 5px; font-weight: 500; letter-spacing: 0.02em; }
.ci-channel.channel-weixin { color: var(--brand-700); background: var(--brand-soft); }
.ci-channel.channel-web { color: #2563eb; background: #eaf2fc; }
.ci-channel.channel-demo { color: #b45309; background: #fdf4e3; }
:root[data-theme='dark'] .ci-channel.channel-web { color: #8ab6f2; background: #16263c; }
:root[data-theme='dark'] .ci-channel.channel-demo { color: #e5b971; background: #332614; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .ci-channel.channel-web { color: #8ab6f2; background: #16263c; }
  :root:not([data-theme='light']) .ci-channel.channel-demo { color: #e5b971; background: #332614; }
}
.draft-tag {
  display: inline-block; margin-right: 4px; padding: 0 5px; border-radius: 4px;
  font-size: 10px; font-weight: 650; line-height: 15px; vertical-align: 1px;
  color: var(--brand-700); background: var(--brand-soft);
}
.ci-typing { display: inline-flex; align-items: center; gap: 3px; color: var(--brand); font-weight: 500; }
.ci-typing i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; animation: typing-bounce 1.2s infinite; }
.ci-typing i:nth-child(2) { animation-delay: 0.15s; }
.ci-typing i:nth-child(3) { animation-delay: 0.3s; }
.ci-badge {
  min-width: 19px; height: 19px; padding: 0 5px; font-size: 10.5px;
  box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--danger) 60%, transparent);
}

/* 列表骨架屏 */
.conv-skeleton { display: flex; gap: 11px; padding: 12px 10px; align-items: center; }
.conv-skeleton .sk-avatar { width: 42px; height: 42px; border-radius: 50%; flex: none; }
.conv-skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.conv-skeleton-lines .skeleton { border-radius: 5px; }

/* ============ 聊天头部 ============ */
.chat-header {
  height: 66px; padding: 0 18px; gap: 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.chat-header .peer { gap: 11px; }
.chat-header .peer > .avatar { width: 38px; height: 38px; font-size: 14px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 7%, transparent); }
.chat-header .peer-name { font-size: 15.5px; font-weight: 650; letter-spacing: -0.015em; gap: 7px; }
.chat-header .peer-name .dot { width: 7px; height: 7px; }
.chat-header .peer-sub { margin-top: 2px; font-size: 11.5px; color: var(--text-3); display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.peer-chip {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px;
  font-size: 10.5px; font-weight: 500; background: var(--surface-3); color: var(--text-3); letter-spacing: 0.02em;
}
.peer-chip.channel-weixin { background: var(--brand-soft); color: var(--brand-700); }
.peer-chip.channel-web { background: #eaf2fc; color: #2563eb; }
.peer-chip.channel-demo { background: #fdf4e3; color: #b45309; }
:root[data-theme='dark'] .peer-chip.channel-web { background: #16263c; color: #8ab6f2; }
:root[data-theme='dark'] .peer-chip.channel-demo { background: #332614; color: #e5b971; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .peer-chip.channel-web { background: #16263c; color: #8ab6f2; }
  :root:not([data-theme='light']) .peer-chip.channel-demo { background: #332614; color: #e5b971; }
}
.peer-status { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; }
.peer-status .dot { width: 6px; height: 6px; flex: none; }
.peer-status.ok { color: var(--success); }
.peer-status.ok .dot { background: var(--success); }
.peer-status.warn { color: var(--warning); }
.peer-status.warn .dot { background: var(--warning); animation: pulse-dot 1.6s infinite; }
.peer-status.bad { color: var(--danger); font-weight: 500; }
.peer-status.bad .dot { background: var(--danger); }
.peer-dot { opacity: 0.35; margin: 0 2px; }
.peer-code { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); letter-spacing: 0.01em; }
.peer-typing { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 450; color: var(--brand); margin-left: 2px; }
.peer-typing .typing-indicator { height: 12px; }
.chat-header .head-actions { gap: 1px; }
.chat-header .icon-btn { width: 34px; height: 34px; border-radius: 9px; }

/* 通道异常横幅 */
.chat-banner {
  display: flex; align-items: center; gap: 8px; padding: 9px 18px;
  font-size: 12.5px; line-height: 1.5; border-bottom: 1px solid transparent;
  animation: slide-up 180ms var(--ease);
}
.chat-banner svg { flex: none; }
.chat-banner span { flex: 1; min-width: 0; }
.chat-banner .btn-link { flex: none; font-size: 12.5px; font-weight: 600; }
.chat-banner.danger { background: var(--danger-soft); color: color-mix(in srgb, var(--danger) 88%, var(--text)); border-bottom-color: color-mix(in srgb, var(--danger) 18%, transparent); }
.chat-banner.danger .btn-link { color: var(--danger); }
.chat-banner.warning { background: var(--warning-soft); color: color-mix(in srgb, var(--warning) 85%, var(--text)); border-bottom-color: color-mix(in srgb, var(--warning) 18%, transparent); }
.chat-banner.warning .btn-link { color: var(--warning); }

/* ============ 聊天背景与消息 ============ */
/* 参考微信的干净灰底：不铺装饰纹理，让聊天气泡成为视觉主角 */
.chat-main {
  background: var(--bg);
}
.message-scroll {
  background-image: none;
  padding: 18px clamp(16px, 4vw, 44px) 6px;
}
.message-inner { gap: 5px; }
.msg { padding: 3px 0; }
.msg.grouped { padding-top: 0; }
.msg .msg-avatar { width: 34px; height: 34px; font-size: 12.5px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent); }
.msg .bubble {
  border-radius: 6px; padding: 8px 12px; font-size: 15px; line-height: 1.55;
  box-shadow: none;
  transition: background var(--speed) var(--ease);
}
.msg.in .bubble { border-bottom-left-radius: 4px; }
.msg.out .bubble { border-bottom-right-radius: 4px; }
.msg.out .bubble { box-shadow: none; }
.msg .bubble:hover { box-shadow: none; }
.msg .bubble.text { white-space: pre-wrap; }
.msg .sender-name { font-size: 11px; color: var(--text-3); padding: 0 3px 1px; }
.msg .meta { font-size: 10.5px; gap: 4px; font-variant-numeric: tabular-nums; }
.msg .bubble.emoji-only { font-size: 44px; line-height: 1.22; padding: 0 3px; letter-spacing: 0.02em; }
.wx-emoticon { display: inline-block; font-size: 1.12em; line-height: 1; vertical-align: -0.12em; margin: 0 1px; }
.msg .reply-quote {
  border-radius: 9px; border-left: 2.5px solid var(--brand);
  background: color-mix(in srgb, var(--text) 5%, transparent);
  padding: 5px 9px; margin-bottom: 6px; font-size: 12px;
}
.msg-enter { animation: msg-in 200ms var(--ease); }
@keyframes msg-in { from { opacity: 0; transform: translateY(7px) scale(0.99); } to { opacity: 1; transform: none; } }
.msg.status-pending .bubble { opacity: 0.82; }
.date-sep {
  align-self: center; margin: 18px 0 10px; padding: 3px 11px;
  font-size: 11px; letter-spacing: 0.03em; color: var(--text-3);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 5%, transparent);
  backdrop-filter: blur(4px);
}
.history-hint {
  align-self: center; margin: 4px 0 12px; padding: 5px 14px;
  font-size: 11.5px; color: var(--text-3); background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1px solid var(--border); border-radius: 999px; transition: color var(--speed), border-color var(--speed);
}
.history-hint:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
.history-end { align-self: center; margin: 6px 0 10px; font-size: 10.5px; color: var(--text-3); opacity: 0.6; letter-spacing: 0.02em; }
.typing-bubble .bubble { padding: 9px 13px; }
.new-msg-btn { height: 34px; padding: 0 14px; box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--brand) 70%, transparent); }

/* 媒体卡片 */
.media-image { border-radius: 12px; box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent); transition: filter var(--speed); }
.media-image:hover { filter: brightness(1.02); }
.media-image.is-loading {
  background-image: linear-gradient(105deg, var(--surface-3) 24%, var(--surface-2) 38%, var(--surface-3) 52%);
  background-size: 800px 100%; animation: shimmer 1.5s linear infinite;
  min-width: 190px; min-height: 120px; color: transparent;
}
.media-video { border-radius: 12px; box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 10%, transparent); }
.media-file {
  border-radius: 12px; padding: 9px 10px;
  background: color-mix(in srgb, var(--text) 3.5%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  transition: background var(--speed);
}
.media-file:hover { background: color-mix(in srgb, var(--text) 5.5%, transparent); }
.media-file .file-icon { width: 40px; height: 40px; border-radius: 10px; }
.media-fallback .file-icon { background: var(--warning-soft); color: var(--warning); }
.media-fallback .voice-unplayable { white-space: normal; }
.voice-unplayable { font-size: 11px; line-height: 1.45; color: var(--text-3); }
.media-audio { padding: 2px 0; }
.audio-play { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 78%, #000 12%)); box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--brand) 70%, transparent); }

/* ============ 输入区 ============ */
.composer-wrap { padding: 0 clamp(12px, 3vw, 36px) max(14px, env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 70%, transparent); }
.composer {
  position: relative; border-radius: 10px; padding: 9px 9px 9px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.composer:focus-within {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent), var(--shadow-1);
}
.composer textarea { font-size: 14.5px; padding: 5px 6px; line-height: 1.55; }
.composer textarea::placeholder { color: color-mix(in srgb, var(--text-3) 82%, transparent); }
.composer-tools { gap: 0; padding-left: 2px; }
.composer-tools .icon-btn { width: 34px; height: 34px; border-radius: 10px; color: var(--text-3); }
.composer-tools .icon-btn:hover { color: var(--brand); background: var(--brand-soft); }
.send-btn {
  width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 92%, #fff 8%), color-mix(in srgb, var(--brand) 82%, #000 10%));
  box-shadow: 0 8px 18px -9px color-mix(in srgb, var(--brand) 75%, transparent);
  transition: transform 120ms var(--ease), box-shadow var(--speed), opacity var(--speed);
}
.send-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 22px -9px color-mix(in srgb, var(--brand) 80%, transparent); }
.send-btn:active:not(:disabled) { transform: scale(0.94); }
.send-btn:disabled { background: var(--surface-3); color: var(--text-3); box-shadow: none; opacity: 1; }
.composer-meta { font-size: 11px; color: var(--text-3); padding: 1px 5px 0; }
.composer-hint { letter-spacing: 0.01em; }
.attachment-chip { background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 6px 10px 6px 7px; box-shadow: var(--shadow-1); }
.drop-overlay { border-radius: 20px; backdrop-filter: blur(2px); font-size: 14px; }

/* 表情面板 */
.emoji-panel {
  border-radius: 18px; box-shadow: 0 24px 60px -20px color-mix(in srgb, var(--text) 55%, transparent);
  border: 1px solid var(--border);
}
.emoji-tabs { padding: 7px 8px; background: color-mix(in srgb, var(--surface) 96%, var(--brand) 4%); }
.emoji-tab { height: 27px; padding: 0 10px; border-radius: 7px; }
.emoji-tab:hover { background: var(--surface-3); }
.emoji-grid { padding: 8px; gap: 1px; max-height: 252px; }
.emoji-grid button { font-size: 23px; border-radius: 9px; }
.emoji-grid button:hover { background: var(--brand-soft); transform: scale(1.14); }

/* ============ 搜索面板 / 全局搜索 ============ */
.search-panel { box-shadow: 0 18px 44px -24px color-mix(in srgb, var(--text) 55%, transparent); border-bottom: 1px solid var(--border); }
.search-panel-head { padding: 11px 16px; background: var(--surface); }
.search-result { border-radius: 10px; padding: 10px 12px; }
.search-result:hover { background: var(--brand-tint); }
.search-result .sr-text { font-size: 13px; }
.search-result mark { background: color-mix(in srgb, var(--accent) 32%, transparent); border-radius: 3px; padding: 0 2px; }
.global-search { min-height: 260px; }
.global-search .search-input input { height: 40px; font-size: 14px; }
.global-search-results { max-height: min(52vh, 460px); overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.global-result {
  display: flex; flex-direction: column; gap: 4px; text-align: left; width: 100%;
  padding: 10px 12px; border-radius: 11px; border: 1px solid transparent;
  transition: background var(--speed), border-color var(--speed);
}
.global-result:hover { background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand) 18%, transparent); }
.global-result-top { display: flex; align-items: center; gap: 8px; width: 100%; }
.global-result-top strong { font-size: 13px; font-weight: 600; color: var(--text); }
.global-result-top .muted { margin-left: auto; font-variant-numeric: tabular-nums; }
.global-result-text { font-size: 12.5px; color: var(--text-2); line-height: 1.55; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.global-result mark { background: color-mix(in srgb, var(--accent) 32%, transparent); border-radius: 3px; padding: 0 1px; }

/* ============ 空状态 ============ */
.chat-empty { gap: 14px; }
.chat-empty-art { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
.chat-empty-art .logo {
  width: 76px; height: 76px; border-radius: 23px; position: relative; z-index: 1;
  box-shadow: 0 22px 44px -18px color-mix(in srgb, var(--brand) 55%, transparent);
}
.chat-empty-art .orbit {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--brand) 26%, transparent);
  animation: spin 26s linear infinite;
}
.chat-empty-art .orbit-2 { inset: 15px; animation-duration: 19s; animation-direction: reverse; border-style: solid; border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.chat-empty h2 { font-size: 21px; letter-spacing: -0.02em; }
.chat-empty p { font-size: 13px; line-height: 1.75; max-width: 360px; }
.chat-empty-tips { display: flex; gap: 18px; margin-top: 20px; flex-wrap: wrap; justify-content: center; font-size: 11.5px; color: var(--text-3); }
.chat-empty-tips .kbd { margin: 0 1px; }
.list-search-empty { padding: 34px 16px; line-height: 1.7; }

/* ============ 骨架屏（消息） ============ */
.msg-skeleton { display: flex; gap: 9px; padding: 6px 0; align-items: flex-end; }
.msg-skeleton.out { flex-direction: row-reverse; }
.msg-skeleton .sk-avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.msg-skeleton .sk-bubble { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); }
.msg-skeleton .sk-bubble .skeleton { border-radius: 4px; }

/* ============ 全局微调 ============ */
.btn { border-radius: 10px; }
.btn-primary { background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 94%, #fff 6%), var(--brand-600)); box-shadow: 0 6px 16px -9px color-mix(in srgb, var(--brand) 75%, transparent); }
.btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, var(--brand), var(--brand-700)); }
.modal-box { box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--text) 60%, transparent); }
.menu { border-radius: 13px; box-shadow: 0 18px 44px -22px color-mix(in srgb, var(--text) 60%, transparent); }
.page-view .page-inner { animation: fade-in 200ms var(--ease); }
.runtime-num, .ci-time, .sr-time, .global-result-top .muted { font-variant-numeric: tabular-nums; }

/* ============ 网页访客页 ============ */
.visitor-page .visitor-head {
  background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 88%, #04120e 12%), color-mix(in srgb, var(--brand) 74%, #04120e 26%) 55%, color-mix(in srgb, var(--brand) 60%, #04120e 40%));
  border-bottom: none; color: #fff;
}
.visitor-page .visitor-brand strong { color: #fff; font-size: 15.5px; }
.visitor-page .visitor-brand img { box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.45); }
.visitor-page .visitor-status { color: rgba(255, 255, 255, 0.82); }
.visitor-page .visitor-status .dot { background: rgba(255, 255, 255, 0.55); }
.visitor-page .visitor-status .dot.online { background: #a7f3d0; box-shadow: 0 0 0 3px rgba(167, 243, 208, 0.22); }
.visitor-page .visitor-head .icon-btn { color: rgba(255, 255, 255, 0.9); }
.visitor-page .visitor-head .icon-btn:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.visitor-page .visitor-chat .message-scroll {
  background-image: none;
}
.visitor-welcome { padding-top: 24px; }
.visitor-welcome .visitor-logo { width: 78px; height: 78px; border-radius: 24px; box-shadow: 0 22px 44px -18px color-mix(in srgb, var(--brand) 55%, transparent); }
.visitor-welcome h1 { font-size: 23px; letter-spacing: -0.025em; }
.visitor-start-card { border-radius: 20px; box-shadow: 0 18px 44px -26px color-mix(in srgb, var(--text) 55%, transparent); }
.visitor-start-card .btn-lg { height: 44px; }
.visitor-page .visitor-foot { background: var(--surface); }

/* ============ 登录页细节 ============ */
.login-brand-glow { animation: brand-float 14s ease-in-out infinite alternate; }
@keyframes brand-float { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-26px, 22px, 0); } }
.login-card { transform: translateZ(0); }
.login-form .input { transition: border-color var(--speed), box-shadow var(--speed), background var(--speed); }
.login-form .input:focus { background: var(--surface); }
.login-error { animation: slide-up 180ms var(--ease); }

/* ============ 移动端沉浸式 ============ */
@media (max-width: 760px) {
  body.mobile-chat-open .rail { display: none; }
  body.mobile-chat-open .workspace { height: 100dvh; }
  .chat-header { height: 58px; padding: 0 10px; }
  .chat-header .peer > .avatar { width: 34px; height: 34px; font-size: 12.5px; }
  .chat-header .peer-name { font-size: 15px; }
  .message-scroll { padding: 14px 11px 2px; }
  .msg .bubble { font-size: 15px; padding: 9px 12px; }
  .msg .bubble.emoji-only { font-size: 40px; }
  .composer-wrap { padding: 0 8px max(10px, env(safe-area-inset-bottom)); }
  .composer { border-radius: 18px; padding: 8px 8px 8px 12px; }
  .composer-tools .icon-btn { width: 33px; height: 33px; }
  .chat-empty-tips, .search-all-link { display: none; }
  .chat-banner { padding: 8px 12px; font-size: 12px; }
  .conversation-item { padding: 10px 8px; }
  .conversation-item .ci-avatar { width: 40px; height: 40px; }
  .list-head { padding: 14px 12px 9px; }
  .visitor-page .visitor-welcome h1 { font-size: 21px; }
  .visitor-page .visitor-chat .message-scroll { padding: 14px 11px 2px; }
}

/* ============ 细节修正（第二轮视觉走查） ============ */
/* 单聊不显示重复的发送者名字（会话头部已展示） */
.msg .sender-name { display: none; }
/* 文件卡片：文件名使用正文色，链接默认主题绿只用于可点击提示 */
.media-file { color: var(--text); text-decoration: none; }
.media-file:hover { text-decoration: none; }
.media-file .file-name { color: var(--text); font-weight: 550; }
.media-file:hover .file-name { color: var(--brand-700); }
/* 图片/视频底部说明文字 */
.msg .bubble .media-caption { padding: 8px 6px 2px; white-space: pre-wrap; }
/* 无法解码的媒体兜底卡片：标题/原因/大小分行展示 */
.media-fallback { align-items: flex-start; max-width: 320px; }
.media-fallback .fallback-body { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.media-fallback .fallback-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.4; }
.media-fallback .fallback-hint { font-size: 11.5px; line-height: 1.5; color: var(--text-3); }
.media-fallback .file-download { margin-top: 6px; }
/* 表情面板：略宽一点，避免标签被裁切 */
.emoji-panel { width: min(392px, calc(100vw - 24px)); }
.emoji-tabs { gap: 1px; }
.emoji-tab { font-size: 11.5px; padding: 0 8px; }

@media (max-width: 760px) {
  /* 触屏没有 hover：不显示悬浮操作条，避免遮挡消息 */
  .msg .hover-actions { display: none !important; }
  /* 单聊手机端不逐条显示时间，仅保留失败/待发送状态，减少视觉噪音 */
  .msg .meta { opacity: 1; height: 0; min-height: 0; margin: 0; padding: 0; overflow: hidden; gap: 0; }
  .msg .meta .time { display: none; }
  .msg.status-failed .meta,
  .msg.status-unknown .meta,
  .msg.status-pending .meta { height: auto; overflow: visible; padding: 0 3px; }
  .msg.status-failed .meta .time,
  .msg.status-unknown .meta .time,
  .msg.status-pending .meta .time { display: none; }
  /* 手机端输入提示由系统键盘负责，隐藏 Enter 提示 */
  .composer-meta .composer-hint { display: none; }
  .composer-meta { min-height: 0; padding-bottom: 0; }
  .composer-meta .right { margin-left: auto; }
  .composer textarea { font-size: 16px; } /* ≥16px 可避免 iOS 聚焦时自动放大 */
  .media-fallback { max-width: 100%; }
}

/* ============ 话术库面板 ============ */
.reply-panel {
  position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 30;
  width: min(392px, calc(100vw - 24px)); max-height: min(460px, 62vh);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 24px 60px -20px color-mix(in srgb, var(--text) 55%, transparent);
  overflow: hidden;
}
.reply-panel[hidden] { display: none; }
.reply-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px 12px; border-bottom: 1px solid var(--border); }
.reply-search { flex: 1; height: 32px; padding: 0 8px; }
.reply-search input { font-size: 12.5px; }
.reply-list { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.reply-item {
  display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left;
  padding: 9px 10px; border-radius: 10px; border: 1px solid transparent;
  transition: background var(--speed), border-color var(--speed);
}
.reply-item:hover { background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand) 16%, transparent); }
.reply-item-top { display: flex; align-items: center; gap: 7px; }
.reply-scope {
  flex: none; padding: 1px 5px; border-radius: 4px; font-size: 10px; font-weight: 600;
  color: var(--brand-700); background: var(--brand-soft); letter-spacing: 0.02em;
}
.reply-scope.personal { color: var(--text-3); background: var(--surface-3); }
.reply-title { font-size: 13px; font-weight: 600; color: var(--text); }
.reply-content {
  font-size: 12px; color: var(--text-3); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.reply-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 96%, var(--brand) 4%);
}
.reply-foot .btn-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.reply-manager { display: flex; flex-direction: column; gap: 10px; min-height: 220px; }
.reply-manager-list { display: flex; flex-direction: column; gap: 2px; max-height: 42vh; overflow-y: auto; }
.reply-manager-row {
  display: flex; align-items: center; gap: 6px; padding: 9px 10px; border-radius: 10px;
  border: 1px solid transparent;
}
.reply-manager-row:hover { background: var(--surface-2); }
.reply-manager-row strong { font-size: 13px; font-weight: 600; }
.reply-manager-row .reply-content { margin-top: 2px; }
.reply-manager .reply-add { align-self: flex-start; }
.reply-form { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.reply-form .field-label { margin-top: 2px; }
.reply-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.reply-form textarea.input { height: auto; min-height: 84px; padding: 9px 11px; resize: vertical; line-height: 1.6; }

/* ============ 转接会话 ============ */
.transfer-dialog { display: flex; flex-direction: column; gap: 8px; }
.transfer-note {
  display: flex; align-items: flex-start; gap: 7px; padding: 9px 11px; border-radius: 11px;
  font-size: 12.5px; line-height: 1.6; color: var(--text-2);
  background: var(--brand-soft);
}
.transfer-note svg { flex: none; margin-top: 1px; color: var(--brand); }
.transfer-list { display: flex; flex-direction: column; gap: 3px; max-height: 42vh; overflow-y: auto; }
.transfer-member {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px;
  border: 1px solid transparent; cursor: pointer; transition: background var(--speed), border-color var(--speed);
}
.transfer-member:hover { background: var(--surface-2); }
.transfer-member:has(input:checked) { background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
.transfer-member input { position: absolute; opacity: 0; pointer-events: none; }
.transfer-member .avatar { width: 36px; height: 36px; font-size: 13px; }
.transfer-member-text { display: flex; flex-direction: column; gap: 1px; }
.transfer-member-text strong { font-size: 13.5px; }
.presence-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--surface) 80%, transparent); }
.presence-dot.online { background: var(--success); }
.presence-dot.offline { background: var(--text-3); opacity: 0.5; }
.transfer-online { padding-left: 2px; }

/* ============ 媒体在线转换 ============ */
.media-derive-actions { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.media-derive-btn { height: 27px; padding: 0 10px; font-size: 12px; gap: 4px; }
.media-derive-btn:disabled { opacity: 0.65; }
.media-derive .file-icon { background: var(--brand-soft); color: var(--brand); }
.voice-transcoded { display: block; margin-top: 3px; font-size: 10.5px; color: var(--text-3); }
.voice-transcript { margin-top: 4px; line-height: 1.5; }

@media (max-width: 760px) {
  .reply-panel { width: calc(100vw - 20px); max-height: 58vh; left: -4px; }
  .reply-manager-list { max-height: 34vh; }
  .transfer-list { max-height: 34vh; }
}