/* Nexus Adaptive Speakout Form Layer: approved mode states only. */

/*
Callout geometry: the orb (right:24px, bottom:24px, 104x104, z-index:10020) sits fixed at the
viewport corner. This callout is anchored to the SAME right edge and positioned so its own
bottom-right corner tucks behind the orb's top edge (~16px overlap), giving the "speech callout
emerging from the orb" relationship the orb should visually own. The overlap is purely decorative:
padding-bottom is large enough that text/controls never render under the orb's footprint, and
padding-right reserves room on the last line so the orb's badge (see .nxv4-orb-conversation-toggle)
never crosses over live content either.
*/
#nexus-v4-presence .nxv4-micro-speakout {
  position: fixed;
  right: 24px;
  bottom: 114px;
  z-index: 10010;
  width: max-content;
  min-width: 180px;
  max-width: min(360px, 84vw);
  /* Shared design DNA with the orb: same neutral charcoal/black depth (not the orb's red), a
     16px radius echoing the orb's roundness, and a soft top rim-light standing in for the
     orb's glass/highlight treatment instead of a literal shine. */
  background: rgba(15, 23, 42, 0.97);
  color: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(248, 250, 252, 0.07),
    0 16px 40px rgba(2, 6, 23, 0.42),
    0 0 0 1px var(--nxv4-emotion-accent-ring, transparent);
  padding: 14px 18px 40px 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  /* Hidden-by-default via opacity/transform/visibility (not display:none) so the appearance can
     animate smoothly, growing subtly from the orb's corner rather than snapping into place. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px) scale(.97);
  transform-origin: bottom right;
  transition: opacity .2s ease, transform .24s cubic-bezier(.16,1,.3,1), visibility .2s, box-shadow .3s ease;
  --nxv4-emotion-accent: rgba(226, 232, 240, 0.22);
  --nxv4-emotion-accent-ring: transparent;
}

#nexus-v4-presence .nxv4-micro-speakout.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/*
Glow bridge: a soft, blurred disc of the current emotion colour sitting behind the callout's
bottom-right corner, exactly where the orb sits (see the geometry note above - ~16px overlap).
This is the "emitted from the orb" connective tissue - deliberately blurred and behind the
content (z-index:-1) rather than a hard-edged speech-bubble tail, per "avoid crude hard edges,
avoid a cartoon speech bubble look".
*/
#nexus-v4-presence .nxv4-micro-speakout::after {
  content: "";
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--nxv4-emotion-accent), transparent 72%);
  filter: blur(9px);
  pointer-events: none;
  z-index: -1;
  transition: background .3s ease;
}

#nexus-v4-presence .nxv4-micro-speakout .nxv4-micro-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  flex: 1 1 auto;
  min-width: 0;
}

#nexus-v4-presence .nxv4-micro-speakout .nxv4-micro-open {
  border: 0;
  border-radius: 10px;
  background: #e63946;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 10px;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}

#nexus-v4-presence .nxv4-micro-speakout .nxv4-micro-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

#nexus-v4-presence .nxv4-micro-speakout .nxv4-micro-details {
  border: 0;
  border-radius: 10px;
  /* Red ("Details") only when there's a real error behind it - see nexus-orb-microcopy.js's
     applyNodeText(). The default/dismiss state below uses the orb's own graphite tone instead
     of an alarming red, since dismissing an ordinary "Thinking…" message isn't an error action. */
  background: #b91c1c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 10px;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background .18s ease;
}

#nexus-v4-presence .nxv4-micro-speakout .nxv4-micro-details[data-mode="dismiss"] {
  background: #1f2937;
}

#nexus-v4-presence .nxv4-micro-speakout .nxv4-micro-details[data-mode="dismiss"]:hover {
  background: #374151;
}

#nexus-v4-presence .nxv4-micro-speakout .nxv4-micro-details:focus-visible,
#nexus-v4-presence .nxv4-micro-speakout .nxv4-micro-open:focus-visible {
  outline: 2px solid rgba(248, 113, 113, 0.8);
  outline-offset: 1px;
}

#nexus-v4-presence .nxv4-micro-speakout[data-micro-priority="critical"] {
  border-color: rgba(248, 113, 113, 0.85);
}

#nexus-v4-presence .nxv4-micro-speakout[data-micro-priority="high"] {
  border-color: rgba(251, 191, 36, 0.7);
}

#nexus-v4-presence .nxv4-micro-speakout[data-micro-priority="ambient"] {
  opacity: 0.96;
}

/*
Emotion accent takes precedence over the plain priority border above when both are present
(voice/recovery messages always carry a matching emotion), since it's the authoritative
"connected to the Orb" signal and uses the actual HeirsNexus brand red rather than an ad-hoc
salmon tone. Non-voice tips/intelligence messages have no emotion attribute and keep the
priority-only styling above untouched.
*/
#nexus-v4-presence .nxv4-micro-speakout[data-micro-emotion="yellow"] {
  --nxv4-emotion-accent: rgba(245, 158, 11, 0.34);
  --nxv4-emotion-accent-ring: rgba(245, 158, 11, 0.28);
  border-color: rgba(245, 158, 11, 0.4);
}

