/* ============================================================
   BIT — companion robot mascot. Anchor sits bottom-right, above everything.
   `--bx`/`--by` are set by JS (px offsets from the anchor) to give Bit room
   to move around the screen / roam the chat box.
   ============================================================ */
.bit-root {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 92px; height: 100px;
  z-index: 320; /* above the chat panel (210) so he stays visible + animated over it */
  pointer-events: none; /* anchor is a point; only the robot + bubble catch clicks */
  transform: translate3d(var(--bx, 0px), var(--by, 0px), 0) scale(var(--scale, 1));
  transform-origin: bottom right;
  transition: transform 2.4s cubic-bezier(.34,.66,.36,1); /* slow, deliberate glide — like walking, not snapping */
  will-change: transform;
}
/* While dragging: no glide (he follows the pointer 1:1), grab cursor. */
.bit-root.m-dragging { transition: none !important; cursor: grabbing; }
.bit-robot-wrap { cursor: grab; }

/* ---- robot ---- */
.bit-robot-wrap {
  position: absolute; inset: 0;
  cursor: grab;
  pointer-events: auto;      /* must be interactive (drag / click-to-open) even though the root is none */
  touch-action: none;       /* stop the browser from hijacking the touch for page-scroll/zoom */
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
  transform-origin: bottom center;
  line-height: 0;
}
.bit-robot-wrap:hover { transform: translateY(-3px) scale(1.03); }
.bit-robot-wrap:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 16px; }
.bit-robot-wrap svg { display: block; width: 92px; height: 100px; }

/* ---- speech bubble — the text is just "Talk to Bit". Grows on hover;
   clicking it (or Bit) opens the chat.
   Anchored to the ROBOT'S RIGHT EDGE so it can never clip the right side of
   the screen, and capped to the viewport width. JS adds .m-below near the top
   of the screen so it never clips the top either. */
.bit-bubble {
  position: absolute;
  right: 0;                                   /* flush with the robot's right edge */
  bottom: calc(100% + 12px); /* floats just above the robot */
  transform: translate(0, 8px) scale(.55);
  transform-origin: bottom right;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 8px 12px;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.35;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  max-width: min(240px, calc(100vw - 28px));  /* never wider than the viewport */
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity .25s ease, transform .3s cubic-bezier(.2,.9,.3,1.4);
  will-change: transform, opacity;
}
/* the resting pill — visible and clickable (it opens the chat), subtle until hovered */
.bit-bubble.m-idle { opacity: .9; pointer-events: auto; }
.bit-bubble::after { /* little tail pointing down at the robot */
  content: "";
  position: absolute;
  right: 14px; bottom: -7px;
  width: 14px; height: 14px;
  background: var(--surface);
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  transform: rotate(45deg);
}
/* GROW on hover (over the robot OR the bubble) */
.bit-root:hover .bit-bubble,
.bit-bubble:hover,
.bit-bubble.show {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  pointer-events: auto;
  white-space: normal;
  width: max-content;
}
.bit-bubble.show { white-space: normal; width: max-content; }
.bit-bubble:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* The idle "Talk to Bit" teaser is redundant while the chat panel is open —
   hide it (and make it unclickable). Only applies in the IDLE state, so Bit's
   spoken lines (mood, "spinning up chat", dizzy/whee/shake reactions) still
   show: say() removes .m-idle and adds .show, which no longer matches this. */
.bit-bubble.m-hidden.m-idle {
  opacity: 0 !important;
  transform: translate(0, 0) scale(0);
  pointer-events: none !important;
}

/* Bubble BELOW Bit (flipped by JS when he's near the top of the screen, so
   the bubble never renders off the top of the viewport). */
