/* Ask bar — home screen only. Everything is scoped under .ask-* or #home so it
   cannot reach the 3100 lines of page CSS this file loads after.

   The refraction technique comes from the liquid-glass prototype: a canvas-built
   displacement map drives feDisplacementMap, run three times at slightly
   different scales to split the channels into chromatic aberration. The palette
   is the site's own — violet --apollo leading, ink #e9e9e6, ground #0a0c0d — so
   the glass reads as this site rather than a component dropped onto it. */

/* Full black home, by request. No blobs, no wash — #000, nothing else. */
#home.page, #home .screen { background: #000; }

/* The h1 is read, not seen. Clip rather than display:none, which would take it
   out of the accessibility tree and break aria-labelledby on the landmark. */
#home .ask-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Chat layout: the reply lives above, the bar sits low where a composer would.
   The screen pushes everything down; the panel grows upward from the bar. */
#home .screen.home {
  justify-content: flex-end !important;
  /* The sheet-era screen carried 140px of bottom padding; a composer sits
     closer to the edge than that. */
  padding-bottom: 5vh !important;
}
/* The mobile layer centres .home-wrap with margin:auto — measured: the bar
   floated at 57% of the screen. On home the wrap hugs the bottom everywhere. */
#home .home-wrap {
  margin-top: auto !important;
  margin-bottom: 0 !important;
}
#home .ask-stage {
  position: relative;
  z-index: 2;
  /* Sized against the parent's own content box, not the raw viewport: .screen
     already insets by --edge (20-150px depending on breakpoint), and a vw-based
     width here ignored that padding — the stage came out wider than its padded
     container and rode flush against one edge instead of staying centered.
     100% always matches whatever --edge the parent resolves to, at any width. */
  width: min(680px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 18px;
}

/* ---------------------------------------------------------------- the bar */

#home .ask {
  --light: .55;
  position: relative;
  width: 100%;
  height: 66px;
  border-radius: 33px;
  isolation: isolate;
  box-shadow: 0 24px 55px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.28);
  transition: transform .25s ease;
}
#home .ask:focus-within { --light: .95; transform: translateY(-2px); }

/* backdrop-filter needs a shadow-free child: Chrome anchors the filter's
   coordinate space to paint bounds, box-shadow outsets included. */
#home .ask-surface {
  position: absolute; inset: 0;
  border-radius: inherit;
  z-index: 0;
  background: rgba(255,255,255,.045);
  backdrop-filter: url(#ask-lg);
  -webkit-backdrop-filter: url(#ask-lg);
}
body.ask-fallback #home .ask-surface {
  backdrop-filter: blur(15px) saturate(1.45);
  -webkit-backdrop-filter: blur(15px) saturate(1.45);
}

#home .ask::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 1;
  opacity: var(--light);
  box-shadow:
    inset 0 0 0 1px rgba(233,233,230,.30),
    inset 2px 3px 1px -2.5px rgba(255,255,255,.95),
    inset -2px -3px 1px -2.5px rgba(255,255,255,.65);
}
#home .ask::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 1;
  opacity: calc(var(--light) * .45);
  background: linear-gradient(115deg,
    rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 30%,
    rgba(255,255,255,0) 70%, rgba(255,255,255,.16) 100%);
}

#home .ask form {
  position: relative; z-index: 2;
  display: flex; align-items: center; height: 100%;
}

/* The Negaspace mark. The glow filter sits on the wrapper, not on the cube:
   a filter and a 3D transform on the same element rasterise before the tilt and
   leave the polygon edges aliased. */
#home .ask-logo {
  position: relative;
  margin-left: 20px;
  width: 40px; height: 40px; flex: none;
  user-select: none; pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(0,216,205,.30));
  transition: filter .35s ease;
}
#home .ask:focus-within .ask-logo { filter: drop-shadow(0 0 18px rgba(0,216,205,.60)); }

#home .ask-logo .cube {
  position: absolute; left: 50%; top: 50%;
  width: 30px; height: auto;
  margin-left: -15px; margin-top: -17px;
  transform-origin: 50% 50%;
  animation: askCubeFloat 4.6s ease-in-out infinite;
}
@keyframes askCubeFloat {
  0%, 100% { transform: perspective(150px) translateY(0)      rotateX(0deg)  rotateY(0deg); }
  30%      { transform: perspective(150px) translateY(-3.5px) rotateX(5deg)  rotateY(-7deg); }
  62%      { transform: perspective(150px) translateY(-1.5px) rotateX(-3deg) rotateY(6deg); }
}

/* The teal face breathes underneath a brighter copy of itself. */
#home .ask-logo .teal-glow { opacity: 0; animation: askTealPulse 3.2s ease-in-out infinite; }
@keyframes askTealPulse { 50% { opacity: .40; } }

