/* =====================================================
 *  glass.css — card surface with animated gradient halo,
 *              hover shimmer sweep, refined pills, tags
 * =================================================== */

/* Card surface — fully opaque so we don't need backdrop-filter. The
 * radial highlights give it depth without forcing the compositor to
 * re-blur the page background per frame. */
.glass {
  position: relative;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 100% 80% at 0% 0%, rgba(167, 139, 250, 0.06), transparent 60%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(96, 165, 250, 0.05), transparent 60%),
    linear-gradient(135deg, #15152e 0%, #0e0e1c 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  isolation: isolate;
  transition:
    transform    var(--transition),
    border-color var(--transition),
    box-shadow   var(--transition);
}

/* Static gradient border on hover — conic + mask trick rasterises ONCE
 * and is cached. No @property animation, so no per-frame re-paint. */
.glass.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from 220deg,
    transparent 0deg,
    var(--accent-blue) 90deg,
    var(--accent) 180deg,
    var(--accent-cyan) 270deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 3;
}
.glass.card:hover::before { opacity: 1; }

/* Diagonal shimmer sweep on hover. */
.glass.card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(167, 139, 250, 0.10) 50%,
    transparent 62%
  );
  transform: translateX(-100%);
  transition: transform 0.8s ease;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  z-index: 1;
}
.glass.card:hover::after { transform: translateX(100%); }

/* Card content above decorative pseudos. */
.glass > * { position: relative; z-index: 2; }

/* Hover: lift + brighter border + bigger glow. */
.glass.card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-hover);
}

/* Hero gets an extra inner highlight at the top. */
.card--hero {
  box-shadow:
    inset 0 1px 0 rgba(167, 139, 250, 0.20),
    var(--shadow-card);
}
.card--hero:hover {
  box-shadow:
    inset 0 1px 0 rgba(167, 139, 250, 0.45),
    var(--shadow-hover);
}

/* Section tag — '// 03 — CHAT' style label, top-right. */
.card-tag {
  position: absolute;
  top: 18px; right: 22px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  z-index: 3;
  user-select: none;
  pointer-events: none;
  transition: color var(--transition), letter-spacing var(--transition);
}
.card:hover .card-tag {
  color: var(--accent);
  letter-spacing: 0.22em;
}

/* ---------- Pills ---------- */
.glass-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 13px;
  border-radius: var(--radius-full);
  background: rgba(139, 92, 246, 0.07);
  border: 1px solid rgba(139, 92, 246, 0.20);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.glass-pill::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.18) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.glass-pill:hover::before { opacity: 1; }
.glass-pill b { color: var(--text); font-weight: 700; }
.glass-pill:hover {
  background: rgba(139, 92, 246, 0.14);
  border-color: var(--border-hover);
  color: var(--accent-hover);
  transform: translateY(-1px);
}
.glass-pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  flex: 0 0 auto;
}

.pill-available {
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.40);
  color: var(--accent);
}
.pill-available .dot {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  animation: pulse-glow 2s ease-in-out infinite;
}

.glass-sm { border-radius: var(--radius-md); }