body {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at top left, var(--ui-page-glow-1) 0, transparent 26%),
    radial-gradient(circle at top right, var(--ui-page-glow-2) 0, transparent 22%),
    linear-gradient(180deg, color-mix(in srgb, var(--ui-bg-page) 94%, white 6%) 0%, var(--ui-bg-page) 38%, color-mix(in srgb, var(--ui-bg-page) 90%, black 10%) 100%);
  color: var(--ui-text-primary);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}

body::before {
  background:
    radial-gradient(circle at 12% 14%, color-mix(in srgb, var(--ui-page-glow-1) 90%, transparent) 0, transparent 28%),
    radial-gradient(circle at 82% 10%, color-mix(in srgb, var(--ui-page-glow-2) 85%, transparent) 0, transparent 24%),
    radial-gradient(circle at 52% 100%, color-mix(in srgb, var(--ui-page-glow-1) 55%, transparent) 0, transparent 34%);
  opacity: 0.92;
}

body::after {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0) 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0) 22%);
  opacity: 0.65;
  z-index: -1;
}

#app {
  isolation: isolate;
}

#sidebar,
#members-sidebar {
  position: relative;
  background: color-mix(in srgb, var(--ui-panel-glass) 94%, transparent);
  border-color: color-mix(in srgb, var(--ui-border) 78%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--ui-shell-shadow), var(--ui-shell-inset);
}

#chat-header,
#chat-footer,
#messages {
  border-color: color-mix(in srgb, var(--ui-border) 78%, transparent);
}

#main-content {
  background: transparent;
}

#messages {
  position: relative;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ui-bg-main) 96%, transparent) 0%, color-mix(in srgb, var(--ui-bg-main) 92%, black 8%) 100%);
}

#messages::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top center, color-mix(in srgb, var(--ui-page-glow-1) 28%, transparent) 0, transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0) 14%);
  opacity: 0.72;
}

#messages > * {
  position: relative;
  z-index: 1;
}

#chat-header {
  position: relative;
  z-index: 50;
  background: color-mix(in srgb, var(--ui-panel-glass-strong) 88%, transparent);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.12), inset 0 1px 0 color-mix(in srgb, var(--ui-panel-highlight) 88%, transparent);
}

#chat-header::after,
#chat-footer::before,
#sidebar::after,
#members-sidebar::before {
  content: "";
  position: absolute;
  pointer-events: none;
}

#chat-header::after {
  inset: auto 1rem 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ui-panel-edge) 85%, transparent), transparent);
}

#chat-footer::before {
  inset: 0 1.25rem auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ui-panel-edge) 80%, transparent), transparent);
}

#sidebar::after {
  top: 1rem;
  bottom: 1rem;
  right: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ui-panel-edge) 82%, transparent), transparent);
}

#members-sidebar::before {
  top: 1rem;
  bottom: 1rem;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ui-panel-edge) 82%, transparent), transparent);
}