/* Still water: warm paper, one accent per view, hairlines, soft lift only on floating things. Values come from tokens.css. */
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("/fonts/Poppins-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("/fonts/Poppins-Bold.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 300; font-display: swap; src: url("/fonts/IBMPlexSans-Light.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("/fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("/fonts/IBMPlexMono-Medium.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  color: var(--text-primary);
  font: var(--type-body-weight) var(--type-body-size) / var(--type-body-lead) var(--font-body);
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
p, h1, h2, h3 { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }
strong { font-weight: 600; }
a { color: var(--accent-text); }
.display { font-size: var(--type-display-size); line-height: var(--type-display-lead); font-weight: var(--type-display-weight); }
.lede { font-size: var(--type-lede-size); line-height: var(--type-lede-lead); font-weight: var(--type-lede-weight); color: var(--text-secondary); }
.micro { font: var(--type-micro-weight) var(--type-micro-size) / var(--type-micro-lead) var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.data { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

:root { --col: 680px; --bar: 56px; --lift: 0 1px 2px color-mix(in srgb, var(--overlay) 28%, transparent), 0 8px 24px color-mix(in srgb, var(--overlay) 22%, transparent); }

/* The header stays at the top: one compact row, translucent, with a hairline under it. */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: calc(var(--bar) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--s-3) 0 var(--s-4);
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--border-divider-subtle);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .top { background: var(--canvas); } }
.wordmark { font: 600 19px / 1.3 var(--font-display); letter-spacing: 0.01em; }
.slots { margin-left: auto; display: flex; align-items: center; gap: var(--s-1); }
.slots form { margin: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; pointer-events: none; }

/* Round icon buttons: 44px targets. The text label stays in the button for assistive tech but is not drawn. */
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.icon-btn:hover { background: var(--sunken); color: var(--text-primary); }
.icon-btn:disabled { color: var(--text-disabled); cursor: default; }
.has-badge::after { content: ""; position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--accent-text); box-shadow: 0 0 0 2px var(--canvas); }

main { flex: 1; display: flex; flex-direction: column; }
.view {
  width: 100%;
  max-width: 66ch;
  margin: 0 auto;
  padding: var(--s-9) var(--s-4) var(--s-8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  animation: build var(--dur-slow) var(--ease-decelerate) both;
}
.view .display { margin-top: calc(-1 * var(--s-2)); }
.view .lede { max-width: 44ch; margin-bottom: var(--s-2); }
.app {
  flex: 1;
  width: 100%;
  margin: 0 auto;
  padding: var(--s-3) var(--s-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.app .view { padding: var(--s-2) 0 var(--s-4); align-items: center; text-align: center; max-width: var(--col); }
.app .view .lede { max-width: 36ch; }
#conversation { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: var(--col); margin: 0 auto; min-width: 0; }
#orb:empty, #composer:empty { display: none; }
/* The composer stays at the bottom, above the home bar. */
#composer { position: sticky; bottom: 0; z-index: 5; width: 100%; max-width: var(--col); margin: 0 auto; padding: var(--s-2) 0 calc(var(--s-3) + env(safe-area-inset-bottom)); background: var(--canvas); }
#composer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--s-5); background: linear-gradient(to bottom, transparent, var(--canvas)); pointer-events: none; }
@media (min-width: 1024px) {
  .top { padding-inline: var(--s-6) var(--s-5); }
  .app { padding: var(--s-4) calc(320px + var(--s-5)) 0 var(--s-5); }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--s-7);
  min-width: var(--s-7);
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: 600 15px / 1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.btn-primary { background: var(--odc-base); color: var(--accent-ink); }
.btn-primary:hover { background: var(--odc-light); }
.btn-primary:active { background: var(--odc-soft); }
.btn-quiet { background: transparent; color: var(--text-primary); border-color: var(--border-interactive); padding: 0 var(--s-4); }
.btn-quiet:hover, .btn-text:hover { background: var(--sunken); }
.btn-text { background: transparent; color: var(--text-secondary); padding: 0 var(--s-4); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.icon-btn:focus-visible { outline-offset: -2px; }

.skip { position: absolute; left: var(--s-2); top: -100px; background: var(--raised); color: var(--text-primary); padding: var(--s-3) var(--s-4); border: 1px solid var(--border-interactive); border-radius: var(--radius-md); z-index: 10; }
.skip:focus { top: var(--s-2); }
.notice { padding: var(--s-4); color: var(--text-secondary); }
.toasts { position: fixed; left: 0; right: 0; bottom: calc(96px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: 0 var(--s-4); pointer-events: none; z-index: 20; }
.toast { background: var(--raised); color: var(--text-primary); border: 1px solid var(--border-divider); border-radius: var(--radius-xl); box-shadow: var(--lift); padding: var(--s-3) var(--s-4); max-width: 44ch; font-size: var(--type-small-size); line-height: var(--type-small-lead); animation: build var(--dur-base) var(--ease-decelerate) both; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@keyframes build { from { opacity: 0; transform: translateY(var(--s-2)); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .view, .toast { transform: none !important; }
}