#nexus-v4-presence .nxv4-micro-speakout[data-micro-emotion="red"] {
  --nxv4-emotion-accent: rgba(230, 57, 70, 0.38);
  --nxv4-emotion-accent-ring: rgba(230, 57, 70, 0.32);
  border-color: rgba(230, 57, 70, 0.45);
}

#nexus-v4-presence .nxv4-micro-speakout[data-micro-category="voice-state"] .nxv4-micro-open,
#nexus-v4-presence .nxv4-micro-speakout[data-micro-category="recovery"] .nxv4-micro-open {
  display: none;
}

#nexus-v4-presence .nexus-error-modal {
  position: fixed;
  inset: 0;
  z-index: 12050;
  display: grid;
  place-items: center;
}

#nexus-v4-presence .nexus-error-modal[hidden] {
  display: none !important;
}

#nexus-v4-presence .nexus-error-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

#nexus-v4-presence .nexus-error-modal__window {
  position: relative;
  width: min(680px, 92vw);
  max-height: 70vh;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(185, 28, 28, 0.55);
  background: #fff;
  color: #111827;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

#nexus-v4-presence .nexus-error-modal__header,
#nexus-v4-presence .nexus-error-modal__footer {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(239, 68, 68, 0.2);
  background: #fff5f5;
}

#nexus-v4-presence .nexus-error-modal__footer {
  border-top: 1px solid rgba(239, 68, 68, 0.2);
  border-bottom: 0;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

#nexus-v4-presence .nexus-error-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

#nexus-v4-presence .nexus-error-modal__header h4 {
  margin: 0;
  font-size: 1rem;
}

#nexus-v4-presence .nexus-error-modal__subtitle {
  color: #b91c1c;
  font-size: .8rem;
  font-weight: 700;
}

#nexus-v4-presence .nexus-error-modal__body {
  padding: 12px 14px;
  overflow: auto;
}

#nexus-v4-presence .nexus-error-modal__section {
  margin-bottom: 10px;
}

#nexus-v4-presence .nexus-error-modal__section h5 {
  margin: 0 0 4px;
  font-size: .86rem;
  font-weight: 700;
}

#nexus-v4-presence .nexus-error-modal__section p {
  margin: 0;
  font-size: .86rem;
  line-height: 1.45;
}

#nexus-v4-presence .nexus-error-modal__trace {
  margin-top: 8px;
  max-height: 260px;
  overflow: auto;
  border-radius: 8px;
  background: #111827;
  color: #f9fafb;
  padding: 10px;
  font-size: .76rem;
}

#nexus-v4-presence .nexus-error-modal__btn {
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-size: .82rem;
  font-weight: 600;
  padding: 6px 10px;
}

#nexus-v4-presence .nexus-error-modal__btn--retry {
  border-color: rgba(185, 28, 28, 0.55);
  color: #991b1b;
}

#nexus-v4-presence .nexus-error-modal__toggle,
#nexus-v4-presence .nexus-error-modal__icon-close {
  border: 0;
  background: transparent;
  color: #991b1b;
  font-weight: 700;
  cursor: pointer;
}

#nexus-v4-presence.nxv4-mode-orb #nxv4-rail:not(.open),
#nexus-v4-presence.nxv4-mode-micro #nxv4-rail:not(.open) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#nexus-v4-presence.nxv4-mode-compact #nxv4-rail.open {
  width: min(400px, calc(100vw - 32px)) !important;
  max-height: min(72vh, calc(100dvh - 120px)) !important;
}

#nexus-v4-presence.nxv4-mode-expanded #nxv4-rail.open {
  width: min(520px, calc(100vw - 28px)) !important;
  max-height: min(84vh, calc(100dvh - 90px)) !important;
}

#nexus-v4-presence.nxv4-mode-focus #nxv4-rail.open {
  border-color: rgba(59, 130, 246, 0.4) !important;
  box-shadow: 0 18px 45px rgba(30, 64, 175, 0.24) !important;
}

#nexus-v4-presence.nxv4-mode-alert #nxv4-rail.open {
  border-color: rgba(230, 57, 70, 0.45) !important;
  box-shadow: 0 18px 45px rgba(220, 38, 38, 0.25) !important;
}

#nexus-v4-presence.nxv4-mode-alert #nxv4-state-label,
#nexus-v4-presence.nxv4-mode-alert #nxv4-voice-state {
  color: #b91c1c !important;
  font-weight: 700;
}

#nexus-v4-presence[data-nxv4-adaptive-mode="micro"] #nxv4-orb {
  filter: drop-shadow(0 0 14px rgba(230, 57, 70, 0.32));
}

