/* PACOBOT – Sci-Fi-Ebene für die Chat-Seite.
   Wird NUR von index.html geladen, die Login-Seite bleibt davon unberührt. */

/* Farben des Orbs als registrierte Variablen, damit Zustandswechsel weich überblenden */
@property --c2 { syntax: "<color>"; inherits: true; initial-value: #9be8ff; }
@property --c3 { syntax: "<color>"; inherits: true; initial-value: #3aa2ff; }
@property --c4 { syntax: "<color>"; inherits: true; initial-value: #5a36ff; }
@property --c5 { syntax: "<color>"; inherits: true; initial-value: #1a0a4a; }
@property --glow-a { syntax: "<color>"; inherits: true; initial-value: rgba(70, 150, 255, 0.42); }
@property --glow-b { syntax: "<color>"; inherits: true; initial-value: rgba(110, 70, 255, 0.18); }
@property --ring { syntax: "<color>"; inherits: true; initial-value: rgba(130, 200, 255, 0.42); }
@property --hud { syntax: "<color>"; inherits: true; initial-value: rgba(110, 200, 255, 0.55); }

:root {
  --hud: rgba(110, 200, 255, 0.55);
  --hud-dim: rgba(110, 200, 255, 0.2);
  --hud-faint: rgba(110, 200, 255, 0.055);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- Hintergrund: Tiefe, Sternenstaub, HUD-Raster ---------- */
body.app {
  background:
    radial-gradient(ellipse 70% 55% at 50% 16%, #0c1740 0%, transparent 62%),
    radial-gradient(ellipse 50% 45% at 88% 96%, rgba(110, 40, 220, 0.16) 0%, transparent 70%),
    radial-gradient(ellipse 45% 40% at 6% 82%, rgba(0, 150, 255, 0.08) 0%, transparent 70%),
    #03040a;
}
body.app > .topbar, body.app > .hero, body.app > .status,
body.app > .messages, body.app > .composer { position: relative; z-index: 2; }

.stardust { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }

.hud-frame { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hud-frame::before { /* feines Raster, nur um die Mitte sichtbar */
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--hud-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--hud-faint) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 26%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 55% 50% at 50% 26%, #000 0%, transparent 78%);
}
.hud-frame::after { /* langsam wandernde Scan-Linie */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 140px;
  background: linear-gradient(to bottom, transparent, rgba(110, 200, 255, 0.035) 50%, transparent);
  animation: sf-scan 11s linear infinite;
}
.hud-corner { position: absolute; width: 22px; height: 22px; border: 1px solid var(--hud-dim); }
.hud-corner.tl { top: calc(8px + env(safe-area-inset-top, 0px)); left: 8px; border-right: 0; border-bottom: 0; }
.hud-corner.tr { top: calc(8px + env(safe-area-inset-top, 0px)); right: 8px; border-left: 0; border-bottom: 0; }
.hud-corner.bl { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); left: 8px; border-right: 0; border-top: 0; }
.hud-corner.br { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); right: 8px; border-left: 0; border-top: 0; }

/* ---------- Kopfzeile ---------- */
.topbar::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--hud-dim) 12%, var(--hud-dim) 88%, transparent);
}
.topbar::before {
  content: ""; position: absolute; left: 50%; bottom: -1px; width: 72px; height: 3px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(120, 210, 255, 0.8), transparent);
}
.brand {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.38em; color: #e2f4ff;
  text-shadow: 0 0 12px rgba(79, 195, 255, 0.6), 0 0 2px rgba(200, 240, 255, 0.8);
}
.brand-dot { position: relative; animation: sf-dot 2.4s ease-in-out infinite; }
.brand-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid rgba(79, 195, 255, 0.5); animation: ripple 2.4s ease-out infinite;
}
.ghost {
  border-radius: 6px; background: rgba(10, 20, 46, 0.5); border-color: rgba(110, 190, 255, 0.2);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #8fa6cf;
}
.ghost:hover { color: #e6f4ff; border-color: rgba(120, 200, 255, 0.55); box-shadow: 0 0 14px rgba(79, 195, 255, 0.18); }

/* ---------- Orb ---------- */
.hero { position: relative; }
.orb {
  filter: none !important; /* der frühere Filter auf dem ganzen Orb erzeugte die eckige Ebene */
  transition: --c2 0.9s, --c3 0.9s, --c4 0.9s, --c5 0.9s, --glow-a 0.9s, --glow-b 0.9s, --ring 0.9s, --hud 0.9s;
}
.orb > div { pointer-events: none; }

.orb-glow {
  inset: -75%; filter: none; opacity: 0.85;
  background: radial-gradient(circle closest-side, var(--glow-a) 0%, var(--glow-b) 42%, transparent 100%);
  transition: opacity 0.8s ease;
}
.orb-flare { /* Zusatz-Leuchten: lädt beim Nachdenken auf, entlädt sich beim Antworten */
  inset: -110%; opacity: 0;
  background: radial-gradient(circle closest-side, rgba(170, 235, 255, 0.5) 0%, rgba(120, 90, 255, 0.24) 32%, rgba(80, 60, 255, 0.08) 60%, transparent 100%);
}
.orb-shell {
  inset: 0;
  box-shadow: 0 0 30px 6px rgba(70, 170, 255, 0.5), 0 0 90px 24px rgba(100, 70, 255, 0.3);
  transition: box-shadow 0.8s ease;
}
.orb-core {
  clip-path: circle(50% at 50% 50%); /* exakt rund – nichts ragt mehr heraus */
  isolation: isolate;
  background: radial-gradient(circle at 34% 28%, #f2fdff 0%, var(--c2) 10%, var(--c3) 32%, var(--c4) 62%, var(--c5) 88%, #0b0420 100%);
  box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.35), inset -10px -14px 40px rgba(20, 0, 60, 0.7);
}
.orb-core::before { /* holografische Linien im Kern */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 4px);
  animation: sf-lines 6s linear infinite;
}
.orb-core::after { z-index: 2; }
.orb-swirl { mix-blend-mode: normal; opacity: 0.7; filter: blur(8px); }
.orb-swirl.s2 { opacity: 0.5; }

