/* 微信风格通话内对话气泡 */
:root {
  --bg-chat: #ededed;
  --bg-me: #95ec69;
  --bg-them: #ffffff;
  --bg-transcript: rgba(255,255,255,.5);
  --text: #1f2024;
  --muted: #888;
  --primary: #07c160;
  --danger: #fa5151;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color: var(--text); background: #f4f4f4; }

.chat-shell { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-chat); }
.chat-header {
  padding: 14px 16px; background: #f7f7f7; border-bottom: 1px solid #e5e5e5;
  display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 5;
}
.chat-header .avatar { width: 36px; height: 36px; border-radius: 18px; background: #ddd; display:flex; align-items:center; justify-content:center; font-size: 16px; }
.chat-header .meta { flex: 1; min-width: 0 }
.chat-header .meta b { display: block; font-size: 15px; }
.chat-header .meta small { color: var(--muted); font-size: 12px; }
.chat-header button { background: var(--danger); color: white; border: 0; padding: 8px 14px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.chat-header button:disabled { opacity: .5; cursor: not-allowed; }

.banner { background: #fff3cd; padding: 8px 12px; font-size: 13px; color: #856404; border-bottom: 1px solid #f0e0a0; display: none; }
.banner.barge { background: #ffd1d1; color: #842; border-color: #f4b3b3; }

.chat-body { flex: 1; overflow-y: auto; padding: 12px 12px 20px; display: flex; flex-direction: column; gap: 4px; }

.time-divider { text-align: center; color: var(--muted); font-size: 11px; margin: 10px 0 4px; }

.bubble-row { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0; }
.bubble-row .avatar { width: 36px; height: 36px; border-radius: 4px; flex-shrink: 0; background: #ccc; color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.bubble-row .bubble {
  max-width: 65%; padding: 8px 12px; border-radius: 6px; background: var(--bg-them);
  word-wrap: break-word; word-break: break-word; line-height: 1.4; font-size: 14px;
  position: relative; box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.bubble-row .bubble::before {
  content: ''; position: absolute; top: 10px; left: -5px;
  width: 0; height: 0; border-style: solid; border-width: 6px 6px 6px 0; border-color: transparent var(--bg-them) transparent transparent;
}
.bubble-row.me { flex-direction: row-reverse; }
.bubble-row.me .bubble { background: var(--bg-me); }
.bubble-row.me .bubble::before { left: auto; right: -5px; border-width: 6px 0 6px 6px; border-color: transparent transparent transparent var(--bg-me); }
.bubble-row.me .avatar { background: var(--primary); }
.bubble-row.them .avatar { background: #888; }

/* 转写文字气泡 */
.bubble-row.transcript .bubble {
  background: var(--bg-transcript); font-style: italic; color: #555; font-size: 13px;
  box-shadow: none; border: 1px dashed #c0c0c0;
}
.bubble-row.transcript .bubble::before { display: none; }
.bubble-row.transcript .avatar { opacity: .4; }
.transcript-tag { display: inline-block; font-size: 10px; color: var(--muted); background: #eee; padding: 1px 6px; border-radius: 6px; margin-right: 4px; font-style: normal; }

/* 优惠券 / 图片 */
.bubble.coupon { background: linear-gradient(135deg, #ffd17d, #ff9d3f) !important; color: #5a3000; padding: 12px 14px; }
.bubble-row.me .bubble.coupon::before, .bubble-row.them .bubble.coupon::before { border-color: transparent #ff9d3f transparent transparent; }
.bubble-row.me .bubble.coupon::before { border-color: transparent transparent transparent #ff9d3f; }
.bubble.coupon .title { font-weight: bold; font-size: 16px; margin-bottom: 4px; }
.bubble.coupon .code { font-family: ui-monospace, monospace; background: rgba(255,255,255,.3); padding: 2px 8px; border-radius: 4px; }
.bubble.image { padding: 4px; }
.bubble.image img { max-width: 200px; max-height: 240px; border-radius: 4px; display: block; }

.composer {
  background: #f7f7f7; border-top: 1px solid #e5e5e5; padding: 8px;
  display: flex; gap: 6px; align-items: center; position: sticky; bottom: 0;
}
.composer input[type=text] {
  flex: 1; padding: 9px 12px; border: 1px solid #ddd; border-radius: 6px;
  font-size: 14px; background: white; outline: none;
}
.composer input[type=text]:focus { border-color: var(--primary); }
.composer button, .composer .icon-btn {
  background: white; border: 1px solid #ddd; border-radius: 6px; padding: 9px 12px;
  cursor: pointer; font-size: 14px; color: #555; display: inline-flex; align-items: center;
}
.composer .send-btn { background: var(--primary); color: white; border-color: var(--primary); }
.composer button:disabled { opacity: .4; cursor: not-allowed; }

.actions-row { background: #f7f7f7; padding: 6px 10px; border-top: 1px solid #eee; display: flex; gap: 8px; overflow-x: auto; }
.actions-row .chip { background: white; border: 1px solid #ddd; padding: 6px 10px; border-radius: 14px; font-size: 12px; color: #444; cursor: pointer; white-space: nowrap; }

/* 通话结束态 */
.ended-card {
  background: white; padding: 32px 20px; text-align: center; margin: 40px 16px; border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.ended-card .icon { font-size: 48px; }
.ended-card h2 { margin: 12px 0 8px; font-size: 18px; }
.ended-card p { color: var(--muted); margin: 4px 0; font-size: 14px; }
.ended-card .primary { background: var(--primary); color: white; border: 0; padding: 12px 24px; border-radius: 6px; font-size: 15px; margin-top: 16px; cursor: pointer; }

/* 历史通话 (坐席端) */
.history-list { background: white; margin: 10px 16px; border-radius: 10px; overflow: hidden; }
.history-item { display: flex; gap: 10px; padding: 12px; border-bottom: 1px solid #f0f0f0; align-items: center; }
.history-item:last-child { border-bottom: 0; }
.history-item .left { flex: 1; min-width: 0 }
.history-item .left b { display: block; font-size: 14px; }
.history-item .left small { color: var(--muted); font-size: 12px; }
.history-item .right { color: var(--muted); font-size: 12px; text-align: right; }

.idle-card {
  text-align: center; padding: 40px 20px; margin: 40px 16px; background: white; border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.idle-card .pulse { width: 60px; height: 60px; border-radius: 30px; background: var(--primary); margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: white; animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(7,193,96,.5);} 70% { box-shadow: 0 0 0 16px rgba(7,193,96,0);} 100% { box-shadow: 0 0 0 0 rgba(7,193,96,0);} }
.idle-card h2 { margin: 0 0 8px; font-size: 16px; }
.idle-card p { color: var(--muted); margin: 4px 0; font-size: 13px; }