/* ═══════════════════════════════════════
   love-u — Slay Girl Y2K Leopard Theme
   ═══════════════════════════════════════ */

:root {
  --hot-pink: #ff1493;
  --pink: #ff69b4;
  --light-pink: #ffb6c1;
  --gold: #ffd700;
  --leopard-tan: #d4a574;
  --leopard-spot: #5c3317;
  --leopard-dark: #3d1f0a;
  --bg: #1a0505;
  --surface: #2d0a14;
  --surface-light: #3d1520;
  --text: #ffe4ec;
  --muted: #c9a0b0;
  --glow-pink: 0 0 20px rgba(255,20,147,0.5);
  --glow-gold: 0 0 20px rgba(255,215,0,0.5);
}

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

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

body {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ═══ Leopard Background ═══ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.07;
  background-color: var(--leopard-tan);
  background-image:
    radial-gradient(ellipse 28% 35% at 12% 18%, var(--leopard-spot) 38%, transparent 38%),
    radial-gradient(ellipse 22% 30% at 38% 8%,  var(--leopard-dark) 34%, transparent 34%),
    radial-gradient(ellipse 30% 40% at 68% 15%, var(--leopard-spot) 40%, transparent 40%),
    radial-gradient(ellipse 25% 33% at 85% 22%, var(--leopard-dark) 35%, transparent 35%),
    radial-gradient(ellipse 30% 38% at 22% 58%, var(--leopard-spot) 40%, transparent 40%),
    radial-gradient(ellipse 26% 34% at 55% 45%, var(--leopard-dark) 36%, transparent 36%),
    radial-gradient(ellipse 28% 36% at 78% 62%, var(--leopard-spot) 38%, transparent 38%),
    radial-gradient(ellipse 24% 32% at 42% 78%, var(--leopard-dark) 35%, transparent 35%),
    radial-gradient(ellipse 28% 36% at 92% 72%, var(--leopard-spot) 38%, transparent 38%),
    radial-gradient(ellipse 22% 30% at 10% 85%, var(--leopard-dark) 34%, transparent 34%),
    radial-gradient(ellipse 30% 40% at 65% 88%, var(--leopard-spot) 40%, transparent 40%),
    radial-gradient(ellipse 25% 33% at 35% 32%, var(--leopard-dark) 35%, transparent 35%);
  background-size: 280px 280px;
}

/* ═══ Y2K Sparkles Background ═══ */
#sparkle-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

@keyframes sparkleFloat {
  0%   { opacity: 0; transform: translateY(0) translateX(0) scale(0) rotate(0deg); }
  15%  { opacity: 1; }
  85%  { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-130px) translateX(25px) scale(0.3) rotate(180deg); }
}

.sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 5;
  animation: sparkleFloat 2.5s ease-out forwards;
  filter: drop-shadow(0 0 4px rgba(255,215,0,0.6));
}