/* pulsierende Ringe nach außen – wie bisher, nur mit Zustandsfarbe */
.orb-ring { border-color: var(--ring); }

/* rotierende HUD-Ringe */
.orb-hud { inset: -40%; border-radius: 0 !important; }
.orb-hud svg { display: block; width: 100%; height: 100%; overflow: visible; }
.orb-hud circle, .orb-hud path { fill: none; stroke: var(--hud); vector-effect: non-scaling-stroke; }
.arc-a { stroke-width: 1; stroke-dasharray: 1 5; opacity: 0.7; }
.arc-b { stroke-width: 1.6; stroke-dasharray: 40 16 4 16; opacity: 0.55; }
.arc-c { stroke-width: 1; stroke-dasharray: 96 44 6 44; opacity: 0.4; }
.orb-hud .faint { stroke-width: 0.6; stroke-dasharray: 2 4; opacity: 0.25; }
.orb-hud .tick { stroke-width: 1; opacity: 0.55; }
.hud-a { animation: spin 36s linear infinite; }
.hud-b { animation: spin 24s linear infinite reverse; }
.hud-c { animation: spin 58s linear infinite; }

/* --- Zustand: denkt nach (lädt auf) --- */
.orb.thinking {
  --c2: #d2c2ff; --c3: #8a6bff; --c4: #b03cff; --c5: #340a5a;
  --glow-a: rgba(150, 110, 255, 0.55); --glow-b: rgba(210, 80, 255, 0.24);
  --ring: rgba(200, 160, 255, 0.6); --hud: rgba(190, 160, 255, 0.85);
}
.orb.thinking .orb-glow { opacity: 1; }
.orb.thinking .orb-flare { animation: sf-charge 1.4s ease-in-out infinite alternate; }
.orb.thinking .orb-shell {
  box-shadow: 0 0 40px 10px rgba(150, 110, 255, 0.6), 0 0 130px 40px rgba(170, 70, 255, 0.38);
}
.orb.thinking .hud-a { animation-duration: 7s; }
.orb.thinking .hud-b { animation-duration: 4.5s; }
.orb.thinking .hud-c { animation-duration: 12s; }

/* --- Zustand: antwortet (Leuchten entlädt sich) --- */
.orb.speaking .orb-flare { animation: sf-release 3s ease-out forwards; }
.orb.speaking .orb-shell { animation: sf-shell-flash 3s ease-out; }

/* --- Zustand: Fehler --- */
.orb.error {
  --c2: #ffc0cf; --c3: #ff5a84; --c4: #b0204e; --c5: #3a0618;
  --glow-a: rgba(255, 80, 120, 0.45); --glow-b: rgba(255, 60, 90, 0.18);
  --ring: rgba(255, 130, 160, 0.55); --hud: rgba(255, 130, 160, 0.75);
}

