/* =========================================================================
   ask-elude.css — floating draggable launcher bubble + its chat panel.
   Uses the site's real tokens, same as beautiful-ui.css, so it matches
   whatever the current --bg/--panel/--ink/--red theme is.
   ========================================================================= */

#aeTrailCanvas{
  position:fixed; inset:0; z-index:998;
  pointer-events:none;
}

.ae-launcher{
  position:fixed; top:0; left:0; z-index:999;
  width:56px; height:56px; border-radius:50%;
  background:var(--red);
  box-shadow:0 12px 28px -8px rgba(255,34,63,.6), 0 0 0 1px rgba(255,255,255,.08) inset;
  display:flex; align-items:center; justify-content:center;
  cursor:grab; touch-action:none; user-select:none;
  transition:box-shadow .2s ease;
  will-change:transform;
}
.ae-launcher:hover{ box-shadow:0 14px 34px -6px rgba(255,34,63,.75), 0 0 0 1px rgba(255,255,255,.1) inset; }
.ae-launcher.dragging{ cursor:grabbing; transition:none; }
.ae-launcher-dot{
  width:22px; height:22px; border-radius:50%;
  background:var(--ink);
  position:relative;
}
.ae-launcher-dot::before{
  content:"";
  position:absolute; inset:6px;
  border-radius:50%;
  background:var(--red);
}

.ae-panel{
  position:fixed; z-index:999;
  width:340px; max-width:calc(100vw - 24px);
  height:420px; max-height:calc(100vh - 24px);
  opacity:0; visibility:hidden; transform:translateY(10px) scale(.97);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  pointer-events:none;
}
.ae-panel.open{
  opacity:1; visibility:visible; transform:translateY(0) scale(1);
  pointer-events:auto;
}
.ae-panel #askEludeChat{ width:100%; height:100%; }

/* card shatter feedback when the launcher is rammed into one at speed */
@keyframes ae-shake{
  0%, 100%{ transform:translateX(0); }
  20%{ transform:translateX(-6px) rotate(-.4deg); }
  40%{ transform:translateX(5px) rotate(.4deg); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(3px); }
}
.ae-broken{
  animation:ae-shake .4s ease;
  border-color:var(--red) !important;
  filter:saturate(1.4);
}
.ae-broken::after{ content:""; }

@media (max-width:520px){
  .ae-launcher{ width:50px; height:50px; }
  .ae-panel{ width:calc(100vw - 24px); }
}