:root {
  --bg: #040610;
  --panel: #111725;
  --ink: #f2f5fc;
  --muted: #9eabc1;
  --line: #ffffff20;
  --accent: #38a7ff;

  --toolbar-height: 60px;

  /*
   * Used by the universal chat component
   * and dialogs.
   *
   * composer.js updates these values.
   */

  --viewport-height: 100dvh;
  --visual-height: 100dvh;

  color-scheme: dark;

  font:
    16px/1.6 Inter,
    system-ui,
    -apple-system,
    sans-serif;

  background: var(--bg);

  color: var(--ink);
}


/*
 * ========================================
 * Global box sizing
 * ========================================
 */

* {
  box-sizing: border-box;
}


/*
 * ========================================
 * Body
 * ========================================
 */

body {
  margin: 0;

  background:
    radial-gradient(
      ellipse at 80% 20%,
      #52215e18,
      transparent 65%
    ),
    var(--bg);
}


/*
 * ========================================
 * Inputs
 * ========================================
 */

button,
input,
textarea {
  font: inherit;
}


/*
 * ========================================
 * Interactive elements
 * ========================================
 */

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;

  cursor: pointer;

  border: 1px solid var(--line);

  border-radius: 12px;

  background: #ffffff06;

  transition:
    background 0.18s,
    border-color 0.18s,
    box-shadow 0.18s;
}

button:hover {
  background: #ffffff0c;

  border-color: #ffffff40;
}

button:disabled {
  opacity: 0.5;

  cursor: wait;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid #a8dfff;

  outline-offset: 3px;
}

a {
  color: #94d3ff;
}


/*
 * ========================================
 * SVG
 * ========================================
 */

svg {
  width: 22px;
  height: 22px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.5;

  stroke-linecap: round;

  stroke-linejoin: round;
}


/*
 * ========================================
 * Hidden
 * ========================================
 */

[hidden] {
  display: none !important;
}


/*
 * ========================================
 * Toolbar
 * ========================================
 *
 * Ordinary pages use a fixed toolbar.
 *
 * composer.css overrides this on
 * .chat-home pages and makes it part
 * of the chat grid.
 */

.toolbar {
  height: var(--toolbar-height);

  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  z-index: 50;

  display: flex;

  align-items: center;

  gap: 10px;

  padding:
    8px
    14px;

  border-bottom:
    1px
    solid
    #ffffff0c;

  background: #070911df;

  backdrop-filter: blur(18px);
}


/*
 * ========================================
 * Toolbar controls
 * ========================================
 */

.icon-button {
  width: 38px;
  height: 38px;

  display: grid;

  place-items: center;

  padding: 8px;
}

.wordmark {
  color: var(--ink);

  font:
    600
    clamp(
      21px,
      4vw,
      29px
    ) / 1
    Georgia,
    serif;

  text-decoration: none;

  white-space: nowrap;
}

.wordmark span {
  font:
    700
    11px
    system-ui;

  letter-spacing: 0.08em;

  color: var(--accent);
}

.new-chat {
  margin-left: auto;

  color: #b3ddff;
}


/*
 * ========================================
 * Content pages
 * ========================================
 */

.content-page #main {
  padding:
    calc(
      var(--toolbar-height)
      + 36px
    )
    20px
    50px;

  min-height: 100dvh;
}

.page {
  max-width: 880px;

  margin: auto;
}

.page h1 {
  font:
    500
    clamp(
      36px,
      6vw,
      60px
    ) / 1.1
    Georgia,
    serif;
}

.page h2 {
  font-size: 22px;
}

.page p {
  color: var(--muted);

  max-width: 760px;
}


/*
 * ========================================
 * Glass panels
 * ========================================
 */

.glass {
  border: 1px solid var(--line);

  border-radius: 22px;

  background:
    linear-gradient(
      130deg,
      #152036d9,
      #0a0d18f5
    );

  box-shadow:
    0 22px 80px #0005;
}


/*
 * ========================================
 * Typography
 * ========================================
 */

.eyebrow {
  font:
    700
    10px / 1.4
    system-ui;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--accent);
}


/*
 * ========================================
 * Dialogs
 * ========================================
 */

dialog {
  border: 0;

  padding: 0;

  color: var(--ink);

  background: transparent;

  max-width:
    calc(
      100vw - 28px
    );

  max-height:
    calc(
      var(--visual-height) - 28px
    );

  overflow: auto;

  overscroll-behavior: contain;
}

dialog::backdrop {
  background: #02040bab;

  backdrop-filter: blur(6px);
}

dialog[open] {
  animation:
    overlay-in
    0.22s
    cubic-bezier(
      0.2,
      0.7,
      0.2,
      1
    );
}

dialog[open]::backdrop {
  animation:
    backdrop-in
    0.22s
    ease;
}

dialog.closing {
  animation:
    overlay-out
    0.16s
    ease
    forwards;
}

dialog.closing::backdrop {
  animation:
    backdrop-out
    0.16s
    ease
    forwards;
}


/*
 * ========================================
 * Dialog content
 * ========================================
 */

.dialog-card {
  width:
    min(
      440px,
      calc(
        100vw - 28px
      )
    );

  padding: 24px;
}

.dialog-card h2 {
  margin:
    0
    0
    20px;

  font-size: 24px;
}

.dialog-card p {
  color: var(--muted);

  font-size: 13px;
}

.close-dialog {
  float: right;

  padding:
    4px
    10px;
}

.primary-button {
  padding:
    11px
    18px;

  border-color: #38a7ff60;

  background: #38a7ff15;
}

.text-button {
  border: 0;

  background: none;

  padding: 8px;
}


/*
 * ========================================
 * Fields
 * ========================================
 */

.field {
  display: block;

  width: 100%;

  padding:
    12px
    14px;

  border:
    1px
    solid
    #79c7ff42;

  border-radius: 12px;

  background: #050b18;

  color: var(--ink);

  font-size: 16px;

  margin:
    12px
    0;
}

.status {
  font-size: 13px;

  color: #aad8f5;

  min-height: 20px;
}


/*
 * ========================================
 * Dialog animations
 * ========================================
 */

@keyframes overlay-in {

  from {
    opacity: 0;

    transform:
      translateY(8px)
      scale(0.985);
  }

  to {
    opacity: 1;

    transform: none;
  }

}

@keyframes overlay-out {

  to {
    opacity: 0;

    transform:
      translateY(5px)
      scale(0.99);
  }

}

@keyframes backdrop-in {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}

@keyframes backdrop-out {

  to {
    opacity: 0;
  }

}


/*
 * ========================================
 * Reduced motion
 * ========================================
 */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;

    transition: none !important;

    scroll-behavior: auto !important;
  }

}