/* =============================================================================
   Jarvis UI — styles.css
   Full-screen dark interface with animated status circle.
   ============================================================================= */

/* ── Reset & root variables ─────────────────────────────────────────────────── */

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

:root {
  --bg: #000000;
  --surface: rgba(255, 255, 255, 0.05);
  --surface-border: rgba(255, 255, 255, 0.08);

  --color-idle:       #1a3a6b;
  --color-idle-glow:  #0044aa;
  --color-listen:     #0066ff;
  --color-listen-glow:#3399ff;
  --color-process:    #ff9900;
  --color-process-glow:#ffbb44;
  --color-speak:      #00cc66;
  --color-speak-glow: #33ff99;

  --circle-size: 260px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --transcript-fade-duration: 8s;
}

/* ── Body ────────────────────────────────────────────────────────────────────── */

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: #ffffff;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* ── PIN modal ───────────────────────────────────────────────────────────────── */

#pin-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.95);
  z-index: 1000;
}

#pin-modal.hidden {
  display: none;
}

#pin-box {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 36px 32px;
  width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  backdrop-filter: blur(20px);
}

#pin-box h2 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.85);
}

#pin-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: #fff;
  font-size: 22px;
  letter-spacing: 0.3em;
  text-align: center;
  padding: 10px 16px;
  outline: none;
  transition: border-color 0.2s;
}

#pin-input:focus {
  border-color: var(--color-listen);
}

#pin-submit {
  width: 100%;
  background: var(--color-listen);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 12px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

#pin-submit:hover  { background: #0055dd; }
#pin-submit:active { transform: scale(0.97); }

#pin-error {
  font-size: 13px;
  color: #ff4444;
  min-height: 18px;
}

/* ── Main app container ─────────────────────────────────────────────────────── */

#app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 24px 20px;
}

#app.hidden {
  display: none;
}

/* ── Status circle ─────────────────────────────────────────────────────────── */

#circle-wrapper {
  position: relative;
  width: var(--circle-size);
  height: var(--circle-size);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Emanating rings — 3 layers, staggered */
.ring {
  position: absolute;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  border: 2px solid transparent;
  pointer-events: none;
}

#circle {
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--color-idle-glow), var(--color-idle));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: background 0.4s ease;
  box-shadow: 0 0 40px rgba(0, 68, 170, 0.3);
}

#status-label {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* ── Idle: slow gentle pulse ─────────────────────────────────────────────────── */

@keyframes idle-pulse {
  0%, 100% { transform: scale(1.00); box-shadow: 0 0 40px rgba(0, 68, 170, 0.25); }
  50%       { transform: scale(1.04); box-shadow: 0 0 60px rgba(0, 68, 170, 0.40); }
}

#circle[data-state="idle"] {
  background: radial-gradient(circle at 40% 35%, var(--color-idle-glow), var(--color-idle));
  animation: idle-pulse 3s ease-in-out infinite;
}

#circle[data-state="idle"] ~ .ring { opacity: 0; }

/* ── Listening: rings emanate outward ─────────────────────────────────────────── */

@keyframes listen-ring {
  0%   { transform: scale(1);   opacity: 0.7; border-color: var(--color-listen); }
  100% { transform: scale(1.9); opacity: 0;   border-color: var(--color-listen); }
}

#circle[data-state="listening"] {
  background: radial-gradient(circle at 40% 35%, var(--color-listen-glow), var(--color-listen));
  animation: none;
  box-shadow: 0 0 60px rgba(0, 102, 255, 0.5);
}

#circle[data-state="listening"] ~ .ring:nth-child(1) {
  animation: listen-ring 1.6s ease-out infinite;
  animation-delay: 0s;
}
#circle[data-state="listening"] ~ .ring:nth-child(2) {
  animation: listen-ring 1.6s ease-out infinite;
  animation-delay: 0.5s;
}
#circle[data-state="listening"] ~ .ring:nth-child(3) {
  animation: listen-ring 1.6s ease-out infinite;
  animation-delay: 1.0s;
}

