:root {
  --bg: #020202;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --nav-font: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Glass shared by the nav and the flip cards */
  --glass-tint-top: rgba(8, 9, 12, 0.78);
  --glass-tint-bottom: rgba(4, 5, 8, 0.72);
  --glass-tint-fallback-top: rgba(10, 11, 14, 0.88);
  --glass-tint-fallback-bottom: rgba(6, 7, 10, 0.82);
  --glass-blur: 3px;
  --glass-saturate: 120%;
  --glass-sheen-streak: rgba(186, 194, 206, 0.045);
  --glass-sheen-top: rgba(198, 206, 216, 0.05);
  --glass-sheen-mid: rgba(160, 168, 180, 0.018);
  --glass-rim: rgba(210, 216, 224, 0.07);
  --glass-text: #d5dae2;
  --glass-text-dim: #8b939f;
  --glass-shadow: rgba(0, 0, 0, 0.5);

  --h: clamp(54px, 11vh, 100px);
  --radius: calc(var(--h) * 0.1);

  --chat-inset: 18px;
  --chat-panel-width: min(500px, 46vw);
}

* {
  box-sizing: border-box;
  margin: 0;
}

html,
body {
  height: 100%;
}

body {
  overflow: hidden;
  background: var(--bg);
  color: var(--glass-text);
  font-family: var(--font);
}

.backdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  background: #020202;
  transform-origin: center;
}

body.is-traveling .backdrop {
  animation: sky-lunge 1.25s ease-in-out;
}

@keyframes sky-lunge {
  0% { transform: scale(1); }
  58% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  body.is-traveling .backdrop {
    animation: none;
  }
}

.stage {
  position: relative;
  z-index: 1;
  height: 100%;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.clock {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: calc(var(--h) * 0.08);
}

.card {
  position: relative;
  width: calc(var(--h) * 0.72);
  height: var(--h);
  border-radius: var(--radius);
  perspective: calc(var(--h) * 4);
  box-shadow: 0 calc(var(--h) * 0.06) calc(var(--h) * 0.18) var(--glass-shadow);
  font-size: calc(var(--h) * 0.78);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--glass-text);
}

.card-glass,
.card-tint {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  clip-path: inset(0 round var(--radius));
}

.card-glass {
  z-index: 0;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  filter: url(#card-liquid-glass);
}

.card-tint {
  z-index: 1;
  background:
    linear-gradient(-58deg, transparent 34%, var(--glass-sheen-streak) 47% 51%, transparent 62%),
    linear-gradient(var(--glass-sheen-top) 0%, var(--glass-sheen-mid) 48%, transparent 100%),
    linear-gradient(var(--glass-tint-top), var(--glass-tint-bottom));
  box-shadow:
    inset 0 0 0 1px var(--glass-rim),
    inset 0 1px 0 var(--glass-sheen-top);
}

.card::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 50%;
  height: max(2px, calc(var(--h) * 0.012));
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 0 1px 0 var(--glass-rim);
}

.half,
.leaf {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
}

.half {
  z-index: 1;
}

.half span,
.leaf span {
  position: absolute;
  left: 0;
  right: 0;
  height: 200%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.top,
.leaf-top {
  top: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  transform-origin: 50% 100%;
}

.bottom,
.leaf-bottom {
  bottom: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  transform-origin: 50% 0;
}

.top span,
.leaf-top span {
  top: 0;
}

.bottom span,
.leaf-bottom span {
  bottom: 0;
}

.leaf {
  z-index: 2;
  backface-visibility: hidden;
  background: linear-gradient(var(--glass-tint-top), var(--glass-tint-bottom));
  -webkit-backdrop-filter: blur(10px) saturate(var(--glass-saturate));
  backdrop-filter: blur(10px) saturate(var(--glass-saturate));
}

.leaf-top {
  transform: rotateX(-90deg);
}

.leaf-bottom {
  transform: rotateX(90deg);
}

.caption {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--h) * 0.5 + 40px);
  width: min(92vw, 720px);
  white-space: normal;
  text-align: center;
  font-size: clamp(13px, 1.45vw, 18px);
  line-height: 1.2;
  transform: translateX(-50%);
  overflow: hidden;
  padding-bottom: 0.12em;
}

