/* ===========================================================================
   觀眾端直播間。零框架、零建置：一個 .css + 一支 .mjs。

   ⚠️ 改這支之前先讀 public/index.html 開頭的三條規則。
      最重要的一條：**overlay 不可以長出容器。**
      面板底色、1px 邊框、14px 圓角、box-shadow —— 這四樣東西加起來就是
      「Slack / 客服 widget」的長相，不是直播間。對比一律靠 text-shadow 描邊
      與 gradient 遮罩取得（WCAG 要求本文最低 4.5:1，描邊是在不加底色的前提下
      唯一能穩定達標的做法）。
   =========================================================================== */
:root {
  color-scheme: dark;
  --fg: #f4f6fb;
  --dim: #b9c0d0;
  --hot: #ff4d6f;          /* LIVE 膠囊與追蹤鈕共用同一個紅粉色 */
  --hot-2: #ff7aa0;
  --warn: #ffb84d;
  --bad: #ff6b6b;
  --ok: #6ee7ff;
  /* 描邊：overlay 上所有文字的對比來源 */
  --stroke: 0 1px 2px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.7), 0 0 18px rgba(0,0,0,.45);
  --stroke-strong: 0 2px 3px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,.85), 0 0 28px rgba(0,0,0,.6);
}
* { box-sizing: border-box; }
/* [hidden] 的保險絲：任何 overlay 元件都不准用 display 蓋掉它。 */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;                     /* 直播間不捲動 */
  background: #07060a;
  color: var(--fg);
  font: 15px/1.6 "Noto Sans TC", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ 舞台 */
.room { position: fixed; inset: 0; overflow: hidden; }

/* 全出血。沒有 border、沒有 border-radius、沒有 panel 底色。
   景深靠三層 radial-gradient：頭頂的頂光、腳下的地面反射、四角的暗角。 */
.stage {
  position: absolute; inset: 0;
  background:
    radial-gradient(115% 75% at 50% 8%, rgba(126, 96, 205, .34), transparent 62%),
    radial-gradient(75% 45% at 50% 104%, rgba(255, 122, 160, .20), transparent 70%),
    radial-gradient(140% 110% at 50% 45%, rgba(24, 20, 38, 0), rgba(3, 2, 6, .92) 88%),
    linear-gradient(180deg, #171226 0%, #0d0a16 55%, #06050b 100%);
}
/* 地面：角色不要看起來是浮在空中的貼紙 */
.stage::after {
  content: ""; position: absolute; left: 50%; bottom: 4%;
  width: 62vw; height: 16vh; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(180, 150, 255, .16), transparent 68%);
  filter: blur(14px); pointer-events: none;
}

.avatar { position: absolute; inset: 0; display: grid; place-items: center; }
.avatar-glow {
  position: absolute; width: min(52vw, 620px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(170, 140, 255, .17), transparent 64%);
  filter: blur(10px);
}
/* 保底嘴型（Live2D 就緒後由 app.mjs 隱藏） */
.avatar-face { position: absolute; font-size: 72px; opacity: .85; letter-spacing: 2px; text-shadow: var(--stroke); }
/* Live2D 畫布鋪滿舞台，模型自己置中。pointer-events 關掉，不擋 overlay。 */
.live2d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* ------------------------------------------------------------- 連線橫幅 */
/* 斷線 / 降級才出現。畫面其餘部分不清空（斷線不白屏）。 */
.banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  padding: 7px 16px; font-size: 13px; font-weight: 700; text-align: center;
  background: var(--warn); color: #201400;
}
.banner.bad { background: var(--bad); color: #2a0000; }

/* --------------------------------------------------------------- 身分列 */
.top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 16px 22px 40px;
  /* 遮罩不是 bar：實色橫條會把畫面切成上下兩塊，直播間不切 */
  background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 55%, transparent 100%);
  pointer-events: none;
}
.top-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.top-right { display: flex; align-items: center; gap: 14px; padding-top: 4px; }

.live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 9px; border-radius: 999px;
  background: var(--hot); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: 1.2px;
  box-shadow: none;
}
/* 警告：閃爍**不能**在頁面一載入就跑。
   災情前例（2026-09-02，實測可重現）：一個永不停止的 CSS 動畫疊在整頁的
   WebGL 畫布上，在軟體光柵化環境下會逼 Chrome 每一幀重合成全螢幕，
   把 Live2DCubismCore 的 WASM 載入直接擠掛（Aborted.）——畫面上就沒有角色。
   -> 由 app.mjs 在模型就緒後加上 body.stage-ready 才開始閃。 */
