/* ask.css -- the Ask thread page (#/ask) and the in-room sheet (aside#ask). Owned by ask.js. Tokens only. */

/* ---------------------------------------------------------------- page */
.ask-page {
  max-width: 720px; min-height: 100%; margin: 0 auto; padding: 28px var(--s5) 0;
  display: flex; flex-direction: column;
}
.ask-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid var(--line-subtle);
}
.ask-head .seg { max-width: 100%; }
.ask-head .seg-btn { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-stale { margin-bottom: 12px; }
.ask-page .ask-turns { flex: 1 1 auto; }

/* the thread owns the box: docked at the bottom of the column */
.ask-dock {
  position: sticky; bottom: 0; z-index: 5;
  margin-top: 24px; padding: 12px 0 12px;
  background: var(--bg-app);
}
.ask-dock::before {
  content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg-app));
}
.ask-disc { margin-top: 6px; text-align: center; }

/* round 5 (2.4): the page composer grows to 56px and becomes the page's own
   resting door, same as the hero box -- shadow at rest, a bolder ring on focus. */
.ask-dock .box-thread .box-field {
  height: var(--box-h-thread); padding: 0 14px 0 10px; border-radius: var(--r-box);
  box-shadow: var(--shadow-box);
}
.ask-dock .box-thread .box-field:focus-within {
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-box);
}
.ask-dock .box-thread .box-input { font-size: 16px; }
.ask-dock .ask-scope-chip { height: 22px; }

/* ---------------------------------------------------------- empty state */
.ask-page:has(.ask-empty) .ask-turns { align-content: end; }
.ask-empty { display: grid; gap: 8px; margin-bottom: 8px; }
.ask-starters { display: grid; gap: 2px; }
.ask-starter {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; column-gap: 8px;
  width: 100%; min-height: var(--row-h); padding: 4px 8px; margin: 0 -8px; box-sizing: content-box;
  /* F8: 40px rows on the page match the Home starter rhythm; the sheet keeps --row-h (narrower surface). */
  border: 0; border-radius: var(--r-control); background: transparent; color: var(--text); text-align: left; font-size: var(--fs-body);
}
.ask-page .ask-starter { min-height: 40px; }
.ask-starter .ico { color: var(--text-secondary); }
.ask-starter kbd { visibility: hidden; }
.ask-starter:hover, .ask-starter:focus-visible { background: var(--bg-hover); }
.ask-starter:hover kbd, .ask-starter:focus-visible kbd { visibility: visible; }

/* --------------------------------------------------------------- turns */
.ask-turns { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 32px; min-width: 0; }
.ask-turn, .ask-ans, .ask-arest { grid-template-columns: minmax(0, 1fr); }
.ask-follow { min-width: 0; }
.ask-turn { display: grid; gap: 16px; min-width: 0; }
.ask-qrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ask-q { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.ask-qmeta { flex: none; display: inline-flex; align-items: center; gap: 8px; }

.ask-ans { display: grid; gap: 10px; min-width: 0; }
.ask-ahead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ask-abody { display: grid; gap: 10px; min-width: 0; }
.ask-abody > p { font-size: 15px; line-height: 24px; max-width: 72ch; }
.ask-abody.is-pending > p { font-size: var(--fs-meta); line-height: var(--lh-meta); }
.ask-abody .cite-n { vertical-align: 1px; }
.ask-vq { font-family: var(--font-doc); quotes: '"' '"'; }
.ask-quote {
  margin: 0; padding: 2px 0 2px 14px; border-left: 2px solid var(--line);
  font-family: var(--font-doc); font-size: 15px; line-height: 24px; color: var(--text); max-width: 72ch;
}
.ask-scope-note { font-size: var(--fs-meta) !important; line-height: var(--lh-meta) !important; color: var(--text-secondary); }
.ask-open-rec { font-size: var(--fs-meta) !important; }
.ask-arest { display: grid; gap: 12px; min-width: 0; }
/* bills and open-items lists (intents 18, 19) */
.ask-list { display: grid; gap: 6px; margin: 0; padding-left: 18px; list-style: disc; max-width: 72ch; }
.ask-list > li { font-size: 15px; line-height: 24px; padding-left: 2px; }
.ask-list > li::marker { color: var(--text-placeholder); }
.ask-list-label { margin-top: 4px; margin-bottom: -4px; }
.layer-ask .ask-list > li { font-size: 14px; line-height: 22px; }

/* the disclosure: full sentence, one short line on phones */
.ask-disc-short { display: none; }

.ask-tbl-wrap { overflow-x: auto; max-width: 100%; }
.ask-tbl td { height: auto; padding-top: 8px; padding-bottom: 8px; vertical-align: top; }
.ask-tbl td .urg { white-space: nowrap; }
.ask-why { min-width: 220px; }
.ask-nowrap { white-space: nowrap; }
.ask-tbl td:first-child { text-align: left; }

/* Searched line */
.ask-searched { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-secondary); }
.ask-searched-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ask-searched-k { flex: none; font-weight: 500; color: var(--text); }
.ask-searched-sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-searched.is-open .ask-searched-sum { white-space: normal; }
.ask-searched-toggle { flex: none; margin-left: auto; }
.ask-searched-rows { display: grid; gap: 2px; margin-top: 6px; padding-left: 12px; border-left: 1px solid var(--line-subtle); }
.ask-srow { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
.ask-sk { color: var(--text); }

/* follow-up chips */
.ask-follow { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  min-height: 28px; padding: 3px 10px; border: 1px solid var(--line); border-radius: var(--r-control);
  background: transparent; color: var(--text); font-size: var(--fs-meta); line-height: var(--lh-meta); text-align: left;
}
.ask-chip:hover { background: var(--bg-hover); }
.ask-chip .ico { flex: none; color: var(--ai-mark, var(--text-secondary)); }
.ask-chip-action { border-style: dashed; }

.ask-card:empty { display: none; }
.ask-card .pcard { max-width: none; }

/* fallback nearest results */
.ask-near-label { margin-top: 2px; }
.ask-near { display: grid; gap: 2px; }
.ask-near-row {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 10px; align-items: start;
  width: 100%; padding: 8px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--text); text-align: left;
}
.ask-near-row:hover { background: var(--bg-hover); }
.ask-near-glyph { display: inline-flex; padding-top: 2px; color: var(--text-secondary); }
.ask-near-main { display: grid; gap: 2px; min-width: 0; }
.ask-near-title { font-size: var(--fs-meta); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-near-snip { font-family: var(--font-doc); font-size: 14px; line-height: 21px; color: var(--text-secondary); overflow-wrap: anywhere; }
.ask-near-meta { font-size: var(--fs-caption); color: var(--text-secondary); }

/* --------------------------------------------------------------- sheet */
/* round 5 (2.4): the sheet composer stays 52px, --r-dialog corners, no shadow, a 3px ring --
   explicit here even though base.css's shared .box-thread default already matches, since this
   package owns the sheet composer's contract. */
.layer-ask .box-thread .box-field { height: 52px; border-radius: var(--r-dialog); box-shadow: none; }
.layer-ask .box-thread .box-field:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }
.layer-ask .ask-sheet-head .seg { margin-left: 8px; }
.layer-ask .ask-sheet-body { display: grid; align-content: start; gap: 16px; }
.layer-ask .ask-turns { gap: 28px; }
.layer-ask .ask-abody > p, .layer-ask .ask-quote { font-size: 14px; line-height: 22px; }
.layer-ask .ask-srow { grid-template-columns: 110px minmax(0, 1fr); }
.ask-foot { flex: none; display: grid; gap: 6px; padding: 10px 20px 14px; border-top: 1px solid var(--line-subtle); background: var(--bg-raised); }
.ask-foot .ask-disc { text-align: left; }

