/* =========================================================
   AI Music Lounge - style.css (整合版)
   ========================================================= */

/* =========================
   1. 全局基础
========================= */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: #f4f6fb;
  overflow: hidden;
}
body * {
  outline: none !important;
}

#yt-player {
  position: fixed;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}
#dj-preparing {
  font-style: italic;
  opacity: 0.85;
  animation: preparing-breath 1.8s ease-in-out infinite;
}
/* =========================
   2. 容器
========================= */
#ai-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  transition: background 0.4s ease, color 0.4s ease;
}

#chat-content {
  display: flex;
  flex: 1;
  overflow: hidden; /* 禁止外层容器出现滚动条 */
}

#chat-window {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* =========================
   3. Header
========================= */
header {
  padding: 20px;
  text-align: center;
  position: relative;
}

header h1 {
  margin: 0;
  font-size: 2.2rem;
  letter-spacing: 1px;
}

header p {
  margin: 6px 0 0;
  opacity: 0.8;
}

header button {
  position: absolute;
  right: 20px;
  top: 20px;
  padding: 6px 14px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  transition: background 0.25s ease, transform 0.15s ease;
}

header button:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

/* =========================
   4. Mascot / 动画
========================= */
.mascot {
  height: 100%;
  aspect-ratio: 400 / 709;
  flex-shrink: 0;
  pointer-events: none;
  z-index: 20;
  display: flex;
  align-items: flex-end;
}

.mascot-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: transform;
  transition: opacity 0.3s;
}

.animate-switch {
  animation: quick-fade 0.3s ease-out;
}

