/* ===== PurlChat 前端样式（深色赛博夜聊风：氛围光晕 + 玻璃拟态 + 行动方高亮） ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #0b0e14;
  --bg-panel: rgba(21,26,35,.72);
  --bg-card: rgba(28,35,48,.6);
  --text: #e8edf5;
  --text-dim: #8b95a7;
  --accent: #6c7ff8;
  --accent2: #f58aa9;
  --green: #3ddc84;
  --danger: #ff5a5a;
  --glass-border: rgba(255,255,255,.08);
}

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  overflow: hidden;
}

.hidden { display: none !important; }

/* ===== 全屏氛围背景：动态光晕 + 漂浮光点 ===== */
#ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: linear-gradient(160deg, #0b0e14 0%, #131126 48%, #0b0e14 100%);
}
.glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; animation: drift 16s ease-in-out infinite; }
.glow-a { width: 540px; height: 540px; background: rgba(108,127,248,.38); top: -180px; left: -140px; }
.glow-b { width: 480px; height: 480px; background: rgba(245,138,169,.26); bottom: -180px; right: -120px; animation-delay: -6s; }
.glow-c { width: 400px; height: 400px; background: rgba(61,220,132,.16); top: 42%; left: 58%; animation-delay: -10s; }
@keyframes drift {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(46px, 32px) scale(1.1); }
  66% { transform: translate(-34px, 22px) scale(.94); }
}
.stars {
  position: absolute; inset: 0; opacity: .55;
  background-image:
    radial-gradient(1.4px 1.4px at 22% 18%, rgba(255,255,255,.9) 0, transparent 100%),
    radial-gradient(1px 1px at 68% 34%, rgba(255,255,255,.7) 0, transparent 100%),
    radial-gradient(1.8px 1.8px at 82% 66%, rgba(255,255,255,.6) 0, transparent 100%),
    radial-gradient(1px 1px at 34% 76%, rgba(255,255,255,.8) 0, transparent 100%),
    radial-gradient(1.2px 1.2px at 55% 12%, rgba(255,255,255,.6) 0, transparent 100%),
    radial-gradient(1px 1px at 12% 52%, rgba(255,255,255,.5) 0, transparent 100%);
  animation: twinkle 6s ease-in-out infinite;
}
@keyframes twinkle { 0%,100% { opacity: .35; } 50% { opacity: .75; } }

/* 主应用浮于氛围层之上（背景半透明透出光晕） */
#app { position: relative; z-index: 1; }

