/* ==========================================================================
   ASK BAR — the one door on every page (Peter, 4 Sep 2026)
   --------------------------------------------------------------------------
   Neutral white bar at the top of the content column (Home keeps the yellow
   hero and its own box). The B on the left is the door to the thread and
   carries the unread dot; mic + Ask sit in the pill (ask-box.css owns the
   pill). Also here: the FINDER dropdown and the THREAD, which every surface
   renders (js/ask.js builds both).
   ========================================================================== */
.ask-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0 6px;
  position: relative;
  z-index: 25;
}
.ask-bar__b, .ask-brand__btn {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  border: none;
  background: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.ask-bar__b img { width: 22px; height: 22px; display: block; }
.ask-brand__btn { width: 28px; height: 28px; }
.ask-brand__btn img { width: 19px; height: 19px; display: block; }
.ask-bar__b:hover, .ask-brand__btn:hover { background: var(--color-bg-subtle); }
.ask-dot {
  position: absolute; top: 4px; right: 4px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #e11d48; border: 2px solid var(--color-surface);
}
.ask-dot[hidden] { display: none; }
.ask-bar .ask-box { flex: 1; }
.ask-bar__in { flex: 1; height: 40px; min-width: 0; font: inherit; font-size: var(--text-base); border: none; background: transparent; padding-left: 8px; color: var(--color-text); outline: none; }
.ask-bar__in::placeholder { color: var(--color-text-muted); }
.ask-bar__go { height: 40px; padding-inline: 20px; border: none; border-radius: var(--radius-full); background: var(--color-text); color: var(--color-surface); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; }
.ask-bar__go:hover { opacity: .9; }
.ask-bar .ask-mic { height: 40px; width: 40px; border: none; background: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-text); }
@media (max-width: 640px) { .ask-bar { padding: 10px 0 4px; gap: 8px; } }

/* ---- THE FINDER (records + the question reading) ---------------------------- */
.ask-find {
  position: static;
  margin-top: 6px;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: 18px;
  padding: 8px;
  max-height: 60vh;
  overflow-y: auto;
}
/* in the dock the dropdown is a box of its own under the bar */
.ask-dock > .ask-find { margin: 0 0 14px; }
.ask-box { position: relative; }
.ask-find { text-align: left; font-weight: var(--weight-regular); }
.ask-find[hidden] { display: none; }
.ask-find__group { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); padding: 8px 12px 4px; }
.ask-find__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: 10px;
  font: inherit;
  font-size: var(--text-base);   /* the normal type, not a small one (Peter, 4 Sep) */
  color: var(--color-text);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
.ask-find__item:hover, .ask-find__item.is-active { background: var(--color-bg-subtle); }
.ask-find__kind { display: none; }   /* questions only in the bar now; no kind column */
.ask-find__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-find__sub { color: var(--color-text-muted); font-size: 12px; white-space: nowrap; }
/* on the yellow hero the dropdown sits inside the canvas; give it room */

/* ---- THE THREAD (one dated conversation, latest at the bottom) --------------- */
.ask-thread {
  margin-top: 14px;
  max-height: min(52vh, 560px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
}
.ask-thread[hidden] { display: none; }
.ask-thread__day { align-self: center; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); padding: 10px 0 2px; }
.ask-thread__msg { display: flex; align-items: flex-end; gap: 10px; max-width: 86%; }
.ask-thread__msg--you { align-self: flex-end; flex-direction: row-reverse; }
.ask-thread__msg--bullet { align-self: flex-start; }
.ask-thread__who, .ask-thread__me { display: block; width: 28px; height: 28px; flex: none; border-radius: 50%; }
.ask-thread__who { background: var(--color-text) url("../../assets/icons/logo-white.svg") center / 16px 16px no-repeat; }
.ask-thread__me { background: url("../../assets/people/peter.jpg") center / cover no-repeat; box-shadow: 0 0 0 1px #fff; }   /* a 1px white ring on your face (Peter, 4 Sep) */
.ask-thread__bubble {
  padding: 10px 14px;
  border-radius: 18px;
  font-size: var(--text-base);   /* same size as the answer cards (Peter, 5 Sep) */
  line-height: 1.5;
  background: var(--color-bg-subtle);
  color: var(--color-text);
}
.ask-thread__msg--you .ask-thread__bubble { background: var(--color-surface); color: var(--color-text); border: var(--border-width) solid var(--color-border); border-bottom-right-radius: 6px; }
.ask-thread__msg--bullet .ask-thread__bubble { border-bottom-left-radius: 6px; }
.ask-thread__asof { display: block; margin-top: 4px; font-size: 12px; color: var(--color-text-muted); }
.ask-thread__again, .ask-thread__go {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; margin-top: 6px; font: inherit; font-size: 12px; color: var(--color-text);
  background: none; border: 1px solid var(--color-border); border-radius: 999px; padding: 3px 10px; cursor: pointer; text-decoration: none;
}
.ask-thread__go svg { width: 14px; height: 14px; flex: none; }   /* base.css blocks svgs, so the arrow dropped under "Open" (Peter, 5 Sep) */
.ask-thread__again:hover, .ask-thread__go:hover { border-color: var(--color-text); }
.ask-thread__go--do { background: var(--color-text); color: var(--color-surface); border-color: var(--color-text); }   /* the one-tap action leads (Peter, 5 Sep) */
/* on the yellow hero the thread takes the chart's place */
.dash-sec.is-thread .canvas-chart, .is-thread > .ask-explore, .is-thread > .ask-suggests, .is-thread > .ask-answer-wrap, .is-thread > .aa-recent { display: none; }   /* the thread is the only thing on screen while it is open */
:is(.app--wide .dash-sec, .ask-canvas):has(> .ask-box) > .ask-thread { margin: 16px 48px 0; }
:is(.app--wide .dash-sec, .ask-canvas):has(> .ask-box) > .ask-thread .ask-thread__bubble { background: rgba(255,255,255,.72); }
:is(.app--wide .dash-sec, .ask-canvas):has(> .ask-box) > .ask-thread .ask-thread__msg--you .ask-thread__bubble { background: var(--color-surface); border-color: transparent; }

/* ---- THE DRAFTED REPLY (idea six, 4 Sep): edit, then Send ------------------- */
.answer__draft { margin: 14px 0 6px; border: var(--border-width) solid var(--color-border); border-radius: 14px; padding: 12px 14px 14px; background: var(--color-surface); }
.answer__draft-row { display: flex; gap: 10px; font-size: var(--text-sm); padding: 4px 0; border-bottom: 1px solid var(--color-border); }
.answer__draft-row span { color: var(--color-text-muted); width: 58px; flex: none; }
.answer__draft-body { width: 100%; margin-top: 10px; border: none; background: none; font: inherit; font-size: var(--text-sm); line-height: 1.55; color: var(--color-text); resize: vertical; outline: none; }
.answer__draft-attach { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text); border: 1px solid var(--color-border); border-radius: 999px; padding: 5px 12px; margin-top: 8px; }
.answer__draft-attach svg { width: 14px; height: 14px; }
.answer__draft-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.answer__draft-note { font-size: 12px; color: var(--color-text-muted); }
.answer__draft-sent { font-size: var(--text-sm); color: var(--color-success); }

