/* ============================================================
   AI CONCIERGE: "Elion"
   A particle orb you tap, not a chat window. Web: contained card
   that slides up from a bottom-centre orb. Mobile: full-screen.
   Dormant unless mounted (see concierge.js flag).
   ============================================================ */

/* ---- the orb (resting state, bottom centre) ---- */
.cc-orb{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(14px);
  z-index:120; display:inline-flex; align-items:center; gap:11px;
  padding:8px 23px 8px 9px; border-radius:999px;
  background:rgba(8,12,32,0.66); border:1px solid rgba(54,84,255,0.34);
  backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 12px 44px rgba(30,60,255,0.34), inset 0 0 0 1px rgba(84,132,255,0.08);
  cursor:pointer; font-family:'Inter',sans-serif;
  opacity:0; pointer-events:none;
  transition:transform 460ms var(--ease), box-shadow 300ms ease, border-color 300ms ease, opacity 600ms ease;
}
.cc-orb.ready{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.cc-orb:hover{ border-color:rgba(54,84,255,0.62); box-shadow:0 18px 66px rgba(40,80,255,0.5), inset 0 0 0 1px rgba(84,132,255,0.16); }
.cc-orb.hidden{ opacity:0; pointer-events:none; transform:translateX(-50%) translateY(14px); }
/* living blue halo behind the sphere, echoing the background particle field */
.cc-orb-glow{
  position:absolute; left:7px; top:50%; width:52px; height:52px;
  transform:translateY(-50%); border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(74,128,255,0.6), rgba(45,212,224,0.18) 46%, transparent 70%);
  filter:blur(9px);
  animation:cc-orb-breathe 3.6s ease-in-out infinite;
}
@keyframes cc-orb-breathe{ 0%,100%{ opacity:0.5; transform:translateY(-50%) scale(0.9); } 50%{ opacity:0.96; transform:translateY(-50%) scale(1.14); } }
.cc-orb-canvas{ position:relative; z-index:1; width:48px; height:48px; flex-shrink:0; display:block; }
.cc-orb-label{ position:relative; z-index:1; font-size:14.5px; font-weight:600; color:var(--text); white-space:nowrap; letter-spacing:-0.01em; }
@media (max-width:600px){ .cc-orb{ bottom:18px; } }

/* ---- overlay + card ---- */
.cc-overlay{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:flex-end; justify-content:center;
  padding:24px;
  background:rgba(2,3,10,0);
  opacity:0; pointer-events:none;
  transition:opacity 420ms ease, background 420ms ease;
}
.cc-overlay.open{
  opacity:1; pointer-events:auto;
  background:rgba(2,3,10,0.74);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}

.cc-card{
  position:relative; width:100%; max-width:468px;
  background:radial-gradient(120% 80% at 50% -10%, rgba(16,22,52,0.98), rgba(4,6,18,0.98));
  border:1px solid var(--border); border-radius:30px;
  padding:44px 32px 22px;
  box-shadow:0 44px 130px rgba(0,0,245,0.3);
  display:flex; flex-direction:column; align-items:center;
  transform:translateY(46px) scale(0.97); opacity:0;
  transition:transform 520ms var(--ease), opacity 420ms ease;
  overflow:hidden;
}
.cc-overlay.open .cc-card{ transform:translateY(0) scale(1); opacity:1; }
.cc-card::before{ /* soft brand glow behind the sphere */
  content:''; position:absolute; top:-40px; left:50%; transform:translateX(-50%);
  width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(54,84,255,0.28), transparent 68%);
  filter:blur(20px); pointer-events:none;
}

.cc-close{
  position:absolute; top:18px; right:18px; z-index:3;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.05); border:1px solid var(--border);
  color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:color 200ms ease, background 200ms ease, border-color 200ms ease;
}
.cc-close:hover{ color:var(--text); background:rgba(255,255,255,0.09); border-color:rgba(140,150,255,0.3); }

.cc-sphere{ position:relative; width:156px; height:156px; margin-bottom:6px; display:block; }

.cc-greeting{ position:relative; text-align:center; margin-bottom:20px; }
.cc-hello{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--cyan); }
.cc-greeting h2{
  font-family:'Sora',sans-serif; font-size:23px; font-weight:700;
  letter-spacing:-0.02em; line-height:1.22; margin-top:9px; color:var(--text);
  transition:opacity 300ms ease, transform 300ms var(--ease);
}
.cc-greeting.swap h2{ opacity:0; transform:translateY(6px); }

