:root {
  --bg: #040610;
  --panel: #111725;
  --ink: #f2f5fc;
  --muted: #9eabc1;
  --line: #ffffff20;
  --accent: #38a7ff;
  --toolbar-height: 60px;
  --viewport-top: 0px;
  --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);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;

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

button,
input,
textarea {
  font: inherit;
}

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

button {
  color: inherit;
  cursor: pointer;
}

button:disabled {
  opacity: 0.5;
  cursor: wait;
}

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

a {
  color: #94d3ff;
}

svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

button {
  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;
}

[hidden] {
  display: none !important;
}

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

.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);
}

/*
 * ========================================
 * Chat application
 * ========================================
 */

.chat-home #app {
  position: fixed;

  inset-inline: 0;

  top: var(--viewport-top);

  height: var(--viewport-height);

  display: grid;

  grid-template-rows:
    var(--toolbar-height)
    minmax(0, 1fr);

  min-height: 0;

  overflow: hidden;

  transition: none;

  transform: none;
}

/*
 * The chat toolbar is a grid child.
 *
 * It must not independently follow
 * the visual viewport.
 */

.chat-home .toolbar {
  position: relative;

  top: auto;
  left: auto;
  right: auto;

  min-height: 0;

  transform: none;
}

/*
 * ========================================
 * 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-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;
}

.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;
  }
}