/* ONE DOOR, NEVER TWO (4 Sep): the pages' own bottom-right "?" markup stays in the HTML for the
   excluded screens; wherever the bar or the inline box is the door, it hides. */

/* ---- THE THREAD IS THE SURFACE (Peter, 4 Sep) --------------------------------- */
.ask-thread--live { max-height: none; overflow: visible; gap: 14px; padding: 6px 0 0; margin-top: 14px; }
.ask-thread--live[hidden] { display: none; }
.ask-thread__msg--card { max-width: 92%; width: 92%; align-items: flex-end; }
.ask-thread__msg--card .answer { flex: 1; min-width: 0; margin: 0; }
.ask-thread .answer .answer__asked, .ask-thread .answer .answer__readas { display: none; }
/* a history card carries the day it was asked; no close X on it */
.answer--hist .answer__close { display: none; }
.answer__asof { margin: 10px 0 0; font-size: 12px; color: var(--color-text-muted); }
.ask-thread__hist { display: contents; }
/* the pill keeps its shape: the answers are messages under it now, not a panel joined to it */
.ask-box.is-answering { border-bottom-left-radius: var(--radius-full); border-bottom-right-radius: var(--radius-full); }
.ask-box.is-answering ~ .ask-answer-wrap .answer:first-child { border-top: var(--border-width) solid var(--color-border); border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
.ask-answer-wrap { margin-top: 0; }
/* ---- THE DOCK: on app pages the bar expands DOWN into one white box ------------- */
.ask-dock { position: relative; z-index: 25; }
/* THE BAR SITS INSIDE THE YELLOW when the box is open (Peter, 8 Sep: "the white bar embedded in the yellow box,
   they feel disconnected"): the whole dock becomes the canvas, Home's shape, the bar white inside it. */
.ask-dock { border-radius: 32px; transition: background .35s ease, padding .35s ease; }
.ask-dock.is-live, .ask-dock:has(.js-ask-answer:not([hidden])) { background: #ffe000; padding: 0 18px 12px; margin-bottom: 22px; }   /* BALANCED (Peter, 8 Sep): the bar's own 18px top + 6px bottom count, so the yellow reads 18px all round, pills or not */
.ask-dock__box { display: none; border: none; border-radius: 0; padding: 16px 0 24px; margin: 0; background: transparent; }   /* YELLOW IS THE AI (Peter, 8 Sep): the answer lands in Bullet's yellow on every page, never a white box */
.ask-dock .ask-thread__day { color: #fff; }   /* the day stamp reads white on the yellow (Peter, 8 Sep) */
:is(.app--wide .dash-sec, .ask-canvas):has(> .ask-box) .ask-thread__day { color: #fff; }
.ask-dock__box .ask-thread__bubble { background: rgba(255, 255, 255, .72); }
.ask-dock__box .ask-thread__msg--you .ask-thread__bubble { background: var(--color-surface); border-color: transparent; }   /* more room under the last card (Peter, 4 Sep) */
.ask-dock:has(.js-ask-answer:not([hidden])) .ask-dock__box { display: block; }   /* the box opens with an answer, never on its own */
.ask-dock .ask-dock__pills { display: none; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }   /* the section's pills show once you click into the bar (Peter, 8 Sep) */
.ask-dock.is-live .ask-dock__pills { display: flex; }
.ask-dock .ask-dock__pills .ask-suggest { background: rgba(255, 255, 255, .55); border-color: transparent; }   /* no grey border in the yellow */
.ask-dock .ask-dock__pills .ask-suggest:hover { background: rgba(255, 255, 255, .85); }
.ask-dock:has(.js-ask-answer:not([hidden])) .ask-dock__pills { display: none; }   /* an open answer is the whole box */
.ask-dock .ask-thread__day, :is(.app--wide .dash-sec, .ask-canvas):has(> .ask-box) .ask-thread__day { font-weight: 600; }   /* the day stamp reads (Peter, 8 Sep) */
.ask-dock .ask-thread--live { margin-top: 0; }
/* pills never wrap (Peter, 4 Sep) */
.answer__link, .answer__followup, .ask-suggests button, .fchip, .ask-thread__again, .ask-thread__go, .answer__flag, .ask-find__item { white-space: nowrap; }