/*
Nexus AI Living Motion Layer
Purpose:
- Makes the Nexus Orb feel like the origin of the Living Presence panel.
- The panel opens as a callout from the Orb and collapses back into the Orb.
- Load after all Nexus panel CSS.
*/

#nexus-v4-presence.nxv4-redesign {
  --nxv4-motion-open-ms: 380ms;
  --nxv4-motion-close-ms: 280ms;
  --nxv4-motion-ease-out: cubic-bezier(.16, 1, .3, 1);
  --nxv4-motion-ease-in: cubic-bezier(.32, 0, .67, 0);
  --nxv4-orb-home-right: 24px;
  --nxv4-orb-home-bottom: 24px;
  --nxv4-panel-right: 22px;
  --nxv4-panel-bottom: 86px;
  --nxv4-panel-width: min(400px, calc(100vw - 32px));
  --nxv4-orb-docked-nudge-x: 0px;
  --nxv4-orb-docked-nudge-y: -10px;
}

/* Orb remains the emotional anchor. */
#nexus-v4-presence.nxv4-redesign #nxv4-orb {
  position: fixed !important;
  right: var(--nxv4-orb-home-right) !important;
  bottom: var(--nxv4-orb-home-bottom) !important;
  z-index: 10020 !important;
  transform-origin: center center;
  will-change: transform, opacity, filter;
  transition:
    transform var(--nxv4-motion-open-ms) var(--nxv4-motion-ease-out),
    opacity 180ms ease,
    filter 240ms ease;
}

/* Calm living pulse when closed. */
#nexus-v4-presence.nxv4-is-closed #nxv4-orb {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  animation: nxv4OrbCalmPulse 3600ms ease-in-out infinite;
}

/* Opening acknowledgement: slight pulse before/during travel. */
#nexus-v4-presence.nxv4-is-opening #nxv4-orb {
  animation: nxv4OrbAcknowledge 420ms var(--nxv4-motion-ease-out) 1;
  filter: drop-shadow(0 18px 34px rgba(230, 57, 70, .24));
}

/*
Docked open state:
The JS sets --nxv4-orb-travel-x and --nxv4-orb-travel-y.
This makes the same orb visually travel from bottom-right to the panel header area.
*/
#nexus-v4-presence.nxv4-orb-docked #nxv4-orb {
  transform: translate3d(
      calc(var(--nxv4-orb-travel-x, 0px) + var(--nxv4-orb-docked-nudge-x, 0px)),
      calc(var(--nxv4-orb-travel-y, 0px) + var(--nxv4-orb-docked-nudge-y, 0px)),
      0
    ) scale(.72);
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  animation: none;
  cursor: grab;
}

/* When fully open, the orb should feel attached to the callout. */
#nexus-v4-presence.nxv4-is-open.nxv4-orb-docked #nxv4-orb {
  filter: drop-shadow(0 16px 28px rgba(15, 23, 42, .16));
}

/*
Emotion accent (set by nexus-orb-microcopy.js via data-nexus-emotion on #nexus-v4-presence
and #nxv4-orb itself): a restrained colour shift on the orb's existing soft drop-shadow, not a
new glow system. Normal keeps the neutral shadow already defined in nexus-ai-v5-3d-orb.css.
Kept deliberately soft (large blur, low alpha) per "controlled concern, not panic".

--nexus-orb-accent/--nexus-orb-emotion are exported here for any consumer that wants the current
emotion colour/name without re-deriving it (e.g. future orb surfaces). The callout's own accent
already has a working variable - --nxv4-emotion-accent/--nxv4-emotion-accent-ring in
nexus-ai-v4-adaptive-presentation.css - reused as-is rather than introducing a second,
differently-named variable for the exact same colour.
*/
:root {
  --nexus-orb-accent: rgba(226, 232, 240, 0.22);
  --nexus-orb-emotion: normal;
  --nexus-orb-shadow: rgba(15, 23, 42, 0.22);
}

