@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;500;600&display=swap');

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

body {
  font-family: 'Rajdhani', sans-serif;
  background: #020208;
  color: #e0e0e0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

.hidden { display: none !important; }

/* ── Stars Canvas ─────────────────────────────────────────────────── */
#stars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* ── Login ────────────────────────────────────────────────────────── */
#login-screen {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

#login-container {
  text-align: center;
  padding: 2rem;
  max-width: 360px;
  width: 100%;
}

#login-head {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto 1rem;
}

#login-head .head-glow {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 40, 40, 0.15) 0%, transparent 70%);
}

#login-head img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0.95) contrast(1.15) drop-shadow(0 0 10px rgba(255, 30, 30, 0.2));
}

#login-container h1 {
  font-family: 'Orbitron', monospace;
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 4px;
  text-shadow: 0 0 20px rgba(255, 50, 50, 0.4);
}

.subtitle {
  font-family: 'Orbitron', monospace;
  color: #ff3333;
  font-size: 0.7rem;
  letter-spacing: 6px;
  margin-bottom: 2rem;
}

#google-signin-container { display: flex; justify-content: center; margin-bottom: 1rem; }
#login-status { color: #888; font-size: 0.85rem; margin-top: 0.5rem; }
#login-error { color: #ff4444; font-size: 0.85rem; margin-top: 0.5rem; }

/* ACCESS DENIED — scary zoom */
#login-screen.access-denied #login-head {
  animation: denied-zoom 0.5s cubic-bezier(0.2, 0, 0.2, 1) forwards;
}

#login-screen.access-denied #login-head .head-glow {
  background: radial-gradient(circle, rgba(255, 0, 0, 0.5) 0%, transparent 70%);
  animation: denied-flash 0.3s ease-in-out 3;
}

#login-screen.access-denied #login-container h1 {
  color: #ff2222;
  text-shadow: 0 0 30px rgba(255, 0, 0, 0.8);
}

#login-screen.access-denied .subtitle {
  visibility: hidden;
}

#login-screen.access-denied #login-error {
  font-family: 'Orbitron', monospace;
  font-size: 1rem;
  letter-spacing: 3px;
  color: #ff0000;
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
  animation: denied-text-pulse 0.5s ease-in-out 3;
}

@keyframes denied-zoom {
  0% { transform: scale(1); }
  60% { transform: scale(3.5) translateY(30px); }
  70% { transform: scale(3.3) translateY(28px); }
  100% { transform: scale(3.5) translateY(30px); }
}

@keyframes denied-flash {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; background: radial-gradient(circle, rgba(255, 0, 0, 0.7) 0%, transparent 70%); }
}

@keyframes denied-text-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Reset after denied animation */
#login-screen.access-denied-reset #login-head {
  animation: denied-retreat 0.8s ease-in-out forwards;
}

@keyframes denied-retreat {
  0% { transform: scale(3.5) translateY(30px); }
  100% { transform: scale(1) translateY(0); }
}

/* ── Main App ─────────────────────────────────────────────────────── */
#app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

/* ── Floating Head ────────────────────────────────────────────────── */
#head-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

#floating-head {
  position: relative;
  width: 240px;
  height: 240px;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-12px) rotate(0.5deg); }
  50% { transform: translateY(-6px) rotate(-0.3deg); }
  75% { transform: translateY(-15px) rotate(0.2deg); }
}

/* Outer aura — audio reactive */
#head-aura {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 30, 30, 0.12) 0%, rgba(255, 30, 30, 0.04) 40%, transparent 70%);
  transition: transform 0.1s ease, opacity 0.1s ease;
  opacity: 0.5;
}

#head-aura-inner {
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  border: 1px solid rgba(255, 50, 50, 0.1);
  transition: border-color 0.1s, box-shadow 0.1s;
}

#head-img-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  transition: box-shadow 0.2s;
}

#head-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0.95) contrast(1.15) drop-shadow(0 0 15px rgba(255, 30, 30, 0.2));
  transition: filter 0.3s, transform 0.1s;
}

/* ── States ───────────────────────────────────────────────────────── */

/* Recording — listening to user */
body.recording #floating-head {
  animation: float 6s ease-in-out infinite, listen-pulse 1.5s ease-in-out infinite;
}

body.recording #head-aura {
  opacity: 1;
  background: radial-gradient(circle, rgba(255, 50, 30, 0.25) 0%, rgba(255, 30, 30, 0.08) 40%, transparent 70%);
}

