/* R7B: MASAR AI Floating Bubble -- lives in #ai-bubble-root, a sibling of
   #modal-root/#toast-root outside <section id="app-screen">, so it survives
   every render()/renderNav() call untouched. Reuses R3D/R7A's existing
   .ai-msg/.ai-pending-card/.ai-citations styling (ai-assistant.css) for the
   panel body -- only the launcher/panel/mode chrome is new here. */

#ai-bubble-root { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-ai-bubble, 650); }
#ai-bubble-root * { pointer-events: auto; }

.ai-bubble-launcher {
  position: fixed;
  inset-block-end: max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  inset-inline-end: 24px;
  width: 58px; height: 58px;
  border-radius: var(--radius-pill);
  border: none; cursor: pointer;
  background: var(--brand-gradient);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
  animation: ai-bubble-breathe 4.5s var(--ease-standard) infinite;
}
.ai-bubble-launcher:hover { transform: scale(1.06); box-shadow: 0 16px 40px rgba(11,62,140,.28); }
.ai-bubble-launcher:active { transform: scale(.97); }
.ai-bubble-launcher svg { width: 26px; height: 26px; }
.ai-bubble-launcher.is-hidden { display: none; }

@keyframes ai-bubble-breathe {
  0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(10,132,201,.28); }
  50% { box-shadow: var(--shadow-lg), 0 0 0 10px rgba(10,132,201,0); }
}
@media (prefers-reduced-motion: reduce) { .ai-bubble-launcher { animation: none; } }

/* Context-aware chip that pops above the launcher when the current page has
   a suggested question (e.g. an open employee/vehicle/payroll run). Purely
   informational + one click -- never auto-sends anything on its own. */
.ai-bubble-context-chip {
  position: fixed;
  inset-block-end: calc(max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px)) + 70px);
  inset-inline-end: 24px;
  max-width: min(260px, calc(100vw - 48px));
  background: var(--surface-raised);
  color: var(--text-primary);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 10px 14px;
  font-size: var(--fs-caption);
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  animation: ai-bubble-chip-in var(--duration-enter) var(--ease-emphasis);
}
.ai-bubble-context-chip b { color: var(--brand-primary); font-weight: var(--fw-label); }
@keyframes ai-bubble-chip-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Outside-click-to-close target -- invisible (this is a light floating
   widget, not a heavy modal takeover; the page underneath must stay fully
   visible while the panel is open, per spec). Covers the viewport only to
   catch clicks outside the panel, same convention as app.js's own
   .modal-backdrop mousedown-to-close, just without the dim overlay. */
.ai-bubble-backdrop { position: fixed; inset: 0; background: transparent; z-index: calc(var(--z-ai-bubble, 650) - 1); }

/* Floating Panel (mode 2) -- reuses the .ds-drawer slide convention but
   anchored to the SAME bottom corner as the launcher, not a full-height
   edge drawer, so it visibly "grows out of" the bubble. */
