/* Libby, the Libney hen. Her poses are CSS on one drawing (public/libby.js), the same
   way Reggie works in Libpay: change data-pose and the right parts move.
   Everything honours "reduce motion": she stays put, and still talks. */

#libby-root { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 60; pointer-events: none; font-family: var(--font); }
#libby-root[hidden] { display: none; }

.lb-stage {
  position: absolute; left: 0; top: 0;
  width: var(--lb-w, 130px); height: var(--lb-h, 160px);
  transition: transform 0s linear; will-change: transform; pointer-events: none;
}
.lb-fig { width: 100%; height: 100%; pointer-events: auto; cursor: pointer; transform-origin: 50% 92%; -webkit-tap-highlight-color: transparent; }
.lb-fig[data-face="left"] { transform: scaleX(-1); }
.lb-fig:focus-visible { outline: 3px solid var(--emerald-bright); outline-offset: 2px; border-radius: 16px; }
.lb-fig svg { width: 100%; height: 100%; overflow: visible; display: block; }

/* speech bubble */
.lb-bubble {
  position: absolute; bottom: calc(100% - 8px); right: 0; width: max-content; max-width: min(270px, 70vw);
  background: var(--bg-elevated); color: var(--text); border: 2px solid var(--emerald);
  border-radius: 18px; padding: 12px 16px; font-size: 18px; line-height: 1.35; box-shadow: var(--shadow);
  pointer-events: auto; cursor: pointer; opacity: 0; transform: translateY(6px) scale(0.96); transition: opacity .2s, transform .2s; visibility: hidden;
}
.lb-bubble.show { opacity: 1; transform: none; visibility: visible; }
.lb-bubble.left { right: auto; left: 0; }
.lb-bubble::after { content: ""; position: absolute; top: 100%; right: 38px; border: 9px solid transparent; border-top-color: var(--emerald); }
.lb-bubble.left::after { right: auto; left: 38px; }
.lb-bubble .lb-hint { display: block; margin-top: 6px; font-size: 0.8em; color: var(--text-muted); }

/* small controls that hover by her */
.lb-more {
  position: absolute; top: -4px; left: -6px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-elevated-2); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; pointer-events: auto; opacity: 0.85;
}
.lb-more:hover, .lb-more:focus-visible { opacity: 1; outline: 2px solid var(--emerald-bright); }
.lb-menu {
  position: absolute; bottom: calc(100% + 4px); left: 0; min-width: 230px; background: var(--bg-elevated); color: var(--text);
  border: 1px solid var(--border); border-radius: 14px; padding: 8px; box-shadow: var(--shadow); pointer-events: auto; display: none;
}
.lb-menu.open { display: block; }
.lb-menu button {
  display: block; width: 100%; text-align: left; padding: 12px 14px; margin: 2px 0; border: 0; border-radius: 10px; background: transparent;
  color: var(--text); font-size: 17px; cursor: pointer;
}
.lb-menu button:hover, .lb-menu button:focus-visible { background: var(--bg-elevated-2); outline: none; }
.lb-menu button[aria-checked="true"]::before { content: "\2713  "; color: var(--emerald-bright); }

