/* ==========================================================================
   Per-screen composition
   ========================================================================== */

/* ---- Splash ----------------------------------------------------------- */

.splash {
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  padding: var(--sp-8) var(--gutter) var(--sp-12);
  text-align: center;
  overflow: hidden;
}

.splash__glow {
  position: absolute;
  top: 42%;
  left: 50%;
  width: 130%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(120, 170, 255, 0.28),
    rgba(120, 170, 255, 0) 62%
  );
}

[data-theme="dark"] .splash__glow {
  background: radial-gradient(
    circle,
    rgba(28, 96, 210, 0.55),
    rgba(10, 30, 80, 0) 62%
  );
}

.splash__head {
  position: relative;
  margin-top: auto;
}

.splash__wordmark {
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  letter-spacing: -0.02em;
}

.splash__version {
  color: var(--text-muted);
  font-size: var(--fs-body);
  margin-top: var(--sp-1);
}

.splash__mascot {
  position: relative;
  width: min(62vw, 15rem);
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(10, 40, 90, 0.28));
  animation: mascot-in var(--dur-slow) var(--ease-out) both;
}

@keyframes mascot-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.splash__tagline {
  position: relative;
  font-size: var(--fs-body);
  margin-bottom: auto;
}

.splash__skip {
  position: absolute;
  right: var(--gutter);
  bottom: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--text-subtle);
}

/* ---- Home ------------------------------------------------------------- */

/* On a short viewport this just centers the mascot between its normal small
   gaps, matching the design exactly. On a tall one, the greeting stays pinned
   under the header and the question list stays pinned to the bottom of the
   scroll area — the mascot is what floats, soaking up the extra room instead
   of leaving it as a dead strip below the list. */
.home__hero {
  display: grid;
  place-items: center;
  margin-block: auto;
}

.pane {
  animation: pane-in var(--dur) var(--ease-out);
}

@keyframes pane-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---- Chat ------------------------------------------------------------- */

.chat__body {
  display: flex;
  flex-direction: column;
}

.chat__empty {
  margin: auto;
  padding-block: var(--sp-10);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Tables emitted by safe-render.js */
.table-wrap {
  margin-block: var(--sp-3);
  overflow-x: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.table-wrap th,
.table-wrap td {
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
}

.table-wrap th {
  background: var(--accent-softer);
  font-weight: var(--fw-semibold);
}

.table-wrap tr + tr td { border-top: 1px solid var(--divider); }

.bubble .is-step {
  font-weight: var(--fw-medium);
  margin-top: var(--sp-3);
}