@keyframes quick-fade {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

@keyframes css-dance {
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-6px) rotate(-1.5deg); }
  50%  { transform: translateY(0) rotate(1.5deg); }
  75%  { transform: translateY(-4px) rotate(-1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

#chat-window.music-bg-active::before {
  background-image: var(--music-cover);
  content: "";
  position: absolute;
  top: 114px;
  bottom: 74px;
  left: 0;
  right: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
  opacity: 0.16;
}

/* =========================
   5. 消息气泡
========================= */
.message {
  max-width: 72%;
  padding: 14px 18px;
  border-radius: 16px;
  line-height: 1.45;
  word-break: break-word;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.3s forwards;
}

.message:last-child {
  margin-bottom: 12px;
}

.message time {
  display: block;
  font-size: 0.7rem;
  opacity: 0.6;
  margin-top: 6px;
}

.message.system {
  align-self: flex-start;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  backdrop-filter: blur(6px);
  opacity: 0.8;
  box-shadow: none;
}

/* 用户消息 */
.message.user {
  align-self: flex-end;
  background: linear-gradient(135deg, #ff4ecd, #ff758c);
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 0 14px rgba(255, 78, 205, 0.35);
}

/* AI 消息 */
.message.ai {
  align-self: flex-start;
  background: linear-gradient(135deg, #2a2c34, #1e1f26);
  color: #eee;
  border-bottom-left-radius: 4px;
  box-shadow: 0 0 14px rgba(138, 180, 248, 0.15);
}

/* =========================
   6. Quiz / Game Capsule
========================= */
.quiz-capsule {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.08);
  border-radius: 10px;
}

.game-capsule {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
}
.iframe-wrapper {
  width: 100%;       /* 最终想要显示的宽度 */
  overflow: hidden;   /* 隐藏超出部分 */
}

.game-capsule iframe {
  padding: 0;
  border: none;
  width: 300px;  
  height: 380px; 
  transform-origin: top left;
}

.quiz-capsule .quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列布局 */
  gap: 8px;
  margin-top: 6px;
}
.quiz-capsule .quiz-option {
  text-align: left;
  margin: 4px 4px 0 0;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  background: #444;
  color: #fff;
  transition: background 0.2s ease, transform 0.15s ease;
}

.quiz-capsule .quiz-option.correct { background: #28a745; }
.quiz-capsule .quiz-option.wrong   { background: #dc3545; }

.quiz-feedback {
  margin-top: 6px;
  font-size: 0.85rem;
  opacity: 0.85;
}


/* =========================
   7. Footer / 输入区
========================= */
footer {
  display: flex;
  padding: 12px;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
}

#chat-input {
  flex: 1;
  padding: 14px;
  font-size: 1rem;
  border-radius: 10px;
  border: 2px solid transparent;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* =========================
   8. 按钮（通用）
========================= */
.icon-btn {
  font-size: 2rem;
  background: transparent;
  border: none;
  padding: 3px 18px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, background 0.25s ease, transform 0.15s ease;
}
.icon-btn:focus-visible {
  outline: none !important;
}
.icon-btn:hover { transform: scale(1.05); }
.icon-btn:disabled { filter: opacity(0.8); }
.icon-btn:active { transform: scale(0.92); }

/* =========================
   9. Track Float
========================= */
.track-float.show {
  display: inline-flex;
  position: absolute;
  bottom: 70px;
  right: 20px;
  max-width: 60vw;
  padding: 6px 12px;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
  color: #fff;
  opacity: 0.6;
  z-index: 10;
}

.track-float .track-title { flex: 1; overflow: hidden; text-overflow: ellipsis; padding-right: 4px; }
.track-float .track-actions { display: flex; gap: 2px; }
.track-float .track-btn {
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.7;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.track-float .track-btn:hover { opacity: 1; transform: scale(1.15); }
.track-float .track-btn.active { opacity: 1; transform: scale(1.2); }
.ui-hint {
  position: fixed;
  max-width: 240px;
  padding: 8px 14px;
  border-radius: 14px;
  font-size: 0.85rem;
  line-height: 1.4;

  background: rgba(30, 32, 40, 0.9);
  color: #fff;
  backdrop-filter: blur(8px);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  z-index: 999;

  opacity: 0;
  pointer-events: none;

  transform: translateY(6px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.ui-hint.show {
  opacity: 1;
  transform: translateY(0);
}

.ui-hint.hidden {
  display: none;
}

/* light mode */
.light-mode .ui-hint {
  background: rgba(255, 255, 255, 0.95);
  color: #111;
}

/* =========================
   10. Animations
========================= */
@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

@keyframes dice-roll {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(360deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes preparing-breath {
  0%   { opacity: 0.5; }
  50%  { opacity: 0.9; }
  100% { opacity: 0.5; }
}
/* =========================
   11. Dark Mode
========================= */
.dark-mode {
  background: radial-gradient(circle at top, #1f1c2c, #090a0f);
  color: #eee;
}
.dark-mode header { background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); }
.dark-mode footer { background: transparent; }
.dark-mode #chat-input { background: #1f222a; color: #eee; }
.dark-mode #send-btn { color: rgba(230, 232, 240, 0.85); }
.dark-mode #send-btn:hover { color: rgba(230, 232, 240, 0.9); }
.dark-mode #random-btn { color: #aaa; }

/* =========================
   12. Light Mode
========================= */
.light-mode {
  background: #f4f6fb;
  color: #111;
}
.light-mode #chat-content { background: #f4f6fb; }
.light-mode .mascot { background-color: transparent; }
.light-mode .message.ai {
  background: linear-gradient(135deg, #ffffff, #eef1f7);
  color: #111;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.light-mode .message.system { color: #333; }
.light-mode header { background: linear-gradient(90deg, #4b6cb7, #182848); color: #fff; }
.light-mode #chat-window { background: #f4f6fb; }
.light-mode footer { background: #eff1f5 !important; border-top: 1px solid rgba(0, 0, 0, 0.1) !important; }
.light-mode #chat-input { background: #fff; color: #111; }
.light-mode #chat-input.listening { background: #fff !important; }
.light-mode #send-btn { color: rgba(30, 32, 40, 0.75); }
.light-mode #send-btn:hover { color: rgba(30, 32, 40, 0.9); }
.light-mode #random-btn { color: #222; }
.light-mode #random-btn:hover { color: #182848; }
.light-mode .track-float.show { color: #222; }

/* =========================
   13. 移动端适配
========================= */
@media (max-aspect-ratio: 1 / 1) {
  header {
  padding: 10px 20px;
}
  header button { top: 16px; right: 16px; }
  header h1 { font-size: 1.8rem; }
  header p { font-size: 0.9rem; }
  #chat-content { flex-direction: column; }
  .mascot { width: auto; height: 250px; display: flex; justify-content: center; align-items: flex-end; }
  #chat-window { padding: 10px; gap: 10px; }
  footer { padding: 10px; gap: 6px; }
  #dj-preparing {
    font-size: 0.9rem;
  }
  .message { padding: 6px 8px; }
  .message span { font-size: 0.9rem; }
  #chat-input { font-size: 1rem; }
  .icon-btn { font-size: 1.5rem; padding: 3px 10px;}
  .track-float.show { bottom: 65px; right: 6px; font-size: 0.75rem; }
}

@media (max-aspect-ratio: 1 / 1) and (max-width: 768px) {
  header h1 { font-size: 1.4rem; }
  header button { font-size: 1rem; }
  #chat-window { padding: 8px; }
   #dj-preparing {
    font-size: 0.85rem;
  }
  .message { padding: 6px 8px; }
  .message span { font-size: 0.8rem; }
  #chat-input { font-size: 0.9rem; }
  .mascot { width: auto; height: 200px; display: flex; justify-content: center; align-items: flex-end; }
  #chat-content { flex-direction: column; }
  .icon-btn { font-size: 1.3rem; padding: 3px 10px;}
  .track-float.show { bottom: 65px; right: 6px; font-size: 0.75rem; }
}