/* chat panel */
.lb-panel {
  position: fixed; right: 12px; bottom: calc(var(--lb-h, 160px) + 24px); width: min(400px, calc(100vw - 24px));
  height: min(72vh, 560px); max-height: calc(100vh - var(--lb-h, 160px) - 40px);
  display: none; flex-direction: column; background: var(--bg-elevated); color: var(--text);
  border: 2px solid var(--emerald); border-radius: 22px; box-shadow: var(--shadow); pointer-events: auto; z-index: 61; overflow: hidden;
}
.lb-panel.open { display: flex; }
.lb-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.lb-head h2 { margin: 0; font-size: 20px; flex: 1; }
.lb-sound {
  min-height: 52px; min-width: 132px; padding: 0 16px; border-radius: 26px; border: 2px solid var(--emerald); background: var(--bg-elevated-2);
  color: var(--text); font-size: 18px; font-weight: 800; cursor: pointer;
}
.lb-sound[aria-pressed="true"] { background: var(--emerald); color: #05130c; }
.lb-close { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--bg-elevated-2); color: var(--text); font-size: 24px; cursor: pointer; }
.lb-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 18px; line-height: 1.4; }
.lb-msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.lb-msg.me { align-self: flex-end; background: var(--emerald); color: #05130c; }
.lb-msg.her { align-self: flex-start; background: var(--bg-elevated-2); }
.lb-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 8px; }
.lb-chips button { border: 1px solid var(--border); background: var(--bg-elevated-2); color: var(--text); border-radius: 18px; padding: 10px 14px; font-size: 16px; cursor: pointer; }
.lb-form { display: flex; gap: 8px; padding: 10px 12px 14px; border-top: 1px solid var(--border); }
.lb-form input { flex: 1; min-width: 0; font-size: 18px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.lb-form button { min-height: 48px; min-width: 56px; border-radius: 14px; border: 0; font-size: 17px; font-weight: 800; cursor: pointer; background: var(--emerald); color: #05130c; }
.lb-form .lb-mic { background: var(--bg-elevated-2); color: var(--text); border: 1px solid var(--border); }
.lb-form .lb-mic.listening { background: var(--red); color: #fff; }

/* ---------- her parts ---------- */
.lb .prop, .lb .eyes-closed, .lb .zzz { display: none; }
.lb .rig { animation: lbBreathe 3.6s ease-in-out infinite; transform-origin: 160px 330px; }
.lb .eye { animation: lbBlink 5s infinite; transform-box: view-box; }
.lb .eyes-open ellipse.eye:nth-of-type(1) { transform-origin: 138px 112px; }
.lb .eyes-open ellipse.eye:nth-of-type(2) { transform-origin: 182px 112px; }
.lb .head { transform-origin: 160px 160px; }
.lb .arm-l { transform: rotate(4deg); }
.lb .arm-r { transform: rotate(-4deg); }
.lb .beak { transform-origin: 160px 128px; }
.lb[data-talk="1"] .beak { animation: lbTalk .22s ease-in-out infinite; }

.lb[data-pose="walk"] .rig { animation: lbWalkBob .5s ease-in-out infinite; }
.lb[data-pose="walk"] .leg-l { animation: lbSwing 1s ease-in-out infinite; }
.lb[data-pose="walk"] .leg-r { animation: lbSwing 1s ease-in-out infinite; animation-delay: -.5s; }
.lb[data-pose="walk"] .arm-l { animation: lbArm 1s ease-in-out infinite; animation-delay: -.5s; }
.lb[data-pose="walk"] .arm-r { animation: lbArm 1s ease-in-out infinite; }
.lb[data-pose="walk"] .head { animation: lbNod .5s ease-in-out infinite; }
.lb[data-pose="run"] .rig { animation: lbWalkBob .5s ease-in-out infinite; }
.lb[data-pose="run"] .leg-l { animation: lbSwing 1s ease-in-out infinite; }
.lb[data-pose="run"] .leg-r { animation: lbSwing 1s ease-in-out infinite; animation-delay: -.5s; }
.lb[data-pose="run"] .arm-l { animation: lbArm 1s ease-in-out infinite; animation-delay: -.5s; }
.lb[data-pose="run"] .arm-r { animation: lbArm 1s ease-in-out infinite; }

.lb[data-pose="wave"] .arm-r { animation: lbWave .9s ease-in-out infinite; }
.lb[data-pose="torch"] .arm-r { transform: rotate(-160deg); }
.lb[data-pose="torch"] .p-torch { display: inline; }
.lb[data-pose="torch"] .flame, .lb .flame { animation: lbFlame 1.3s ease-in-out infinite; transform-box: view-box; transform-origin: 0 124px; }
.lb[data-pose="ledger"] .arm-l { transform: rotate(-42deg); }
.lb[data-pose="ledger"] .arm-r { transform: rotate(38deg); }
.lb[data-pose="ledger"] .p-ledger { display: inline; }
.lb[data-pose="phone"] .arm-r { transform: rotate(42deg); }
.lb[data-pose="phone"] .p-phone { display: inline; }
.lb[data-pose="coin"] .arm-l { transform: rotate(58deg); }
.lb[data-pose="coin"] .p-coin { display: inline; }
.lb[data-pose="coin"] .coin-spin { animation: lbCoin 2.4s ease-in-out infinite; transform-box: view-box; transform-origin: 0 -22px; }
.lb[data-pose="cross"] .arm-l { transform: rotate(-58deg); }
.lb[data-pose="cross"] .arm-r { transform: rotate(62deg); }
.lb[data-pose="cross"] .foot-r { animation: lbTap .55s ease-in-out infinite; transform-origin: 0 58px; }

.lb[data-pose="cheer"] .rig { animation: lbHop .7s ease-in-out infinite; }
.lb[data-pose="cheer"] .arm-r { transform: rotate(-168deg); }
.lb[data-pose="cheer"] .arm-l { transform: rotate(168deg); }
.lb[data-pose="hop"] .rig { animation: lbHop .6s ease-in-out infinite; }
.lb[data-pose="clap"] .arm-l { animation: lbClapL .4s ease-in-out infinite; }
.lb[data-pose="clap"] .arm-r { animation: lbClapR .4s ease-in-out infinite; }
.lb[data-pose="point"] .arm-r { transform: rotate(-96deg); }
.lb[data-pose="think"] .arm-r { transform: rotate(155deg); }
.lb[data-pose="think"] .head { transform: rotate(6deg); }
.lb[data-pose="shrug"] .arm-l { transform: rotate(38deg); }
.lb[data-pose="shrug"] .arm-r { transform: rotate(-38deg); }
.lb[data-pose="shrug"] .head { animation: lbNod 1.2s ease-in-out infinite; }
.lb[data-pose="worry"] .arm-r { transform: rotate(150deg); }
.lb[data-pose="worry"] .arm-l { transform: rotate(-150deg); }
.lb[data-pose="worry"] .head { animation: lbNod .35s ease-in-out infinite; }
.lb[data-pose="dance"] .rig { animation: lbSway .8s ease-in-out infinite; }
.lb[data-pose="dance"] .arm-l { animation: lbDanceL .8s ease-in-out infinite; }
.lb[data-pose="dance"] .arm-r { animation: lbDanceR .8s ease-in-out infinite; }
.lb[data-pose="dance"] .leg-l { animation: lbLegL .4s ease-in-out infinite; }
.lb[data-pose="dance"] .leg-r { animation: lbLegR .4s ease-in-out infinite; }
.lb[data-pose="sleep"] .eyes-open { display: none; }
.lb[data-pose="sleep"] .eyes-closed, .lb[data-pose="sleep"] .zzz { display: inline; }
.lb[data-pose="sleep"] .head { transform: rotate(8deg); }
.lb[data-pose="sleep"] .rig { animation-duration: 6s; }
.lb[data-pose="sleep"] .zzz { animation: lbZ 2.4s ease-in-out infinite; }

@keyframes lbBreathe { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
@keyframes lbBlink { 0%,92%,100% { transform: scaleY(1) } 95% { transform: scaleY(.08) } }
@keyframes lbTalk { 0%,100% { transform: scaleY(1) } 50% { transform: scaleY(1.35) } }
@keyframes lbWalkBob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@keyframes lbSwing { 0%,100% { transform: rotate(-26deg) } 50% { transform: rotate(26deg) } }
@keyframes lbArm { 0%,100% { transform: rotate(-30deg) } 50% { transform: rotate(30deg) } }
@keyframes lbNod { 0%,100% { transform: rotate(-1.5deg) } 50% { transform: rotate(1.5deg) } }
@keyframes lbWave { 0%,100% { transform: rotate(-120deg) } 50% { transform: rotate(-155deg) } }
@keyframes lbFlame { 0%,100% { transform: scale(1,1) rotate(-2deg) } 50% { transform: scale(1.08,1.15) rotate(3deg) } }
@keyframes lbCoin { 0%,100% { transform: scaleX(1) } 50% { transform: scaleX(.15) } }
@keyframes lbTap { 0%,100% { transform: rotate(0) } 50% { transform: rotate(-16deg) } }
@keyframes lbHop { 0%,100% { transform: translateY(0) } 40% { transform: translateY(-22px) } }
@keyframes lbClapL { 0%,100% { transform: rotate(-60deg) } 50% { transform: rotate(-30deg) } }
@keyframes lbClapR { 0%,100% { transform: rotate(60deg) } 50% { transform: rotate(30deg) } }
@keyframes lbSway { 0%,100% { transform: rotate(-5deg) translateY(0) } 50% { transform: rotate(5deg) translateY(-8px) } }
@keyframes lbDanceL { 0%,100% { transform: rotate(150deg) } 50% { transform: rotate(60deg) } }
@keyframes lbDanceR { 0%,100% { transform: rotate(-60deg) } 50% { transform: rotate(-150deg) } }
@keyframes lbLegL { 0%,100% { transform: rotate(-12deg) } 50% { transform: rotate(12deg) } }
@keyframes lbLegR { 0%,100% { transform: rotate(12deg) } 50% { transform: rotate(-12deg) } }
@keyframes lbZ { 0%,100% { opacity: .35; transform: translateY(0) } 50% { opacity: 1; transform: translateY(-8px) } }

@media (prefers-reduced-motion: reduce) {
  .lb *, .lb-bubble { animation: none !important; transition: none !important; }
}
@media (max-width: 520px) {
  .lb-panel { right: 6px; width: calc(100vw - 12px); height: 70vh; }
  .lb-bubble { font-size: 17px; max-width: 62vw; }
}

/* the figure is a button for keyboards and screen readers; strip the button look */
button.lb-fig { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; }
.lb-bubble.below { bottom: auto; top: calc(100% - 8px); }
.lb-bubble.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--emerald); }
.lb-menu[style*="bottom: auto"] { top: calc(100% + 4px); }

/* a change Libby has lined up, waiting for a real tap */
.lb-action { align-self: stretch; border: 2px solid var(--amber); background: var(--bg-elevated-2); border-radius: 16px; padding: 12px 14px; }
.lb-action-title { font-size: 0.85em; color: var(--text-muted); margin-bottom: 4px; }
.lb-action-what { font-size: 1.05em; font-weight: 700; overflow-wrap: anywhere; }
.lb-action-buttons { display: flex; gap: 10px; margin-top: 12px; }
.lb-action-buttons button { flex: 1; min-height: 52px; border-radius: 14px; border: 0; font-size: 18px; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.lb-yes { background: var(--emerald); color: #05130c; }
.lb-no { background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border) !important; }
.lb-action-buttons button:disabled { opacity: 0.55; }
.lb-action-done { font-weight: 700; }

/* ---------- the one-time introduction ---------- */
.lb-intro { position: fixed; inset: 0; z-index: 95; background: rgba(0, 0, 0, 0.62); display: flex; align-items: center; justify-content: center; padding: 14px; }
.lb-intro-card { background: var(--bg-elevated); color: var(--text); border: 2px solid var(--emerald); border-radius: 28px; width: min(560px, 100%); max-height: 94vh; max-height: 94dvh; overflow-y: auto; padding: 22px 22px 18px; text-align: center; box-shadow: var(--shadow); }
.lb-intro-fig { width: 170px; height: 210px; margin: 0 auto; }
.lb-intro-fig svg { width: 100%; height: 100%; overflow: visible; display: block; }
.lb-intro-text { font-size: 26px; line-height: 1.35; margin: 8px 0 14px; min-height: 3.4em; }
.lb-intro-input { width: 100%; box-sizing: border-box; font-size: 26px; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--border); background: var(--bg); color: var(--text); text-align: center; margin-bottom: 12px; }
.lb-intro-nav { display: flex; flex-direction: column; gap: 10px; }
.lb-intro-btn { min-height: 60px; border-radius: 16px; border: 2px solid var(--border); background: var(--bg-elevated-2); color: var(--text); font-size: 22px; font-weight: 800; cursor: pointer; touch-action: manipulation; padding: 0 18px; }
.lb-intro-btn.primary { background: var(--emerald); color: #05130c; border-color: var(--emerald); }
.lb-intro-extras { display: flex; justify-content: center; gap: 12px; }
.lb-intro-btn.quiet { min-height: 48px; font-size: 17px; font-weight: 600; background: transparent; border-color: transparent; color: var(--text-muted); text-decoration: underline; }
.lb-intro-dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.lb-intro-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.lb-intro-dots span.on { background: var(--emerald); }

/* ---------- Safari / iPad ---------- */
/* Safari's toolbar changes the visible height, so prefer the dynamic viewport unit where it exists. */
.lb-panel { height: min(72dvh, 560px); max-height: calc(100dvh - var(--lb-h, 160px) - 40px); bottom: calc(var(--lb-h, 160px) + 24px + env(safe-area-inset-bottom, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); }
/* Safari does not always apply a transform-origin to a nested SVG group the way other browsers do; say it outright. */
.lb .arm-l, .lb .arm-r, .lb .leg-l, .lb .leg-r { transform-box: view-box; transform-origin: 0 0; }
.lb button, .lb-fig, .lb-more, .lb-menu button, .lb-sound, .lb-close, .lb-chips button, .lb-form button { touch-action: manipulation; }

/* the menu opens toward the screen, never off the edge of it */
.lb-menu { max-width: calc(100vw - 24px); }
.lb-menu.right { left: auto; right: 0; }

/* the menu opens toward the screen, never off the edge of it */
.lb-menu { max-width: calc(100vw - 24px); }
.lb-menu.right { left: auto; right: 0; }

/* ---------- just talk: tap her, speak, she answers ---------- */
.lb[data-pose="listen"] .arm-l { transform: rotate(-155deg); }
.lb[data-pose="listen"] .head { transform: rotate(-7deg); }
.lb-bubble.big { font-size: 22px; max-width: min(440px, 88vw); padding: 14px 18px; }
.lb-bubble.big .lb-bubble-text { display: block; max-height: 46vh; max-height: 46dvh; overflow-y: auto; }
.lb-mic-badge { position: absolute; top: -2px; right: -2px; width: 46px; height: 46px; border-radius: 50%; background: var(--red); color: #fff; display: none; align-items: center; justify-content: center; pointer-events: none; box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.7); }
.lb-mic-badge svg { width: 26px; height: 26px; }
.lb-stage.listening .lb-mic-badge { display: flex; animation: lbMicPulse 1.1s ease-out infinite; }
.lb-stage.listening .lb-fig { animation: lbListenBob 1.1s ease-in-out infinite; }
.lb-voice-cards { position: fixed; right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(var(--lb-h, 160px) + 24px + env(safe-area-inset-bottom, 0px)); width: min(420px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 10px; pointer-events: none; z-index: 62; }
.lb-voice-cards .lb-action { pointer-events: auto; box-shadow: var(--shadow); }
@keyframes lbMicPulse { 0% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.7); } 100% { box-shadow: 0 0 0 18px rgba(248, 113, 113, 0); } }
@keyframes lbListenBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .lb-stage.listening .lb-mic-badge, .lb-stage.listening .lb-fig { animation: none !important; } }
.lb-bubble-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.lb-bubble-cards .lb-action { box-shadow: none; background: var(--bg-elevated-2); }

/* ---------- funnier things she does ---------- */
.lb .prop.p-juggle, .lb .prop.p-cloth { display: none; }
.lb[data-pose="wipe"] .p-cloth { display: inline; }
.lb[data-pose="wipe"] .arm-r { animation: lbWipe .45s ease-in-out infinite; }
.lb[data-pose="wipe"] .rig { animation: lbLean .9s ease-in-out infinite; }
.lb[data-pose="juggle"] .p-juggle { display: inline; }
.lb[data-pose="juggle"] .arm-l { animation: lbJugArmL .6s ease-in-out infinite; }
.lb[data-pose="juggle"] .arm-r { animation: lbJugArmR .6s ease-in-out infinite; }
.lb .jc { transform-box: view-box; }
.lb .jc1 { animation: lbJuggle 1.2s linear infinite; }
.lb .jc2 { animation: lbJuggle 1.2s linear infinite; animation-delay: -.4s; }
.lb .jc3 { animation: lbJuggle 1.2s linear infinite; animation-delay: -.8s; }
.lb[data-pose="peck"] .head { animation: lbPeck 1.6s ease-in-out infinite; }
.lb[data-pose="peck"] .beak { animation: lbTalk .3s ease-in-out infinite; transform-origin: 160px 128px; }
.lb[data-pose="stretch"] .arm-l { animation: lbStretchL 2.6s ease-in-out infinite; }
.lb[data-pose="stretch"] .arm-r { animation: lbStretchR 2.6s ease-in-out infinite; }
.lb[data-pose="stretch"] .rig { animation: lbStretchBody 2.6s ease-in-out infinite; }
@keyframes lbWipe { 0%, 100% { transform: rotate(-80deg); } 50% { transform: rotate(-112deg); } }
@keyframes lbLean { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes lbJuggle { 0% { transform: translate(0, 0); } 25% { transform: translate(64px, -86px); } 50% { transform: translate(128px, 0); } 75% { transform: translate(64px, -62px); } 100% { transform: translate(0, 0); } }
@keyframes lbJugArmL { 0%, 100% { transform: rotate(38deg); } 50% { transform: rotate(18deg); } }
@keyframes lbJugArmR { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(-38deg); } }
@keyframes lbPeck { 0%, 100% { transform: translateY(0) rotate(0); } 12% { transform: translateY(40px) rotate(16deg); } 24% { transform: translateY(0) rotate(0); } 40% { transform: translateY(40px) rotate(16deg); } 52% { transform: translateY(0) rotate(0); } 70% { transform: translateY(40px) rotate(16deg); } 82% { transform: translateY(0) rotate(0); } }
@keyframes lbStretchL { 0%, 100% { transform: rotate(8deg); } 40%, 60% { transform: rotate(172deg); } }
@keyframes lbStretchR { 0%, 100% { transform: rotate(-8deg); } 40%, 60% { transform: rotate(-172deg); } }
@keyframes lbStretchBody { 0%, 100% { transform: scale(1, 1) translateY(0); } 40%, 60% { transform: scale(1, 1.05) translateY(-6px); } }

/* smudges she cleans off the glass: faint, never clickable */
.lb-smudge { position: fixed; width: 150px; height: 110px; margin: -55px 0 0 -75px; border-radius: 50%; pointer-events: none; z-index: 58; opacity: 0; transition: opacity 1.1s ease;
  background: radial-gradient(ellipse at center, rgba(140, 140, 140, 0.34), rgba(140, 140, 140, 0.12) 55%, rgba(140, 140, 140, 0) 72%); }
.lb-smudge.on { opacity: 1; }
.lb-sparkle { position: fixed; pointer-events: none; z-index: 59; font-size: 26px; color: var(--emerald-bright); opacity: 0; }

/* mic and keyboard buttons beside her */
/* Beside her, outside the line of her speech bubble: the column never grows taller than she is, extra buttons
   start a second column further out. (Before this, the tall column reached up into her bubble.) */
.lb-side { position: absolute; bottom: 4px; right: calc(100% + 6px); max-height: var(--lb-h, 180px); display: flex; flex-direction: column; flex-wrap: wrap-reverse; align-content: flex-end; gap: 8px; pointer-events: auto; }
.lb-stage.btns-right .lb-side { right: auto; left: calc(100% + 6px); flex-wrap: wrap; align-content: flex-start; }
/* Fixed to the screen edge */
.lb-dock { position: fixed; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 61; pointer-events: none; }
.lb-dock.left { left: calc(10px + env(safe-area-inset-left, 0px)); }
.lb-dock.right { right: calc(10px + env(safe-area-inset-right, 0px)); }
.lb-side.docked { position: static; max-height: none; flex-wrap: nowrap; align-content: stretch; }
.lb-side button { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--emerald); background: var(--bg-elevated); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); touch-action: manipulation; padding: 0; }
.lb-side button.mic { background: var(--emerald); color: #05130c; }
.lb-side button.kbd { width: 44px; height: 44px; margin-left: 6px; border-color: var(--border); }
.lb-side svg { width: 28px; height: 28px; }
.lb-side button.kbd svg { width: 22px; height: 22px; }
.lb-stage { contain: layout style; }

/* shush: appears whenever she is talking */
.lb-side .lb-stop { position: static; width: 56px; height: 56px; padding: 0; border-radius: 50%; border: 0; background: var(--red); color: #fff; font-size: 13px; line-height: 1.1; font-weight: 800; cursor: pointer; pointer-events: auto; box-shadow: var(--shadow); touch-action: manipulation; }
.lb-stop[hidden] { display: none; }

/* resting: a small chip so she is never lost, and a Zzz button beside her */
.lb-side button.zzz { width: 44px; height: 44px; margin-left: 6px; border-color: var(--border); font-size: 14px; font-weight: 800; color: var(--text-muted); }
.lb-chip { position: fixed; right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-muted); font-size: 15px; pointer-events: auto; cursor: pointer; box-shadow: var(--shadow); z-index: 60; }
.lb-chip[hidden] { display: none; }

/* The introduction: she runs in, then bobs and breathes so she is never a still picture. */
.lb-intro-fig { animation: lbIntroBob 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
.lb-intro-fig.enter { animation: lbIntroEnter 1.2s cubic-bezier(.2,.8,.3,1) both, lbIntroBob 2.6s ease-in-out 1.2s infinite; }
@keyframes lbIntroEnter { 0% { transform: translateX(-120%) rotate(-6deg); opacity: 0 } 60% { transform: translateX(6%) rotate(2deg); opacity: 1 } 100% { transform: translateX(0) rotate(0) } }
@keyframes lbIntroBob { 0%,100% { transform: translateY(0) scale(1, 1) } 50% { transform: translateY(-5px) scale(1.015, 0.99) } }
@media (prefers-reduced-motion: reduce) { .lb-intro-fig, .lb-intro-fig.enter { animation: none; } }

/* Accessibility sizes, chosen by the owner for each person */
html[data-lb-btn="large"] .lb-side button, html[data-lb-btn="large"] .lb-side .lb-stop { width: 72px; height: 72px; font-size: 16px; }
html[data-lb-btn="huge"] .lb-side button, html[data-lb-btn="huge"] .lb-side .lb-stop { width: 92px; height: 92px; font-size: 19px; }
html[data-lb-btn="large"] .lb-side button.kbd, html[data-lb-btn="large"] .lb-side button.zzz { width: 60px; height: 60px; }
html[data-lb-btn="huge"] .lb-side button.kbd, html[data-lb-btn="huge"] .lb-side button.zzz { width: 76px; height: 76px; }
html[data-lb-btn="large"] .lb-side svg { width: 36px; height: 36px; } html[data-lb-btn="huge"] .lb-side svg { width: 48px; height: 48px; }
html[data-lb-btn="large"] .lb-side { right: calc(100% + 6px); } 
html[data-lb-btn="large"] .lb-action-buttons button, html[data-lb-btn="large"] .lb-intro-btn { min-height: 68px; font-size: 22px; }
html[data-lb-btn="huge"] .lb-action-buttons button, html[data-lb-btn="huge"] .lb-intro-btn { min-height: 88px; font-size: 28px; }
html[data-lb-text="small"] .lb-bubble, html[data-lb-text="small"] .lb-log { font-size: 15px; }
html[data-lb-text="large"] .lb-bubble, html[data-lb-text="large"] .lb-log, html[data-lb-text="large"] .lb-form input { font-size: 23px; }
html[data-lb-text="huge"] .lb-bubble, html[data-lb-text="huge"] .lb-log, html[data-lb-text="huge"] .lb-form input { font-size: 29px; }
html[data-lb-text="large"] .lb-intro-text { font-size: 32px; } html[data-lb-text="huge"] .lb-intro-text { font-size: 38px; }

/* a splash she throws over something that looks bad, and then wipes off */
.lb-splat { position: fixed; transform: translate(-50%, -50%) scale(.2); border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%; pointer-events: none; z-index: 58; opacity: 0;
  background: radial-gradient(ellipse at 40% 40%, #fde68a, #f59e0b 60%, #b45309); box-shadow: 0 2px 10px rgba(0,0,0,.35); transition: opacity .35s ease, transform .5s cubic-bezier(.2,1.4,.4,1); }
.lb-splat.on { opacity: .96; transform: translate(-50%, -50%) scale(1); }
.lb-splat:not(.on) { transition: opacity 2s ease, transform 2s ease; transform: translate(-50%, -50%) scale(1.15); }

/* The microphone asks to be tapped when Safari would not open it by itself */
.lb-side button.mic.attention { animation: lbAttention 1s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(16, 185, 129, .7); }
@keyframes lbAttention { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16,185,129,.7) } 60% { transform: scale(1.12); box-shadow: 0 0 0 16px rgba(16,185,129,0) } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16,185,129,0) } }
@media (prefers-reduced-motion: reduce) { .lb-side button.mic.attention { animation: none; outline: 4px solid var(--emerald); } }