/*
 * css/lazy/mentor.css
 * ─────────────────────────────────────────────────────────────────────────────
 * The mentor reminder card (#dxMentorCard) — visual half of every mentor-loop
 * reminder. Rendered by modules/voiceBroadcast/mentorCard.js on the
 * `mentor:reminder` event (also reused directly by the HEAR IT preview chips,
 * modules/voiceBroadcast/index.js _playDemo). Loaded lazily on first show.
 *
 * Founder-handcrafted orb redesign (Claude Design, 2026-07-17): the old
 * border-left pulse + conic-gradient ring is replaced by a canvas orb
 * (#vxOrbBig, modules/voiceBroadcast/orbEngine.js) and a canvas ribbon
 * waveform (#vxRibbon) underneath a single typewriter-reveal caption
 * (.vx-card-caption) instead of separate anchor/secondary text blocks. Color
 * (mentor = red/pink, motivation = yellow/orange, market = blue/cyan) comes
 * from orbEngine.setMode() overriding --dx-voiceA..D (dashboard.css :root) —
 * there is no more per-channel modifier class to style against.
 * ─────────────────────────────────────────────────────────────────────────────
 */

#dxMentorCard {
  position: fixed;
  top: 72px;
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 10050;
  width: min(620px, 94vw);
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  transform: translateX(-50%) translateY(-26px) scale(.86);
  opacity: 0;
  transition: transform .5s cubic-bezier(.2,1.4,.3,1), opacity .32s ease;
}
#dxMentorCard.show { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
#dxMentorCard[hidden] { display: none; }

/* Bottom-right, pops per read (2026-07-17) — was top-center; moved so it
   never competes with the header for attention and reads as a persistent
   "assistant corner" instead of a modal-like interruption. Scoped to real
   desktop widths only (min-width:769px, matching MOBILE_BREAKPOINT /
   body.dx-mobile-shell) — mobile keeps the top-anchored placement below;
   the mobile shell's bottom tab bar makes a bottom-anchored card a real
   collision risk there, so it wasn't ported; desktop has no such chrome. */
@media (min-width: 769px) {
  #dxMentorCard {
    top: auto; left: auto; right: 28px; bottom: 28px;
    width: min(560px, 94vw);
    transform-origin: bottom right;
    transform: translateY(24px) scale(.92);
  }
  #dxMentorCard.show { transform: translateY(0) scale(1); }
}

.vx-card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(rgba(8,12,21,.88), rgba(8,12,21,.88)) padding-box,
              linear-gradient(130deg, var(--dx-voiceA), var(--dx-voiceB), var(--dx-voiceC), var(--dx-voiceD)) border-box;
  border: 1px solid transparent;
  backdrop-filter: blur(26px) saturate(1.3);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 60px -30px var(--dx-voiceA);
}
body.light-theme .vx-card {
  background: linear-gradient(rgba(250,246,239,.92), rgba(250,246,239,.92)) padding-box,
              linear-gradient(130deg, var(--dx-voiceA), var(--dx-voiceB), var(--dx-voiceC), var(--dx-voiceD)) border-box;
  box-shadow: 0 30px 80px -20px rgba(26,22,18,.35), 0 0 60px -30px var(--dx-voiceA);
}

.vx-card-row { display: flex; gap: 16px; align-items: center; padding: 18px 20px 6px; }
#vxOrbBig { width: 96px; height: 96px; flex: 0 0 auto; filter: saturate(1.45) blur(.3px); }
.vx-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.vx-card-head { display: flex; align-items: center; gap: 10px; }
.vx-card-tag {
  font: 700 10px/1 'IBM Plex Mono', 'JetBrains Mono', monospace; letter-spacing: .22em;
  padding: 4px 8px; border-radius: 5px;
  color: #0a0e16; background: linear-gradient(90deg, var(--dx-voiceA), var(--dx-voiceB));
}
#dxMentorCard .dx-mentor-time { font: 500 10px/1 'IBM Plex Mono', 'JetBrains Mono', monospace; color: rgba(160,180,215,.55); letter-spacing: .08em; }
#dxMentorCard .dx-mentor-close { margin-left: auto; background: none; border: none; color: rgba(170,190,220,.5); font-size: 18px; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 6px; }
#dxMentorCard .dx-mentor-close:hover { color: #fff; background: rgba(255,255,255,.08); }
body.light-theme #dxMentorCard .dx-mentor-time { color: rgba(58,51,43,.55); }
body.light-theme #dxMentorCard .dx-mentor-close { color: rgba(58,51,43,.5); }
body.light-theme #dxMentorCard .dx-mentor-close:hover { color: #1A1612; background: rgba(26,22,18,.08); }

