/* Bamba / במבה — private study companion */
.bamba-companion {
  --bamba-w: 96px;
  --bamba-h: 136px;
  position: fixed;
  inset-inline-end: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  /* Above the nav panel (z 40) so she can sit on it; below modals (z 50). */
  z-index: 41;
  width: var(--bamba-w);
  height: var(--bamba-h);
  color: var(--text-heading);
  font-family: var(--font-body);
  pointer-events: none;
}
/* Once dragged she is placed from the top-left, so the default anchoring
   must yield or she would be pinned to two edges at once. */
.bamba-companion.is-placed {
  inset-inline-end: auto;
  bottom: auto;
}
.bamba-companion.is-dragging .bamba-sprite { transition: none; }
.bamba-companion.is-dragging .bamba-bubble { display: none; }
/* Keep the measured size available so layout can restore Bamba when there is
   room again, while leaving essential controls reachable in short windows. */
.bamba-companion.is-obstructed { visibility:hidden; }
.bamba-companion.is-obstructed .bamba-launcher { pointer-events:none; }
body.has-tray .bamba-companion:not(.is-placed):not(.is-inline) { bottom: calc(120px + env(safe-area-inset-bottom)); }

/* Games keep their reserved space; other pages use the movable companion. */
.bamba-slot { width:100%; display:flex; justify-content:flex-end; min-height:136px; margin-block:var(--space-sm); }
.bamba-companion.is-inline { position:relative; inset:auto; flex:none; z-index:1; }
.bamba-companion.is-inline .bamba-launcher { touch-action:auto; cursor:pointer; }
.bamba-bubble[hidden] { display:none; }
.bamba-companion.is-motion-reduced .bamba-sprite { transition:none; }

.bamba-launcher {
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  width: var(--bamba-w);
  height: var(--bamba-h);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-xl);
  background: transparent;
  /* Clicking invites a comment; a held drag repositions the floating cat. */
  cursor: grab;
  user-select: none;
  touch-action: none;   /* let her be dragged instead of scrolling the page */
  pointer-events: auto;
  filter: drop-shadow(0 8px 8px rgba(13,20,32,.22));
}
.bamba-companion.is-dragging .bamba-launcher { cursor: grabbing; }
/* Bamba has no rectangular focus frame; keyboard focus follows her silhouette. */
#bamba-companion .bamba-launcher:focus { outline:none; }
.bamba-launcher:focus-visible .bamba-sprite { filter:drop-shadow(0 0 3px var(--text-heading)); }

.bamba-sprite {
  position: absolute;
  inset: 0;
  display: block;
  width: var(--bamba-w);
  height: var(--bamba-h);
  margin-inline: auto;
  /* Each cell is authored on the same aspect-correct 96 × 136 stage. The
     player supplies the active strip's frame count after its image loads. */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position-x: 0%;
  background-position-y: 0;
  image-rendering: pixelated;
  transition: transform 160ms ease;
}

.bamba-bubble {
  position: absolute;
  inset-inline-end: 76px;
  bottom: 122px;
  width: max-content;
  max-width: min(240px, calc(100vw - 130px));
  padding: 7px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md) var(--radius-md) 2px var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--elevation-toast);
  pointer-events: none;
  animation: bamba-bubble-in 180ms ease-out both;
}
.bamba-bubble::after {
  content: "";
  position: absolute;
  inset-inline-end: -7px;
  bottom: 10px;
  width: 12px;
  height: 12px;
  border-inline-end: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  background: var(--surface-card);
  transform: rotate(-45deg);
}
/* Inline speech is a sibling of the cat's reserved slot. A full row keeps
   long translations out of the narrow cat column and away from controls. */
.bamba-bubble.is-inline-bubble {
  position:static; grid-column:1 / -1; justify-self:end; align-self:start;
  width:fit-content; max-width:min(100%,30rem); box-sizing:border-box;
  margin-block:var(--space-sm); margin-inline-start:auto;
  color:var(--text-heading); font-family:var(--font-body); overflow-wrap:anywhere;
  border-radius:var(--radius-md);
}
.bamba-bubble.is-inline-bubble::after { display:none; }
/* Her Hebrew, and under it the English for readers who have none yet. */
.bamba-bubble-he { display:block; color:var(--text-heading); font:600 1.0625rem/1.3 var(--font-body); }
.bamba-bubble-en { display:block; margin-top:3px; color:var(--text-muted); font:400 .875rem/1.35 var(--font-body); }
.bamba-bubble-en[hidden] { display:none; }
/* Both lines centred: the Hebrew line's dir="rtl" would otherwise hang it
   off the right edge while the English hung off the left. */
.bamba-bubble .bamba-bubble-he, .bamba-bubble .bamba-bubble-en { text-align:center; }
/* The controller measures and clamps floating bubbles to the viewport;
   these classes turn the tail and corners toward the cat. */
.bamba-companion.is-near-left .bamba-bubble { inset-inline-end:auto; inset-inline-start:76px; border-radius:var(--radius-md) var(--radius-md) var(--radius-md) 2px; }
.bamba-companion.is-near-left .bamba-bubble::after { inset-inline-end:auto; inset-inline-start:-7px; border-inline-end:0; border-inline-start:1px solid var(--border-strong); transform:rotate(45deg); }
.bamba-companion.is-near-top .bamba-bubble { bottom:auto; top:calc(100% + 6px); }
.bamba-companion.is-near-top .bamba-bubble::after { bottom:auto; top:10px; }
/* While the phone drawer is open she is page content: under its scrim, and
   shell.js marks her inert with the rest of the page. */
html.panel-open .bamba-companion { z-index:38; }
/* The one-time introduction is a few sentences; it may take the width. */
.bamba-bubble.is-intro { max-width:min(300px, calc(100vw - 130px)); }

@keyframes bamba-bubble-in { from { opacity:0; transform:translateY(4px) scale(.98); } }

@media (prefers-reduced-motion:reduce) {
  .bamba-sprite { transition:none; }
  .bamba-bubble { animation:none; }
}

/* Bamba needs a mouse or a trackpad; on a touch screen there is no way to
   move her that does not also scroll the page. The same test as
   companion-loader.js, which refuses to mount her there — this is the
   belt-and-braces for a session whose pointer changed after she mounted.
   A width gate used to delete her at 200% browser zoom. */
@media (pointer: coarse), (pointer: none) {
  .bamba-companion, .bamba-bubble.is-inline-bubble { display: none !important; }
}