/* the surfaced answer: calm type, not a chat bubble */
.cc-answer{
  position:relative; width:100%; max-height:40vh; overflow-y:auto;
  font-size:15px; line-height:1.62; color:var(--text);
  margin-bottom:16px; padding:2px 2px;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
          mask-image:linear-gradient(180deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  opacity:0; transform:translateY(6px); transition:opacity 400ms ease, transform 400ms var(--ease);
}
.cc-answer.show{ opacity:1; transform:translateY(0); }
.cc-answer:empty{ display:none; margin:0; }
.cc-answer p{ margin:0 0 10px; }
.cc-answer .cc-q{ color:var(--faint-text); font-size:13px; margin-bottom:12px; }
.cc-answer .cc-cursor{ display:inline-block; width:7px; height:15px; background:var(--cyan); margin-left:2px; vertical-align:-2px; animation:cc-blink 1s steps(2) infinite; }
@keyframes cc-blink{ 50%{ opacity:0; } }

.cc-note{ font-size:12px; color:var(--faint-text); text-align:center; margin-bottom:14px; min-height:0; transition:opacity 300ms ease; }
.cc-note.err{ color:#ff8a8a; }

.cc-input{
  position:relative; width:100%; display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.04); border:1px solid var(--border);
  border-radius:999px; padding:6px 6px 6px 20px;
  transition:border-color 220ms ease, background 220ms ease;
}
.cc-input:focus-within{ border-color:rgba(54,84,255,0.55); background:rgba(255,255,255,0.06); }
.cc-field{
  flex:1; min-width:0; background:none; border:none; outline:none;
  color:var(--text); font-size:15px; font-family:'Inter',sans-serif; padding:9px 0;
}
.cc-field::placeholder{ color:var(--faint-text); }
.cc-send{
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  background:var(--brand); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:background 220ms ease, transform 220ms var(--ease);
}
.cc-send:hover{ background:var(--brand-up); }
.cc-send:disabled{ background:#2a3050; cursor:default; }
.cc-send.busy svg{ display:none; }
.cc-send.busy::after{ content:''; width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,0.4); border-top-color:#fff; animation:cc-spin 0.7s linear infinite; }
@keyframes cc-spin{ to{ transform:rotate(360deg); } }

.cc-legal{ font-size:10.5px; color:var(--faint-text); text-align:center; margin-top:12px; line-height:1.4; }
.cc-legal:empty{ display:none; }

/* ---- mobile: full-screen takeover ---- */
@media (max-width:600px){
  .cc-overlay{ padding:0; align-items:stretch; }
  .cc-card{
    max-width:none; border-radius:0; margin:0;
    min-height:100vh; min-height:100dvh;
    justify-content:center; padding:76px 22px 26px;
    transform:translateY(60px); box-shadow:none;
  }
  .cc-card::before{ top:6%; width:340px; height:340px; }
  .cc-sphere{ width:190px; height:190px; margin-bottom:10px; }
  .cc-greeting h2{ font-size:28px; }
  .cc-answer{ max-height:44vh; }
  /* input docks to the bottom */
  .cc-input{ position:fixed; left:16px; right:16px; bottom:22px; width:auto; }
  .cc-legal{ margin-bottom:64px; }

  /* Once an answer is showing: shrink the orb, hide the big greeting, and let
     the answer fill the middle and scroll, instead of being crushed under
     the orb + heading. */
  .cc-card.cc-answering{ justify-content:flex-start; padding-top:54px; padding-bottom:108px; }
  .cc-card.cc-answering .cc-sphere{ width:74px; height:74px; margin-bottom:2px; }
  .cc-card.cc-answering .cc-greeting{ display:none; }
  .cc-card.cc-answering::before{ top:-12px; width:200px; height:200px; }
  .cc-card.cc-answering .cc-answer{ flex:1 1 auto; max-height:none; width:100%; margin-bottom:6px; }
  .cc-card.cc-answering .cc-legal{ margin-bottom:0; }
}

/* Nudge the eye to the email box on the email step (esp. mobile, where the
   keyboard may close and it isn't obvious you must tap it). */
.cc-input.cc-cue{ border-color:rgba(84,132,255,0.7); animation:cc-cue-pulse 1.7s ease-in-out infinite; }
@keyframes cc-cue-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(54,84,255,0); }
  50%{ box-shadow:0 0 0 4px rgba(54,84,255,0.20); border-color:rgba(120,150,255,0.95); }
}

@media (prefers-reduced-motion: reduce){
  .cc-orb, .cc-overlay, .cc-card, .cc-answer, .cc-greeting h2{ transition-duration:0.01ms !important; }
  .cc-cursor, .cc-orb-glow, .cc-input.cc-cue{ animation:none; }
}