.live-pill::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #fff;
}
body.stage-ready .live-pill::before { animation: live-blink 1.6s ease-in-out infinite; }
@keyframes live-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* 還沒 LIVE 就老實說「準備中」。不要假造直播狀態。 */
.live-pill.pending { background: rgba(255,255,255,.16); color: #e6e9f2; letter-spacing: .4px; }
.live-pill.pending::before { background: var(--dim); animation: none; }

.host-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--hot), #a06bff);
  color: #fff; font-weight: 800; font-size: 17px;
  outline: 2px solid rgba(255,255,255,.22); outline-offset: 1px;
}
.host-meta { min-width: 0; }
.host-name {
  display: flex; align-items: center; gap: 7px;
  font-size: 16px; font-weight: 800; letter-spacing: .3px; text-shadow: var(--stroke);
}
.host-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  padding: 1px 7px; border-radius: 999px;
  background: rgba(255,122,160,.18); color: var(--hot-2);
}
.host-sub { font-size: 12px; color: var(--dim); text-shadow: var(--stroke); }

.follow {
  pointer-events: auto; cursor: pointer; font: inherit;
  margin-left: 6px; padding: 6px 15px; border: 0; border-radius: 999px;
  background: var(--hot); color: #fff; font-size: 13px; font-weight: 800;
  transition: background .15s ease, opacity .15s ease;
}
.follow:hover { background: var(--hot-2); }
.follow.on { background: rgba(255,255,255,.14); color: var(--dim); }

.stat { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; text-shadow: var(--stroke); }
.stat-ico { opacity: .8; font-size: 13px; }
/* 觀看數會跳動 → 等寬數字，位數變動時不要左右抖 */
.num { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .3px; }

/* -------------------------------------------------------------- overlay */
.overlay { position: absolute; inset: 0; z-index: 15; pointer-events: none; }
/* 底部遮罩：跟身分列的上方遮罩對稱。字幕與輸入列站在它上面，
   才不會每個元件都要自己長一塊底色（那就變成面板了）。 */
.overlay::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(0deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.22) 48%, transparent 100%);
  pointer-events: none;
}
/* 彈幕 / 字幕 / 愛心要在遮罩之上 */
.chat, .caption, .typing, .hearts { z-index: 1; }

/* 彈幕：左下角浮層。沒有標題、沒有底色、沒有捲軸。
   訊息從下往上堆，滿了就從上緣淡出消失（mask-image）—— 「從虛空浮上來」。 */
.chat {
  position: absolute; left: 22px; bottom: 156px;
  width: min(34vw, 380px); height: min(46vh, 380px);
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 12%, #000 34%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 12%, #000 34%, #000 100%);
}
/* 可以往上滑看歷史（真實直播間都能滑）。overflow 從 hidden 改成 auto，
   並且要 pointer-events:auto —— 外層 .chat 是 overlay，預設不吃滑鼠。
   捲軸做細做透明：直播畫面上不該出現作業系統風格的粗捲軸。 */
