/* ══════════════════════════════════════════════════════════════
   ASSISTANT — GLASSMORPHISM IN THE LOGO PALETTE
   Load AFTER each page's inline <style> so these rules win.
   Colours are sampled from Portfolio_Logo.png (neon "K"):
     pink  #f08cc0   cyan  #5ebfff   blue  #4f7dfa
   The logo runs pink → cyan → blue, so every accent uses that order.
   ══════════════════════════════════════════════════════════════ */
:root{
  --lg-pink:#f08cc0;--lg-cyan:#5ebfff;--lg-blue:#4f7dfa;
  --lg-grad:linear-gradient(160deg,#f08cc0 0%,#5ebfff 52%,#4f7dfa 100%);
  --lg-ink:#0a0f2e; /* dark navy for text/icons that sit on the bright gradient */
}

/* ── WIP BADGE (was teal, now logo cyan) ── */
.assistant-wip{background:var(--lg-cyan);border-color:var(--lg-cyan);color:var(--lg-ink);box-shadow:0 2px 12px rgba(94,191,255,.45);}

/* ── FLOATING BUTTON ── */
.assistant-btn{
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  border:1px solid transparent;
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 8px 28px rgba(0,0,0,.35),0 0 22px rgba(94,191,255,.16),inset 0 1px 0 rgba(255,255,255,.22);
  transition:box-shadow .25s,background .25s,transform .2s;}
/* neon-tube rim, same pink → cyan → blue sweep as the logo */
.assistant-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(135deg,#f08cc0,#5ebfff 55%,#4f7dfa);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:.8;transition:opacity .25s;}
.assistant-btn:hover{
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.07));
  box-shadow:0 10px 34px rgba(0,0,0,.4),0 0 26px rgba(94,191,255,.34),0 0 40px rgba(240,140,192,.18),inset 0 1px 0 rgba(255,255,255,.3);}
.assistant-btn:hover::before{opacity:1;}
.assistant-btn:active{transform:scale(.97);}
.assistant-btn:focus-visible{outline:2px solid var(--lg-cyan);outline-offset:3px;}
.assistant-icon{background:var(--lg-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:none;
  filter:drop-shadow(0 0 6px rgba(94,191,255,.55));}

/* ── POPUP SHELL ── */
.assistant-popup{
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04)),rgba(12,14,26,.44);
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 46px rgba(94,191,255,.14),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(255,255,255,.04);
  --mx:50%;--my:0%;isolation:isolate;}

/* logo-colour orbs + cursor spotlight inside the glass (clipped by overflow:hidden) */
.assistant-popup::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(circle 220px at var(--mx) var(--my),rgba(255,255,255,.10),transparent 70%),
    radial-gradient(circle 170px at 0% 0%,rgba(240,140,192,.34),transparent 70%),
    radial-gradient(circle 190px at 50% 55%,rgba(94,191,255,.14),transparent 72%),
    radial-gradient(circle 200px at 100% 100%,rgba(79,125,250,.40),transparent 70%);}
/* neon rim: pink at the top-left, cyan through the middle, blue at the bottom-right (the logo's order) */
.assistant-popup::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;padding:1.5px;
  background:linear-gradient(150deg,rgba(240,140,192,.95),rgba(94,191,255,.75) 50%,rgba(79,125,250,.95));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:.75;}
.assistant-popup>*{position:relative;z-index:1;}

/* ── HEADER ── */
.popup-header{
  background:linear-gradient(135deg,rgba(240,140,192,.14),rgba(94,191,255,.10) 55%,rgba(79,125,250,.12));
  border-bottom:1px solid rgba(255,255,255,.10);}
.popup-avatar{background:var(--lg-grad);color:var(--lg-ink);box-shadow:0 0 16px rgba(94,191,255,.55),inset 0 1px 0 rgba(255,255,255,.45);}
.popup-close{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);}
.popup-close:hover{background:rgba(94,191,255,.18);border-color:rgba(94,191,255,.5);}

