/* Chat: avoid extra blank space under the composer when upload feedback is empty. */
#upload_feedback:empty {
  display: none;
}
/* Global site tweaks extracted from templates */

/* Smooth scrolling site-wide (anchors/programmatic scroll). */
html { scroll-behavior: smooth; }

html,
body {
  background-color: rgb(2 6 23);
}

/* Chat container should snap instantly (JS provides any desired animation).
   Also prevent horizontal overflow (mobile swipe gestures can cause a side-scroll glow/line). */
#chat_container {
  scroll-behavior: auto;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

#chat_messages { overflow-x: hidden; }

/* Hide chat pane until initial snap-to-bottom completes. */
.vixo-chat-init-hidden { visibility: hidden; }

/* Theme-aware: message action buttons (reply / reaction / 3-dots)
   - Light theme: keep the existing Tailwind bg/border from templates.
   - Dark theme: remove the bg/border so buttons don't look like white pills.
   Note: The site uses html.theme-dark/theme-light (not Tailwind's .dark). */
html.theme-dark .vixo-msg [data-msg-actions] [data-reply-button],
html.theme-dark .vixo-msg [data-msg-actions] [data-reaction-toggle],
html.theme-dark .vixo-msg [data-msg-actions] [data-message-menu-toggle] {
  background-color: transparent !important;
  border-color: transparent !important;
  color: rgb(229 231 235 / 0.9) !important;
}

html.theme-dark .vixo-msg [data-msg-actions] [data-reply-button]:hover,
html.theme-dark .vixo-msg [data-msg-actions] [data-reaction-toggle]:hover,
html.theme-dark .vixo-msg [data-msg-actions] [data-message-menu-toggle]:hover {
  background-color: rgb(255 255 255 / 0.06) !important;
  color: rgb(255 255 255 / 0.95) !important;
}

