/* ================================================================
   Ask AI Badge Component
   File: public/css/ask-ai-badge.css

   A sparkle-star "Ask AI" badge that floats above the top-left
   corner of each dashboard page H2. Clicking opens the AI widget.

   Animation:
     - Badge:  gentle idle glow pulse (3.5 s)
     - Star:   breathing scale + filter glow (2.8 s)
     - Sparks: 4 satellite diamonds blink in/out, staggered by 0.6 s
   ================================================================ */

/* ── Host containers ──────────────────────────────────────────────
   These divs directly wrap the H2 on each dashboard page.
   position:relative makes them the offset parent for the badge.
   ──────────────────────────────────────────────────────────────── */
.page-header > div,
.docs-header-title,
.header-title-row {
  position: relative;
}

/* ── Badge button ─────────────────────────────────────────────────
   Positioned absolutely so it "hangs" above the host div's
   top-left corner without disturbing the document flow.
   ──────────────────────────────────────────────────────────────── */
.ask-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 6px;
  vertical-align: middle;
  margin-left: 8px;

  background: rgba(139, 92, 246, 0.10);
  border: 1px solid rgba(139, 92, 246, 0.36);
  border-radius: 40px;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--accent-primary, #8b5cf6);
  font-family: inherit;
  line-height: 1;

  cursor: pointer;
  user-select: none;
  white-space: nowrap;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  box-shadow:
    inset 0 0 0 0.5px rgba(139, 92, 246, 0.12),
    0 0 8px rgba(139, 92, 246, 0.14),
    0 1px 3px rgba(0, 0, 0, 0.20);

  transition:
    background 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.18s ease;

  animation: aab-idle-glow 3.5s ease-in-out infinite;
}

.ask-ai-badge:hover {
  background: rgba(139, 92, 246, 0.20);
  box-shadow:
    inset 0 0 0 0.5px rgba(139, 92, 246, 0.28),
    0 0 16px rgba(139, 92, 246, 0.42),
    0 2px 6px rgba(0, 0, 0, 0.24);
  transform: scale(1.07);
}

.ask-ai-badge:active {
  transform: scale(0.94);
  transition-duration: 0.08s;
}

/* ── Star container ───────────────────────────────────────────────
   14 × 14 px relative box that positions the satellite sparks.
   ──────────────────────────────────────────────────────────────── */
.aab-star-wrap {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Sparkle star SVG ─────────────────────────────────────────────
   Gentle breathe: scale ↔ glow.
   ──────────────────────────────────────────────────────────────── */
.aab-star {
  display: block;
  width: 11px;
  height: 11px;
  color: var(--accent-primary, #8b5cf6);
  filter: drop-shadow(0 0 2.5px rgba(139, 92, 246, 0.8));
  animation: aab-star-breathe 2.8s ease-in-out infinite;
  flex-shrink: 0;
}

/* ── Satellite sparks ─────────────────────────────────────────────
   4 tiny diamond-shaped sparks at N / E / S / W around the star.
   The rotate(45deg) is kept as a base transform; animations only
   change opacity so there is no transform conflict.
   ──────────────────────────────────────────────────────────────── */
.aab-spark {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--accent-primary, #8b5cf6);
  border-radius: 0;          /* square, rotated → diamond */
  opacity: 0;
  box-shadow: 0 0 4px rgba(139, 92, 246, 0.9);
}

/* North */
.aab-star-wrap .aab-spark:nth-child(2) {
  top: -2px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  animation: aab-spark-blink 2.4s 0s ease-in-out infinite;
}

/* East */
.aab-star-wrap .aab-spark:nth-child(3) {
  top: 50%;
  right: -2px;
  transform: translateY(-50%) rotate(45deg);
  animation: aab-spark-blink 2.4s 0.6s ease-in-out infinite;
}

/* South */
.aab-star-wrap .aab-spark:nth-child(4) {
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  animation: aab-spark-blink 2.4s 1.2s ease-in-out infinite;
}

/* West */
.aab-star-wrap .aab-spark:nth-child(5) {
  top: 50%;
  left: -2px;
  transform: translateY(-50%) rotate(45deg);
  animation: aab-spark-blink 2.4s 1.8s ease-in-out infinite;
}

/* ── Label ────────────────────────────────────────────────────── */
.aab-label {
  line-height: 1;
}

/* ── Keyframes ────────────────────────────────────────────────── */

/* Badge: ambient glow pulse */
@keyframes aab-idle-glow {
  0%, 100% {
    box-shadow:
      inset 0 0 0 0.5px rgba(139, 92, 246, 0.12),
      0 0 10px rgba(139, 92, 246, 0.16),
      0 1px 3px rgba(0, 0, 0, 0.26);
  }
  50% {
    box-shadow:
      inset 0 0 0 0.5px rgba(139, 92, 246, 0.22),
      0 0 18px rgba(139, 92, 246, 0.36),
      0 1px 4px rgba(0, 0, 0, 0.28);
  }
}

/* Star: scale + glow breathe */
@keyframes aab-star-breathe {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 2.5px rgba(139, 92, 246, 0.75));
  }
  50% {
    transform: scale(1.18);
    filter: drop-shadow(0 0 5px rgba(139, 92, 246, 1));
  }
}

/* Spark: fade in → peak → fade out */
@keyframes aab-spark-blink {
  0%, 100% { opacity: 0; }
  40%, 60% { opacity: 0.9; }
}

/* ── Responsive: larger tap target on mobile ─────────── */
@media (max-width: 480px) {
  .ask-ai-badge {
    font-size: 9px;
    padding: 6px 6px 6px 6px;
    gap: 5px;
    margin-left: 6px;
    min-height: 10px;
  }
  .aab-star {
    width: 10px;
    height: 10px;
  }
  .aab-star-wrap {
    width: 12px;
    height: 12px;
  }
}