/* ════════════════════════════════════════════════════════════════════
   NYASIA · Widget Styling
   Self-mounting widget. Floating corner trigger + modal panel.
   Avatar-ready: the .ny-avatar slot is where her image/animation will sit
   in Phase C. In Phase A it shows a stylized monogram.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --ny-bg:        #0F0820;
  --ny-bg-soft:   #1A1130;
  --ny-paper:     #F1E8D0;
  --ny-paper-2:   #E5D8B5;
  --ny-ink:       #1A1408;
  --ny-ink-soft:  #3D3525;
  --ny-muted:     #6E6450;

  --ny-gold:      #C9A84C;
  --ny-gold-hi:   #EEC85C;
  --ny-violet:    #9F7FE0;
  --ny-violet-deep: #6B4FA0;
  --ny-cream:     #F4E8D2;
  --ny-rose:      #E07AA0;

  --ny-shadow:    0 8px 32px rgba(0,0,0,0.45);
  --ny-shadow-soft:0 4px 14px rgba(0,0,0,0.25);
}

/* ── FLOATING TRIGGER (bottom-LEFT corner, moved 2026-05-23) ────────
   Bottom-right is reserved for the Cadet Forge profile picker.
   Nyasia lives bottom-left so both can coexist without overlap.
   ─────────────────────────────────────────────────────────────────── */
.ny-trigger {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, var(--ny-violet) 0%, var(--ny-violet-deep) 70%);
  border: 2px solid var(--ny-gold);
  color: var(--ny-cream);
  cursor: pointer;
  z-index: 99980;
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.02em;
  box-shadow: var(--ny-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  overflow: hidden;  /* clip the image to the circle */
  padding: 0;
}
.ny-trigger:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 36px rgba(0,0,0,0.55), 0 0 20px rgba(159,127,224,0.35);
}
.ny-trigger:focus { outline: 3px solid var(--ny-gold-hi); outline-offset: 3px; }

/* Phase C — avatar image inside the trigger circle */
.ny-trigger__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 35%;  /* focus on face, not chest */
  display: none;
  pointer-events: none;
}
.ny-trigger__monogram {
  /* Fallback when no image; hidden when .has-img */
  display: inline;
}
.ny-trigger.has-img .ny-trigger__img { display: block; }
.ny-trigger.has-img .ny-trigger__monogram { display: none; }

/* First-visit pulse animation */
.ny-trigger.is-first-visit {
  animation: ny-pulse 2.4s ease-in-out infinite;
}
@keyframes ny-pulse {
  0%, 100% { box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 0 rgba(159,127,224,0.45); }
  50%      { box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 18px rgba(159,127,224,0); }
}

/* Phase C — INTRO WAITING state: prominent gold pulse to invite the tap
   when autoplay was blocked by the browser. Tooltip auto-shows. */
.ny-trigger.is-intro-waiting {
  animation: ny-intro-waiting 1.8s ease-in-out infinite;
  border-color: var(--ny-gold-hi) !important;
}
@keyframes ny-intro-waiting {
  0%, 100% { box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 0 rgba(238,200,92,0.55); }
  50%      { box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 22px rgba(238,200,92,0); }
}
.ny-trigger.is-intro-waiting .ny-trigger__chip {
  opacity: 1;
  transform: translateY(0);
  border-color: var(--ny-gold-hi);
  color: var(--ny-gold-hi);
}

/* ────────────────────────────────────────────────────────────────────
   PHASE C — AVATAR STATE ANIMATIONS
   States: idle (default, no class), is-listening, is-speaking, is-thinking.
   Applied to BOTH .ny-trigger (corner bubble) and .ny-avatar (modal header).
   Respects prefers-reduced-motion for accessibility.
   ──────────────────────────────────────────────────────────────────── */

/* IDLE — subtle slow breathing pulse on the trigger when not first-visit + not other state */
.ny-trigger.has-img:not(.is-first-visit):not(.is-listening):not(.is-speaking):not(.is-thinking) {
  animation: ny-breath 5s ease-in-out infinite;
}
@keyframes ny-breath {
  0%, 100% { box-shadow: var(--ny-shadow), 0 0 0 0 rgba(201,168,76,0.0); }
  50%      { box-shadow: var(--ny-shadow), 0 0 16px 2px rgba(201,168,76,0.18); }
}