/* ── Processing: slow rotation ────────────────────────────────────────────────── */

@keyframes process-spin {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

@keyframes process-pulse {
  0%, 100% { transform: scale(1.00); }
  50%       { transform: scale(1.06); }
}

#circle[data-state="processing"] {
  background: conic-gradient(
    from 0deg,
    var(--color-process),
    var(--color-idle),
    var(--color-process)
  );
  animation: process-spin 2s linear infinite, process-pulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 60px rgba(255, 153, 0, 0.4);
}

#circle[data-state="processing"] ~ .ring { opacity: 0; }

/* ── Speaking: fast rhythmic pulse + contracting rings ───────────────────────── */

@keyframes speak-pulse {
  0%, 100% { transform: scale(1.00); box-shadow: 0 0 50px rgba(0, 204, 102, 0.3); }
  50%       { transform: scale(1.07); box-shadow: 0 0 80px rgba(0, 204, 102, 0.6); }
}

@keyframes speak-ring {
  0%   { transform: scale(1.0); opacity: 0.6; border-color: var(--color-speak); }
  50%  { transform: scale(1.4); opacity: 0.3; }
  100% { transform: scale(1.7); opacity: 0;   border-color: var(--color-speak); }
}

#circle[data-state="speaking"] {
  background: radial-gradient(circle at 40% 35%, var(--color-speak-glow), var(--color-speak));
  animation: speak-pulse 0.7s ease-in-out infinite;
}

#circle[data-state="speaking"] ~ .ring:nth-child(1) {
  animation: speak-ring 1.2s ease-out infinite;
  animation-delay: 0s;
}
#circle[data-state="speaking"] ~ .ring:nth-child(2) {
  animation: speak-ring 1.2s ease-out infinite;
  animation-delay: 0.4s;
}
#circle[data-state="speaking"] ~ .ring:nth-child(3) {
  animation: speak-ring 1.2s ease-out infinite;
  animation-delay: 0.8s;
}

/* ── Transcript display ──────────────────────────────────────────────────────── */

#transcript-area {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 80px;
}

.transcript-line {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.transcript-line.user {
  background: rgba(0, 102, 255, 0.15);
  border: 1px solid rgba(0, 102, 255, 0.25);
  color: rgba(255, 255, 255, 0.9);
  align-self: flex-end;
  max-width: 90%;
}

.transcript-line.assistant {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  align-self: flex-start;
  max-width: 95%;
}

.transcript-line.fading {
  opacity: 0;
}

/* ── Status text (tool execution info) ───────────────────────────────────────── */

#status-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.05em;
  text-align: center;
  min-height: 18px;
  transition: opacity 0.3s;
}

/* ── Push-to-talk button (mobile only) ───────────────────────────────────────── */

#btn-ptt {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 102, 255, 0.2);
  border: 2px solid rgba(0, 102, 255, 0.5);
  color: rgba(255, 255, 255, 0.8);
  font-size: 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

#btn-ptt:hover {
  background: rgba(0, 102, 255, 0.35);
  border-color: rgba(0, 102, 255, 0.8);
}

#btn-ptt:active,
#btn-ptt.recording {
  background: rgba(255, 50, 50, 0.3);
  border-color: rgba(255, 50, 50, 0.8);
  transform: scale(0.95);
}

/* Hide PTT button on desktop (Electron) — wake word handles activation */
@media (min-width: 500px) {
  #btn-ptt {
    display: none;
  }
}

/* ── Connection status indicator ─────────────────────────────────────────────── */

#connection-dot {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #333;
  transition: background 0.3s;
}

#connection-dot.connected    { background: #00cc66; }
#connection-dot.disconnected { background: #cc3300; }
#connection-dot.connecting   { background: #ff9900; animation: idle-pulse 1s infinite; }

/* ── Utility ──────────────────────────────────────────────────────────────────── */

.hidden { display: none !important; }