/* ===== MAIN STAGE ===== */
.main-stage {
  position: relative;
  height: 100%; width: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
}

/* ===== PARTICLES ===== */
#particles-canvas {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}

/* ===== MAIN HUB (zones arc + center) ===== */
.hub-layout {
  position: relative; z-index: 2;
  width: 90vw; height: 80vh;
  max-width: 1000px; max-height: 560px;
  flex-shrink: 0;
}

/* ===== ZONE CIRCLES — ARC AROUND CENTER ===== */
.zone-circle-wrapper {
  position: absolute;
  display: flex; flex-direction: column;
  align-items: center; gap: 0;
  cursor: pointer;
  transition: transform 0.4s ease, filter 0.4s ease;
  transform: scale(0.88);
  filter: blur(0.3px);
}
.zone-circle-wrapper:hover {
  transform: scale(1.0) translateY(-4px);
  filter: blur(0px);
}
.zone-circle {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--glass-bg);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-02);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
}
.zone-circle {
  opacity: 0.85;
}
.zone-circle:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(0,56,36,0.15);
  border-color: var(--brand-01);
  background: rgba(255,255,255,0.95);
  opacity: 1;
}
.zone-circle .zone-icon {
  width: 24px; height: 24px;
  color: var(--brand-01);
  transition: transform 0.3s;
}
.zone-circle:hover .zone-icon { transform: scale(1.1); }
.zone-circle-label {
  font-size: 10px;
  text-align: center;
  margin-top: 6px;
  color: var(--content-02);
  line-height: 1.3;
  font-weight: 500;
  max-width: 80px;
}
.zone-circle.pulse { animation: zone-pulse 1.5s ease-in-out infinite; }

/* Arc positions — 8 circles in a wide arc spanning top and sides only
   Think of positions on a clock: 10, 11, 12, 1, 2 across the top,
   plus 9 and 3 on the sides, and one at 8 o'clock */

/* 1: 10:30 position — top-left area */
.zone-circle-wrapper:nth-child(1) { left: 4%; top: 6%; }
/* 2: 11 o'clock */
.zone-circle-wrapper:nth-child(2) { left: 18%; top: -6%; }
/* 3: 11:30 */
.zone-circle-wrapper:nth-child(3) { left: 35%; top: -10%; }
/* 4: 12:30 */
.zone-circle-wrapper:nth-child(4) { right: 35%; top: -10%; }
/* 5: 1 o'clock */
.zone-circle-wrapper:nth-child(5) { right: 18%; top: -6%; }
/* 6: 1:30 — top-right */
.zone-circle-wrapper:nth-child(6) { right: 4%; top: 6%; }
/* 7: 3 o'clock — right side */
.zone-circle-wrapper:nth-child(7) { right: 0; top: 36%; }
/* 8: 9 o'clock — left side */
.zone-circle-wrapper:nth-child(8) { left: 0; top: 36%; }

/* Staggered entrance animation */
.zone-circle-wrapper { animation: zoneAppear 0.6s ease-out both; }
.zone-circle-wrapper:nth-child(1) { animation-delay: 0.05s; }
.zone-circle-wrapper:nth-child(2) { animation-delay: 0.1s; }
.zone-circle-wrapper:nth-child(3) { animation-delay: 0.15s; }
.zone-circle-wrapper:nth-child(4) { animation-delay: 0.2s; }
.zone-circle-wrapper:nth-child(5) { animation-delay: 0.25s; }
.zone-circle-wrapper:nth-child(6) { animation-delay: 0.3s; }
.zone-circle-wrapper:nth-child(7) { animation-delay: 0.35s; }
.zone-circle-wrapper:nth-child(8) { animation-delay: 0.4s; }

/* ===== CONCIERGE CENTER (avatar + mic + chat + intro + alerts) ===== */
.concierge-center {
  position: absolute; z-index: 3;
  top: 52%; left: 50%;
  transform: translate(-50%, -45%);
  display: flex; flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 500px;
}
.center-row {
  display: flex; align-items: center; gap: 16px;
}