#nexus-v4-presence[data-nexus-emotion="yellow"] #nxv4-orb {
  --nexus-orb-accent: rgba(245, 158, 11, 0.30);
  --nexus-orb-emotion: yellow;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .3)) drop-shadow(0 0 16px rgba(245, 158, 11, .30));
}

#nexus-v4-presence[data-nexus-emotion="red"] #nxv4-orb {
  --nexus-orb-accent: rgba(230, 57, 70, 0.34);
  --nexus-orb-emotion: red;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .3)) drop-shadow(0 0 18px rgba(230, 57, 70, .34));
}

#nexus-v4-presence.nxv4-orb-dragging #nxv4-orb {
  cursor: grabbing;
  transition: none !important;
}

/* Panel callout geometry. */
#nexus-v4-presence.nxv4-redesign #nxv4-rail {
  transform-origin: calc(100% - 42px) calc(100% + 26px);
  will-change: transform, opacity, clip-path;
  transition:
    transform var(--nxv4-motion-open-ms) var(--nxv4-motion-ease-out),
    opacity 220ms ease,
    visibility 220ms ease,
    box-shadow 240ms ease;
}

/* Closed panel contracts toward the orb origin. */
#nexus-v4-presence.nxv4-is-closed #nxv4-rail,
#nexus-v4-presence.nxv4-is-closing #nxv4-rail {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(20px, 18px, 0) scale(.94) !important;
}

/* Opening/open panel blooms from orb origin. */
#nexus-v4-presence.nxv4-is-opening #nxv4-rail,
#nexus-v4-presence.nxv4-is-open #nxv4-rail {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* Add a subtle callout feel without cartoon tail. */
#nexus-v4-presence.nxv4-is-open #nxv4-rail::before,
#nexus-v4-presence.nxv4-is-opening #nxv4-rail::before {
  content: "";
  position: absolute;
  right: 30px;
  bottom: -10px;
  width: 24px;
  height: 24px;
  background: inherit;
  border-right: 1px solid rgba(226, 232, 240, .9);
  border-bottom: 1px solid rgba(226, 232, 240, .9);
  transform: rotate(45deg);
  border-radius: 6px;
  z-index: -1;
  opacity: .9;
}

/* Content should appear gently after shell starts opening. */
#nexus-v4-presence #nxv4-rail .nxv4-header,
#nexus-v4-presence #nxv4-rail .nxv4-body,
#nexus-v4-presence #nxv4-rail .nxv4-footer {
  transition:
    opacity 220ms ease,
    transform 260ms var(--nxv4-motion-ease-out);
}

#nexus-v4-presence.nxv4-is-closed #nxv4-rail .nxv4-header,
#nexus-v4-presence.nxv4-is-closed #nxv4-rail .nxv4-body,
#nexus-v4-presence.nxv4-is-closed #nxv4-rail .nxv4-footer,
#nexus-v4-presence.nxv4-is-closing #nxv4-rail .nxv4-header,
#nexus-v4-presence.nxv4-is-closing #nxv4-rail .nxv4-body,
#nexus-v4-presence.nxv4-is-closing #nxv4-rail .nxv4-footer {
  opacity: 0;
  transform: translateY(6px);
}

#nexus-v4-presence.nxv4-is-opening #nxv4-rail .nxv4-header,
#nexus-v4-presence.nxv4-is-open #nxv4-rail .nxv4-header {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 40ms;
}

#nexus-v4-presence.nxv4-is-opening #nxv4-rail .nxv4-body,
#nexus-v4-presence.nxv4-is-open #nxv4-rail .nxv4-body {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 80ms;
}

#nexus-v4-presence.nxv4-is-opening #nxv4-rail .nxv4-footer,
#nexus-v4-presence.nxv4-is-open #nxv4-rail .nxv4-footer {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 120ms;
}

