/* style.void.css
   =========================================
   THE AMBIENT VOID VISUALIZER
   ✨ BINARY RHYTHM BASELINE: Pure luminous pre-sunset backdrops switching instantly to deep night spaces.
   ✨ Z-TIER HARMONIZATION: Forces Void Canvas under interaction layers but above background layers.
   ✨ WORK MODE ACTIVE: High-contrast outlines injected for professional focus integration.
   ========================================= */

#ambientCanvas {
  z-index: 50; /* ✨ THE FIX: Explicitly positioned beneath the interactive application layer (100+) */
  pointer-events: none;
}

.void-trigger {
  position: fixed; bottom: 30px; left: 30px;
  z-index: 520; 
  background: var(--lite-fill);
  border: 1.5px solid var(--lite-line);
  color: var(--lite-text);
  padding: 10px 16px;
  border-radius: 999px;
  font-family: 'Noto Sans JP';
  font-size: 11px; font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px; text-shadow: none;
  cursor: pointer; box-shadow: none;
  backdrop-filter: none;
  transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s;
}
.void-trigger:hover { background: var(--lite-line); color: var(--lite-shell-bg); }
body.is-idle .void-trigger, body.cinema-active .void-trigger { opacity: 0; pointer-events: none; }

.idle-node-container { position: absolute; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.idle-orb-wrap { 
  position: relative; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  isolation: isolate; 
}

/* =========================================
   THE GLASS SHELL & RING (FRONT LAYERS)
   ========================================= */
.idle-glass {
  position: absolute; inset: 0;
  border-radius: inherit; /* Inherits any custom shape geometry */
  background: var(--lite-fill);
  border: 2px solid var(--capsuleAccent);
  box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  z-index: 2;
  transition: background 1.2s ease, border-color 0.5s ease;
}

.idle-glass::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: inherit;
  border: 1px solid var(--capsuleAccent);
  opacity: calc((var(--p) - 99) * 1); 
  mix-blend-mode: normal; background: none; box-shadow: none;
  pointer-events: none; z-index: 3;
}

.idle-ring {
  position: absolute; inset: -4px;
  border-radius: inherit;
  background: var(--capsuleAccent);
  -webkit-mask: radial-gradient(transparent calc(50% - 2px), black calc(50% - 1px));
  mask: radial-gradient(transparent calc(50% - 2px), black calc(50% - 1px));
  opacity: 1.0; filter: none; box-shadow: none;
  z-index: 1;
}

/* =========================================
   INTERNAL CORE & WARNING RINGS
   ========================================= */
.idle-core {
  position: relative; 
  width: 15%; height: 15%; 
  border-radius: inherit;
  background: var(--lite-line);
  border: 2px solid var(--capsuleAccent);
  transform: scale(calc(0.3 + (var(--p) * 0.012)));
  opacity: 1.0; box-shadow: none;
  transition: transform 0.2s linear, background 1.2s ease, border-color 0.5s ease;
  z-index: 1;
}

.idle-core::after {
  content: ""; position: absolute; 
  inset: -6px; 
  border-radius: inherit;
  border: 1.5px solid var(--capsuleAccent);
  background: none; filter: none; box-shadow: none;
  opacity: calc((var(--p) - 85) * 0.1);
  z-index: -1; pointer-events: none;
}

/* ========================================= */

.idle-label-anchor {
  position: absolute; top: 15%; left: 85%;
  pointer-events: none;
  display: flex; align-items: center;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 3; 
}
.idle-label-anchor.is-urgent { opacity: 0.8; }
.idle-label-anchor.is-near { opacity: 1 !important; }

.idle-hud-line { width: 40px; height: 1.5px; background: var(--capsuleAccent); margin-right: 8px; box-shadow: none; transition: height 0.5s ease; }
.idle-label-wrap { display: flex; flex-direction: column; gap: 4px; white-space: nowrap; }
.idle-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px; font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--lite-text);
  text-shadow: none;
  transition: color 0.5s ease;
}
.idle-meta {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 10px; font-weight: 700;
  color: var(--lite-muted-text);
  letter-spacing: 1px;
  text-transform: uppercase; text-shadow: none;
}

.idle-artifact-container { position: absolute; pointer-events: none; }
.idle-artifact-anchor { position: absolute; top: 0; left: 30px; display: flex; align-items: center; opacity: 0.8; }
.idle-artifact-line { width: 30px; height: 1.5px; background: var(--lite-line); margin-right: 8px; box-shadow: none; transition: height 0.5s ease; }

/* Flat unshadowed labels purged of intensive webkit text clipping filters */
.idle-artifact-whisper {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 9px; font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--lite-text);
  text-shadow: none;
  white-space: normal;
  max-width: 130px;
  line-height: 1.4;
  -webkit-mask-image: none; mask-image: none;
  animation: none;
  transition: color 0.5s ease;
}

.idle-whisper {
  position: absolute;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 9px; font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--lite-text);
  text-shadow: none;
  pointer-events: none;
  z-index: 1;
  white-space: normal;
  max-width: 130px;
  text-align: center;
  line-height: 1.4;
  -webkit-mask-image: none; mask-image: none;
  animation: none;
  transition: color 0.5s ease;
}

body.void-dense .idle-orb-wrap .idle-core { opacity: 0.3 !important; transform: scale(0.4) !important; }
body.void-dense .idle-orb-wrap .idle-ring { opacity: 0.5; }
body.void-dense .idle-artifact-whisper, body.void-dense .idle-whisper { opacity: 0.5 !important; max-width: 90px; }

/* =========================================
   URGENCY PULSE (FLAT CONCENTRIC BORDERS)
   ========================================= */
