/* ============================================
   STELLA Agent Chat v6 – Full Redesign
   High contrast, centered layout, responsive
   Glassmorphism + living animations
   ============================================ */

/* ============================================
   STELLA APP LAYOUT (Full-Page /stella)
   ============================================ */
.stella-app {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* Cosmic background matching the landing page */
  background:
    url('/static/images/bg-cosmos-mobile.webp') center center / cover no-repeat,
    radial-gradient(ellipse 55% 45% at 72% 15%, rgba(88, 40, 120, 0.35) 0%, rgba(60, 25, 90, 0.15) 40%, transparent 75%),
    radial-gradient(ellipse 50% 40% at 18% 78%, rgba(30, 50, 100, 0.25) 0%, rgba(20, 35, 75, 0.10) 45%, transparent 70%),
    var(--bg-deep, #070a12);
  color: #f1f5f9;
  overflow: hidden;
  font-family: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
}
@media (min-width: 769px) {
  .stella-app {
    background:
      url('/static/images/bg-cosmos-desktop.webp') center center / cover no-repeat,
      radial-gradient(ellipse 55% 45% at 72% 15%, rgba(88, 40, 120, 0.35) 0%, rgba(60, 25, 90, 0.15) 40%, transparent 75%),
      radial-gradient(ellipse 50% 40% at 18% 78%, rgba(30, 50, 100, 0.25) 0%, rgba(20, 35, 75, 0.10) 45%, transparent 70%),
      var(--bg-deep, #070a12);
  }
}

/* ── Header ── */
.stella-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(8, 10, 22, 0.8);
  border-bottom: 1px solid rgba(139,92,246,0.2);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  min-height: 60px;
}
@media (min-width: 768px) {
  .stella-header {
    padding: 14px 24px;
    justify-content: center;
  }
  .stella-header > * {
    max-width: 900px;
  }
  /* Desktop: header items in a centered flex row */
  .stella-header {
    display: flex;
    align-items: center;
    gap: 12px;
  }
}

/* ── Main Content Area ── */
#stella-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* ── Avatar ── */
.stella-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(139,92,246,0.4);
  overflow: hidden;
}
.stella-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
/* stellaPulse removed – was distracting */

.stella-header-info { flex: 1; min-width: 0; }
.stella-header-info h1 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  color: #ffffff;
  text-shadow: 0 0 20px rgba(139,92,246,0.3);
}
.stella-header-subtitle {
  font-size: 0.72rem;
  color: #a5b4c8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.stella-header-actions { display: flex; gap: 6px; }
.stella-header-actions button {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #c4d0e0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.8rem;
}
.stella-header-actions button:hover {
  background: rgba(139,92,246,0.25);
  color: #e9d5ff;
  border-color: rgba(139,92,246,0.4);
  transform: scale(1.08);
}

/* ── Transit Bar ── */
.stella-transit-bar {
  display: flex;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(139,92,246,0.08);
  border-bottom: 1px solid rgba(139,92,246,0.12);
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
  justify-content: center;
}
.stella-transit-bar::-webkit-scrollbar { display: none; }

.stella-transit-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  font-size: 0.65rem;
  white-space: nowrap;
  color: #c4d0e0;
  flex-shrink: 0;
  transition: all 0.2s;
}
.stella-transit-pill:hover {
  background: rgba(139,92,246,0.15);
  border-color: rgba(139,92,246,0.3);
}
.stella-transit-pill .symbol { font-size: 0.85rem; }
.stella-transit-pill .pill-sign {
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e2e8f0;
}
.stella-transit-pill .pill-deg {
  color: #8899aa;
  font-size: 0.58rem;
}
.stella-transit-pill.retrograde { color: #fbbf24; border-color: rgba(251,191,36,0.3); }
.stella-transit-pill.moon { color: #a5c4f3; border-color: rgba(165,196,243,0.3); }

/* ============================================
   MESSAGES AREA – Centered on Desktop
   ============================================ */
.stella-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* CRITICAL: Disable browser auto-scroll anchoring.
     Without this, the browser automatically scrolls down when content
     at the bottom of the container grows (e.g. streaming tokens).
     This is the root cause of the "scroll drags you down" bug on mobile. */
  overflow-anchor: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0;
  /* CENTER on desktop */
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
}
/* Prevent ALL children from being scroll anchors */
.stella-messages * {
  overflow-anchor: none;
}
/* Elegant thin scrollbar – appears on hover only */
.stella-messages { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.stella-messages:hover { scrollbar-color: rgba(139,92,246,0.3) transparent; }
.stella-messages::-webkit-scrollbar { width: 5px; }
.stella-messages::-webkit-scrollbar-track { background: transparent; }
.stella-messages::-webkit-scrollbar-thumb { background: transparent; border-radius: 10px; transition: background 0.3s; }
.stella-messages:hover::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.3); }
.stella-messages::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,0.5); }

/* ============================================
   SCROLL-TO-BOTTOM BUTTON (ChatGPT/Claude style)
   Appended to .stella-app as overlay
   ============================================ */
.stella-scroll-btn {
  position: absolute;
  /* Position above the input area */
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) scale(0.85);
  z-index: 50;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(139,92,246,0.4);
  background: rgba(15, 18, 35, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #c4b5fd;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 15px rgba(139,92,246,0.2);
}
.stella-scroll-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
}
.stella-scroll-btn:hover {
  background: rgba(139,92,246,0.35);
  border-color: rgba(139,92,246,0.7);
  color: #ede9fe;
}
.stella-scroll-btn:active {
  transform: translateX(-50%) scale(0.9);
}
@media (max-width: 768px) {
  .stella-scroll-btn {
    bottom: 80px;
    width: 38px;
    height: 38px;
    font-size: 15px;
    /* Ensure it's clearly visible on mobile */
    box-shadow: 0 4px 24px rgba(0,0,0,0.6), 0 0 20px rgba(139,92,246,0.25);
  }
}

/* ============================================
   MESSAGE BUBBLES – High Contrast
   ============================================ */
.stella-msg {
  max-width: 85%;
  animation: msgFadeIn 0.35s ease;
  word-break: break-word;
}
@keyframes msgFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.stella-msg.user { align-self: flex-end; }
.stella-msg.assistant { align-self: flex-start; }

.stella-msg-bubble {
  padding: 12px 16px;
  border-radius: 18px;
  line-height: 1.6;
  font-size: 0.92rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* User Bubble – Purple gradient */
.stella-msg.user .stella-msg-bubble {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #ffffff;
  border-bottom-right-radius: 6px;
  box-shadow: 0 2px 12px rgba(124,58,237,0.3);
}

/* ★★★ Assistant Bubble – Glassmorphism, HIGH CONTRAST ★★★ */
.stella-msg.assistant .stella-msg-bubble {
  background: rgba(15, 18, 40, 0.88);
  border: 1px solid rgba(139,92,246,0.3);
  border-bottom-left-radius: 6px;
  color: #f1f5f9;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.stella-msg-content {
  color: #f1f5f9;
  line-height: 1.7;
  letter-spacing: 0.01em;
}
/* Tighter spacing for rendered markdown inside messages */
.stella-msg-content h3 { margin: 10px 0 4px; font-size: 0.98rem; }
.stella-msg-content h4 { margin: 8px 0 3px; font-size: 0.92rem; }
.stella-msg-content br + br { display: none; }
.stella-msg-content ul { margin: 4px 0 6px; padding-left: 18px; }
.stella-msg-content li { margin: 2px 0; line-height: 1.55; }
.stella-msg-content p { margin: 3px 0; }
.stella-msg-widgets { margin-top: 12px; }

.stella-msg-time {
  font-size: 0.62rem;
  color: #7a8b9e;
  margin-top: 4px;
  padding: 0 6px;
}
.stella-msg.user .stella-msg-time { text-align: right; }

/* ── Typing Indicator ── */
.stella-typing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  color: #8899bb;
  font-size: 0.8rem;
}
.stella-typing-dots { display: flex; gap: 4px; }
.stella-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8b5cf6;
  animation: typingBounce 1.2s ease-in-out infinite;
}
.stella-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.stella-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* ============================================
   RICH WIDGETS – Glassmorphism Cards
   ============================================ */
