/* ═══════════ TOP BAR ═══════════ */
#topbar{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:rgba(254,252,247,.92);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border-subtle);z-index:100;flex-shrink:0;
}
.back-btn{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--border-default);
  background:var(--bg-glass);color:var(--text-secondary);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all var(--dur) var(--ease-out);
}
.back-btn:active{transform:scale(.92)}
#topbar-brand{display:flex;align-items:center;gap:8px;flex:1}
#topbar-logo{font-size:24px}
#topbar-title{font-size:15px;font-weight:700;letter-spacing:.3px}
#topbar-sub{font-size:11px;color:var(--text-muted)}
#table-tag{
  background:var(--accent-soft);border:1px solid rgba(234,88,12,.15);
  border-radius:var(--r-full);padding:5px 14px;font-size:12px;color:var(--accent);
  white-space:nowrap;font-weight:600;
}
/* 桌号内联标签（在标题中） */
#table-num-inline { font-weight:700; }

/* 会员等级六边形 — 在 member-tag 左侧外部 */
#member-hex-outer {
  display:inline-block; width:18px; height:20px; flex-shrink:0;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  margin-right:-2px; position:relative; z-index:1;
  transition:all var(--dur);
}
/* 会员标签 */
#member-tag{
  display:flex; align-items:center; gap:4px; padding:4px 10px 4px 8px;
  border-radius:var(--r-full); font-size:11px; font-weight:600;
  cursor:pointer; transition:all var(--dur) var(--ease-out);
  white-space:nowrap; flex-shrink:0;
}
#member-tag-icon{ font-size:14px; }

/* ── 无会员 — 灰色 ── */
#member-hex-outer.no-member { background:#d6d0c8; }
#member-tag.no-member { background:rgba(168,162,158,.08); border:1px solid rgba(168,162,158,.2); color:var(--text-muted); }

/* ── 普通 — 青铜 ── */
#member-hex-outer.lv-bronze { background:linear-gradient(135deg,#cd7f32,#a06828); }
#member-tag.lv-bronze { background:linear-gradient(135deg,rgba(205,127,50,.12),rgba(180,100,40,.06)); border:1px solid rgba(205,127,50,.25); color:#8b5e34; }

/* ── 银卡 — 亮银色（金属光泽） ── */
#member-hex-outer.lv-silver { background:linear-gradient(135deg,#f0ece8,#d4cfc8,#b8b2ab,#d4cfc8); background-size:200% 200%; animation:silverShine 3s ease-in-out infinite; box-shadow:0 0 10px rgba(192,186,178,.5); }
@keyframes silverShine { 0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%} }
#member-tag.lv-silver { background:linear-gradient(135deg,rgba(210,205,195,.18),rgba(190,185,175,.10)); border:1px solid rgba(180,172,160,.45); color:#5c5750; }

/* ── 金卡 — 金色 ── */
#member-hex-outer.lv-gold { background:linear-gradient(135deg,#f59e0b,#d97706); }
#member-tag.lv-gold { background:linear-gradient(135deg,rgba(217,119,6,.12),rgba(180,100,5,.06)); border:1px solid rgba(217,119,6,.3); color:#92400e; }

/* ── 钻石 — 紫色 + 六边形粒子扫光 ── */
#member-hex-outer.lv-diamond { background:linear-gradient(135deg,#a78bfa,#8b5cf6); overflow:hidden; }
#member-hex-outer.lv-diamond::after {
  content:""; position:absolute; top:-4px; left:-10px; width:12px; height:28px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg); animation:hexSweep 2.5s ease-in-out infinite;
}
@keyframes hexSweep { 0%{left:-10px;opacity:0}20%{opacity:1}50%{left:20px;opacity:.3}100%{left:30px;opacity:0} }
#member-tag.lv-diamond { background:linear-gradient(135deg,rgba(168,85,247,.12),rgba(139,92,246,.06)); border:1px solid rgba(168,85,247,.3); color:#7c3aed; }

/* ── 至尊 — 炫彩 + 六边形流光 ── */
#member-hex-outer.lv-supreme { background:linear-gradient(135deg,#f97316,#a855f7,#3b82f6,#16a34a); background-size:300% 300%; animation:hexRainbow 2s linear infinite; }
@keyframes hexRainbow { 0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%} }
#member-tag.lv-supreme { background:linear-gradient(135deg,rgba(234,88,12,.15),rgba(168,85,247,.08),rgba(59,130,246,.06)); border:1px solid rgba(234,88,12,.3); color:#c2410c; animation:supremeBorder 1.5s linear infinite; }
@keyframes supremeBorder { 0%{border-color:rgba(234,88,12,.3)}33%{border-color:rgba(168,85,247,.4)}66%{border-color:rgba(59,130,246,.35)}100%{border-color:rgba(234,88,12,.3)} }

/* ═══════════ CHAT SCROLL ═══════════ */
#chat-scroll{
  flex:1;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;
  padding:12px 14px 0;
  -webkit-overflow-scrolling:touch;scroll-behavior:smooth;
}
#chat-scroll::-webkit-scrollbar{width:3px}
#chat-scroll::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:3px}

