/* Ported from LiquidWeb src/styles/glass.css and base.css. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  background: var(--color-canvas);
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html[data-theme='dark'] {
  color-scheme: dark;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--color-text);
  background:
    radial-gradient(circle at 18% 14%, var(--color-ambient-one), transparent 32rem),
    radial-gradient(circle at 82% 6%, var(--color-ambient-two), transparent 30rem),
    linear-gradient(135deg, var(--color-canvas), var(--color-canvas-raised));
  background-attachment: fixed;
}

/*
  Ambient rainbow spotlights: a few oversized colour blobs, heavily blurred,
  drifting and hue-shifting slowly enough that the surface reads as still.
  Applied to a region (see .chat-stage), not to the page as a whole.
*/
.aurora-field {
  position: relative;
  isolation: isolate;
}

.aurora-field::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  content: '';
  opacity: var(--aurora-opacity);
  filter: blur(80px) saturate(1.15);
  background-image:
    radial-gradient(circle at 16% 26%, var(--aurora-one), transparent 46%),
    radial-gradient(circle at 78% 10%, var(--aurora-two), transparent 44%),
    radial-gradient(circle at 64% 78%, var(--aurora-three), transparent 48%),
    radial-gradient(circle at 28% 84%, var(--aurora-four), transparent 45%);
  animation: aurora-drift 64s ease-in-out infinite alternate,
    aurora-hue 96s linear infinite;
  /* Fade the edges so the field has no seam where the region begins or ends. */
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 22%,
    #000 78%,
    transparent
  );
}

@keyframes aurora-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(3%, -2.5%, 0) scale(1.12);
  }
  100% {
    transform: translate3d(-3%, 2%, 0) scale(1.04);
  }
}

@keyframes aurora-hue {
  from {
    filter: blur(80px) saturate(1.15) hue-rotate(0deg);
  }
  to {
    filter: blur(80px) saturate(1.15) hue-rotate(360deg);
  }
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  content: '';
  background-image:
    linear-gradient(var(--color-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.56), transparent 76%);
}

::selection {
  color: var(--color-text-inverse);
  background: var(--color-accent);
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.glass-surface {
  position: relative;
  color: var(--color-text);
  background:
    linear-gradient(145deg, var(--glass-highlight), transparent 36%),
    var(--glass-tint);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-soft);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.24);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.24);
}

.glass-surface::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: '';
  border-radius: inherit;
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-surface {
    background: var(--glass-tint-strong);
  }
}

.surface-tight {
  border-radius: var(--radius-md);
}

.surface-roomy {
  border-radius: var(--radius-lg);
}

.muted-text {
  color: var(--color-text-muted);
}

.soft-text {
  color: var(--color-text-soft);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}