.stella-widget {
  margin: 10px 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(139,92,246,0.2);
  background: rgba(15, 18, 35, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  contain: layout style;
}

.stella-widget-transit {
  background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(59,130,246,0.08));
}
.stella-widget-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #c4d0e0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.stella-widget-header i { color: #a78bfa; font-size: 0.85rem; }
.stella-widget-body { padding: 12px 14px; }

/* Planet grid */
.stella-planets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 6px;
}
.stella-planet-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  font-size: 0.74rem;
  min-width: 0;
  overflow: hidden;
  transition: background 0.2s;
}
.stella-planet-item:hover { background: rgba(139,92,246,0.1); }
.stella-planet-item .p-symbol {
  font-size: 1rem;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.stella-planet-item .p-sign {
  color: #d4bfff;
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.stella-planet-item .p-deg {
  color: #7a8b9e;
  font-size: 0.62rem;
  flex-shrink: 0;
  margin-left: auto;
}
.stella-planet-item.retro .p-sign { color: #fbbf24; }
.stella-planet-item.retro::after { content: ' \u211E'; color: #fbbf24; font-size: 0.62rem; flex-shrink: 0; }

.stella-widget-moon {
  margin-top: 8px;
  font-size: 0.78rem;
  color: #a5b4c8;
}

/* Energy Widget */
.stella-widget-energy {
  background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(239,68,68,0.05));
  border-color: rgba(245,158,11,0.2);
}
.stella-energy-bars { display: flex; flex-direction: column; gap: 8px; }
.stella-energy-row { display: flex; align-items: center; gap: 8px; }
.stella-energy-label {
  width: 72px;
  font-size: 0.72rem;
  color: #c4d0e0;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.stella-energy-bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
  min-width: 40px;
}
.stella-energy-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 1s ease;
}
.stella-energy-fill.love { background: linear-gradient(90deg, #ec4899, #f43f5e); }
.stella-energy-fill.career { background: linear-gradient(90deg, #8b5cf6, #6366f1); }
.stella-energy-fill.health { background: linear-gradient(90deg, #10b981, #14b8a6); }
.stella-energy-fill.creativity { background: linear-gradient(90deg, #f59e0b, #f97316); }
.stella-energy-fill.intuition { background: linear-gradient(90deg, #6366f1, #818cf8); }
.stella-energy-fill.default { background: linear-gradient(90deg, #3b82f6, #6366f1); }
.stella-energy-val {
  width: 30px;
  text-align: right;
  font-size: 0.72rem;
  font-weight: 700;
  color: #f1f5f9;
  flex-shrink: 0;
}

/* Aspect Widget */
.stella-widget-aspect {
  background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(139,92,246,0.08));
  border-color: rgba(59,130,246,0.2);
}
.stella-aspect-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.82rem;
  color: #f1f5f9;
}
.stella-aspect-symbol {
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
  color: #a5c4f3;
  flex-shrink: 0;
}
.stella-aspect-desc {
  color: #a5b4c8;
  font-size: 0.76rem;
  margin-top: 3px;
  line-height: 1.5;
}

/* Insight Widget */
.stella-widget-insight {
  background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(20,184,166,0.08));
  border-color: rgba(16,185,129,0.2);
}
.stella-widget-insight .stella-widget-body {
  font-size: 0.88rem;
  line-height: 1.65;
  color: #a7f3d0;
}

/* ============================================
   COPY BUTTON – Sleek Action Bar
   ============================================ */
.stella-msg-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(139,92,246,0.1);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.stella-msg-bubble:hover .stella-msg-actions {
  opacity: 1;
}
/* On touch devices, always show the button */
@media (hover: none) and (pointer: coarse) {
  .stella-msg-actions {
    opacity: 1;
  }
}

.stella-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: rgba(139,92,246,0.1);
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: 8px;
  color: #a5b4c8;
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: inherit;
  letter-spacing: 0.02em;
}
.stella-copy-btn i {
  font-size: 0.68rem;
  transition: transform 0.2s ease;
}
.stella-copy-btn:hover {
  background: rgba(139,92,246,0.2);
  border-color: rgba(139,92,246,0.4);
  color: #d4bfff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(139,92,246,0.15);
}
.stella-copy-btn:hover i {
  transform: scale(1.1);
}
.stella-copy-btn:active {
  transform: scale(0.95);
}

/* Success state */
.stella-copy-btn.copied {
  background: rgba(16,185,129,0.18);
  border-color: rgba(16,185,129,0.4);
  color: #6ee7b7;
  animation: copyPulse 0.4s ease;
}
.stella-copy-btn.copied i {
  color: #34d399;
}

@keyframes copyPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ============================================
   INPUT AREA – Glassmorphism
   ============================================ */
.stella-input-area {
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
  background: rgba(8, 10, 22, 0.85);
  border-top: 1px solid rgba(139,92,246,0.2);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}

.stella-input-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: 800px;
  margin: 0 auto;
}

.stella-input-wrapper { flex: 1; position: relative; }

/* Character counter */
.stella-char-count {
  position: absolute;
  bottom: 6px;
  right: 10px;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.3);
  pointer-events: none;
  transition: color 0.2s;
  z-index: 2;
}

#stella-input {
  width: 100%;
  min-height: 44px;
  max-height: 120px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 22px;
  color: #f1f5f9;
  font-size: 0.9rem;
  font-family: inherit;
  resize: none;
  outline: none;
  transition: all 0.25s;
  line-height: 1.45;
  -webkit-appearance: none;
}
#stella-input::placeholder { color: #7a8b9e; }
#stella-input:focus {
  border-color: rgba(139,92,246,0.6);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.12), 0 0 20px rgba(139,92,246,0.1);
  background: rgba(255,255,255,0.1);
}

.stella-send-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  border: none;
  color: white;
  font-size: 0.92rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(139,92,246,0.3);
}
.stella-send-btn:hover:not(:disabled) {
  transform: scale(1.08);
  box-shadow: 0 4px 20px rgba(139,92,246,0.5);
}
.stella-send-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.stella-input-hint {
  text-align: center;
  font-size: 0.62rem;
  color: #7a8b9e;
  margin-top: 5px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   SETUP SCREEN – Centered
   ============================================ */
/* ─── Hide scrollbar globally in Stella ─── */
.stella-setup::-webkit-scrollbar,
.stella-sessions::-webkit-scrollbar,
.stella-chart-list::-webkit-scrollbar,
.stella-session-list::-webkit-scrollbar,
.stella-app::-webkit-scrollbar,
#stella-main::-webkit-scrollbar {
  display: none;
}
.stella-setup, .stella-sessions, .stella-chart-list,
.stella-session-list, .stella-app, #stella-main {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.stella-setup {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 16px;
  text-align: center;
  gap: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}
.stella-setup::before { content: ''; flex: 0.3; }
.stella-setup::after { content: ''; flex: 1; }

.stella-setup-icon {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(15, 18, 40, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
}
.stella-setup-icon::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #7c3aed, #c084fc, #f472b6, #818cf8, #7c3aed);
  animation: stellaAvatarGlow 4s linear infinite;
  z-index: 0;
  opacity: 0.7;
}
.stella-setup-icon::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(139,92,246,0.4), 0 0 80px rgba(139,92,246,0.15);
  animation: stellaAvatarPulse 2.5s ease-in-out infinite;
  z-index: 0;
}
@keyframes stellaSetupGlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes stellaAvatarGlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes stellaAvatarPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.stella-setup-icon img {
  position: relative;
  width: 88px;
  height: 88px;
  object-fit: contain;
  border-radius: 50%;
  z-index: 1;
  border: 3px solid rgba(15,10,30,0.9);
}

.stella-setup h2 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 0 30px rgba(139,92,246,0.3), 0 2px 8px rgba(0,0,0,0.5);
  margin: 0;
  letter-spacing: -0.3px;
}
.stella-setup p {
  color: rgba(165,180,200,0.9);
  max-width: 360px;
  line-height: 1.65;
  font-size: 0.9rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.stella-chart-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 440px;
}

/* ─── Premium Chart Cards ─── */
.stella-chart-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(15,18,40,0.85), rgba(20,12,45,0.75));
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(.4,0,.2,1);
  text-align: left;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 4px 20px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);
  opacity: 0;
  transform: translateY(12px);
  animation: stellaCardReveal 0.5s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay: var(--card-delay, 0s);
  overflow: hidden;
}
.stella-chart-option::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(139,92,246,0.06), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.stella-chart-option:hover::before {
  opacity: 1;
}
.stella-chart-option::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), rgba(255,255,255,0.06), rgba(255,255,255,0.03), transparent);
  pointer-events: none;
}
.stella-chart-option:hover::after {
  animation: stellaCardShimmer 0.8s ease-out forwards;
}
@keyframes stellaCardReveal {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes stellaCardShimmer {
  from { left: -100%; }
  to { left: 150%; }
}
.stella-chart-option:hover {
  background: linear-gradient(135deg, rgba(20,22,55,0.92), rgba(25,15,55,0.85));
  border-color: rgba(167,139,250,0.45);
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    0 12px 40px rgba(139,92,246,0.2),
    0 0 0 1px rgba(139,92,246,0.15),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.stella-chart-option:active {
  transform: scale(0.98);
  transition: transform 0.1s;
}

/* Zodiac icon with unique gradient */
.stella-chart-option .chart-icon {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  background: var(--zodiac-bg, linear-gradient(135deg, rgba(139,92,246,0.35), rgba(59,130,246,0.35)));
  box-shadow:
    0 4px 14px var(--zodiac-shadow, rgba(139,92,246,0.2)),
    inset 0 1px 0 rgba(255,255,255,0.1);
  transition: box-shadow 0.3s, transform 0.3s;
}
.stella-chart-option:hover .chart-icon {
  box-shadow:
    0 6px 20px var(--zodiac-shadow, rgba(139,92,246,0.3)),
    inset 0 1px 0 rgba(255,255,255,0.15);
  transform: scale(1.05);
}

.stella-chart-option .chart-info { flex: 1; min-width: 0; }
.stella-chart-option .chart-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.stella-chart-option .chart-detail {
  font-size: 0.76rem;
  color: rgba(148,163,184,0.85);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stella-chart-option .chart-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(139,92,246,0.12);
  border: 1px solid rgba(139,92,246,0.2);
  color: #a78bfa;
  font-size: 0.7rem;
  flex-shrink: 0;
  transition: all 0.3s;
}
.stella-chart-option:hover .chart-arrow {
  background: rgba(139,92,246,0.25);
  border-color: rgba(167,139,250,0.4);
  color: #c4b5fd;
  transform: translateX(2px);
  box-shadow: 0 0 12px rgba(139,92,246,0.2);
}
.stella-chart-option .chart-sessions-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 3px 12px;
  background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(244,114,182,0.12));
  border: 1px solid rgba(139,92,246,0.25);
  border-radius: 12px;
  font-size: 0.65rem;
  color: #d8b4fe;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* ============================================
   SESSION LIST – Centered
   ============================================ */
/* ═══════════════════════════════════════════════
   SESSION LIST – Premium Mystical Style
   ═══════════════════════════════════════════════ */
.stella-sessions {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  gap: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}
.stella-sessions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 4px;
}
.stella-sessions-header h3 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 0 24px rgba(139,92,246,0.25), 0 2px 6px rgba(0,0,0,0.4);
  margin: 0;
  letter-spacing: -0.2px;
}