#home .ask input {
  flex: 1; height: 100%;
  padding: 0 24px 0 18px;
  border: none; outline: none; background: transparent;
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 17px; font-weight: 300; letter-spacing: .01em;
  color: #e9e9e6; caret-color: #a58bff;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
#home .ask input::placeholder { color: rgba(233,233,230,.50); font-weight: 300; }

#home .ask.is-shaking { animation: askShake .4s ease; }
@keyframes askShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  50% { transform: translateX(7px); }
  75% { transform: translateX(-4px); }
}

/* The drawing-sheet chrome is gone site-wide — no sheet frame, no crop marks,
   no corner stamps. Asked for on 2026-08-05; the frame belonged to the CV era. */
.sheet, .crop, .stamp { display: none !important; }

/* No entrance animation on the home screen: the site opens still. */
#home.page.active { animation: none !important; }

/* The mobile header put a site title above the bar; home is the bar alone.
   It returns on every inner page. */
body:has(#home.active) .mnav-bar { display: none; }

/* ------------------------------------------------------------- the answer */

/* Glassmorphism proper: the reply is a pane of frosted glass over the moving
   video — translucent white, heavy blur, a lit top edge and an inner sheen. */
#home .ask-panel {
  width: 100%;
  border-radius: 22px;
  padding: 22px 26px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  backdrop-filter: blur(30px) saturate(1.6);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    0 24px 60px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(255,255,255,.06);
  text-align: left;
  opacity: 0;
  transform: translateY(10px);
  max-height: 0;
  overflow: hidden;
  padding-top: 0; padding-bottom: 0;
  border-width: 0;
  transition: opacity .3s ease, transform .3s ease, max-height .35s ease,
              padding .3s ease, border-width .3s ease;
}
#home .ask-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  /* Chatbot answers run longer than the old one-liners: cap to the viewport
     and scroll inside, never clip. */
  max-height: min(420px, 55dvh);
  overflow-y: auto;
  padding-top: 20px; padding-bottom: 22px;
  border-width: 1px;
}

#home .ask-intent {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(233,233,230,.42);
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 10px;
}
#home .ask-intent b { color: #a58bff; font-weight: 500; }

#home .ask-badge {
  font-size: 9px; letter-spacing: .14em;
  padding: 2px 6px;
  border: 1px solid rgba(165,139,255,.45);
  color: #a58bff;
  border-radius: 3px;
}

#home .ask-answer {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-size: 21px; font-weight: 300; line-height: 1.4;
  color: #e9e9e6;
}
#home .ask-detail {
  margin-top: 7px;
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 13.5px; font-weight: 300; line-height: 1.5;
  color: rgba(233,233,230,.56);
}
#home .ask-note {
  margin-top: 12px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .09em;
  color: rgba(233,233,230,.30);
}

#home .ask-chips {
  margin-top: 16px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
#home .ask-seealso {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(233,233,230,.38);
  margin-right: 4px;
}
#home .ask-chip {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .08em;
  padding: 6px 11px;
  border: 1px solid rgba(233,233,230,.20);
  border-radius: 4px;
  color: rgba(233,233,230,.72);
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
#home .ask-chip:hover,
#home .ask-chip:focus-visible {
  border-color: rgba(165,139,255,.55);
  color: #e9e9e6;
  background: rgba(165,139,255,.08);
}

#home .ask-dots { display: inline-block; animation: askBlink 1s steps(1) infinite; }
@keyframes askBlink { 50% { opacity: .25; } }

@media (max-width: 720px) {
  #home .ask { height: 56px; border-radius: 28px; }
  /* 16px is the iOS zoom threshold: anything smaller makes Safari zoom the
     page on focus and never quite give it back. */
  #home .ask input { font-size: 16px; padding-left: 12px; padding-right: 16px; }
  #home .ask-logo { margin-left: 14px; width: 34px; height: 34px; }
  #home .ask-logo .cube { width: 26px; margin-left: -13px; margin-top: -15px; }
  #home .ask-answer { font-size: 17px; }
  #home .ask-stage { width: 100%; gap: 14px; }
  #home .ask-panel { padding-left: 18px; padding-right: 18px; }
  #home .ask-panel.is-open { max-height: 48dvh; }
  .ask-explore { padding: 10px 22px; font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
  #home .ask-blob,
  #home .ask-dots,
  #home .ask-logo .cube,
  #home .ask-logo .teal-glow { animation: none; }
  #home .ask,
  #home .ask-panel,
  #home .ask-logo { transition: none; }
  #home .ask.is-shaking { animation: none; }
}