body.recording #head-img-wrap {
  box-shadow: 0 0 40px rgba(255, 30, 30, 0.3), 0 0 80px rgba(255, 30, 30, 0.1);
}

body.recording #head-img {
  filter: brightness(0.95) contrast(1.15) saturate(1.1);
}

body.recording #head-aura-inner {
  border-color: rgba(255, 50, 50, 0.3);
  box-shadow: 0 0 15px rgba(255, 30, 30, 0.15);
}

@keyframes listen-pulse {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-8px) scale(1.02); }
}

/* Processing — thinking */
body.processing #head-aura {
  opacity: 0.7;
  animation: think-glow 1s ease-in-out infinite;
}

body.processing #head-img-wrap {
  border-color: rgba(255, 120, 0, 0.5);
  box-shadow: 0 0 30px rgba(255, 100, 0, 0.25);
}

@keyframes think-glow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

/* Speaking — voice response playing (head zooms in) */
body.speaking #floating-head {
  animation: speak-zoom 0.6s ease-out forwards, float-speaking 4s ease-in-out 0.6s infinite;
}

body.speaking #head-img-wrap {
  box-shadow: 0 0 50px rgba(255, 30, 30, 0.4), 0 0 100px rgba(255, 30, 30, 0.15);
}

body.speaking #head-aura-inner {
  border-color: rgba(255, 50, 50, 0.4);
  box-shadow: 0 0 20px rgba(255, 30, 30, 0.2);
}

body.speaking #head-img {
  filter: brightness(1) contrast(1.15) drop-shadow(0 0 20px rgba(255, 30, 30, 0.3));
}

@keyframes speak-zoom {
  0% { transform: scale(1) translateY(0); }
  100% { transform: scale(1.4) translateY(10px); }
}

@keyframes float-speaking {
  0%, 100% { transform: scale(1.4) translateY(10px); }
  50% { transform: scale(1.4) translateY(2px); }
}

/* Return to normal when done speaking */
#floating-head {
  transition: transform 0.8s ease-in-out;
}

/* ── Transcript ───────────────────────────────────────────────────── */
#transcript-area {
  text-align: center;
  padding: 0 1.5rem;
  min-height: 55px;
  flex-shrink: 0;
}

.transcript-line {
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0.2rem 0;
  opacity: 0;
  transition: opacity 0.3s;
}

.transcript-line.visible { opacity: 1; }
#user-text { color: #555; font-style: italic; }
#ai-text { color: #ccc; font-weight: 500; }

/* ── Controls ─────────────────────────────────────────────────────── */
#controls {
  text-align: center;
  padding: 0.75rem 0 1.5rem;
  flex-shrink: 0;
}

#mic-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #1a1015;
  background: linear-gradient(145deg, #120a0a, #0a0508);
  color: #ff3333;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}

#mic-btn:hover { border-color: #ff3333; }

body.recording #mic-btn {
  background: #ff3333;
  color: #fff;
  border-color: #ff4444;
  box-shadow: 0 0 25px rgba(255, 30, 30, 0.5), 0 0 50px rgba(255, 30, 30, 0.2);
}

body.processing #mic-btn {
  border-color: #ff6600;
  color: #ff6600;
  animation: proc-pulse 1s ease-in-out infinite;
}

@keyframes proc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

#mic-hint {
  font-family: 'Orbitron', monospace;
  color: #333;
  font-size: 0.55rem;
  letter-spacing: 3px;
  margin-top: 0.5rem;
}

/* ── Status Bar ───────────────────────────────────────────────────── */
#status-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(2, 2, 8, 0.6);
  backdrop-filter: blur(10px);
  z-index: 10;
  font-size: 0.7rem;
}

#connection-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #33ff33;
  box-shadow: 0 0 4px rgba(50, 255, 50, 0.5);
}

#connection-dot.error { background: #ff3333; box-shadow: 0 0 4px rgba(255, 50, 50, 0.5); }

#status-text {
  flex: 1;
  color: #444;
  font-family: 'Orbitron', monospace;
  font-size: 0.5rem;
  letter-spacing: 1px;
}

#user-email { color: #222; font-size: 0.5rem; }

#logout-btn {
  background: none;
  border: none;
  color: #333;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 2px 6px;
  transition: color 0.2s;
}

#logout-btn:hover { color: #ff3333; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-height: 550px) {
  #floating-head { width: 180px; height: 180px; }
}

@media (min-width: 768px) {
  #floating-head { width: 300px; height: 300px; }
}

@media (min-width: 1200px) {
  #floating-head { width: 360px; height: 360px; }
}