/* ─── Premium "Neuer Chat" Button with Mystical Sparkle ─── */
.stella-new-chat-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px 11px 20px;
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 40%, #7c3aed 70%, #8b5cf6 100%);
  background-size: 200% 200%;
  animation: stellaBtnGradient 4s ease-in-out infinite;
  border: none;
  border-radius: 26px;
  color: #fff;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(.4,0,.2,1);
  box-shadow:
    0 4px 24px rgba(124,58,237,0.4),
    0 0 0 1px rgba(139,92,246,0.3),
    0 1px 0 rgba(255,255,255,0.1) inset;
  letter-spacing: 0.3px;
  overflow: hidden;
  z-index: 1;
}
/* Animated gradient background */
@keyframes stellaBtnGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
/* Outer glow ring */
.stella-new-chat-btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 28px;
  background: conic-gradient(
    from 0deg,
    rgba(139,92,246,0.6),
    rgba(244,114,182,0.4),
    rgba(129,140,248,0.5),
    rgba(139,92,246,0.6)
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 0.35s;
  animation: stellaBtnRingRotate 3s linear infinite;
}
@keyframes stellaBtnRingRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* Shimmer sweep */
.stella-new-chat-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  pointer-events: none;
  animation: stellaBtnShimmer 3.5s ease-in-out infinite;
}
@keyframes stellaBtnShimmer {
  0%, 70%, 100% { left: -100%; }
  85% { left: 150%; }
}
.stella-new-chat-btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 8px 36px rgba(124,58,237,0.5),
    0 0 0 1px rgba(167,139,250,0.5),
    0 0 40px rgba(139,92,246,0.15),
    0 1px 0 rgba(255,255,255,0.15) inset;
  filter: brightness(1.1);
}
.stella-new-chat-btn:hover::before {
  opacity: 1;
}
.stella-new-chat-btn:active {
  transform: scale(0.97);
  transition: transform 0.1s;
}
.stella-new-chat-btn i {
  font-size: 0.72rem;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.4));
}