/* LISTENING — modal open, ready for input. Soft steady glow. */
.ny-trigger.is-listening,
.ny-avatar.is-listening {
  box-shadow: 0 0 20px 2px rgba(159,127,224,0.35);
  border-color: var(--ny-violet) !important;
}

/* SPEAKING — audio playing. Brighter pulse synced with playback. */
.ny-trigger.is-speaking,
.ny-avatar.is-speaking {
  animation: ny-speaking 1.2s ease-in-out infinite;
  border-color: var(--ny-gold-hi) !important;
}
@keyframes ny-speaking {
  0%, 100% { box-shadow: 0 0 18px 2px rgba(238,200,92,0.35), 0 8px 32px rgba(0,0,0,0.45); }
  50%      { box-shadow: 0 0 32px 6px rgba(238,200,92,0.55), 0 8px 32px rgba(0,0,0,0.45); }
}

/* THINKING — brief fade between user submit and response render */
.ny-trigger.is-thinking,
.ny-avatar.is-thinking {
  opacity: 0.65;
  transition: opacity 0.3s ease;
}

/* Accessibility — respect OS-level reduce-motion preference */
@media (prefers-reduced-motion: reduce) {
  .ny-trigger.has-img:not(.is-first-visit):not(.is-listening):not(.is-speaking):not(.is-thinking) {
    animation: none;
  }
  .ny-trigger.is-speaking,
  .ny-avatar.is-speaking {
    animation: none;
    box-shadow: 0 0 24px 4px rgba(238,200,92,0.4), 0 8px 32px rgba(0,0,0,0.45);
  }
  .ny-trigger.is-first-visit { animation: none; }
}

.ny-trigger__chip {
  position: absolute;
  bottom: 100%;
  left: 0;  /* aligned with left edge to match bottom-left trigger position */
  margin-bottom: 8px;
  background: var(--ny-bg);
  color: var(--ny-cream);
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 100px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s, transform 0.15s;
  border: 1px solid var(--ny-violet);
}
.ny-trigger:hover .ny-trigger__chip,
.ny-trigger.is-first-visit .ny-trigger__chip {
  opacity: 1;
  transform: translateY(0);
}

/* ── MODAL OVERLAY ─────────────────────────────────────────────── */
.ny-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99989;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.ny-overlay.is-open { opacity: 1; pointer-events: auto; }

/* ── MODAL PANEL ────────────────────────────────────────────────── */
.ny-modal {
  position: fixed;
  bottom: 92px;
  left: 20px;  /* matches trigger's bottom-left position */
  width: min(420px, calc(100vw - 40px));
  max-height: min(560px, calc(100vh - 120px));
  background: linear-gradient(180deg, var(--ny-bg) 0%, var(--ny-bg-soft) 100%);
  border: 1px solid var(--ny-violet-deep);
  border-radius: 14px;
  box-shadow: var(--ny-shadow);
  z-index: 99990;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  overflow: hidden;
}
.ny-modal.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ── HEADER (Nyasia identity bar) ───────────────────────────────── */
.ny-header {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(159,127,224,0.18), rgba(201,168,76,0.10));
  border-bottom: 1px solid rgba(159,127,224,0.30);
  align-items: center;
}
.ny-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, var(--ny-violet) 0%, var(--ny-violet-deep) 70%);
  border: 2px solid var(--ny-gold);
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 700;
  color: var(--ny-cream);
  font-size: 18px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.ny-avatar__img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 30%;  /* focus the small circle on her face, not the chest */
  display: none;
}
.ny-avatar.has-img .ny-avatar__monogram { display: none; }
.ny-avatar.has-img .ny-avatar__img { display: block; }
.ny-avatar { transition: box-shadow 0.25s ease, border-color 0.25s ease; }

.ny-identity__name {
  font-family: Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ny-cream);
  letter-spacing: 0.01em;
}
.ny-identity__role {
  font-family: 'Segoe UI', sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ny-gold);
}