/* Mobile chat UX: hide per-message action icons (reply/+ / ⋮) unless the message is long-pressed. */
@media (max-width: 639px) {
  .vixo-msg [data-msg-actions] {
    opacity: 0;
    pointer-events: none;
  }
  .vixo-msg.vixo-actions-open [data-msg-actions] {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Make linkified URLs clearly clickable in chat bubbles */
.chat-message-body a { text-decoration: underline; cursor: pointer; }

@keyframes vixoPollPopIn {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
    filter: saturate(0.9) brightness(0.92);
  }
  55% {
    opacity: 1;
    transform: translateY(-3px) scale(1.02);
    filter: saturate(1.1) brightness(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: saturate(1) brightness(1);
  }
}

@keyframes vixoPollRefreshPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
  50% {
    transform: scale(1.012);
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0.08);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

@keyframes vixoPollOptionPress {
  0% { transform: scale(1); }
  50% { transform: scale(0.985); }
  100% { transform: scale(1); }
}

@keyframes vixoPollOptionSelected {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
    transform: translateY(0) scale(1);
  }
  35% {
    box-shadow: 0 0 0 8px rgba(34, 211, 238, 0.16);
    transform: translateY(-1px) scale(1.01);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
    transform: translateY(0) scale(1);
  }
}

.vixo-poll-pop-in {
  animation: vixoPollPopIn 520ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

.vixo-poll-refresh-pulse {
  animation: vixoPollRefreshPulse 420ms ease-out;
}

[data-poll-vote-btn="1"].vixo-poll-option-press {
  animation: vixoPollOptionPress 220ms ease-out;
}

[data-poll-vote-btn="1"].vixo-poll-option-selected {
  animation: vixoPollOptionSelected 620ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

/* Poll modal validation error readability */
#chat_poll_error {
  color: rgb(127 29 29) !important;
  background: rgb(254 242 242 / 0.96) !important;
  border-color: rgb(252 165 165 / 0.9) !important;
}

html.theme-dark #chat_poll_error {
  color: rgb(254 202 202) !important;
  background: rgb(190 24 93 / 0.14) !important;
  border-color: rgb(251 113 133 / 0.42) !important;
}

@media (prefers-reduced-motion: reduce) {
  .vixo-poll-pop-in,
  .vixo-poll-refresh-pulse,
  [data-poll-vote-btn="1"].vixo-poll-option-press,
  [data-poll-vote-btn="1"].vixo-poll-option-selected {
    animation: none !important;
  }
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

/* Founder Club UI (name glow + crown + badges) */
.founder {
  color: #ffd700;
  text-shadow:
    0 0 5px #ffd700,
    0 0 10px #ffcc00,
    0 0 20px #ff9900;
  font-weight: 600;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  user-select: none;
}

.founder-badge {
  background: linear-gradient(135deg, #ffcc00, #ff9900);
  color: #000;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 11px;
  margin-left: 6px;
  font-weight: 700;
}

/* Chat: superuser name + verified tick (thunder flicker effect) */
.vixo-superuser-name-shock {
  color: rgb(240 249 255);
  display: inline-block;
  position: relative;
  white-space: nowrap;
  isolation: isolate;
  text-decoration: none;
  background: transparent !important;
  --vixo-glow-a: rgba(125, 211, 252, 1);
  --vixo-glow-b: rgba(56, 189, 248, 0.95);
  --vixo-glow-c: rgba(59, 130, 246, 0.84);
  text-shadow:
    0 0 2px var(--vixo-glow-a),
    0 0 10px var(--vixo-glow-b),
    0 0 18px var(--vixo-glow-c),
    0 0 26px var(--vixo-glow-c);
  animation: vixoSuperuserThunderBurst 3.4s linear infinite !important;
}

.vixo-superuser-name-shock::after {
  content: attr(data-vixo-name);
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: transparent;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(251, 146, 60, 0.15) 16%,
    rgba(249, 115, 22, 0.9) 38%,
    rgba(250, 204, 21, 0.98) 50%,
    rgba(56, 189, 248, 0.88) 62%,
    rgba(59, 130, 246, 0.4) 72%,
    transparent 100%
  );
  background-size: 240% 100%;
  background-repeat: no-repeat;
  background-position: -140% 0;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.45)) drop-shadow(0 0 14px rgba(250, 204, 21, 0.32));
  animation: vixoSuperuserFireSweep 3.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.vixo-user-glow-aurora,
.vixo-user-glow-sunset,
.vixo-user-glow-neon,
.vixo-user-glow-rose,
.vixo-user-glow-electric,
.vixo-user-glow-toxic,
.vixo-user-glow-royal,
.vixo-user-glow-ice,
.vixo-user-glow-cosmic {
  display: inline;
  background: transparent !important;
  text-decoration: none;
  text-shadow:
    0 0 2px var(--vixo-glow-a, rgba(255, 255, 255, 0.96)),
    0 0 10px var(--vixo-glow-b, rgba(255, 255, 255, 0.9)),
    0 0 18px var(--vixo-glow-c, rgba(255, 255, 255, 0.78)),
    0 0 26px var(--vixo-glow-c, rgba(255, 255, 255, 0.66));
  animation: vixoNameGlowPulse 2.35s ease-in-out infinite;
}

.vixo-user-glow-aurora {
  color: #d9fff4;
  --vixo-glow-a: rgba(16, 185, 129, 0.96);
  --vixo-glow-b: rgba(56, 189, 248, 0.92);
  --vixo-glow-c: rgba(99, 102, 241, 0.76);
}

.vixo-user-glow-sunset {
  color: #ffe3d1;
  --vixo-glow-a: rgba(249, 115, 22, 0.97);
  --vixo-glow-b: rgba(244, 63, 94, 0.9);
  --vixo-glow-c: rgba(250, 204, 21, 0.72);
}

.vixo-user-glow-neon {
  color: #e6f7ff;
  --vixo-glow-a: rgba(34, 211, 238, 0.99);
  --vixo-glow-b: rgba(96, 165, 250, 0.92);
  --vixo-glow-c: rgba(167, 139, 250, 0.74);
}

.vixo-user-glow-rose {
  color: #ffe9f1;
  --vixo-glow-a: rgba(251, 113, 133, 0.98);
  --vixo-glow-b: rgba(244, 114, 182, 0.9);
  --vixo-glow-c: rgba(251, 191, 36, 0.68);
}

.vixo-user-glow-electric {
  color: #e6eeff;
  --vixo-glow-a: rgba(37, 99, 235, 0.98);
  --vixo-glow-b: rgba(14, 165, 233, 0.94);
  --vixo-glow-c: rgba(56, 189, 248, 0.75);
}

.vixo-user-glow-toxic {
  color: #efffd7;
  --vixo-glow-a: rgba(132, 204, 22, 0.98);
  --vixo-glow-b: rgba(34, 197, 94, 0.9);
  --vixo-glow-c: rgba(163, 230, 53, 0.72);
}

.vixo-user-glow-royal {
  color: #f1e8ff;
  --vixo-glow-a: rgba(124, 58, 237, 0.97);
  --vixo-glow-b: rgba(168, 85, 247, 0.92);
  --vixo-glow-c: rgba(236, 72, 153, 0.74);
}

.vixo-user-glow-ice {
  color: #eaffff;
  --vixo-glow-a: rgba(6, 182, 212, 0.96);
  --vixo-glow-b: rgba(56, 189, 248, 0.9);
  --vixo-glow-c: rgba(147, 197, 253, 0.76);
}

.vixo-user-glow-cosmic {
  color: #f7e8ff;
  --vixo-glow-a: rgba(217, 70, 239, 0.98);
  --vixo-glow-b: rgba(139, 92, 246, 0.92);
  --vixo-glow-c: rgba(59, 130, 246, 0.76);
}

.vixo-glow-swatch {
  display: block;
  width: 100%;
  height: 1.05rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.vixo-glow-swatch-aurora {
  background: linear-gradient(90deg, #34d399, #22d3ee, #6366f1);
}

.vixo-glow-swatch-sunset {
  background: linear-gradient(90deg, #fb923c, #f43f5e, #facc15);
}

.vixo-glow-swatch-neon {
  background: linear-gradient(90deg, #22d3ee, #60a5fa, #a78bfa);
}

.vixo-glow-swatch-rose {
  background: linear-gradient(90deg, #fb7185, #f472b6, #fbbf24);
}

.vixo-glow-swatch-electric {
  background: linear-gradient(90deg, #2563eb, #0ea5e9, #38bdf8);
}

.vixo-glow-swatch-toxic {
  background: linear-gradient(90deg, #84cc16, #22c55e, #a3e635);
}

.vixo-glow-swatch-royal {
  background: linear-gradient(90deg, #7c3aed, #a855f7, #ec4899);
}

.vixo-glow-swatch-ice {
  background: linear-gradient(90deg, #06b6d4, #38bdf8, #93c5fd);
}

.vixo-glow-swatch-cosmic {
  background: linear-gradient(90deg, #d946ef, #8b5cf6, #3b82f6);
}

.vixo-superuser-verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  border: 1px solid rgb(125 211 252 / 0.75);
  background: rgb(14 165 233 / 0.22);
  color: rgb(224 242 254);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    0 0 0 rgba(56, 189, 248, 0),
    0 0 0 rgba(56, 189, 248, 0);
  animation: vixoSuperuserTickShock 1.05s steps(1, end) infinite;
}

@keyframes vixoNameGlowPulse {
  0%,
  100% {
    opacity: 0.98;
    text-shadow:
      0 0 2px var(--vixo-glow-a),
      0 0 10px var(--vixo-glow-b),
      0 0 18px var(--vixo-glow-c),
      0 0 26px var(--vixo-glow-c);
  }
  46% {
    opacity: 1;
    text-shadow:
      0 0 3px var(--vixo-glow-a),
      0 0 14px var(--vixo-glow-b),
      0 0 24px var(--vixo-glow-c),
      0 0 34px var(--vixo-glow-c);
  }
  52% {
    opacity: 0.94;
    text-shadow:
      0 0 2px var(--vixo-glow-a),
      0 0 11px var(--vixo-glow-b),
      0 0 20px var(--vixo-glow-c),
      0 0 30px var(--vixo-glow-c);
  }
  56% {
    opacity: 1;
    text-shadow:
      0 0 4px var(--vixo-glow-a),
      0 0 16px var(--vixo-glow-b),
      0 0 28px var(--vixo-glow-c),
      0 0 40px var(--vixo-glow-c);
  }
  60% {
    opacity: 0.96;
    text-shadow:
      0 0 3px var(--vixo-glow-a),
      0 0 12px var(--vixo-glow-b),
      0 0 22px var(--vixo-glow-c),
      0 0 32px var(--vixo-glow-c);
  }
}

@keyframes vixoSuperuserFireSweep {
  0% {
    opacity: 0;
    background-position: -140% 0;
  }
  10% {
    opacity: 0.68;
  }
  68% {
    opacity: 0.95;
    background-position: 125% 0;
  }
  74% {
    opacity: 0.34;
    background-position: 140% 0;
  }
  100% {
    opacity: 0;
    background-position: 140% 0;
  }
}

@keyframes vixoSuperuserThunderBurst {
  0%,
  70%,
  77%,
  83%,
  89%,
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    text-shadow:
      0 0 2px var(--vixo-glow-a),
      0 0 10px var(--vixo-glow-b),
      0 0 18px var(--vixo-glow-c),
      0 0 26px var(--vixo-glow-c);
  }
  73%,
  79%,
  85% {
    opacity: 0.94;
    transform: translate3d(-0.3px, 0.2px, 0) scale(1.02);
    text-shadow:
      0 0 3px var(--vixo-glow-a),
      0 0 14px var(--vixo-glow-b),
      0 0 24px var(--vixo-glow-c),
      0 0 34px var(--vixo-glow-c);
  }
  75%,
  81%,
  87% {
    opacity: 1;
    transform: translate3d(0.5px, -0.4px, 0) scale(1.045);
    text-shadow:
      0 0 4px var(--vixo-glow-a),
      0 0 18px var(--vixo-glow-b),
      0 0 30px var(--vixo-glow-c),
      0 0 42px var(--vixo-glow-c);
  }
}

@keyframes vixoSuperuserTickShock {
  0%, 6%, 10%, 16%, 27%, 31%, 43%, 100% {
    opacity: 1;
    box-shadow:
      0 0 0 rgba(56, 189, 248, 0),
      0 0 0 rgba(56, 189, 248, 0);
    transform: translate3d(0, 0, 0);
  }
  7%, 11%, 17%, 28%, 44% {
    opacity: 0.86;
    box-shadow:
      0 0 10px rgba(56, 189, 248, 0.8),
      0 0 18px rgba(56, 189, 248, 0.65);
    transform: translate3d(0.3px, -0.3px, 0) scale(1.03);
  }
  8%, 12%, 18%, 29%, 45% {
    opacity: 1;
    box-shadow:
      0 0 15px rgba(56, 189, 248, 1),
      0 0 26px rgba(59, 130, 246, 0.9);
    transform: translate3d(-0.5px, 0.4px, 0) scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vixo-user-glow-aurora,
  .vixo-user-glow-sunset,
  .vixo-user-glow-neon,
  .vixo-user-glow-rose,
  .vixo-user-glow-electric,
  .vixo-user-glow-toxic,
  .vixo-user-glow-royal,
  .vixo-user-glow-ice,
  .vixo-user-glow-cosmic,
  .vixo-superuser-name-shock,
  .vixo-superuser-verified-badge {
    animation: none !important;
    transform: none !important;
  }

  .vixo-superuser-name-shock::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* Ensure global confirm/prompt always appear above any HTMX/global modals.
   (Profile modal uses z-[60], while confirm/prompt were z-50 in markup.) */
#confirm-modal,
#prompt-modal {
  z-index: 10000 !important;
}

/* Global announcement banner (admin-set) */
.vixo-marquee {
  overflow: hidden;
  white-space: nowrap;
}

.vixo-marquee-track {
  display: inline-block;
  padding-left: 100%;
  will-change: transform;
  animation: vixoMarquee 22s linear infinite;
}

.vixo-global-banner:hover .vixo-marquee-track,
.vixo-marquee-track.is-paused {
  animation-play-state: paused;
}

@keyframes vixoMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .vixo-marquee-track {
    animation: none;
    padding-left: 0;
  }
}

/* Auth pages (login/signup): full background image + glass card */
.vixo-auth-bg {
  /* Defaults; can be overridden per-page via inline style. */
  --vixo-auth-overlay: 0.78;
  background-image:
    linear-gradient(
      rgba(2, 6, 23, var(--vixo-auth-overlay)),
      rgba(2, 6, 23, var(--vixo-auth-overlay))
    ),
    var(--vixo-auth-bg);
  background-size: var(--vixo-auth-bg-size, cover);
  background-position: var(--vixo-auth-bg-position, center);
  background-repeat: no-repeat;

  /* Page transition (enter/leave) */
  opacity: 1;
  transform: translateY(0);
  filter: none;
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}

/* Auth background: allow tuning crop on small screens (e.g. keep left-side artwork visible). */
@media (max-width: 639px) {
  .vixo-auth-bg {
    background-position: var(
      --vixo-auth-bg-position-mobile,
      var(--vixo-auth-bg-position, center)
    );
    background-size: var(
      --vixo-auth-bg-size-mobile,
      var(--vixo-auth-bg-size, cover)
    );
  }

  /* On very small screens, a single "cover" crop can hide one side of the artwork.
     These subtle corner overlays ensure both left-top and right-bottom details remain visible. */
  .vixo-auth-bg {
    isolation: isolate;
  }

  .vixo-auth-bg::before,
  .vixo-auth-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    user-select: none;
    background-image: var(--vixo-auth-bg);
    background-repeat: no-repeat;
    background-size: var(--vixo-auth-bg-corner-size-mobile, 180% auto);
    opacity: var(--vixo-auth-bg-corner-opacity-mobile, 0.40);
  }

  .vixo-auth-bg::before {
    background-position: left top;
  }

  .vixo-auth-bg::after {
    background-position: right bottom;
  }
}

/* Full-page emoji particles on auth pages (mounted inside .vixo-auth-bg) */
.vixo-auth-bg-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
}

.vixo-auth-bg-particle {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  font-size: clamp(0.78rem, 1.2vw, 1.15rem);
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.38),
    0 0 20px rgba(255, 255, 255, 0.24);
  transform: translate3d(0, 0, 0) scale(var(--vixo-particle-scale, 1));
  will-change: transform, opacity;
  animation-name: vixoAuthEmojiFloat;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes vixoAuthEmojiFloat {
  0% {
    transform: translate3d(0, 8px, 0) scale(var(--vixo-particle-scale, 1));
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  48% {
    transform: translate3d(var(--vixo-particle-drift, 0px), -10px, 0) scale(var(--vixo-particle-scale, 1));
    opacity: 1;
  }
  100% {
    transform: translate3d(calc(var(--vixo-particle-drift, 0px) * -0.4), -30px, 0) scale(var(--vixo-particle-scale, 1));
    opacity: 0;
  }
}

/* Auth pages: video background (keeps content layout unchanged). */
.vixo-auth-bg.vixo-auth-bg--video {
  background-image: none;
  background-color: rgb(2 6 23);
  isolation: isolate;
}

.vixo-auth-bg-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.vixo-auth-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vixo-auth-bg-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    rgba(2, 6, 23, var(--vixo-auth-overlay, 0.78)),
    rgba(2, 6, 23, var(--vixo-auth-overlay, 0.78))
  );
}

/* Onboarding background: alternate left/right light side per step with smooth switch animation. */
.vixo-auth-bg.vixo-onboarding-bg {
  --vixo-onboarding-bg-pos: 22% center;
  --vixo-onboarding-bg-flip: 1;
  --vixo-onboarding-hue: 0deg;
  --vixo-onboarding-sat: 1;
  --vixo-onboarding-bright: 1;
  background-position: var(--vixo-onboarding-bg-pos);
  filter: hue-rotate(var(--vixo-onboarding-hue)) saturate(var(--vixo-onboarding-sat)) brightness(var(--vixo-onboarding-bright));
  transition:
    background-position 420ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: background-position, filter;
}

.vixo-auth-bg.vixo-onboarding-bg.vixo-onboarding-bg--left {
  --vixo-onboarding-bg-pos: 22% center;
  --vixo-onboarding-bg-flip: 1;
  --vixo-onboarding-hue: 0deg;
  --vixo-onboarding-sat: 1;
  --vixo-onboarding-bright: 1;
}

.vixo-auth-bg.vixo-onboarding-bg.vixo-onboarding-bg--right {
  --vixo-onboarding-bg-pos: 78% center;
  --vixo-onboarding-bg-flip: -1;
  --vixo-onboarding-hue: 185deg;
  --vixo-onboarding-sat: 1.08;
  --vixo-onboarding-bright: 1.01;
}

.vixo-auth-bg.vixo-onboarding-bg.vixo-onboarding-bg--enter-left {
  animation: vixoOnboardingBgEnterLeft 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.vixo-auth-bg.vixo-onboarding-bg.vixo-onboarding-bg--enter-right {
  animation: vixoOnboardingBgEnterRight 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.vixo-auth-bg.vixo-onboarding-bg.vixo-onboarding-bg--leave-left {
  animation: vixoOnboardingBgLeaveLeft 230ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.vixo-auth-bg.vixo-onboarding-bg.vixo-onboarding-bg--leave-right {
  animation: vixoOnboardingBgLeaveRight 230ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes vixoOnboardingBgEnterLeft {
  0% {
    background-position: 78% center;
    filter: hue-rotate(185deg) brightness(0.92) saturate(0.92);
  }
  100% {
    background-position: 22% center;
    filter: hue-rotate(0deg) brightness(1) saturate(1);
  }
}

@keyframes vixoOnboardingBgEnterRight {
  0% {
    background-position: 22% center;
    filter: hue-rotate(0deg) brightness(0.92) saturate(0.92);
  }
  100% {
    background-position: 78% center;
    filter: hue-rotate(185deg) brightness(1.01) saturate(1.08);
  }
}

@keyframes vixoOnboardingBgLeaveLeft {
  0% {
    background-position: 22% center;
    filter: hue-rotate(0deg) brightness(1) saturate(1);
  }
  100% {
    background-position: 36% center;
    filter: hue-rotate(95deg) brightness(0.9) saturate(0.86);
  }
}

@keyframes vixoOnboardingBgLeaveRight {
  0% {
    background-position: 78% center;
    filter: hue-rotate(185deg) brightness(1.01) saturate(1.08);
  }
  100% {
    background-position: 64% center;
    filter: hue-rotate(90deg) brightness(0.9) saturate(0.86);
  }
}

@media (max-width: 767px) {
  .vixo-auth-bg.vixo-onboarding-bg.vixo-onboarding-bg--left,
  .vixo-auth-bg.vixo-onboarding-bg.vixo-onboarding-bg--right {
    --vixo-onboarding-bg-pos: center;
  }
}

/* Auth page watermark (decorative, behind the card) */
.vixo-auth-watermark {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  display: block;
}

.vixo-auth-watermark__pos {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: min(52rem, 92vw);
}

/* Place watermark into the left side of the hero (used on login). */
.vixo-auth-watermark--left .vixo-auth-watermark__pos {
  left: 1.25rem;
  top: 66%;
  transform: translate(0, -50%);
  width: min(40rem, 92vw);
}

/* Place watermark into the gap between character and card on md+ */
@media (min-width: 768px) {
  .vixo-auth-watermark--between .vixo-auth-watermark__pos {
    left: 52%;
    top: 58%;
    width: min(52rem, 70vw);
  }
  .vixo-auth-watermark--between .vixo-auth-watermark__text {
    transform: rotate(-12deg) translateX(-6%);
  }

  .vixo-auth-watermark--left .vixo-auth-watermark__pos {
    left: 3.25%;
    top: 64%;
    width: min(44rem, 40vw);
  }
  .vixo-auth-watermark--left .vixo-auth-watermark__text {
    transform: rotate(-12deg);
    font-size: clamp(1.9rem, 4.7vw, 5.2rem);
  }
}

@media (min-width: 1024px) {
  .vixo-auth-watermark--between .vixo-auth-watermark__pos {
    left: 53.5%;
    top: 57%;
    width: min(58rem, 64vw);
  }

  .vixo-auth-watermark--left .vixo-auth-watermark__pos {
    left: 4.25%;
    top: 64%;
    width: min(48rem, 38vw);
  }
}

@media (min-width: 1280px) {
  .vixo-auth-watermark--between .vixo-auth-watermark__pos {
    left: 54.5%;
    top: 56%;
    width: min(60rem, 60vw);
  }

  .vixo-auth-watermark--left .vixo-auth-watermark__pos {
    left: 5.25%;
    top: 65%;
    width: min(52rem, 36vw);
  }
}

.vixo-auth-watermark__text {
  max-width: 100%;
  text-align: left;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.04;
  font-size: clamp(2.1rem, 5.2vw, 5.6rem);
  transform: rotate(-7deg);

  /* Subtle cinematic gradient text (white -> light grey). */
  background: linear-gradient(
    112deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(244, 244, 248, 0.78) 45%,
    rgba(229, 231, 235, 0.72) 100%
  );
  background-size: 260% 260%;
  background-position: 0% 50%;

  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0.34;

  /* Helps readability over the bg image without becoming “loud”. */
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.16);

  text-shadow:
    0 0 18px rgba(255, 215, 0, 0.42),
    0 0 42px rgba(255, 193, 7, 0.46),
    0 0 76px rgba(255, 160, 0, 0.4),
    0 0 116px rgba(212, 140, 0, 0.34);

  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.22));
  will-change: transform, background-position, filter, opacity;

  animation:
    vixoAuthWatermarkFloat 5.2s ease-in-out infinite,
    vixoAuthWatermarkShimmer 2.8s ease-in-out infinite,
    vixoAuthWatermarkGlowPulse 1.9s ease-in-out infinite;
}

.vixo-auth-watermark__nowrap {
  white-space: nowrap;
}

/* Auth pages: floating chat message bubbles (decorative). */
.vixo-auth-bubbles {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(58%, 760px);
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.vixo-auth-bubble {
  position: absolute;
  left: var(--bubble-left, 12%);
  top: var(--bubble-top, 18%);
  max-width: min(16rem, 58vw);
  padding: 0.6rem 0.8rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(120deg, rgba(17, 24, 39, 0.78), rgba(76, 29, 149, 0.55));
  box-shadow:
    0 12px 28px rgba(2, 6, 23, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.07) inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition: opacity 260ms ease, transform 260ms ease;
  will-change: opacity, transform;
}

.vixo-auth-bubble.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: vixoAuthBubbleFloat 3.8s ease-in-out infinite;
}

.vixo-auth-bubble__name {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.68rem;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(196, 181, 253, 0.95);
}

.vixo-auth-bubble__text {
  display: block;
  font-size: 0.95rem;
  line-height: 1.3;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.97);
}

@keyframes vixoAuthBubbleFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-7px) scale(1.015);
  }
}

@media (max-width: 767px) {
  .vixo-auth-bubbles {
    inset: 0;
    width: 100%;
    height: 54%;
  }

  .vixo-auth-bubble {
    max-width: min(13rem, 66vw);
    padding: 0.52rem 0.7rem;
  }

  .vixo-auth-bubble__text {
    font-size: 0.86rem;
  }
}

/* Auth login card: shake on invalid credentials (non-field errors). */
.vixo-auth-card--shake {
  animation: vixoAuthCardShake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  will-change: transform;
}

/* Auth card: success-leave transition (slide up + fade) before redirect. */
.vixo-auth-card {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);

  transition:
    transform 240ms ease,
    opacity 240ms ease,
    filter 240ms ease;

  /* Particles mount (emoji floating bg). */
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Auth fields: soft neon-purple focus glow for username/password and related inputs. */
.vixo-auth-page .vixo-field-with-icon > input,
.vixo-auth-page .vixo-field-with-icon > select,
.vixo-auth-page .vixo-field-with-icon > textarea {
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.vixo-auth-page .vixo-field-with-icon > input:focus,
.vixo-auth-page .vixo-field-with-icon > select:focus,
.vixo-auth-page .vixo-field-with-icon > textarea:focus {
  border-color: rgba(167, 139, 250, 0.78) !important;
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.48),
    0 0 18px rgba(142, 45, 226, 0.34),
    0 0 36px rgba(142, 45, 226, 0.18);
}

/* Login/auth failure: show subtle red field feedback on invalid fields. */
.vixo-auth-login-form--invalid .vixo-field-with-icon > input,
.vixo-auth-page .vixo-field-with-icon.vixo-field-invalid > input,
.vixo-auth-page .vixo-field-with-icon.vixo-field-invalid > select,
.vixo-auth-page .vixo-field-with-icon.vixo-field-invalid > textarea {
  border-color: rgba(248, 113, 113, 0.88) !important;
  box-shadow:
    0 0 0 1px rgba(248, 113, 113, 0.55),
    0 0 20px rgba(239, 68, 68, 0.36),
    0 0 38px rgba(220, 38, 38, 0.24);
}

.vixo-auth-login-form--invalid .vixo-field-with-icon > input:focus,
.vixo-auth-page .vixo-field-with-icon.vixo-field-invalid > input:focus,
.vixo-auth-page .vixo-field-with-icon.vixo-field-invalid > select:focus,
.vixo-auth-page .vixo-field-with-icon.vixo-field-invalid > textarea:focus {
  border-color: rgba(254, 202, 202, 0.95) !important;
  box-shadow:
    0 0 0 1px rgba(252, 165, 165, 0.62),
    0 0 26px rgba(239, 68, 68, 0.42),
    0 0 44px rgba(220, 38, 38, 0.28);
}

/* Auth CTA shimmer effect. */
.vixo-auth-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.vixo-auth-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.38) 48%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-22deg);
  pointer-events: none;
}