.bit-bubble.m-below {
  bottom: auto;
  top: calc(100% + 12px);
  transform: translate(0, -8px) scale(.55);
  transform-origin: top right;
}
.bit-bubble.m-below::after {
  bottom: auto; top: -7px;
  border-right: none; border-bottom: none;
  border-left: 1px solid var(--line-strong);
  border-top: 1px solid var(--line-strong);
}
.bit-root:hover .bit-bubble.m-below,
.bit-bubble.m-below:hover,
.bit-bubble.m-below.show {
  transform: translate(0, 0) scale(1);
}

/* theme-aware fills */
.bit-chassis { fill: url(#none); }
.bit-robot { --bit-body: #eef1ff; --bit-body-edge:#c9d2f5; --bit-face:#131a33; --bit-eye:#37d3ff; --bit-limb:#dfe6ff; --bit-hand:#b9c4f0; --bit-screen:#0e1430; --bit-ear:#9b82ff; }
[data-theme="light"] .bit-robot { --bit-body:#ffffff; --bit-body-edge:#cdd6f5; --bit-face:#1b2244; --bit-eye:#2f6bff; --bit-limb:#eef1ff; --bit-hand:#c3cdf5; --bit-screen:#131a33; --bit-ear:#7b5bff; }
.bit-robot { --bit-eye:#5fe0ff; --bit-eye-hi:#eaffff; --bit-screen:#0a0e22; }
.bit-chassis { fill: var(--bit-body); stroke: var(--bit-body-edge); stroke-width: 2; }
.bit-limb { fill: var(--bit-limb); stroke: var(--bit-body-edge); stroke-width: 1.5; }
.bit-hand { fill: var(--bit-hand); }
.bit-face { fill: var(--bit-face); }
.bit-screen { fill: var(--bit-screen); }
.bit-eye { fill: var(--bit-eye); }
.bit-eye-hi { fill: var(--bit-eye-hi); }
.bit-eye-screen { fill: var(--bit-eye); }
.bit-mouth { fill: var(--bit-eye); }
.bit-ear { fill: var(--bit-ear); }
.bit-ant-stem { stroke: var(--bit-body-edge); stroke-width: 3; stroke-linecap: round; }
.bit-ant-tip { fill: var(--bit-ear); }
.bit-shadow { fill: rgba(0,0,0,.28); }

/* ---- animations ---- */
@keyframes bit-bob { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-4px) } }
@keyframes bit-blink { 0%,92%,100%{ transform: scaleY(1) } 95%{ transform: scaleY(.12) } }
@keyframes bit-ant { 0%,100%{ opacity:1 } 50%{ opacity:.45 } }
/* wave: flip the DOWN arm UP (hand to top, ~-150deg) then wave in the air. */
@keyframes bit-wave { 0%{ transform: rotate(0) } 18%{ transform: rotate(-150deg) } 32%{ transform: rotate(-118deg) } 46%{ transform: rotate(-165deg) } 60%{ transform: rotate(-122deg) } 74%{ transform: rotate(-160deg) } 88%{ transform: rotate(-128deg) } 100%{ transform: rotate(0) } }
/* point: flip the DOWN arm UP and reach out toward the target. */
@keyframes bit-point { 0%,100%{ transform: rotate(0) } 30%,60%{ transform: rotate(-70deg) } }
@keyframes bit-jump { 0%,100%{ transform: translateY(0) } 25%{ transform: translateY(-14px) } 50%{ transform: translateY(0) } 70%{ transform: translateY(-9px) } }
/* hop: a quick, single, bouncy little lift (for getting a chat message) */
@keyframes bit-hop { 0%,100%{ transform: translateY(0) } 30%{ transform: translateY(-10px) } 55%{ transform: translateY(0) } 72%{ transform: translateY(-5px) } }
/* talk: subtle fast up-down, like he's speaking */
@keyframes bit-talk { 0%,100%{ transform: translateY(0) rotate(0) } 25%{ transform: translateY(-2px) rotate(-1.2deg) } 75%{ transform: translateY(-2px) rotate(1.2deg) } }
/* mouth: opens and closes while talking (scale-y so it reads as a talking mouth) */
@keyframes bit-mouth-talk { 0%,100%{ transform: scaleY(1) } 50%{ transform: scaleY(3.4) } }
/* hands: small, relaxed up-down gestures, slightly offset so they don't sync */
@keyframes bit-talk-arm-right { 0%,100%{ transform: rotate(0) } 30%{ transform: rotate(-7deg) } 60%{ transform: rotate(4deg) } }
@keyframes bit-talk-arm-left  { 0%,100%{ transform: rotate(0) } 40%{ transform: rotate(6deg) } 75%{ transform: rotate(-4deg) } }
/* flip: a playful spin when the mouse whizzes past (one-shot, short) */
@keyframes bit-flip { 0%{ transform: rotate(0) translateY(0) } 45%{ transform: rotate(180deg) translateY(-10px) } 55%{ transform: rotate(190deg) translateY(-8px) } 100%{ transform: rotate(360deg) translateY(0) } }
/* dizzy: the EYES spin in a fast circle after a fling (pupils orbit their
   centers), while little stars orbit the head. Applied for ~1.5s. */
@keyframes bit-dizzy-eyes {
  0%   { transform: rotate(0deg) translateX(3px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(3px) rotate(-360deg); }
}
@keyframes bit-dizzy-star { 0%{ transform: rotate(0) translateY(0); opacity:0 } 20%{ opacity:1 } 100%{ transform: rotate(360deg) translateY(0); opacity:0 } }
@keyframes bit-dizzy-star2 { 0%{ transform: rotate(0) translateY(0); opacity:0 } 25%{ opacity:1 } 100%{ transform: rotate(-360deg) translateY(0); opacity:0 } }
/* the dizzy star ring is injected by JS; base style lives here */
.bit-dizzy-stars { position: absolute; inset: 0; pointer-events: none; }
.bit-dizzy-stars span { position: absolute; top: 6px; left: 50%; width: 0; height: 0; font-size: 13px; color: #ffd23f; }
.bit-dizzy-stars span:nth-child(1) { animation: bit-dizzy-star 1.5s linear; }
.bit-dizzy-stars span:nth-child(2) { animation: bit-dizzy-star2 1.2s linear; left: 20%; }
.bit-dizzy-stars span:nth-child(3) { animation: bit-dizzy-star 1.5s linear .2s; left: 80%; }
.bit-robot-wrap.m-dizzy { animation: bit-dizzy-bob .5s ease-in-out infinite; }
@keyframes bit-dizzy-bob { 0%,100%{ transform: rotate(-4deg) } 50%{ transform: rotate(4deg) } }
.bit-robot-wrap.m-dizzy .bit-pupil {
  transform-box: fill-box; transform-origin: center;
  animation: bit-dizzy-eyes .45s linear infinite;
}
/* rest: he sinks into a low "settling in" pose and slows his bob */
@keyframes bit-rest-settle { 0%{ transform: translateY(0) scaleY(1) } 100%{ transform: translateY(3px) scaleY(.9) } }

/* idle: gentle body bob + eye blink + antenna pulse */
.bit-robot-wrap.m-idle { animation: bit-bob 3.2s ease-in-out infinite; }
.bit-eyes { transform-origin: 60px 44px; animation: bit-blink 4.6s ease-in-out infinite; }
.bit-ant-tip { animation: bit-ant 2.4s ease-in-out infinite; }

/* REST pose — he "settles" and breathes slowly when the page is idle.
   Applied to an inner wrapper (bit-robot-settle) so it doesn't fight the
   outer animation used by idle/wave/celebrate. */
.bit-robot-settle { transform-box: fill-box; transform-origin: center bottom; will-change: transform; }
.bit-robot-settle.m-rest { animation: bit-rest-settle 1.1s ease forwards, bit-bob 5.2s ease-in-out 1.1s infinite; }
.bit-robot-wrap.m-rest .bit-eyes { animation-duration: 6.5s; }        /* blinks slower */
.bit-robot-wrap.m-rest .bit-ant-tip { animation-duration: 3.6s; }      /* antenna calmer */

/* hop: quick single hop (one-shot, not infinite) */
.bit-robot-wrap.m-hop { animation: bit-hop .62s cubic-bezier(.3,.8,.4,1.2); }
/* talk: he bobs/leans while a reply is being sent. Plus the "actually talking"
   bits: the mouth opens and closes, and the arms/hands give a small, natural
   gesture (talking with his hands) — a sales tactic, kept subtle. */
.bit-robot-wrap.m-talk { animation: bit-talk .7s ease-in-out infinite; }
.bit-robot-wrap.m-talk .bit-mouth { transform-box: fill-box; transform-origin: center; animation: bit-mouth-talk .34s ease-in-out infinite; }
.bit-robot-wrap.m-talk .bit-arm-right { animation: bit-talk-arm-right .9s ease-in-out infinite; }
.bit-robot-wrap.m-talk .bit-arm-left  { animation: bit-talk-arm-left 1.1s ease-in-out infinite; }
/* flip: playful spin (one-shot) */
.bit-robot-wrap.m-flip { animation: bit-flip .7s cubic-bezier(.4,.1,.3,1); }
/* quick relocation (when the chat opens and he jumps to the top of it) */
.bit-root.m-quick { transition-duration: .5s; }
/* eye tracking: pupils translate toward the cursor (set via JS transform) */
.bit-pupil { transform-box: fill-box; transform-origin: center; transition: transform .12s ease-out; will-change: transform; }

/* wave: right arm flips UP (grey hand goes from bottom to top), then waves.
   transform-origin at the SHOULDER = top-center of the down-arm, so the whole
   arm swings around the shoulder instead of flying off. */
.bit-arm { transform-box: fill-box; transform-origin: center top; }
.bit-arm-right { transform-origin: center top; }  /* ~95px,70px shoulder */
.bit-arm-left  { transform-origin: center top; }  /* ~25px,70px shoulder */
.bit-robot-wrap.m-wave .bit-arm-right { animation: bit-wave 1.6s ease-in-out infinite; }

/* point: right arm flips up and reaches out */
.bit-robot-wrap.m-point .bit-arm-right { animation: bit-point 1.4s ease-in-out infinite; }

/* celebrate: whole robot jumps, eyes bright */
.bit-robot-wrap.m-celebrate { animation: bit-jump 1s cubic-bezier(.3,.9,.4,1.3) infinite; }
.bit-robot-wrap.m-celebrate .bit-eye { fill: #7dffb0; }
.bit-robot-wrap.m-celebrate .bit-ant-tip { fill: #ffd23f; }

/* On phones Bit is a small corner figure. The bubble still works but stays
   compact so it never covers content. */
@media (max-width: 640px) {
  .bit-root { right: 10px; bottom: 10px; width: 52px; height: 58px; }
  .bit-robot-wrap svg { width: 52px; height: 58px; }
  .bit-bubble { font-size: .78rem; max-width: 190px; }
  .bit-bubble.show { max-width: 190px; }
}

/* ============================================================
   BIT CHAT PANEL — the robot's bubble becomes a real chat window.
   Bottom-right on desktop; full-width bottom sheet on phones.
   ============================================================ */
#bit-chat {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 210;
  width: min(360px, calc(100vw - 24px));
  height: min(520px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity .28s ease, transform .32s cubic-bezier(.2,.9,.3,1.3);
}
#bit-chat.open { opacity: 1; transform: none; pointer-events: auto; }
#bit-chat::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--grad-cta); z-index: 2;
}

/* header */
.bit-chat-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 12px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}
.bit-chat-head .bit-avatar { width: 34px; height: 34px; flex: 0 0 auto; }
.bit-chat-head .bit-avatar svg { width: 100%; height: 100%; display: block; }
.bit-chat-head h3 { margin: 0; font-size: 1rem; font-weight: 800; }
.bit-chat-head small { display: block; color: var(--ink-soft); font-size: .76rem; font-weight: 600; }
.bit-chat-head .bit-chat-close {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--ink-soft); font-size: 1.15rem; line-height: 1; padding: 6px;
  border-radius: 8px; transition: background .15s, color .15s;
}
.bit-chat-head .bit-chat-close:hover { background: var(--surface-2); color: var(--ink); }

/* message list */
.bit-chat-list {
  flex: 1 1 auto; overflow-y: auto; padding: 16px 14px;
  display: flex; flex-direction: column; gap: 10px;
  -webkit-overflow-scrolling: touch;
}
.bit-msg {
  max-width: 82%; padding: 9px 13px; border-radius: 16px;
  font-size: .92rem; line-height: 1.45; white-space: pre-wrap;
  word-wrap: break-word; overflow-wrap: anywhere;
  animation: bit-msg-in .3s ease both;
}
@keyframes bit-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bit-msg-bit {
  align-self: flex-start; background: var(--surface-2);
  border: 1px solid var(--line-strong); color: var(--ink);
  border-bottom-left-radius: 5px;
}
.bit-msg-user {
  align-self: flex-end; background: linear-gradient(135deg, var(--blue), var(--purple));
  color: #fff; border-bottom-right-radius: 5px;
}
.bit-msg-err {
  align-self: flex-start; background: color-mix(in srgb, #ff5d5d 16%, var(--surface));
  border: 1px solid color-mix(in srgb, #ff5d5d 40%, var(--line-strong));
  color: var(--ink); font-size: .86rem;
}
/* typing indicator */
.bit-typing { display: inline-flex; gap: 4px; align-items: center; padding: 12px 14px; }
.bit-typing::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-soft); animation: bit-dot 1.2s infinite;
}
.bit-typing::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-soft); animation: bit-dot 1.2s infinite .2s;
}
@keyframes bit-dot { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* input row */
.bit-chat-inputrow {
  display: flex; gap: 8px; padding: 12px;
  border-top: 1px solid var(--line); background: var(--surface);
}
.bit-chat-input {
  flex: 1; min-width: 0; resize: none;
  background: var(--surface-2); border: 1.5px solid var(--line-strong);
  border-radius: 14px; padding: 11px 14px; color: var(--ink);
  font-family: inherit; font-size: .94rem; line-height: 1.35;
  transition: border-color .18s;
}
.bit-chat-input:focus { outline: none; border-color: var(--blue); }
.bit-chat-send {
  flex: 0 0 auto; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--blue), var(--purple)); color: #fff;
  border-radius: 14px; padding: 0 18px; font-weight: 800; font-size: .95rem;
  transition: transform .12s, filter .15s;
}
.bit-chat-send:hover { filter: brightness(1.08); }
.bit-chat-send:active { transform: scale(.97); }
.bit-chat-send:disabled { opacity: .6; cursor: default; }

/* the open button (replaces the plain bubble on click) */
.bit-chat-open {
  position: absolute; top: -6px; left: 12px;
  background: linear-gradient(135deg, var(--blue), var(--purple)); color: #fff;
  border: none; cursor: pointer; font-weight: 800; font-size: .8rem;
  padding: 7px 12px; border-radius: 999px; box-shadow: var(--shadow-md);
  pointer-events: auto; white-space: nowrap; z-index: 3;
}

/* ---- mobile: full-width bottom sheet ---- */
@media (max-width: 640px) {
  #bit-chat {
    right: 0; bottom: 0; left: 0;
    width: 100%; height: min(78vh, 560px);
    border-radius: 20px 20px 0 0;
    transform: translateY(30px);
    transform-origin: bottom center;
  }
  #bit-chat.open { transform: none; }
}

/* respect reduced motion: no bob/wave loops */
@media (prefers-reduced-motion: reduce) {
  .bit-root * { animation: none !important; }
  #bit-chat, .bit-msg, .bit-typing::before, .bit-typing::after { animation: none !important; }
  #bit-chat { transition: none; }
}