.stella-session-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ─── Premium Session Cards ─── */
.stella-session-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(15,18,40,0.85), rgba(20,12,45,0.75));
  border: 1px solid rgba(139,92,246,0.18);
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(.4,0,.2,1);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 4px 20px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
  animation: stellaCardReveal 0.5s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay: var(--card-delay, 0s);
}
.stella-session-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(139,92,246,0.06), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.stella-session-item:hover::before {
  opacity: 1;
}
.stella-session-item:hover {
  background: linear-gradient(135deg, rgba(20,22,55,0.92), rgba(25,15,55,0.85));
  border-color: rgba(167,139,250,0.4);
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    0 12px 40px rgba(139,92,246,0.18),
    0 0 0 1px rgba(139,92,246,0.12),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.stella-session-item .session-icon {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(139,92,246,0.25), rgba(99,102,241,0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d4bfff;
  font-size: 1.15rem;
  flex-shrink: 0;
  box-shadow: 0 3px 12px rgba(139,92,246,0.15), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: all 0.3s;
}
.stella-session-item:hover .session-icon {
  transform: scale(1.05);
  box-shadow: 0 5px 18px rgba(139,92,246,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
}
.stella-session-item .session-info { flex: 1; min-width: 0; }
.stella-session-item .session-date {
  font-weight: 700;
  font-size: 0.9rem;
  color: #f1f5f9;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.stella-session-item .session-meta {
  font-size: 0.74rem;
  color: rgba(148,163,184,0.85);
  margin-top: 4px;
}
.stella-session-item .session-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ─── Elegant Delete Button ─── */
.stella-session-item .session-delete-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(148,163,184,0.6);
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
  transition: all 0.25s;
  font-size: 0.7rem;
  opacity: 0;
  transform: scale(0.9);
}
.stella-session-item:hover .session-delete-btn {
  opacity: 1;
  transform: scale(1);
}
.stella-session-item .session-delete-btn:hover {
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.3);
  color: #f87171;
  box-shadow: 0 0 12px rgba(239,68,68,0.15);
}
.stella-session-item .session-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(99,102,241,0.1));
  border: 1px solid rgba(139,92,246,0.2);
  color: #a78bfa;
  font-size: 0.65rem;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(139,92,246,0.1);
}
.stella-session-item:hover .session-arrow {
  background: linear-gradient(135deg, rgba(139,92,246,0.3), rgba(99,102,241,0.2));
  border-color: rgba(167,139,250,0.4);
  color: #c4b5fd;
  transform: translateX(3px);
  box-shadow: 0 0 16px rgba(139,92,246,0.2);
}
.stella-empty-sessions {
  text-align: center;
  padding: 48px 20px;
  color: rgba(148,163,184,0.7);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ============================================
   QUICK PROMPTS – Lebendiger, centered
   ============================================ */
.stella-quick-prompts {
  display: flex;
  gap: 8px;
  padding: 10px 16px 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
  scrollbar-width: none;
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.stella-quick-prompts::-webkit-scrollbar { display: none; }
.stella-quick-prompt {
  flex-shrink: 0;
  padding: 8px 16px;
  background: rgba(15, 18, 40, 0.75);
  border: 1px solid rgba(139,92,246,0.32);
  border-radius: 20px;
  color: #d4bfff;
  font-size: 0.76rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.stella-quick-prompt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(59,130,246,0.1));
  opacity: 0;
  transition: opacity 0.25s;
}
.stella-quick-prompt:hover {
  background: rgba(139,92,246,0.28);
  border-color: rgba(139,92,246,0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(139,92,246,0.2);
  color: #e9d5ff;
}
.stella-quick-prompt:hover::before { opacity: 1; }
.stella-quick-prompt:active { transform: scale(0.96); }

/* ============================================
   WELCOME MESSAGE – Centered, Bigger
   ============================================ */
.stella-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 20px;
  gap: 14px;
  max-width: 500px;
  margin: auto;
}
.stella-welcome-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(15, 18, 40, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 40px rgba(139,92,246,0.35);
  flex-shrink: 0;
  overflow: hidden;
}
.stella-welcome-avatar img {
  width: 90%;
  height: 90%;
  object-fit: contain;
}
.stella-welcome h3 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 1.25rem;
  color: #ffffff;
  text-shadow: 0 0 25px rgba(139,92,246,0.3);
  margin: 0;
}
.stella-welcome p {
  color: #a5b4c8;
  font-size: 0.86rem;
  max-width: 320px;
  line-height: 1.6;
}

/* ── Suggestions Grid – 2x3 on Desktop, wrap on Mobile ── */
.stella-suggestions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  max-width: 420px;
  width: 100%;
  margin-top: 4px;
}
.stella-suggestion {
  padding: 10px 14px;
  background: rgba(15, 18, 40, 0.75);
  border: 1px solid rgba(139,92,246,0.28);
  border-radius: 14px;
  font-size: 0.78rem;
  color: #d4bfff;
  cursor: pointer;
  transition: all 0.25s;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  font-weight: 500;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.stella-suggestion:hover {
  background: rgba(139,92,246,0.22);
  border-color: rgba(139,92,246,0.45);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(139,92,246,0.15);
  color: #e9d5ff;
}
.stella-suggestion:active { transform: scale(0.96); }

/* ── Daily Limit Banner (enhanced for abo upsell) ── */
.stella-limit-banner {
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(108,92,231,0.15), rgba(245,158,11,0.1));
  border: 1px solid rgba(108,92,231,0.3);
  border-radius: 16px;
  margin: 8px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.85rem;
  color: #f1f5f9;
  max-width: 800px;
  width: 100%;
  box-sizing: border-box;
}
.stella-limit-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(239,68,68,0.15));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stella-limit-icon i { color: #fbbf24; font-size: 16px; }
.stella-limit-text { flex: 1; }
.stella-limit-text strong { display: block; margin-bottom: 2px; font-size: 0.9rem; }
.stella-limit-text p { margin: 0; font-size: 0.78rem; color: rgba(255,255,255,0.6); line-height: 1.4; }
.stella-upgrade-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #6c5ce7, #a78bfa);
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.82rem;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}
.stella-upgrade-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(108,92,231,0.4);
}
.stella-limit-banner i { color: #fbbf24; }
.stella-limit-banner a {
  color: #d4bfff;
  text-decoration: underline;
  margin-left: auto;
  white-space: nowrap;
  font-weight: 600;
}

/* ── Retry Button ── */
.stella-retry-btn {
  padding: 12px 28px;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: white;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  transition: all 0.25s;
  box-shadow: 0 2px 12px rgba(139,92,246,0.3);
}
.stella-retry-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(139,92,246,0.4);
}

/* ── No Charts ── */
.stella-no-charts { text-align: center; padding: 30px 16px; }
.stella-no-charts a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: white;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  transition: all 0.25s;
  box-shadow: 0 2px 12px rgba(139,92,246,0.3);
}
.stella-no-charts a:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(139,92,246,0.4);
}

/* ============================================
   MARKDOWN IN MESSAGES – High Contrast
   ============================================ */
.stella-msg-bubble strong, .stella-msg-content strong {
  color: #e9d5ff;
  font-weight: 700;
}
.stella-msg-bubble em, .stella-msg-content em {
  color: #a5c4f3;
  font-style: italic;
}
.stella-msg-bubble code, .stella-msg-content code {
  background: rgba(139,92,246,0.15);
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.85em;
  color: #e9d5ff;
}
.stella-msg-bubble h3, .stella-msg-content h3 {
  color: #ffffff;
  margin: 10px 0 3px;
  font-size: 0.97rem;
  font-weight: 700;
}
.stella-msg-bubble h4, .stella-msg-content h4 {
  color: #e9d5ff;
  margin: 8px 0 2px;
  font-size: 0.91rem;
  font-weight: 600;
}
.stella-msg-bubble ul, .stella-msg-content ul,
.stella-msg-bubble ol, .stella-msg-content ol {
  margin: 4px 0 6px;
  padding-left: 18px;
}
.stella-msg-bubble li, .stella-msg-content li {
  margin: 2px 0;
  line-height: 1.55;
  color: #e2e8f0;
}

/* ── Back Button – always visible ── */
.stella-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #e2e8f0;
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: 50%;
  transition: all 0.2s;
  flex-shrink: 0;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}
.stella-back:hover {
  color: #e9d5ff;
  background: rgba(139,92,246,0.25);
  border-color: rgba(139,92,246,0.4);
  transform: scale(1.08);
}

/* ── Stars Background ── */
.stella-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.stella-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: twinkle 3s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.12; }
  50% { opacity: 0.65; }
}

/* ============================================
   DESKTOP ENHANCEMENTS – Centered Layout
   ============================================ */
@media (min-width: 768px) {
  .stella-header {
    padding: 14px 24px;
  }
  .stella-messages {
    padding: 24px 20px;
    max-width: 860px;
    gap: 16px;
  }
  .stella-msg {
    max-width: 72%;
  }
  .stella-input-area {
    padding: 16px 24px 18px;
  }
  .stella-input-row {
    max-width: 800px;
  }
  .stella-transit-bar {
    padding: 10px 24px;
    justify-content: center;
  }
  .stella-planets-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
  .stella-suggestions {
    grid-template-columns: repeat(3, 1fr);
    max-width: 520px;
  }
  .stella-quick-prompts {
    justify-content: center;
    flex-wrap: wrap;
    padding: 12px 24px 8px;
  }
  .stella-setup {
    max-width: 550px;
  }
  .stella-chart-list {
    max-width: 440px;
  }
}

/* Large Desktop */
@media (min-width: 1200px) {
  .stella-msg { max-width: 65%; }
  .stella-welcome { padding: 48px 24px; }
  .stella-welcome-avatar { width: 72px; height: 72px; font-size: 32px; }
  .stella-welcome h3 { font-size: 1.4rem; }
  .stella-suggestions { max-width: 560px; }
}

/* ============================================
   MOBILE DEEP OPTIMIZATION
   ============================================ */
