/* ask.css — the ask-me drawer on wide screens.
 *
 * Only the drawer lives here: the dialogue inside it is ai.css, unchanged, which
 * is why both places look and behave the same without a second stylesheet to
 * keep in step.
 *
 * The one rule of ai.css that does not fit is .chat's 840px reading column,
 * centred for a page built around it. Inside a 400px panel it is overridden at
 * the bottom of this file rather than made conditional there, so the page
 * version keeps its own shape.
 */

/* WIDE SCREENS ONLY. The markup carries `hidden` and the script removes it, so
   a narrow viewport never even shows a flash of the tab before JS decides. */
.ask-dock { display: none; }

@media (min-width: 1200px) {

.ask-dock { display: block; }

/* ---------------------------------------------------------------- the tab */

/* Clear of the scroll-to-top button, which guide.js fixes at right:14px, top:50%
   with a 38px circle. This sits a hundred pixels above centre so the two never
   touch, whatever the viewport height. */
.ask-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(calc(-50% - 100px));
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 15px 9px 17px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 12px 0 0 12px;
  cursor: pointer;
  box-shadow: -2px 0 14px rgba(0, 0, 0, .28);
  transition: color .18s, border-color .18s, padding-right .18s, background .18s;
}
.ask-tab svg { width: 17px; height: 17px; }
/* Vertical text rather than a rotated block: the glyphs stay upright-legible and
   the button keeps a real box for hit-testing and focus outlines. */
.ask-tab-txt {
  writing-mode: vertical-rl;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
}
.ask-tab:hover,
.ask-tab:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
  background: var(--surface);
  padding-right: 13px;                    /* leans out a little, no layout shift */
}
.ask-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The tab slides out with the panel instead of sitting on top of it. */
.ask-dock.is-open .ask-tab {
  transform: translateY(calc(-50% - 100px)) translateX(120%);
  pointer-events: none;
}

/* -------------------------------------------------------------- the panel */

/* Below the header (sticky, z-index 50) so the site navigation stays reachable,
   and above the table. Not a modal: no backdrop, the page keeps its scroll. */
.ask-panel {
  position: fixed;
  top: 64px;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  width: 400px;
  max-width: 92vw;
  background: var(--bg-2, var(--surface-2));
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 46px rgba(0, 0, 0, .42);
  transform: translateX(100%);
  transition: transform .24s cubic-bezier(.32, .72, 0, 1);
}
.ask-dock.is-open .ask-panel { transform: none; }

.ask-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
  padding: 13px 14px 12px 18px;
  border-bottom: 1px solid var(--line);
}
.ask-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
}
.ask-x {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  color: var(--muted); background: none;
  border: 1px solid transparent; border-radius: 8px; cursor: pointer;
  transition: color .16s, border-color .16s;
}
.ask-x svg { width: 16px; height: 16px; }
.ask-x:hover { color: var(--text); border-color: var(--line); }
.ask-x:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ------------------------------------------------- the dialogue inside it */

/* .chat is 840px and centred on its own page; here it fills the panel. It does
   NOT scroll — .ask-scroll inside it does, so the input stays pinned to the
   bottom of the panel however long the answer gets. Scrolling the whole .chat
   instead pushed the input off the bottom and made the reader scroll back up to
   type, which is what "the answer runs away" meant. */
.ask-panel .chat {
  max-width: none;
  margin: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;                          /* without it a flex child refuses to shrink */
  padding: 0 14px 12px;
  overflow: hidden;
}
.ask-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;           /* the page does not scroll at the ends */
  scrollbar-width: thin;
}
.ask-panel .chat-seed { margin-top: 14px; }
/* Chips wrap to one per line in a narrow column, so they read as a list of
   questions rather than a scattered pill cloud. */
.ask-panel .chat-seed button {
  width: 100%;
  text-align: left;
  border-radius: 10px;
  font-size: .84rem;
  line-height: 1.35;
}
.ask-panel .chat-log { margin-top: 14px; }
/* Pinned below the scrolling area, not part of it. */
.ask-panel .chat-form { flex: 0 0 auto; margin-top: 12px; }
.ask-panel .chat-foot { flex: 0 0 auto; }
.ask-panel .chat-foot { margin-top: 10px; font-size: .74rem; }


/* Reduced motion: the panel still appears and still leaves, it just stops
   travelling. Position and focus are unchanged. */
@media (prefers-reduced-motion: reduce) {
  .ask-tab, .ask-panel { transition: none; }
}

}