/* Tương tác bổ sung cho bản HTML tĩnh của CircleBot. */
:root {
  --shadow-glow: 0 10px 24px -20px hsl(0 0% 0% / 0.18);
  --shadow-elegant: 0 16px 46px -34px hsl(0 0% 0% / 0.22);
  --circlebot-soft-blur: 10px;
  --circlebot-surface-alpha: 0.84;
}

.dark {
  --shadow-glow: 0 10px 24px -20px hsl(0 0% 100% / 0.12);
  --shadow-elegant: 0 16px 46px -34px hsl(0 0% 100% / 0.12);
  --circlebot-surface-alpha: 0.78;
}

.circlebot-navbar-scrolled nav {
  box-shadow: var(--shadow-elegant);
}

.circlebot-command-hidden[hidden],
[data-command-empty][hidden] {
  display: none !important;
}

.solid-surface {
  background: hsl(var(--card) / 0.94) !important;
  border-color: hsl(var(--border) / 0.72) !important;
  box-shadow: 0 12px 36px -30px hsl(var(--foreground) / 0.22), inset 0 1px 0 hsl(var(--foreground) / 0.03) !important;
}

.dark .solid-surface {
  background: hsl(var(--card) / 0.92) !important;
  box-shadow: 0 12px 36px -30px hsl(0 0% 100% / 0.12), inset 0 1px 0 hsl(0 0% 100% / 0.04) !important;
}

.solid-surface::before,
.solid-surface::after {
  content: none !important;
  display: none !important;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  header nav.solid-surface,
  .circlebot-mobile-menu,
  .circlebot-faq-surface,
  .circlebot-marquee-shell,
  .circlebot-cta-surface,
  footer .solid-surface {
    background: hsl(var(--card) / var(--circlebot-surface-alpha)) !important;
    -webkit-backdrop-filter: blur(var(--circlebot-soft-blur)) saturate(112%);
    backdrop-filter: blur(var(--circlebot-soft-blur)) saturate(112%);
  }
}

.circlebot-js .circlebot-reveal {
  opacity: 0;
  transform: translateY(16px) scale(0.985);
  transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1), transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.circlebot-js .circlebot-reveal.circlebot-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.circlebot-js [data-char="true"].circlebot-reveal {
  transform: translateY(0.35em) rotateX(-30deg);
  transition-duration: 430ms;
  transform-origin: 50% 100%;
}

.circlebot-js [data-char="true"].circlebot-visible {
  transform: translateY(0) rotateX(0deg);
}

.circlebot-mobile-menu[hidden] {
  display: none !important;
}

.circlebot-mobile-menu {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: hsl(var(--card) / 0.94) !important;
  border: 1px solid hsl(var(--border) / 0.72) !important;
  box-shadow: 0 18px 44px -34px hsl(var(--foreground) / 0.26) !important;
  opacity: 0;
  transform: translateY(-8px) scale(0.985);
  transition: opacity 190ms ease, transform 190ms ease;
}

.circlebot-mobile-menu.circlebot-menu-is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.circlebot-mobile-menu.circlebot-menu-is-closing {
  opacity: 0;
  transform: translateY(-6px) scale(0.985);
}

.circlebot-mobile-menu::before,
.circlebot-mobile-menu::after {
  content: none !important;
  display: none !important;
}

.circlebot-mobile-menu-link,
.circlebot-mobile-invite {
  position: relative;
  z-index: 1;
}

.circlebot-menu-button[aria-expanded="true"] {
  background: hsl(var(--muted) / 0.9) !important;
}

.circlebot-bg-blur {
  opacity: 0.32 !important;
  filter: blur(64px);
}

.bg-mesh {
  opacity: 0.30 !important;
  filter: blur(0.2px);
}

header .blur-xl {
  opacity: 0.18 !important;
  filter: blur(14px) !important;
}

header a:hover .blur-xl {
  opacity: 0.25 !important;
}

img[src*="team-avatar"] {
  --tw-ring-color: hsl(var(--primary) / 0.24) !important;
}

img[src*="team-avatar"] + *,
.relative > .bg-aurora.rounded-full.blur-2xl {
  opacity: 0.24 !important;
  filter: blur(28px) !important;
}

.group:hover .relative > .bg-aurora.rounded-full.blur-2xl {
  opacity: 0.34 !important;
}

[class*="shadow-[var(--shadow-glow)]"] {
  box-shadow: var(--shadow-glow) !important;
}

[class*="hover:shadow"]:hover {
  box-shadow: 0 16px 42px -34px hsl(var(--primary) / 0.36) !important;
}

.animate-pulse-glow {
  animation-duration: 7.5s !important;
  opacity: 0.38 !important;
}

.animate-aurora {
  animation-duration: 18s !important;
}

.circlebot-cta-surface > .absolute.bg-aurora {
  opacity: 0.12 !important;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 8px hsl(var(--primary) / 0.10);
  }
  50% {
    box-shadow: 0 0 18px hsl(var(--primary) / 0.16);
  }
}

.circlebot-faq-panel {
  display: block !important;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-2px);
  will-change: max-height, opacity, transform;
  animation: none !important;
  transition: max-height 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.circlebot-faq-panel[data-state="open"] {
  opacity: 1;
  transform: translateY(0);
}

.circlebot-faq-panel-inner {
  min-height: 0;
  overflow: hidden;
}

[data-faq-trigger] svg {
  transition: transform 220ms ease;
}

[data-faq-trigger][data-state="open"] svg {
  transform: rotate(180deg);
}

[data-faq-item] {
  transition: background-color 220ms ease, border-color 220ms ease;
}

[data-faq-item][data-state="open"] {
  background: hsl(var(--muted) / 0.25);
}

.circlebot-marquee-shell {
  contain: paint;
}

.circlebot-marquee-track {
  width: max-content;
  animation: circlebot-marquee-scroll 34s linear infinite;
  transform: translate3d(0, 0, 0);
}

.circlebot-marquee-shell:hover .circlebot-marquee-track {
  animation-play-state: paused;
}

@keyframes circlebot-marquee-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (max-width: 767px) {
  header .container {
    padding-inline: 0;
  }

  .circlebot-mobile-menu {
    margin-inline: 0.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .circlebot-js .circlebot-reveal,
  .circlebot-js [data-char="true"].circlebot-reveal,
  .circlebot-mobile-menu,
  .circlebot-faq-panel,
  .circlebot-marquee-track {
    animation: none !important;
    opacity: 1;
    transform: none !important;
    transition: none !important;
  }

  .circlebot-faq-panel {
    max-height: none;
  }
}

/* Trang lệnh có hàng trăm card, nên bỏ reveal animation từng card để tránh trắng trang/chậm máy. */
[data-disable-reveal="true"],
.circlebot-js [data-disable-reveal="true"],
.circlebot-js [data-disable-reveal="true"].circlebot-reveal,
.circlebot-js [data-disable-reveal="true"] .circlebot-reveal,
.circlebot-js [data-command-card].circlebot-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

[data-command-card] {
  content-visibility: auto;
  contain-intrinsic-size: 220px;
}

.command-card {
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.command-card:hover {
  transform: translateY(-2px);
}