/* === BrainHelmut Magic === */
/* Interactive, mystical, alive — what makes it different */

/* --- Helmut Pulse (Top Bar heartbeat line) --- */
.helmut-pulse {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.helmut-orb {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--gold), rgba(212,168,67,0.2));
  box-shadow: 0 0 12px var(--gold-glow), inset 0 0 6px rgba(255,255,255,0.1);
  animation: orbBreathe 4s ease-in-out infinite;
  flex-shrink: 0;
  position: relative;
}
.helmut-orb::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0.15;
  animation: orbRing 4s ease-in-out infinite;
}
@keyframes orbBreathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 12px var(--gold-glow); }
  50% { transform: scale(1.06); box-shadow: 0 0 20px var(--gold-glow), 0 0 40px rgba(212,168,67,0.08); }
}
@keyframes orbRing {
  0%, 100% { transform: scale(1); opacity: 0.15; }
  50% { transform: scale(1.15); opacity: 0.05; }
}
/* Speaking state */
.helmut-orb.speaking {
  animation: orbSpeak 0.8s ease-in-out infinite;
}
@keyframes orbSpeak {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.12); }
  75% { transform: scale(0.95); }
}
/* Thinking state */
.helmut-orb.thinking {
  animation: orbThink 1.5s linear infinite;
}
@keyframes orbThink {
  0% { box-shadow: 0 0 12px var(--gold-glow); }
  50% { box-shadow: 0 0 24px var(--gold-glow), 0 0 48px rgba(212,168,67,0.12); }
  100% { box-shadow: 0 0 12px var(--gold-glow); }
}

.helmut-pulse-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.helmut-pulse-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.helmut-pulse-status {
  font-size: 10px;
  color: var(--text2);
  letter-spacing: 0.3px;
}

/* --- Heartbeat Line (SVG animated path) --- */
.heartbeat-line {
  height: 20px;
  flex: 1;
  max-width: 120px;
  opacity: 0.3;
  overflow: hidden;
}
.heartbeat-line svg {
  width: 100%;
  height: 100%;
}
.heartbeat-line path {
  stroke: var(--gold);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: heartbeatDraw 3s linear infinite;
}
@keyframes heartbeatDraw {
  0% { stroke-dashoffset: 200; }
  100% { stroke-dashoffset: 0; }
}

/* --- Gold Glow on Input Focus --- */
.input-bar:focus-within {
  box-shadow: 0 0 0 2px var(--gold-soft), 0 0 20px rgba(212,168,67,0.08);
}
.input-bar:focus-within .btn-send {
  box-shadow: 0 0 12px var(--gold-glow);
}

/* --- Interactive Nebula Cursor Glow (desktop only) --- */
.cursor-glow {
  position: fixed;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,168,67,0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
  opacity: 0;
}
.cursor-glow.active { opacity: 1; }
@media (pointer: coarse) { .cursor-glow { display: none; } }

/* --- Screen Transitions --- */
.screen {
  transition: opacity 0.25s ease, transform 0.25s ease;
  transform: translateY(4px);
}
.screen.active {
  transform: translateY(0);
}

/* --- Tab Bar Glow (active tab has gold underline) --- */
.tab-item::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%; right: 50%;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
  transition: left 0.2s, right 0.2s;
  opacity: 0;
}
.tab-item { position: relative; }
.tab-item.active::after {
  left: 25%; right: 25%;
  opacity: 1;
}

/* --- Glass Card Hover Glow --- */
.glass-card {
  position: relative;
  overflow: hidden;
}
.glass-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(212,168,67,0.06) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.glass-card:hover::before { opacity: 1; }

/* --- Welcome Chips shimmer --- */
.welcome-chip {
  position: relative;
  overflow: hidden;
}
.welcome-chip::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212,168,67,0.06), transparent);
  animation: chipShimmer 4s ease-in-out infinite;
}
@keyframes chipShimmer {
  0%, 100% { left: -100%; }
  50% { left: 150%; }
}

/* --- Areal Card Pulse on Brain Screen --- */
.areal-card .areal-dot {
  animation: arealPulse 3s ease-in-out infinite;
}
.areal-card:nth-child(2) .areal-dot { animation-delay: 0.4s; }
.areal-card:nth-child(3) .areal-dot { animation-delay: 0.8s; }
.areal-card:nth-child(4) .areal-dot { animation-delay: 1.2s; }
.areal-card:nth-child(5) .areal-dot { animation-delay: 1.6s; }
.areal-card:nth-child(6) .areal-dot { animation-delay: 2.0s; }
.areal-card:nth-child(7) .areal-dot { animation-delay: 2.4s; }
.areal-card:nth-child(8) .areal-dot { animation-delay: 2.8s; }
@keyframes arealPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.4); opacity: 1; }
}

/* --- Teacher Card connect line --- */
.teacher-card {
  position: relative;
}
.teacher-card::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 0;
  background: var(--gold);
  border-radius: 2px;
  transition: height 0.3s;
  transform: translateY(-50%);
}
.teacher-card:hover::before { height: 50%; }

/* --- Bot Bubble subtle glow --- */
.bot .bubble {
  position: relative;
}
.bot .bubble::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 16px;
  width: 40px; height: 2px;
  background: var(--gold);
  border-radius: 1px;
  opacity: 0.2;
}

/* --- Typing dots gold color when thinking --- */
.typing-dot {
  background: var(--gold) !important;
  opacity: 0.5;
}

/* --- Footer Bar --- */
/* In der Haupt-App: Footer NICHT zeigen (Tab-Bar auf Mobile, Sidebar auf Desktop genuegt) */
/* Auf Subpages (download, legal): Footer immer zeigen */
.app-shell ~ .site-footer { display: none; }
.site-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 10;
  padding: 12px 20px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--glass);
  border-top: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-size: 12px;
}
.site-footer a {
  color: var(--text2);
  text-decoration: none;
  transition: color 0.15s;
}
.site-footer a:hover { color: var(--gold); }
.site-footer .footer-brand {
  color: var(--gold);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.site-footer .footer-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--dim);
}

/* --- Site Top Bar (for subpages) --- */
.site-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  padding: 10px 20px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--glass);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.site-topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
}
.site-topbar-brand img {
  width: 24px; height: 24px;
  border-radius: 6px;
}
.site-topbar-links {
  display: flex;
  align-items: center;
  gap: 16px;
}
.site-topbar-links a {
  color: var(--text2);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.15s;
}
.site-topbar-links a:hover { color: var(--gold); }
.site-topbar-links .btn {
  padding: 6px 16px;
  font-size: 13px;
}

/* --- Subpage Content Area --- */
.page-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 24px 100px;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}
/* Subpages: body muss scrollen */
body.subpage { overflow-y: auto; overflow-x: hidden; }
body.subpage .nebula-bg { position: fixed; }