/* ---------- HUD-Anzeigen neben dem Orb ---------- */
.hud-readout {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 7px; min-width: 120px;
  font: 10px/1.45 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(140, 190, 240, 0.5);
  transition: opacity 0.6s;
}
.hud-readout.left { right: calc(50% + var(--orb) * 1.1); align-items: flex-end; text-align: right; }
.hud-readout.right { left: calc(50% + var(--orb) * 1.1); }
.hud-readout b {
  display: block; font-weight: 500; font-size: 11px; color: #d4ecff; letter-spacing: 0.14em;
  text-shadow: 0 0 8px rgba(79, 195, 255, 0.45);
}
.hud-readout::after { /* Verbindungslinie zum Orb */
  content: ""; position: absolute; top: 50%; width: 30px; height: 1px;
  background: linear-gradient(90deg, rgba(110, 200, 255, 0.05), rgba(110, 200, 255, 0.5));
}
.hud-readout.left::after { right: -42px; }
.hud-readout.right::after { left: -42px; transform: scaleX(-1); }
.hud-bars { display: flex; gap: 3px; height: 14px; align-items: flex-end; }
.hud-bars i {
  display: block; width: 3px; height: 30%; background: rgba(110, 200, 255, 0.6);
  animation: sf-eq 1.9s ease-in-out infinite;
}
.hud-bars i:nth-child(2) { animation-delay: -0.3s; } .hud-bars i:nth-child(3) { animation-delay: -1.1s; }
.hud-bars i:nth-child(4) { animation-delay: -0.6s; } .hud-bars i:nth-child(5) { animation-delay: -1.5s; }
.hud-bars i:nth-child(6) { animation-delay: -0.9s; } .hud-bars i:nth-child(7) { animation-delay: -0.2s; }
.hud-bars i:nth-child(8) { animation-delay: -1.3s; }
.orb.thinking ~ .hud-readout i { animation-duration: 0.55s; background: rgba(190, 160, 255, 0.85); }
.orb.thinking ~ .hud-readout b { color: #eadcff; text-shadow: 0 0 10px rgba(170, 120, 255, 0.7); }
.orb.error ~ .hud-readout b { color: #ffd0da; text-shadow: 0 0 10px rgba(255, 90, 130, 0.6); }
body.has-messages .hud-readout { opacity: 0.75; }
@media (max-width: 760px) { .hud-readout { display: none; } }

/* ---------- Statuszeile ---------- */
.status {
  font: 11px/1.7 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(150, 205, 255, 0.75);
  text-shadow: 0 0 10px rgba(79, 195, 255, 0.35);
}
.status::before { content: "[ "; opacity: 0.45; }
.status::after { content: " ]"; opacity: 0.45; }

/* ---------- Nachrichten ---------- */
.bubble { position: relative; }
.msg.assistant .bubble {
  background: linear-gradient(180deg, rgba(14, 26, 62, 0.62), rgba(7, 13, 32, 0.66));
  border: 1px solid rgba(110, 190, 255, 0.17);
  border-radius: 3px 16px 16px 16px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(160, 220, 255, 0.06);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.msg.assistant .bubble::before {
  content: ""; position: absolute; left: -1px; top: -1px; width: 14px; height: 14px;
  border-left: 2px solid var(--accent); border-top: 2px solid var(--accent); opacity: 0.85;
}
.msg.user .bubble {
  background: linear-gradient(135deg, rgba(79, 195, 255, 0.19), rgba(123, 92, 255, 0.25));
  border: 1px solid rgba(130, 190, 255, 0.32);
  border-radius: 16px 3px 16px 16px;
  box-shadow: 0 0 26px rgba(90, 120, 255, 0.12);
}
.msg.user .bubble::before {
  content: ""; position: absolute; right: -1px; top: -1px; width: 14px; height: 14px;
  border-right: 2px solid #a08cff; border-top: 2px solid #a08cff; opacity: 0.85;
}
.msg.error .bubble { border-radius: 3px 16px 16px 16px; background: rgba(60, 8, 24, 0.45); }
.bubble pre { border-radius: 6px; background: rgba(4, 8, 20, 0.85); }
.typing span { box-shadow: 0 0 8px var(--accent); }
.msg.notice { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }

/* ---------- Eingabe ---------- */
.composer-inner {
  position: relative; border-radius: 8px;
  background: rgba(6, 12, 30, 0.8); border-color: rgba(110, 190, 255, 0.2);
}
.composer-inner::before, .composer-inner::after {
  content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none;
  border: 0 solid var(--hud); transition: border-color 0.2s, transform 0.2s;
}
.composer-inner::before { left: -5px; top: -5px; border-left-width: 1.5px; border-top-width: 1.5px; }
.composer-inner::after { right: -5px; bottom: -5px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.composer-inner:focus-within::before { border-color: var(--accent); transform: translate(-2px, -2px); }
.composer-inner:focus-within::after { border-color: var(--accent); transform: translate(2px, 2px); }
#send { box-shadow: inset 0 0 0 1px rgba(190, 235, 255, 0.35), 0 0 20px rgba(79, 195, 255, 0.5); }
.hint { font: 10px/1.6 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #3f4b6e; }

/* ---------- Animationen ---------- */
@keyframes sf-scan { from { transform: translateY(-140px); } to { transform: translateY(100vh); } }
@keyframes sf-dot { 0%, 100% { box-shadow: 0 0 8px var(--accent); } 50% { box-shadow: 0 0 16px 2px var(--accent); } }
@keyframes sf-lines { to { background-position: 0 40px; } }
@keyframes sf-eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
@keyframes sf-charge { from { opacity: 0.3; transform: scale(0.88); } to { opacity: 0.8; transform: scale(1.04); } }
@keyframes sf-release {
  0% { opacity: 1; transform: scale(1.25); }
  35% { opacity: 0.7; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes sf-shell-flash {
  0% { box-shadow: 0 0 60px 18px rgba(150, 225, 255, 0.85), 0 0 180px 60px rgba(110, 80, 255, 0.5); }
  100% { box-shadow: 0 0 30px 6px rgba(70, 170, 255, 0.5), 0 0 90px 24px rgba(100, 70, 255, 0.3); }
}

@media (prefers-reduced-motion: reduce) {
  .hud-frame::after, .hud-a, .hud-b, .hud-c, .hud-bars i, .orb-core::before,
  .brand-dot, .brand-dot::after { animation: none !important; }
}