/* ═══════════ WELCOME HERO — 呼吸感 ═══════════ */
#welcome-hero{
  text-align:center;padding:24px 20px 18px;margin-bottom:14px;
  border-radius:var(--r-xl);
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
  flex-shrink:0; /* 防止 flex 布局压缩卡片导致高度塌缩为 44px */
  animation:heroBreathe 8s ease-in-out infinite;
}
@keyframes heroBreathe{
  0%,100%{box-shadow:0 4px 16px rgba(0,0,0,.04)}
  50%{box-shadow:0 8px 32px rgba(0,0,0,.08),0 0 0 1px rgba(234,88,12,.04)}
}
#welcome-hero::after{
  content:"";position:absolute;top:-30px;right:-30px;
  width:100px;height:100px;border-radius:50%;
  background:radial-gradient(circle,rgba(234,88,12,.08),transparent 60%);
  pointer-events:none;
}
/* 在线状态 */
.hero-status{
  display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:12px;
}
.hero-dot{
  width:8px;height:8px;border-radius:50%;background:var(--success);
  animation:statusPulse 2s infinite;
}
@keyframes statusPulse{0%,100%{opacity:1}50%{opacity:.4}}
.hero-status-text{font-size:11px;color:var(--success);font-weight:500}
.hero-badge{
  display:inline-block;padding:6px 16px;border-radius:var(--r-full);
  background:linear-gradient(135deg,rgba(234,88,12,.08),rgba(249,115,22,.05));
  color:var(--accent);font-size:11px;font-weight:600;letter-spacing:1.5px;margin-bottom:16px;
  border:1px solid rgba(234,88,12,.12);
}
#welcome-hero h2{
  font-size:26px;font-weight:700;margin-bottom:10px;
  background:linear-gradient(135deg,#1c1917 30%,var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
#welcome-hero p{font-size:15px;color:var(--text-secondary);margin-bottom:18px;line-height:1.7}
.hero-hints{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
}
.hero-hints span{
  padding:7px 16px;border-radius:var(--r-full);font-size:12px;
  background:var(--bg-deep);border:1px solid var(--border-subtle);
  color:var(--text-secondary);font-weight:500;
  transition:all var(--dur) var(--ease-out);
  backdrop-filter:blur(8px);
}
.hero-hints span:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* ═══════════ MESSAGE BUBBLES — 微阴影 + 小三角 ═══════════ */
.msg-row{
  display:flex;margin-bottom:18px;gap:10px;align-items:flex-start;
  animation:msgIn var(--dur-slow) var(--ease-spring)both;
}
@keyframes msgIn{
  from{opacity:0;transform:translateY(14px)scale(.96)}
  to{opacity:1;transform:translateY(0)scale(1)}
}
.msg-row.user{flex-direction:row-reverse}

.msg-avatar{
  width:36px;height:36px;min-width:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:18px;
}
.msg-avatar.ai{
  background:linear-gradient(135deg,#fff7ed,#fff1e6);
  box-shadow:0 2px 8px rgba(234,88,12,.10);
}
.msg-avatar.user{
  background:linear-gradient(135deg,rgba(234,88,12,.10),rgba(249,115,22,.06));
}

/* 气泡 + 时间戳包装 */
.msg-content{max-width:72%}
.msg-bubble{
  padding:10px 14px;font-size:14px;line-height:1.55;word-break:break-word;
  position:relative;
}
.msg-row.ai .msg-bubble{
  background:var(--bg-card);border:1px solid var(--border-subtle);
  border-radius:6px var(--r) var(--r) 6px;
  box-shadow:var(--shadow-bubble);
}
.msg-row.user .msg-bubble{
  background:linear-gradient(135deg,var(--accent),var(--accent-light));
  color:var(--text-on-accent);
  border-radius:var(--r) 6px 6px var(--r);
  box-shadow:0 3px 14px rgba(234,88,12,.25);
}
/* 最新 AI 消息琥珀微光 */
.msg-row.ai:last-child .msg-bubble{
  border-left:2px solid rgba(234,88,12,.15);
}

/* 时间戳 */
.msg-time{
  font-size:10px;color:var(--text-muted);margin-top:3px;
  padding:0 4px;display:block;
}
.msg-row.user .msg-time{text-align:right}

/* Typing 加载 */
.typing-row{
  display:flex;align-items:center;padding:12px 16px;margin-bottom:14px;
  animation:typingFadeIn .25s ease;
}
@keyframes typingFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.typing-dots{
  display:inline-flex;gap:4px;align-items:center;
  padding:4px 10px;border-radius:16px;
  background:var(--bg-card);border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-bubble);
}
.typing-dots span{
  width:4px;height:4px;border-radius:50%;background:var(--accent);
  animation:dotWave 1.2s infinite both;
}
.typing-dots span:nth-child(1){animation-delay:0s}
.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.3s}
@keyframes dotWave{
  0%,60%,100%{opacity:.2;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-5px)}
}

/* 菜单卡片（聊天中） */
.msg-menu-card{
  margin-top:10px;padding:14px;border-radius:var(--r-sm);
  background:var(--bg-card);border:1px solid var(--border-default);
  display:flex;align-items:center;gap:12px;cursor:pointer;
  transition:all var(--dur) var(--ease-out);box-shadow:var(--shadow-xs);
}
.msg-menu-card:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.msg-menu-card-icon{font-size:28px}
.msg-menu-card-text{flex:1}
.msg-menu-card-title{font-size:14px;font-weight:600}
.msg-menu-card-desc{font-size:12px;color:var(--text-muted);margin-top:3px}

/* ═══════════ SCROLL TO BOTTOM FAB ═══════════ */
#scroll-bottom-btn{
  position:fixed;bottom:100px;right:20px;z-index:95;
  width:40px;height:40px;border-radius:50%;
  background:var(--bg-card);border:1px solid var(--border-default);
  box-shadow:var(--shadow);
  display:none;align-items:center;justify-content:center;
  cursor:pointer;color:var(--accent);font-size:18px;
  animation:fabIn var(--dur-slow) var(--ease-spring);
}
@keyframes fabIn{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
#scroll-bottom-btn:hover{background:var(--accent-soft);border-color:var(--accent)}