@media (max-width: 480px) {
  .stella-msg { max-width: 92%; }
  .stella-msg-bubble { padding: 10px 14px; font-size: 0.88rem; }

  /* Planet grid: fixed 3-col */
  .stella-planets-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .stella-planet-item { padding: 4px 5px; font-size: 0.68rem; gap: 3px; }
  .stella-planet-item .p-symbol { font-size: 0.9rem; width: 15px; }
  .stella-planet-item .p-sign { font-size: 0.64rem; max-width: 48px; }
  .stella-planet-item .p-deg { font-size: 0.58rem; }

  /* Energy bars */
  .stella-energy-label { width: 62px; font-size: 0.68rem; }
  .stella-energy-val { font-size: 0.68rem; width: 28px; }

  /* Welcome */
  .stella-welcome { padding: 20px 14px; gap: 12px; }
  .stella-welcome-avatar { width: 52px; height: 52px; font-size: 24px; }
  .stella-welcome h3 { font-size: 1.1rem; }

  /* Suggestions */
  .stella-suggestions {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .stella-suggestion { padding: 8px 10px; font-size: 0.72rem; }

  /* Setup */
  .stella-setup-icon { width: 66px; height: 66px; }
  .stella-setup-icon img { width: 66px; height: 66px; }
  .stella-setup h2 { font-size: 1.2rem; }
  .stella-chart-list { max-width: 100%; }
  .stella-chart-option { padding: 14px 14px; gap: 12px; }
  .stella-chart-option .chart-icon { width: 42px; height: 42px; font-size: 1.05rem; }
  .stella-chart-option .chart-name { font-size: 0.88rem; }
  .stella-chart-option .chart-detail { font-size: 0.7rem; }
  .stella-chart-option .chart-arrow { width: 28px; height: 28px; }
  .stella-session-item { padding: 14px 14px; gap: 12px; }
  .stella-session-item .session-icon { width: 42px; height: 42px; }
  .stella-session-item .session-delete-btn { opacity: 0.6; transform: scale(1); }
  .stella-new-chat-btn { padding: 9px 18px; font-size: 0.78rem; }
  .stella-new-chat-btn::before { display: none; }
  .stella-new-chat-btn::after { animation: none; }

  /* Quick prompts – horizontal scroll on small screens */
  .stella-quick-prompts {
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 8px 12px 4px;
    gap: 6px;
  }
  .stella-quick-prompt { padding: 7px 13px; font-size: 0.72rem; }

  /* Transit bar compact */
  .stella-transit-bar { padding: 6px 10px; gap: 5px; }
  .stella-transit-pill { padding: 3px 7px; font-size: 0.62rem; gap: 3px; }
  .stella-transit-pill .symbol { font-size: 0.78rem; }
}

/* ============================================
   NAVIGATION: Stella link for logged-in users
   ============================================ */
.nav-stella-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #d4bfff !important;
  font-weight: 500;
}
.nav-stella-link:hover { color: #a78bfa !important; }
.nav-stella-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: linear-gradient(135deg, #8b5cf6, #3b82f6);
  border-radius: 50%;
  animation: stellaDot 2s ease-in-out infinite;
}
@keyframes stellaDot {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; box-shadow: 0 0 8px rgba(139,92,246,0.6); }
}

/* ============================================
   MOBILE KEYBOARD STABILITY
   ============================================ */
@supports (padding: max(0px)) {
  .stella-input-area {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}

/* Touch optimizations */
@media (hover: none) and (pointer: coarse) {
  .stella-suggestion, .stella-chart-option, .stella-send-btn,
  .stella-quick-prompt, .stella-session-item, .stella-new-chat-btn {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .stella-header, .stella-transit-bar, .stella-input-area {
    -webkit-user-select: none;
    user-select: none;
  }

  .stella-msg-bubble, .stella-msg-content {
    -webkit-user-select: text;
    user-select: text;
  }

  /* Prevent iOS auto-zoom (font-size >= 16px) */
  #stella-input {
    font-size: 16px;
  }
}

/* ============================================
   FLOATING PARTICLES (cosmetic life)
   ============================================ */
@keyframes floatUp {
  0% { transform: translateY(100vh) scale(0); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

/* ─── Accessibility: Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
  .stella-new-chat-btn,
  .stella-new-chat-btn::before,
  .stella-new-chat-btn::after,
  .stella-chart-option,
  .stella-session-item,
  .stella-setup-icon::before,
  .stella-setup-icon::after,
  .kv-orb, .kv-ring, .kv-particle {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════
   KYBELE IMMERSIVE VOICE MODE – Oracle of Delphi × Cosmos
   Mystical, warm, psychologically comforting
   ═══════════════════════════════════════════════════════ */
.kv-immersive {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  font-family: var(--font-display, 'Playfair Display', serif);
}
.kv-immersive.active {
  opacity: 1;
  pointer-events: all;
}

/* ── Deep Cosmic Background with warm undertones ── */
.kv-immersive-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(88,28,100,0.35) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 25% 70%, rgba(45,20,80,0.25) 0%, transparent 55%),
    radial-gradient(ellipse 45% 50% at 75% 25%, rgba(60,25,90,0.2) 0%, transparent 55%),
    radial-gradient(ellipse 80% 80% at 50% 100%, rgba(80,40,30,0.12) 0%, transparent 50%),
    #030612;
  z-index: 0;
  animation: cosmicBreathe 12s ease-in-out infinite;
}
@keyframes cosmicBreathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.06); }
}

/* Stars canvas */
.kv-stars-canvas {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
}

/* ── Nebula clouds (warm, mystical, slowly drifting) ── */
.kv-nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0;
  z-index: 1;
  transition: opacity 2s ease;
}
.kv-immersive.active .kv-nebula { opacity: 1; }

.kv-nebula-1 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(168,85,200,0.4), rgba(120,50,160,0.1), transparent);
  top: 8%; left: 5%;
  animation: nebulaFloat1 18s ease-in-out infinite;
}
.kv-nebula-2 {
  width: 280px; height: 300px;
  background: radial-gradient(circle, rgba(200,120,80,0.25), rgba(180,80,40,0.08), transparent);
  bottom: 15%; right: 0%;
  animation: nebulaFloat2 22s ease-in-out infinite;
}
.kv-nebula-3 {
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(80,100,200,0.3), rgba(60,70,180,0.08), transparent);
  top: 55%; left: 55%;
  transform: translate(-50%, -50%);
  animation: nebulaFloat3 15s ease-in-out infinite;
}

@keyframes nebulaFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.28; }
  33% { transform: translate(30px, -20px) scale(1.15); opacity: 0.38; }
  66% { transform: translate(-20px, 15px) scale(0.92); opacity: 0.22; }
}
@keyframes nebulaFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.22; }
  40% { transform: translate(-25px, -10px) scale(1.08); opacity: 0.32; }
  70% { transform: translate(15px, 20px) scale(0.95); opacity: 0.18; }
}
@keyframes nebulaFloat3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.25; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.35; }
}

/* ── Sacred Geometry / Constellation Lines ── */
.kv-sacred-geometry {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 320px; height: 320px;
  z-index: 2;
  opacity: 0;
  transition: opacity 1.5s ease 0.5s;
  pointer-events: none;
}
.kv-immersive.active .kv-sacred-geometry { opacity: 0.06; }
.kv-sacred-geometry svg {
  width: 100%; height: 100%;
  animation: sacredRotate 120s linear infinite;
}
@keyframes sacredRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Center Orb (immersive – larger, more dramatic) ── */
.kv-immersive-orb-wrap {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
}

