/* Floating AI Chat (Step 1) */
.fai-launcher{
  position: fixed;
  right: 18px;
  bottom: 18px;
  /* Step C polish: preferred launcher size */
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--card-border, rgba(255,255,255,.25));
  background: var(--card, rgba(255,255,255,.6));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 18px 40px rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:0;
  cursor:pointer;
  /* Above the entire app wrapper */
  z-index: 25000;
}

/* Hide floating assistant on Messages page (Messages has its own chat UI) */
body[data-route="messages"] #fai-launcher,
body[data-route="messages"] #fai-panel{
  display: none !important;
}

body[data-mode="dark"] .fai-launcher{
  box-shadow: 0 2px 8px rgba(0,0,0,.22), 0 18px 40px rgba(0,0,0,.28);
}
.fai-badge{
  position:absolute;
  top: -4px;
  left: -4px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  color: #fff;
  display:none;
  align-items:center;
  justify-content:center;
  font-size: 11px;
  font-weight: 800;
}
.fai-panel{
  position: fixed;
  right: 18px;
  bottom: 84px;
  width: 360px;
  max-width: calc(100vw - 36px);
  height: 460px;
  max-height: calc(100vh - 140px);
  border-radius: 22px;
  background: transparent;
  display:none;
  /* Above the entire app wrapper */
  z-index: 24000;
  isolation: isolate;
  /* Requested: keep ::before/::after visuals INSIDE the box (no outside spill) */
  overflow: hidden;
  /* Glow control (requested): idle lower, active (typing/thinking) higher */
  --fai-glow-idle: .30;
  --fai-glow-active: .50;
}

/* Apple-like RGB glow frame (animated) */
.fai-panel::before{
  content: "";
  position: absolute;
  /* Requested: do NOT extend outside the panel */
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  filter: blur(14px);
  transform: scale(0.985);
  transition: opacity .18s ease, transform .18s ease;
  /* Soft, blurry, colourful aura */
  background:
    radial-gradient(60% 80% at 50% 50%, rgba(255,255,255,.25), rgba(255,255,255,0) 60%),
    conic-gradient(from 0deg,
      rgba(255, 80, 180, .85),
      rgba(255, 190, 60, .85),
      rgba(80, 230, 190, .85),
      rgba(90, 170, 255, .85),
      rgba(170, 120, 255, .85),
      rgba(255, 80, 180, .85)
    );
}

.fai-panel.open::before{
  opacity: var(--fai-glow-idle);
  transform: scale(1);
  animation: faiGlowSpin 10s linear infinite;
}

/* Stronger + faster glow when typing / AI responding */
.fai-panel.fai-glow-typing::before,
.fai-panel.fai-glow-ai::before{
  opacity: var(--fai-glow-active);
  filter: blur(15px);
  animation: faiGlowSpin 2.8s linear infinite, faiGlowBreath 1.6s ease-in-out infinite;
}

.fai-panel.fai-glow-typing::before{
  transform: scale(1.01);
}

@keyframes faiGlowSpin{
  from{ transform: rotate(0deg) scale(1); }
  to{ transform: rotate(360deg) scale(1); }
}