@media (max-width: 720px) {
  #nexus-v4-presence .nxv4-micro-speakout {
    /* Full-width on narrow viewports; bottom is set clear of the orb's top edge at both the
       104px (>=640px) and 88px (<640px) orb sizes, so it never depends on the exact breakpoint.
       width must be overridden too: the base rule's width:max-content makes a fixed element
       size to its content regardless of left/right, which left `right` silently ignored by the
       CSS spec (both left and right are only honoured together when width is auto) - the
       callout was actually landing off past the middle of the screen, not edge-to-edge. */
    right: 10px;
    left: 10px;
    width: auto;
    bottom: 112px;
    max-width: calc(100vw - 20px);
    padding-bottom: 26px;
  }

  #nexus-v4-presence.nxv4-mode-compact #nxv4-rail.open,
  #nexus-v4-presence.nxv4-mode-expanded #nxv4-rail.open,
  #nexus-v4-presence.nxv4-mode-focus #nxv4-rail.open,
  #nexus-v4-presence.nxv4-mode-alert #nxv4-rail.open {
    width: min(calc(100vw - 16px), 96vw) !important;
    max-height: min(72vh, calc(100dvh - 100px)) !important;
    right: 8px !important;
    left: auto !important;
  }

  /* Mobile defaults: transcript starts collapsed unless explicitly opened. */
  #nexus-v4-presence #nxv4-transcript-panel:not(.is-expanded) {
    max-height: 48px;
    overflow: hidden;
  }
}

/* Nexus Long Answer Detail Card. Docked near the orb like the micro-speakout callout (not a
   centered blocking modal like .nexus-error-modal - it's supplementary detail, not something
   requiring acknowledgment before the user can continue), styled with the brand palette from
   nexus-ai-v5-3d-orb.css rather than the error modal's alarm-red treatment. z-index sits below
   the error modal (12050) so a genuine error can still surface on top of it. */
#nexus-v4-presence .nexus-detail-card {
  position: fixed;
  right: 24px;
  bottom: 140px;
  z-index: 12010;
  width: min(420px, calc(100vw - 32px));
}

#nexus-v4-presence .nexus-detail-card[hidden] {
  display: none !important;
}

#nexus-v4-presence .nexus-detail-card__window {
  display: grid;
  grid-template-rows: auto 1fr auto;
  max-height: 60vh;
  border-radius: 12px;
  border: 1px solid var(--nx-silver, #d7dde7);
  background: var(--nx-white, #fff);
  color: var(--nx-dark, #111827);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.28);
  overflow: hidden;
}

#nexus-v4-presence .nexus-detail-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--nx-charcoal, #252525);
  color: var(--nx-white, #fff);
  border-bottom: 2px solid var(--nx-red, #c8102e);
}

#nexus-v4-presence .nexus-detail-card__header h4 {
  margin: 0;
  font-size: .88rem;
  font-weight: 700;
}

#nexus-v4-presence .nexus-detail-card__close {
  border: 0;
  background: transparent;
  color: var(--nx-white, #fff);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}

#nexus-v4-presence .nexus-detail-card__body {
  padding: 12px 14px;
  overflow: auto;
  font-size: .86rem;
  line-height: 1.5;
}

#nexus-v4-presence .nexus-detail-card__body p {
  margin: 0 0 10px;
}

#nexus-v4-presence .nexus-detail-card__body p:last-child {
  margin-bottom: 0;
}

#nexus-v4-presence .nexus-detail-card__body ul,
#nexus-v4-presence .nexus-detail-card__body ol {
  margin: 0 0 10px;
  padding-left: 20px;
}

#nexus-v4-presence .nexus-detail-card__footer {
  padding: 8px 12px;
  border-top: 1px solid var(--nx-silver, #d7dde7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#nexus-v4-presence .nexus-detail-card__copy {
  border: 1px solid var(--nx-silver, #d7dde7);
  border-radius: 8px;
  background: var(--nx-white, #fff);
  color: var(--nx-dark, #111827);
  font-size: .8rem;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
  margin-left: auto;
}

/* The nav shortcut is the card's one deliberately-rare "important enough to act on" moment
   (see resolveNavTarget in nexus-detail-card.js) - filled brand red rather than the copy
   button's neutral outline, so it reads as the primary action when it does appear. */
#nexus-v4-presence .nexus-detail-card__nav {
  border: 1px solid var(--nx-red, #c8102e);
  border-radius: 8px;
  background: var(--nx-red, #c8102e);
  color: var(--nx-white, #fff);
  font-size: .8rem;
  font-weight: 700;
  padding: 6px 12px;
  text-decoration: none;
  cursor: pointer;
}

#nexus-v4-presence .nexus-detail-card__nav[hidden] {
  display: none !important;
}

@media (max-width: 720px) {
  #nexus-v4-presence .nexus-detail-card {
    right: 10px;
    left: 10px;
    bottom: 112px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  #nexus-v4-presence .nxv4-micro-speakout,
  #nexus-v4-presence #nxv4-rail {
    transition: none !important;
    animation: none !important;
  }
}