/* ===========================================================
   voice-chat.css — 全局语音聊天（入口 = 首页顶部粒子球 + 聊天面板）
   2026-10-24 新增，只作用于 .vc-* / .vc-trigger，不改动原有样式
   =========================================================== */

/* ---------------- 面板 ---------------- */
.vc-panel {
  position: fixed;
  inset: 0;
  z-index: 9600;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
  background: rgba(58, 40, 26, 0.3);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: vcFade 0.18s ease-out;
}
.vc-panel[hidden] { display: none; }
@keyframes vcFade { from { opacity: 0; } to { opacity: 1; } }

.vc-card {
  width: 100%;
  max-width: 430px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: #fffdf7;
  border: 2px solid #c9a87c;
  border-radius: 22px;
  box-shadow: 0 -6px 30px rgba(74, 55, 40, 0.24), 0 10px 34px rgba(74, 55, 40, 0.18);
  overflow: hidden;
  animation: vcUp 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
  font-family: inherit;
  color: #4a3728;
}
@keyframes vcUp { from { transform: translateY(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }

.vc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #fdf1dc, #f8e6c9);
  border-bottom: 1px solid rgba(201, 168, 124, 0.55);
}
.vc-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: #f7e7c1;
  border: 2px solid #c9a87c;
  flex: 0 0 auto;
}
.vc-who { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.vc-who b { display: block; font-size: 15px; }
.vc-who span { font-size: 11.5px; opacity: 0.72; }

.vc-x {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.75);
  color: #6b4f3a;
  font-size: 17px;
  cursor: pointer;
}
.vc-x:active { transform: scale(0.94); }