.kv-immersive-orb {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background:
    radial-gradient(circle at 32% 30%,
      rgba(255,255,255,0.15) 0%,
      transparent 50%),
    radial-gradient(circle at 50% 50%,
      rgba(168,85,247,0.95) 0%,
      rgba(139,92,246,0.7) 25%,
      rgba(99,102,241,0.5) 50%,
      rgba(79,70,229,0.3) 75%,
      rgba(55,48,163,0.1) 100%
    );
  box-shadow:
    0 0 60px rgba(139,92,246,0.5),
    0 0 120px rgba(139,92,246,0.2),
    0 0 200px rgba(139,92,246,0.08),
    inset 0 -8px 20px rgba(0,0,0,0.35),
    inset 0 4px 10px rgba(255,255,255,0.12);
  animation: orbIdle 4s ease-in-out infinite;
}
@keyframes orbIdle {
  0%, 100% { transform: scale(1); box-shadow: 0 0 60px rgba(139,92,246,0.5), 0 0 120px rgba(139,92,246,0.2), 0 0 200px rgba(139,92,246,0.08), inset 0 -8px 20px rgba(0,0,0,0.35), inset 0 4px 10px rgba(255,255,255,0.12); }
  50% { transform: scale(1.03); box-shadow: 0 0 70px rgba(139,92,246,0.6), 0 0 140px rgba(139,92,246,0.25), 0 0 220px rgba(139,92,246,0.1), inset 0 -8px 20px rgba(0,0,0,0.35), inset 0 4px 10px rgba(255,255,255,0.12); }
}
.kv-immersive-orb i {
  font-size: 2.5rem;
  color: #fff;
  filter: drop-shadow(0 0 16px rgba(255,255,255,0.6));
  transition: all 0.4s;
}
.kv-immersive-orb:hover {
  transform: scale(1.12) !important;
  box-shadow:
    0 0 80px rgba(139,92,246,0.7),
    0 0 160px rgba(139,92,246,0.3),
    0 0 240px rgba(139,92,246,0.12);
}
.kv-immersive-orb:active { transform: scale(0.95) !important; }

/* ── Orb States ── */
.kv-immersive-orb.listening {
  background:
    radial-gradient(circle at 32% 30%, rgba(255,255,255,0.12) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%,
      rgba(251,191,36,0.95) 0%, rgba(251,146,60,0.8) 25%,
      rgba(249,115,22,0.6) 50%, rgba(234,88,12,0.3) 75%,
      rgba(194,65,12,0.1) 100%);
  box-shadow:
    0 0 70px rgba(251,146,60,0.6),
    0 0 140px rgba(249,115,22,0.25),
    0 0 200px rgba(234,88,12,0.08);
  animation: immOrbListening 1.6s ease-in-out infinite;
}
@keyframes immOrbListening {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.08); }
  60% { transform: scale(1.02); }
}

.kv-immersive-orb.speaking {
  background:
    radial-gradient(circle at 32% 30%, rgba(255,255,255,0.12) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%,
      rgba(110,231,183,0.95) 0%, rgba(52,211,153,0.8) 25%,
      rgba(16,185,129,0.6) 50%, rgba(5,150,105,0.3) 75%,
      rgba(4,120,87,0.1) 100%);
  box-shadow:
    0 0 70px rgba(52,211,153,0.5),
    0 0 140px rgba(16,185,129,0.25),
    0 0 200px rgba(5,150,105,0.08);
  animation: immOrbSpeaking 1.3s ease-in-out infinite;
}
@keyframes immOrbSpeaking {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.06); }
  75% { transform: scale(1.03); }
}

.kv-immersive-orb.processing {
  animation: immOrbProcessing 2.5s ease-in-out infinite;
}
@keyframes immOrbProcessing {
  0%, 100% {
    box-shadow: 0 0 60px rgba(139,92,246,0.5), 0 0 120px rgba(139,92,246,0.2);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 90px rgba(168,85,247,0.7), 0 0 180px rgba(139,92,246,0.35);
    transform: scale(1.05);
  }
}

/* ── Ethereal Rings (3 layers with sacred feel) ── */
.kv-immersive-orb-wrap .kv-imm-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(139,92,246,0.12);
  pointer-events: none;
}
.kv-imm-ring-1 {
  width: 150px; height: 150px;
  animation: immRing1 4s ease-in-out infinite;
  border-color: rgba(168,85,247,0.15);
}
.kv-imm-ring-2 {
  width: 172px; height: 172px;
  animation: immRing2 5s ease-in-out infinite;
  border-color: rgba(139,92,246,0.1);
}
.kv-imm-ring-3 {
  width: 195px; height: 195px;
  animation: immRing3 6s ease-in-out infinite;
  border-color: rgba(99,102,241,0.07);
}
@keyframes immRing1 {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.06); opacity: 0.7; }
}
@keyframes immRing2 {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.3; }
  50% { transform: scale(1.08) rotate(3deg); opacity: 0.55; }
}
@keyframes immRing3 {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.2; }
  50% { transform: scale(1.05) rotate(-2deg); opacity: 0.4; }
}

/* State-dependent ring colors */
.kv-immersive-orb.listening ~ .kv-imm-ring { border-color: rgba(251,191,36,0.2); }
.kv-immersive-orb.speaking ~ .kv-imm-ring { border-color: rgba(110,231,183,0.2); }
.kv-immersive-orb.processing ~ .kv-imm-ring { border-color: rgba(167,139,250,0.2); }

/* ── Floating transcript text area ── */
.kv-immersive-transcript {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 88%;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
}
.kv-imm-user-text {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
  font-style: italic;
  font-family: 'Inter', sans-serif;
  max-width: 320px;
  line-height: 1.5;
  transition: all 0.5s;
  min-height: 20px;
}
.kv-imm-kybele-text {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 1.1rem;
  color: #e8dff5;
  line-height: 1.8;
  letter-spacing: 0.02em;
  max-width: 440px;
  text-shadow: 0 0 40px rgba(168,85,247,0.15);
  transition: all 0.5s;
  max-height: 180px;
  overflow-y: auto;
  scrollbar-width: none;
  word-wrap: break-word;
}
.kv-imm-kybele-text::-webkit-scrollbar { display: none; }

.kv-imm-status {
  font-size: 0.72rem;
  font-family: 'Inter', sans-serif;
  color: rgba(165,180,200,0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-height: 18px;
  transition: all 0.4s;
}
.kv-imm-status.listening { color: rgba(251,191,36,0.8); text-shadow: 0 0 12px rgba(251,191,36,0.3); }
.kv-imm-status.speaking { color: rgba(110,231,183,0.8); text-shadow: 0 0 12px rgba(110,231,183,0.3); }
.kv-imm-status.processing { color: rgba(167,139,250,0.8); text-shadow: 0 0 12px rgba(167,139,250,0.3); }

/* ── Immersive waveform (wider, more bars) ── */
.kv-imm-waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 36px;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.4s;
  margin-bottom: 6px;
}
.kv-imm-waveform.active { opacity: 1; }
.kv-imm-waveform-bar {
  width: 2px;
  height: 4px;
  border-radius: 1.5px;
  background: rgba(139,92,246,0.5);
  transition: height 0.06s ease, background 0.3s;
}
.kv-imm-waveform.listening .kv-imm-waveform-bar { background: rgba(251,191,36,0.6); }
.kv-imm-waveform.speaking .kv-imm-waveform-bar { background: rgba(110,231,183,0.6); }

/* ── Bottom Controls Bar ── */
.kv-immersive-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
  display: flex;
  justify-content: center;
  gap: 18px;
  z-index: 20;
  background: linear-gradient(to top, rgba(3,6,18,0.8) 0%, rgba(3,6,18,0.4) 50%, transparent 100%);
}
.kv-imm-ctrl {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #a5b4c8;
  font-size: 0.88rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.kv-imm-ctrl:hover {
  background: rgba(139,92,246,0.2);
  border-color: rgba(139,92,246,0.4);
  color: #d4bfff;
  transform: scale(1.08);
}
.kv-imm-ctrl:active { transform: scale(0.94); }
.kv-imm-ctrl.end-call {
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.35);
  color: #fca5a5;
  width: 54px;
  height: 54px;
  font-size: 1.05rem;
}
.kv-imm-ctrl.end-call:hover {
  background: rgba(239,68,68,0.35);
  border-color: rgba(239,68,68,0.6);
  box-shadow: 0 0 20px rgba(239,68,68,0.2);
}

