:root {
  color-scheme: light;
  --bg: #d1d7db;
  --bg-strong: #e9edef;
  --ink: #111b21;
  --muted: #667781;
  --accent: #00a884;
  --accent-dark: #017561;
  --accent-soft: #d9fdd3;
  --panel: #ffffff;
  --panel-strong: #f0f2f5;
  --header: #f0f2f5;
  --chat-bg: #efeae2;
  --stroke: #e9edef;
  --shadow: 0 0.75rem 2rem rgba(17, 27, 33, 0.14);
  --radius: 1rem;
  --font-head: "Manrope", sans-serif;
  --font-body: "Manrope", sans-serif;
}

body[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b141a;
  --bg-strong: #111b21;
  --ink: #e9edef;
  --muted: #8696a0;
  --accent: #00a884;
  --accent-dark: #21c063;
  --accent-soft: #005c4b;
  --panel: #111b21;
  --panel-strong: #202c33;
  --header: #202c33;
  --chat-bg: #0b141a;
  --stroke: #2a3942;
  --shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.34);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: linear-gradient(180deg, #00a884 0, #00a884 7.875rem, var(--bg) 7.875rem 100%);
  height: 100vh;
  overflow: hidden;
}

body[data-theme="dark"] {
  background: linear-gradient(180deg, #111b21 0, #111b21 7.875rem, var(--bg) 7.875rem 100%);
}

.bg-orb {
  display: none;
}

.bg-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.02) 0.0625rem, transparent 0.0625rem),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0.0625rem, transparent 0.0625rem);
  background-size: 6rem 6rem;
  mix-blend-mode: soft-light;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

body[data-theme="dark"] .bg-grid {
  opacity: 0.14;
}

@keyframes floatIn {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(102, 119, 129, 0.55) transparent;
}

*::-webkit-scrollbar {
  width: 0.625rem;
  height: 0.625rem;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(102, 119, 129, 0.45);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(102, 119, 129, 0.7);
}