* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  overflow: hidden;
  background: transparent;
  font-family: 'Noto Sans JP', sans-serif;
}

#chat-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px;
  overflow: hidden;
}

#chat-messages {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}

/* ── ベースメッセージ ── */
.chat-msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  animation: msg-in 0.3s ease-out forwards;
  opacity: 0;
  max-width: 100%;
  word-break: break-word;
}

.chat-msg.removing {
  animation: msg-out 0.3s ease-in forwards;
}

.chat-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: white;
}

.chat-body {
  flex: 1;
  min-width: 0;
}

.chat-name {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
  line-height: 1.3;
}

.chat-text {
  font-size: 14px;
  line-height: 1.5;
}

/* ── スーパーチャット風ハイライト ── */
.chat-msg.highlighted {
  border-left: 3px solid;
}

/* ── テーマ: ネオン ── */
.theme-neon .chat-msg {
  background: rgba(10, 10, 50, 0.85);
  border: 1px solid rgba(0, 170, 255, 0.3);
}
.theme-neon .chat-name { color: #00ccff; }
.theme-neon .chat-text { color: #e0e8ff; }
.theme-neon .chat-msg.highlighted {
  border-left-color: #00ccff;
  background: rgba(0, 170, 255, 0.15);
}

/* ── テーマ: ゲーミング ── */
.theme-gaming .chat-msg {
  background: rgba(20, 0, 40, 0.85);
  border: 1px solid rgba(255, 110, 199, 0.3);
}
.theme-gaming .chat-name { color: #ff6ec7; }
.theme-gaming .chat-text { color: #f0e0ff; }
.theme-gaming .chat-msg.highlighted {
  border-left-color: #ff6ec7;
  background: rgba(255, 110, 199, 0.15);
}

/* ── テーマ: ミニマル ── */
.theme-minimal .chat-msg {
  background: rgba(30, 30, 30, 0.8);
}
.theme-minimal .chat-name { color: #aaaaaa; }
.theme-minimal .chat-text { color: #ffffff; }
.theme-minimal .chat-msg.highlighted {
  border-left-color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

/* ── テーマ: パステル ── */
.theme-pastel .chat-msg {
  background: rgba(255, 240, 245, 0.9);
  border: 1px solid rgba(206, 147, 216, 0.3);
}
.theme-pastel .chat-name { color: #9c27b0; }
.theme-pastel .chat-text { color: #4a2040; }
.theme-pastel .chat-msg.highlighted {
  border-left-color: #ce93d8;
  background: rgba(206, 147, 216, 0.2);
}

/* ── テーマ: レトロ ── */
.theme-retro .chat-msg {
  background: rgba(0, 20, 0, 0.9);
  border: 1px solid rgba(0, 255, 65, 0.2);
  font-family: 'DotGothic16', monospace;
}
.theme-retro .chat-name { color: #00ff41; }
.theme-retro .chat-text { color: #00cc33; }
.theme-retro .chat-msg.highlighted {
  border-left-color: #00ff41;
  background: rgba(0, 255, 65, 0.1);
}

/* ── テーマ: バブル ── */
.theme-bubble .chat-msg {
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.85), rgba(0, 206, 201, 0.85));
  border-radius: 18px;
  padding: 10px 16px;
}
.theme-bubble .chat-name { color: rgba(255,255,255,0.8); }
.theme-bubble .chat-text { color: #ffffff; }
.theme-bubble .chat-msg.highlighted {
  border-left-color: #ffffff;
  box-shadow: 0 0 10px rgba(108, 92, 231, 0.5);
}

/* ── テーマ: ガラス ── */
.theme-glass .chat-msg {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.theme-glass .chat-name { color: rgba(255,255,255,0.9); }
.theme-glass .chat-text { color: rgba(255,255,255,0.8); }
.theme-glass .chat-msg.highlighted {
  border-left-color: rgba(255,255,255,0.5);
  background: rgba(255, 255, 255, 0.15);
}

/* ── アニメーション ── */
@keyframes msg-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes msg-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-20px); }
}
@keyframes msg-in-slide {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes msg-in-scale {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes msg-in-bounce {
  0%   { opacity: 0; transform: translateY(30px); }
  60%  { opacity: 1; transform: translateY(-5px); }
  100% { opacity: 1; transform: translateY(0); }
}

.anim-slide .chat-msg { animation-name: msg-in-slide; }
.anim-scale .chat-msg { animation-name: msg-in-scale; }
.anim-bounce .chat-msg { animation-name: msg-in-bounce; }

/* ── カスタムカラー上書き用 ── */
.chat-msg[data-custom-bg] { background: var(--custom-bg) !important; }