.idle-orb-wrap.is-urgent-pulse::after, 
.node.is-urgent-pulse .node-orb-wrap::after,
.spatial-card.is-urgent-pulse::after {
  content: ""; position: absolute;
  inset: -10px; 
  border-radius: 50%;
  border: 2px solid var(--capsuleAccent);
  background: none; filter: none; box-shadow: none;
  pointer-events: none; z-index: -1;
  opacity: 0.8;
  animation: none;
  transition: border-width 0.5s ease;
}

.idle-orb-wrap.is-urgent-pulse::before,
.node.is-urgent-pulse .node-orb-wrap::before,
.spatial-card.is-urgent-pulse::before {
  display: none !important;
}

/* =========================================
   VOID DEEP SKY & HOVER PROTOCOLS
   ========================================= */
body.is-idle #focusModeTrigger, 
body.is-idle #macroFilterTrigger {
    opacity: 0 !important;
    pointer-events: none !important;
}

#voidDeepSkyTrigger {
    position: fixed; top: 0; left: 50%; width: 120px; height: 40px;
    border-radius: 0 0 60px 60px; 
    display: flex; align-items: flex-start; padding-top: 10px; justify-content: center;
    font-size: 16px; font-weight: 900; letter-spacing: 2px;
    cursor: pointer; z-index: 999; 
    opacity: 0; pointer-events: none;
    transform: translateX(-50%) translateY(-100%);
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    background: var(--lite-fill);
    border: 1.5px solid var(--lite-line);
    border-top: none; 
    box-shadow: none; text-shadow: none;
    color: var(--lite-text); backdrop-filter: none;
}

body.is-idle #voidDeepSkyTrigger { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
body.is-idle.void-deep-sky #voidDeepSkyTrigger { background: var(--capsuleAccent); border-color: var(--lite-line); color: #000; }

body.void-deep-sky .idle-node-container,
body.void-deep-sky .idle-artifact-container,
body.void-deep-sky .idle-whisper,
body.void-deep-sky .void-trigger,
body.ui-hidden .idle-node-container {
    opacity: 0 !important; 
    pointer-events: none !important; 
    visibility: hidden !important; /* ✨ THE FIX: Removes elements from the GPU composite pipeline entirely */
    transition: opacity 0.4s ease, visibility 0s linear 0.4s !important; 
}

#voidTooltip {
    position: fixed; pointer-events: none; z-index: 900; opacity: 0;
    transform: translate(-50%, 5px);
    transition: opacity 0.1s ease, transform 0.1s ease;
    font-family: 'Noto Sans JP', sans-serif; font-size: 9px;          
    font-weight: 900; letter-spacing: 4px; text-transform: uppercase;
    color: var(--lite-text); text-shadow: none; white-space: nowrap;
}
#voidTooltip.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Fallbacks */
body.lite-mode .void-trigger { background: var(--lite-fill) !important; border-color: var(--lite-line) !important; color: var(--lite-text) !important; }
body.lite-mode .idle-glass { background: var(--lite-fill) !important; border-color: var(--capsuleAccent) !important; box-shadow: none !important; }
body.lite-mode .idle-core { background: var(--lite-line) !important; border-color: var(--capsuleAccent) !important; }


/* =========================================================
   ✨ WORK MODE: HIGH CONTRAST VOID OUTLINES
   ========================================================= */

/* 
   Shape bodies: The "Painterly Splash" shapes use CSS masks. 
   Standard borders ruin this by drawing a rigid box around the mask.
   Instead, we use a 4-way drop-shadow to trace the alpha channel of the paint splash exactly. 
*/
body.is-work-mode .idle-glass {
    background: color-mix(in srgb, rgb(var(--circadian-dark, 5,5,8)) 80%, var(--capsuleAccent)) !important;
    border: none !important; /* Kill the geometric box/circle */
    filter: drop-shadow(2.5px 0px 0px var(--capsuleAccent)) 
            drop-shadow(-2.5px 0px 0px var(--capsuleAccent)) 
            drop-shadow(0px 2.5px 0px var(--capsuleAccent)) 
            drop-shadow(0px -2.5px 0px var(--capsuleAccent)) !important;
    box-shadow: none !important;
    transition: background 1.2s ease, filter 0.5s ease !important;
}

/* Hide the internal geometric shapes so the pure splash stands out */
body.is-work-mode .idle-glass::after,
body.is-work-mode .idle-ring {
    display: none !important; 
}

body.is-work-mode .idle-core {
    background: rgb(var(--circadian-dark, 5,5,8)) !important;
    border: none !important;
    filter: drop-shadow(2px 0px 0px var(--capsuleAccent)) 
            drop-shadow(-2px 0px 0px var(--capsuleAccent)) 
            drop-shadow(0px 2px 0px var(--capsuleAccent)) 
            drop-shadow(0px -2px 0px var(--capsuleAccent)) !important;
}

/* Thicker lines linking HUD elements */
body.is-work-mode .idle-hud-line,
body.is-work-mode .idle-artifact-line {
    height: 3px !important;
    background: var(--capsuleAccent) !important;
}

/* Typography locks to absolute solid white without shadows */
body.is-work-mode .idle-title,
body.is-work-mode .idle-artifact-whisper,
body.is-work-mode .idle-whisper {
    color: var(--lite-text, #fff) !important;
    font-weight: 900 !important;
}

/* Thicker warning outline */
body.is-work-mode .idle-orb-wrap.is-urgent-pulse::after {
    border-width: 3px !important;
}

/* Void escape button inherits the thick contrast style */
body.is-work-mode .void-trigger {
    border: 3px solid var(--capsuleAccent) !important;
    background: rgb(var(--circadian-dark, 5,5,8)) !important;
    color: var(--capsuleAccent) !important;
}

body.is-work-mode .void-trigger:hover {
    background: var(--capsuleAccent) !important;
    color: #000 !important;
}