.split-word {
  display: inline-block;
  white-space: nowrap;
}

.split-char {
  display: inline-block;
}

.chat-panel {
  position: fixed;
  z-index: 40;
  top: var(--chat-inset);
  right: var(--chat-inset);
  bottom: var(--chat-inset);
  width: var(--chat-panel-width);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 18px 50px var(--glass-shadow);
  transform: translateX(calc(100% + var(--chat-inset)));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease,
    visibility 0s linear 0.42s;
}

.chat-panel.is-open {
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease,
    visibility 0s;
}

.chat-glass,
.chat-tint {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  clip-path: inset(0 round 28px);
}

.chat-glass {
  z-index: 0;
  background: rgba(7, 8, 11, 0.92);
}

.chat-tint {
  z-index: 1;
  background:
    linear-gradient(-58deg, transparent 34%, var(--glass-sheen-streak) 47% 51%, transparent 62%),
    linear-gradient(var(--glass-sheen-top) 0%, var(--glass-sheen-mid) 48%, transparent 100%),
    linear-gradient(var(--glass-tint-top), var(--glass-tint-bottom));
  box-shadow:
    inset 0 0 0 1px var(--glass-rim),
    inset 0 1px 0 var(--glass-sheen-top);
}

.chat-frame {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 16px;
  gap: 10px;
}

.chat-viewport-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
}

.chat-viewport {
  height: 100%;
  overflow-y: auto;
  scrollbar-color: rgba(210, 216, 224, 0.28) transparent;
  outline: none;
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 36px), transparent 100%);
}

.chat-viewport:focus-visible {
  outline: 1px solid var(--glass-rim);
  outline-offset: -2px;
  border-radius: 12px;
}

.chat-log {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
  padding: 8px 2px 28px;
}

.chat-empty {
  position: absolute;
  inset: 0 16px 48px;
  z-index: 1;
  display: grid;
  place-items: center;
  margin: 0;
  text-align: center;
  font-family: var(--nav-font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--glass-text-dim);
  pointer-events: none;
}

.chat-viewport-wrap:has(.chat-message) .chat-empty {
  display: none;
}

.chat-message {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-shrink: 0;
  font-family: var(--nav-font);
  font-size: 14px;
  line-height: 1.5;
}

.chat-message[data-align="end"] {
  justify-content: flex-end;
}

.chat-bubble {
  width: fit-content;
  max-width: min(80%, 100%);
  min-width: 0;
}

.chat-message[data-role="assistant"] .chat-bubble {
  max-width: 100%;
}

.chat-message-text {
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  padding: 8px 12px;
  overflow-wrap: anywhere;
}

.chat-message[data-role="user"] .chat-message-text {
  white-space: pre-wrap;
  background: rgba(255, 255, 255, 0.12);
}

.chat-message[data-role="assistant"] .chat-message-text {
  padding: 0;
  background: none;
  border-radius: 0;
  line-height: 1.6;
}

.chat-pending {
  display: flex;
  align-items: center;
  width: fit-content;
  height: 24px;
  color: var(--glass-text);
}

.chat-pending-mark {
  display: block;
  transform-origin: center;
  animation: chat-pending-spin 1.8s linear infinite;
}

.chat-message[data-streaming="true"]:has(.chat-pending) .chat-message-text {
  display: none;
}

@keyframes chat-pending-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .chat-pending-mark {
    animation: chat-pending-pulse 1.4s ease-in-out infinite;
  }
}

@keyframes chat-pending-pulse {
  50% { opacity: 0.35; }
}

.chat-score {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #d7dde6;
}

.chat-score[data-band="high"] {
  color: #f4f7fb;
}

.chat-score[data-band="mid"] {
  color: #e4c98a;
}