.vixo-auth-cta:hover::before,
.vixo-auth-cta:focus-visible::before {
  animation: vixoAuthCtaShimmer 900ms ease forwards;
}

@keyframes vixoAuthCtaShimmer {
  0% {
    left: -130%;
  }
  100% {
    left: 150%;
  }
}

/* Keep all card content above the particles layer. */
.vixo-auth-card > * {
  position: relative;
  z-index: 1;
}

.vixo-auth-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

.vixo-auth-particles canvas {
  width: 100% !important;
  height: 100% !important;
}

.vixo-auth-card--success-leave {
  transform: translateY(-22px) scale(0.99);
  opacity: 0;
  filter: blur(1px);
}

@keyframes vixoAuthCardShake {
  0% { transform: translate3d(0, 0, 0); }
  10% { transform: translate3d(-3px, 0, 0); }
  20% { transform: translate3d(4px, 0, 0); }
  30% { transform: translate3d(-6px, 0, 0); }
  40% { transform: translate3d(6px, 0, 0); }
  50% { transform: translate3d(-5px, 0, 0); }
  60% { transform: translate3d(5px, 0, 0); }
  70% { transform: translate3d(-3px, 0, 0); }
  80% { transform: translate3d(3px, 0, 0); }
  90% { transform: translate3d(-1px, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes vixoAuthWatermarkFloat {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50% { transform: rotate(-7deg) translateY(-10px); }
}

@keyframes vixoAuthWatermarkShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes vixoAuthWatermarkGlowPulse {
  0%, 100% {
    opacity: 0.30;
    filter:
      drop-shadow(0 14px 30px rgba(0, 0, 0, 0.22))
      drop-shadow(0 0 34px rgba(255, 215, 0, 0.22))
      drop-shadow(0 0 52px rgba(255, 179, 0, 0.18));
  }
  50% {
    opacity: 0.5;
    filter:
      drop-shadow(0 18px 44px rgba(0, 0, 0, 0.24))
      drop-shadow(0 0 68px rgba(255, 193, 7, 0.34))
      drop-shadow(0 0 104px rgba(255, 160, 0, 0.3))
      drop-shadow(0 0 140px rgba(212, 140, 0, 0.26));
  }
}

@media (prefers-reduced-motion: reduce) {
  .vixo-auth-watermark__text {
    animation: none;
  }

  .vixo-auth-bg.vixo-onboarding-bg {
    transition: none;
  }

  .vixo-auth-bg.vixo-onboarding-bg.vixo-onboarding-bg--enter-left,
  .vixo-auth-bg.vixo-onboarding-bg.vixo-onboarding-bg--enter-right,
  .vixo-auth-bg.vixo-onboarding-bg.vixo-onboarding-bg--leave-left,
  .vixo-auth-bg.vixo-onboarding-bg.vixo-onboarding-bg--leave-right {
    animation: none;
  }

  .vixo-auth-bubble,
  .vixo-auth-bubble.is-visible {
    animation: none;
    transition: none;
  }

  .vixo-auth-card--shake {
    animation: none;
  }

  .vixo-auth-card {
    transition: none;
  }
}

/* Enter starts hidden, then JS removes the class to reveal. */
body.vixo-auth-page.vixo-page-enter .vixo-auth-bg {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(2px);
}

/* Leave fades out before navigation. */
body.vixo-auth-page.vixo-page-leave .vixo-auth-bg {
  opacity: 0;
  transform: translateY(-6px);
  filter: blur(2px);
}

/* Auth pages: force a single-column grid on mobile only. */
@media (max-width: 639px) {
  body.vixo-auth-page .vixo-site-grid {
    grid-template-columns: minmax(0, 100%) !important;
  }
}

/* Private chat: "new messages" jump indicator (logo bubble + arrow) */
.vixo-private-newmsg-indicator {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  pointer-events: auto;
}

.vixo-private-newmsg-bubble {
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(142, 45, 226, 0.92), rgba(74, 0, 224, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 160ms ease, filter 160ms ease;
}

.vixo-private-newmsg-indicator:hover .vixo-private-newmsg-bubble {
  transform: translateY(-1px) scale(1.03);
  filter: brightness(1.08);
}

.vixo-private-newmsg-indicator:active .vixo-private-newmsg-bubble {
  transform: translateY(0px) scale(0.98);
}

.vixo-private-newmsg-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}

.vixo-private-newmsg-arrow {
  width: 24px;
  height: 18px;
  color: rgba(255, 255, 255, 0.92);
  opacity: 0.95;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}

.vixo-private-newmsg-indicator.vixo-private-newmsg-pulse .vixo-private-newmsg-bubble {
  animation: vixoPrivateNewMsgPulse 1.35s ease-in-out infinite;
}

@keyframes vixoPrivateNewMsgPulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.05); }
}

