/* style.sparc.css
   =========================================
   THE INTERACTIVE COMPANION LAYER
   ✨ PURE ESSENCE: SPARC's physical background and borders have been stripped, leaving only the shape and an invisible hitbox.
   ✨ CIRCADIAN REACTIVE BASELINE: Dialogue bubbles map securely to the active circadian atmosphere.
   ✨ TRIGONOMETRIC EDGE HIGHLIGHTS: Dialogue bubbles cast dynamic shadows synchronized to the solar orbit.
   ✨ LITE-FIRST DEFAULTS: Solid UI elements, high-contrast mechanical boundaries, zero blur overlays.
   ========================================= */

/* Absolute layout tiering sitting over Welcome Screens */
.companion-node { position: absolute; top: 0; left: 0; width: 0; height: 0; pointer-events: none; z-index: 10000000; }

.companion-core {
  position: absolute; transform: translate(-50%, -50%); width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: grab; pointer-events: auto; z-index: 10;
  
  /* ✨ PURE ESSENCE: Invisible hitbox, no structural backgrounds or borders */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  
  border-radius: 50%;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  transition: color 0.2s ease, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), text-shadow 0.2s ease;
}

.companion-core:hover { 
  transform: translate(-50%, -50%) scale(1.15); 
  color: rgb(var(--circadian-accent, 85,221,255));
  text-shadow: 0 0 15px rgb(var(--circadian-accent, 85,221,255)); 
}
.companion-core:active { cursor: grabbing; transform: translate(-50%, -50%) scale(0.95); }

/* Static unshadowed framing ring replacing dropped filter animations */
.companion-core::before {
  content: ""; position: absolute; inset: -10px; 
  border: 1px solid var(--capsuleAccent, rgb(var(--circadian-accent, 85,221,255)));
  border-radius: 50%; z-index: -1; pointer-events: none;
  box-shadow: none; background: none;
  animation: sparcBreathLine 3s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes sparcBreathLine {
  0% { transform: scale(0.9) translateZ(0); opacity: 0.6; }
  100% { transform: scale(1.1) translateZ(0); opacity: 1; }
}

.companion-ping {
  position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px;
  border: 1px solid var(--capsuleAccent, var(--lite-line)); border-radius: 50%; pointer-events: none; z-index: -1;
}

.companion-trail-spark {
  position: absolute; width: 4px; height: 4px; background: rgb(var(--circadian-accent, 255,255,255)); border-radius: 50%;
  box-shadow: none; pointer-events: none; z-index: 9999999; 
  mix-blend-mode: normal; 
}

.companion-whisper { position: absolute; width: 280px; pointer-events: none; z-index: 10000001; top: 0; left: 0; text-align: left; }

/* ✨ REGULAR MODE: Circadian Bubble Mapping */
.whisper-bubble, #whisperBubble {
  background: color-mix(in srgb, var(--bgMid, #05070a) 85%, rgb(var(--circadian-dark, 5,5,8)));
  border: 1px solid color-mix(in srgb, rgb(var(--circadian-accent, 85,221,255)) 30%, rgba(255,255,255,0.1));
  box-shadow: inset calc(sin(var(--bgAngle, 180deg)) * 2px) calc(cos(var(--bgAngle, 180deg)) * -2px) 0 color-mix(in srgb, rgb(var(--circadian-accent, 85,221,255)) 40%, rgba(255,255,255,0.15)),
              inset calc(sin(var(--bgAngle, 180deg)) * 15px) calc(cos(var(--bgAngle, 180deg)) * -15px) 30px -15px color-mix(in srgb, rgb(var(--circadian-bright, 255,255,255)) 15%, transparent) !important;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-radius: 18px; padding: 14px 20px;
  pointer-events: none;
  will-change: transform, opacity; opacity: 0; visibility: hidden; transform: translateZ(0); transform-origin: center center;
}

#whisperBubble { position: relative; overflow: visible; opacity: 1; visibility: visible; }
#whisperBubble::before { display: none !important; }

.whisper-text { position: relative; font-family: 'Neuton', serif; font-size: 16px; font-weight: 700; line-height: 1.4; color: #fff; margin: 0; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }

.sparc-anchor-zone {
  position: fixed; width: 150px; height: 150px; border-radius: 80px; z-index: 10000;
  pointer-events: auto; opacity: 0; display: flex; align-items: center; justify-content: center;
  border: 2px solid color-mix(in srgb, rgb(var(--circadian-accent, 85,221,255)) 30%, rgba(255,255,255,0.1)); 
  background: color-mix(in srgb, rgb(var(--circadian-dark, 0,0,0)) 60%, transparent);
  font-family: 'Noto Sans JP', sans-serif; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 4px; color: #fff;
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  will-change: transform, opacity; box-shadow: none; text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.sparc-anchor-zone.bottom-right { bottom: -50px; right: -50px; padding: 0 30px 30px 0; transform: scale(0.9) translateZ(0); }
body.is-dragging-sparc .sparc-anchor-zone { opacity: 1; transform: scale(1) translateZ(0); }

.sparc-anchor-zone:hover { opacity: 1; background: color-mix(in srgb, rgb(var(--circadian-dark, 0,0,0)) 80%, transparent); border-color: rgb(var(--circadian-accent, 85,221,255)); }

.sparc-anchor-zone.is-hovered,
.sparc-anchor-zone.sparc-zone-hot {
  border-color: rgb(var(--circadian-accent, 85,221,255)); background: rgb(var(--circadian-accent, 85,221,255));
  color: #000; transform: scale(1.05) translateZ(0); opacity: 1; text-shadow: none;
}

/* =========================================================
   LITE MODE OVERRIDES
   Fallbacks guarantee runtime execution integrity if scripts overwrite base classes
   ========================================================= */
body.lite-mode .companion-core { background: transparent !important; border: none !important; color: var(--lite-text) !important; box-shadow: none !important; text-shadow: none !important; }
body.lite-mode .companion-core:hover { background: transparent !important; color: var(--capsuleAccent) !important; }
body.lite-mode .whisper-bubble, body.lite-mode #whisperBubble { background: var(--lite-shell-bg) !important; border-color: var(--lite-line) !important; box-shadow: none !important; }
body.lite-mode .whisper-text { color: var(--lite-text) !important; text-shadow: none !important; }
body.lite-mode .companion-trail-spark { background: var(--lite-line) !important; }
body.lite-mode .sparc-anchor-zone { background: var(--lite-fill) !important; border-color: var(--lite-line) !important; color: var(--lite-text) !important; box-shadow: none !important; text-shadow: none !important; }
body.lite-mode .sparc-anchor-zone:hover { background: var(--lite-input-bg) !important; }