/* JARVIS — glass morphism sombre, arc reactor anime */

:root {
  --bg: #05080f;
  --cyan: #4dd8ff;
  --cyan-dim: rgba(77, 216, 255, 0.35);
  --red: #ff5a4d;
  --glass: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --text: #cfe9f5;
  --text-dim: #6d8797;
}

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

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* fond : grille subtile + vignette */
.grid-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(77, 216, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 216, 255, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 30%, transparent 100%);
}

header { text-align: center; margin-top: 18px; z-index: 1; }

h1 {
  font-size: 1.15rem;
  font-weight: 300;
  letter-spacing: 0.65em;
  text-indent: 0.65em;
  color: var(--cyan);
  text-shadow: 0 0 18px var(--cyan-dim);
}

.subtitle {
  margin-top: 6px;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ------------------------------------------------ arc reactor */

#reactor-wrap {
  position: relative;
  margin: 10px 0 4px;
  width: min(210px, 46vw);
  aspect-ratio: 1;
  z-index: 1;
  flex-shrink: 0;
}

#reactor { width: 100%; height: 100%; display: block; }

.ring { stroke: var(--cyan); transition: stroke 0.5s, opacity 0.5s; }
.halo { opacity: 0.15; }
.core-tri { stroke: var(--cyan); opacity: 0.8; }

#status-label {
  position: absolute;
  bottom: -14px;
  width: 100%;
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* animations de base (60fps : transform/opacity uniquement) */
@keyframes spin       { to { transform: rotate(360deg); } }
@keyframes spin-rev   { to { transform: rotate(-360deg); } }
@keyframes breathe    { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes pulse-fast { 0%,100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.03); } }
@keyframes glow-pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 0.9; } }

.r-outer, .segments, .r-inner, .core-glow, .core, .core-tri {
  transform-origin: 100px 100px;
  transform-box: view-box;
}

/* IDLE : respiration lente */
[data-state="idle"] .r-outer   { animation: spin 40s linear infinite, breathe 5s ease-in-out infinite; }
[data-state="idle"] .segments  { animation: spin-rev 60s linear infinite; opacity: 0.55; }
[data-state="idle"] .r-inner   { animation: spin 30s linear infinite reverse; opacity: 0.4; }
[data-state="idle"] .core-glow { animation: glow-pulse 5s ease-in-out infinite; }
[data-state="idle"] .core      { animation: breathe 5s ease-in-out infinite; }

/* LISTENING : rouge -> cyan, pulse rapide, rotation */
[data-state="listening"] .ring, [data-state="listening"] .core-tri { stroke: var(--red); }
[data-state="listening"] #reactor { animation: to-cyan 1.6s ease forwards; }
@keyframes to-cyan { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(0deg); } }
[data-state="listening"] .r-outer   { animation: spin 6s linear infinite, pulse-fast 0.8s ease-in-out infinite; }
[data-state="listening"] .segments  { animation: spin-rev 4s linear infinite; opacity: 1; }
[data-state="listening"] .r-inner   { animation: spin 3s linear infinite, breathe 0.8s ease-in-out infinite; }
[data-state="listening"] .core-glow { animation: pulse-fast 0.8s ease-in-out infinite; }
[data-state="listening"] .core      { animation: pulse-fast 0.8s ease-in-out infinite; }
[data-state="listening"] #status-label { color: var(--red); }

/* THINKING : ondulation, dash anime, rotation soutenue */
@keyframes dash-flow { to { stroke-dashoffset: -200; } }
[data-state="thinking"] .r-outer   { animation: spin 8s linear infinite, dash-flow 3s linear infinite; }
[data-state="thinking"] .segments  { animation: spin-rev 5s linear infinite; opacity: 0.9; }
[data-state="thinking"] .r-inner   { animation: spin 2.2s linear infinite, dash-flow 1.5s linear infinite; }
[data-state="thinking"] .core-glow { animation: glow-pulse 1.4s ease-in-out infinite; }
[data-state="thinking"] .core      { animation: breathe 1.4s ease-in-out infinite; }

/* SPEAKING : pulse au rythme de la parole */
[data-state="speaking"] .r-outer   { animation: spin 14s linear infinite, pulse-fast 0.45s ease-in-out infinite; }
[data-state="speaking"] .segments  { animation: spin-rev 10s linear infinite, breathe 0.45s ease-in-out infinite; opacity: 0.9; }
[data-state="speaking"] .r-inner   { animation: spin 7s linear infinite reverse; }
[data-state="speaking"] .core-glow { animation: pulse-fast 0.45s ease-in-out infinite; }
[data-state="speaking"] .core      { animation: pulse-fast 0.45s ease-in-out infinite; }

/* ------------------------------------------------ conversation */

#chat {
  flex: 1;
  width: min(680px, 94vw);
  margin: 16px 0 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--cyan-dim) transparent;
}

.msg {
  max-width: 84%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.45;
  border: 1px solid var(--glass-border);
  animation: msg-in 0.25s ease;
}
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.msg.user {
  align-self: flex-end;
  background: rgba(77, 216, 255, 0.10);
  border-color: rgba(77, 216, 255, 0.25);
  border-bottom-right-radius: 4px;
}

.msg.assistant {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.05);
  border-bottom-left-radius: 4px;
}

.msg.assistant.error { border-color: rgba(255, 90, 77, 0.4); color: #ffb3ad; }
.msg.interim { opacity: 0.55; font-style: italic; }

.sources {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--glass-border);
  font-size: 0.68rem;
  color: var(--text-dim);
  word-break: break-all;
}
.sources span { display: block; }

.thinking-dots span {
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--cyan);
  animation: breathe 1s ease-in-out infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

/* ------------------------------------------------ barre du bas */

#bar {
  width: min(680px, 94vw);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 40px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1;
}

#mic-btn {
  width: 58px; height: 58px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(77, 216, 255, 0.4);
  background: radial-gradient(circle at 35% 30%, rgba(77, 216, 255, 0.25), rgba(77, 216, 255, 0.06));
  color: var(--cyan);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.3s, border-color 0.3s, color 0.3s;
}
#mic-btn:active { transform: scale(0.94); }
#mic-btn.recording {
  color: var(--red);
  border-color: var(--red);
  box-shadow: 0 0 22px rgba(255, 90, 77, 0.5);
  animation: pulse-fast 0.8s ease-in-out infinite;
}
#mic-btn.hidden { display: none; }

#text-form { flex: 1; display: flex; gap: 8px; }

#text-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  padding: 12px 16px;
  color: var(--text);
  font-size: 16px; /* evite le zoom iOS au focus */
  outline: none;
}
#text-input:focus { border-color: var(--cyan-dim); }
#text-input::placeholder { color: var(--text-dim); }

#send-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: rgba(77, 216, 255, 0.12);
  color: var(--cyan);
  font-size: 1rem;
  cursor: pointer;
}
#send-btn:active { transform: scale(0.94); }

#speaker-btn {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--cyan);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#speaker-btn[data-on="0"] { color: var(--text-dim); }
#speaker-btn[data-on="0"] .wave { display: none; }

@media (max-height: 700px) {
  #reactor-wrap { width: min(150px, 38vw); }
  header { margin-top: 10px; }
}