.vixo-reaction-picker {
  display: flex;
  flex-wrap: wrap;
}

/* Inputs with a leading icon (used on auth forms). */
.vixo-field-with-icon > input,
.vixo-field-with-icon > select,
.vixo-field-with-icon > textarea {
  padding-left: 3rem !important;
}

@keyframes vixoMsgIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vixo-msg {
  animation: vixoMsgIn 0.18s ease-out both;
}

.vixo-chat-bg {
  background-image:
    radial-gradient(800px circle at 18% 10%, rgba(99, 102, 241, 0.10), transparent 60%),
    radial-gradient(700px circle at 82% 30%, rgba(168, 85, 247, 0.10), transparent 60%);
}

@keyframes vixoGearSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes vixoChallengeWiggle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-1px) rotate(-10deg); }
  50% { transform: translateY(-2px) rotate(10deg); }
  75% { transform: translateY(-1px) rotate(-7deg); }
}

@keyframes vixoGroupSweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

#vixo_private_settings_btn:hover .vixo-settings-gear {
  animation: vixoGearSpin 700ms linear;
}

#challenge_drawer_open:hover .vixo-challenge-icon {
  animation: vixoChallengeWiggle 650ms ease-in-out infinite;
}

.vixo-groupchat-link {
  position: relative;
  overflow: hidden;
}

