/* ══════════════════════════════════════════════════════════════════════════
   NOVA — in-chat "thinking" animation (v2). A clean single line:
     ★ star (left) · one rotating phrase (center) · timer (right)
   The phrase color is themed: Moon = switching purple wave · Glass = rainbow.
   (Not Nova Live — this is only the chat prompt thinking state.)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Compact, free-floating layout — small, left, NO surrounding box ──
   (The blue panel/box that used to wrap the thinking state is removed; the glass
   theme keeps its own glass surrounding, see below.) */
.thinking-row.thinking-row-v2 {
  display: inline-flex !important; align-items: center; gap: 8px;
  width: auto !important; max-width: 100%;
  background: none !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  padding: 2px 0 !important; border-radius: 0 !important; overflow: visible !important;
}
/* kill the legacy faint blue box (core-styles ::before/::after) on the thinking row */
.thinking-row.thinking-row-v2::before,
.thinking-row.thinking-row-v2::after { content: none !important; display: none !important; background: none !important; }
/* phrase + timer side-by-side on ONE line (timer to the RIGHT of the phrase) */
.thinking-row-v2 .thinking-body {
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
  align-items: center; gap: 9px;
}
.thinking-row-v2 .thinking-phrase {
  font-weight: 600; font-size: 13.5px; letter-spacing: .2px; white-space: nowrap;
  transition: opacity .25s ease, transform .25s ease;
}
.thinking-row-v2 .thinking-phrase.phrase-out { opacity: 0; transform: translateY(-3px); }
.thinking-row-v2 .thinking-time {
  display: inline-block; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; animation: none !important;
  font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 600; opacity: .45; white-space: nowrap;
}

/* ── GLASS keeps a soft glass surrounding (as requested) ── */
html[data-theme="glass"] .thinking-row.thinking-row-v2 {
  background: linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.22)) !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  box-shadow: 0 4px 16px rgba(6,182,212,.14), inset 0 1px 0 rgba(255,255,255,.8) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4) !important; backdrop-filter: blur(14px) saturate(1.4) !important;
  padding: 6px 13px !important; border-radius: 999px !important;
}

/* ════ MOON theme — switching purple wave ════ */
html[data-theme="moon"] .thinking-row-v2 .thinking-phrase {
  /* cleaner, brighter purple wave — soft lilac → violet → orchid, gently flowing */
  background: linear-gradient(100deg, #c9b4ff 0%, #a78bfa 22%, #8b5cf6 42%, #b06bff 62%, #a78bfa 82%, #c9b4ff 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: novaThinkPurple 4.5s ease-in-out infinite;
}
@keyframes novaThinkPurple {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* ════ GLASS theme — rainbow ════ */
html[data-theme="glass"] .thinking-row-v2 .thinking-phrase {
  background: linear-gradient(90deg,
    hsl(0 100% 62%), hsl(40 100% 55%), hsl(120 80% 48%), hsl(190 100% 50%),
    hsl(260 100% 66%), hsl(320 100% 62%), hsl(0 100% 62%));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: novaThinkRainbow 6s linear infinite;
}
@keyframes novaThinkRainbow { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } }

@media (prefers-reduced-motion: no-preference) {
  /* ── Logo avatar: breathing orb + halo + rotating shimmer ring (Moon) ── */
  html[data-theme="moon"] .thinking-row .thinking-avatar {
    position: relative; border-radius: 50%;
    animation: novaMoonBreathe 2.4s ease-in-out infinite;
  }
  html[data-theme="moon"] .thinking-row .thinking-avatar::after {
    content: ''; position: absolute; inset: -6px; border-radius: 50%;
    background: radial-gradient(circle, rgba(168,85,247,0.45), rgba(99,102,241,0.18) 55%, transparent 72%);
    filter: blur(3px); animation: novaMoonHalo 2.4s ease-in-out infinite;
    pointer-events: none; z-index: -1;
  }
  html[data-theme="moon"] .thinking-row .thinking-avatar::before {
    content: ''; position: absolute; inset: -3px; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 190deg, rgba(99,102,241,0.85) 300deg, rgba(168,85,247,0.95) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
    animation: novaMoonSpin 1.4s linear infinite; pointer-events: none;
  }
  html[data-theme="moon"] .thinking-row .star-animate {
    animation: novaMoonTwinkle 1.6s ease-in-out infinite; transform-origin: 62px 9px;
  }
  /* Glass: a soft rainbow glow on the star to match the phrase */
  html[data-theme="glass"] .thinking-row-v2 .star-animate {
    animation: novaMoonTwinkle 1.6s ease-in-out infinite; transform-origin: 62px 9px;
  }
}

@keyframes novaMoonBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes novaMoonHalo    { 0%,100% { opacity: 0.45; transform: scale(0.92); } 50% { opacity: 0.85; transform: scale(1.12); } }
@keyframes novaMoonSpin    { to { transform: rotate(360deg); } }
@keyframes novaMoonTwinkle { 0%,100% { opacity: 0.5; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.25); } }