@keyframes faiGlowBreath{
  /* Breath around the requested active level (~.50) */
  0%,100%{ opacity: .45; }
  50%{ opacity: .55; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .fai-panel.open::before,
  .fai-panel.fai-glow-typing::before,
  .fai-panel.fai-glow-ai::before{
    animation: none !important;
  }
}
body[data-mode="dark"] .fai-panel{
  box-shadow: 0 2px 10px rgba(0,0,0,.30), 0 24px 60px rgba(0,0,0,.36);
}

/* Inner glass shell (keeps content clipped, while outer panel can show glow) */
.fai-shell{
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  border-radius: 22px;
  border: 1px solid var(--card-border, rgba(255,255,255,.25));
  background: var(--card, rgba(255,255,255,.62));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 24px 60px rgba(0,0,0,.14);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.fai-panel.open{ display:block; }
.fai-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
body[data-mode="light"] .fai-top{ border-bottom-color: rgba(12,18,32,.10); }

/* Step 5: Premium header + trays (clean by default) */
.fai-title-line{
  display:flex;
  align-items:center;
  gap:10px;
}
.fai-avatar-btn{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
body[data-mode="light"] .fai-avatar-btn{
  background: rgba(255,255,255,.85);
  border-color: rgba(12,18,32,.10);
}
.fai-title-stack{
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.05;
}
.fai-top-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.fai-iconbtn{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: inherit;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  line-height: 1;
}
body[data-mode="light"] .fai-iconbtn{
  background: rgba(255,255,255,.85);
  border-color: rgba(12,18,32,.10);
}

.fai-agent-tray,
.fai-advbar{
  display:none;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
body[data-mode="light"] .fai-agent-tray,
body[data-mode="light"] .fai-advbar{
  border-bottom-color: rgba(12,18,32,.08);
}

.fai-panel.fai-agent-tray-open .fai-agent-tray{ display:block; }
.fai-panel.fai-adv-open .fai-advbar{ display:flex; }

.fai-tray-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 8px;
}

.fai-advbar{
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.fai-adv-left,
.fai-adv-right{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Step 4: Role + Agent selectors */
.fai-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
body[data-mode="light"] .fai-toolbar{ border-bottom-color: rgba(12,18,32,.08); }

.fai-role-select{
  max-width: 140px;
  border-radius: 12px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.12);
  color: inherit;
  outline:none;
}
body[data-mode="light"] .fai-role-select{
  background: rgba(255,255,255,.85);
  border-color: rgba(12,18,32,.10);
}

.fai-agent-row{
  display:flex;
  gap: 6px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.fai-agent-btn{
  display:flex;
  align-items:center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 8px 4px 4px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: inherit;
  cursor:pointer;
  white-space: nowrap;
}
body[data-mode="light"] .fai-agent-btn{
  background: rgba(255,255,255,.85);
  border-color: rgba(12,18,32,.10);
}
.fai-agent-btn.active{
  border-color: rgba(0,170,255,.35);
  background: rgba(0,170,255,.12);
}
.fai-agent-btn-img{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.25);
}
.fai-agent-btn-name{
  font-size: 11px;
  opacity: .85;
}
.fai-title{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.fai-title-line{
  display:flex;
  align-items:center;
  gap:8px;
}
.fai-agent-avatar{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.25);
}
.fai-subtitle{
  font-size: 11px;
  opacity: .7;
}
.fai-title b{ font-size: 13px; }
.fai-title span{ font-size: 11px; opacity:.7; }
.fai-close{
  border: 1px solid var(--card-border, rgba(255,255,255,.25));
  background: rgba(255,255,255,.18);
  color: inherit;
  padding: 6px 10px;
  border-radius: 12px;
  cursor:pointer;
}
body[data-mode="light"] .fai-close{ background: rgba(255,255,255,.75); }

.fai-body{
  flex: 1;
  padding: 12px;
  overflow:auto;
}
.fai-msg{
  margin: 8px 0;
  font-size: 13px;
  line-height: 1.35;
}
.fai-msg .fai-text{ white-space: pre-wrap; }
.fai-msg.user{
  margin-left:auto;
  max-width: 88%;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(0,170,255,.18);
  border: 1px solid rgba(0,170,255,.18);
}
.fai-msg.ai{
  margin-right:auto;
  max-width: 94%;
  display:flex;
  align-items:flex-end;
  gap: 8px;
  background: transparent;
  border: none;
}
.fai-avatar{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.25);
  flex: 0 0 auto;
}
.fai-bubble{
  max-width: calc(100% - 36px);
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.14);
}
body[data-mode="light"] .fai-bubble{
  background: rgba(255,255,255,.78);
  border-color: rgba(12,18,32,.10);
}
.fai-bottom{
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.12);
  display:flex;
  gap:10px;
}
body[data-mode="light"] .fai-bottom{ border-top-color: rgba(12,18,32,.10); }
.fai-input{
  flex:1;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  padding: 10px 12px;
  background: rgba(255,255,255,.10);
  color: inherit;
  outline:none;
}
body[data-mode="light"] .fai-input{
  background: rgba(255,255,255,.80);
  border-color: rgba(12,18,32,.10);
}
.fai-send{
  border: 1px solid rgba(0,170,255,.22);
  background: rgba(0,170,255,.18);
  color: inherit;
  padding: 10px 14px;
  border-radius: 14px;
  cursor:pointer;
}

@media (max-width: 420px){
  .fai-panel{ right: 12px; bottom: 78px; width: calc(100vw - 24px); }
  .fai-launcher{ right: 12px; bottom: 12px; }
}

.fai-time{
  margin-top: 6px;
  font-size: 10px;
  opacity: .6;
}


.fai-chips-wrap{
  display:flex;
  align-items:center;
  gap:6px;
  padding: 10px 10px 0;
}

.fai-chips{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  padding: 0 2px;
  scroll-behavior:smooth;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.fai-chips::-webkit-scrollbar{ display:none; }

.fai-chips-nav{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: inherit;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  line-height: 1;
  opacity: .85;
  user-select:none;
}
body[data-mode="light"] .fai-chips-nav{
  background: rgba(255,255,255,.78);
  border-color: rgba(12,18,32,.10);
}
.fai-chips-nav:hover{ opacity: 1; }
.fai-chips-nav.hidden{ visibility:hidden; opacity:0; pointer-events:none; }
.fai-chip{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color: inherit;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  cursor:pointer;
  white-space:nowrap;
}
body[data-mode="light"] .fai-chip{
  background: rgba(255,255,255,.78);
  border-color: rgba(12,18,32,.10);
}

.fai-typing{
  display:flex;
  align-items:center;
  gap:6px;
  opacity:.8;
  font-size: 12px;
  margin: 8px 0;
}
.fai-dots{
  display:inline-flex;
  gap:4px;
  align-items:center;
}
.fai-dots span{
  width:6px;
  height:6px;
  border-radius:999px;
  background: rgba(255,255,255,.55);
  animation: faiDot 1.1s infinite ease-in-out;
}
body[data-mode="light"] .fai-dots span{
  background: rgba(12,18,32,.35);
}
.fai-dots span:nth-child(2){ animation-delay:.15s; }
.fai-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes faiDot{
  0%, 80%, 100%{ transform: translateY(0); opacity:.5; }
  40%{ transform: translateY(-3px); opacity:1; }
}

/* Inline placeholder while the assistant is generating a reply */
.fai-msg.typing .fai-actions{ display:none; }
.fai-msg.typing .fai-time{ display:none; }
.fai-msg.typing .fai-text{ display:flex; align-items:center; min-height: 18px; }

.fai-msg .fai-text b{ font-weight: 900; }


.fai-action{
  margin: 10px 0 14px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(0,170,255,.10);
  border: 1px solid rgba(0,170,255,.18);
}
body[data-mode="light"] .fai-action{
  background: rgba(0,170,255,.08);
  border-color: rgba(12,18,32,.10);
}
.fai-action-title{ font-size: 12px; margin-bottom: 6px; }
.fai-action-summary{ font-size: 12px; opacity:.85; }
.fai-action-buttons{ display:flex; gap:8px; margin-top: 10px; }

.fai-actions{
  margin-top: 8px;
  display:flex;
  gap:8px;
}
.fai-actions .fai-chip{ padding: 6px 10px; font-size:12px; }


/* Warnings style */
.fai-msg.user.warn{
  background: rgba(255,170,0,.14) !important;
  border: 1px solid rgba(255,170,0,.22) !important;
}
.fai-msg.warn .fai-bubble{
  background: rgba(255,170,0,.14) !important;
  border: 1px solid rgba(255,170,0,.22) !important;
}


/* Use global theme vars */
.fai-panel{
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow-soft);
  backdrop-filter: blur(22px);
}


/* Launcher logo (circular, no padding) */
.fai-launcher-logo{
  width:100%;
  height:100%;
  display:block;
  border-radius:999px;
  object-fit:cover;
}

/* AI Assistant launcher icon (same SVG, different styling per mode) */
body[data-mode="light"] .fai-logo-dark{ display:none; }
body[data-mode="dark"] .fai-logo-light{ display:none; }

/* Light mode: colourful background (CSS), white icon (SVG filtered) */
body[data-mode="light"] .fai-launcher{
  background: transparent; /* ring is drawn via ::after so it stays thin */
  border: 0;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* Thin blue ring (Apple-like) around the edge only */
body[data-mode="light"] .fai-launcher::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  /* thin, clean blue edge (not a thick fill) */
  /* thinner blue ring */
  box-shadow: inset 0 0 0 1px rgba(26,43,107,.85);
  z-index: 0;
}
body[data-mode="light"] .fai-launcher::before{
  content: "";
  position: absolute;
  inset: 1px; /* inner colourful circle (keeps blue ring ultra-thin) */
  border-radius: 999px;
  /* soft "Apple Intelligence"-like blurred gradient (no image assets) */
  background:
    radial-gradient(circle at 25% 20%, rgba(255,45,85,.95), rgba(255,45,85,0) 55%),
    radial-gradient(circle at 28% 78%, rgba(255,159,10,.92), rgba(255,159,10,0) 58%),
    radial-gradient(circle at 78% 22%, rgba(191,90,242,.92), rgba(191,90,242,0) 58%),
    radial-gradient(circle at 72% 78%, rgba(90,200,250,.92), rgba(90,200,250,0) 58%),
    radial-gradient(circle at 55% 55%, rgba(52,199,89,.55), rgba(52,199,89,0) 60%),
    linear-gradient(135deg, rgba(255,45,85,.20), rgba(90,200,250,.20));
  filter: blur(9px) saturate(118%);
  transform: scale(1.06);
  opacity: .95;
  z-index: 0;
}
body[data-mode="light"] .fai-logo-light{
  width: 70%;
  height: 70%;
  object-fit: contain;
  border-radius: 0;
  position: relative;
  z-index: 1;
  /* turn colourful SVG into a clean white icon */
  filter: brightness(0) invert(1);
}

/* Dark mode: white background + colourful SVG */
body[data-mode="dark"] .fai-launcher{
  /* Dark mode: glass (not solid white) */
  background: #ffffff26;
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
body[data-mode="dark"] .fai-logo-dark{
  width: 70%;
  height: 70%;
  object-fit: contain;
  border-radius: 0;
  position: relative;
  z-index: 1;
}

.fai-launcher > span[aria-hidden]{ display:none; }


/* Backdrop blur when chat is open (Step 3 style) */
.fai-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(10,14,22,.08);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  /* Above the entire app wrapper (but under the panel/launcher) */
  z-index: 23000;
}
body[data-mode="light"] .fai-backdrop{ background: rgba(20,24,32,.06); }
.fai-backdrop.open{
  opacity: 1;
  pointer-events: auto;
}


/* Smooth conic-gradient rotation (rotate colors, not the panel) */
@property --fai-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
/* Apple-Intelligence style edge glow (around panel only, not inside) */
.fai-panel{
  z-index: 24000;
}
.fai-panel::before{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius: 28px;
  padding: 10px;
  background: conic-gradient(
    from var(--fai-a),
    rgba(255, 45, 85, .95),
    rgba(255, 159, 10, .95),
    rgba(52, 199, 89, .95),
    rgba(90, 200, 250, .95),
    rgba(175, 82, 222, .95),
    rgba(255, 45, 85, .95)
  );
  filter: blur(50px);
  opacity: 0;
  pointer-events:none;  transition: opacity .28s ease;
  z-index:-1;
  /* mask to ring so it hugs the edge (not a square blob) */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  box-sizing: border-box;
}
.fai-panel.open::before{
  opacity: .9;
  animation: faiSpin 2.5s linear infinite;
}
@keyframes faiSpin{
  to{ --fai-a: 360deg; }
}

@media (prefers-reduced-motion: reduce){
  .fai-panel.open::before{ animation:none; }
  .fai-backdrop{ transition:none; }
}

/* Smart hover + gentle pulse (launcher) */
.fai-launcher:hover,
.fai-launcher:focus-visible{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 18px rgba(0,0,0,.12), 0 22px 55px rgba(0,0,0,.16);
}
body[data-mode="dark"] .fai-launcher:hover,
body[data-mode="dark"] .fai-launcher:focus-visible{
  box-shadow: 0 8px 22px rgba(0,0,0,.30), 0 26px 65px rgba(0,0,0,.36);
}

/* subtle breathing effect while idle (keeps it "alive" but not annoying) */
@keyframes faiLauncherPulse{
  0%, 100%{ filter: none; }
  50%{ filter: brightness(1.03) saturate(1.05); }
}
body[data-mode="light"] .fai-launcher{ animation: faiLauncherPulse 4.2s ease-in-out infinite; }
body[data-mode="dark"] .fai-launcher{ animation: faiLauncherPulse 5.2s ease-in-out infinite; }

/* Boost the inner glow a bit on hover */
body[data-mode="light"] .fai-launcher:hover::before,
body[data-mode="light"] .fai-launcher:focus-visible::before{
  filter: blur(6px) saturate(125%);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce){
  .fai-launcher{ animation:none !important; }
}

/* =========================================================
   PATCH (requested):
   - Soften panel edges (less sharp)
   - Dark mode chat glass color: #ffffff26 (instead of solid/harsh)
   ========================================================= */

/* Slightly rounder shell to avoid sharp-looking corners */
.fai-panel{ border-radius: 26px; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }
.fai-shell{ border-radius: 26px; position: relative; }

/* Dark mode: make the chat panel a real glass */
body[data-mode="dark"] .fai-shell{
  background: #ffffff26;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 2px 10px rgba(0,0,0,.28), 0 24px 60px rgba(0,0,0,.34);
}

/* Soft inner highlight to remove the "hard edge" feel */
.fai-shell::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* subtle top highlight + corner fade */
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(255,255,255,.12), rgba(255,255,255,0) 55%),
    radial-gradient(120% 120% at 80% 100%, rgba(0,0,0,.22), rgba(0,0,0,0) 55%);
  opacity: .55;
  z-index: 0;
}