.vixo-groupchat-link::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(16, 185, 129, 0.05) 32%,
    rgba(99, 102, 241, 0.18) 50%,
    rgba(16, 185, 129, 0.05) 68%,
    transparent 100%
  );
  opacity: 0;
  transform: translateX(-120%);
}

.vixo-groupchat-link:hover::after {
  opacity: 1;
  animation: vixoGroupSweep 650ms ease forwards;
}

.vixo-groupchat-link.font-semibold::after {
  display: none;
}

.vixo-settings-pane {
  color: #e5e7eb;
}

.vixo-settings-card {
  border: 1px solid rgba(129, 140, 248, 0.2);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(17, 24, 39, 0.92), rgba(17, 24, 39, 0.8)),
    radial-gradient(120% 140% at 0% 0%, rgba(139, 92, 246, 0.28), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(34, 197, 94, 0.2), transparent 60%);
  box-shadow: 0 14px 40px rgba(2, 6, 23, 0.55);
  padding: 12px;
  display: grid;
  gap: 9px;
}

.vixo-settings-title {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #f3f4f6;
}

.vixo-settings-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(75, 85, 99, 0.7);
  border-radius: 10px;
  background: rgba(17, 24, 39, 0.72);
  padding: 8px 10px;
}

.vixo-settings-field-icon {
  font-size: 12px;
  opacity: 0.85;
}

.vixo-settings-input {
  width: 100%;
  border: 0;
  background: transparent;
  color: #f3f4f6;
  font-size: 12px;
  line-height: 1.2;
  outline: 0;
}

.vixo-settings-input::placeholder {
  color: #9ca3af;
}

.vixo-settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(75, 85, 99, 0.55);
  border-radius: 10px;
  background: rgba(17, 24, 39, 0.58);
  padding: 8px 10px;
}

.vixo-settings-row-label {
  font-size: 11px;
  font-weight: 600;
  color: #e5e7eb;
}

.vixo-settings-social-wrap {
  border: 1px solid rgba(75, 85, 99, 0.55);
  border-radius: 10px;
  background: rgba(17, 24, 39, 0.58);
  padding: 8px 10px;
  display: grid;
  gap: 8px;
}

.vixo-settings-social-title {
  font-size: 11px;
  font-weight: 700;
  color: #d1d5db;
}

.vixo-settings-social-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vixo-settings-slow-chips {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.vixo-settings-slow-chip {
  border: 1px solid rgba(75, 85, 99, 0.8);
  border-radius: 8px;
  background: rgba(17, 24, 39, 0.78);
  color: #d1d5db;
  font-size: 10px;
  font-weight: 700;
  padding: 5px 4px;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.vixo-settings-slow-chip.is-active {
  border-color: rgba(129, 140, 248, 0.8);
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.26), rgba(34, 197, 94, 0.22));
  color: #f9fafb;
}

.vixo-settings-link-reset {
  height: 28px;
  width: 28px;
  border-radius: 8px;
  border: 1px solid rgba(75, 85, 99, 0.8);
  background: rgba(17, 24, 39, 0.78);
  color: #d1d5db;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vixo-settings-save-btn {
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(90deg, #8b5cf6, #6366f1 55%, #22c55e);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35);
}

.vixo-settings-save-btn:hover {
  filter: brightness(1.06);
}

@media (prefers-reduced-motion: reduce) {
  #vixo_private_settings_btn:hover .vixo-settings-gear,
  #challenge_drawer_open:hover .vixo-challenge-icon,
  .vixo-groupchat-link:hover::after {
    animation: none !important;
  }
}
/* Global site tweaks extracted from templates */

/* Smooth scrolling site-wide (anchors/programmatic scroll). */
html { scroll-behavior: smooth; }

/* Chat container should snap instantly (JS provides any desired animation). */
#chat_container { scroll-behavior: auto; }

/* Make linkified URLs clearly clickable in chat bubbles */
.chat-message-body a { text-decoration: underline; cursor: pointer; }

body {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

/* Chat text wrapping (handles very long no-space text like nnnnnnn...). */
.vixo-msg-text {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#id_body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Inputs with a leading icon (used on auth forms). */
.vixo-field-with-icon input {
  padding-left: 3rem !important;
}

@keyframes fadeInAndUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0px); }
}

.fade-in-up {
  animation: fadeInAndUp 0.35s ease;
}

/* Account pages use Tailwind arbitrary animation name fadeInUp. */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* HTMX OOB online count animation */
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(4); }
  to { opacity: 1; transform: scale(1); }
}

.fade-in-scale {
  animation: fadeInScale 0.6s ease;
}

/* Allauth email address management page field tweaks (scoped to avoid overriding signup/login). */
#account-email-page #id_email {
  width: 100%;
  background-color: #374151; /* gray-700 */
  color: #ffffff;
  border: 1px solid #4b5563; /* gray-600 */
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  outline: none;
}

/* Allauth change password page field tweaks. */
#account-password-change-page input[type="password"] {
  width: 100%;
  background-color: rgba(17, 24, 39, 0.35); /* gray-900/35 */
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0.75rem; /* rounded-xl */
  padding: 0.75rem 1rem;
  outline: none;
}

#account-password-change-page input[type="password"]::placeholder {
  color: #9ca3af; /* gray-400 */
}

#account-password-change-page input[type="password"]:focus {
  border-color: #10b981; /* emerald-500 */
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}

#account-email-page #id_email::placeholder {
  color: #9ca3af; /* gray-400 */
}

#account-email-page #id_email:focus {
  border-color: #0ea5e9; /* sky-500 */
}

/* Custom Scrollbar for Chat */

/* Global scrollbar: hide visuals everywhere but keep scrolling functional. */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Utility: hide scrollbar visuals but keep scrolling enabled. */
.vixo-scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.vixo-scrollbar-none::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Chat: hide scrollbar entirely to prevent the brief green thumb flash on programmatic scroll.
   Still scrollable via mouse wheel/touch/trackpad. */
#chat_container,
#chat_sidebar_panel {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE/Edge */
}

/* Chat page: allow page-level scroll so the footer + footer ads are reachable,
   but keep the scrollbar invisible (avoid the green bar at far right). */
body.vixo-chat-page {
  min-height: 100dvh;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
  overscroll-behavior-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/old Edge */
}

body.vixo-chat-page::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html.vixo-chat-page {
  min-height: 100dvh;
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
  overscroll-behavior-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/old Edge */
}

html.vixo-chat-page::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Some browsers show an overlay scrollbar thumb briefly on programmatic scroll.
   Our global scrollbar theme is green, so force ALL scrollbars to be invisible on chat page. */
html.vixo-chat-page {
  scrollbar-color: transparent transparent; /* Firefox */
}

html.vixo-chat-page * {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/old Edge */
}

html.vixo-chat-page *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html.vixo-chat-page *::-webkit-scrollbar-thumb,
html.vixo-chat-page *::-webkit-scrollbar-track {
  background: transparent !important;
}

/* Chat room list card UI (mobile-first, app-like) */
#chat_sidebar_panel .vixo-chat-room-link {
  width: 100%;
  padding: 0.62rem 0.72rem;
  background: rgba(17, 24, 39, 0.6);
  border-color: rgba(55, 65, 81, 0.75);
}

#chat_sidebar_panel .vixo-chat-room-link:hover {
  background: rgba(31, 41, 55, 0.82);
  border-color: rgba(75, 85, 99, 0.95);
}

#chat_sidebar_panel .vixo-chat-room-link-idle {
  color: rgb(209 213 219);
}

#chat_sidebar_panel .vixo-chat-room-link-active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.33), rgba(16, 185, 129, 0.2));
  border-color: rgba(129, 140, 248, 0.95);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.24);
  color: rgb(236 253 245);
}

#chat_sidebar_panel .vixo-chat-room-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 1px solid rgba(75, 85, 99, 0.9);
  background: linear-gradient(180deg, rgba(55, 65, 81, 0.9), rgba(31, 41, 55, 0.85));
  color: rgb(243 244 246);
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

#chat_sidebar_panel .vixo-chat-room-title {
  display: block;
  color: rgb(243 244 246);
  font-size: 0.9rem;
  line-height: 1.1rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#chat_sidebar_panel .vixo-chat-room-subtitle {
  display: block;
  margin-top: 0.12rem;
  color: rgb(156 163 175);
  font-size: 0.72rem;
  line-height: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1023px) {
  #chat_sidebar.fixed #chat_sidebar_panel {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background: linear-gradient(180deg, rgba(3, 7, 18, 0.96), rgba(17, 24, 39, 0.94)) !important;
    border-color: rgba(55, 65, 81, 0.95) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
}