/* ── Header in immersive ── */
.kv-immersive-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 16px 20px;
  padding-top: max(16px, env(safe-area-inset-top, 16px));
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 20;
  background: linear-gradient(to bottom, rgba(3,6,18,0.7) 0%, transparent 100%);
}
.kv-immersive-header img {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 16px rgba(139,92,246,0.35);
}
.kv-immersive-header span {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 0.95rem;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.05em;
}

/* ── Oracle flame glow (warm ambient behind orb) ── */
.kv-oracle-glow {
  position: absolute;
  width: 300px; height: 300px;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(200,120,60,0.08) 0%,
    rgba(160,80,40,0.04) 40%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  animation: oracleGlow 8s ease-in-out infinite;
}
@keyframes oracleGlow {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -55%) scale(1); }
  50% { opacity: 0.8; transform: translate(-50%, -55%) scale(1.1); }
}

/* Listening state: warm golden glow */
.kv-immersive-orb-wrap:has(.kv-immersive-orb.listening) .kv-oracle-glow {
  background: radial-gradient(circle, rgba(251,191,36,0.12) 0%, rgba(249,115,22,0.05) 40%, transparent 70%) !important;
}
/* Speaking state: emerald glow */
.kv-immersive-orb-wrap:has(.kv-immersive-orb.speaking) .kv-oracle-glow {
  background: radial-gradient(circle, rgba(110,231,183,0.1) 0%, rgba(52,211,153,0.04) 40%, transparent 70%) !important;
}

/* ── Floating motes of light (firefly-like particles) ── */
.kv-mote {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(200,185,255,0.6);
  z-index: 3;
  pointer-events: none;
  filter: blur(0.5px);
}
.kv-mote:nth-child(1) { top: 25%; left: 15%; animation: moteFloat 12s ease-in-out infinite; }
.kv-mote:nth-child(2) { top: 60%; right: 10%; animation: moteFloat 15s ease-in-out infinite 3s; }
.kv-mote:nth-child(3) { top: 40%; left: 70%; animation: moteFloat 10s ease-in-out infinite 6s; }
.kv-mote:nth-child(4) { bottom: 30%; left: 20%; animation: moteFloat 14s ease-in-out infinite 2s; }
.kv-mote:nth-child(5) { top: 15%; right: 25%; animation: moteFloat 11s ease-in-out infinite 8s; }
.kv-mote:nth-child(6) { bottom: 20%; right: 30%; animation: moteFloat 13s ease-in-out infinite 4s; }
@keyframes moteFloat {
  0%, 100% { transform: translate(0, 0) scale(0.8); opacity: 0.2; }
  25% { transform: translate(15px, -20px) scale(1.3); opacity: 0.7; }
  50% { transform: translate(-10px, -35px) scale(0.6); opacity: 0.3; }
  75% { transform: translate(20px, -10px) scale(1.1); opacity: 0.6; }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .kv-immersive * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.2s !important;
  }
  .kv-nebula { opacity: 0.15 !important; }
}

/* ── Mobile immersive adjustments ── */
@media (max-width: 480px) {
  .kv-immersive-orb-wrap { width: 170px; height: 170px; }
  .kv-immersive-orb { width: 100px; height: 100px; }
  .kv-immersive-orb i { font-size: 2rem; }
  .kv-imm-ring-1 { width: 130px; height: 130px; }
  .kv-imm-ring-2 { width: 148px; height: 148px; }
  .kv-imm-ring-3 { width: 166px; height: 166px; }
  .kv-imm-kybele-text { font-size: 1rem; max-width: 300px; }
  .kv-imm-user-text { font-size: 0.8rem; }
  .kv-sacred-geometry { width: 260px; height: 260px; }
  .kv-oracle-glow { width: 240px; height: 240px; }
}

/* ── Mode Toggle Button (Text ↔ Voice) ── */
.kv-mode-toggle {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(139,92,246,0.12);
  border: 1px solid rgba(139,92,246,0.25);
  border-radius: 22px;
  padding: 3px;
  flex-shrink: 0;
}
.kv-mode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #8899bb;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.kv-mode-btn.active {
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  color: #fff;
  box-shadow: 0 0 16px rgba(139,92,246,0.45), 0 0 4px rgba(168,85,247,0.3);
}
.kv-mode-btn:not(.active):hover {
  background: rgba(139,92,246,0.15);
  color: #c4b5fd;
}

/* ── Voice Input Area (replaces text input in voice mode) ── */

/* Gender Selection Toggle */
.kv-gender-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(139,92,246,0.08);
  border: 1px solid rgba(139,92,246,0.18);
  border-radius: 18px;
  padding: 2px;
  flex-shrink: 0;
  margin-left: 2px;
}
.kv-gender-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #8899bb;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.kv-gender-btn.active[data-gender="female"] {
  background: linear-gradient(135deg, #ec4899, #f472b6);
  color: #fff;
  box-shadow: 0 0 12px rgba(236,72,153,0.4), 0 0 3px rgba(244,114,182,0.25);
}
.kv-gender-btn.active[data-gender="male"] {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  color: #fff;
  box-shadow: 0 0 12px rgba(59,130,246,0.4), 0 0 3px rgba(96,165,250,0.25);
}
.kv-gender-btn:not(.active):hover {
  background: rgba(139,92,246,0.12);
  color: #c4b5fd;
}

.kv-voice-area {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
  background: rgba(8, 10, 22, 0.92);
  border-top: 1px solid rgba(139,92,246,0.15);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  flex-shrink: 0;
  position: relative;
  z-index: 5;
  overflow: hidden;
}
.kv-voice-area.active {
  display: flex;
}
.kv-voice-area::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168,85,247,0.5), rgba(139,92,246,0.5), transparent);
}

/* ── The Mystical Orb (center voice button) ── */
.kv-orb-container {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0 12px;
}

.kv-orb {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    rgba(168,85,247,0.9) 0%,
    rgba(139,92,246,0.7) 30%,
    rgba(99,102,241,0.5) 60%,
    rgba(79,70,229,0.3) 100%
  );
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 0 30px rgba(139,92,246,0.4),
    0 0 60px rgba(139,92,246,0.15),
    inset 0 -4px 12px rgba(0,0,0,0.3),
    inset 0 2px 6px rgba(255,255,255,0.15);
}
.kv-orb:hover {
  transform: scale(1.06);
  box-shadow:
    0 0 40px rgba(139,92,246,0.55),
    0 0 80px rgba(139,92,246,0.2),
    inset 0 -4px 12px rgba(0,0,0,0.3),
    inset 0 2px 6px rgba(255,255,255,0.2);
}
.kv-orb:active {
  transform: scale(0.95);
}
.kv-orb i {
  font-size: 1.6rem;
  color: #fff;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.4));
  transition: all 0.3s;
}

/* Orb states */
.kv-orb.listening {
  background: radial-gradient(circle at 35% 35%,
    rgba(251,146,60,0.9) 0%,
    rgba(249,115,22,0.7) 30%,
    rgba(234,88,12,0.5) 60%,
    rgba(194,65,12,0.3) 100%
  );
  box-shadow:
    0 0 40px rgba(249,115,22,0.5),
    0 0 80px rgba(251,146,60,0.2),
    inset 0 -4px 12px rgba(0,0,0,0.3),
    inset 0 2px 6px rgba(255,255,255,0.2);
  animation: orbPulseListening 1.8s ease-in-out infinite;
}
.kv-orb.speaking {
  background: radial-gradient(circle at 35% 35%,
    rgba(52,211,153,0.9) 0%,
    rgba(16,185,129,0.7) 30%,
    rgba(5,150,105,0.5) 60%,
    rgba(4,120,87,0.3) 100%
  );
  box-shadow:
    0 0 40px rgba(16,185,129,0.5),
    0 0 80px rgba(52,211,153,0.2),
    inset 0 -4px 12px rgba(0,0,0,0.3),
    inset 0 2px 6px rgba(255,255,255,0.2);
  animation: orbPulseSpeaking 1.2s ease-in-out infinite;
}
.kv-orb.processing {
  animation: orbSpin 2s linear infinite;
  opacity: 0.8;
}

