/* ─── 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:72px; align-items:center; padding-top:0; }
.has-sidebar .messages { padding:20px 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; }
.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; }

/* online status */
.online-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; vertical-align:middle; }
.online-dot.online { background:#22c55e; }
.online-dot.offline { background:#d1d5db; }
.online-label { font-size:12px; color:var(--text-muted); }
.online-label.online { color:#16a34a; }
.sidebar-online-dot { position:absolute; bottom:2px; right:2px; width:10px; height:10px; border-radius:50%; border:2px solid #fff; }
.sidebar-online-dot.online { background:#22c55e; }
.sidebar-online-dot.offline { background:#d1d5db; }

/* quick reply panel */
.qr-panel { max-height:180px; overflow-y:auto; border:1px solid var(--border); border-radius:10px; margin-bottom:8px; background:#fafafa; }
.qr-panel-item { padding:8px 14px; cursor:pointer; font-size:13px; color:var(--text); border-bottom:1px solid #f1f3f7; transition:background .1s; }
.qr-panel-item:last-child { border-bottom:none; }
.qr-panel-item:hover { background:#fffde8; }
.qr-panel-item .qr-title { font-weight:600; }
.qr-panel-item .qr-preview { color:var(--text-muted); font-size:12px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qr-empty { padding:12px 14px; color:var(--text-light); font-size:13px; text-align:center; }

.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-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 */
.chat-input-area { border-top:1px solid var(--border); background:var(--surface); flex-shrink:0; padding:10px 14px 12px; }
.input-row { display:flex; align-items:center; gap:8px; }
.media-btn { background:transparent; border:none; cursor:pointer; color:var(--text-muted); padding:6px; border-radius:var(--radius); flex-shrink:0; transition:color .15s, background .15s; display:flex; align-items:center; justify-content:center; }
.media-btn:hover,.mic-btn.voice-mode { color:var(--primary); background:var(--primary-light); }
.press-talk-btn { flex:1; height:40px; border-radius:20px; border:1.5px solid var(--border); background:var(--bg); 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)} }
.msg-input.hide-in-voice { display:none; }
.msg-input { flex:1; resize:none; border:1px solid var(--border); border-radius:20px; padding:8px 14px; font-family:inherit; outline:none; background:var(--bg); color:var(--text); max-height:120px; line-height:1.5; font-size:16px; min-width:0; }
.msg-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.10); background:var(--surface); }
.send-btn { min-width:72px; height:40px; flex-shrink:0; background:#ffef9f; border:none; border-radius:20px; color:#b38b00; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.send-btn svg { display:none; }
.send-btn::after { content:'发送'; font-size:14px; }
.send-btn:hover:not(:disabled) { background:#ffe56b; }
.send-btn:disabled { opacity:.5; 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; }
  .send-btn { min-width:42px; width:42px; border-radius:50%; }
  .send-btn::after { content:''; }
  .send-btn svg { display:block; }

  /* 客服端移动端输入区两行布局 */
  .desktop-chat-page .input-row {
    display:grid !important;
    grid-template-columns:repeat(4, auto) 1fr auto;
    grid-template-rows:auto auto;
    gap:0;
    align-items:center;
  }
  .desktop-chat-page .input-row .media-btn { grid-row:1; padding:10px 12px; color:#4b5563; }
  .desktop-chat-page .input-row .msg-input { grid-row:2; grid-column:1 / 6; border-radius:22px; padding:10px 16px; font-size:15px; background:#f9fafb; border:1.5px solid #e5e7eb; }
  .desktop-chat-page .input-row .msg-input:focus { background:#fff; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.08); }
  .desktop-chat-page .input-row .send-btn { grid-row:2; grid-column:6; width:40px; height:40px; min-width:40px; margin-left:8px; background:linear-gradient(135deg,#ffe066,#ffcc02); border-radius:50%; box-shadow:0 2px 8px rgba(255,204,2,.3); }
  .desktop-chat-page .input-row .press-talk-btn { grid-row:2; grid-column:1 / -1; }
}