/* ===== 进入遮罩 ===== */
#enter-mask {
  position: fixed; inset: 0; z-index: 100;
  background: radial-gradient(1200px 600px at 50% -10%, #1d2740 0%, #0b0e14 70%);
  display: flex; align-items: center; justify-content: center;
}
.enter-box {
  text-align: center; padding: 44px 56px; border-radius: 24px;
  background: rgba(21,26,35,.55); border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.enter-logo {
  font-size: 64px; animation: float 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 24px rgba(108,127,248,.7));
}
.enter-box h1 {
  margin: 16px 0 6px; font-size: 28px; letter-spacing: 3px;
  background: linear-gradient(90deg, #fff, #aeb9ff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.enter-box p { color: var(--text-dim); margin-bottom: 24px; }
/* ★V0.10.2★ 品牌副标语：div 规避 .enter-box p 的字号/间距压缩；小号大间距，随语言切换 */
.enter-tagline {
  font-size: 11px; letter-spacing: 1.5px; color: rgba(255,255,255,.42);
  margin: 0 0 8px; font-weight: 500;
}
/* 进入页：昵称 + 图片头像选择 */
.enter-profile { margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; }
#enter-name {
  width: 100%; padding: 10px 14px; border-radius: 12px; font-size: 14px; text-align: center;
  background: rgba(255,255,255,.06); border: 1px solid #2d3a52; color: var(--text);
  outline: none; transition: border-color .15s ease;
}
#enter-name:focus { border-color: var(--accent); }
.avatar-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.avatar-opt {
  width: 38px; height: 38px; border-radius: 50%; font-size: 19px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); border: 2px solid transparent; color: var(--text);
  transition: transform .1s ease, border-color .15s ease, background .15s ease;
}
.avatar-opt:hover { transform: scale(1.12); background: rgba(108,127,248,.2); }
.avatar-opt.selected { border-color: var(--accent); background: rgba(108,127,248,.25); box-shadow: 0 0 12px rgba(108,127,248,.4); }
/* 真人图片头像（me1~me8.png）：方形圆角裁切，与 emoji 按钮区分 */
.avatar-opt.img-opt { width: 44px; height: 44px; padding: 0; overflow: hidden; }
.avatar-opt.img-opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
#enter-btn {
  padding: 14px 48px; font-size: 17px; border: none; border-radius: 999px;
  background: linear-gradient(135deg, #6c7ff8, #8a6cf8); color: #fff; cursor: pointer; font-weight: 700;
  box-shadow: 0 8px 28px rgba(108,127,248,.5), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .12s ease, box-shadow .2s ease;
  letter-spacing: 1px;
}
#enter-btn:hover { transform: scale(1.05); box-shadow: 0 10px 36px rgba(108,127,248,.7); }
/* 首页底部：版本号 + 开发日志入口 */
.enter-foot { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; }
.enter-ver { font-size: 12px; color: rgba(255,255,255,.28); letter-spacing: .4px; }
.enter-log {
  font-size: 12px; color: rgba(255,255,255,.45); background: none; border: 1px solid rgba(255,255,255,.14);
  padding: 4px 12px; border-radius: 999px; cursor: pointer; transition: all .15s ease;
}
.enter-log:hover { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }
a.enter-log { text-decoration: none; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ===== 包间选择（V0.8.0 多房间体系）===== */
.enter-rooms { margin: 0 0 20px; }
.enter-rooms-title { font-size: 13px; color: var(--text-dim); margin-bottom: 10px; }
.enter-rooms-title small { font-size: 11px; opacity: .75; }
/* 进入页"挑个包间"标题行：左标题 + 右套餐入口 */
.enter-rooms-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.enter-pricing {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  background: rgba(108,127,248,.14); border: 1px solid rgba(108,127,248,.45);
  color: #c9d2ff; font-size: 12px; font-weight: 600; font-family: inherit;
  transition: all .15s ease;
}
.enter-pricing:hover { background: rgba(108,127,248,.28); color: #fff; box-shadow: 0 0 12px rgba(108,127,248,.35); }
.enter-pricing .tier-badge {
  position: static; display: inline-block; padding: 1px 7px;
  background: linear-gradient(90deg, #6c7ff8, #a78bfa); color: #fff;
  font-size: 10px; font-weight: 800; border-radius: 999px; line-height: 1.6;
}
/* 进入页内容变长（含包间卡）：允许内部滚动，避免小屏溢出 */
.enter-box { max-height: 94vh; overflow-y: auto; scrollbar-width: thin; }
.room-picker {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.room-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 10px 12px; border-radius: 12px; text-align: left; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid var(--glass-border); color: var(--text);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.room-card:hover { transform: translateY(-2px); background: rgba(108,127,248,.14); border-color: rgba(108,127,248,.5); }
.room-card.selected {
  border-color: var(--accent); background: rgba(108,127,248,.22);
  box-shadow: 0 0 14px rgba(108,127,248,.35), inset 0 0 0 1px rgba(108,127,248,.4);
}
.room-card .rc-icon { font-size: 22px; line-height: 1; }
.room-card .rc-info { min-width: 0; }
.room-card .rc-info b { font-size: 13px; display: block; }
.room-card .rc-info small {
  font-size: 11px; color: var(--text-dim); line-height: 1.45; display: block; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.room-card .rc-tags { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.room-card .rc-tags i {
  font-style: normal; font-size: 10px; padding: 1px 6px; border-radius: 999px;
  background: rgba(255,255,255,.08); color: var(--text-dim); border: 1px solid rgba(255,255,255,.1);
}
.room-card.selected .rc-tags i { background: rgba(108,127,248,.25); color: #dbe1ff; }
/* 顶部房间名：可点击换包间 */
#room-switcher { cursor: pointer; padding: 4px 8px; margin-left: -8px; border-radius: 8px; transition: background .15s ease; }
#room-switcher:hover { background: rgba(255,255,255,.07); }
/* 房间内切换弹层：卡片区可滚动，防止小屏溢出 */
#room-picker-list.room-picker { max-height: 56vh; overflow-y: auto; padding: 0 16px 16px; }
#room-picker-list .room-card { background: rgba(255,255,255,.06); }

/* ===== 顶栏 ===== */
#topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--bg-panel);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.room-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px var(--green); animation: blink 1.6s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }
.topic-label { color: var(--text-dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.online-count { color: var(--text-dim); font-size: 13px; white-space: nowrap; }
/* 背景音乐：开关按钮 + 音量滑块 */
.bgm-wrap { display: flex; align-items: center; gap: 6px; }
.bgm-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.06); color: var(--text-dim); font-size: 15px;
  cursor: pointer; transition: all .2s ease; display: flex; align-items: center; justify-content: center;
}
.bgm-btn:hover { color: #fff; background: rgba(255,255,255,.12); }
.bgm-btn.on {
  color: #fff; background: rgba(108,127,248,.25); border-color: rgba(108,127,248,.6);
  box-shadow: 0 0 16px rgba(108,127,248,.5); animation: spinSlow 6s linear infinite;
}
/* ★V0.9.37★ 文字标签按钮（去 emoji 后顶栏/首页按钮）：auto 宽度 pill 形状，禁用旋转动画 */
.bgm-btn.txt {
  width: auto; min-width: 40px; padding: 0 11px; border-radius: 15px;
  font-size: 12px; white-space: nowrap;
}
.bgm-btn.txt.on { animation: none; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.bgm-volume {
  width: 64px; height: 4px; -webkit-appearance: none; appearance: none;
  background: #2d3a52; border-radius: 4px; outline: none; cursor: pointer;
}
.bgm-volume::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%;
  background: #6c7ff8; border: 2px solid #fff; box-shadow: 0 0 8px rgba(108,127,248,.6);
}
.bgm-volume::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: #6c7ff8; border: 2px solid #fff;
}

/* ===== 主区布局（桌面：舞台+听众 / 右侧话题）===== */
/* 应用容器：纵向铺满视口，顶栏/主区/底部栏 flex 自适应，保证按钮永不超出屏幕 */
#app {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh; /* dvh 兼容移动端动态视口 */
}
#main {
  flex: 1; min-height: 0; /* 高度随视口伸缩，剩余空间给主区 */
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-areas: "stage  topics";
  gap: 12px; padding: 14px;
}

/* 舞台区：咖啡馆场景（背景图 + 圆桌 + 环绕座位，填满整个舞台区） */
#stage { grid-area: stage; display: flex; min-height: 0; }

/* 咖啡馆场景容器：背景图铺底（图未上传时自动降级为暖色渐变，不阻塞） */
#cafe-scene {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  border-radius: 16px; border: 1px solid var(--glass-border);
  background-color: #2a2117;
  background-image:
    url('/images/bg-cafe.png'),
    radial-gradient(ellipse at 50% 60%, rgba(130,96,62,.38), transparent 62%),
    linear-gradient(165deg, #241b12 0%, #3a2c1c 45%, #291e13 100%);
  background-size: cover, auto, auto;
  background-position: center 40%, center, center;
  background-repeat: no-repeat;
}

/* 桌面容器：背景图已自带桌子，不再叠加半透明椭圆（仅保留容器供话题卡片居中定位） */
.cafe-table {
  position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%);
  width: 62%; height: 40%; border-radius: 50%;
  pointer-events: none;
}

/* 桌面中心话题卡片：显示大家正在聊的话题（放在桌面正中，随话题切换更新） */
.table-topic {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 5; pointer-events: none;
  background: rgba(255,255,255,.94); color: #2b3a67;
  padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 700;
  box-shadow: 0 4px 18px rgba(0,0,0,.4), 0 0 0 1px rgba(108,127,248,.35);
  max-width: 86%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: tableTopicIn .35s ease;
}
@keyframes tableTopicIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.75); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* 座位容器 + 座位：绝对定位，头像 + 名字围绕桌面 */
#seat-row { position: absolute; inset: 0; }
.seat {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 96px; opacity: .55; transition: opacity .25s ease;
}
.seat.speaking { opacity: 1; }
.seat .seat-avatar {
  width: 78px; height: 78px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #2b3650, #1a2130);
  border: 3px solid #3a4a6b; box-shadow: 0 8px 24px rgba(0,0,0,.45);
  position: relative;
}
.seat .seat-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seat-fallback {
  /* 默认隐藏：图片正常加载时头像占满整个圆形头像框；
     仅当图片加载失败（onerror）时才显示兜底文字层 */
  display: none;
  align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: 36px;
  background: linear-gradient(145deg, #2b3650, #1a2130);
}
/* 说话高亮：白色光圈呼吸 + 背后渐变光晕扩散（Clubhouse 风格增强） */
.seat.speaking .seat-avatar {
  border-color: #fff; animation: speakRing 1.1s ease-in-out infinite;
}
.seat.speaking .seat-avatar::before {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(243,227,187,.55), rgba(216,184,119,.4) 55%, transparent 75%);
  filter: blur(10px); z-index: -1; animation: glowPulse 1.1s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { transform: scale(.95); opacity: .55; }
  50% { transform: scale(1.15); opacity: 1; }
}
@keyframes speakRing {
  0%, 100% { box-shadow: 0 0 0 4px rgba(216,184,119,.28), 0 0 18px rgba(216,184,119,.35); }
  50% { box-shadow: 0 0 0 7px rgba(216,184,119,.14), 0 0 36px rgba(216,184,119,.6); }
}
.seat .seat-name {
  font-size: 14px; font-weight: 700; color: var(--text);
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.seat.speaking .seat-name { color: #fff; text-shadow: 0 0 12px rgba(255,255,255,.6); }
.seat .seat-role {
  font-size: 10px; color: rgba(255,255,255,.65); letter-spacing: .5px;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
/* 座位上声波动画（说话者专属彩色波纹） */
.seat .seat-wave {
  /* 绝对定位悬浮在头像框下缘：不占 flex 流，避免挤占头像图片 */
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -4px; display: none; gap: 3px; align-items: flex-end; height: 14px;
}
.seat.speaking .seat-wave { display: flex; }
.seat .seat-wave i {
  width: 3px; border-radius: 2px; height: 5px;
  background: linear-gradient(180deg, #fff, #6c7ff8); box-shadow: 0 0 6px rgba(108,127,248,.8);
  animation: wave 1s ease-in-out infinite;
}
.seat .seat-wave i:nth-child(1){animation-delay:0s}.seat .seat-wave i:nth-child(2){animation-delay:.15s}
.seat .seat-wave i:nth-child(3){animation-delay:.3s}.seat .seat-wave i:nth-child(4){animation-delay:.45s}
.seat .seat-wave i:nth-child(5){animation-delay:.6s}
@keyframes wave { 0%,100%{height:5px} 50%{height:14px} }

/* 自己座位：默认绿色描边，上麦时绿色光圈呼吸 */
.seat.me { opacity: 1; }
.seat.me .seat-avatar { border-color: var(--green); box-shadow: 0 0 14px rgba(61,220,132,.4); }
.seat.me.on-mic .seat-avatar { animation: micRing 1.2s ease-in-out infinite; }
@keyframes micRing {
  0%, 100% { box-shadow: 0 0 0 4px rgba(61,220,132,.25), 0 0 18px rgba(61,220,132,.35); }
  50% { box-shadow: 0 0 0 8px rgba(61,220,132,.12), 0 0 38px rgba(61,220,132,.55); }
}

/* ===== 发言文字气泡（V0.9.31）=====
 * AI/真人每句话在座位旁弹出气泡，尾部指向头像，语音播完 +1.5s 淡出。
 * 纯内存展示不存储：刷新/切房即清空，仅显示原文（不翻译）。
 * 气泡直接挂在 #seat-row 内，用座位百分比定位（left/top），
 * 通过 transform 在座位中心点的上方/下方展开，不受 .seat 半透明影响。 */
.speak-bubble {
  position: absolute; z-index: 40;
  left: 0; top: 0; /* 实际 left/top 由 JS 按座位百分比设置 */
  pointer-events: none;
  /* 默认向下弹：气泡贴头像下缘（座位中心 + 头像半径 39px + 间距 13px） */
  transform: translate(-50%, 52px) scale(.6);
  transform-origin: top center;
  background: rgba(14, 20, 34, .94);
  border: 1px solid rgba(216, 184, 119, .5);
  border-radius: 12px;
  padding: 7px 11px;
  min-width: 110px; max-width: 250px;
  font-size: 13px; line-height: 1.45; color: var(--text);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  will-change: transform, opacity;
}
.speak-bubble.bubble-show { opacity: 1; transform: translate(-50%, 52px) scale(1); }
.speak-bubble.bubble-hide {
  opacity: 0; transform: translate(-50%, 40px) scale(.9);
  transition: opacity .4s ease, transform .4s ease;
}
/* 座位在下半区 → 气泡向上弹：气泡底部贴头像上缘 */
.speak-bubble.bubble-up {
  transform: translate(-50%, calc(-100% - 52px)) scale(.6);
  transform-origin: bottom center;
}
.speak-bubble.bubble-up.bubble-show { transform: translate(-50%, calc(-100% - 52px)) scale(1); }
.speak-bubble.bubble-up.bubble-hide {
  transform: translate(-50%, calc(-100% - 40px)) scale(.9);
}
/* 尾部小三角（默认向下弹时朝上，指向头像） */
.speak-bubble .bubble-tail {
  position: absolute; left: 50%; top: -6px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 6px solid rgba(216, 184, 119, .5);
}
.speak-bubble .bubble-tail::after {
  content: ''; position: absolute; left: -5px; top: 1px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 5px solid rgba(14, 20, 34, .96);
}
.speak-bubble.bubble-up .bubble-tail {
  top: auto; bottom: -6px;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: none; border-top: 6px solid rgba(216, 184, 119, .5);
}
.speak-bubble.bubble-up .bubble-tail::after {
  top: auto; bottom: 1px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: none; border-top: 5px solid rgba(14, 20, 34, .96);
}
.speak-bubble .bubble-name {
  display: block; font-size: 11px; font-weight: 700;
  color: #e8c97a; margin-bottom: 2px;
  letter-spacing: .3px;
}
.speak-bubble .bubble-text { word-break: break-word; white-space: normal; }
/* ★V0.9.36★ 双语气泡译文行：原文下方浅色小字（空文本自动隐藏） */
.speak-bubble .bubble-trans {
  display: block; margin-top: 3px; padding-top: 3px;
  border-top: 1px dashed rgba(255,255,255,.14);
  font-size: 10px; line-height: 1.4; color: rgba(255,255,255,.55);
  word-break: break-word; white-space: normal;
}
.speak-bubble .bubble-trans:empty { display: none; }

/* 真人气泡（自己的座位旁，用户侧绿色风格，左对齐观感） */
.speak-bubble.mine {
  background: rgba(18, 44, 32, .95);
  border-color: rgba(61, 220, 132, .55);
}
.speak-bubble.mine .bubble-name { color: #7fe0ab; }
.speak-bubble.mine .bubble-tail { border-bottom-color: rgba(61, 220, 132, .55); }
.speak-bubble.mine .bubble-tail::after { border-bottom-color: rgba(18, 44, 32, .97); }
.speak-bubble.mine.bubble-up .bubble-tail {
  border-bottom-color: transparent; border-top-color: rgba(61, 220, 132, .55);
}
.speak-bubble.mine.bubble-up .bubble-tail::after {
  border-bottom-color: transparent; border-top-color: rgba(18, 44, 32, .97);
}

/* 移动端（820px 以下）复用咖啡馆布局：气泡缩小避免遮挡 */
@media (max-width: 820px) {
  .speak-bubble {
    min-width: 70px; max-width: 150px;
    font-size: 11px; padding: 5px 8px; line-height: 1.35;
    transform: translate(-50%, 40px) scale(.6);
  }
  .speak-bubble.bubble-show { transform: translate(-50%, 40px) scale(1); }
  .speak-bubble.bubble-hide { transform: translate(-50%, 32px) scale(.9); }
  .speak-bubble.bubble-up {
    transform: translate(-50%, calc(-100% - 40px)) scale(.6);
  }
  .speak-bubble.bubble-up.bubble-show { transform: translate(-50%, calc(-100% - 40px)) scale(1); }
  .speak-bubble.bubble-up.bubble-hide { transform: translate(-50%, calc(-100% - 32px)) scale(.9); }
  .speak-bubble .bubble-name { font-size: 10px; }
}

/* 话题列表：种类 + 关键词两层（玻璃拟态面板） */
#topic-panel {
  grid-area: topics; background: var(--bg-panel); border: 1px solid var(--glass-border);
  border-radius: 14px; display: flex; flex-direction: column; overflow: hidden;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; font-weight: 700; font-size: 14px;
  border-bottom: 1px solid var(--glass-border);
}
.panel-hint { font-weight: 400; font-size: 11px; color: var(--text-dim); }
.panel-actions { display: flex; align-items: center; gap: 8px; }
.panel-btn {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 13px; line-height: 1;
  background: rgba(24,32,48,.7); color: var(--text); border: 1px solid #2d3a52;
  transition: all .15s ease; display: flex; align-items: center; justify-content: center;
}
.panel-btn:hover { background: #222c3d; transform: translateY(-1px); }
/* ★V0.9.37★ 话题面板文字按钮（去 emoji）：auto 宽度 pill 形状 */
.panel-btn.txt {
  width: auto; min-width: 38px; padding: 0 9px; border-radius: 13px;
  font-size: 12px; white-space: nowrap;
}
.panel-btn.spinning { animation: spinBtn .6s linear; }
@keyframes spinBtn { to { transform: rotate(360deg); } }
#topic-list { overflow-y: auto; padding: 8px 10px; flex: 1; }
.topic-group { margin-bottom: 10px; }
.topic-cat {
  font-size: 12px; font-weight: 700; color: var(--text-dim); letter-spacing: .5px;
  margin: 4px 0 6px; display: flex; align-items: center; gap: 6px;
}
.topic-cat::after { content: ''; flex: 1; height: 1px; background: var(--glass-border); }
.topic-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.topic-chip {
  padding: 6px 10px; border-radius: 999px; font-size: 12px; cursor: pointer;
  background: rgba(24,32,48,.7); color: var(--text); border: 1px solid #2d3a52;
  transition: all .15s ease; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.topic-chip:hover { background: #222c3d; transform: translateY(-1px); }
.topic-chip.active {
  background: rgba(216,184,119,.2); border-color: var(--gold); color: #f6e7bd;
  box-shadow: 0 0 14px rgba(216,184,119,.35);
}
/* 每组"更多/收起"按钮：展开该模块剩余话题 */
.topic-more {
  margin: 6px auto 2px; display: block; cursor: pointer;
  padding: 4px 14px; border-radius: 999px; font-size: 11px;
  background: rgba(108,127,248,.12); color: var(--accent);
  border: 1px dashed rgba(108,127,248,.4); transition: all .15s ease;
}
.topic-more:hover { background: rgba(108,127,248,.22); }

/* ===== 底部操作栏（Clubhouse 式大圆按钮 + 文字输入）===== */
#dock {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 16px 12px; background: var(--bg-panel);
  border-top: 1px solid var(--glass-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  position: relative;
}
/* 操作行：波纹 + 举手 + 按住说话 */
.dock-actions {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  position: relative;
}
/* 文字发言输入框 */
.chat-box {
  display: flex; align-items: center; gap: 6px; width: min(420px, 100%);
}
.chat-box input {
  flex: 1; min-width: 0; padding: 8px 14px; border-radius: 999px;
  border: 1px solid #2d3a52; background: rgba(20,26,38,.7); color: var(--text);
  font-size: 13px; outline: none; transition: border-color .15s;
}
.chat-box input:focus { border-color: var(--accent); box-shadow: 0 0 12px rgba(108,127,248,.25); }
.chat-box input::placeholder { color: #5b6b85; }
.chat-box button {
  padding: 8px 16px; border-radius: 999px; border: none;
  background: linear-gradient(135deg, #6c7ff8, #8a6cf8); color: #fff; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .15s;
  box-shadow: 0 4px 14px rgba(108,127,248,.35);
}
.chat-box button:hover { filter: brightness(1.12); }
.chat-box button:active { transform: scale(.96); }
.dock-round {
  width: 74px; height: 74px; border-radius: 50%;
  border: 1px solid var(--glass-border); background: rgba(42,52,80,.75); color: var(--text);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; cursor: pointer; transition: all .15s ease;
  touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}
.dock-round:hover { transform: scale(1.06); background: rgba(52,65,95,.85); }
.dock-round span {
  font-size: 11px; font-weight: 700;
  /* 禁止按钮文字被选中：否则按住说话时文字会被拖选高亮/光标变 I 形，干扰长按手势 */
  user-select: none; -webkit-user-select: none; -moz-user-select: none;
  -webkit-touch-callout: none; cursor: pointer;
}
.dock-round.hold {
  /* 默认（未按住）：绿色——表示"可以按住说话" */
  background: linear-gradient(135deg, #2fce7f, #17b98a); color: #fff; width: 92px; height: 92px;
  box-shadow: 0 8px 28px rgba(47,206,127,.5), inset 0 1px 0 rgba(255,255,255,.3);
}
.dock-round.hold:hover { filter: brightness(1.1); }
.dock-round.hold:active { transform: scale(.95); }
.dock-round.hold.active {
  /* 按住中：红色——明确区分"正在按住说话"，松开恢复绿色 */
  background: linear-gradient(135deg, #ff5a5a, #ff3d7f);
  box-shadow: 0 8px 28px rgba(255,90,90,.5), inset 0 1px 0 rgba(255,255,255,.3);
  transform: scale(.95);
}
.mic-status {
  /* 顶部栏"直播中"徽章：不再绝对定位在操作行，避免遮挡按住说话按钮 */
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid rgba(61,220,132,.4); background: rgba(61,220,132,.12);
  color: var(--green); font-size: 12px; font-weight: 700; animation: blink 1.6s infinite;
  text-shadow: 0 0 10px rgba(61,220,132,.7);
  white-space: nowrap;
}

/* 录音波纹指示器：按住说话时显示，柱高随麦克风音量跳动 */
.rec-indicator {
  position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%);
  display: none; align-items: center; gap: 4px; height: 34px;
  padding: 6px 14px; border-radius: 999px; background: rgba(255,90,90,.12);
  border: 1px solid rgba(255,90,90,.4);
}
.rec-indicator.on { display: flex; animation: recPulse 1.4s ease-in-out infinite; }
.rec-indicator span {
  width: 4px; height: 6px; border-radius: 3px; background: #ff5a5f;
  transition: height .08s linear;
}
@keyframes recPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(255,90,90,.25); }
  50% { box-shadow: 0 0 18px rgba(255,90,90,.55); }
}

/* 系统提示气泡 */
#toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  z-index: 300; max-width: 80%; padding: 10px 18px; border-radius: 999px;
  background: rgba(20,26,38,.94); border: 1px solid #2d3a52; color: var(--text);
  font-size: 14px; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.5);
  animation: toastIn .25s ease;
}
@keyframes toastIn { from{opacity:0;transform:translate(-50%,8px)} to{opacity:1;transform:translate(-50%,0)} }

/* 网络异常横幅 */
#net-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: rgba(255,90,90,.92); color: #fff; text-align: center;
  padding: 8px; font-size: 14px; font-weight: 600;
}

/* ===== 移动端独立布局（≤820px）：隐藏 PC 咖啡馆大场景，用竖版舞台 + 话题抽屉 ===== */
@media (max-width: 820px) {
  #main {
    grid-template-columns: 1fr;
    grid-template-areas: "stage";
    padding: 8px;
  }
  /* 话题标签可点击：移动端点它打开话题抽屉 */
  #topic-label { cursor: pointer; }
  /* 移动端隐藏音量滑块（空间有限），用按钮控制开关即可 */
  #bgm-volume { display: none; }
  #ambient-volume { display: none; }
  /* ★V0.9.37★ 移动端顶栏文字按钮压缩 + 隐藏在线人数，避免溢出 */
  .topbar-right { gap: 6px; }
  .bgm-btn.txt { font-size: 11px; padding: 0 7px; min-width: 0; }
  .online-count { display: none; }
  /* 移动端竖版独立舞台不再使用：与 PC 端一致，直接复用咖啡馆背景图布局 */
  #m-stage { display: none; }

  /* 咖啡馆场景：保持与背景图相同宽高比（1373:944）完整显示，不裁切导致座位错位，垂直居中 */
  #cafe-scene {
    aspect-ratio: 1373 / 944;
    width: 100%; height: auto;
    flex: 0 0 auto;
    align-self: center;
    margin: auto 0;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
  }
  /* 座位按比例缩小（left/top 百分比与背景图天然对齐，不随缩放错位） */
  .seat { width: 74px; gap: 3px; }
  .seat .seat-avatar { width: 58px; height: 58px; border-width: 2px; }
  .seat .seat-name { font-size: 12px; }
  .seat .seat-role { font-size: 9px; }
  .seat.speaking .seat-avatar::before { inset: -7px; }
  /* 桌面中心话题卡缩小 */
  .table-topic { font-size: 11px; padding: 5px 10px; }
  /* 话题面板 → 底部抽屉：默认收起（translateY 隐藏），点顶部话题标签滑出 */
  #topic-panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
    margin: 0; max-height: 74dvh; border-radius: 18px 18px 0 0;
    transform: translateY(105%); transition: transform .28s ease;
    display: flex; flex-direction: column;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  #topic-panel.drawer-open { transform: translateY(0); }
  #topic-list { overflow-y: auto; flex: 1; min-height: 0; }
  #btn-topic-close { display: inline-flex !important; } /* 覆盖 .hidden */
  /* 抽屉遮罩：点外部收起 */
  #topic-backdrop {
    position: fixed; inset: 0; z-index: 490;
    background: rgba(4,6,10,.55); backdrop-filter: blur(2px);
  }
  /* 底部操作栏：加 iPhone 底部安全区 */
  #dock { gap: 6px; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
  .dock-actions { gap: 14px; }
  .chat-box { width: 100%; }
  .dock-round { width: 62px; height: 62px; }
  .dock-round.hold { width: 76px; height: 76px; }
  .mic-status { display: none; } /* 移动端隐藏，减少拥挤 */
  /* 包间选择：进入页与弹层改为 2 列；进入页整体可滚动防溢出 */
  .enter-rooms { margin-bottom: 16px; }
  .room-picker { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  #enter-mask { align-items: flex-start; overflow-y: auto; padding: 24px 12px; }
  .enter-box { padding: 28px 16px; max-width: 100%; }
}

/* ===== AI 角色设置弹窗 ===== */
.modal {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,10,16,.68); backdrop-filter: blur(6px);
  padding: 20px;
}
.modal-box {
  width: min(680px, 94vw); max-height: 86vh;
  display: flex; flex-direction: column;
  background: rgba(21,26,35,.96); border: 1px solid var(--glass-border);
  border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.6);
  overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 10px; font-size: 16px;
}
.modal-close {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,.06);
  color: var(--text-dim); font-size: 14px; cursor: pointer;
}
.modal-close:hover { color: #fff; background: rgba(255,255,255,.14); }
.modal-hint {
  margin: 0 20px 12px; padding: 8px 12px; border-radius: 8px;
  background: rgba(108,127,248,.1); border: 1px solid rgba(108,127,248,.25);
  color: var(--text-dim); font-size: 12px; line-height: 1.6;
}
/* 发言节奏档位（设置弹窗内） */
.tempo-panel { margin: 0 20px 14px; }
.tempo-title { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.tempo-options { display: flex; gap: 8px; }
.tempo-opt {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 6px; border-radius: 10px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--glass-border);
  color: var(--text-dim); transition: all .15s ease; font-family: inherit;
}
.tempo-opt:hover { border-color: var(--accent); color: var(--text); }
.tempo-opt.locked { filter: grayscale(.8); opacity: .6; cursor: not-allowed; }
.tempo-opt.locked:hover { border-color: var(--glass-border); color: var(--text-dim); }
.tempo-opt.selected {
  border-color: var(--accent); background: rgba(108,127,248,.18);
  color: var(--text); box-shadow: 0 0 0 1px var(--accent) inset;
}
.tempo-name { font-size: 13px; font-weight: 600; }
.tempo-desc { font-size: 10px; color: var(--text-dim); text-align: center; line-height: 1.4; }
.tempo-opt.selected .tempo-desc { color: var(--text-dim); }
/* 语音引擎切换：与节奏档位同风格，等级徽章 + 双维形容词，窄屏自动换行 */
/* ★V0.9.36★ 全部档位强制一行（LV5 不再单独换行）：等宽收缩，窄屏文字自动换行 */
.voice-options { display: flex; flex-wrap: nowrap; gap: 6px; }
.voice-opt {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; border-radius: 10px; cursor: pointer; white-space: normal; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--glass-border);
  color: var(--text-dim); transition: all .15s ease; font-family: inherit; font-size: 12px; font-weight: 600;
}
.voice-opt small { font-size: 9px; font-weight: 400; color: var(--text-dim); line-height: 1.35; }
.voice-opt:hover { border-color: var(--accent); color: var(--text); }
.voice-opt.locked { filter: grayscale(.8); opacity: .6; cursor: not-allowed; }
.voice-opt.locked:hover { border-color: var(--glass-border); color: var(--text-dim); }
.voice-opt.selected {
  border-color: var(--accent); background: rgba(108,127,248,.18);
  color: var(--text); box-shadow: 0 0 0 1px var(--accent) inset;
}
.voice-opt:disabled { opacity: .5; cursor: wait; }
.voice-opt.selected small { color: var(--text-dim); }
/* ★V0.9.33★ 语音等级徽章：LV1 灰 → LV5 金，色阶一眼看懂「等级越高音质/情绪越强、越耗流量」 */
.voice-head { display: inline-flex; align-items: center; gap: 4px; line-height: 1.4; }
.voice-level {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; padding: 1px 5px; border-radius: 999px;
  font-size: 9px; font-weight: 800; letter-spacing: .2px; line-height: 1.5;
}
.lv1 { color: #9ca3af; background: rgba(156,163,175,.14); border: 1px solid rgba(156,163,175,.32); }
.lv2 { color: #93c5fd; background: rgba(59,130,246,.14); border: 1px solid rgba(59,130,246,.35); }
.lv3 { color: #67e8f9; background: rgba(34,211,238,.14); border: 1px solid rgba(34,211,238,.35); }
.lv4 { color: #c4b5fd; background: rgba(139,92,246,.16); border: 1px solid rgba(139,92,246,.4); }
.lv5 { color: #fcd34d; background: rgba(245,158,11,.16); border: 1px solid rgba(245,158,11,.45); }
/* 等效可聊（按当前套餐池实时计算，refreshVoiceEquiv 填充） */
.voice-equiv { font-size: 10px; color: var(--text-dim); opacity: .85; }
.settings-list {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 4px 20px 12px; display: flex; flex-direction: column; gap: 12px;
}
.settings-card {
  background: var(--bg-card); border: 1px solid var(--glass-border);
  border-radius: 12px; padding: 12px 14px;
}
.settings-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.settings-emoji-preview {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: rgba(255,255,255,.07); border: 1px solid var(--glass-border);
  overflow: hidden; /* 图片头像按圆形裁切 */
}
.settings-emoji-preview img { width: 100%; height: 100%; object-fit: cover; }
.settings-name {
  flex: 1; min-width: 0; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,.05);
  color: var(--text); font-size: 14px; font-weight: 600; outline: none;
}
.settings-name:focus { border-color: var(--accent); }
.settings-color {
  width: 36px; height: 36px; flex-shrink: 0; padding: 0; border: none;
  background: none; cursor: pointer; border-radius: 8px;
}
.settings-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.settings-row label { color: var(--text-dim); font-size: 12px; width: 38px; flex-shrink: 0; }
.settings-row label.settings-gender { width: auto; margin-left: 12px; }
.settings-voice, .settings-gender-sel {
  flex: 1; min-width: 0; padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,.05);
  color: var(--text); font-size: 13px; outline: none;
}
.settings-emoji {
  flex: 1; padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,.05);
  color: var(--text); font-size: 14px; outline: none;
}
.settings-prompt-label { display: block; color: var(--text-dim); font-size: 12px; margin: 4px 0 6px; }
.settings-prompt {
  width: 100%; padding: 8px 10px; border-radius: 8px; resize: vertical;
  border: 1px solid var(--glass-border); background: rgba(8,10,16,.5);
  color: var(--text); font-size: 13px; line-height: 1.6; outline: none; font-family: inherit;
}
.settings-prompt:focus { border-color: var(--accent); }
.modal-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px 16px; border-top: 1px solid var(--glass-border);
}
.modal-foot-spacer { flex: 1; }
/* Token 统计弹窗 */
.stats-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 4px 20px 12px;
}
.stats-loading { text-align: center; color: var(--text-dim); font-size: 13px; padding: 30px 0; }
/* ★V0.9.32★ 语音用量弹窗：进度条 + On-Demand 开关 + 加量包 */
.usage-box { width: min(520px, 94vw); }
.usage-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 20px 12px; }
.usage-loading, .usage-error { text-align: center; color: var(--text-dim); font-size: 13px; padding: 30px 0; }
.usage-error { color: #f87171; }
.usage-plan { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.usage-plan-name { font-size: 16px; font-weight: 800; }
.usage-plan-pool { font-size: 12px; color: var(--text-dim); }
.usage-plan-pool b { color: var(--accent); }
.usage-bar {
  height: 12px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.08); border: 1px solid var(--glass-border);
}
.usage-bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width .4s ease;
}
.usage-bar-fill.low { background: linear-gradient(90deg, #f59e0b, #f87171); }
.usage-bar-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-dim); margin: 6px 0 4px; }
.usage-low { color: #f87171; font-weight: 700; }
.usage-credit { font-size: 12px; color: #fbbf24; margin: 6px 0 2px; }
.usage-equiv {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  background: rgba(108,127,248,.12); border: 1px solid rgba(108,127,248,.3);
  font-size: 14px; color: var(--text);
}
.usage-equiv b { color: var(--accent2); }
.usage-engine-note { margin-top: 4px; font-size: 11px; color: var(--text-dim); }
.usage-sec { margin-top: 14px; }
.usage-sec-title { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; font-weight: 600; }
.usage-toggle {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 12px; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--glass-border);
}
.usage-toggle input { display: none; }
.usage-toggle-slider {
  width: 38px; height: 22px; flex-shrink: 0; border-radius: 999px; position: relative;
  background: rgba(255,255,255,.14); transition: background .2s ease;
}
.usage-toggle-slider::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform .2s ease;
}
.usage-toggle input:checked + .usage-toggle-slider { background: var(--accent); }
.usage-toggle input:checked + .usage-toggle-slider::after { transform: translateX(16px); }
.usage-toggle-text { flex: 1; font-size: 12px; color: var(--text); line-height: 1.5; }
.usage-od-caps { font-size: 11px; color: var(--text-dim); margin-top: 6px; }
.usage-topups { display: flex; gap: 8px; }
.usage-topup {
  flex: 1; padding: 10px 6px; border-radius: 10px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--glass-border);
  color: var(--text); font-size: 14px; font-weight: 700; transition: all .15s ease; font-family: inherit;
}
.usage-topup small { font-size: 11px; font-weight: 400; color: var(--text-dim); }
.usage-topup:hover { border-color: var(--accent); background: rgba(108,127,248,.14); }
.usage-topup-hint { font-size: 11px; color: var(--text-dim); margin-top: 6px; }
/* 开发日志弹窗 */
.changelog-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 4px 20px 12px; display: flex; flex-direction: column; gap: 14px;
}
.clog-item { background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: 12px; padding: 14px 16px; }
.clog-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.clog-ver {
  font-size: 15px; font-weight: 700; color: var(--accent);
  background: rgba(108,127,248,.15); border: 1px solid rgba(108,127,248,.35);
  padding: 2px 10px; border-radius: 10px;
}
.clog-date { font-size: 12px; color: var(--text-dim); }
.clog-title { font-size: 13px; color: var(--text); }
.clog-notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.clog-notes li { font-size: 12.5px; line-height: 1.6; color: var(--text-dim); }
.clog-notes li::marker { color: var(--accent); }
.stats-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.stats-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.05); color: var(--text); }
.stats-table td:nth-child(2) { text-align: right; color: var(--text-dim); white-space: nowrap; }
.stats-table td:nth-child(3) { text-align: right; white-space: nowrap; }
.stats-table .stats-sec td {
  background: rgba(108,127,248,.1); color: var(--accent);
  font-weight: 600; font-size: 12px; letter-spacing: .5px;
  border-radius: 8px; padding: 8px; margin-top: 6px;
}
.stats-table tr.stats-sec td { border-radius: 0; }
.stats-table tr.stats-sec:first-child td { border-radius: 8px 8px 0 0; }
.stats-table .stats-sub td { font-weight: 600; color: var(--text); background: rgba(255,255,255,.04); }
.stats-table .stats-total td { font-weight: 700; color: var(--accent); font-size: 14px; background: rgba(108,127,248,.14); }
.stats-table .stats-warn { color: #ff6b6b !important; font-weight: 700; } /* ★V0.9.18★ Polly 额度超限警示 */
.stats-table .stats-dim { color: var(--text-dim) !important; font-size: 12px; }
.stats-table .stats-empty { text-align: center; color: var(--text-dim); }
.stats-table .stats-ai td { font-weight: 600; }
.btn-ghost, .btn-primary {
  padding: 9px 20px; border-radius: 10px; border: none;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s ease;
}
.btn-ghost {
  background: rgba(255,255,255,.07); color: var(--text-dim); border: 1px solid var(--glass-border);
}
.btn-ghost:hover { color: #fff; background: rgba(255,255,255,.13); }
.btn-primary {
  background: linear-gradient(135deg, #6c7ff8, #9a6cf8); color: #fff;
  box-shadow: 0 6px 20px rgba(108,127,248,.35);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(108,127,248,.5); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ===== 单 AI 设置小面板（点击 AI 头像在旁弹出） ===== */
#ai-popover {
  position: fixed; z-index: 600; width: 240px; max-height: 70vh;
  padding: 14px; border-radius: 16px;
  background: rgba(18, 22, 34, .92); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 10px;
  animation: pop-in .18s ease;
}
@keyframes pop-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
#ai-popover .pop-close {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px;
  border: none; border-radius: 8px; background: rgba(255,255,255,.07);
  color: var(--text-dim); font-size: 13px; cursor: pointer;
}
#ai-popover .pop-close:hover { background: rgba(255,255,255,.15); color: #fff; }
.pop-head { display: flex; align-items: center; gap: 10px; padding-right: 24px; }
.pop-avatar {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--glass-border); flex-shrink: 0;
}
.pop-info { min-width: 0; }
.pop-name { font-size: 15px; font-weight: 700; color: var(--text); }
.pop-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.pop-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  color: var(--text-dim); text-transform: uppercase;
}
.pop-voices {
  display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto; min-height: 0; flex: 1; padding-right: 2px;
}
.pop-voice {
  text-align: left; padding: 7px 10px; border-radius: 9px;
  border: 1px solid transparent; background: rgba(255,255,255,.05);
  color: var(--text); font-size: 13px; cursor: pointer; transition: all .15s ease;
}
.pop-voice:hover { background: rgba(255,255,255,.1); }
.pop-voice.selected {
  background: rgba(108,127,248,.18); border-color: var(--accent);
  color: #fff; font-weight: 600;
}
.pop-reset {
  padding: 8px; border-radius: 9px; border: 1px dashed rgba(255,255,255,.18);
  background: transparent; color: var(--text-dim); font-size: 12px; cursor: pointer;
}
.pop-reset:hover { color: #fff; border-color: rgba(255,255,255,.35); }
/* 人设 / 提示词编辑区 */
.pop-prompt {
  width: 100%; padding: 8px 10px; border-radius: 10px; resize: vertical;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,.05);
  color: var(--text); font-size: 13px; line-height: 1.55; outline: none;
  font-family: inherit; min-height: 74px; max-height: 180px;
}
.pop-prompt:focus { border-color: var(--accent); background: rgba(255,255,255,.08); }
.pop-prompt::placeholder { color: var(--text-dim); }
.pop-prompt-actions { display: flex; gap: 8px; flex-shrink: 0; }
.pop-save {
  flex: 1; padding: 7px 10px; border-radius: 9px; border: none;
  background: linear-gradient(135deg, #6c7ff8, #9a6cf8); color: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity .15s ease;
}
.pop-save:hover { opacity: .88; }
.pop-link {
  padding: 7px 10px; border-radius: 9px; border: 1px solid var(--glass-border);
  background: transparent; color: var(--text-dim); font-size: 12px; cursor: pointer;
}
.pop-link:hover { color: #fff; border-color: rgba(255,255,255,.35); }

/* ===== 套餐体系（V0.8.1）===== */
/* 锁定音色：灰化 + 点击弹升级引导 */
.pop-voice.locked { filter: grayscale(.8); opacity: .6; color: var(--text-dim); }
/* 锁定包间卡：灰化 + 锁图标，点击弹升级引导 */
.room-card.locked {
  filter: grayscale(.85); opacity: .62;
  cursor: not-allowed; background: rgba(255,255,255,.03);
}
.room-card.locked:hover { transform: none; background: rgba(255,255,255,.03); border-color: var(--glass-border); }
.room-card .rc-tags .tag-lock { color: #fcd34d; border-color: rgba(252,211,77,.45); background: rgba(252,211,77,.1); }
.room-card.locked .rc-tags .tag-lock { animation: lockPulse 2s ease-in-out infinite; }
@keyframes lockPulse { 0%,100% { opacity: .75; } 50% { opacity: 1; } }

/* 顶栏套餐入口（★V0.9.37★ 去 emoji，改为文字标签）：文字按钮 + 档位角标 */
.pricing-btn { position: relative; }
.pricing-btn .tier-badge {
  position: absolute; top: -6px; right: -8px;
  background: linear-gradient(90deg, #6c7ff8, #a78bfa); color: #fff;
  font-size: 9px; font-weight: 800; line-height: 1; padding: 3px 6px; border-radius: 999px;
  pointer-events: none;
}

/* 升级引导弹层 */
.upgrade-body { padding: 6px 20px 4px; }
.upgrade-plan {
  font-size: 14px; color: var(--text); background: rgba(108,127,248,.12);
  border: 1px solid rgba(108,127,248,.35); border-radius: 10px; padding: 10px 14px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.upgrade-plan b { color: #fff; font-size: 15px; }
.upgrade-plan small { color: var(--text-dim); font-size: 12px; }
.upgrade-perks { list-style: none; margin: 14px 0 0; display: flex; flex-direction: column; gap: 9px; }
.upgrade-perks li { font-size: 13px; color: var(--text-dim); padding-left: 18px; position: relative; line-height: 1.5; }
.upgrade-perks li::before { content: '✦'; position: absolute; left: 0; color: var(--accent2); }
.upgrade-note {
  margin-top: 16px; font-size: 12px; color: #fcd34d; text-align: center;
  border-top: 1px dashed rgba(255,255,255,.14); padding-top: 12px;
}

/* Mock 档位切换器（设置面板入口 + 弹层） */
.tier-panel { display: flex; flex-direction: column; gap: 8px; }
.tier-test-entry { width: 100%; }
.tier-test-list { display: flex; flex-direction: column; gap: 8px; padding: 6px 20px 18px; }
.tier-test-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 10px 14px; border-radius: 11px; text-align: left;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,.05);
  color: var(--text); font-size: 13px; cursor: pointer; transition: all .15s ease;
}
.tier-test-opt:hover { background: rgba(108,127,248,.14); border-color: rgba(108,127,248,.5); }
.tier-test-opt.selected {
  border-color: var(--accent); background: rgba(108,127,248,.2);
  box-shadow: inset 0 0 0 1px rgba(108,127,248,.4);
}
.tier-test-opt b { font-size: 14px; }
.tier-test-opt span { font-size: 12px; color: var(--text-dim); }
.tier-test-opt small { font-size: 11px; color: var(--accent2); }

/* ============================================================
   轻奢渐变主题（V0.8.2 视觉升级）
   设计语言：深墨蓝底 + 金色/香槟点缀 + 卡片顶部高光渐变 + 金线描边。
   全部为覆盖层：不改动既有布局与 JS 依赖的类名，回退只需删除本段。
   ============================================================ */
:root {
  --gold: #d8b877;            /* 主金 */
  --gold-bright: #f3e3bb;     /* 亮金 / 香槟 */
  --gold-deep: #a5813f;       /* 暗金 */
  --gold-line: rgba(216,184,119,.32);   /* 金线（描边） */
  --gold-strong: rgba(216,184,119,.55); /* 金晕（hover/选中） */
  --gold-soft: rgba(216,184,119,.12);   /* 金色底 */
  --gold-grad: linear-gradient(135deg, #c8a25d 0%, #f2dfa5 48%, #c8a25d 100%);
  --bg: #0a0c13;                       /* 暖墨蓝黑底 */
  --bg-panel: rgba(26,24,32,.8);
  --bg-card: rgba(34,30,40,.68);
}

/* —— 背景氛围：暖墨蓝渐变 + 顶部金色暖光 + 金色星点 —— */
#ambient { background: linear-gradient(165deg, #0b0e16 0%, #1a1426 46%, #0d0a12 100%); }
#ambient::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(700px 420px at 50% -8%, rgba(216,184,119,.16), transparent 65%),
    radial-gradient(500px 320px at 8% 12%, rgba(216,184,119,.07), transparent 60%);
}
.stars { opacity: .6; }
.stars::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 46% 28%, rgba(243,227,187,.9) 0, transparent 100%),
    radial-gradient(1px 1px at 74% 52%, rgba(216,184,119,.8) 0, transparent 100%),
    radial-gradient(1.5px 1.5px at 18% 64%, rgba(243,227,187,.7) 0, transparent 100%);
}

/* —— 进入页：金色辉光 + 金色渐变标题 + 金色进入按钮 —— */
#enter-mask {
  background:
    radial-gradient(900px 460px at 50% -6%, rgba(216,184,119,.12), transparent 62%),
    radial-gradient(1100px 560px at 50% 112%, rgba(108,127,248,.1), transparent 60%),
    #0a0c13;
}
.enter-box {
  position: relative; overflow-x: hidden; overflow-y: auto;
  background: linear-gradient(180deg, rgba(32,29,38,.72), rgba(20,20,28,.66));
  border: 1px solid rgba(216,184,119,.22);
  box-shadow: 0 30px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(243,227,187,.14);
}
/* 顶部金色高光线 + 右上左下角落辉光 */
.enter-box::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .7;
}
.enter-box::after {
  content: ''; position: absolute; top: -60px; right: -60px; width: 180px; height: 180px;
  border-radius: 50%; background: radial-gradient(circle, rgba(216,184,119,.14), transparent 70%);
  pointer-events: none;
}
.enter-logo {
  filter: drop-shadow(0 0 26px rgba(216,184,119,.55)) drop-shadow(0 6px 18px rgba(0,0,0,.4));
}
.enter-box h1 {
  font-weight: 800;
  background: linear-gradient(120deg, #f6e7bd 10%, #d8b877 45%, #f6e7bd 80%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 14px rgba(216,184,119,.28));
}
.enter-box p { color: #9aa2b8; letter-spacing: .4px; }
#enter-name {
  background: rgba(255,255,255,.05); border: 1px solid rgba(216,184,119,.22);
  color: #f0ead9; caret-color: var(--gold-bright);
}
#enter-name:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(216,184,119,.12); }
.avatar-opt:hover { background: var(--gold-soft); }
.avatar-opt.selected {
  border-color: var(--gold); background: var(--gold-soft);
  box-shadow: 0 0 14px rgba(216,184,119,.35);
}
#enter-btn {
  background: var(--gold-grad); color: #3a2c10; font-weight: 800;
  box-shadow: 0 10px 32px rgba(216,184,119,.35), inset 0 1px 0 rgba(255,255,255,.5);
}
#enter-btn:hover { box-shadow: 0 14px 42px rgba(216,184,119,.5), inset 0 1px 0 rgba(255,255,255,.55); }
.enter-log { border-color: rgba(216,184,119,.2); color: rgba(243,227,187,.55); }
.enter-log:hover { border-color: var(--gold); color: #f6e7bd; background: var(--gold-soft); }
.enter-ver { color: rgba(243,227,187,.3); }
.enter-tagline { color: rgba(243,227,187,.48); }

/* 进入页套餐按钮：金边 + 金渐变角标 */
.enter-pricing {
  background: var(--gold-soft); border-color: rgba(216,184,119,.5); color: #eeda9e;
}
.enter-pricing:hover { background: rgba(216,184,119,.24); color: #fdf3d7; box-shadow: 0 0 14px rgba(216,184,119,.35); }
.enter-pricing .tier-badge, .pricing-btn .tier-badge {
  background: var(--gold-grad); color: #3a2c10;
}

/* —— 包间卡：顶部高光 + 金边选中 + 锁标金色脉冲 —— */
.room-card {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(216,184,119,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.room-card:hover {
  transform: translateY(-2px); border-color: rgba(216,184,119,.55);
  background: linear-gradient(180deg, rgba(216,184,119,.16), rgba(216,184,119,.04));
  box-shadow: 0 8px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(243,227,187,.14);
}
.room-card.selected {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(216,184,119,.24), rgba(216,184,119,.06));
  box-shadow: 0 0 20px rgba(216,184,119,.32), inset 0 0 0 1px rgba(216,184,119,.5), inset 0 1px 0 rgba(243,227,187,.2);
}
.room-card .rc-tags i { border-color: rgba(216,184,119,.18); background: rgba(216,184,119,.08); color: #cbb88a; }
.room-card.selected .rc-tags i { background: rgba(216,184,119,.22); color: #f6e7bd; border-color: rgba(216,184,119,.4); }

/* —— 顶栏：玻璃面板 + 底部金线 + 金色状态点 —— */
#topbar {
  background: rgba(16,15,22,.62);
  box-shadow: 0 1px 0 rgba(216,184,119,.14), 0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.live-dot { background: var(--gold); box-shadow: 0 0 8px rgba(216,184,119,.9); }
.bgm-btn:hover { border-color: rgba(216,184,119,.5); background: rgba(216,184,119,.1); color: #f6e7bd; }
.bgm-btn.on { border-color: var(--gold); color: var(--gold-bright); }
.topic-label { color: #c9b98c; }

/* —— 舞台：咖啡馆场景金色氛围 + 话题卡金渐变 + 说话金圈 —— */
#cafe-scene {
  box-shadow: inset 0 -80px 120px rgba(216,184,119,.05), inset 0 0 90px rgba(216,184,119,.03);
}
.cafe-table { border-color: rgba(216,184,119,.4); box-shadow: 0 0 34px rgba(216,184,119,.12), inset 0 0 40px rgba(216,184,119,.06); }
.table-topic {
  background: linear-gradient(135deg, rgba(216,184,119,.22), rgba(216,184,119,.05));
  border: 1px solid rgba(216,184,119,.4);
  box-shadow: 0 6px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(243,227,187,.18);
}
.seat .seat-avatar { border-color: rgba(216,184,119,.28); }
.seat.speaking .seat-avatar { border-color: var(--gold-bright); box-shadow: 0 0 22px rgba(216,184,119,.55); }
.seat.speaking .seat-name { color: #f6e7bd; text-shadow: 0 0 14px rgba(216,184,119,.7); }
.seat.speaking .seat-avatar::before { border-color: rgba(243,227,187,.7); }
.seat .seat-wave i { background: var(--gold-bright); }

/* —— 话题区 / 面板 —— */
.topic-chip.active { border-color: var(--gold); background: var(--gold-soft); color: #f6e7bd; }
.topic-chip:hover { background: rgba(216,184,119,.14); }
.topic-more:hover { background: rgba(216,184,119,.2); }
.panel-btn:hover { background: rgba(216,184,119,.12); color: #f6e7bd; }

/* —— 底部操作栏 —— */
.chat-box input { border-color: rgba(216,184,119,.2); }
.chat-box input:focus { border-color: var(--gold); box-shadow: 0 0 12px rgba(216,184,119,.22); }
.dock-round { background: rgba(46,42,52,.72); border: 1px solid rgba(216,184,119,.16); }
.dock-round:hover { background: rgba(216,184,119,.16); }
.dock-round.hold.active { background: var(--gold-grad); color: #3a2c10; box-shadow: 0 0 26px rgba(216,184,119,.5); }

/* —— 弹层：顶部金线 + 玻璃渐变 + 金色主按钮 —— */
.modal-box {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(30,27,36,.92), rgba(18,17,25,.94));
  border: 1px solid rgba(216,184,119,.24);
  box-shadow: 0 34px 100px rgba(0,0,0,.7), inset 0 1px 0 rgba(243,227,187,.12);
}
.modal-box::before {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .75;
}
.modal-close:hover { background: rgba(216,184,119,.14); color: #f6e7bd; }
.btn-primary { background: var(--gold-grad); color: #3a2c10; box-shadow: 0 6px 22px rgba(216,184,119,.3), inset 0 1px 0 rgba(255,255,255,.4); }
.btn-primary:hover { box-shadow: 0 10px 30px rgba(216,184,119,.45), inset 0 1px 0 rgba(255,255,255,.45); }
.btn-ghost:hover { border-color: var(--gold); color: #f6e7bd; background: var(--gold-soft); }

/* 设置面板：节奏/语音引擎/聊天风格 选中金态 */
.tempo-opt.selected, .voice-opt.selected {
  border-color: var(--gold); background: rgba(216,184,119,.18); color: #f6e7bd;
  box-shadow: 0 0 0 1px var(--gold) inset, 0 0 14px rgba(216,184,119,.18);
}
.tempo-opt:hover, .voice-opt:hover { border-color: rgba(216,184,119,.5); color: #f6e7bd; }
.pop-voice.selected { border-color: var(--gold); background: rgba(216,184,119,.2); color: #f6e7bd; }
.pop-voice:hover { background: rgba(216,184,119,.1); }
.tier-test-opt:hover { border-color: rgba(216,184,119,.5); background: rgba(216,184,119,.13); }
.tier-test-opt.selected { border-color: var(--gold); background: rgba(216,184,119,.2); box-shadow: inset 0 0 0 1px rgba(216,184,119,.45); }
.tier-test-opt small { color: var(--gold); }
.settings-save.btn-primary:disabled { opacity: .5; }

/* —— 升级引导弹层：金色权益符号 —— */
.upgrade-plan { background: rgba(216,184,119,.1); border-color: rgba(216,184,119,.4); }
.upgrade-plan b { color: #f6e7bd; }
.upgrade-perks li::before { color: var(--gold); }
.upgrade-note { color: var(--gold-bright); }

/* —— Toast / 状态条：金边框 —— */
#toast { border: 1px solid rgba(216,184,119,.4); background: rgba(20,18,26,.92); }
#net-banner { border: 1px solid rgba(216,184,119,.35); }

/* ============================================================
   V0.8.3 封面图卡（房间卡片升级）
   卡片 = 背景图 + 渐隐遮罩 + 底部标题，让用户先"看见"每个房间的氛围；
   背景图缺失时自动降级为大 emoji + 渐变底。
   锁定房间不再整卡灰化——背景图正常展示，仅右上角锁徽章引导升级。
   ============================================================ */
.room-card {
  position: relative; overflow: hidden; padding: 0; text-align: left;
  height: 118px; border-radius: 14px; background: #16121f;
  border: 1px solid rgba(216,184,119,.2);
  cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.room-card .rc-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .92; transition: transform .3s ease, opacity .2s ease;
}
.room-card:hover .rc-bg { transform: scale(1.05); opacity: 1; }
.room-card .rc-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,8,16,.04) 0%, rgba(10,8,16,.12) 45%, rgba(10,8,16,.85) 100%);
}
.room-card .rc-icon {
  position: absolute; top: 9px; left: 11px; font-size: 21px; line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.65));
}
.room-card .rc-body {
  position: absolute; left: 12px; right: 12px; bottom: 9px;
  display: flex; flex-direction: column; gap: 2px;
}
.room-card .rc-body b {
  font-size: 14px; color: #fff; line-height: 1.2;
  text-shadow: 0 1px 6px rgba(0,0,0,.75);
}
.room-card .rc-body small {
  font-size: 11px; color: rgba(240,235,222,.88); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 4px rgba(0,0,0,.65);
}
.room-card .rc-tags { display: flex; gap: 4px; margin-top: 4px; }
.room-card .rc-tags i {
  font-style: normal; font-size: 10px; padding: 1px 7px; border-radius: 999px;
  background: rgba(10,8,16,.55); border: 1px solid rgba(255,255,255,.22);
  color: #efe9d8; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.room-card .rc-tags i { border-color: rgba(216,184,119,.22); color: #e9d9a8; }

/* 锁定态：整卡正常展示（氛围可见），右上角锁徽章 + 遮罩稍深 */
.room-card.locked { filter: none; opacity: 1; background: #16121f; cursor: pointer; }
.room-card.locked .rc-veil {
  background: linear-gradient(180deg, rgba(10,8,16,.28), rgba(10,8,16,.5) 55%, rgba(10,8,16,.9) 100%);
}
.room-card .rc-lock {
  position: absolute; top: 8px; right: 8px;
  font-size: 10px; font-weight: 700; color: #f6e7bd; letter-spacing: .3px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(58,44,16,.78); border: 1px solid rgba(216,184,119,.6);
  box-shadow: 0 2px 12px rgba(0,0,0,.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.room-card.locked:hover {
  transform: translateY(-2px); border-color: rgba(216,184,119,.6);
  box-shadow: 0 10px 28px rgba(0,0,0,.5), 0 0 0 1px rgba(216,184,119,.25);
}
/* 选中态：金边框 + 顶部金线 + 遮罩微金 */
.room-card.selected { border-color: var(--gold); box-shadow: 0 0 20px rgba(216,184,119,.35), inset 0 0 0 1px rgba(216,184,119,.55); }
.room-card.selected .rc-veil {
  background: linear-gradient(180deg, rgba(216,184,119,.12), rgba(10,8,16,.14) 45%, rgba(10,8,16,.85) 100%);
}
.room-card.selected::after {
  content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  pointer-events: none;
}
.room-card.locked .rc-tags { visibility: hidden; }

/* ============================================================
   V0.8.4 首页加宽 + 房间内「我的资料」面板
   首页恢复舒展宽度（4 列封面卡更宽）；昵称/头像移入设置面板
   ============================================================ */
.enter-box { width: 700px; max-width: 96vw; }
.room-picker { gap: 10px; }
/* 设置面板内容变多（新增我的资料）：弹层整体可滚动兜底，防止小屏溢出 */
#settings-modal .modal-box { overflow-y: auto; }
.my-profile-panel { text-align: left; }
.my-profile-row { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.my-profile-row input {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; font-size: 13px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(216,184,119,.25); color: #f0ead9;
  caret-color: var(--gold-bright);
}
.my-profile-row input:focus {
  border-color: var(--gold); outline: none;
  box-shadow: 0 0 0 3px rgba(216,184,119,.12);
}
.my-profile-row .my-save { flex: none; padding: 9px 18px; font-size: 13px; }
.avatar-picker.compact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.avatar-picker.compact .avatar-opt.img-opt { width: 42px; height: 42px; }

/* ============================================================
   V0.9.0 首页大卡片 + 光影动效 + 资料弹层 + 首页音乐控制
   ============================================================ */
/* 1) 房间卡片加大：4 列 × 168px，标题/描述/标签层级放大，"看起来很爽" */
.room-card { height: 168px; border-radius: 18px; }
.room-card .rc-icon { top: 14px; left: 15px; font-size: 30px; }
.room-card .rc-body { left: 16px; right: 16px; bottom: 14px; }
.room-card .rc-body b { font-size: 17px; }
.room-card .rc-body small { font-size: 12.5px; line-height: 1.4; }
.room-card .rc-tags { gap: 6px; margin-top: 7px; }
.room-card .rc-tags i { font-size: 11px; padding: 2.5px 9px; }
.room-card .rc-lock { top: 12px; right: 12px; font-size: 11px; padding: 4px 10px; }

/* 2) 进入页右上角音乐控制（静音开关 + 音量，随机播一首背景音乐） */
.enter-bgm {
  position: fixed; top: 18px; right: 20px; z-index: 5;
  display: flex; align-items: center; gap: 10px;
}
.enter-bgm .bgm-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(216,184,119,.3);
  color: #f0ead9; font-size: 18px; cursor: pointer; transition: all .2s;
  display: flex; align-items: center; justify-content: center;
}
/* ★V0.9.37★ 进入页文字按钮（去 emoji）：auto 宽度 pill 形状 */
.enter-bgm .bgm-btn.txt {
  width: auto; min-width: 46px; padding: 0 13px; border-radius: 17px;
  font-size: 13px; white-space: nowrap;
}
.enter-bgm .bgm-btn:hover { border-color: var(--gold); box-shadow: 0 0 12px rgba(216,184,119,.25); }
.enter-bgm .bgm-btn.on { color: var(--gold-bright); }
/* ★V0.10.0★ 语言切换下拉菜单（文字 + 国旗，English 第一 / 中文 第二） */
.enter-lang { position: relative; }
.enter-lang .lang-btn {
  width: auto; min-width: 108px; padding: 0 13px; border-radius: 17px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 13px; white-space: nowrap;
}
.enter-lang .lang-flag { font-size: 16px; line-height: 1; }
.enter-lang .lang-name { color: #f0ead9; }
.enter-lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 150px;
  background: rgba(16,20,30,.97); border: 1px solid rgba(216,184,119,.35);
  border-radius: 10px; padding: 5px; z-index: 30;
  display: none; box-shadow: 0 10px 26px rgba(0,0,0,.55);
}
.enter-lang.open .enter-lang-menu { display: block; }
.enter-lang-menu .lang-option {
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 7px; border: none; background: transparent;
  color: #f0ead9; font-size: 13.5px; cursor: pointer; text-align: left; white-space: nowrap;
  transition: background .15s;
}
.enter-lang-menu .lang-option:hover { background: rgba(255,255,255,.08); }
.enter-lang-menu .lang-option.on { color: var(--gold-bright); background: rgba(216,184,119,.13); }
.enter-lang-menu .lang-option .lang-option-name { color: inherit; }
.bgm-volume {
  width: 90px; accent-color: var(--gold); cursor: pointer; opacity: .85;
}
.bgm-volume:hover { opacity: 1; }

/* 3) 我的资料弹层（首次完善资料 / 房间内编辑共用） */
.profile-box { width: 420px; max-width: 92vw; padding: 22px 24px 26px; text-align: left; }
.profile-box > input {
  width: 100%; box-sizing: border-box; margin-top: 14px; padding: 12px 14px;
  border-radius: 12px; font-size: 15px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(216,184,119,.25); color: #f0ead9; caret-color: var(--gold-bright);
}
.profile-box > input:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(216,184,119,.12); }
.profile-box .avatar-picker { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.profile-box .avatar-opt.img-opt { width: 52px; height: 52px; }
.profile-start {
  width: 100%; margin-top: 18px; padding: 13px 0; font-size: 16px; font-weight: 600;
  background: var(--gold-grad); color: #2a1f10;
  border: none; border-radius: 14px; cursor: pointer; letter-spacing: .5px;
  box-shadow: 0 6px 20px rgba(216,184,119,.25);
}
.profile-start:hover { filter: brightness(1.06); }

/* 4) 首页光影动效：扫描流光 + 暖色光斑漂移 + 卡片呼吸辉光（聊天室氛围感） */
#enter-mask::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(216,184,119,.07) 45%, rgba(243,227,187,.13) 50%, rgba(216,184,119,.07) 55%, transparent 68%);
  background-size: 260% 100%;
  animation: enterSweep 8s ease-in-out infinite;
}
@keyframes enterSweep {
  0%, 100% { background-position: 220% 0; }
  50% { background-position: -40% 0; }
}
#enter-mask::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(360px 260px at 18% 28%, rgba(216,184,119,.13), transparent 70%),
    radial-gradient(320px 240px at 84% 18%, rgba(111,131,255,.1), transparent 70%),
    radial-gradient(420px 300px at 62% 96%, rgba(216,184,119,.1), transparent 70%);
  background-size: 200% 200%, 180% 180%, 220% 220%;
  animation: enterDrift 16s ease-in-out infinite alternate;
}
@keyframes enterDrift {
  0% { background-position: 0 0, 0 0, 0 0; }
  50% { background-position: 30% 20%, -20% 30%, 10% -15%; }
  100% { background-position: 15% -10%, 25% 15%, -20% 25%; }
}
.enter-box { animation: boxBreath 6s ease-in-out infinite; }
@keyframes boxBreath {
  0%, 100% { box-shadow: 0 30px 90px rgba(0,0,0,.62), inset 0 1px 0 rgba(243,227,187,.16), 0 0 34px rgba(216,184,119,.05); }
  50% { box-shadow: 0 30px 90px rgba(0,0,0,.62), inset 0 1px 0 rgba(243,227,187,.16), 0 0 64px rgba(216,184,119,.16); }
}

/* 5) 我的座位可点击提示（V0.9.0 点自己头像改资料） */
#my-seat { cursor: pointer; }
#my-seat:hover .seat-inner { border-color: rgba(216,184,119,.5); }

/* ============================================================
   V0.9.1 首页卡片加宽：2 列大卡，封面更大气更爽
   房间内换包间弹层：2 列紧凑大卡（避免弹层超高）
   ============================================================ */
#enter-mask .room-picker { grid-template-columns: repeat(2, 1fr); gap: 14px; }
#enter-mask .room-card { height: 180px; border-radius: 20px; }
#enter-mask .room-card .rc-icon { top: 16px; left: 18px; font-size: 36px; }
#enter-mask .room-card .rc-body { left: 20px; right: 20px; bottom: 18px; }
#enter-mask .room-card .rc-body b { font-size: 19px; }
#enter-mask .room-card .rc-body small { font-size: 13px; line-height: 1.45; }
#enter-mask .room-card .rc-tags { gap: 8px; margin-top: 8px; }
#enter-mask .room-card .rc-tags i { font-size: 12px; padding: 3px 11px; }
#enter-mask .room-card .rc-lock { top: 14px; right: 14px; font-size: 12px; padding: 5px 12px; }

#room-picker-modal .room-picker { grid-template-columns: repeat(2, 1fr); gap: 12px; }
#room-picker-modal .modal-box { overflow-y: auto; }
#room-picker-modal .room-card { height: 140px; border-radius: 16px; }
#room-picker-modal .room-card .rc-icon { top: 12px; left: 14px; font-size: 26px; }
#room-picker-modal .room-card .rc-body { left: 16px; right: 16px; bottom: 12px; }
#room-picker-modal .room-card .rc-body b { font-size: 15px; }
#room-picker-modal .room-card .rc-body small { font-size: 11.5px; }
#room-picker-modal .room-card .rc-tags { margin-top: 6px; }
#room-picker-modal .room-card .rc-tags i { font-size: 10.5px; padding: 2px 8px; }
#room-picker-modal .room-card .rc-lock { top: 10px; right: 10px; font-size: 10.5px; padding: 3px 9px; }

/* ============================================================
   V0.9.2 房间专属背景 + 首页卡片按比例缩小（一屏展示）
   ============================================================ */
/* 房间舞台背景层：JS 按包间切换 bg-<id>.png，置于场景最底层 */
.scene-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center 40%; background-repeat: no-repeat;
  opacity: 0; transition: opacity .6s ease;
}
.scene-bg.on { opacity: 1; }

/* 首页卡片（V0.9.3）：桌面 4 列 × 2 行大卡（上下各 4 个），进入页加宽更爽；移动端保持 2 列（820px 以下媒体查询） */
#enter-mask .enter-box { padding: 30px 40px; }
#enter-mask .room-picker { gap: 12px; }
@media (min-width: 821px) {
  #enter-mask .enter-box { width: 920px; }
  #enter-mask .room-picker { grid-template-columns: repeat(4, 1fr); }
  #enter-mask .room-card { height: 210px; border-radius: 18px; }
  #enter-mask .room-card .rc-icon { top: 14px; left: 16px; font-size: 30px; }
  #enter-mask .room-card .rc-body { left: 18px; right: 18px; bottom: 16px; }
  #enter-mask .room-card .rc-body b { font-size: 17px; }
  #enter-mask .room-card .rc-body small { font-size: 12px; line-height: 1.4; }
  #enter-mask .room-card .rc-tags { gap: 7px; margin-top: 8px; }
  #enter-mask .room-card .rc-tags i { font-size: 11px; padding: 3px 10px; }
  #enter-mask .room-card .rc-lock { top: 12px; right: 12px; font-size: 11px; padding: 4px 10px; }
}

/* ============================================================
   V0.9.4 卡片保持长方形比例 + 一屏展示
   说明：V0.9.3 卡片 210px 高接近正方形且内容超高需滚动，
        本段将桌面卡片降为长方形（宽约 205px / 高 160px），
        并压缩 logo/标题/按钮/底部间距，保证
        「进入直播间」按钮与底部版本号行一屏内全部可见。
   ============================================================ */
#enter-mask .enter-box { padding: 22px 36px 24px; }
#enter-mask .enter-logo { font-size: 46px; }
#enter-mask .enter-box h1 { margin: 8px 0 2px; font-size: 24px; letter-spacing: 2px; }
#enter-mask .enter-box p { margin-bottom: 14px; font-size: 13px; }
#enter-mask .enter-rooms { margin: 0 0 12px; }
#enter-mask .enter-rooms-title { margin-bottom: 8px; }
#enter-mask #enter-btn { padding: 11px 40px; font-size: 16px; }
#enter-mask .enter-foot { margin-top: 14px; }
@media (min-width: 821px) {
  #enter-mask .room-card { height: 160px; border-radius: 16px; }
  #enter-mask .room-card .rc-icon { top: 12px; left: 14px; font-size: 26px; }
  #enter-mask .room-card .rc-body { left: 16px; right: 16px; bottom: 14px; }
  #enter-mask .room-card .rc-body b { font-size: 16px; }
  #enter-mask .room-card .rc-body small { font-size: 11.5px; line-height: 1.35; }
  #enter-mask .room-card .rc-tags { gap: 6px; margin-top: 6px; }
  #enter-mask .room-card .rc-tags i { font-size: 10.5px; padding: 2px 9px; }
  #enter-mask .room-card .rc-lock { top: 10px; right: 10px; font-size: 10.5px; padding: 3px 9px; }
}

/* V0.9.4 话题气泡：降低半透明干扰（房间背景图会透过来），改为高不透明度金底深字 */
.table-topic {
  background: linear-gradient(135deg, rgba(221,186,116,.95), rgba(196,156,92,.9));
  color: #2b2010;
  border: 1px solid rgba(255,240,205,.7);
  box-shadow: 0 6px 22px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,244,214,.6);
}

/* ============================================================
   V0.9.5 首页设置弹层 + 统计时间维度（每分钟/每小时 token 与字节）
   ============================================================ */
/* 首页设置弹层：我的资料 + Mock 档位轻量面板（进房前也能改） */
.home-settings-box { width: 440px; max-width: 92vw; padding: 20px 22px 22px; text-align: left; }
.home-settings-sec { margin: 16px 0 8px; font-size: 13.5px; font-weight: 700; color: #f0ead9; }
.home-settings-sec small { display: block; font-weight: 400; font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.home-settings-box > input {
  width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: 12px; font-size: 15px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(216,184,119,.25); color: #f0ead9;
  caret-color: var(--gold-bright); outline: none;
}
.home-settings-box > input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(216,184,119,.12); }
.home-settings-box .avatar-picker { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; }
.home-settings-save { width: 100%; margin-top: 14px; }
.home-settings-box .tier-test-list { padding: 6px 0 0; }

/* 统计弹窗时间维度：近 24 小时 / 近 60 分钟消耗曲线表 */
.stats-timeline { flex: 1.2; min-height: 0; overflow-y: auto; padding: 0 20px 12px; }
.stats-tl-sec { margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: var(--accent); }
.stats-tl-table th {
  text-align: left; font-size: 11.5px; color: var(--text-dim); padding: 4px 8px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.stats-tl-table td { text-align: right; }
.stats-tl-table td:first-child, .stats-tl-table th:first-child { text-align: left; white-space: nowrap; }


/* ============================================================
   V0.9.15 头像清晰度 + 说话态增强
   问题：未说话座位整卡 opacity:.55 半透明，头像与房间背景图
        叠在一起看不清。
   方案：未说话也全清晰（opacity 1），不再用半透明做弱化；
        区分度全靠说话态增强——头像放大 1.14 + 强金色呼吸光圈
        + 更大光晕 + 金色名字高亮。
   ============================================================ */
.seat { opacity: 1; }
.seat.speaking { opacity: 1; }

/* 说话态头像：放大 + 强金色光圈（覆盖原 speakRing 弱光圈，动画 box-shadow 优先级更高） */
.seat.speaking .seat-avatar {
  transform: scale(1.14);
  transition: transform .2s ease;
  animation: speakRingV2 1s ease-in-out infinite;
  z-index: 2; /* 放大后盖住相邻座位，视觉焦点更强 */
}
/* 说话态背后光晕：比原来更大更亮 */
.seat.speaking .seat-avatar::before {
  inset: -14px;
  background: radial-gradient(circle, rgba(243,227,187,.85), rgba(216,184,119,.6) 55%, transparent 78%);
}
@keyframes speakRingV2 {
  0%, 100% { box-shadow: 0 0 0 4px rgba(216,184,119,.6), 0 0 26px rgba(216,184,119,.55); }
  50% { box-shadow: 0 0 0 8px rgba(216,184,119,.25), 0 0 52px rgba(216,184,119,.95); }
}

/* 说话态名字：更亮更金，与未说话（正常浅色）拉开对比 */
.seat.speaking .seat-name {
  color: #ffedc4;
  text-shadow: 0 0 16px rgba(255,221,153,.95), 0 2px 6px rgba(0,0,0,.7);
}

/* 移动端小座位说话态放大（略小，避免遮住名字） */
.m-seat.speaking .seat-avatar { transform: scale(1.1); }