/* Chat composer: keep it visible on mobile browser UI/safe areas.
   This moves the sticky bar slightly up and adds safe-area padding so it doesn't sit under the home indicator. */
#chat_composer_bar {
  bottom: env(safe-area-inset-bottom);
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

#typing_indicator.vixo-typing-indicator {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: calc(100% - 0.25rem);
  padding: 0.25rem 0.6rem;
  border-radius: 0.6rem;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.92), rgba(15, 23, 42, 0.86));
  border: 1px solid rgba(71, 85, 105, 0.35);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.45);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 220ms ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#typing_indicator.vixo-typing-indicator.vixo-typing-indicator-active {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 640px) {
  #typing_indicator.vixo-typing-indicator {
    left: 1rem;
    right: 1rem;
  }
}

/* Mobile chat: size the chat panels to the real header height (navbar + announcement banner).
   This prevents the composer from being pushed off-screen when the header is taller than our old hard-coded offset. */
@media (max-width: 639px) {
  html.vixo-chat-page #chat_window,
  html.vixo-chat-page #chat_sidebar_panel {
    height: calc(100dvh - var(--vixo-chat-top-offset, 96px) - (env(safe-area-inset-bottom) + 4.8rem)) !important;
  }
}

@media (max-width: 639px) {
  #chat_composer_bar {
    bottom: calc(env(safe-area-inset-bottom) + 2px);
  }
}

@media (max-width: 1023px) {
  html.vixo-chat-page.vixo-mobile-groups-open,
  body.vixo-chat-page.vixo-mobile-groups-open {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  #chat_window,
  #chat_container,
  #chat_sidebar_panel {
    overscroll-behavior: contain !important;
  }

  #chat_mobile_nav {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #chat_mobile_nav .chat-mobile-tab,
  #chat_mobile_tab_profile,
  #chat_mobile_tab_groups,
  #chat_mobile_tab_chat {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #chat_mobile_nav_tabs {
    position: relative;
    isolation: isolate;
  }

  #chat_mobile_tab_indicator {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: calc(100% / 3);
    border-radius: 0.75rem;
    background: rgba(31, 41, 55, 0.88);
    transform: translateX(0);
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 0;
  }

  #chat_mobile_nav .chat-mobile-tab {
    position: relative;
    z-index: 1;
    background: transparent !important;
    transition: color 180ms ease;
  }

  #chat_mobile_nav .chat-mobile-tab.is-active {
    background: transparent !important;
  }

  #chat_mobile_nav[data-active-tab='chat'] #chat_mobile_tab_indicator {
    transform: translateX(0%);
  }

  #chat_mobile_nav[data-active-tab='groups'] #chat_mobile_tab_indicator {
    transform: translateX(100%);
  }

  #chat_mobile_nav[data-active-tab='profile'] #chat_mobile_tab_indicator {
    transform: translateX(200%);
  }

  #chat_sidebar.fixed {
    padding-top: var(--vixo-chat-top-offset, 96px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 4.8rem) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  #chat_sidebar.fixed #chat_sidebar_panel {
    height: 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}

@media (min-width: 1024px) {
  #chat_sidebar_panel {
    width: 20rem !important;
    max-width: 20rem !important;
    border-radius: 1rem !important;
  }

  #chat_sidebar_panel [data-chat-list-item] {
    min-height: 2.5rem;
    border-radius: 0.75rem;
  }
}

#chat_container::-webkit-scrollbar,
#chat_sidebar_panel::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Extra guard: if the browser still paints an overlay thumb, make it invisible. */
#chat_container::-webkit-scrollbar-thumb,
#chat_sidebar_panel::-webkit-scrollbar-thumb {
  background: transparent !important;
}

#chat_container::-webkit-scrollbar-track,
#chat_sidebar_panel::-webkit-scrollbar-track {
  background: transparent !important;
}

/* Global button micro-interactions (site-wide).
   Keep it color-agnostic: only transform/filter/opacity. */
:where(button, input[type="button"], input[type="submit"], input[type="reset"], .vixo-btn) {
  transition-property: transform, filter, opacity;
  transition-duration: 160ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: translateZ(0);
  will-change: transform;
}

:where(button, input[type="button"], input[type="submit"], input[type="reset"], .vixo-btn):not([disabled]):not(.disabled):hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

:where(button, input[type="button"], input[type="submit"], input[type="reset"], .vixo-btn):not([disabled]):not(.disabled):active {
  transform: translateY(0) scale(0.98);
  filter: brightness(0.98);
}

:where(button, input[type="button"], input[type="submit"], input[type="reset"], .vixo-btn)[disabled],
:where(button, input[type="button"], input[type="submit"], input[type="reset"], .vixo-btn).disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  :where(button, input[type="button"], input[type="submit"], input[type="reset"], .vixo-btn) {
    transition: none;
    transform: none;
  }
}

