/* ============================================================================
   REV9-CHAT-BUBBLE-01 · chat-head visuals for juwel-os-bubbles.js
   (2026-07-27) — see that file's header for the full mechanism writeup.

   Every color/radius/shadow/ease token below is CONSUMED, never redefined:
   --surface/--surface-2, --ink-1/2/3, --line, --edge, --shadow-1/2/3,
   --r-xs/sm/lg/full, --ease-viscous/--ease-flow/--ease-buoyant (luxliq.css),
   --ff-ui. All are already theme-aware (light/dark blocks upstream), so
   this file needs no dark-mode branch of its own.

   MOTION — composed from existing LUXLIQ durations, nothing invented:
     collapse (bubbles shrink away)      680ms --ease-viscous  (--visc-settle)
     arrive   (head grows in)            520ms --ease-flow     (--visc-pour)
     settle   (glyph's last micro-nudge) 160ms --ease-buoyant  (no overshoot)
     restore  (head shrinks away)        300ms --ease-viscous
     panel open/close                    220ms --ease-flow
   Only transform + opacity are animated (composited, no layout thrash).
   Stagger on the bubbles themselves (70ms/bubble, +260ms cap) is applied
   inline by the JS as transition-delay, not here.

   prefers-reduced-motion: every transition below is switched to `transition:
   none` in one block at the end — the same pattern juwel-os-shell.css uses
   on #stage/.md-sheet (keyframe `animation`s are already flattened globally
   by that file's `*{animation-duration:.001ms!important}` rule; this file
   adds none, so nothing else is needed there).
   ============================================================================ */

#jw-bubblehead {
  position: fixed;
  right: var(--jwb-right, 22px);
  bottom: var(--jwb-bottom, 150px);
  z-index: 9999; /* same tier as .juwel-floating-canvas — this widget is what those bubbles become */
  font-family: var(--ff-ui);
}

/* ---------------------------- the head button ---------------------------- */
.jwb-head {
  position: relative;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  box-shadow: inset 0 1px 0 var(--edge), var(--shadow-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-1);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .jwb-head:hover { box-shadow: inset 0 1px 0 var(--edge), var(--shadow-3); }
}

/* peek-stack: up to 3 small dots cascading behind the glyph, newest
   (closest to the glyph) most opaque — see overflowModel() for the count
   logic that toggles [hidden] on these via index. */
.jwb-rings { position: absolute; inset: 0; pointer-events: none; }
.jwb-rings i {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--line);
  right: -1px; bottom: -1px;
}
.jwb-rings i:nth-child(1) { right: -1px; bottom: -1px; opacity: .9; }
.jwb-rings i:nth-child(2) { right: -4px; bottom: -4px; opacity: .6; }
.jwb-rings i:nth-child(3) { right: -7px; bottom: -7px; opacity: .35; }

.jwb-glyph { position: relative; width: 22px; height: 22px; z-index: 1; }
.jwb-glyph svg { width: 100%; height: 100%; }

.jwb-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--ink-1);
  color: var(--surface);
  font-size: 10.5px;
  line-height: 16px;
  font-weight: 600;
  text-align: center;
  z-index: 2;
  border: 1px solid var(--surface);
}
.jwb-badge[hidden] { display: none; }

/* ------------------------- widget show / hide states ---------------------- */
#jw-bubblehead[hidden] { display: none; }
#jw-bubblehead {
  opacity: 0;
  transform: translateY(10px) scale(.86);
  transition: opacity 520ms cubic-bezier(.4,0,.15,1), transform 520ms cubic-bezier(.4,0,.15,1);
}
#jw-bubblehead.jwb-entering { opacity: 1; transform: translateY(0) scale(1); }
/* micro-settle: once the arrival transition above has finished, a second,
   shorter, differently-eased nudge on the glyph only (never a spring/
   overshoot curve — bounce stays banned) */