/* Glowing rings around the orb */
.kv-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(139,92,246,0.2);
  pointer-events: none;
  z-index: 1;
}
.kv-ring-1 {
  width: 100px;
  height: 100px;
  top: 10px;
  left: 10px;
  animation: ringPulse 3s ease-in-out infinite;
}
.kv-ring-2 {
  width: 115px;
  height: 115px;
  top: 2.5px;
  left: 2.5px;
  animation: ringPulse 3s ease-in-out infinite 0.5s;
  border-color: rgba(168,85,247,0.12);
}

/* Floating particles around orb */
.kv-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(196,181,253,0.6);
  pointer-events: none;
  z-index: 2;
}
.kv-particle:nth-child(1) { animation: particleOrbit 4s linear infinite; top: 0; left: 50%; }
.kv-particle:nth-child(2) { animation: particleOrbit 5s linear infinite reverse; top: 50%; right: 0; }
.kv-particle:nth-child(3) { animation: particleOrbit 6s linear infinite 1s; bottom: 0; left: 30%; }
.kv-particle:nth-child(4) { animation: particleOrbit 4.5s linear infinite 2s reverse; top: 30%; left: 0; }

/* Orb animations */
@keyframes orbPulseListening {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes orbPulseSpeaking {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes orbSpin {
  0% { box-shadow: 0 0 30px rgba(139,92,246,0.4), 0 0 60px rgba(139,92,246,0.15); }
  50% { box-shadow: 0 0 50px rgba(168,85,247,0.6), 0 0 90px rgba(139,92,246,0.25); }
  100% { box-shadow: 0 0 30px rgba(139,92,246,0.4), 0 0 60px rgba(139,92,246,0.15); }
}
@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 0.3; border-color: rgba(139,92,246,0.2); }
  50% { transform: scale(1.08); opacity: 0.6; border-color: rgba(168,85,247,0.35); }
}
@keyframes particleOrbit {
  0% { transform: rotate(0deg) translateX(55px) rotate(0deg) scale(0.8); opacity: 0.3; }
  25% { opacity: 0.8; transform: rotate(90deg) translateX(55px) rotate(-90deg) scale(1.2); }
  50% { opacity: 0.4; transform: rotate(180deg) translateX(55px) rotate(-180deg) scale(0.6); }
  75% { opacity: 0.9; transform: rotate(270deg) translateX(55px) rotate(-270deg) scale(1); }
  100% { transform: rotate(360deg) translateX(55px) rotate(-360deg) scale(0.8); opacity: 0.3; }
}

/* Listening rings animation */
.kv-orb.listening ~ .kv-ring {
  border-color: rgba(251,146,60,0.25);
}
.kv-orb.speaking ~ .kv-ring {
  border-color: rgba(52,211,153,0.25);
}

/* ── Voice Status Text ── */
.kv-voice-status {
  font-size: 0.78rem;
  color: #a5b4c8;
  text-align: center;
  min-height: 20px;
  transition: all 0.3s;
  letter-spacing: 0.04em;
}
.kv-voice-status.listening {
  color: #fb923c;
  text-shadow: 0 0 12px rgba(251,146,60,0.3);
}
.kv-voice-status.speaking {
  color: #34d399;
  text-shadow: 0 0 12px rgba(52,211,153,0.3);
}
.kv-voice-status.processing {
  color: #a78bfa;
  text-shadow: 0 0 12px rgba(167,139,250,0.3);
}

/* ── Audio Waveform Visualizer ── */
.kv-waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5px;
  height: 28px;
  margin: 6px 0;
  opacity: 0;
  transition: opacity 0.3s;
}
.kv-waveform.active {
  opacity: 1;
}
.kv-waveform-bar {
  width: 3px;
  height: 4px;
  border-radius: 2px;
  background: rgba(139,92,246,0.6);
  transition: height 0.08s ease, background 0.3s;
}
.kv-waveform.listening .kv-waveform-bar {
  background: rgba(251,146,60,0.7);
}
.kv-waveform.speaking .kv-waveform-bar {
  background: rgba(52,211,153,0.7);
}

/* ── Play Button on Messages ── */
.kv-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: rgba(139,92,246,0.1);
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: 8px;
  color: #a5b4c8;
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: inherit;
  letter-spacing: 0.02em;
}
.kv-play-btn i {
  font-size: 0.68rem;
  transition: transform 0.2s ease;
}
.kv-play-btn:hover {
  background: rgba(139,92,246,0.2);
  border-color: rgba(139,92,246,0.4);
  color: #d4bfff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(139,92,246,0.15);
}
.kv-play-btn.playing {
  background: rgba(52,211,153,0.15);
  border-color: rgba(52,211,153,0.35);
  color: #6ee7b7;
}
.kv-play-btn.playing i {
  animation: speakerPulse 1s ease-in-out infinite;
}
.kv-play-btn.loading {
  opacity: 0.6;
  pointer-events: none;
}
.kv-play-btn.loading i {
  animation: spin 1s linear infinite;
}
@keyframes speakerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Voice Mode Transition Overlay ── */
.kv-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center,
    rgba(139,92,246,0.15) 0%,
    rgba(8,10,22,0.95) 100%
  );
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.kv-transition-overlay.active {
  opacity: 1;
  pointer-events: all;
}
.kv-transition-content {
  text-align: center;
  animation: transitionFadeIn 0.6s ease 0.2s both;
}
.kv-transition-content i {
  font-size: 2.5rem;
  color: #a78bfa;
  margin-bottom: 16px;
  display: block;
  filter: drop-shadow(0 0 20px rgba(167,139,250,0.5));
}
.kv-transition-content p {
  color: #c4b5fd;
  font-size: 0.9rem;
  font-family: var(--font-display, 'Playfair Display', serif);
  letter-spacing: 0.08em;
}
@keyframes transitionFadeIn {
  from { opacity: 0; transform: translateY(12px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Voice Mode: Input area hidden ── */
.stella-app.voice-mode .stella-input-area {
  display: none;
}
.stella-app.voice-mode .kv-voice-area {
  display: flex;
}

/* ── Ambient background glow in voice mode ── */
.stella-app.voice-mode::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 280px;
  background: radial-gradient(ellipse 80% 100% at 50% 100%,
    rgba(139,92,246,0.08) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
  animation: ambientGlow 6s ease-in-out infinite;
}
@keyframes ambientGlow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ── Voice mode message styling (slightly adjusted) ── */
.stella-app.voice-mode .stella-msg.user .stella-msg-bubble {
  background: linear-gradient(135deg, rgba(251,146,60,0.2), rgba(249,115,22,0.15));
  border: 1px solid rgba(251,146,60,0.3);
  color: #fed7aa;
}

/* ── Quick action buttons in voice mode ── */
.kv-voice-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.kv-voice-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #8899bb;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.25s;
}
.kv-voice-action:hover {
  background: rgba(139,92,246,0.2);
  border-color: rgba(139,92,246,0.4);
  color: #c4b5fd;
}
.kv-voice-action.stop {
  border-color: rgba(239,68,68,0.3);
  color: #fca5a5;
}
.kv-voice-action.stop:hover {
  background: rgba(239,68,68,0.2);
  border-color: rgba(239,68,68,0.5);
}

/* ── Mobile refinements ── */
@media (max-width: 480px) {
  .kv-orb-container {
    width: 100px;
    height: 100px;
    margin: 4px 0 8px;
  }
  .kv-orb {
    width: 68px;
    height: 68px;
  }
  .kv-orb i { font-size: 1.35rem; }
  .kv-ring-1 { width: 84px; height: 84px; top: 8px; left: 8px; }
  .kv-ring-2 { width: 96px; height: 96px; top: 2px; left: 2px; }
  .kv-voice-area {
    padding: 14px 12px;
  }
}