/* Ensure content stays above the shell highlight layer */
.fai-top, .fai-body, .fai-bottom{ position: relative; z-index: 1; }

/* Soften the RGB/glow ring edges (less "cut" look) */
.fai-panel::before{
  /* Keep the glow OUTSIDE (Apple-style): thin ring + outer blur, no inner wash */
  /* Requested: keep the glow INSIDE the panel */
  inset: 0;
  border-radius: inherit;
  padding: 0; /* cancel earlier ring padding so thickness is controlled by mask */
  filter: blur(10px);
  opacity: 0;
  transition: opacity .22s ease;

  /* Keep the glow layer inside the panel stacking context */
  z-index: 0;

  /* reset earlier composite settings (we use a single radial mask now) */
  -webkit-mask-composite: source-over;
  mask-composite: add;

  /* ring-only mask: centre is transparent so the inside stays clean */
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 14px),
    #000 calc(100% - 12px),
    #000 100%
  );
          mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 14px),
    #000 calc(100% - 12px),
    #000 100%
  );
}

/* Base (idle) glow */
.fai-panel.open::before{
  opacity: var(--fai-glow-idle);
  /* keep a subtle motion like Apple, but slower in idle */
  animation: faiSpin 6.2s linear infinite;
}

/* =========================================================
   ACTIVE LAYER (requested):
   - Use ::after as the "active" glow
   - Opacity should be .65 while typing / AI thinking
   - Keep it INSIDE the box (no outside spill)
   ========================================================= */
