/* Davebot Ask palette. Shared by the routed shell and standalone case studies. */
:root {
  --ask-veil:rgb(0 0 0 / 66%);
  --ask-surface:#141414;
  --ask-surface-hover:rgb(255 255 255 / 6%);
  --ask-edge:rgb(255 255 255 / 18%);
  --ask-ink:#f6f6f6;
  --ask-ink-muted:#c4c4c4;
  --ask-ink-dim:rgb(255 255 255 / 35%);
  --ask-placeholder:rgb(255 255 255 / 36%);
  --ask-panel:12px;
  --ask-row:8px;
  --ask-kbd:5px;
  --ask-ease:cubic-bezier(.22,1,.36,1);
}

body.ask-open { overflow:hidden; padding-right:var(--ask-scrollbar, 0px); }

.hdr__identity { display:flex; align-items:center; gap:24px; min-width:0; }
.hdr__ghost-trigger,.ask-close,.ask-row {
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
}
/* No ring, no plate: the mark is the affordance. Hover lifts the character
   itself, so the header keeps one silhouette instead of a button around it. */
.hdr__ghost-trigger {
  position:relative;
  width:34px;
  height:34px;
  margin:-4px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.hdr__ghost-trigger:focus-visible { outline:1px solid var(--ask-ink); outline-offset:3px; }
.hdr__ghost-trigger,.hdr__ghost-trigger * { cursor:default !important; }
.hdr__ghost-trigger .hdr__ghost { transition:scale 220ms var(--ask-ease); }
@media (hover:hover) {
  .hdr__ghost-trigger:hover .hdr__ghost { scale:1.1; }
}
.hdr__ghost-trigger:active .hdr__ghost { scale:.94; }
/* One Davebot on screen at a time: the header mark hands off to the palette
   mark, which starts its flight from exactly this box. Below 640px the palette
   docks to the top edge and has no room for the scaled ghost, so the header
   mark stays put and the palette shows none. */
@media (min-width:640px) {
  body.ask-open .hdr__ghost-trigger .hdr__ghost { visibility:hidden; }
}

.hdr__identity:focus-visible { outline:1px solid var(--ask-ink); outline-offset:4px; }
.ask-layer {
  position:fixed;
  inset:0;
  z-index:90;
  visibility:hidden;
  pointer-events:none;
  font-family:var(--font-body, 'Beatrice Text', Arial, sans-serif);
}
.ask-layer__veil {
  position:absolute;
  inset:0;
  background:var(--ask-veil);
  opacity:0;
  transition:opacity 220ms ease;
}
/* The ghost and the panel are one object, so they are laid out as one column
   and centred together: an answer grows the panel downward and the pair drifts
   up as a unit instead of the mark detaching from its field. The stack is
   click-through, so the veil underneath still owns dismissal. */
.ask-stack {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
  pointer-events:none;
}
.ask-ghost {
  width:var(--ask-ghost, clamp(112px, 12.5vw, 184px));
  height:var(--ask-ghost, clamp(112px, 12.5vw, 184px));
  flex:none;
  /* The 32-grid mark leaves ~15% empty below the body, so the boxes overlap to
     seat the character on the panel edge rather than float above it. */
  margin-bottom:calc(var(--ask-ghost, clamp(112px, 12.5vw, 184px)) * -.11);
}
.ask-ghost__mark {
  display:block;
  width:100%;
  height:100%;
  transform:translate(var(--ask-morph-x, 0px), var(--ask-morph-y, 0px)) scale(var(--ask-morph-scale, 1));
  transform-origin:50% 50%;
  transition:transform 380ms var(--ask-ease);
  will-change:transform;
}
.ask-ghost__mark svg { display:block; width:100%; height:100%; }
.ask-panel {
  --ask-origin-x:50%;
  --ask-origin-y:0px;
  position:relative;
  width:min(560px, 100%);
  max-height:min(520px, calc(100dvh - 112px));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--ask-edge);
  border-radius:var(--ask-panel);
  background:var(--ask-surface);
  color:var(--ask-ink);
  box-shadow:0 30px 80px rgb(0 0 0 / 76%);
  pointer-events:auto;
  opacity:0;
  scale:.97;
  translate:0 -8px;
  transform-origin:var(--ask-origin-x) var(--ask-origin-y);
  transition:
    opacity 200ms ease,
    scale 280ms var(--ask-ease),
    translate 280ms var(--ask-ease);
}
.ask-layer[data-state='opening'],
.ask-layer[data-state='open'],
.ask-layer[data-state='closing'] { visibility:visible; }
.ask-layer[data-state='opening'],
.ask-layer[data-state='open'] { pointer-events:auto; }
.ask-layer[data-state='opening'] .ask-layer__veil,
.ask-layer[data-state='open'] .ask-layer__veil { opacity:1; }
.ask-layer[data-state='opening'] .ask-panel,
.ask-layer[data-state='open'] .ask-panel { opacity:1; scale:1; translate:0 0; }
/* The mark lands on its full size only once the panel is placed, so the flight
   and the panel arrival read as one movement. */
.ask-layer[data-state='open'] .ask-ghost__mark { transform:none; }
.ask-layer[data-state='closing'] .ask-layer__veil { opacity:0; transition-duration:160ms; }
.ask-layer[data-state='closing'] .ask-panel {
  opacity:0;
  scale:1;
  translate:0 4px;
  transition-duration:160ms;
  transition-timing-function:cubic-bezier(.4,0,1,1);
}
/* Closing is not opening reversed: the mark is dropped back onto the header in
   the same 160ms the panel takes to leave, so the header mark reappears exactly
   as the palette mark lands on it. */
.ask-layer[data-state='closing'] .ask-ghost__mark {
  transition-duration:160ms;
  transition-timing-function:cubic-bezier(.4,0,1,1);
}