.ny-close {
  background: transparent;
  border: 1px solid rgba(241,232,208,0.30);
  border-radius: 50%;
  width: 30px; height: 30px;
  color: var(--ny-cream);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.ny-close:hover { border-color: var(--ny-gold); color: var(--ny-gold-hi); }

/* ── MESSAGE AREA ──────────────────────────────────────────────── */
.ny-message {
  padding: 18px 18px 14px;
  font-family: Georgia, serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ny-cream);
  border-bottom: 1px solid rgba(159,127,224,0.18);
  background: rgba(0,0,0,0.20);
}
.ny-message em {
  color: var(--ny-rose);
  font-style: italic;
}
.ny-message strong { color: var(--ny-gold); font-weight: 700; }

/* ── BODY (scrollable area for cards / options / input) ─────────── */
.ny-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--ny-violet-deep) transparent;
}
.ny-body::-webkit-scrollbar { width: 6px; }
.ny-body::-webkit-scrollbar-thumb { background: var(--ny-violet-deep); border-radius: 3px; }

/* ── DOORWAY CARDS (entry points) ──────────────────────────────── */
.ny-doorways {
  display: flex; flex-direction: column; gap: 8px;
}
.ny-doorway {
  background: var(--ny-bg-soft);
  border: 1px solid rgba(159,127,224,0.30);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: Georgia, serif;
  font-size: 14px;
  font-style: italic;
  color: var(--ny-cream);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: all 0.15s;
}
.ny-doorway:hover {
  background: rgba(159,127,224,0.12);
  border-color: var(--ny-violet);
  transform: translateX(2px);
}

/* ── PLANET CARDS (3 destination cards after doorway pick) ─────── */
.ny-cards {
  display: flex; flex-direction: column; gap: 10px;
}
.ny-card {
  background: var(--ny-bg-soft);
  border: 1px solid rgba(201,168,76,0.25);
  border-left: 3px solid var(--ny-card-color, var(--ny-gold));
  border-radius: 6px;
  padding: 12px 14px;
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: var(--ny-cream);
  transition: all 0.15s;
}
.ny-card:hover {
  background: rgba(201,168,76,0.08);
  transform: translateX(2px);
}
.ny-card__name {
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ny-gold-hi);
  margin-bottom: 4px;
}
.ny-card__teaser {
  font-family: Georgia, serif;
  font-size: 12.5px;
  font-style: italic;
  color: rgba(241,232,208,0.80);
  line-height: 1.5;
}

/* ── INPUT BAR (ask Nyasia anything) ───────────────────────────── */
.ny-footer {
  padding: 12px 14px;
  border-top: 1px solid rgba(159,127,224,0.18);
  background: rgba(0,0,0,0.30);
}
.ny-input-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.ny-input {
  background: var(--ny-bg);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 100px;
  padding: 10px 14px;
  font-family: Georgia, serif;
  font-size: 14px;
  color: var(--ny-cream);
}
.ny-input:focus { outline: none; border-color: var(--ny-gold); }
.ny-input::placeholder { color: rgba(241,232,208,0.40); font-style: italic; }

.ny-send {
  background: var(--ny-violet-deep);
  color: var(--ny-cream);
  border: none;
  border-radius: 100px;
  padding: 0 16px;
  font-family: 'Segoe UI', sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.ny-send:hover { background: var(--ny-violet); }

/* ── QUICK BUTTONS (Lost / Companion / Sky Level shortcuts) ────── */
.ny-quick {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 10px;
}
.ny-quick__btn {
  font-family: 'Segoe UI', sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  color: rgba(241,232,208,0.65);
  border: 1px solid rgba(241,232,208,0.20);
  padding: 6px 10px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.15s;
}
.ny-quick__btn:hover { color: var(--ny-gold); border-color: var(--ny-gold); }

/* ── MOBILE ────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ny-trigger { bottom: 16px; left: 16px; width: 54px; height: 54px; font-size: 20px; }
  .ny-modal { right: 12px; left: 12px; bottom: 80px; width: auto; max-height: calc(100vh - 100px); }
  .ny-card__name { font-size: 14px; }
  .ny-card__teaser { font-size: 12px; }
}