.messages {
  list-style: none; margin: 0; padding: 0;
  overflow-y: auto; overscroll-behavior: contain;
  pointer-events: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent;
}
.messages::-webkit-scrollbar { width: 6px; }
.messages::-webkit-scrollbar-track { background: transparent; }
.messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 3px; }
.messages li {
  position: relative;                    /* 左側點名亮條的定位基準 */
  display: flex; align-items: baseline; gap: 7px;
  padding: 2.5px 0 2.5px 11px;           /* 左邊固定留 11px 給亮條 → 被點名時**不會位移** */
  font-size: 15px; font-weight: 400; line-height: 1.45;
  word-break: break-word; text-shadow: var(--stroke);
  animation: danmaku-in .32s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes danmaku-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.messages .pic {
  flex: none; width: 19px; height: 19px; border-radius: 50%;
  display: inline-grid; place-items: center; align-self: center;
  font-size: 11px; font-weight: 800; color: #14101c; text-shadow: none;
}
.messages .who { font-weight: 700; opacity: .95; flex: none; }
.messages .who::after { content: "："; opacity: .55; }
.messages .say { color: #fff; }
.messages li.mine .say { color: #fff; font-weight: 500; }
/* ------------------------------------------------ 被角色挑中的那一則彈幕
   這是整個「選擇性回應」在觀眾端的視覺回報：**大部分留言只是飄過去，
   被挑中的那一則要看得出來**。做法是短暫的（5.5s，會自己結束的）三件事：
     1. 左側亮起一條（位置本來就留好了，所以不會把文字推開）
     2. 整列拉一道由左而右淡出的高亮
     3. 右邊掛一個「✦ 回你」小標
   ⚠️ 全部都是 `both` 的有限動畫，**不准出現 infinite** —— 永不停止的動畫疊在
   WebGL 畫布上會把 Live2D 的 WASM 載入擠掛（2026-09-02 實測災情）。 */
.messages li::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 2px;
  border-radius: 2px; background: linear-gradient(180deg, var(--ok), #a08bff);
  opacity: 0; transform: scaleY(.2);
}
.messages li.picked::before { animation: pick-bar 5.5s cubic-bezier(.2,.8,.3,1) both; }
.messages li.picked { animation: pick-row 5.5s ease-out both; }
.messages li.picked .say { color: #fff; font-weight: 600; }
.pick-tag {
  flex: none; align-self: center; margin-left: 2px;
  font-size: 10px; font-weight: 800; letter-spacing: .6px;
  padding: 1px 7px; border-radius: 999px;
  background: rgba(110,231,255,.20); color: var(--ok); text-shadow: none;
  animation: pick-tag-in 5.5s ease-out both;
}
@keyframes pick-bar {
  0%   { opacity: 0; transform: scaleY(.2); }
  8%   { opacity: 1; transform: scaleY(1); }
  70%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: .18; transform: scaleY(1); }
}
@keyframes pick-row {
  0%   { background: linear-gradient(90deg, rgba(110,231,255,.34), rgba(110,231,255,0) 78%); }
  70%  { background: linear-gradient(90deg, rgba(110,231,255,.16), rgba(110,231,255,0) 78%); }
  100% { background: linear-gradient(90deg, rgba(110,231,255,0), rgba(110,231,255,0) 78%); }
}
@keyframes pick-tag-in {
  0%   { opacity: 0; transform: translateX(-4px); }
  8%   { opacity: 1; transform: none; }
  80%  { opacity: 1; }
  100% { opacity: .35; }
}

/* --------------------------------------------------------------- 送禮彈幕
   有 gift 的那一則長得跟一般彈幕不一樣：暖色膠囊 + 金額。
   這是畫面上唯一跟「錢」有關的元素，所以刻意讓它有重量，但仍然是膠囊、
   沒有 1px 邊框、沒有 box-shadow（見檔頭規則）。 */
.messages li.gift {
  border-radius: 12px; margin: 2px 0; padding: 5px 10px 5px 11px;
  background: linear-gradient(96deg, rgba(255,184,77,.20), rgba(255,122,160,.08) 62%, transparent);
}
.messages li.gift.t2 { background: linear-gradient(96deg, rgba(255,184,77,.28), rgba(255,122,160,.12) 66%, transparent); }
.messages li.gift.t3 { background: linear-gradient(96deg, rgba(255,150,60,.38), rgba(255,90,140,.18) 70%, transparent); }
.messages li.gift.t4 { background: linear-gradient(96deg, rgba(255,110,60,.50), rgba(255,60,140,.26) 74%, transparent); }
.messages li.gift .say { color: #ffe6bd; font-weight: 700; }
.messages li.gift .g-emoji { flex: none; font-size: 17px; line-height: 1; align-self: center; text-shadow: none; }
.messages li.gift .g-amt {
  flex: none; align-self: center; margin-left: auto;
  font-size: 11px; font-weight: 800; letter-spacing: .3px;
  color: #2a1400; background: linear-gradient(100deg, #ffd166, #ffb04d);
  padding: 1px 8px; border-radius: 999px; text-shadow: none;
  font-variant-numeric: tabular-nums;
}

/* 進場通知：長得跟一般彈幕不一樣，才有「有人進來了」的感覺 */
.messages li.join { font-size: 13px; color: var(--hot-2); font-style: normal; opacity: .95; }
.messages li.join .arrow { opacity: .7; }

/* 「正在回你」：膠囊，浮在字幕上方 */
.typing {
  position: absolute; left: 50%; bottom: 128px; transform: translateX(-50%);
  font-size: 12px; font-weight: 800; letter-spacing: .5px;
  color: #14101c; background: var(--ok);
  padding: 3px 12px; border-radius: 999px;
}

/* 字幕：caption。無框無底，靠描邊取得對比。
   字級 26 / 700 對彈幕 15 / 400 —— 字級的不對稱就是主播對觀眾的不對稱。 */
.caption {
  position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%);
  width: min(62vw, 900px); text-align: center;
  font-size: 26px; font-weight: 700; line-height: 1.45; letter-spacing: .5px;
  color: #fff; text-shadow: var(--stroke-strong);
}
.caption p { margin: 0; animation: caption-in .28s ease-out both; }
@keyframes caption-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 愛心上飄：右下角。純 CSS，成本極低。 */
.hearts { position: absolute; right: 26px; bottom: 96px; width: 90px; height: 46vh; overflow: hidden; }
.heart {
  position: absolute; bottom: 0; font-size: 22px; line-height: 1;
  animation: heart-up var(--dur, 3.4s) linear forwards;
  will-change: transform, opacity;
}
@keyframes heart-up {
  0%   { opacity: 0; transform: translate(0, 0) scale(.6); }
  12%  { opacity: .95; transform: translate(var(--x1, 6px), -10%) scale(1); }
  70%  { opacity: .8; transform: translate(var(--x2, -14px), -62%) scale(1.05); }
  100% { opacity: 0; transform: translate(var(--x3, 10px), -100%) scale(.85); }
}

/* ----------------------------------------------------------------- 底部 */
.dock {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 22px 22px; pointer-events: none;
}
/* 輸入列是浮在底部的膠囊，不是表單列 */
.composer {
  pointer-events: auto;
  display: flex; align-items: center; gap: 6px;
  width: min(46vw, 560px); padding: 5px 5px 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  outline: 1px solid rgba(255,255,255,.14);
}
.composer input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
  color: var(--fg); padding: 8px 10px; font: inherit; font-size: 14px;
}
.composer input::placeholder { color: rgba(233,236,244,.45); }
.composer button {
  flex: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800;
  border: 0; border-radius: 999px; padding: 8px 18px;
  background: var(--hot); color: #fff;
}
.composer button:hover { background: var(--hot-2); }
.composer button:disabled { opacity: .5; cursor: not-allowed; }

/* ------------------------------------------------------------------ 送禮
   按鈕跟輸入列並排（同一個膠囊語彙：blur + 1px outline，沒有實色面板）。
   價位選單只有點下去才存在，收起來時 [hidden] 保險絲直接把它關掉。 */
.gift-wrap { position: relative; pointer-events: auto; }
.gift-btn {
  cursor: pointer; font: inherit; font-size: 17px; line-height: 1;
  border: 0; border-radius: 999px; padding: 10px 15px;
  background: rgba(255, 255, 255, .10); color: var(--fg);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  outline: 1px solid rgba(255,255,255,.14);
  transition: background .15s ease, transform .15s ease;
}
.gift-btn:hover { background: rgba(255,184,77,.26); transform: translateY(-1px); }
.gift-btn.on { background: rgba(255,184,77,.34); }
.gift-menu {
  position: absolute; right: 0; bottom: calc(100% + 10px);
  display: grid; gap: 3px; padding: 6px; min-width: 208px;
  border-radius: 16px;
  background: rgba(14, 11, 22, .58);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  outline: 1px solid rgba(255,255,255,.12);
  animation: gift-menu-in .16s ease-out both;
}
@keyframes gift-menu-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.gift-item {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; font: inherit; text-align: left;
  border: 0; border-radius: 11px; padding: 7px 10px;
  background: transparent; color: var(--fg);
}
.gift-item:hover { background: rgba(255,184,77,.18); }
.gift-item .g-emoji { font-size: 19px; line-height: 1; }
.gift-item .g-name { font-size: 13px; font-weight: 700; }
.gift-item .g-amt {
  margin-left: auto; font-size: 11px; font-weight: 800; color: #ffd166;
  font-variant-numeric: tabular-nums;
}
/* 價位越高，這一列的暖色越明顯（純視覺差異，沒有任何金流） */
.gift-item.t2 .g-amt { color: #ffc46b; }
.gift-item.t3 .g-amt { color: #ff9f5a; }
.gift-item.t4 .g-amt { color: #ff7a8f; }

/* 送禮 toast：右上角堆疊。這是「有人花錢了」的即時回饋，
   跟畫面正下方那個錯誤 toast 是兩種東西，位置刻意分開。 */
.gift-toasts {
  position: absolute; top: 72px; right: 22px; z-index: 24;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  pointer-events: none;
}
.gift-toast {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 15px 7px 11px; border-radius: 999px;
  font-size: 13px; font-weight: 800; letter-spacing: .2px; color: #fff;
  background: linear-gradient(100deg, rgba(255,150,60,.92), rgba(255,90,140,.86));
  animation: gift-toast-in .34s cubic-bezier(.2,.9,.3,1) both;
}
.gift-toast.t3 { background: linear-gradient(100deg, rgba(255,120,50,.94), rgba(255,60,130,.9)); }
.gift-toast.t4 { background: linear-gradient(100deg, rgba(255,90,40,.96), rgba(210,60,255,.9)); font-size: 14px; }
.gift-toast .g-emoji { font-size: 18px; line-height: 1; }
.gift-toast .g-who { opacity: .92; }
.gift-toast.out { animation: gift-toast-out .38s ease-in both; }
@keyframes gift-toast-in { from { opacity: 0; transform: translateX(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes gift-toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(14px) scale(.96); } }

/* ------------------------------------------------------------- 節目進度條
   畫面最上緣一條 2px 的線。真實直播的目標 / 進度條就是這麼細——
   它是輔助資訊，一旦做成有底色的面板就會開始跟角色搶戲。
   width 用 transition（有限、只在數值變動時跑），不是 animation：
   永不停止的動畫會把 Live2D 的載入擠掛。 */
.show-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 22;
  background: rgba(255,255,255,.09); pointer-events: none;
}
.show-bar-fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--hot), #a06bff 62%, var(--ok));
  transition: width .7s cubic-bezier(.3,.9,.3,1);
}
body.has-banner .show-bar { top: 34px; }
.show-title { font-weight: 700; color: #e7eaf3; }
.show-step {
  margin-left: 7px; padding-left: 8px;
  border-left: 1px solid rgba(255,255,255,.22);   /* 分隔線，不是框 */
  color: var(--hot-2); font-weight: 700; font-variant-numeric: tabular-nums;
}

.audio-btn {
  pointer-events: auto; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700;
  border: 0; border-radius: 999px; padding: 10px 16px;
  background: rgba(16, 13, 26, .52); color: var(--ok);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  outline: 1px solid rgba(110,231,255,.35);
}

/* toast：只給觀眾看得懂的錯誤（太長了 / gateway 拒絕）。
   trace_id、事件名稱、內部代碼一律不出現在這裡。 */
.toast {
  position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 30;
  padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: rgba(255,77,111,.92); color: #fff;
  animation: caption-in .2s ease-out both;
}

/* ------------------------------------------------------------------ 除錯 */
/* ?debug=1 才 render。這一塊裡面的東西**永遠不准**出現在觀眾畫面上。 */
.debug {
  /* ★ 預設 none。**不要**在這裡寫 display:flex —— 那會蓋掉 UA 的
     `[hidden]{display:none}`，除錯字串就直接印在觀眾畫面最下面一行
     （2026-09-02 實測災情）。只有 body.debug-on 才把它打開。 */
  display: none;
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 35;
  flex-wrap: wrap; gap: 4px 14px;
  padding: 6px 12px 4px; font-size: 11px; line-height: 1.5;
  color: #9aa3b8; background: rgba(0,0,0,.72); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.debug .avatar-fallback {
  flex-basis: 100%; color: #ffd9d9; background: rgba(120, 20, 20, .5); padding: 4px 8px; border-radius: 4px;
}
.debug code { color: #fff; background: rgba(255,255,255,.12); padding: 0 4px; border-radius: 3px; }
/* 重連橫幅出現時把身分列往下推，不要疊在一起 */
body.has-banner .top { padding-top: 48px; }
body.debug-on #debug:not([hidden]) { display: flex; }
body.debug-on .dock { padding-bottom: 46px; }
body.debug-on .caption { bottom: 116px; }
body.debug-on .chat { bottom: 180px; }

/* --------------------------------------------------------------- 窄視窗 */
/* 投資人看的是筆電（16:9 橫屏），這段只是不要在小視窗上爆掉。 */
@media (max-width: 900px) {
  .chat { left: 14px; width: min(58vw, 300px); height: 34vh; bottom: 150px; }
  .caption { width: 86vw; font-size: 21px; bottom: 86px; }
  .composer { width: min(88vw, 460px); }
  .top { padding: 12px 14px 34px; }
  .host-sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .live-pill::before, .messages li, .caption p, .heart,
  .gift-toast, .gift-menu, .pick-tag { animation: none !important; }
  /* 動畫關掉之後，「被點名」還是要看得出來 —— 靜態版：左條常亮 + 一道底色 */
  .messages li.picked::before { opacity: 1; transform: none; }
  .messages li.picked { background: linear-gradient(90deg, rgba(110,231,255,.18), transparent 78%); }
  .show-bar-fill { transition: none; }
}