.vc-log {
  flex: 1 1 auto;
  min-height: 120px;
  max-height: 46vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 214, 170, 0.35), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(255, 230, 245, 0.5), transparent 46%),
    #fffdf7;
}
.vc-msg {
  max-width: 84%;
  padding: 8px 11px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
  animation: vcMsg 0.16s ease-out;
}
@keyframes vcMsg { from { transform: translateY(4px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.vc-msg.pet {
  align-self: flex-start;
  background: #fff6e6;
  border: 1px solid rgba(201, 168, 124, 0.6);
  border-bottom-left-radius: 5px;
}
.vc-msg.me {
  align-self: flex-end;
  background: #ffe3ea;
  border: 1px solid rgba(244, 63, 94, 0.32);
  border-bottom-right-radius: 5px;
  color: #7a2537;
}
.vc-msg.tip {
  align-self: center;
  max-width: 92%;
  background: rgba(201, 168, 124, 0.16);
  border: 1px dashed rgba(201, 168, 124, 0.6);
  color: #7a6144;
  font-size: 12.5px;
  text-align: center;
}

.vc-status {
  min-height: 18px;
  padding: 0 14px;
  font-size: 12px;
  color: #8a6e52;
  display: flex;
  align-items: center;
  gap: 6px;
}
.vc-status:empty { display: none; }
.vc-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #f43f5e;
  animation: vcBlink 1s ease-in-out infinite;
}
@keyframes vcBlink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* 说话区 */
.vc-talk {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 14px 4px;
}
.vc-mic {
  position: relative;
  width: 84px;
  height: 84px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8fa8, #f43f5e 62%, #c92b47);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(244, 63, 94, 0.36), inset 0 -3px 8px rgba(0, 0, 0, 0.16);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}
.vc-mic svg { width: 26px; height: 26px; fill: #fff; }
.vc-mic:active { transform: scale(0.95); }
.vc-mic[disabled] { background: #d8c8b4; box-shadow: none; color: #fff8ef; cursor: default; }
.vc-mic.is-listen::before,
.vc-mic.is-listen::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 3px solid rgba(244, 63, 94, 0.55);
  animation: vcPulse 1.4s ease-out infinite;
}
.vc-mic.is-listen::after { animation-delay: 0.7s; }
@keyframes vcPulse {
  0% { transform: scale(0.92); opacity: 0.85; }
  100% { transform: scale(1.35); opacity: 0; }
}
.vc-mic.is-speak { background: radial-gradient(circle at 35% 30%, #ffd07a, #f7a34b 60%, #d97f2b); }

.vc-sidebtn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(201, 168, 124, 0.8);
  background: #fff8ec;
  color: #6b4f3a;
  font-size: 17px;
  cursor: pointer;
}
.vc-sidebtn[hidden] { display: none; }

.vc-typing {
  display: flex;
  gap: 8px;
  padding: 6px 12px 12px;
}
.vc-typing input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding: 0 12px;
  font-size: 15px;
  color: #4a3728;
  background: #fff;
  border: 1.5px solid rgba(201, 168, 124, 0.85);
  border-radius: 14px;
  outline: none;
  font-family: inherit;
}
.vc-typing input:focus { border-color: #f43f5e; box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.14); }
.vc-send {
  flex: 0 0 auto;
  min-width: 62px;
  height: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: #4a3728;
  color: #fff8ec;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.vc-send:active { transform: scale(0.97); }

/* 桌面：居中浮起 */
@media (min-width: 720px) {
  .vc-panel { align-items: center; padding-bottom: 24px; }
  .vc-card { max-height: 76vh; }
  .vc-log { max-height: 52vh; }
}

/* 小屏（360 宽）压缩，保证不横向溢出 */
@media (max-width: 380px) {
  .vc-card { border-radius: 18px; }
  .vc-msg { font-size: 14px; }
  .vc-mic { width: 76px; height: 76px; }
  .vc-send { min-width: 54px; padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .vc-mic.is-listen::before, .vc-mic.is-listen::after, .vc-dot { animation: none; }
  .vc-card { animation: none; }
}

/* ---------------- 入口：首页顶部粒子球（#crystal-ball） ----------------
   球本身由 crystal-ball.js 绘制，这里只加「可点」的视觉提示。
   ------------------------------------------------ */
.vc-trigger {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 50%;
  transition: transform 0.16s ease, filter 0.16s ease;
}
.vc-trigger:hover { transform: scale(1.03); filter: brightness(1.05); }
.vc-trigger:active { transform: scale(0.97); }
.vc-trigger:focus-visible {
  outline: 3px solid #f43f5e;
  outline-offset: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .vc-trigger { transition: none; }
}

/* ---------------- 粒子球挂在「小猫聊天」输入条下面（2026-10-24） ----------------
   输入条是 fixed 底部条；球作为它的第二行，居中，手机上常驻可见。
   答题态给 #screen-game 补足底部留白，别让球压住选项。
   ------------------------------------------------ */
/* 入场动画 wbScreenIn 用了 fill:both，动画结束后残留 identity transform，
   会把 fixed 底栏的定位锚点改成 #screen-game（结果底栏掉到折叠线以下）。
   这里只在有语音条的页面把 fill-mode 去掉，动画照旧播，播完不留 transform。 */
body:has(#voice-bar) #screen-game.wb-screen.active {
  animation-fill-mode: none !important;
}

#voice-bar.voice-bar {
  flex-wrap: wrap;
  row-gap: 4px;
}
/* 球独占一行：行容器撑满宽度并居中，球本身保持正圆，桌面端不会被挤到输入框右侧 */
#voice-bar .vc-ball-row {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 2px;
}
#voice-bar .crystal-ball {
  flex: 0 0 auto;
  display: block;
  width: 96px;
  height: 96px;
  margin: 0;
}
/* 非答题态：页面底部留白，别让球挡住最后一屏内容 */
body:has(#voice-bar .crystal-ball) {
  padding-bottom: calc(var(--vb-h, 204px) + 8px);
}
/* 答题态：body 不许有 padding，改成给 #screen-game 补底部空间 */
body.quiz-open:has(#voice-bar .crystal-ball) #screen-game {
  padding-bottom: calc(var(--vb-h, 204px) + 10px);
}
@media (max-width: 540px) {
  #voice-bar .crystal-ball {
    width: 88px;
    height: 88px;
  }
  body:has(#voice-bar .crystal-ball) {
    padding-bottom: calc(var(--vb-h, 172px) + 6px);
  }
  body.quiz-open:has(#voice-bar .crystal-ball) #screen-game {
    padding-bottom: calc(var(--vb-h, 192px) + 10px);
  }
}

/* 2026-10-24 11:35：答题态折叠水晶球行（省下 88px），给「题目+选项」让位。按钮点一下展开/收起。 */
#vb-fold-btn {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: 6px;
  padding: 0;
  border: 1px solid #4a4a55;
  border-radius: 10px;
  background: #2a2a33;
  color: #f2f2f2;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.quiz-open #vb-fold-btn { display: inline-flex; }
body.quiz-open.vb-folded #voice-bar #vcBallRow { display: none; }