/* The floating Evelyst button and the ask panel (book-sheet Task 8). Colours are the shell's tokens, so both themes follow. */

.ask-fab { position: fixed; right: 20px; bottom: 20px; z-index: 30; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 50%; background: var(--paper); color: var(--plum); cursor: pointer; box-shadow: 0 1px 6px rgba(30, 26, 21, .18); transition: transform 120ms var(--ease-out, ease-out); }
.ask-fab[hidden] { display: none; }
.ask-fab:hover { transform: translateY(-1px); }
.ask-fab:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }
.ask-fab .mark svg { height: 28px; }
/* Room so the button never sits on a page's last row or the phone list's Add button. */
body.has-ask-fab #pageHost { padding-bottom: 76px; }

.ask-layer[hidden] { display: none; }
.ask-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(30, 26, 21, .28); opacity: 0; transition: opacity 180ms linear; }
.ask-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(460px, 100vw); display: flex; flex-direction: column; background: var(--paper); border-left: 1px solid var(--rule); transform: translateX(100%); transition: transform 220ms var(--ease-in, ease-in); --gutter: 52px; --col: 460px; }
.ask-layer.open .ask-scrim { opacity: 1; }
.ask-layer.open .ask-panel { transform: none; }
.ask-layer:not(.open) .ask-panel { transition-duration: 160ms; }
.ask-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--rule); }
.ask-head h2 { margin: 0; font-family: var(--serif, inherit); font-size: 18px; font-weight: 500; color: var(--ink); }
.ask-close { min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; }
.ask-context { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 20px; border-bottom: 1px solid var(--rule-soft); font-size: 13px; color: var(--ink); }
.ask-context[hidden] { display: none; }
.ask-context-clear { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--plum); font-size: 13px; text-decoration: underline; cursor: pointer; }
.ask-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ask-body .thread-host { flex: 1 1 auto; }
.ask-body .composer-host { flex: none; }
.ask-body .composer .add { display: none; }
.ask-body .composer-in { grid-template-columns: minmax(0, 1fr) auto; padding: 0 12px 0 20px; }
.ask-empty { display: none; padding: 20px; font-size: 14px; color: var(--ink-mid); }
.ask-body:has(.thread:empty) .ask-empty { display: block; }
.ask-body .thread:empty::before { display: none; }
.ask-body .thread { padding-right: 16px; }

@media (prefers-reduced-motion: reduce) {
  .ask-panel, .ask-scrim, .ask-fab { transition: none; }
}
@media (max-width: 640px) {
  .ask-fab { right: 16px; bottom: 16px; }
}