/* ================================
   AI LAUNCHER (PREMIUM FLOAT)
================================ */
#ai-launcher {
  position: fixed;
  bottom: calc(96px + env(safe-area-inset-bottom));
  right: 18px;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 18px;
  border-radius: 999px;

  background: #f9fafb;
  color: #6d28d9;

  border: 1px solid rgba(0,0,0,.06);
  box-shadow:
    0 10px 24px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.95);

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 14px;
  font-weight: 600;

  cursor: pointer;
  z-index: 9999;
  touch-action: none;

  transition: transform .15s ease, box-shadow .15s ease;
}

#ai-launcher:hover {
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}

/* ================================
   EAGLE × AI ICON
================================ */
.ai-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;

  background: linear-gradient(135deg,#8b5cf6,#6d28d9);
  color: #fff;

  position: relative;
  animation: ai-breathe 3.8s ease-in-out infinite;
}

.ai-icon::after {
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(139,92,246,.35) 0%,
    rgba(139,92,246,.15) 40%,
    transparent 70%
  );
  opacity:.6;
  animation: ai-glow 3.8s ease-in-out infinite;
}

.ai-icon svg {
  width:18px;
  height:18px;
  animation: eagle-think 12s linear infinite;
}

.ai-text { white-space: nowrap; }

/* ================================
   IDENTITY LABEL
================================ */
.ai-label {
  position:absolute;
  right:calc(100% + 10px);
  top:50%;
  transform:translateY(-50%) translateX(8px);

  background:#fff;
  color:#111827;
  font-size:13px;
  font-weight:600;

  padding:8px 12px;
  border-radius:999px;

  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 24px rgba(0,0,0,.18);

  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}

.ai-label::after{
  content:"";
  position:absolute;
  right:-6px;
  top:50%;
  transform:translateY(-50%) rotate(45deg);
  width:10px;
  height:10px;
  background:#fff;
  border-right:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
}

/* ================================
   MOBILE
================================ */
@media (max-width:420px){
  .ai-text{display:none}
  #ai-launcher{padding:14px;border-radius:50%}
}

/* ================================
   MODAL
================================ */
#ai-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.18);
  display:none;
  align-items:flex-end;
  justify-content:flex-end;
  z-index:9998;
}

.ai-window{
  width:100%;
  max-width:420px;
  height:85vh;
  background:#fff;
  border-radius:18px 18px 0 0;
  overflow:hidden;
  box-shadow:0 -20px 40px rgba(0,0,0,.25);
  animation:slideUp .25s ease;
  position:relative;
}

@media(min-width:768px){
  .ai-window{
    height:600px;
    border-radius:18px;
    margin:20px;
  }
}

.ai-window iframe{width:100%;height:100%;border:0}

#ai-close{
  position:absolute;
  top:10px;
  right:12px;
  width:28px;
  height:28px;
  border-radius:999px;
  border:0;
  background:rgba(255,255,255,.9);
  font-size:16px;
  cursor:pointer;
  z-index:2;
}

/* ================================
   ANIMATIONS
================================ */
@keyframes ai-breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}
@keyframes ai-glow{
  0%,100%{opacity:.4}
  50%{opacity:.85}
}
@keyframes eagle-think{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes slideUp{
  from{transform:translateY(24px);opacity:0}
  to{transform:translateY(0);opacity:1}
}

.ai-active .ai-icon,
.ai-active .ai-icon::after,
.ai-active .ai-icon svg{
  animation-play-state:paused;
}

#ai-launcher.dragging{cursor:grabbing}


.ai-label {
  backdrop-filter: blur(6px);
}