/* ===== AVATAR AREA ===== */
.avatar-area {
  display: flex; flex-direction: column;
  align-items: center;
}
.avatar-wrapper {
  position: relative;
  width: 100px; height: 100px;
  animation: breathe 4s ease-in-out infinite;
  filter: drop-shadow(0 8px 24px rgba(0,56,36,0.18));
}
.avatar-wrapper::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 118px; height: 118px; border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(0,56,36,0.2);
  animation: pulse-ring 4s ease-in-out infinite;
}
.avatar-wrapper::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 134px; height: 134px; border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(0,56,36,0.1);
  animation: pulse-ring 4s ease-in-out infinite 0.5s;
}
.avatar-wrapper svg { width: 100px; height: 100px; }
.avatar-name {
  margin-top: 8px;
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 600;
  color: var(--brand-01); letter-spacing: 0.1em;
}
.avatar-subtitle {
  font-size: 11px; color: var(--content-02);
  margin-top: 2px; letter-spacing: 0.04em;
}

/* ===== VOICE BUTTON (mic) ===== */
.voice-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand-01); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative; transition: all 0.3s;
  box-shadow: 0 4px 20px rgba(0,56,36,0.3);
  flex-shrink: 0;
}
.voice-btn:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(0,56,36,0.4); }
.voice-btn svg { width: 18px; height: 18px; color: white; }
.voice-btn .ring {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--brand-01); opacity: 0;
}
.voice-btn.listening .ring { animation: voice-ring 1.5s ease-out infinite; }
.voice-btn.listening .ring:nth-child(2) { animation-delay: 0.3s; }
.voice-btn.listening .ring:nth-child(3) { animation-delay: 0.6s; }
.voice-btn.listening { background: var(--positive-01); box-shadow: 0 4px 20px rgba(2,120,57,0.4); }

/* ===== CHAT INPUT ===== */
.chat-input-container { display: flex; align-items: center; }
.chat-input {
  width: 280px;
  padding: 11px 16px;
  border-radius: 24px;
  border: 1px solid var(--border-02);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  color: var(--content-01);
  background: var(--bg-l1);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.chat-input:focus {
  border-color: var(--brand-01);
  box-shadow: 0 0 0 3px rgba(0,56,36,0.08);
}
.chat-input::placeholder { color: var(--content-04); }
/* Typing animation glow */
.chat-input.typing {
  border-color: var(--positive-01);
  box-shadow: 0 0 0 3px rgba(2,120,57,0.12);
}

/* ===== CALCULATOR LINK ===== */
.calc-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500;
  color: var(--brand-01);
  cursor: pointer;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  transition: all 0.2s;
  text-decoration: none;
  opacity: 0.7;
}
.calc-link:hover { opacity: 1; background: rgba(0,56,36,0.06); }

/* ===== CONCIERGE INTRO TEXT ===== */
.concierge-intro {
  position: relative; z-index: 2;
  text-align: center;
  margin-top: 8px;
  animation: fadeInUp 0.8s ease-out 0.5s both;
}
.intro-greeting {
  font-size: 15px;
  font-weight: 300;
  color: var(--content-01);
  line-height: 1.6;
}
.intro-attention {
  font-size: 13px;
  color: var(--content-02);
  margin-top: 4px;
  line-height: 1.6;
}
.intro-attention strong { font-weight: 600; color: var(--content-01); }

/* ===== PROACTIVE ALERTS ===== */
.alerts-strip {
  position: relative; z-index: 2;
  display: flex; gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap; justify-content: center;
  max-width: 820px;
  animation: fadeInUp 0.8s ease-out 0.7s both;
}
.alert-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-02);
  border-radius: var(--radius-full);
  font-size: 12px; color: var(--content-01);
  cursor: pointer; transition: all 0.3s;
  box-shadow: var(--shadow-sm);
}
.alert-chip:hover { box-shadow: var(--shadow-md); border-color: var(--brand-01); }
.alert-chip.pulse { animation: zone-pulse 1.5s ease-in-out infinite; }
.alert-chip .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.alert-chip .dot.red { background: var(--negative-01); }
.alert-chip .dot.amber { background: var(--warning-01); }
.alert-chip .dot.green { background: var(--positive-01); }
.alert-chip .dismiss {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg-l3); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--content-02); transition: background 0.2s;
}
.alert-chip .dismiss:hover { background: var(--border-02); }

/* ===== ANIMATIONS ===== */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
@keyframes pulse-ring {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.2; }
}
@keyframes zone-pulse {
  0%, 100% { box-shadow: var(--shadow-sm); }
  50% { box-shadow: 0 0 20px rgba(0,56,36,0.2), var(--shadow-md); }
}
@keyframes voice-ring {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes zoneAppear {
  from { opacity: 0; transform: scale(0.7) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}