/* ═══ Glitter Text ═══ */
@keyframes glitter {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.glitter-text {
  background: linear-gradient(90deg, #ff1493, #ffd700, #ff69b4, #ffb6c1, #ffd700, #ff1493);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: glitter 4s linear infinite;
}

/* ═══ Scrollbar ═══ */
#chat-messages::-webkit-scrollbar { width: 4px; }
#chat-messages::-webkit-scrollbar-track { background: transparent; }
#chat-messages::-webkit-scrollbar-thumb { background: var(--hot-pink); border-radius: 10px; }

/* ═══ Auth Screen ═══ */
#auth-screen {
  background: radial-gradient(ellipse at 50% 25%, var(--surface) 0%, var(--bg) 70%);
  position: relative;
  z-index: 2;
}

/* Leopard card wrapper */
.leopard-print {
  background-color: var(--leopard-tan);
  background-image:
    radial-gradient(ellipse 30% 40% at 15% 20%, var(--leopard-spot) 42%, transparent 42%),
    radial-gradient(ellipse 25% 35% at 55% 10%, var(--leopard-dark) 38%, transparent 38%),
    radial-gradient(ellipse 28% 38% at 80% 30%, var(--leopard-spot) 40%, transparent 40%),
    radial-gradient(ellipse 22% 32% at 40% 60%, var(--leopard-dark) 36%, transparent 36%),
    radial-gradient(ellipse 30% 40% at 10% 75%, var(--leopard-spot) 42%, transparent 42%),
    radial-gradient(ellipse 26% 36% at 70% 70%, var(--leopard-dark) 38%, transparent 38%),
    radial-gradient(ellipse 28% 38% at 90% 12%, var(--leopard-spot) 40%, transparent 40%),
    radial-gradient(ellipse 24% 34% at 35% 42%, var(--leopard-dark) 38%, transparent 38%);
  background-size: 180px 180px;
}

.slot {
  transition: all 0.2s cubic-bezier(.34,1.56,.64,1);
}
.slot.filled {
  border-color: var(--hot-pink) !important;
  background: rgba(255,20,147,0.2) !important;
  border-style: solid !important;
  box-shadow: var(--glow-pink);
  animation: popSlot 0.3s cubic-bezier(.34,1.56,.64,1);
}

@keyframes popSlot {
  0% { transform: scale(0.8); }
  100% { transform: scale(1); }
}

.emoji-cell {
  transition: all 0.15s;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  cursor: pointer;
  border-radius: 0.75rem;
  user-select: none;
  background: var(--surface);
  border: 2px solid transparent;
}
.emoji-cell:hover {
  background: var(--surface-light);
  transform: scale(1.1);
  border-color: var(--pink);
}
.emoji-cell:active { transform: scale(0.9); }
.emoji-cell.selected {
  background: rgba(255,20,147,0.25);
  border-color: var(--hot-pink);
  box-shadow: var(--glow-pink);
}

/* ═══ App Layout ═══ */
#app-screen { height: 100dvh; }
#app-screen.show {
  display: flex;
  flex-direction: column;
}
#app-screen > header { flex-shrink: 0; position: relative; z-index: 2; }
#app-screen > main {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  z-index: 2;
}
#app-screen > footer { flex-shrink: 0; position: relative; z-index: 2; }

/* Chat panel */
#chat-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
#chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scroll-behavior: smooth;
}

/* ═══ Message Bubbles ═══ */
.msg-bubble {
  max-width: 82%;
  padding: 0.625rem 0.875rem;
  border-radius: 1.2rem;
  font-size: 0.875rem;
  line-height: 1.5;
  word-break: break-word;
  animation: bubbleIn 0.25s cubic-bezier(.34,1.56,.64,1);
}

@keyframes bubbleIn {
  0% { opacity: 0; transform: translateY(10px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.msg-mine {
  margin-left: auto;
  background: linear-gradient(135deg, var(--hot-pink), #ff4081);
  color: white;
  border-bottom-right-radius: 0.3rem;
  box-shadow: 0 2px 10px rgba(255,20,147,0.3);
}

.msg-theirs {
  margin-right: auto;
  background: var(--surface-light);
  color: var(--text);
  border-bottom-left-radius: 0.3rem;
  border: 1px solid rgba(255,105,180,0.15);
}

.msg-info {
  font-size: 0.68rem;
  color: var(--muted);
  margin-bottom: 0.15rem;
}

/* ═══ Voice Note ═══ */
.voice-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  min-width: 170px;
}

.voice-play-btn, .video-play-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--hot-pink);
  border: none;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  box-shadow: var(--glow-pink);
}
.voice-play-btn:active, .video-play-btn:active { transform: scale(0.9); }
.voice-play-btn.playing, .video-play-btn.playing {
  background: var(--gold);
  box-shadow: var(--glow-gold);
}

.voice-waveform {
  flex: 1;
  height: 28px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}
.voice-waveform .bar {
  flex: 1;
  background: var(--pink);
  border-radius: 2px;
  animation: waveAnim 0.7s ease-in-out infinite alternate;
}
.voice-waveform .bar:nth-child(odd) { animation-delay: 0.15s; }
.voice-waveform .bar:nth-child(3n) { animation-delay: 0.3s; }
.voice-waveform .bar:nth-child(5n) { animation-delay: 0.45s; }

@keyframes waveAnim {
  0% { height: 3px; }
  100% { height: 16px; }
}

.voice-duration {
  font-size: 0.7rem;
  color: var(--muted);
  flex-shrink: 0;
  min-width: 30px;
  text-align: right;
}

/* ═══ Video Note (кружок) ═══ */
.video-note {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--hot-pink);
  box-shadow: var(--glow-pink);
  cursor: pointer;
  background: #000;
  transition: transform 0.2s;
}
.video-note:hover { transform: scale(1.05); }