#jw-bubblehead .jwb-glyph {
  transition: transform 160ms cubic-bezier(.37,0,.63,1);
}
#jw-bubblehead.jwb-entering:not(.jwb-settled) .jwb-glyph { transform: scale(1.08); }
#jw-bubblehead.jwb-settled .jwb-glyph { transform: scale(1); }
#jw-bubblehead.jwb-leaving {
  opacity: 0;
  transform: translateY(8px) scale(.9);
  transition: opacity 300ms cubic-bezier(.22,1,.36,1), transform 300ms cubic-bezier(.22,1,.36,1);
}

/* ------------------------------- the flyout -------------------------------- */
.jwb-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: min(280px, calc(100vw - 32px));
  /* Single-anchor clearance, not the 2*max(top,bottom) centred-element
     formula (docs/plans/program/evidence/REV9_P0_DOCK_CHROME_2026-07-27.md)
     — this panel has ONE fixed edge (its bottom, pinned above the head) and
     grows toward free space above it, so the budget is a plain subtraction:
     100dvh - var(--jwb-bottom) clears the head+gap (56px) and the 40px
     menubar plus a 12px margin = 108px. max() sets a usable floor on very
     short viewports rather than collapsing to a sliver. */
  max-height: max(160px, calc(100dvh - var(--jwb-bottom, 150px) - 108px));
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 var(--edge), var(--shadow-3);
  padding: 6px;
  transform-origin: bottom right;
  opacity: 0;
  transform: translateY(6px) scale(.98);
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(.4,0,.15,1), transform 220ms cubic-bezier(.4,0,.15,1);
}
.jwb-panel[hidden] { display: none; }
#jw-bubblehead.jwb-open .jwb-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
#jw-bubblehead.jwb-open .jwb-head { box-shadow: inset 0 1px 0 var(--edge), var(--shadow-3), 0 0 0 2px var(--line); }

.jwb-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px 8px;
}
.jwb-panel-title { font-size: 12.5px; font-weight: 600; color: var(--ink-2); letter-spacing: .02em; text-transform: uppercase; }
.jwb-panel-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-2); cursor: pointer;
}
.jwb-panel-close svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) {
  .jwb-panel-close:hover { background: var(--surface-2); color: var(--ink-1); }
}

.jwb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.jwb-row { display: flex; align-items: center; gap: 2px; }
.jwb-row-btn {
  flex: 1 1 auto;
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
  padding: 9px 8px;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-1);
  font-family: var(--ff-ui); font-size: 13.5px; text-align: left;
  cursor: pointer;
}
.jwb-row-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jwb-row-btn svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-2); }
.jwb-row--chat .jwb-row-btn { font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .jwb-row-btn:hover { background: var(--surface-2); }
}
.jwb-row-x {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-3); cursor: pointer;
}
.jwb-row-x svg { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) {
  .jwb-row-x:hover { background: var(--surface-2); color: var(--ink-1); }
}

@media (max-width: 640px) {
  .jwb-panel { right: -6px; }
}

/* ------------- existing floating bubbles, collapsing on migrate -----------
   Compound selectors only (never a bare .juwel-floating-bubble rule), so
   specificity — not stylesheet load order — decides these win over
   juwel-os-shell.css's own .juwel-floating-bubble rule regardless of which
   <link> tag lands first in <head>. Transform/opacity only. */
.juwel-floating-bubble.jwb-collapsing {
  opacity: 0;
  transform: scale(.72) translate(10px, 10px);
  transition: opacity 680ms cubic-bezier(.22,1,.36,1), transform 680ms cubic-bezier(.22,1,.36,1);
}
.juwel-floating-bubble.jwb-collapsed { pointer-events: none; }

/* --------------------------- prefers-reduced-motion ------------------------
   Instant swap, no stagger, no micro-settle stage — same `transition:none`
   pattern juwel-os-shell.css already applies to #stage/.md-sheet. */
@media (prefers-reduced-motion: reduce) {
  #jw-bubblehead,
  #jw-bubblehead .jwb-glyph,
  #jw-bubblehead.jwb-leaving,
  .jwb-panel,
  .juwel-floating-bubble.jwb-collapsing {
    transition: none !important;
  }
}