/* Lead line (2026-07-25) — a Motivation piece's title, or any other label
   that isn't part of the spoken text. Shown fully and instantly (never
   typed) because the typewriter below is paced to speech boundary events
   that only ever index into what's actually said. */
.vx-card-lead { font: 700 12.5px/1.3 'DM Sans', sans-serif; letter-spacing: .01em; color: rgba(234, 241, 255, .62); }
.vx-card-lead[hidden] { display: none; }
body.light-theme .vx-card-lead { color: rgba(26, 22, 18, .62); }

/* Typewriter caption (orbEngine.renderCaption/advanceCaption) — reveals
   character-by-character paced to real speech boundary events, with a
   blinking cursor trailing the writing edge. */
.vx-card-caption { font: 400 17px/1.55 'DM Sans', sans-serif; color: #eaf1ff; min-height: 52px; text-wrap: pretty; white-space: normal; overflow-wrap: break-word; }
body.light-theme .vx-card-caption { color: #1A1612; }

/* Check-in "Done" affordance (2026-07-17) — hidden by default; mentorCard.js
   only reveals it for channel:'checkin'. Distinct from the × close: × just
   dismisses this card, Done suppresses the reminder for the rest of the day
   (core/checkinReminder.js). Red-tinted to match the checkin palette
   (--dx-voiceA is #ef4444 while this mode is active). */
.vx-card-done {
  display: none; align-items: center; gap: 6px; align-self: flex-start; margin-top: 10px;
  font: 600 11.5px/1 'DM Sans', sans-serif; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  color: #ffd9d9; background: rgba(239, 68, 68, .14); border: 1px solid var(--dx-voiceA, rgba(239, 68, 68, .5));
  transition: background .15s, border-color .15s, transform .15s;
}
.vx-card-done:not([hidden]) { display: inline-flex; }
.vx-card-done:hover { background: rgba(239, 68, 68, .24); transform: translateY(-1px); }
body.light-theme .vx-card-done { color: #7a1f1f; background: rgba(239, 68, 68, .1); }
.vx-ch { opacity: 0; transition: opacity .32s ease-out; }
.vx-ch.said { opacity: 1; }
.vx-cursor { display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; background: currentColor; opacity: 0; }
.vx-cursor.on { animation: vxCursorBlink .85s step-end infinite; }
@keyframes vxCursorBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .vx-cursor.on { animation: none; opacity: .9; } }

#vxRibbon { display: block; width: 100%; height: 46px; margin-top: 2px; }

/* Tab-open hint (T6a, C10) — one-time dismissible card inside the voice
   panel (modules/voiceBroadcast/index.js _renderTabHint), gone forever once
   dx_hint_tab_open is set. Small and muted on purpose — this is a reminder,
   not a promotion — so no gradient border, no animation, matching the
   panel's own quiet .dxb-sec rows rather than the mentor card's on-air
   treatment above. Sits as a sibling BEFORE .dxb-body (direct child of
   .dxb-panel, same as .vx-try), hence the 16px horizontal margin matching
   that row's inset rather than being flush like .dxb-body's own children. */
.vx-tab-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 0 0 auto;
  margin: 0 16px 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(160, 180, 215, .08);
  border: 1px solid rgba(160, 180, 215, .16);
}
body.light-theme .vx-tab-hint {
  background: rgba(58, 51, 43, .05);
  border-color: rgba(58, 51, 43, .12);
}
.vx-tab-hint-text {
  flex: 1;
  margin: 0;
  font: 400 12.5px/1.5 'DM Sans', sans-serif;
  color: rgba(160, 180, 215, .8);
}
body.light-theme .vx-tab-hint-text { color: rgba(58, 51, 43, .75); }
.vx-tab-hint-dismiss {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: rgba(170, 190, 220, .5);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
}
.vx-tab-hint-dismiss:hover { color: #fff; background: rgba(255, 255, 255, .08); }
body.light-theme .vx-tab-hint-dismiss { color: rgba(58, 51, 43, .5); }
body.light-theme .vx-tab-hint-dismiss:hover { color: #1A1612; background: rgba(26, 22, 18, .08); }

/* Phone (360px baseline): banner above the mobile-shell bottom nav; smaller
   orb/ribbon and card offset since the mobile header is two rows. */
@media (max-width: 640px) {
  #dxMentorCard { top: calc(env(safe-area-inset-top, 0px) + 100px); left: 10px; right: 10px; width: auto; transform: translateY(-26px) scale(.86); }
  #dxMentorCard.show { transform: none; }
  body.dx-mobile-shell #dxMentorCard { top: calc(env(safe-area-inset-top, 0px) + 100px); }
  #vxOrbBig { width: 64px; height: 64px; }
  .vx-card-row { padding: 14px 14px 4px 12px; gap: 12px; }
  .vx-card-caption { font-size: 15px; min-height: 44px; }
  #vxRibbon { height: 36px; }
}