html, body, #root { height: 100%; }
body {
  background:
    radial-gradient(1200px 600px at 75% -10%, rgba(166,248,74,0.10), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(80,160,255,0.08), transparent 60%),
    #070809;
  background-attachment: fixed;
}

/* Custom scrollbar */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); }

/* Glass surface helper */
.glass {
  background: rgba(255,255,255,0.025);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.06);
}
.glass-strong {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.07);
}
.hairline { box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.06); }

/* Neon dot pulse */
@keyframes pulse-lime {
  0%, 100% { box-shadow: 0 0 0 0 rgba(166,248,74,0.55); }
  50% { box-shadow: 0 0 0 6px rgba(166,248,74,0); }
}
.dot-online { animation: pulse-lime 2.2s ease-in-out infinite; }

/* Aurora background utility for landing */
.aurora::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 60% at 70% 10%, rgba(166,248,74,0.18), transparent 60%),
    radial-gradient(40% 60% at 10% 90%, rgba(96,180,255,0.12), transparent 60%);
  pointer-events: none;
}

/* Grid pattern */
.grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}

/* Typing dots */
@keyframes typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-3px); opacity: 1; }
}
.typing-dot { animation: typing-bounce 1.2s infinite ease-in-out; }
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }

/* Subtle shine on hover for primary buttons */
.btn-lime {
  background: linear-gradient(180deg, #C7FB7C 0%, #A6F84A 60%, #8EE029 100%);
  color: #0a0b0f;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 -1px 0 rgba(0,0,0,0.15) inset, 0 10px 30px -10px rgba(166,248,74,0.55);
  transition: transform 120ms ease, box-shadow 200ms ease;
}
.btn-lime:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 -1px 0 rgba(0,0,0,0.15) inset, 0 14px 36px -10px rgba(166,248,74,0.7); }
.btn-lime:active { transform: translateY(0); }

/* Disable text selection on chrome */
.no-select { user-select: none; -webkit-user-select: none; }

/* Truncate-2 */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Range input styling */
input[type="range"] { -webkit-appearance: none; appearance: none; height: 4px; background: rgba(255,255,255,0.08); border-radius: 999px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 999px; background: #A6F84A; box-shadow: 0 0 0 3px rgba(166,248,74,0.18); cursor: pointer; }

/* Hide scrollbar where needed */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* ---- Chat widget theming -------------------------------------------------
   The widget renders inside a TRANSPARENT iframe on customer sites, so it can
   never rely on a page background behind it (backdrop-filter can't sample the
   host page from inside an iframe). Dark mode therefore needs a solid card. */
.widget-card-dark {
  background: linear-gradient(180deg, #14181d 0%, #0b0e11 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,0.55);
}

/* Light-mode widget: the card content is written in the app's dark idiom
   (text-white/NN, bg-white/[0.0N], border-white/[0.0N]). Instead of forking
   every element, remap those utilities inside a `.loop-light` card. */
.loop-light .text-white\/95, .loop-light .text-white\/90, .loop-light .text-white\/85 { color: #14171c; }
.loop-light .text-white\/75, .loop-light .text-white\/70, .loop-light .text-white\/60 { color: #3f4650; }
.loop-light .text-white\/55, .loop-light .text-white\/50, .loop-light .text-white\/45 { color: #5b6472; }
.loop-light .text-white\/40, .loop-light .text-white\/35, .loop-light .text-white\/30, .loop-light .text-white\/25 { color: #8a93a1; }
.loop-light [class*="placeholder:text-white/"]::placeholder { color: #9aa3af; }
.loop-light [class^="bg-white/"], .loop-light [class*=" bg-white/"] { background-color: #f2f4f6; }
.loop-light [class^="border-white/"], .loop-light [class*=" border-white/"] { border-color: #dde2e8; }
.loop-light [class*="hover:bg-white/"]:hover { background-color: #e8ebee; }
.loop-light [class^="border-white/"]:focus, .loop-light [class*=" border-white/"]:focus { border-color: rgba(142,224,41,0.65); }
.loop-light .ring-ink-900 { --tw-ring-color: #ffffff; }
.loop-light .typing-dot { background-color: #6b7280; }