/* ─── Layout ────────────────────────────────────────────────────────────────── */
.chat-page { height: 100dvh; overflow: hidden; }
.chat-layout {
  max-width: 860px; height: 100dvh;
  margin: 0 auto;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
}

/* desktop two-pane layout */
.desktop-chat-page {
  background: #e5e5e5;
  background-image: radial-gradient(circle at 15% 20%, rgba(0,0,0,.035) 0 90px, transparent 91px), radial-gradient(circle at 86% 42%, rgba(0,0,0,.035) 0 120px, transparent 121px);
}
.chat-layout.has-sidebar {
  max-width: 1280px; height: calc(100dvh - 108px); margin: 36px auto;
  flex-direction: row; border: none; border-radius: 14px; overflow: hidden;
  box-shadow: 0 10px 28px rgba(15,23,42,.08);
}
.chat-sidebar { width: 330px; flex-shrink: 0; background:#fff; border-right:1px solid var(--border); display:flex; flex-direction:column; }
.sidebar-head { height:60px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; font-size:20px; }
.sidebar-link { font-size:13px; color:var(--primary); }
.sidebar-list { flex:1; overflow-y:auto; padding:4px 8px 12px; }
.sidebar-item { display:flex; align-items:center; gap:10px; padding:10px 8px; border-radius:10px 0 0 10px; text-decoration:none; color:inherit; position:relative; flex:1; min-width:0; }
.sidebar-item:hover,.sidebar-item.active { text-decoration:none; }
.sidebar-avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.sidebar-info { min-width:0; flex:1; }
.sidebar-name { font-size:14px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-text { font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.sidebar-badge { background:#ef4444; color:#fff; border-radius:99px; min-width:18px; height:18px; padding:0 5px; display:flex; align-items:center; justify-content:center; font-size:11px; }
.chat-main { flex:1; min-width:0; display:flex; flex-direction:column; background:#fff; }
.has-sidebar .chat-header { height:142px; align-items:flex-start; padding-top:24px; }
.has-sidebar .messages { padding:28px 26px; }
.has-sidebar .chat-input-area { padding:12px 18px 16px; }

/* ─── Header ────────────────────────────────────────────────────────────────── */
.chat-header {
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px 0 18px; height: 60px; flex-shrink: 0;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.back-btn { font-size: 20px; color: var(--text-muted); text-decoration: none; padding: 4px 8px 4px 0; line-height: 1; transition: color .15s; }
.back-btn:hover { color: var(--text); text-decoration: none; }
.header-avatar { width:42px; height:42px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.avatar-presence { position:relative; display:inline-flex; flex-shrink:0; }
.presence-dot { position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border:2px solid #fff; border-radius:50%; background:#98a2b3; box-shadow:0 0 0 1px rgba(15,23,42,.06); }
.presence-dot.online { background:#22c55e; }
.presence-dot.offline { background:#98a2b3; }
.sidebar-avatar-wrap .presence-dot { width:11px; height:11px; }

.chat-header-info { flex: 1; min-width: 0; }
.chat-title { display: block; font-size: 16px; font-weight: 700; color: var(--text); }
.chat-subtitle { display: block; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-setting-link { margin-top:-4px; }

.sound-btn { flex-shrink: 0; background: transparent; border: none; cursor: pointer; color: var(--text-muted); padding: 6px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; transition: color .15s, background .15s; }
.sound-btn:hover { color: var(--primary); background: var(--primary-light); }
.sound-btn.muted { color: var(--text-light); }

/* ─── Messages area ─────────────────────────────────────────────────────────── */
.messages { flex: 1; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 14px; -webkit-overflow-scrolling: touch; }
.messages:empty::before { content: '暂无消息，开始对话吧。'; font-size: 13px; color: var(--text-light); text-align: center; margin-top: 40px; }

/* ─── Message bubbles ───────────────────────────────────────────────────────── */
.message { display:flex; gap:8px; max-width:78%; -webkit-user-select:none; user-select:none; }
.message.self { align-self:flex-end; flex-direction:row-reverse; }
.message.other { align-self:flex-start; }
.msg-avatar { width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0; margin-top:18px; }
.message.self .msg-avatar { display:none; }
.msg-body { display:flex; flex-direction:column; min-width:0; }
.message.self .msg-body { align-items:flex-end; }
.message.other .msg-body { align-items:flex-start; }
.bubble { padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.6; word-break: break-word; cursor: default; }
.message.self .bubble { background: var(--primary); color:#fff; border-bottom-right-radius:4px; }
.message.other .bubble { background:#f1f3f7; color:var(--text); border-bottom-left-radius:4px; }
.message.retracted .bubble { background: transparent !important; color: var(--text-light) !important; border: 1px dashed var(--border); font-style: italic; font-size: 13px; padding: 6px 12px; }

.bubble.media { background: transparent !important; color: inherit !important; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.bubble.media img { max-width: 280px; max-height: 320px; object-fit: cover; display: block; cursor: zoom-in; border-radius: 9px; }
.bubble.media video { max-width: 320px; max-height: 280px; display: block; border-radius: 9px; }
.bubble.media .video-wrap { padding: 4px; background: #000; border-radius: 9px; }

.bubble.audio-bubble { width:190px; min-height:42px; background:#f8fafc !important; border:1px solid #dbe5f2; border-radius:22px !important; padding:6px 12px !important; display:grid; grid-template-columns:30px 1fr 38px; align-items:center; column-gap:10px; color:#64748b !important; }
.message.self .bubble.audio-bubble { background:#eff6ff !important; border-color:#bfdbfe; color:var(--primary) !important; }
.audio-play-btn { width:30px; height:30px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.message.self .audio-play-btn { background:var(--primary); color:#fff; }
.message.other .audio-play-btn { background:var(--primary-light); color:var(--primary); }
.audio-native { display:none; }
.audio-play-btn.loading svg { display:none; }
.audio-play-btn.loading::after { content:''; width:12px; height:12px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:spin .8s linear infinite; }
.audio-duration { font-size:12px; opacity:.95; text-align:right; font-variant-numeric:tabular-nums; }
.audio-wave { display:flex; align-items:center; gap:3px; min-width:0; justify-content:flex-start; }
.audio-wave span { display:inline-block; width:3px; background:currentColor; border-radius:2px; opacity:.65; animation:wave 1s ease-in-out infinite; }
.audio-wave span:nth-child(1){height:8px}.audio-wave span:nth-child(2){height:14px}.audio-wave span:nth-child(3){height:10px}.audio-wave span:nth-child(4){height:16px}.audio-wave span:nth-child(5){height:8px}
.audio-bubble:not(.playing) .audio-wave span { animation:none; height:8px; }
@keyframes wave { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(1.8)} }

.msg-meta { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-light); margin-top:4px; padding:0 2px; }
.msg-sender { font-weight:500; }
.msg-read { font-size:11px; color:var(--text-light); }
.msg-read.read { color:var(--primary); }
.msg-status { display:inline-block; }
.msg-status.sending::after { content:''; display:inline-block; width:10px; height:10px; border:1.5px solid var(--text-light); border-top-color:transparent; border-radius:50%; animation:spin .8s linear infinite; vertical-align:middle; margin-left:4px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* input — card composer */
.chat-input-area { border-top:none; background:transparent; flex-shrink:0; padding:12px 16px 16px; }
.chat-composer {
  display:flex; flex-direction:column; gap:8px;
  border:1px solid rgba(148,163,184,.28); border-radius:18px;
  background:transparent; padding:10px 14px 10px;
  box-shadow:0 6px 20px rgba(15,23,42,.07);
  transition:border-color .15s, box-shadow .15s;
}
.chat-composer:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.10), 0 6px 20px rgba(15,23,42,.08); }
.msg-input { width:100%; resize:none; border:none; background:transparent; padding:4px 2px; font-family:inherit; outline:none; color:var(--text); min-height:24px; max-height:140px; line-height:1.5; font-size:16px; min-width:0; overflow-y:auto; white-space:pre-wrap; word-break:break-word; }
.msg-input::placeholder { color:var(--text-light); }
.msg-input.hide-in-voice { display:none; }
.press-talk-btn { width:100%; height:40px; border-radius:12px; border:1.5px solid var(--border); background:var(--surface); font-size:14px; font-weight:500; color:var(--text-muted); cursor:pointer; display:none; align-items:center; justify-content:center; gap:8px; -webkit-user-select:none; user-select:none; }
.press-talk-btn.active-voice-mode { display:flex; }
.press-talk-btn.pressing { background:var(--danger); border-color:var(--danger); color:#fff; animation:pulse-rec 1s ease-in-out infinite; }
@keyframes pulse-rec { 0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.4)} 50%{box-shadow:0 0 0 6px rgba(220,38,38,0)} }
.composer-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.composer-tools { display:flex; align-items:center; gap:2px; }
.media-btn { background:transparent; border:none; cursor:pointer; color:var(--text-muted); padding:7px; border-radius:10px; flex-shrink:0; transition:color .15s, background .15s; display:flex; align-items:center; justify-content:center; }
.media-btn:hover,.media-btn.voice-mode { color:var(--primary); background:var(--primary-light); }
.send-btn { width:40px; height:40px; min-width:40px; flex-shrink:0; background:var(--primary-light); border:none; border-radius:50%; color:var(--primary); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s, opacity .15s; }
.send-btn svg { display:block; width:18px; height:18px; }
.send-btn::after { content:''; }
.send-btn:hover:not(:disabled) { background:var(--primary); color:#fff; }
.send-btn:disabled { opacity:.45; cursor:not-allowed; }

.upload-progress { height:3px; background:var(--border); border-radius:99px; overflow:hidden; margin-bottom:8px; }
.progress-fill { height:100%; width:0%; background:var(--primary); border-radius:99px; transition:width .2s; }
.ctx-menu { position:fixed; z-index:3000; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden; min-width:120px; }
.ctx-item { display:block; width:100%; padding:10px 16px; background:none; border:none; text-align:left; font-size:14px; cursor:pointer; color:var(--text); }
.ctx-item:hover { background:var(--surface-2); }
.ctx-retract:hover { color:var(--danger); }
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.88); display:flex; align-items:center; justify-content:center; z-index:2000; cursor:zoom-out; }
.lightbox img { max-width:94vw; max-height:94vh; object-fit:contain; border-radius:4px; }

@media (max-width: 900px) {
  .chat-layout.has-sidebar { margin:0; height:100dvh; border-radius:0; }
  .chat-sidebar { display:none; }
  .has-sidebar .chat-header { height:60px; align-items:center; padding-top:0; }
  .chat-setting-link { display:none; }
}
@media (max-width: 600px) {
  .bubble.media img { max-width:220px; }
  .bubble.media video { max-width:260px; }
  .message { max-width:86%; }
  .msg-avatar { width:28px; height:28px; }
  .chat-input-area { padding:10px 12px 12px; }
}

.quick-replies { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.quick-replies button { border:1px solid var(--primary-light); background:#fff; color:var(--primary); border-radius:999px; padding:6px 10px; font-size:12px; cursor:pointer; }
.quick-replies button:hover { background:#eff6ff; }
.file-bubble { min-width:180px; max-width:280px; min-height:42px; display:grid !important; grid-template-columns:34px 1fr; align-items:center; gap:10px; text-decoration:none; border:1px solid #dbe5f2; background:#fff !important; color:var(--text) !important; }
.message.self .file-bubble { background:#eff6ff !important; border-color:#bfdbfe; color:var(--primary) !important; }
.file-icon { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:#eef4ff; color:var(--primary); }
.file-name { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; font-weight:600; }
@media (max-width:360px) {
  .composer-tools { gap:0; }
  .media-btn { padding:5px; }
  .composer-bar { gap:6px; }
}
.preset-panel { position:absolute; left:16px; right:16px; bottom:calc(100% - 2px); z-index:9; display:none; max-height:340px; padding:12px; background:#fff; border:1px solid var(--border); border-radius:10px 10px 0 0; box-shadow:0 -12px 30px rgba(15,23,42,.12); }
.preset-panel.open { display:flex; flex-direction:column; gap:10px; }
.preset-panel-head { display:flex; align-items:center; justify-content:space-between; }
.preset-panel-head strong { font-size:15px; }
.preset-panel-head button { width:30px; height:30px; border:0; border-radius:6px; background:var(--surface-low); color:var(--text-muted); font-size:20px; line-height:1; }
.preset-search { width:100%; height:38px; border:1px solid var(--border); border-radius:7px; padding:0 11px; outline:none; color:var(--text); background:#fff; }
.preset-search:focus { border-color:var(--primary); }
.preset-list { display:flex; flex-direction:column; gap:5px; overflow-y:auto; min-height:54px; }
.preset-item { width:100%; border:0; border-radius:6px; padding:9px 10px; background:transparent; color:var(--text); text-align:left; line-height:1.5; word-break:break-word; }
.preset-item:hover,.preset-item:focus { background:var(--primary-light); color:var(--primary); outline:none; }
.preset-empty { padding:20px 8px; color:var(--text-muted); text-align:center; font-size:13px; }
@media (max-width:600px) { .preset-panel { left:8px; right:8px; max-height:52dvh; } }

.emoji-panel { position:absolute; left:0; right:0; bottom:100%; z-index:8; display:none; padding:12px 0 8px; background:#fff; border-top:1px solid #eef2f7; border-bottom:1px solid #eef2f7; box-shadow:0 -10px 26px rgba(15,23,42,.08); --emoji-columns:12; }
.emoji-panel.open { display:block; }
.emoji-scroll { display:flex; width:100%; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.emoji-scroll::-webkit-scrollbar { display:none; }
.emoji-page { flex:0 0 100%; scroll-snap-align:start; display:grid; grid-template-columns:repeat(var(--emoji-columns), minmax(0, 1fr)); grid-template-rows:repeat(2, 50px); grid-auto-flow:column; gap:0; padding:0 16px; box-sizing:border-box; }
.emoji-panel .emoji-item,
.emoji-panel .emoji-item:hover,
.emoji-panel .emoji-item:focus { appearance:none !important; -webkit-appearance:none !important; width:44px; height:44px; margin:auto; padding:0 !important; border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important; color:inherit; border-radius:12px; cursor:pointer; font:400 30px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; display:grid; place-items:center; text-align:center; }
.emoji-panel .emoji-item:hover { background:#f1f5f9 !important; }
.emoji-panel .emoji-item:active { transform:scale(.92); background:#eaf1ff !important; }
.emoji-dots { height:16px; display:flex; align-items:center; justify-content:center; gap:5px; margin-top:6px; }
.emoji-panel .emoji-dot { appearance:none !important; -webkit-appearance:none !important; width:6px; height:6px; padding:0 !important; border:0 !important; border-radius:999px; background:#cbd5e1; box-shadow:none !important; cursor:pointer; }
.emoji-panel .emoji-dot.active { width:14px; background:#2563eb; }
.chat-input-area { position:relative; }
@media (max-width: 600px) { .emoji-panel { --emoji-columns:8; } .emoji-page { grid-template-rows:repeat(2, 48px); padding:0 12px; } .emoji-panel .emoji-item { width:42px; height:42px; font-size:28px; } }
.call-btn.active{color:#16a34a;background:#dcfce7}
.call-overlay{position:fixed;inset:0;z-index:10020;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,.58);backdrop-filter:blur(6px)}
.call-overlay.open{display:flex}
.call-panel{width:min(360px,100%);padding:28px 24px 24px;border-radius:8px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.28);text-align:center}
.call-avatar{width:76px;height:76px;margin:0 auto 16px;border-radius:50%;object-fit:cover;border:3px solid #e2e8f0}
.call-title{margin:0;font-size:18px;font-weight:700;color:#0f172a;letter-spacing:0}
.call-status{min-height:22px;margin:8px 0 24px;font-size:14px;color:#64748b}
.call-timer{font-variant-numeric:tabular-nums;color:#334155}
.call-actions{display:flex;align-items:center;justify-content:center;gap:18px;min-height:52px}
.call-action{width:48px;height:48px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;background:#475569;transition:transform .15s,background .15s}
.call-action:hover{transform:translateY(-1px)}
.call-action.accept{background:#16a34a}
.call-action.end,.call-action.reject{background:#dc2626}
.call-action.muted{background:#f59e0b}
.call-action svg{width:21px;height:21px}
.call-action[hidden]{display:none}
@media(max-width:600px){.call-panel{padding:24px 18px 20px}.call-overlay{align-items:flex-end;padding:12px}.call-panel{width:100%}}

/* ── 通话记录气泡（像普通聊天消息，不居中）── */
.bubble.call-record {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  padding: 9px 14px;
}
.bubble.call-record .cr-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  opacity: .9;
}
.bubble.call-record .cr-text {
  white-space: nowrap;
}
/* 未接听/已取消等：other侧显示红色提示 */
.message.other .bubble.call-record.cr-missed {
  background: #fff1f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}
.message.other .bubble.call-record.cr-missed .cr-icon svg {
  stroke: #dc2626;
}

/* ── 侧边栏来电动效 ── */
.sidebar-calling-icon{display:inline-flex;align-items:center;margin-left:4px;color:#16a34a;animation:call-ring .7s ease-in-out infinite;flex-shrink:0}
.sidebar-ringing-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#dcfce7;color:#16a34a;flex-shrink:0;animation:call-ring .7s ease-in-out infinite}
@keyframes call-ring{0%,100%{transform:rotate(0deg)}20%{transform:rotate(-14deg)}40%{transform:rotate(14deg)}60%{transform:rotate(-10deg)}80%{transform:rotate(10deg)}}

/* ── 浏览器后台重连横幅 ── */
.bg-reconnect-banner{display:flex;align-items:center;gap:8px;padding:6px 16px;background:#fffbeb;border-bottom:1px solid #fde68a;font-size:12px;color:#92400e;flex-shrink:0;animation:fadeSlideIn .25s ease}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.bg-reconnect-banner .bg-rc-dots{display:inline-flex;gap:3px;align-items:center}
.bg-reconnect-banner .bg-rc-dots span{width:4px;height:4px;border-radius:50%;background:#d97706;animation:bgDotPulse 1.2s ease-in-out infinite}
.bg-reconnect-banner .bg-rc-dots span:nth-child(2){animation-delay:.2s}
.bg-reconnect-banner .bg-rc-dots span:nth-child(3){animation-delay:.4s}
@keyframes bgDotPulse{0%,80%,100%{transform:scale(0.6);opacity:.5}40%{transform:scale(1);opacity:1}}
.bg-reconnect-banner .bg-rc-timer{font-weight:700;font-variant-numeric:tabular-nums;margin-left:2px}
.bg-reconnect-banner.expired{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.bg-reconnect-banner.expired .bg-rc-dots span{background:#dc2626}