/* density: product track runs compact */
:root[data-density="compact"] .ask-turns { gap: 24px; }
:root[data-density="compact"] .ask-turn { gap: 12px; }

/* --------------------------------------------------------------- phone */
@media (max-width: 720px) {
  .shell[data-page="ask"] .bar-mid { display: none; }
  .ask-page { padding: 16px 16px 0; }
  .ask-head .h1 { font-size: var(--fs-h2); }
  .ask-dock { padding-bottom: 8px; }
  .ask-srow { grid-template-columns: 1fr; gap: 0; }
  .ask-why { min-width: 160px; }
  /* round 7 (S15.6): the summary is the line that says what was read and over what dates, and on a
     phone the date span was exactly the part the ellipsis ate ("2 transcripts, 1 file, 1 call, 41
     visits . 2/24/26 - 8/27/26" needs 317 px against 222). Here the row stops being a row: the word,
     the summary and the toggle run as one wrapped sentence, so every part shows in whole lines. Same
     fix the box's interpretation sentence and command row already carry in css/home.css. */
  .ask-searched-line { display: block; }
  .ask-searched-k { margin-right: 6px; }
  .ask-searched-sum { display: inline; white-space: normal; overflow: visible; text-overflow: clip; }
  .ask-searched-toggle { margin-left: 6px; }
  .layer-ask .layer-head .iconbtn { width: 44px; height: 44px; }
  .ask-qrow { flex-wrap: wrap; }
  /* round 5 (2.7): the composer matches the sheet at 52px on phones; the / keycap has no touch
     keyboard to focus, so it is hidden (hard failure 14). */
  .ask-dock .box-thread .box-field { height: 52px; }
  .box-thread .box-kbd { display: none; }
  /* the sheet's foot stays <= 84 px: 1 (rule) + 8 (pad-top) + 52 px field + 3 (gap) + 16 px line + 4 (pad-bottom) = 84 */
  .ask-disc-long { display: none; }
  .ask-disc-short { display: inline; }
  .ask-disc { font-size: var(--fs-caption); line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ask-foot { gap: 3px; padding: 8px 10px 4px; }
  .ask-foot .ask-disc { margin-top: 0; }
  .ask-dock .ask-disc { margin-top: 3px; }
}

/* ---------------------------------------------- round 7 (Ask lane, design 4.6) */
/* S14.12: the one line Ask shows when the AI is unavailable. Text, at the type ladder's second line
   size -- not a banner, not a chip, not a colour: the thing that is missing is an offer, not a warning. */
.ask-off { display: grid; gap: 4px; justify-items: start; }
.ask-off-line { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text); }
/* S14.6: both sources of a contradiction on one line, neither of them the conclusion */
.ask-contra .ask-vs { color: var(--text-secondary); font-style: normal; }
/* S14.4: the freshness notice sits under the Searched line it qualifies, inside the same block */
.ask-searched .fresh-notice { margin-top: 6px; }