/* ── MESSAGES (translucent fills only; nested backdrop-filter has no visible effect) ── */
.msg.ai .msg-bubble{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);}
.msg.user .msg-bubble{
  background:linear-gradient(135deg,rgba(240,140,192,.26),rgba(94,191,255,.22) 55%,rgba(79,125,250,.30));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);}
.msg-card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.10);}
.typing-bubble{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);}
.typing-dot{background:var(--lg-cyan);}
.msg-card-btn{background:var(--lg-grad);color:var(--lg-ink);box-shadow:0 0 14px rgba(94,191,255,.4),inset 0 1px 0 rgba(255,255,255,.4);}

/* ── QUICK REPLIES + INPUT ── */
.quick-btn{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.10);}
.quick-btn:hover{border-color:rgba(94,191,255,.55);background:linear-gradient(135deg,rgba(240,140,192,.14),rgba(94,191,255,.16));}
.popup-input-row{border-top:1px solid rgba(255,255,255,.10);}
.popup-input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 2px rgba(0,0,0,.18);}
.popup-input:focus{border-color:rgba(94,191,255,.6);box-shadow:0 0 0 3px rgba(94,191,255,.14),inset 0 1px 2px rgba(0,0,0,.18);}
.popup-send{background:var(--lg-grad);color:var(--lg-ink);font-weight:700;box-shadow:0 0 14px rgba(94,191,255,.5),inset 0 1px 0 rgba(255,255,255,.45);}

/* ── LIGHT THEME ── */
[data-theme="light"] .assistant-btn{
  background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.46));
  box-shadow:0 8px 28px rgba(20,30,80,.14),0 0 18px rgba(94,191,255,.20),inset 0 1px 0 #fff;}
[data-theme="light"] .assistant-btn:hover{background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.62));}
[data-theme="light"] .assistant-popup{
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.44)),rgba(240,240,248,.30);
  border-color:rgba(255,255,255,.85);
  box-shadow:0 24px 70px rgba(20,30,80,.18),0 0 40px rgba(94,191,255,.16),inset 0 1px 0 #fff;}
[data-theme="light"] .assistant-popup::before{
  background:
    radial-gradient(circle 220px at var(--mx) var(--my),rgba(255,255,255,.6),transparent 70%),
    radial-gradient(circle 170px at 0% 0%,rgba(240,140,192,.30),transparent 70%),
    radial-gradient(circle 190px at 50% 55%,rgba(94,191,255,.12),transparent 72%),
    radial-gradient(circle 200px at 100% 100%,rgba(79,125,250,.24),transparent 70%);}
[data-theme="light"] .assistant-popup::after{opacity:.9;}
[data-theme="light"] .popup-header{border-bottom-color:rgba(0,0,0,.06);}
[data-theme="light"] .popup-close{background:rgba(255,255,255,.6);border-color:rgba(0,0,0,.08);}
[data-theme="light"] .msg.ai .msg-bubble,
[data-theme="light"] .msg-card,
[data-theme="light"] .typing-bubble{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);box-shadow:0 2px 10px rgba(20,30,80,.06);}
[data-theme="light"] .msg.user .msg-bubble{background:linear-gradient(135deg,rgba(240,140,192,.24),rgba(94,191,255,.20) 55%,rgba(79,125,250,.24));border-color:rgba(79,125,250,.25);}
[data-theme="light"] .quick-btn{background:rgba(255,255,255,.6);border-color:rgba(0,0,0,.08);}
[data-theme="light"] .popup-input-row{border-top-color:rgba(0,0,0,.06);}
[data-theme="light"] .popup-input{background:rgba(255,255,255,.7);border-color:rgba(0,0,0,.08);box-shadow:inset 0 1px 2px rgba(0,0,0,.05);}

/* ── FALLBACK: browsers without backdrop-filter get a solid surface so text stays readable ── */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .assistant-popup,.assistant-btn{background:var(--surface);}
}