/* ===== Ask Volare: the help drawer on every page, and the same widget inside Help (#askVolare) =====
   Colours, spacing and radii come from the shared tokens, so both looks (classic and volare) apply. */
.ask-fab {
  position: fixed; right: var(--s5, 24px); bottom: var(--s5, 24px); z-index: 60;
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--button);
  background: var(--button); color: #fff; font: 600 20px/1 inherit; cursor: pointer;
  box-shadow: 0 0.5rem 1.25rem -0.5rem rgba(31, 31, 33, 0.45);
}
/* The button floats over the page, so every route reserves its height plus a margin at the foot: the last card or field is never under it. */
html[data-look] body.app.app:has(.ask-fab) .main { padding-bottom: calc(var(--s5, 24px) + 48px + var(--s5, 24px) + var(--s5, 24px)); }   /* margin + button + margin + a clear gap above it */
html:has(.ask-fab) { scroll-padding-bottom: calc(48px + var(--s5, 24px) * 2); }
.ask-fab:focus-visible { outline: 2px solid var(--dk-tx-accent, var(--accent)); outline-offset: 3px; }
.ask-fab[aria-expanded="true"] { display: none; }

.ask-drawer {
  position: fixed; right: var(--s5, 24px); bottom: var(--s5, 24px); z-index: 61;
  width: min(420px, calc(100vw - 2 * var(--s5, 24px))); height: min(620px, calc(100vh - 2 * var(--s5, 24px)));
  display: flex; flex-direction: column; background: var(--card); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r, 14px);
  box-shadow: 0 1.5rem 3rem -1rem rgba(31, 31, 33, 0.35);
}
.ask-drawer[hidden] { display: none; }
/* The panel is the only Ask Volare while it is open: pinned under the header, full height, over a scrim; the inline copy steps aside. */
.ask-scrim { position: fixed; inset: 0; z-index: 60; background: var(--dk-s-1f1f21a28, rgba(31, 31, 33, .28)); }
.ask-scrim[hidden] { display: none; }
.ask-drawer { top: 4.5rem; height: auto; max-height: none; }
html.ask-open .ask-inline, html.ask-open .home-ask, html.ask-open .ask-inline-title { display: none; }
.ask-drawer :focus-visible, .ask-form textarea:focus-visible { outline: 2px solid var(--dk-tx-accent, var(--accent)); outline-offset: 2px; }
.ask-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2, 8px);
  padding: var(--s3, 12px) var(--s4, 16px); border-bottom: 1px solid var(--line); }
.ask-head h2 { margin: 0; font-size: var(--type-body-strong, 15px); color: var(--ink-strong); }
.ask-close { background: none; border: 0; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: var(--r-xs, 6px); }
.ask-close:hover { background: var(--hover-card); }