.ai-bubble-panel {
  position: fixed;
  /* P0 root-cause fix (2026-08-23, live Production report: "typing doesn't
     work, every click closes it"): this had NO z-index at all, while the
     backdrop right above it in the DOM has an explicit one
     (z-index: calc(var(--z-ai-bubble,650) - 1)). Per CSS stacking rules, a
     positioned element with an explicit z-index paints ABOVE a sibling
     positioned element left at z-index:auto, regardless of DOM order --
     confirmed live via document.elementFromPoint() at the composer
     input's own center coordinates, which returned the backdrop div, not
     the input. Every click the user made anywhere on the panel (including
     the input) was silently landing on the invisible full-viewport
     backdrop instead and triggering its minimize action -- this is the
     actual root cause of the bubble being unusable, distinct from and in
     addition to the earlier canUse-gating fix. */
  z-index: var(--z-ai-bubble, 650);
  inset-block-end: max(16px, env(safe-area-inset-bottom, 0px));
  inset-inline-end: 16px;
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 100px));
  max-height: calc(100vh - 100px);
  background: var(--surface-raised);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-hairline);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform-origin: bottom center;
  animation: ai-bubble-panel-in var(--duration-enter) var(--ease-emphasis);
}
[dir="rtl"] .ai-bubble-panel { inset-inline-end: 16px; }
@keyframes ai-bubble-panel-in {
  from { opacity: 0; transform: scale(.94) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-bubble-panel, .ai-bubble-context-chip { animation: none; }
}

.ai-bubble-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 16px;
  background: var(--brand-gradient);
  color: var(--text-on-brand);
  flex: 0 0 auto;
}
.ai-bubble-panel-head-title { display: flex; align-items: center; gap: 8px; font-weight: var(--fw-card-heading); font-size: var(--fs-body); }
.ai-bubble-panel-head-title svg { width: 20px; height: 20px; flex: none; }
.ai-bubble-panel-head-actions { display: flex; align-items: center; gap: 4px; }
.ai-bubble-icon-btn {
  width: 30px; height: 30px; border-radius: var(--radius-md);
  border: none; background: rgba(255,255,255,.16); color: var(--text-on-brand);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; transition: background var(--duration-fast) var(--ease-standard);
}
.ai-bubble-icon-btn:hover { background: rgba(255,255,255,.28); }

.ai-bubble-panel-body { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.ai-bubble-panel-body .ai-thread-body { max-height: none; }
.ai-bubble-panel-body .empty-state { font-size: var(--fs-caption); padding: 24px 8px; text-align: center; color: var(--text-muted); }

.ai-bubble-suggested-context {
  background: var(--brand-primary-soft); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md); padding: 10px 12px; font-size: var(--fs-caption);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ai-bubble-suggested-context button { flex: none; }

.ai-bubble-panel-foot { flex: 0 0 auto; padding: 10px 12px; border-top: 1px solid var(--border-hairline); background: var(--surface-1); }
.ai-bubble-panel-foot form { display: flex; gap: 8px; }
.ai-bubble-panel-foot input { flex: 1; }

.ai-bubble-panel-tabs { display: flex; gap: 6px; padding: 8px 12px 0; flex: 0 0 auto; }
.ai-bubble-panel-tabs button {
  flex: 1; border: 1px solid var(--border-hairline); background: var(--surface-2);
  color: var(--text-secondary); border-radius: var(--radius-md); padding: 6px 8px;
  font-size: var(--fs-helper); cursor: pointer; transition: all var(--duration-fast) var(--ease-standard);
}
.ai-bubble-panel-tabs button.is-active { background: var(--brand-primary); color: var(--text-on-brand); border-color: var(--brand-primary); }
.ai-bubble-panel-tabs button .ai-bubble-tab-badge { display: inline-block; margin-inline-start: 4px; background: var(--status-critical); color: #fff; border-radius: var(--radius-pill); font-size: 10px; padding: 0 5px; }

/* Mobile: near-fullscreen bottom sheet instead of a small floating card,
   never covers the topbar/hamburger (the main app's only persistent
   mobile chrome -- confirmed no bottom tab bar exists here). */
@media (max-width: 480px) {
  .ai-bubble-panel {
    inset-inline: 8px;
    inset-block-end: max(8px, env(safe-area-inset-bottom, 0px));
    width: auto;
    height: min(78vh, calc(100vh - 90px));
  }
  .ai-bubble-launcher { inset-inline-end: 16px; inset-block-end: max(16px, calc(env(safe-area-inset-bottom, 0px) + 10px)); width: 52px; height: 52px; }
  .ai-bubble-context-chip { inset-inline-end: 16px; inset-inline-start: 16px; max-width: none; }
}

.ai-bubble-fullview-hint { font-size: var(--fs-helper); color: var(--text-muted); text-align: center; padding: 4px 0; }