.chat-score[data-band="low"] {
  color: #e0a090;
}

.chat-score[data-band="fail"] {
  color: #c98484;
}

.chat-message[data-role="assistant"] .chat-message-text > :first-child {
  margin-top: 0;
}

.chat-message[data-role="assistant"] .chat-message-text > :last-child {
  margin-bottom: 0;
}

.chat-message[data-role="assistant"] .chat-message-text h1,
.chat-message[data-role="assistant"] .chat-message-text h2,
.chat-message[data-role="assistant"] .chat-message-text h3 {
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(210, 216, 224, 0.14);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
  color: #eef2f6;
}

.chat-message[data-role="assistant"] .chat-message-text p {
  margin: 0 0 12px;
}

.chat-message[data-role="assistant"] .chat-message-text ul,
.chat-message[data-role="assistant"] .chat-message-text ol {
  margin: 4px 0 16px;
  padding-left: 1.35em;
}

.chat-message[data-role="assistant"] .chat-message-text li {
  padding: 2px 0 2px 2px;
}

.chat-message[data-role="assistant"] .chat-message-text li + li {
  margin-top: 6px;
}

.chat-message[data-role="assistant"] .chat-message-text strong {
  font-weight: 650;
  color: #f4f7fa;
}

.chat-message[data-role="assistant"] .chat-message-text hr {
  margin: 16px 0;
  border: 0;
  border-top: 1px solid rgba(210, 216, 224, 0.14);
}

.chat-message[data-streaming="true"] .chat-message-text {
  min-height: 38px;
}

.chat-jump {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  color: var(--glass-text);
  background: rgba(8, 9, 12, 0.92);
  box-shadow: inset 0 0 0 1px var(--glass-rim);
  cursor: pointer;
  transform: translateX(-50%) translateY(0) scale(1);
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.chat-jump[data-active="false"] {
  opacity: 0;
  transform: translateX(-50%) translateY(100%) scale(0.95);
  pointer-events: none;
}

.chat-jump:hover {
  background: rgba(20, 22, 26, 0.96);
}

.chat-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 8px 8px 14px;
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 0 0 1px var(--glass-rim);
}

.chat-form-bar {
  display: flex;
  justify-content: flex-end;
}

.chat-input {
  width: 100%;
  min-height: 52px;
  max-height: 160px;
  resize: none;
  overflow-y: hidden;
  border: 0;
  border-radius: 0;
  padding: 8px 4px 0 0;
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  color: var(--glass-text);
  background: transparent;
  box-shadow: none;
}

.chat-input::placeholder {
  color: var(--glass-text-dim);
}

.chat-input:focus {
  outline: none;
}

.chat-send {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  color: var(--glass-text);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(210, 216, 224, 0.12);
  cursor: pointer;
}

.chat-send:hover {
  background: rgba(255, 255, 255, 0.14);
}

.chat-input:disabled,
.chat-send:disabled {
  opacity: 0.45;
  cursor: default;
}

@media (max-width: 760px) {
  body.is-chat-open .stage {
    transform: translateY(-22vh);
  }

  .chat-panel {
    top: auto;
    left: var(--chat-inset);
    width: auto;
    height: 46vh;
    transform: translateY(calc(100% + var(--chat-inset)));
  }

  .chat-panel.is-open {
    transform: none;
  }
}

@supports (-webkit-hyphens: none) {
  .card-glass {
    -webkit-backdrop-filter: blur(20px) saturate(var(--glass-saturate));
    backdrop-filter: blur(20px) saturate(var(--glass-saturate));
    filter: none;
  }

  .card-tint,
  .chat-tint {
    background:
      linear-gradient(-58deg, transparent 34%, var(--glass-sheen-streak) 47% 51%, transparent 62%),
      linear-gradient(var(--glass-sheen-top) 0%, var(--glass-sheen-mid) 48%, transparent 100%),
      linear-gradient(var(--glass-tint-fallback-top), var(--glass-tint-fallback-bottom));
  }
}