/* [assistant] Ask OllyOlly (public/screens/assistant.js). The chat bubbles and the send box reuse the
   Messages styles (screens/messages.css: .m-msg, .m-bubble, .m-composer); this file adds the rest. */

.as-chat { display: grid; gap: var(--space-2); min-height: calc(100dvh - var(--appbar-h) - 2 * var(--space-4)); grid-template-rows: auto 1fr auto; }
.as-chat > .ui-banner { grid-row: 1; }
.as-thread { grid-row: 2; justify-content: flex-end; }
.as-thread > * { scroll-margin-bottom: 150px; } /* the last answer shows above the send box */
.as-composer { grid-row: 3; }

.as-hello { justify-items: center; text-align: center; padding: var(--space-6) var(--space-2) var(--space-3); max-width: 520px; margin: 0 auto; }
.as-hello-art { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent-text, var(--ink)); }
.as-hello-title { font: var(--weight-display, 700) var(--text-xl, 20px)/1.2 var(--font-display); margin: 0; }
.as-intro { text-align: center; margin: 0 auto var(--space-2); max-width: 520px; }

.as-chips { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.as-chip {
  flex: none; min-height: var(--tap); padding: 8px 14px; border-radius: var(--radius-full); border: 1px solid var(--line-strong, var(--line));
  background: var(--surface); color: var(--ink); font: var(--weight-strong) var(--text-sm)/1.2 var(--font-body); cursor: pointer;
}
.as-chip:hover { background: var(--surface-sunken); }
.as-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.as-send { flex: none; }
.as-foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.as-limit { flex: none; }
.as-foot .ui-hint { margin: 0; }

.as-cards { margin-top: var(--space-1, 4px); width: 100%; }
.as-proposal { display: grid; gap: var(--space-2); padding: var(--space-3); max-width: 420px; border-left: 4px solid var(--accent); }
.as-proposal.is-done { border-left-color: var(--success, #3F9661); }
.as-proposal.is-declined, .as-proposal.is-expired, .as-proposal.is-failed { border-left-color: var(--line-strong, var(--line)); }
.as-proposal-title { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; font-weight: var(--weight-strong); }
.as-proposal-title .ui-icon { flex: none; color: var(--accent-text, var(--ink)); }
.as-proposal .ui-hint { margin: 0; }
/* [audit7] O-40: words someone in the family wrote (a chore, an event, a kid's idea): their own quiet style */
q.as-quote { quotes: none; font-weight: normal; font-style: italic; padding: 0 3px; border-radius: 4px; background: var(--surface-2, rgba(127, 127, 127, 0.14)); overflow-wrap: anywhere; }
q.as-quote::before, q.as-quote::after { content: none; }
/* [assistant2] a card that removes, deletes or lowers safety; a name box; what a done card hands back */
.as-proposal.is-warn.is-pending { border-left-color: var(--danger, #D9534F); }
.as-proposal.is-warn .as-proposal-title .ui-icon { color: var(--danger-text, var(--ink)); }
.as-warning { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--danger-soft, #FBE3E2); color: var(--ink); line-height: 1.4; }
.as-name { display: grid; gap: var(--space-1, 4px); font-weight: var(--weight-strong); }
.as-name .ui-hint { font-weight: normal; }
.as-notice summary { cursor: pointer; font-weight: var(--weight-strong); margin-bottom: var(--space-2); }
.as-result { padding-top: var(--space-2); border-top: 1px solid var(--line); }
.as-result p { margin: 0; }
.as-qr { width: 180px; height: 180px; image-rendering: pixelated; background: #fff; padding: 8px; border-radius: var(--radius-md); }
.as-code { font: var(--weight-strong) var(--text-xl, 20px)/1.2 var(--font-mono, monospace); letter-spacing: 0.08em; }
.as-url { overflow-wrap: anywhere; font-size: var(--text-sm); }
.as-status { display: flex; gap: var(--space-2); align-items: center; margin: 0; font-size: var(--text-sm); color: var(--ink-muted); }
.as-status.is-done { color: var(--success-text, var(--ink)); }
.as-note { background: var(--surface-sunken); }
.as-flagged { border-style: dashed; }
.as-link { justify-self: start; align-self: flex-start; }

.as-typing .m-bubble { padding: 12px 16px; }
.as-dots { display: inline-flex; gap: 5px; }
.as-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-muted); animation: as-blink 1.2s infinite ease-in-out; }
.as-dots i:nth-child(2) { animation-delay: 0.2s; }
.as-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes as-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .as-dots i { animation: none; opacity: 0.6; } }

.as-disclosure p { margin: 0; }
.as-points { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.as-points li { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-2); align-items: start; line-height: 1.45; }
.as-points .ui-icon { color: var(--success, #3F9661); }
.as-check { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-2); align-items: start; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); }
.as-check input { width: 22px; height: 22px; margin: 0; }

/* The floating "Ask OllyOlly" pill: above the tab bar, never over a send box; hidden while typing. */
.as-fab {
  position: fixed; z-index: 20; right: max(var(--space-4), env(safe-area-inset-right, 0px));
  bottom: calc(var(--tabbar-h) + var(--space-4) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0 18px 0 14px;
  border-radius: var(--radius-full); background: var(--accent); color: var(--accent-ink); text-decoration: none;
  font: var(--weight-strong) var(--text-md)/1 var(--font-body); box-shadow: var(--shadow-3, 0 6px 20px rgba(0, 0, 0, 0.25));
  transition: transform var(--dur-fast) var(--press-ease);
}
.as-fab:active { transform: scale(var(--press-scale)); }
.as-fab:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (orientation: landscape) and (max-height: 500px) {
  .as-fab { min-height: 44px; bottom: max(var(--space-3), env(safe-area-inset-bottom, 0px)); }
}

/* Out of the way while a keyboard is up (a focused field), and on print. */
body:has(input:focus, textarea:focus, select:focus, [contenteditable="true"]:focus) .as-fab { display: none; }
@media print { .as-fab { display: none; } }
/* Content can scroll up past the pill. [rehearsal2] The pill is inside #app (a page banner), so the
   old "main followed by the pill" rule never matched: room at the bottom for it now. */
.ui-main:has(> .as-fab) { padding-bottom: calc(var(--space-7, 48px) + 64px); }
/* [rehearsal2] It slides out of the way while scrolling down (it covered a line of text on a phone)
   and comes back on scrolling up, at the top and at the end of the page (public/screens/assistant.js).
   Still in the keyboard order: focusing it brings it back. */
.as-fab { transition: transform var(--dur-fast) var(--press-ease), opacity var(--dur-fast) ease; }
.as-fab.is-tucked { transform: translateY(calc(100% + var(--tabbar-h, 0px) + var(--space-5, 24px))); opacity: 0; pointer-events: none; }
.as-fab.is-tucked:focus-visible, .as-fab.is-tucked:focus { transform: none; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .as-fab { transition: opacity var(--dur-fast) ease; } }
:root[data-motion="reduce"] .as-fab { transition: opacity var(--dur-fast) ease; }