/* ═══════════════════════════════════════════════════════════════════════════
   SPARK'S M!ND — site chat widget (clean, self-contained module)
   Corner orb + slide-in panel, wired to /api/chat + /api/contact.
   Gold cinematic aesthetic to match the NYC landing. No external deps.
═══════════════════════════════════════════════════════════════════════════ */
:root{
  --smc-gold:#f5c542; --smc-gold-bright:#ffd700; --smc-gold-warm:#ffe066;
  --smc-ink:#f4f1e8; --smc-muted:#9aa0aa; --smc-bg:#0a0c11; --smc-bg2:#06080c;
  --smc-line:rgba(255,255,255,.14); --smc-glow:rgba(245,197,66,.32);
}

/* ── Corner orb ── */
#smcOrb{
  position:fixed; right:22px; bottom:22px; z-index:1500;
  width:62px; height:62px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  color:var(--smc-gold);
  background:radial-gradient(circle at 50% 35%, rgba(245,197,66,.22), rgba(6,8,12,.92) 70%);
  border:1.5px solid rgba(245,197,66,.55);
  box-shadow:0 8px 30px -6px rgba(0,0,0,.7), 0 0 26px -4px var(--smc-glow);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
  animation:smcOrbPulse 3.6s ease-in-out infinite;
}
#smcOrb:hover{ transform:translateY(-2px) scale(1.05); border-color:var(--smc-gold-bright);
  box-shadow:0 10px 34px -6px rgba(0,0,0,.7), 0 0 40px -2px var(--smc-glow); }
#smcOrb svg{ width:30px; height:30px; filter:drop-shadow(0 0 6px var(--smc-glow)); }
#smcOrb .smc-ring{ position:absolute; inset:-5px; border-radius:50%;
  border:1px solid rgba(245,197,66,.25); animation:smcRing 3.6s ease-out infinite; }
@keyframes smcOrbPulse{ 0%,100%{ box-shadow:0 8px 30px -6px rgba(0,0,0,.7), 0 0 22px -6px var(--smc-glow); }
  50%{ box-shadow:0 8px 30px -6px rgba(0,0,0,.7), 0 0 38px -2px var(--smc-glow); } }
@keyframes smcRing{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(1.35); opacity:0; } }
body.smc-open #smcOrb{ opacity:0; pointer-events:none; transform:scale(.6); }
#smcOrb .smc-orb-badge{ position:absolute; top:-3px; right:-3px; min-width:16px; height:16px;
  border-radius:9px; background:var(--smc-gold); color:#1a1204; font:700 10px/16px var(--smc-mark,'Orbitron',sans-serif);
  text-align:center; padding:0 4px; display:none; }
#smcOrb.smc-has-new .smc-orb-badge{ display:block; }

/* ── Panel ── */
#smcPanel{
  position:fixed; right:22px; bottom:22px; z-index:1501;
  width:min(400px, calc(100vw - 32px)); height:min(620px, calc(100vh - 40px));
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:20px; border:1px solid rgba(245,197,66,.24);
  background:linear-gradient(180deg, rgba(12,14,19,.98), rgba(6,8,12,.99));
  box-shadow:0 40px 120px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.03) inset;
  opacity:0; visibility:hidden; transform:translateY(24px) scale(.97);
  transition:opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1), visibility .35s;
  font-family:var(--smc-body,'Space Grotesk','Inter',system-ui,sans-serif);
}
body.smc-open #smcPanel{ opacity:1; visibility:visible; transform:none; }

/* header */
.smc-head{ display:flex; align-items:center; gap:11px; padding:15px 16px;
  border-bottom:1px solid var(--smc-line);
  background:linear-gradient(180deg, rgba(245,197,66,.06), transparent); }
.smc-head-mark{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  color:var(--smc-gold); border:1px solid rgba(245,197,66,.4);
  background:rgba(245,197,66,.08); box-shadow:0 0 16px -4px var(--smc-glow); }