/* Decorative chat background (dark mode/default) */
.vixo-chat-bg {
  background-image: linear-gradient(rgba(2, 6, 23, 0.78), rgba(2, 6, 23, 0.78)), var(--vixo-chat-theme-url, url('../chatbg.jpg'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.vixo-chat-theme-fab {
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.35);
}

.vixo-chat-theme-option.is-active {
  border-color: rgba(16, 185, 129, 0.55);
  background: linear-gradient(to right, rgba(16, 185, 129, 0.2), rgba(45, 212, 191, 0.2));
}

/* Light theme (applied by adding .theme-light on <html>)
   We override the most-used Tailwind utility classes so existing templates
   don't need to be rewritten.
   Palette uses Tailwind-ish grays (no custom brand colors). */
.theme-light body {
  color: rgb(15 23 42) !important; /* slate-900 */
  background: linear-gradient(to bottom, rgb(248 249 251), rgb(250 250 250), rgb(248 249 251)) !important;
}

/* Backgrounds */
.theme-light .bg-gray-950 { background-color: rgb(248 250 252) !important; }
.theme-light .bg-gray-900 { background-color: rgb(255 255 255) !important; }
.theme-light .bg-gray-800 { background-color: rgb(241 245 249) !important; }
.theme-light .bg-gray-700 { background-color: rgb(226 232 240) !important; }

/* Utilities used in chat bubbles */
.theme-light .bg-white\/5 { background-color: rgb(238 241 245) !important; }
.theme-light .border-white\/10 { border-color: rgb(226 232 240) !important; }
.theme-light .bg-black\/30 { background-color: rgb(226 232 240 / 0.65) !important; }
.theme-light .bg-gray-950\/30 { background-color: rgb(241 245 249 / 0.95) !important; }
.theme-light .hover\:bg-gray-800\/30:hover { background-color: rgb(226 232 240 / 0.85) !important; }

/* Translucent dark backgrounds used for nav/dropdowns/toasts */
.theme-light .bg-gray-900\/95 { background-color: rgb(255 255 255 / 0.95) !important; }
.theme-light .bg-gray-900\/90 { background-color: rgb(255 255 255 / 0.90) !important; }
.theme-light .bg-gray-900\/80 { background-color: rgb(255 255 255 / 0.80) !important; }
.theme-light .bg-gray-900\/70 { background-color: rgb(255 255 255 / 0.92) !important; }
.theme-light .bg-gray-900\/60 { background-color: rgb(250 250 250 / 0.92) !important; }
.theme-light .bg-gray-900\/40 { background-color: rgb(255 255 255 / 0.72) !important; }
.theme-light .bg-gray-900\/50 { background-color: rgb(250 250 250 / 0.85) !important; }
.theme-light .bg-gray-950\/40 { background-color: rgb(241 245 249 / 0.60) !important; }
.theme-light .bg-gray-800\/70 { background-color: rgb(241 245 249 / 0.95) !important; }
.theme-light .bg-gray-800\/60 { background-color: rgb(241 245 249 / 0.85) !important; }

/* Text */
.theme-light .text-gray-50 { color: rgb(15 23 42) !important; }
.theme-light .text-gray-100 { color: rgb(15 23 42) !important; }
.theme-light .text-white { color: rgb(15 23 42) !important; }
.theme-light .text-white\/95 { color: rgb(15 23 42 / 0.95) !important; }
.theme-light .text-white\/90 { color: rgb(15 23 42 / 0.90) !important; }
.theme-light .text-white\/80 { color: rgb(15 23 42 / 0.80) !important; }
.theme-light .text-white\/70 { color: rgb(15 23 42 / 0.70) !important; }
.theme-light .text-white\/60 { color: rgb(15 23 42 / 0.60) !important; }
.theme-light .text-white\/50 { color: rgb(15 23 42 / 0.50) !important; }
.theme-light .text-gray-200 { color: rgb(30 41 59) !important; }
.theme-light .text-gray-300 { color: rgb(51 65 85) !important; }
.theme-light .text-gray-300\/90 { color: rgb(51 65 85 / 0.90) !important; }
.theme-light .text-gray-400 { color: rgb(71 85 105) !important; }
.theme-light .text-gray-500 { color: rgb(100 116 139) !important; }

/* Mobile chat sidebar hamburger bars (uses bg-gray-100 spans) */
.theme-light #chat_sidebar_open .bg-gray-100 { background-color: rgb(15 23 42) !important; }

.theme-light .text-gray-200\/80 { color: rgb(51 65 85 / 0.85) !important; }
.theme-light .text-gray-200\/70 { color: rgb(51 65 85 / 0.75) !important; }
.theme-light .text-gray-100\/80 { color: rgb(15 23 42 / 0.80) !important; }
.theme-light .text-gray-400\/70 { color: rgb(100 116 139 / 0.75) !important; }
.theme-light .text-gray-400\/60 { color: rgb(100 116 139 / 0.65) !important; }

/* Chat message header names sit on dark chat background; keep them bright in light theme. */
.theme-light .vixo-chat-bg .vixo-msg [data-message-header] .text-gray-100,
.theme-light .vixo-chat-bg .vixo-msg [data-message-header] .text-gray-200,
.theme-light .vixo-chat-bg .vixo-msg [data-message-header] .text-gray-200\/80,
.theme-light .vixo-chat-bg .vixo-msg [data-message-header] .text-gray-200\/70 {
  color: rgb(226 232 240) !important;
}

/* Keep accent text readable on light */
.theme-light .text-emerald-300 { color: rgb(4 120 87) !important; } /* emerald-700 */
.theme-light .text-emerald-400 { color: rgb(4 120 87) !important; } /* emerald-700 */
.theme-light .text-red-300 { color: rgb(185 28 28) !important; }     /* red-700 */

/* Preserve intended white text on brand gradients (e.g., outgoing chat bubbles) */
.theme-light .vixo-keep-white { color: rgb(255 255 255) !important; }

/* Borders */
.theme-light .border-gray-800 { border-color: rgb(226 232 240) !important; }
.theme-light .border-gray-700 { border-color: rgb(203 213 225) !important; }
.theme-light .border-gray-600 { border-color: rgb(203 213 225) !important; }

/* Hover surfaces */
.theme-light .hover\:bg-gray-800:hover { background-color: rgb(226 232 240) !important; }
.theme-light .hover\:bg-gray-700:hover { background-color: rgb(203 213 225) !important; }
.theme-light .hover\:bg-gray-800\/60:hover { background-color: rgb(226 232 240 / 0.75) !important; }
.theme-light .hover\:bg-gray-900\/60:hover { background-color: rgb(241 245 249 / 0.95) !important; }
.theme-light .hover\:bg-gray-900\/40:hover { background-color: rgb(241 245 249 / 0.92) !important; }

/* Drop shadow intensity (keep subtle in light mode) */
.theme-light .shadow-black\/20 { --tw-shadow-color: rgb(0 0 0 / 0.08) !important; }
.theme-light .shadow-black\/30 { --tw-shadow-color: rgb(0 0 0 / 0.10) !important; }

/* Placeholder text */
.theme-light .placeholder\:text-gray-400::placeholder { color: rgb(100 116 139) !important; }
.theme-light .placeholder-gray-400::placeholder { color: rgb(100 116 139) !important; }

/* Decorative chat background: keep dark chatbg even in light theme */
.theme-light .vixo-chat-bg {
  background-image: linear-gradient(rgba(2, 6, 23, 0.78), rgba(2, 6, 23, 0.78)), var(--vixo-chat-theme-url, url('../blackchatbg.jpg')) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Light-mode surfaces (chat/nav panels) */
.theme-light .vixo-topbar {
  /* White-theme navbar styling only (dark theme remains unchanged). */
  background:
    radial-gradient(900px circle at 18% 10%, rgba(14, 165, 233, 0.12), transparent 56%),
    radial-gradient(900px circle at 82% 30%, rgba(99, 102, 241, 0.10), transparent 60%),
    linear-gradient(to bottom, rgba(224, 242, 254, 0.86), rgba(248, 250, 252, 0.98)) !important;
  border-bottom-color: rgb(191 219 254) !important;
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.08);
}

/* Light-mode logo contrast */
.theme-light .vixo-topbar .vixo-brand {
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}

.theme-light .vixo-topbar .vixo-logo {
  filter: none;
  transform: scale(1.06);
  transform-origin: left center;
}

.theme-light .vixo-topbar a.text-gray-300,
.theme-light .vixo-topbar button.text-gray-300,
.theme-light .vixo-topbar .text-gray-300 {
  color: rgb(30 41 59) !important;
}

.theme-light .vixo-topbar a.hover\:bg-gray-800:hover,
.theme-light .vixo-topbar button.hover\:bg-gray-800:hover {
  background-color: rgb(226 232 240 / 0.85) !important;
}

.theme-light .vixo-topbar .border-gray-800,
.theme-light .vixo-topbar .border-gray-700 {
  border-color: rgb(203 213 225) !important;
}

.theme-light .vixo-chat-surface {
  /* Darker light-mode panels (sidebar/header/composer) */
  background: linear-gradient(to bottom, rgba(226, 232, 240, 0.92), rgba(241, 245, 249, 0.92)) !important;
  border-color: rgb(203 213 225) !important;
}

/* Light-theme chat sidebar (match soft white UI in screenshot) */
.theme-light #chat_sidebar_panel {
  background: linear-gradient(180deg, rgba(241, 245, 249, 0.96), rgba(248, 250, 252, 0.98)) !important;
  border-color: rgb(203 213 225) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08) !important;
}

.theme-light #chat_sidebar_panel .vixo-chat-room-link {
  background: rgba(248, 250, 252, 0.96);
  border-color: rgba(203, 213, 225, 0.95);
}

.theme-light #chat_sidebar_panel .vixo-chat-room-link:hover {
  background: rgba(240, 249, 255, 0.98);
  border-color: rgba(125, 211, 252, 0.78);
}

.theme-light #chat_sidebar_panel .vixo-chat-room-link-active {
  background: linear-gradient(135deg, rgba(219, 234, 254, 0.98), rgba(224, 242, 254, 0.98));
  border-color: rgba(147, 197, 253, 0.95);
  box-shadow: 0 8px 18px rgba(59, 130, 246, 0.14);
  color: rgb(30 41 59);
}

.theme-light #chat_sidebar_panel .vixo-chat-room-avatar {
  border-color: rgba(148, 163, 184, 0.7);
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.9), rgba(79, 70, 229, 0.88));
  color: rgb(255 255 255);
}

.theme-light #chat_sidebar_panel .vixo-chat-room-title {
  color: rgb(51 65 85);
}

.theme-light #chat_sidebar_panel .vixo-chat-room-subtitle {
  color: rgb(100 116 139);
}

.theme-light #chat_sidebar_panel .text-gray-400 {
  color: rgb(100 116 139) !important;
}

.theme-light #chat_sidebar.fixed #chat_sidebar_panel {
  background: linear-gradient(180deg, rgba(241, 245, 249, 0.98), rgba(248, 250, 252, 0.98)) !important;
  border-color: rgb(203 213 225) !important;
}

.vixo-rv-floating-box {
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 10px 26px rgba(2, 6, 23, 0.32),
    0 0 0 1px rgba(148, 163, 184, 0.08) inset;
}

.vixo-rv-try-tag {
  color: rgba(125, 211, 252, 0.95);
}

.vixo-rv-floating-btn {
  background: linear-gradient(90deg, rgba(20, 184, 166, 0.95), rgba(99, 102, 241, 0.95));
  box-shadow:
    0 8px 22px rgba(20, 184, 166, 0.28),
    0 8px 22px rgba(99, 102, 241, 0.22);
}

.vixo-rv-floating-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.theme-light .vixo-rv-floating-box {
  border-color: rgba(191, 219, 254, 0.95);
  background:
    linear-gradient(90deg, rgba(241, 245, 249, 0.98), rgba(224, 242, 254, 0.98));
  box-shadow:
    0 8px 20px rgba(30, 41, 59, 0.08),
    0 0 0 1px rgba(191, 219, 254, 0.5) inset;
}

.theme-light .vixo-rv-try-tag {
  color: rgba(71, 85, 105, 0.98);
}

.theme-light .vixo-rv-floating-btn {
  background: linear-gradient(90deg, rgba(191, 219, 254, 0.95), rgba(199, 210, 254, 0.95));
  box-shadow:
    0 6px 16px rgba(59, 130, 246, 0.14),
    0 6px 16px rgba(99, 102, 241, 0.12);
}

.theme-light .vixo-rv-floating-btn:hover {
  filter: brightness(1.02);
}

