/* ==========================================================================
   ASK BUBBLE — the floating renderer of the one Ask box (Peter, 31 Jul 2026).
   --------------------------------------------------------------------------
   The "?" corner button opens this panel on every screen that has no inline
   ask box. The markup inside is IDENTICAL to Home's (ask-box.css + answer.css
   do the real styling) — this file only shapes the floating container.
   Requires: ask-box.css, answer.css, input.css, button.css (js/ask-anywhere.js
   ensures all of them).
   ========================================================================== */

.ask-float {
  position: fixed;
  right: 32px;
  bottom: 104px;              /* clears the corner button, same as the chat */
  width: min(480px, calc(100vw - 48px));
  max-height: min(74vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: 24px;
  box-shadow: 0 32px 80px -24px rgba(0, 0, 0, .15), 0 12px 40px -16px rgba(0, 0, 0, .07);
  z-index: 9985;              /* under drawers (9990) — a drawer owns the edge */
  overflow: hidden;
  animation: askFloatIn .45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes askFloatIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.ask-float.is-out {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .2s cubic-bezier(0.32, 0, 0.1, 1), transform .2s cubic-bezier(0.32, 0, 0.1, 1);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .ask-float { animation: none; }
  .ask-float.is-out { transition: none; }
}

.ask-float__head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 0;
  flex: none;
}
.ask-float__human {
  background: none;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ask-float__human:hover { border-color: var(--color-border-strong); }
.ask-float__x {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 0;
  padding: 6px;
  border-radius: 8px;
}
.ask-float__x:hover { color: var(--color-text); }
.ask-float__x:focus-visible,
.ask-float__human:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }

.ask-float__body {
  padding: 14px 24px 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 120px;
}
/* The narrow panel has no room for the inline surface's button-width inset. */
.ask-float .ask-box.is-answering ~ .ask-answer-wrap .answer-stack { margin-right: 0; }
/* A slightly tighter pill than the full-width inline one (mic + Ask sit
   inside it — ask-box.css owns the pill chrome). */
.ask-float .ask-box { min-height: 46px; padding: 4px 4px 4px 13px; }
.ask-float .ask-box .input { height: 38px; }
.ask-float .ask-box .btn { height: 38px; }

/* The launcher yields to a drawer — it would sit on top of the drawer's
   actions otherwise (js/ask-anywhere.js closes the open panel). */
body:has(.app.drawer-open) .app__corner--bottom {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

/* Phone: the panel becomes a bottom sheet above the tab bar, and the corner
   button lifts clear of the bar too. */
@media (max-width: 640px) {
  .ask-float {
    left: 10px;
    right: 10px;
    width: auto;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    max-height: 68vh;
  }
  .app__corner--bottom { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* With the launcher in the LEFT menu (ask-anywhere.js, 1 Sep) the panel
   opens beside it — bottom-left, clear of the collapsed sidebar — not in
   the far right corner the button used to live in. */
/* With the ? top right beside the logout (ask-anywhere.js, 3 Sep) the panel
   drops from under it. */
.app__corner--ask { top: 26px; bottom: auto; right: 32px; }
body.ask-top .app__corner--top { right: 76px; }   /* the logout steps left of the ? (restored 4 Sep) */
body.ask-top .ask-float { right: 32px; bottom: auto; top: 84px; }
@media (max-width: 640px) { .app__corner--ask { top: auto; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); right: var(--space-3); } body.ask-top .app__corner--top { right: var(--space-3); } body.ask-top .ask-float { top: auto; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); right: 10px; } }