/* =========================================================
   AI Music Lounge - style.css (Clean Full Version)
   ========================================================= */

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

/* =========================
   2. 容器
========================= */
#ai-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  transition: background 0.4s ease, color 0.4s ease;
}
/* =========================
   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. Chat Window
========================= */
#chat-window {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* 播放音乐时才显示 */
#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 time {
  display: block;
  font-size: 0.7rem;
  opacity: 0.6;
  margin-top: 6px;
}

/* 用户消息 */
.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. Footer / 输入区
========================= */
footer {
  display: flex;
  padding: 12px;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#chat-input {
  flex: 1;
  padding: 14px;
  font-size: 1rem;
  border-radius: 10px;
  border: none;
  outline: none;
}

/* =========================
   7. 按钮（通用）
========================= */
.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:hover {
  transform: scale(1.05);
}
.icon-btn:disabled {
  filter: opacity(0.8);
}
.icon-btn:active {
  transform: scale(0.92);
}
/* =========================
   8. 🎲 骰子动画
========================= */
#random-btn {
  position: relative;
  overflow: hidden;
}

#random-btn:hover {
  animation: dice-roll 0.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.track-float.show {
  position: absolute;
  bottom: 84px;
  right: 20px;

  max-width: 380px;
  padding: 6px 12px;

  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  background: transparent;
  color: #fff;
  opacity: 1;
  pointer-events: none;
}



/* =========================
   9. 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);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

.dark-mode #send-btn:hover {
  color: rgba(230, 232, 240, 0.9);
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.6);
}

.dark-mode #random-btn {
  color: #aaa;
}

/* =========================
   10. Light Mode
========================= */
.light-mode {
  background: #f4f6fb;
  color: #111;
}
.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 header {
  background: linear-gradient(90deg, #4b6cb7, #182848);
  color: #fff;
}

.light-mode #chat-window {
  background: #f4f6fb;
}

.light-mode #chat-input {
  background: #fff;
  color: #111;
}

.light-mode #send-btn {
  color: rgba(30, 32, 40, 0.75);
  text-shadow: 0 1px 2px  rgba(0, 0, 0, 0.35);
}
/* Light */
.light-mode .send-btn:hover {
  color: rgba(30, 32, 40, 0.9);
  text-shadow: 0 2px 4px  rgba(0, 0, 0, 0.35);
}

.light-mode #random-btn {
  color: #222;
}

.light-mode #random-btn:hover {
  color: #182848;
}
.light-mode .track-float.show {
  color: #222;
}
/* =========================
   11. 动画定义
========================= */
@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); }
}