.fai-panel::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events:none;
  z-index: 0;
  opacity: 0;
  transition: opacity .18s ease;
  filter: blur(11px) saturate(1.12);

  /* Same colourful conic glow as ::before (no images) */
  background: conic-gradient(
    from var(--fai-a),
    rgba(255, 45, 85, .95),
    rgba(255, 159, 10, .95),
    rgba(52, 199, 89, .95),
    rgba(90, 200, 250, .95),
    rgba(175, 82, 222, .95),
    rgba(255, 45, 85, .95)
  );

  /* ring-only mask: centre stays clean */
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 14px),
    #000 calc(100% - 12px),
    #000 100%
  );
          mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 14px),
    #000 calc(100% - 12px),
    #000 100%
  );
}

/* Active state: stronger and faster */
.fai-panel.fai-glow-typing::after,
.fai-panel.fai-glow-ai::after{
  opacity: .65;
  animation: faiSpin 2.5s linear infinite, faiAfterBreath 1.4s ease-in-out infinite;
}

@keyframes faiAfterBreath{
  0%,100%{ opacity: .60; }
  50%{ opacity: .65; }
}

/* Respect reduced motion (override our later animations too) */
@media (prefers-reduced-motion: reduce){
  .fai-panel.open::before{ animation: none !important; }
  .fai-panel.fai-glow-typing::after,
  .fai-panel.fai-glow-ai::after{ animation: none !important; }
}