.ask-widget { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.ask-inline .ask-widget { border: 0; background: transparent; margin-bottom: 0; }
/* One box: the title and the widget sit inside the same card (Help's own; on Home the card around it is the box). */
.support-page .ask-inline { border: 1px solid var(--line); border-radius: var(--r-sm, 10px); background: var(--card); padding: var(--s4, 16px) 0 0; margin-bottom: var(--s5, 24px); }
.support-page .ask-inline .ask-inline-title { margin: 0 var(--s4, 16px) var(--s2, 8px); font: var(--type-section); color: var(--ink-strong); }
.ask-inline .ask-form { padding-left: 0; padding-right: 0; }
.ask-inline .ask-list { max-height: 360px; }
.ask-list { flex: 1; overflow-y: auto; padding: var(--s3, 12px) var(--s4, 16px); display: flex; flex-direction: column; gap: var(--s3, 12px); }
.ask-hint { color: var(--muted); margin: 0; }
.ask-msg { max-width: 92%; padding: var(--s2, 8px) var(--s3, 12px); border-radius: var(--r-sm, 10px); line-height: 1.45; overflow-wrap: anywhere; }
.ask-msg p { margin: 0; white-space: pre-wrap; }
.ask-msg--me { align-self: flex-end; background: var(--button); color: #fff; }
.ask-msg--volare { align-self: flex-start; background: var(--tile); border: 1px solid var(--line); }
.ask-sources { margin: var(--s2, 8px) 0 0; padding: 0; list-style: none; font-size: var(--type-meta, 13px); color: var(--muted); }
.ask-sources li + li { margin-top: 2px; }
.ask-actions { display: flex; flex-wrap: wrap; gap: var(--s2, 8px); margin-top: var(--s2, 8px); }
.ask-actions .btn { min-height: 34px; padding: 0 12px; font-size: var(--type-meta, 13px); }
.ask-failure, .ask-confirm { margin-top: var(--s2, 8px); padding: var(--s2, 8px) var(--s3, 12px); border-radius: var(--r-xs, 6px); background: var(--soft); font-size: var(--type-meta, 13px); }
.ask-failure strong { display: block; color: var(--ink-strong); }
.ask-confirm p { margin: 0 0 var(--s2, 8px); }

.ask-form { display: flex; gap: var(--s2, 8px); padding: var(--s3, 12px) var(--s4, 16px); border-top: 1px solid var(--line); }
.ask-form textarea { flex: 1; min-height: 40px; max-height: 120px; resize: none; font: inherit; color: var(--ink);
  padding: 9px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm, 10px); background: var(--tile); }
.ask-form textarea:focus, .ask-form textarea:focus-visible { outline: none; border-color: transparent; box-shadow: 0 0 0 2px var(--button); }
.ask-foot { padding: 0 var(--s4, 16px) var(--s3, 12px); font-size: var(--type-meta, 13px); color: var(--muted); }
.ask-foot p { margin: 0; }
.ask-foot .link { background: none; border: 0; padding: 0; color: var(--dk-tx-accent, var(--accent)); text-decoration: underline; cursor: pointer; font: inherit; }

/* Mobile: a full-width sheet from the bottom. */
@media (max-width: 640px) {
  .ask-fab { right: 16px; bottom: 16px; }
  /* A full-width sheet that starts under the standard top bar (search, bell, avatar stay in reach) and runs to the bottom
     edge, with the composer pinned at the foot above the device's safe area. */
  .ask-drawer { left: 0; right: 0; bottom: 0; top: 3.75rem; width: 100vw; height: auto; border-radius: var(--r, 14px) var(--r, 14px) 0 0; border-left: 0; border-right: 0; border-bottom: 0; }
  .ask-foot { padding-bottom: calc(var(--s3, 12px) + env(safe-area-inset-bottom, 0px)); }
}
@media print { .ask-fab, .ask-drawer { display: none !important; } }
.ask-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* The Volare look: the same periwinkle and charcoal its primary buttons use (css/looks.css), so text stays readable. */
html[data-look="volare"] .ask-fab, html[data-look="volare"] .ask-msg--me { background: var(--v-periwinkle); border-color: var(--v-periwinkle); color: var(--v-charcoal); }
html[data-look="volare"] .ask-fab:hover { background: var(--v-peri-hover); }
.ask-msg p { color: inherit; }

/* Q2 polish. The drawer sits over a dim backdrop; the inline box is hidden while the drawer is open; the page and every
   scroller end clear of the help button. */
@media (min-width: 641px) {
  body:has(.ask-drawer:not([hidden]))::before { content: ""; position: fixed; inset: 0; z-index: 60; background: var(--dk-s-1f1f21a32, rgba(31, 31, 33, .32)); }
}
body:has(.ask-drawer:not([hidden])) .ask-inline { display: none; }
.ask-list { padding-bottom: var(--s4, 16px); scroll-padding-bottom: var(--s4, 16px); }
html[data-look] body.app .outlet { padding-bottom: calc(48px + var(--s5, 24px)); }
html[data-look] .ask-inline-title { margin: 0 0 var(--s3, 12px); }