.ask-form {
  position:relative;
  min-height:56px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 14px;
  border-bottom:1px solid var(--ask-edge);
}
.ask-form__input::-webkit-search-cancel-button { display:none; }
.ask-form__label,.ask-layer .sr-only {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.ask-form__input {
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  padding:0;
  background:transparent;
  color:var(--ask-ink);
  caret-color:var(--signal, #f2b544);
  font:400 15px/20px var(--font-body, 'Beatrice Text', Arial, sans-serif);
}
.ask-form__input::placeholder { color:var(--ask-placeholder); opacity:1; }
.ask-form__input[readonly] { color:var(--ask-ink-muted); }
.ask-kbd,.ask-close {
  flex:0 0 auto;
  color:var(--ask-ink-dim);
  font:400 10px/16px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ask-kbd { padding:1px 6px; border:1px solid var(--ask-edge); border-radius:var(--ask-kbd); }
.ask-close { display:none; width:44px; height:44px; margin-right:-12px; border-radius:var(--ask-row); font-size:16px; }
.ask-close:focus-visible,.ask-source:focus-visible { outline:1px solid var(--ask-ink); outline-offset:2px; }
/* On a coarse pointer the panel itself takes focus, so it needs the palette's
   own ring rather than the UA default, drawn inside the rounded edge. */
.ask-panel:focus-visible { outline:1px solid var(--ask-edge); outline-offset:-2px; }

.ask-body { min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--ask-edge) transparent; }
.ask-group {
  display:block;
  padding:10px 14px 5px;
  color:var(--ask-ink-dim);
  font:500 10px/16px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.ask-options { display:flex; flex-direction:column; padding:6px; }
.ask-row {
  position:relative;
  width:100%;
  min-height:40px;
  display:grid;
  grid-template-columns:18px minmax(0, 1fr) 56px;
  align-items:center;
  column-gap:10px;
  padding:8px 10px;
  border-radius:var(--ask-row);
  color:var(--ask-ink-muted);
  text-align:left;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.ask-row::before {
  content:'';
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:2px;
  border-radius:2px;
  background:transparent;
}
.ask-row__icon { width:18px; color:var(--ask-ink-dim); font:400 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align:center; }
.ask-row__label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; line-height:20px; }
.ask-row__hint { width:56px; overflow:hidden; color:var(--ask-ink-dim); font:400 10px/16px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align:right; text-overflow:ellipsis; white-space:nowrap; }
.ask-row[aria-selected='true'] { background:var(--ask-surface-hover); color:var(--ask-ink); }
.ask-row[aria-selected='true']::before { background:var(--signal, #f2b544); }
@media (hover:hover) { .ask-row:hover { background:var(--ask-surface-hover); color:var(--ask-ink); } }
.ask-row:focus-visible { outline:1px solid var(--ask-ink); outline-offset:-2px; }

.ask-status { display:flex; align-items:center; gap:10px; min-height:52px; padding:14px 16px; color:var(--ask-ink-muted); font-size:12px; line-height:20px; }
.ask-status__line { width:18px; height:1px; flex:0 0 18px; background:var(--signal, #f2b544); }
.ask-answer { padding:16px; }
.ask-answer__copy { max-width:62ch; color:var(--ask-ink-muted); font-size:14px; line-height:22px; }
.ask-answer__copy strong { color:var(--ask-ink); font-weight:500; }
.ask-answer__copy.is-streaming::after {
  content:'';
  display:inline-block;
  width:1px;
  height:14px;
  margin-left:3px;
  translate:0 2px;
  background:var(--signal, #f2b544);
  animation:ask-caret 900ms steps(1) infinite;
}
@keyframes ask-caret { 50% { opacity:0; } }
.ask-answer__actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.ask-source {
  min-height:32px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 10px;
  border:1px solid var(--ask-edge);
  border-radius:999px;
  color:var(--ask-ink-muted);
  font-size:11px;
  line-height:18px;
  user-select:none;
}
.ask-source__arrow { color:var(--signal, #f2b544); }
@media (hover:hover) { .ask-source:hover { border-color:var(--ask-ink-dim); color:var(--ask-ink); } }

.ask-recovery { padding:6px; border-top:1px solid var(--ask-edge); }
.ask-footer {
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:7px 14px;
  border-top:1px solid var(--ask-edge);
  color:var(--ask-ink-dim);
  font:400 10px/16px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ask-footer__keys { display:flex; gap:12px; }

@media (max-width:767px) {
  .hdr__identity { flex-direction:column; align-items:flex-start; gap:0; min-width:0; }
  .hdr__tag { display:block; margin-top:-1px; white-space:normal; }
}
@media (max-width:639px) {
  .ask-stack {
    justify-content:flex-start;
    padding:max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
  }
  /* The palette docks to the top edge so the software keyboard cannot bury the
     rows; there is no room above it, so the scaled mark is not rendered and the
     header keeps the only Davebot on screen. */
  .ask-ghost { display:none; }
  .ask-panel {
    width:100%;
    max-height:calc(100dvh - max(16px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    transform-origin:top center;
  }
  .ask-form { min-height:52px; padding:0 12px; gap:10px; }
  .ask-form__input { font-size:17px; line-height:22px; }
  .ask-kbd { display:none; }
  .ask-close { display:grid; place-items:center; }
  .ask-row { min-height:48px; padding-top:12px; padding-bottom:12px; }
  .ask-options .ask-row:nth-of-type(n+4) { display:none; }
  .ask-footer { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .ask-layer__veil,.ask-panel,.ask-ghost__mark,.hdr__ghost-trigger .hdr__ghost { transition-duration:1ms !important; }
  .ask-answer__copy.is-streaming::after { animation:none; }
}