.smc-head-mark svg{ width:20px; height:20px; }
.smc-head-txt{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.smc-title{ font-family:var(--smc-mark,'Orbitron',sans-serif); font-weight:800;
  font-size:13px; letter-spacing:.14em; color:var(--smc-ink); }
.smc-status{ display:flex; align-items:center; gap:6px; font-size:10px; letter-spacing:.1em;
  color:var(--smc-muted); text-transform:uppercase; }
.smc-dot{ width:7px; height:7px; border-radius:50%; background:#36ff78; box-shadow:0 0 8px #36ff78;
  animation:smcDot 2s ease-in-out infinite; }
@keyframes smcDot{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
.smc-close{ width:32px; height:32px; border-radius:50%; cursor:pointer; flex:0 0 auto;
  border:1px solid var(--smc-line); background:rgba(5,7,10,.6); color:var(--smc-muted);
  font-size:19px; line-height:1; transition:.2s; }
.smc-close:hover{ border-color:var(--smc-gold); color:#fff; transform:rotate(90deg); }

/* messages */
.smc-msgs{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px;
  scrollbar-width:thin; scrollbar-color:rgba(245,197,66,.3) transparent; }
.smc-msgs::-webkit-scrollbar{ width:6px; } .smc-msgs::-webkit-scrollbar-thumb{ background:rgba(245,197,66,.28); border-radius:3px; }
.smc-msg{ max-width:86%; padding:11px 14px; border-radius:14px; font-size:13.5px; line-height:1.5;
  animation:smcRise .35s ease both; word-wrap:break-word; }
@keyframes smcRise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.smc-msg.bot{ align-self:flex-start; background:rgba(255,255,255,.04); border:1px solid var(--smc-line);
  color:var(--smc-ink); border-bottom-left-radius:5px; }
.smc-msg.me{ align-self:flex-end; color:#1a1204; border-bottom-right-radius:5px;
  background:linear-gradient(135deg, var(--smc-gold-warm), var(--smc-gold)); font-weight:500; }
.smc-msg.bot strong{ color:var(--smc-gold-warm); }
.smc-msg.bot a{ color:var(--smc-gold-bright); text-decoration:underline; }
.smc-msg.bot ul{ margin:6px 0; padding-left:18px; }
.smc-msg.bot .smc-spk{ color:var(--smc-gold); }
.smc-typing{ align-self:flex-start; display:flex; gap:5px; padding:12px 14px; }
.smc-typing i{ width:7px; height:7px; border-radius:50%; background:var(--smc-gold); opacity:.5;
  animation:smcType 1.2s ease-in-out infinite; }
.smc-typing i:nth-child(2){ animation-delay:.2s; } .smc-typing i:nth-child(3){ animation-delay:.4s; }
@keyframes smcType{ 0%,100%{ transform:translateY(0); opacity:.4; } 50%{ transform:translateY(-4px); opacity:1; } }

/* suggestions */
.smc-suggest{ display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 12px; }
.smc-chip{ font-size:11px; letter-spacing:.02em; color:var(--smc-gold-warm); cursor:pointer;
  padding:7px 12px; border-radius:999px; border:1px solid rgba(245,197,66,.34);
  background:rgba(245,197,66,.05); transition:.2s; }
.smc-chip:hover{ border-color:var(--smc-gold); color:#fff; background:rgba(245,197,66,.13); }

/* input */
.smc-form{ display:flex; gap:9px; padding:12px 14px; border-top:1px solid var(--smc-line);
  background:rgba(5,7,10,.4); }
.smc-input{ flex:1; resize:none; max-height:96px; min-height:22px; padding:10px 12px;
  border-radius:12px; border:1px solid var(--smc-line); background:rgba(255,255,255,.03);
  color:var(--smc-ink); font:inherit; font-size:13.5px; line-height:1.4; outline:none; transition:border-color .2s; }
.smc-input:focus{ border-color:rgba(245,197,66,.5); }
.smc-input::placeholder{ color:var(--smc-muted); }
.smc-send{ flex:0 0 auto; width:42px; border-radius:12px; cursor:pointer; color:#1a1204;
  background:linear-gradient(135deg, var(--smc-gold-warm), var(--smc-gold)); border:none;
  display:grid; place-items:center; transition:transform .2s, box-shadow .2s; }
.smc-send:hover{ transform:translateY(-1px); box-shadow:0 6px 18px -6px var(--smc-glow); }
.smc-send:disabled{ opacity:.5; cursor:default; transform:none; box-shadow:none; }
.smc-send svg{ width:18px; height:18px; }

/* contact / message-Spark mini-form */
.smc-contact{ padding:14px 16px; border-top:1px solid var(--smc-line); display:none; flex-direction:column; gap:9px;
  background:rgba(245,197,66,.03); }
body.smc-contact-open .smc-contact{ display:flex; }
body.smc-contact-open .smc-form, body.smc-contact-open .smc-suggest{ display:none; }
.smc-contact input, .smc-contact textarea{ padding:9px 11px; border-radius:10px; border:1px solid var(--smc-line);
  background:rgba(255,255,255,.03); color:var(--smc-ink); font:inherit; font-size:13px; outline:none; }
.smc-contact textarea{ resize:none; min-height:64px; }
.smc-contact-row{ display:flex; gap:8px; }
.smc-contact-row button{ flex:1; padding:10px; border-radius:10px; cursor:pointer;
  font:600 11px/1 var(--smc-mark,'Orbitron',sans-serif); letter-spacing:.1em; text-transform:uppercase; transition:.2s; }
.smc-c-send{ color:#1a1204; background:linear-gradient(135deg,var(--smc-gold-warm),var(--smc-gold)); border:none; }
.smc-c-send:hover{ filter:brightness(1.08); }
.smc-c-cancel{ color:var(--smc-muted); background:none; border:1px solid var(--smc-line); }
.smc-c-cancel:hover{ color:#fff; border-color:var(--smc-gold); }
.smc-contact-label{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--smc-gold); }

/* mobile: full screen */
@media (max-width:520px){
  #smcPanel{ right:0; bottom:0; width:100vw; height:100dvh; border-radius:0; }
  #smcOrb{ right:16px; bottom:16px; }
}
/* Restore a visible OS cursor inside the chat — the host page hides it (cursor:none)
   for its custom spark cursor, which sits behind this panel. */
#smcOrb, #smcPanel, #smcPanel *{ cursor:auto; }
#smcOrb, #smcPanel button, #smcPanel a, #smcPanel .smc-chip, #smcPanel [role="button"]{ cursor:pointer; }
#smcPanel textarea, #smcPanel input{ cursor:text; }

@media (prefers-reduced-motion:reduce){
  #smcOrb, #smcOrb .smc-ring, .smc-dot, .smc-typing i, .smc-msg{ animation:none; }
}