/* Custom overrides on top of Tailwind CDN. */

html { -webkit-text-size-adjust: 100%; }

/* Honor iPhone safe areas (status bar / home indicator). */
body { padding-top: env(safe-area-inset-top); }
nav.fixed { padding-bottom: env(safe-area-inset-bottom); }

/* Prevent iOS form zoom — inputs must be at least 16px. */
input, select, textarea, button { font-size: 16px; }

/* No tap-highlight, smoother active states on touch. */
* { -webkit-tap-highlight-color: transparent; }

/* Briefing markdown styling */
.prose-jarvis h1 { font-size: 1.25rem; font-weight: 600; margin: 0 0 .5rem; color: #f1f5f9; }
.prose-jarvis h2 { font-size: .95rem; font-weight: 600; margin: 1rem 0 .35rem; color: #cbd5e1; text-transform: uppercase; letter-spacing: .04em; }
.prose-jarvis h3 { font-size: .9rem; font-weight: 600; margin: .75rem 0 .25rem; color: #cbd5e1; }
.prose-jarvis p  { margin: .35rem 0; }
.prose-jarvis ul { margin: .35rem 0 .5rem; padding-left: 1.1rem; list-style: disc; }
.prose-jarvis ol { margin: .35rem 0 .5rem; padding-left: 1.4rem; list-style: decimal; }
.prose-jarvis li { margin: .15rem 0; }
.prose-jarvis blockquote {
  margin: .5rem 0;
  padding: .25rem .75rem;
  border-left: 3px solid #38bdf8;
  color: #94a3b8;
  font-style: italic;
}
.prose-jarvis hr { border: 0; border-top: 1px solid #334155; margin: 1rem 0; }
.prose-jarvis code { background: #0f172a; padding: 1px 5px; border-radius: 4px; font-size: .85em; }
.prose-jarvis strong { color: #f8fafc; }
.prose-jarvis a { color: #38bdf8; text-decoration: underline; }

/* ===== Collapsible Cards (native <details>) ===== */
details.card {
  background: #1e293b;
  border-radius: 1rem;
  margin-bottom: 1rem;
  overflow: hidden;
}
details.card > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.875rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  min-height: 44px;
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary .card-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  font-weight: 500;
}
details.card > summary .card-chevron {
  font-size: 0.7rem;
  color: #64748b;
  transition: transform 0.25s ease;
  margin-left: 0.5rem;
}
details.card[open] > summary .card-chevron {
  transform: rotate(180deg);
}
details.card > summary:hover .card-chevron { color: #cbd5e1; }
details.card > .card-body {
  padding: 0 1.25rem 1.25rem;
}

/* ===== JARVIS Orb (Tony-Stark-style 3D orbital sphere) ===== */
.jarvis-orb {
  position: relative;
  width: 77px;
  height: 77px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  filter: drop-shadow(0 0 28px rgba(56, 189, 248, 0.68))
          drop-shadow(0 0 6px rgba(125, 211, 252, 0.48));
  animation: jarvis-drop-pulse 4s ease-in-out infinite;
}

/* Orb-as-button (Header in base.html + Mic-Button im Overlay) */
.jarvis-orb-button {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.jarvis-orb-button:hover { transform: scale(1.06); }
.jarvis-orb-button:active { transform: scale(0.97); }
.jarvis-orb-button:focus { outline: none; }
.jarvis-orb-button:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.6);
  outline-offset: 10px;
}

/* Größere Variante im Voice-Overlay */
.jarvis-orb-large {
  width: 140px;
  height: 140px;
  filter: drop-shadow(0 0 45px rgba(56, 189, 248, 0.72))
          drop-shadow(0 0 12px rgba(125, 211, 252, 0.56));
}
.jarvis-orb-large .orb-core { width: 38px; height: 38px; }
.jarvis-orb-large .orb-core-halo { width: 64px; height: 64px; }
.jarvis-orb-large .orb-glow { inset: -36px; }
.jarvis-orb-large .orbit-3 { inset: 14px; }
.jarvis-orb-large .orbit-4 { inset: 26px; }
.jarvis-orb-large .orbit-5 { inset: 6px; }

/* Recording / Thinking — Orb färbt sich rot / pulst */
.voice-mic-state-recording .orb-core {
  background: radial-gradient(circle at 35% 35%,
    rgba(254, 202, 202, 0.95) 0%,
    rgba(248, 113, 113, 0.9) 28%,
    rgba(185, 28, 28, 0.95) 60%,
    rgba(7, 6, 23, 1) 100%) !important;
  box-shadow: 0 0 22px rgba(248, 113, 113, 0.85),
              inset 0 0 10px rgba(255,255,255,0.45),
              inset 0 0 20px rgba(127, 29, 29, 0.6) !important;
}
.voice-mic-state-recording .orb-glow {
  background: radial-gradient(circle,
    rgba(248, 113, 113, 0.45) 0%,
    rgba(248, 113, 113, 0.10) 45%,
    rgba(248, 113, 113, 0) 75%) !important;
}
.voice-mic-state-thinking .orb-core-halo {
  animation: jarvis-pulse 1.4s ease-in-out infinite !important;
}

/* Outer atmospheric glow — donut-shaped (transparent center) so Core deutlich erkennbar bleibt */
.jarvis-orb .orb-glow {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(56, 189, 248, 0)   0%,
    rgba(56, 189, 248, 0)   38%,
    rgba(56, 189, 248, 0.40) 55%,
    rgba(56, 189, 248, 0.18) 72%,
    rgba(56, 189, 248, 0.04) 85%,
    rgba(56, 189, 248, 0)   95%);
  animation: jarvis-glow 4.5s ease-in-out infinite;
}

/* Translucent wireframe outer sphere */
.jarvis-orb .orb-sphere {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(125, 211, 252, 0.25);
  background:
    radial-gradient(circle at 30% 30%,
      rgba(125, 211, 252, 0.10) 0%,
      rgba(56, 189, 248, 0.04) 40%,
      rgba(2, 6, 23, 0.0) 70%);
  box-shadow:
    inset 0 0 30px rgba(56, 189, 248, 0.15),
    inset 0 0 6px rgba(125, 211, 252, 0.18);
  animation: jarvis-sphere-shimmer 14s ease-in-out infinite;
}

/* Orbital ellipses — 3D-tilt via rotateX/rotateY, langsam rotierend */
.jarvis-orb .orb-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(56, 189, 248, 0.5);
  transform-style: preserve-3d;
}
.jarvis-orb .orbit-1 {
  border-color: rgba(56, 189, 248, 0.85);
  transform: rotateX(72deg);
  animation: orbit-spin-1 7s linear infinite;
}
.jarvis-orb .orbit-2 {
  border-color: rgba(125, 211, 252, 0.8);
  transform: rotateX(72deg) rotateY(60deg);
  animation: orbit-spin-2 10s linear infinite reverse;
}
.jarvis-orb .orbit-3 {
  inset: 8px;
  border-color: rgba(56, 189, 248, 0.75);
  transform: rotateX(72deg) rotateY(-50deg);
  animation: orbit-spin-3 8s linear infinite;
}
.jarvis-orb .orbit-4 {
  inset: 14px;
  border: 1px dashed rgba(56, 189, 248, 0.55);
  animation: jarvis-spin 15s linear infinite;
}
.jarvis-orb .orbit-5 {
  inset: 3px;
  border: 1px solid rgba(56, 189, 248, 0.4);
  animation: jarvis-spin 22s linear infinite reverse;
}

/* Dots that travel on the inclined orbits */
.jarvis-orb .orbit-dot {
  position: absolute;
  top: -2.5px; left: 50%;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: #f0f9ff;
  box-shadow:
    0 0 6px #bae6fd,
    0 0 12px #38bdf8,
    0 0 22px #38bdf8;
}

/* Pupil-style core: dunkler Innenraum + heller Highlight */
/* Halo ist ein Ring (Mitte transparent), damit der Core nicht überstrahlt wird */
.jarvis-orb .orb-core-halo {
  position: absolute;
  width: 35px; height: 35px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(56, 189, 248, 0)   0%,
    rgba(56, 189, 248, 0)   58%,
    rgba(56, 189, 248, 0.70) 70%,
    rgba(56, 189, 248, 0.25) 88%,
    rgba(56, 189, 248, 0)   100%);
  animation: jarvis-pulse 2.6s ease-in-out infinite;
}
.jarvis-orb .orb-core {
  position: absolute;
  width: 21px; height: 21px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%,
      rgba(224, 242, 254, 1) 0%,
      rgba(125, 211, 252, 0.95) 25%,
      rgba(3, 105, 161, 0.95) 60%,
      rgba(2, 6, 23, 1) 100%);
  box-shadow:
    0 0 0 1px rgba(186, 230, 253, 0.35),
    inset 0 0 10px rgba(255, 255, 255, 0.45),
    inset 0 0 18px rgba(3, 105, 161, 0.6);
  animation: jarvis-core-breathe 2.4s ease-in-out infinite;
}

/* Drifting sparks */
.jarvis-orb .orb-spark {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #e0f2fe;
  box-shadow: 0 0 6px #38bdf8;
  opacity: 0;
}
.jarvis-orb .s1 { top: 15%; left: 25%; animation: spark-drift 3.6s ease-in-out infinite; }
.jarvis-orb .s2 { top: 70%; left: 80%; animation: spark-drift 4.8s ease-in-out infinite 0.8s; }
.jarvis-orb .s3 { top: 85%; left: 20%; animation: spark-drift 4.0s ease-in-out infinite 2s; }
.jarvis-orb .s4 { top: 25%; left: 78%; animation: spark-drift 5.4s ease-in-out infinite 2.8s; }

@keyframes jarvis-spin   { to { transform: rotate(360deg); } }
@keyframes orbit-spin-1  { to { transform: rotateX(72deg) rotateZ(360deg); } }
@keyframes orbit-spin-2  { to { transform: rotateX(72deg) rotateY(60deg)  rotateZ(360deg); } }
@keyframes orbit-spin-3  { to { transform: rotateX(72deg) rotateY(-50deg) rotateZ(360deg); } }
@keyframes jarvis-pulse  {
  0%, 100% { transform: scale(0.92); opacity: 0.75; }
  50%      { transform: scale(1.22); opacity: 1; }
}
@keyframes jarvis-core-breathe {
  0%, 100% { transform: scale(0.96); box-shadow: 0 0 0 1px rgba(186,230,253,0.30), inset 0 0 8px  rgba(255,255,255,0.3),  inset 0 0 16px rgba(3, 105, 161, 0.5); }
  50%      { transform: scale(1.15); box-shadow: 0 0 0 1px rgba(186,230,253,0.55), inset 0 0 12px rgba(255,255,255,0.55), inset 0 0 22px rgba(3, 105, 161, 0.7); }
}
@keyframes jarvis-glow {
  0%, 100% { opacity: 0.40; transform: scale(0.92); }
  50%      { opacity: 0.80; transform: scale(1.18); }
}
@keyframes jarvis-drop-pulse {
  0%, 100% { filter: drop-shadow(0 0 22px rgba(56, 189, 248, 0.56)) drop-shadow(0 0 6px rgba(125,211,252,0.40)); }
  50%      { filter: drop-shadow(0 0 42px rgba(56, 189, 248, 0.80)) drop-shadow(0 0 14px rgba(125,211,252,0.72)); }
}
@keyframes jarvis-sphere-shimmer {
  0%, 100% { box-shadow: inset 0 0 30px rgba(56, 189, 248, 0.2),  inset 0 0 6px rgba(125, 211, 252, 0.25); }
  50%      { box-shadow: inset 0 0 55px rgba(56, 189, 248, 0.45), inset 0 0 12px rgba(125, 211, 252, 0.5); }
}
@keyframes spark-drift {
  0%, 100%      { opacity: 0; transform: translate(0, 0) scale(0.5); }
  15%           { opacity: 1; }
  50%           { opacity: 1; transform: translate(12px, -10px) scale(1.4); }
  85%           { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .jarvis-orb *, .jarvis-orb { animation: none !important; }
}

/* ===== Voice Mic States ===== */
.voice-mic-state-idle {
  box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.0);
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.voice-mic-state-recording {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(248, 113, 113, 0.8) !important;
  animation: voice-mic-pulse-rec 1.4s ease-in-out infinite;
}
.voice-mic-state-recording svg { color: #fca5a5 !important; }
.voice-mic-state-thinking {
  background: rgba(56, 189, 248, 0.15) !important;
  animation: voice-mic-pulse-think 1.8s ease-in-out infinite;
}

@keyframes voice-mic-pulse-rec {
  0%, 100% { box-shadow: 0 0 0 0   rgba(248, 113, 113, 0.5); transform: scale(1); }
  50%      { box-shadow: 0 0 0 18px rgba(248, 113, 113, 0);  transform: scale(1.04); }
}
@keyframes voice-mic-pulse-think {
  0%, 100% { box-shadow: 0 0 0 0   rgba(56, 189, 248, 0.5); transform: scale(1); }
  50%      { box-shadow: 0 0 0 14px rgba(56, 189, 248, 0);  transform: scale(1.02); }
}