.vixo-rv-shell {
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(1000px circle at 0% 0%, rgba(147, 51, 234, 0.2), transparent 55%),
    radial-gradient(1000px circle at 100% 100%, rgba(6, 182, 212, 0.16), transparent 58%),
    linear-gradient(135deg, rgba(5, 10, 30, 0.95), rgba(7, 17, 45, 0.95));
}

body.vixo-rv-page {
  min-height: 100dvh;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

html.vixo-rv-page {
  min-height: 100%;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.vixo-rv-page > .w-full.flex-1,
body.vixo-rv-page > .w-full.flex-1 > .w-full,
body.vixo-rv-page > .w-full.flex-1 > .w-full > .vixo-site-grid,
body.vixo-rv-page main.self-stretch {
  min-height: 0;
}

body.vixo-rv-page main.self-stretch {
  height: 100%;
}

.vixo-rv-video-card {
  position: relative;
  height: 380px;
  min-height: 380px;
  border-radius: 0.75rem;
  border: 0;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(32, 19, 63, 0.7), rgba(20, 21, 48, 0.8));
}

.vixo-rv-video-card--me {
  border-color: transparent;
  background: linear-gradient(160deg, rgba(16, 41, 68, 0.72), rgba(16, 22, 46, 0.85));
}

.vixo-rv-media-controls {
  position: absolute;
  left: 0.7rem;
  bottom: 0.8rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  width: auto;
  flex-wrap: nowrap;
}

@media (min-width: 641px) {
  .vixo-rv-video-card--me .vixo-rv-media-controls {
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  .vixo-rv-video-card--me:hover .vixo-rv-media-controls,
  .vixo-rv-video-card--me:focus-within .vixo-rv-media-controls {
    opacity: 1;
    pointer-events: auto;
  }
}

.vixo-rv-media-btn {
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(2, 6, 23, 0.7);
  color: rgba(226, 232, 240, 0.96);
  font-size: 1rem;
  line-height: 1;
  font-weight: 700;
  padding: 0;
}

.vixo-rv-media-btn.vixo-rv-media-btn--off {
  color: rgba(254, 202, 202, 0.95);
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(127, 29, 29, 0.35);
}

.vixo-rv-video {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  background: rgba(2, 6, 23, 0.85);
}

.vixo-rv-label {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  font-size: 0.78rem;
  font-weight: 800;
  color: rgba(240, 249, 255, 0.98);
  background: rgba(2, 6, 23, 0.68);
  border: 1px solid rgba(148, 163, 184, 0.36);
  border-radius: 9999px;
  letter-spacing: 0.01em;
  padding: 0.2rem 0.6rem;
  box-shadow: 0 4px 10px rgba(2, 6, 23, 0.28);
}

.vixo-rv-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  color: rgba(226, 232, 240, 0.86);
  font-weight: 600;
  background: rgba(2, 6, 23, 0.48);
}

.vixo-rv-placeholder-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  text-align: center;
}

.vixo-rv-placeholder-inner .vixo-rv-btn {
  padding: 0.7rem 1.25rem;
}

.vixo-rv-chat-card {
  display: flex;
  flex-direction: column;
  border-radius: 0;
  border: 0;
  background: rgba(7, 14, 35, 0.84);
  padding: 0;
  height: 100%;
  min-height: 380px;
}

.vixo-rv-chat-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#rv_status_panel,
#rv_chat_messages {
  min-height: 0;
}

#rv_chat_messages {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.vixo-rv-chat-composer {
  margin-top: 0.9rem;
  transform: translateY(10px);
}

.vixo-rv-chat-input {
  min-height: 2.6rem;
  line-height: 1.2;
}

.vixo-rv-chat-send {
  min-height: 2.6rem;
  min-width: 3.25rem;
}

@media (min-width: 1024px) {
  .vixo-rv-cam-stack {
    width: 100%;
  }

  .vixo-rv-cam-stack .vixo-rv-video-card,
  .vixo-rv-cam-stack .vixo-rv-video {
    height: 280px;
    min-height: 280px;
  }
}

#rv_online {
  background: rgba(2, 6, 23, 0.45);
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 9999px;
  padding: 0.2rem 0.65rem;
}

.vixo-rv-btn {
  position: relative;
  border-radius: 9999px;
  border: 0;
  background: rgba(17, 24, 39, 0.72);
  color: #e5e7eb;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.6rem 1.2rem;
  transition: opacity 220ms ease, transform 220ms ease, max-width 220ms ease, margin 220ms ease, padding 220ms ease;
}

.vixo-rv-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  pointer-events: none;
  white-space: pre-line;
  text-align: center;
  line-height: 1.25;
  font-weight: 600;
  font-size: 0.75rem;
  color: #ffffff;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.6rem;
  padding: 0.4rem 0.55rem;
  min-width: max-content;
  z-index: 30;
  transition: opacity 160ms ease, transform 160ms ease;
}

.vixo-rv-btn[data-tooltip]:hover::after,
.vixo-rv-btn[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.vixo-rv-btn.is-hidden {
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  pointer-events: none;
  max-width: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}

.vixo-rv-btn.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.vixo-rv-btn--primary {
  border: 0;
  color: #fff;
  background: linear-gradient(90deg, rgba(20, 184, 166, 0.96), rgba(99, 102, 241, 0.96));
  box-shadow: 0 10px 24px rgba(45, 212, 191, 0.28);
}

.vixo-rv-btn--danger {
  border-color: transparent;
  color: rgba(254, 202, 202, 0.95);
  background: rgba(127, 29, 29, 0.3);
}

.vixo-rv-btn--warn {
  color: rgba(254, 202, 202, 0.97);
  background: rgba(185, 28, 28, 0.34);
  border: 1px solid rgba(248, 113, 113, 0.62);
}

@media (max-width: 640px) {
  .vixo-rv-media-controls {
    gap: 0.35rem;
    bottom: 0.55rem;
    left: 0.5rem;
  }

  .vixo-rv-media-btn {
    width: 2rem;
    height: 2rem;
    font-size: 0.9rem;
  }

  .vixo-rv-video-card,
  .vixo-rv-video,
  .vixo-rv-chat-card {
    height: 240px;
    min-height: 240px;
  }
}

/* Random Video page: light-theme surfaces only */
.theme-light .vixo-rv-shell {
  background:
    radial-gradient(1200px circle at 0% 0%, rgba(191, 219, 254, 0.34), transparent 56%),
    radial-gradient(1100px circle at 100% 100%, rgba(186, 230, 253, 0.30), transparent 58%),
    linear-gradient(135deg, rgba(241, 245, 249, 0.98), rgba(248, 250, 252, 0.99));
  border: 1px solid rgba(203, 213, 225, 0.95);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.theme-light .vixo-rv-video-card {
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: linear-gradient(160deg, rgba(239, 246, 255, 0.96), rgba(241, 245, 249, 0.96));
}

.theme-light .vixo-rv-video-card--me {
  background: linear-gradient(160deg, rgba(224, 242, 254, 0.94), rgba(241, 245, 249, 0.95));
}

.theme-light .vixo-rv-video {
  background: rgba(226, 232, 240, 0.8);
}

.theme-light .vixo-rv-label {
  color: rgb(30 41 59);
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(148, 163, 184, 0.5);
  box-shadow: 0 4px 10px rgba(148, 163, 184, 0.18);
}

.theme-light .vixo-rv-placeholder {
  color: rgba(51, 65, 85, 0.92);
  background: rgba(241, 245, 249, 0.72);
}

.theme-light .vixo-rv-chat-card {
  background: rgba(248, 250, 252, 0.92);
  border: 1px solid rgba(203, 213, 225, 0.9);
}

.theme-light .vixo-rv-chat-wrap {
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: rgba(255, 255, 255, 0.82) !important;
}

.theme-light .vixo-rv-chat-input {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(203, 213, 225, 0.95);
  color: rgb(30 41 59) !important;
}

.theme-light .vixo-rv-media-btn {
  border-color: rgba(148, 163, 184, 0.75);
  background: rgba(255, 255, 255, 0.9);
  color: rgba(51, 65, 85, 0.98);
}

.theme-light #rv_online {
  background: rgba(219, 234, 254, 0.9);
  border-color: rgba(147, 197, 253, 0.95);
  color: rgb(30 64 175);
}

.theme-light .vixo-rv-btn {
  background: rgba(226, 232, 240, 0.95);
  color: rgb(30 41 59);
}

.theme-light .vixo-rv-btn--primary {
  color: #fff;
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.92), rgba(99, 102, 241, 0.92));
  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.22);
}

.theme-light .vixo-rv-btn--danger {
  color: rgba(153, 27, 27, 0.95);
  background: rgba(254, 226, 226, 0.9);
  border: 1px solid rgba(252, 165, 165, 0.85);
}

.theme-light .vixo-rv-btn--warn {
  color: rgb(153 27 27);
  background: rgba(254, 202, 202, 0.92);
  border: 1px solid rgba(239, 68, 68, 0.88);
}