.video-note-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.video-note-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: rgba(0,0,0,0.3);
  pointer-events: none;
}

.video-note-duration {
  position: absolute;
  bottom: 6px;
  right: 10px;
  font-size: 0.65rem;
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 2px 6px;
  border-radius: 8px;
  pointer-events: none;
}

/* ═══ Recording Indicator ═══ */
#recording-indicator {
  position: fixed;
  bottom: 130px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background: rgba(30,5,5,0.95);
  border: 2px solid var(--hot-pink);
  border-radius: 2rem;
  padding: 0.6rem 1.2rem;
  box-shadow: var(--glow-pink);
}
#recording-indicator:not(.hidden) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: popIn 0.2s cubic-bezier(.34,1.56,.64,1);
}

@keyframes popIn {
  0% { transform: translateX(-50%) scale(0.8); opacity: 0; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

.rec-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--hot-pink);
  animation: recPulse 0.8s ease-in-out infinite;
}

@keyframes recPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.3; }
}

.rec-timer {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--light-pink);
  font-variant-numeric: tabular-nums;
}

/* ═══ Video Circles (video chat) ═══ */
.video-circle-wrapper {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--hot-pink);
  box-shadow: var(--glow-pink);
  background: var(--surface);
  position: relative;
}
@media (min-width: 640px) {
  .video-circle-wrapper { width: 320px; height: 320px; }
}

.video-circle {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.video-circle-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: var(--surface-light);
}

.video-circle-wrapper.ringing {
  animation: ringPulse 1.5s ease-in-out infinite;
}

@keyframes ringPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255,20,147,0.4); }
  50% { box-shadow: 0 0 40px rgba(255,20,147,0.8); }
}

.connector-heart {
  animation: heartBeat 1s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255,20,147,0.5));
}

@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.3); }
  30% { transform: scale(1); }
  45% { transform: scale(1.3); }
  60% { transform: scale(1); }
}

/* ═══ Floating Reactions ═══ */
.float-reaction {
  position: fixed;
  pointer-events: none;
  z-index: 150;
  font-size: 2rem;
  animation: floatUp 1.4s ease-out forwards;
}

@keyframes floatUp {
  0% { opacity: 1; transform: translateY(0) scale(0.5) rotate(0deg); }
  30% { opacity: 1; transform: translateY(-40px) scale(1.2) rotate(10deg); }
  100% { opacity: 0; transform: translateY(-180px) scale(0.3) rotate(-25deg); }
}

/* ═══ Poke Ripple ═══ */
.poke-ripple {
  position: fixed;
  pointer-events: none;
  z-index: 150;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 3px solid var(--hot-pink);
  box-shadow: var(--glow-pink);
  animation: rippleOut 1s ease-out forwards;
}

@keyframes rippleOut {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

/* ═══ Shake ═══ */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
.shake-it { animation: shake 0.5s ease-in-out; }

/* ═══ Online Dot ═══ */
#partner-status.online {
  background: #22c55e !important;
  box-shadow: 0 0 10px rgba(34,197,94,0.7);
}

/* ═══ Tab Buttons ═══ */
.tab-btn {
  transition: all 0.2s;
}
.tab-btn.active {
  background: var(--hot-pink) !important;
  color: white !important;
  box-shadow: var(--glow-pink);
}

/* ═══ Reaction Buttons ═══ */
.reaction-btn {
  transition: all 0.15s;
}
.reaction-btn:hover {
  transform: scale(1.25);
  filter: drop-shadow(0 0 6px currentColor);
}

/* ═══ Record mode toggle ═══ */
.rec-mode-btn {
  transition: all 0.2s;
}
.rec-mode-btn.active {
  background: rgba(255,20,147,0.3);
  color: var(--hot-pink);
}

/* ═══ Fade-in ═══ */
.fade-in {
  animation: fadeSlideIn 0.35s ease;
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══ Y2K decorative stars ═══ */
.y2k-star {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  opacity: 0.15;
  font-size: 1.5rem;
  animation: y2kFloat 6s ease-in-out infinite;
}
@keyframes y2kFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(15deg); }
}

/* ═══ Mobile ═══ */
@media (max-width: 640px) {
  .msg-bubble { max-width: 90%; }
  .voice-note { min-width: 140px; }
  .video-note { width: 90px; height: 90px; }
  .video-circle-wrapper { width: 200px; height: 200px; }
}