/* Orb personality states. Keep subtle. */
#nexus-v4-orb-state-listening #nxv4-orb,
#nexus-v4-presence[data-nexus-state="listening"] #nxv4-orb {
  filter: drop-shadow(0 0 22px rgba(59,130,246,.28));
}

#nexus-v4-presence[data-nexus-state="speaking"] #nxv4-orb {
  animation: nxv4OrbSpeakingPulse 1300ms ease-in-out infinite;
}

#nexus-v4-presence[data-nexus-state="thinking"] #nxv4-orb {
  filter: drop-shadow(0 0 18px rgba(230,57,70,.22));
}

/* Calm personality animations. */
@keyframes nxv4OrbCalmPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 14px 28px rgba(15, 23, 42, .14));
  }
  50% {
    transform: scale(1.025);
    filter: drop-shadow(0 18px 36px rgba(230, 57, 70, .18));
  }
}

@keyframes nxv4OrbAcknowledge {
  0% { transform: scale(1); }
  36% { transform: scale(1.09); }
  100% { transform: scale(1); }
}

@keyframes nxv4OrbSpeakingPulse {
  0%, 100% { filter: drop-shadow(0 12px 24px rgba(59,130,246,.18)); }
  50% { filter: drop-shadow(0 18px 36px rgba(59,130,246,.34)); }
}

@media (max-width: 720px) {
  #nexus-v4-presence.nxv4-orb-docked #nxv4-orb {
    transform: translate3d(
      calc(var(--nxv4-orb-travel-x, 0px) + var(--nxv4-orb-docked-nudge-x, 0px)),
      calc(var(--nxv4-orb-travel-y, 0px) + var(--nxv4-orb-docked-nudge-y, 0px)),
      0
    ) scale(.64);
  }

  #nexus-v4-presence.nxv4-is-open #nxv4-rail::before,
  #nexus-v4-presence.nxv4-is-opening #nxv4-rail::before {
    display: none;
  }

  /* Keep Nexus settings fully visible on phones. */
  #nexus-v4-presence.nxv4-redesign #nxv4-settings-panel {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-height: 100dvh;
    min-height: 0;
    right: auto;
    top: auto;
    z-index: 10040;
    padding: 8px;
    box-sizing: border-box;
  }

  #nexus-v4-presence.nxv4-redesign #nxv4-settings-panel .nxv4-settings-backdrop {
    position: fixed;
    inset: 0;
  }

  #nexus-v4-presence.nxv4-redesign #nxv4-settings-panel .nxv4-settings-card {
    position: relative;
    inset: 0;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 16px);
    margin: 0;
    border-radius: 16px;
  }
}

/* Reduced motion: keep metaphor, remove travel. */
@media (prefers-reduced-motion: reduce) {
  #nexus-v4-presence.nxv4-redesign {
    --nxv4-motion-open-ms: 80ms;
    --nxv4-motion-close-ms: 80ms;
  }

  #nexus-v4-presence.nxv4-redesign #nxv4-orb,
  #nexus-v4-presence.nxv4-redesign #nxv4-rail,
  #nexus-v4-presence #nxv4-rail .nxv4-header,
  #nexus-v4-presence #nxv4-rail .nxv4-body,
  #nexus-v4-presence #nxv4-rail .nxv4-footer {
    animation: none !important;
    transition-duration: 80ms !important;
  }

  #nexus-v4-presence.nxv4-orb-docked #nxv4-orb {
    transform: scale(.9);
  }
}

/* Orb-first startup guard (loaded last). */
#nexus-v4-presence.nxv4-is-closed #nxv4-rail,
#nexus-v4-presence.nxv4-mode-orb #nxv4-rail:not(.open) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#nexus-v4-presence.nxv4-is-closed #nxv4-orb,
#nexus-v4-presence.nxv4-mode-orb #nxv4-orb {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: inline-grid !important;
}