/*!
 * AeroBot 1.0: styles
 * ------------------------------------------------------------------
 * BRANDING: change the variables in the first block below.
 * Everything is prefixed "ab-" so it won't clash with your site CSS.
 */
.ab-theme {
  --ab-navy: #041C46;        /* logo navy: wings, feet, plane, panel header */
  --ab-body: #14378A;        /* globe body (lit side) */
  --ab-body-shade: #0A2766;  /* globe body (shaded side) */
  --ab-red: #D41B1C;         /* logo red: swoosh, call buttons */
  --ab-white: #FFFFFF;
  --ab-outline: #FFFFFF;     /* sticker outline that keeps it visible on dark pages */
  --ab-grid: #F2F6FF;        /* globe lines */
  --ab-cheek: #FF7F94;       /* rosy cheeks (drawn version) */
  --ab-lid-1: #0B4A9E;       /* eyelid colours for blinking: match the globe */
  --ab-lid-2: #063A85;
  --ab-ink: #0E1B33;         /* panel text */
  --ab-muted: #5A6781;
  --ab-surface: #FFFFFF;
  --ab-surface-2: #F3F6FB;   /* chat background */
  --ab-border: #DCE3EF;
  --ab-focus: #FFB020;       /* keyboard focus ring: visible on navy and on white */
  --ab-radius: 18px;
  /* --ab-font: "Your Site Font", sans-serif;   (unset = use the page's font) */
}

/* ---------- Base resets (keep site CSS from leaking in) ---------- */
.ab-theme, .ab-theme *, .ab-theme *::before, .ab-theme *::after { box-sizing: border-box; }
.ab-theme svg { display: block; overflow: visible; }
.ab-theme button {
  -webkit-appearance: none; appearance: none; margin: 0; border: 0; background: none; color: inherit;
  font: inherit; text-transform: none; letter-spacing: normal; line-height: inherit; box-shadow: none;
  min-width: 0; min-height: 0; width: auto; height: auto; cursor: pointer; text-align: inherit; border-radius: 0;
}
.ab-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ================================================================
 * THE CHARACTER
 * ============================================================== */
.ab-root {
  position: fixed; left: 0; top: 0; width: var(--ab-size, 96px); height: var(--ab-size, 96px);
  transform: translate3d(-400px, -400px, 0); will-change: transform; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s;
}
.ab-root.ab-ready { opacity: 1; visibility: visible; transition: opacity .25s ease; }
.ab-root.ab-gone, .ab-root.ab-sheet-open { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.ab-root.ab-flying .ab-pet, .ab-root.ab-flying .ab-hidex { pointer-events: none; }

.ab-pet {
  pointer-events: auto; position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  padding: 0 !important; border-radius: 38% !important; background: transparent !important;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.ab-pet .ab-svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 3px 5px rgba(4, 15, 30, .32));
  transition: transform .25s cubic-bezier(.3, 1.5, .5, 1);
}
.ab-pet:hover .ab-svg { transform: scale(1.06); }
.ab-pet:focus { outline: none; }
.ab-pet:focus-visible { outline: 3px solid var(--ab-focus); outline-offset: 2px; }

/* SVG paint */
.ab-svg .ab-navy { fill: var(--ab-navy); }
.ab-svg .ab-body { fill: var(--ab-body); }
.ab-svg .ab-shade { fill: var(--ab-body-shade); }
.ab-svg .ab-eye-ring { stroke: var(--ab-navy); stroke-width: 1.6; }
.ab-svg .ab-iris { fill: var(--ab-navy); }
.ab-svg .ab-red { fill: var(--ab-red); }
.ab-svg .ab-white { fill: var(--ab-white); }
.ab-svg .ab-o { stroke: var(--ab-outline); stroke-width: 4; paint-order: stroke; stroke-linejoin: round; }
.ab-svg .ab-plane { stroke-width: 2.5; }
.ab-svg .ab-grid { fill: none; stroke: var(--ab-grid); stroke-width: 2.3; stroke-linecap: round; opacity: .88; }
.ab-svg .ab-cheek { fill: var(--ab-cheek); opacity: .62; transition: opacity .25s; }
.ab-mood-happy .ab-svg .ab-cheek { opacity: .9; }
.ab-svg .ab-shadow { fill: #000; opacity: .22; }
.ab-svg .ab-mouth { fill: none; stroke: var(--ab-white); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.ab-svg .ab-m-open, .ab-svg .ab-m-o { fill: #5B0B12; stroke-width: 2; }
.ab-svg .ab-m-smile { opacity: 1; }

/* Transform origins (SVG user units) */
.ab-svg .ab-fig { transform-box: view-box; transform-origin: 60px 103px; }
.ab-svg .ab-shadow { transform-box: fill-box; transform-origin: center; }
.ab-svg .ab-eye { transform-box: fill-box; transform-origin: center; }
.ab-svg .ab-wing-in { transform-box: fill-box; transform-origin: right center; }
.ab-svg .ab-plane-orbit { transform-box: view-box; transform-origin: 60px 58px; }
.ab-svg .ab-plane-bob { transform-box: view-box; transform-origin: 94.2px 23.5px; }
.ab-svg .ab-pupil { transform: translate(var(--ab-lx, 0px), var(--ab-ly, 0px)); transition: transform .18s ease-out; }

/* Moods */
.ab-mood-happy .ab-svg .ab-m-smile, .ab-mood-think .ab-svg .ab-m-smile, .ab-mood-puzzled .ab-svg .ab-m-smile { opacity: 0; }
.ab-mood-happy .ab-svg .ab-m-open { opacity: 1; }
.ab-mood-think .ab-svg .ab-m-o { opacity: 1; }
.ab-mood-think .ab-svg .ab-pupil { transform: translate(1.2px, -2.6px); }
.ab-mood-puzzled .ab-svg .ab-m-wavy { opacity: 1; }
.ab-mood-puzzled .ab-svg .ab-pupil { transform: translate(-2.2px, -1px); }

/* Idle loop: gentle bob, plane drifting */
.ab-root:not(.ab-is-calm) .ab-pet .ab-fig { animation: ab-bob 3.4s ease-in-out infinite; }
.ab-root:not(.ab-is-calm) .ab-pet .ab-shadow { animation: ab-shadow 3.4s ease-in-out infinite; }
.ab-root:not(.ab-is-calm) .ab-pet .ab-plane-bob { animation: ab-plane 2.8s ease-in-out infinite; }
@keyframes ab-bob { 0%, 100% { transform: translateY(0) scale(1.02, .98); } 45% { transform: translateY(-3.4px) scale(.985, 1.02); } 60% { transform: translateY(-3.6px) scale(1); } }
@keyframes ab-shadow { 0%, 100% { transform: scale(1); } 50% { transform: scale(.86); opacity: .14; } }
@keyframes ab-plane { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(1.2px, -1.6px) rotate(4deg); } }

/* One-shot animations (added/removed by the script) */
.ab-root.ab-blink .ab-eye { animation: ab-blink .2s ease-in-out; }
@keyframes ab-blink { 50% { transform: scaleY(.1); } }

.ab-root:not(.ab-is-calm).ab-anim-enter .ab-pet { animation: ab-enter .8s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes ab-enter { from { transform: translateY(40px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

.ab-root:not(.ab-is-calm).ab-anim-hop .ab-pet .ab-fig { animation: ab-hop .5s ease-out; }
@keyframes ab-hop { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-9px) scale(1.03, .97); } 60% { transform: translateY(0) scale(1.05, .94); } }

.ab-root:not(.ab-is-calm).ab-anim-land .ab-pet .ab-fig { animation: ab-land .4s ease-out; }
@keyframes ab-land { 0%, 100% { transform: none; } 35% { transform: scale(1.07, .9); } 70% { transform: scale(.97, 1.03); } }

.ab-root:not(.ab-is-calm).ab-side-r.ab-anim-wave .ab-pet .ab-wing-l .ab-wing-in,
.ab-root:not(.ab-is-calm).ab-side-l.ab-anim-wave .ab-pet .ab-wing-r .ab-wing-in { animation: ab-wave 1.25s ease-in-out; }
@keyframes ab-wave { 0%, 100% { transform: rotate(0); } 18%, 54% { transform: rotate(38deg); } 36%, 72% { transform: rotate(14deg); } }

.ab-root:not(.ab-is-calm).ab-anim-wiggle .ab-pet .ab-wing-in { animation: ab-wiggle .65s ease-in-out; }
@keyframes ab-wiggle { 25% { transform: rotate(14deg); } 50% { transform: rotate(-6deg); } 75% { transform: rotate(10deg); } }

.ab-root:not(.ab-is-calm).ab-anim-look .ab-pet .ab-pupil { animation: ab-look 2.1s ease-in-out; }
@keyframes ab-look { 0%, 100% { transform: translate(0, 0); } 25%, 40% { transform: translate(-2.4px, .4px); } 60%, 80% { transform: translate(2.4px, .4px); } }

.ab-root:not(.ab-is-calm).ab-anim-think .ab-pet .ab-plane-orbit { animation: ab-orbit 1.35s cubic-bezier(.5, 0, .4, 1); }
@keyframes ab-orbit { to { transform: rotate(-360deg); } }

.ab-root:not(.ab-is-calm).ab-anim-puzzled .ab-pet .ab-fig { animation: ab-tilt 1.3s ease-in-out; }
.ab-root:not(.ab-is-calm).ab-anim-puzzled .ab-pet .ab-wing-in { animation: ab-shrug 1.3s ease-in-out; }
@keyframes ab-tilt { 0%, 100% { transform: rotate(0); } 25%, 75% { transform: rotate(-9deg); } }
@keyframes ab-shrug { 0%, 100% { transform: rotate(0); } 20%, 40% { transform: rotate(22deg); } 30% { transform: rotate(10deg); } }

/* Flying */
.ab-root.ab-flying .ab-pet .ab-fig { animation: none; transform: rotate(var(--ab-tilt, 0deg)); transition: transform .3s; }
.ab-root.ab-flying .ab-pet .ab-wing-in { animation: ab-flap .2s ease-in-out infinite alternate; }
.ab-root.ab-flying .ab-pet .ab-shadow { opacity: 0; }
.ab-root.ab-flying .ab-pet .ab-feet { transform: translateY(-3px); }
@keyframes ab-flap { from { transform: rotate(-12deg); } to { transform: rotate(26deg); } }

/* ---------- Image mode: the AeroBot artwork (aerobot-character.webp) ---------- */
.ab-imgmode .ab-pet { display: flex; align-items: flex-end; justify-content: center; }
.ab-char { position: relative; display: block; width: 100%; margin-bottom: 7%; transform-origin: 50% 100%; }
.ab-char-img {
  display: block; width: 100%; height: 100%; -webkit-user-select: none; user-select: none; pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(4, 15, 30, .3)); transition: transform .25s cubic-bezier(.3, 1.5, .5, 1);
}
.ab-pet:hover .ab-char-img { transform: scale(1.06); transform-origin: 50% 100%; }
.ab-img-shadow {
  position: absolute; left: 24%; right: 24%; bottom: 3%; height: 6%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0)); transform-origin: center;
}
/* Eyelids for blinking and moods (positions come from settings.characterEyes) */
.ab-lid {
  position: absolute; border-radius: 50%; transform: scaleY(0); transform-origin: 50% 0;
  background: radial-gradient(ellipse at 50% 25%, var(--ab-lid-1), var(--ab-lid-2) 75%);
  box-shadow: inset 0 -1.5px 0 var(--ab-navy); transition: transform .2s ease;
}
.ab-root.ab-blink .ab-lid { animation: ab-lid .2s ease-in-out; }
@keyframes ab-lid { 50% { transform: scaleY(1); } }
.ab-mood-think .ab-lid { transform: scaleY(.34); }
.ab-mood-puzzled .ab-lid:first-of-type { transform: scaleY(.3); }

.ab-root.ab-imgmode:not(.ab-is-calm) .ab-char { animation: ab-ibob 3.4s ease-in-out infinite; }
.ab-root.ab-imgmode:not(.ab-is-calm) .ab-img-shadow { animation: ab-ishadow 3.4s ease-in-out infinite; }
@keyframes ab-ibob { 0%, 100% { transform: translateY(0) scale(1.015, .985); } 45% { transform: translateY(-3.5%) scale(.99, 1.015); } 60% { transform: translateY(-3.7%); } }
@keyframes ab-ishadow { 0%, 100% { transform: scale(1); } 50% { transform: scale(.84); opacity: .6; } }
.ab-root.ab-imgmode:not(.ab-is-calm).ab-anim-hop .ab-char { animation: ab-ihop .5s ease-out; }
@keyframes ab-ihop { 0%, 100% { transform: none; } 30% { transform: translateY(-11%) scale(1.03, .97); } 60% { transform: scale(1.05, .93); } }
.ab-root.ab-imgmode:not(.ab-is-calm).ab-anim-land .ab-char { animation: ab-iland .4s ease-out; }
@keyframes ab-iland { 0%, 100% { transform: none; } 35% { transform: scale(1.07, .9); } 70% { transform: scale(.97, 1.03); } }
.ab-root.ab-imgmode:not(.ab-is-calm).ab-anim-wave .ab-char { animation: ab-iwave 1.25s ease-in-out; }
@keyframes ab-iwave { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-7deg); } 35% { transform: rotate(6deg); } 55% { transform: rotate(-5deg); } 75% { transform: rotate(3deg); } }
.ab-root.ab-imgmode:not(.ab-is-calm).ab-anim-wiggle .ab-char { animation: ab-iwiggle .65s ease-in-out; }
@keyframes ab-iwiggle { 25% { transform: rotate(3deg); } 50% { transform: rotate(-2.5deg); } 75% { transform: rotate(1.5deg); } }
.ab-root.ab-imgmode:not(.ab-is-calm).ab-anim-look .ab-char { animation: ab-ilook 2.1s ease-in-out; }
@keyframes ab-ilook { 25%, 40% { transform: rotate(-4deg) translateX(-2%); } 60%, 80% { transform: rotate(4deg) translateX(2%); } }
.ab-root.ab-imgmode:not(.ab-is-calm).ab-anim-think .ab-char { animation: ab-ithink 1.4s ease-in-out; }
@keyframes ab-ithink { 30%, 70% { transform: rotate(5deg) translateY(-3%); } }
.ab-root.ab-imgmode:not(.ab-is-calm).ab-anim-puzzled .ab-char { animation: ab-ipuzzled 1.3s ease-in-out; }
@keyframes ab-ipuzzled { 25%, 75% { transform: rotate(-9deg); } }
.ab-root.ab-imgmode.ab-flying .ab-char { animation: none; transform: rotate(var(--ab-tilt, 0deg)); transition: transform .3s; }
.ab-root.ab-imgmode.ab-flying .ab-img-shadow { opacity: 0; }
.ab-root.ab-is-calm .ab-char, .ab-root.ab-is-calm .ab-img-shadow, .ab-root.ab-is-calm .ab-lid { animation: none !important; }
.ab-mini-img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---------- Rig mode: the artwork cut into parts (aerobot-character-parts.webp) ---------- */
.ab-part {
  position: absolute; inset: 0; display: block; background-image: var(--ab-sprite);
  background-size: 100% 600%; background-repeat: no-repeat; pointer-events: none;
}
.ab-p-base, .ab-p-wing-l, .ab-p-wing-r, .ab-p-plane { filter: drop-shadow(0 2px 3px rgba(4, 15, 30, .25)); }
.ab-pupil-clip { position: absolute; inset: 0; display: block; pointer-events: none; }
.ab-p-pupil { transform: translate(var(--ab-lx, 0px), var(--ab-ly, 0px)); transition: transform .18s ease-out; }
.ab-rig .ab-lid { z-index: 1; }
.ab-p-plane { z-index: 2; }
.ab-rig { transition: scale .25s cubic-bezier(.3, 1.5, .5, 1); transform-origin: 50% 100%; }
.ab-pet:hover .ab-rig { scale: 1.05; }
.ab-mood-think .ab-p-pupil { transform: translate(1px, -2.2px); }
.ab-mood-puzzled .ab-p-pupil { transform: translate(-2px, -.8px); }
.ab-p-wing-l, .ab-p-wing-r { transition: transform .3s ease; }
.ab-mood-happy .ab-p-wing-l { transform: rotate(12deg); }
.ab-mood-happy .ab-p-wing-r { transform: rotate(-12deg); }

/* Idle: wings sway and the plane drifts */
.ab-root.ab-rigmode:not(.ab-is-calm) .ab-p-wing-l { animation: ab-sway-l 3.4s ease-in-out infinite; }
.ab-root.ab-rigmode:not(.ab-is-calm) .ab-p-wing-r { animation: ab-sway-r 3.4s ease-in-out infinite; }
.ab-root.ab-rigmode:not(.ab-is-calm) .ab-p-plane { animation: ab-drift 2.8s ease-in-out infinite; }
@keyframes ab-sway-l { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(7deg); } }
@keyframes ab-sway-r { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(-7deg); } }
@keyframes ab-drift { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(1.6%, -2%) rotate(5deg); } }

/* Wave with the wing nearest the page */
.ab-root.ab-rigmode:not(.ab-is-calm).ab-anim-wave .ab-char { animation: ab-iwave-soft 1.3s ease-in-out; }
.ab-root.ab-rigmode:not(.ab-is-calm).ab-side-r.ab-anim-wave .ab-p-wing-l { animation: ab-wave-l 1.3s ease-in-out; }
.ab-root.ab-rigmode:not(.ab-is-calm).ab-side-l.ab-anim-wave .ab-p-wing-r { animation: ab-wave-r 1.3s ease-in-out; }
@keyframes ab-iwave-soft { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-3deg); } 65% { transform: rotate(2deg); } }
@keyframes ab-wave-l { 0%, 100% { transform: rotate(0); } 15%, 47%, 79% { transform: rotate(42deg); } 31%, 63% { transform: rotate(18deg); } }
@keyframes ab-wave-r { 0%, 100% { transform: rotate(0); } 15%, 47%, 79% { transform: rotate(-42deg); } 31%, 63% { transform: rotate(-18deg); } }

/* Flap (fidget) and flying */
.ab-root.ab-rigmode:not(.ab-is-calm).ab-anim-flap .ab-p-wing-l,
.ab-root.ab-rigmode.ab-flying .ab-p-wing-l { animation: ab-flap-l .22s ease-in-out infinite alternate; }
.ab-root.ab-rigmode:not(.ab-is-calm).ab-anim-flap .ab-p-wing-r,
.ab-root.ab-rigmode.ab-flying .ab-p-wing-r { animation: ab-flap-r .22s ease-in-out infinite alternate; }
.ab-root.ab-rigmode:not(.ab-is-calm).ab-anim-flap .ab-char { animation: ab-flap-lift 1.1s ease-in-out; }
@keyframes ab-flap-l { from { transform: rotate(-14deg); } to { transform: rotate(30deg); } }
@keyframes ab-flap-r { from { transform: rotate(14deg); } to { transform: rotate(-30deg); } }
@keyframes ab-flap-lift { 0%, 100% { transform: none; } 40%, 70% { transform: translateY(-9%); } }

/* Hop: wings go up */
.ab-root.ab-rigmode:not(.ab-is-calm).ab-anim-hop .ab-p-wing-l { animation: ab-hop-l .5s ease-out; }
.ab-root.ab-rigmode:not(.ab-is-calm).ab-anim-hop .ab-p-wing-r { animation: ab-hop-r .5s ease-out; }
@keyframes ab-hop-l { 35% { transform: rotate(28deg); } }
@keyframes ab-hop-r { 35% { transform: rotate(-28deg); } }

/* Look around with the eyes */
.ab-root.ab-rigmode:not(.ab-is-calm).ab-anim-look .ab-char { animation: none; }
.ab-root.ab-rigmode:not(.ab-is-calm).ab-anim-look .ab-p-pupil { animation: ab-plook 2.1s ease-in-out; }
@keyframes ab-plook { 0%, 100% { transform: translate(0, 0); } 22%, 42% { transform: translate(-2.6px, .4px); } 58%, 80% { transform: translate(2.6px, .4px); } }

/* Thinking: the plane does a loop */
.ab-root.ab-rigmode:not(.ab-is-calm).ab-anim-think .ab-char { animation: ab-ithink-soft 1.4s ease-in-out; }
.ab-root.ab-rigmode:not(.ab-is-calm).ab-anim-think .ab-p-plane { animation: ab-loop 1.4s cubic-bezier(.45, 0, .35, 1); }
@keyframes ab-ithink-soft { 30%, 70% { transform: rotate(3deg); } }
@keyframes ab-loop { 0% { transform: none; } 50% { transform: translate(-3%, -6%) rotate(-180deg); } 100% { transform: rotate(-360deg); } }

/* Puzzled: shrug */
.ab-root.ab-rigmode:not(.ab-is-calm).ab-anim-puzzled .ab-p-wing-l { animation: ab-shrug-l 1.3s ease-in-out; }
.ab-root.ab-rigmode:not(.ab-is-calm).ab-anim-puzzled .ab-p-wing-r { animation: ab-shrug-r 1.3s ease-in-out; }
@keyframes ab-shrug-l { 20%, 45% { transform: rotate(26deg); } 32% { transform: rotate(12deg); } }
@keyframes ab-shrug-r { 20%, 45% { transform: rotate(-26deg); } 32% { transform: rotate(-12deg); } }

/* Orbit: the plane flies a lap around AeroBot */
.ab-root.ab-rigmode:not(.ab-is-calm).ab-anim-orbit .ab-p-plane { animation: ab-orbit-lap 2.4s cubic-bezier(.4, 0, .3, 1); }
.ab-root.ab-rigmode:not(.ab-is-calm).ab-anim-orbit .ab-p-wing-l { animation: ab-hop-l 1.2s ease-in-out 2; }
.ab-root.ab-rigmode:not(.ab-is-calm).ab-anim-orbit .ab-p-wing-r { animation: ab-hop-r 1.2s ease-in-out 2; }
@keyframes ab-orbit-lap {
  0% { transform: none; }
  20% { transform: translate(12%, 36%) rotate(130deg); }
  45% { transform: translate(-34%, 72%) rotate(220deg); }
  70% { transform: translate(-80%, 30%) rotate(300deg); }
  88% { transform: translate(-40%, -14%) rotate(345deg); }
  100% { transform: rotate(360deg); }
}
.ab-root.ab-is-calm .ab-part { animation: none !important; }

/* Hide button (mouse users, on hover / focus) */
.ab-hidex {
  pointer-events: auto; position: absolute; top: -4px; width: 24px !important; height: 24px !important; padding: 4px !important;
  border-radius: 50% !important; background: var(--ab-navy) !important; color: #fff !important; border: 2px solid #fff !important;
  opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; box-shadow: 0 2px 6px rgba(0, 0, 0, .3) !important;
}
.ab-side-r .ab-hidex { left: -4px; }
.ab-side-l .ab-hidex { right: -4px; }
.ab-hidex svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
@media (hover: hover) and (pointer: fine) {
  .ab-root:hover .ab-hidex, .ab-root:focus-within .ab-hidex { opacity: 1; transform: none; }
}
.ab-hidex:focus-visible { opacity: 1; transform: none; outline: 3px solid var(--ab-focus); outline-offset: 1px; }
@media (hover: none), (pointer: coarse) { .ab-hidex { display: none; } }
.ab-root.ab-panel-open .ab-hidex { display: none; }

/* Speech bubble */
.ab-bubble {
  pointer-events: none; position: absolute; bottom: calc(100% + 4px); width: max-content; max-width: 230px;
  padding: 10px 30px 10px 13px; background: #fff; color: var(--ab-ink); border-radius: 16px;
  font-family: var(--ab-font); font-size: 14px; font-weight: 500; line-height: 1.4; font-style: normal; letter-spacing: normal; text-transform: none; text-align: start;
  box-shadow: 0 10px 30px rgba(2, 10, 25, .35), 0 0 0 1px rgba(4, 28, 70, .08);
  opacity: 0; transform: translateY(6px) scale(.92); transition: opacity .2s, transform .25s cubic-bezier(.3, 1.4, .5, 1); cursor: pointer;
}
.ab-side-r .ab-bubble { right: 4px; transform-origin: 85% 100%; }
.ab-side-l .ab-bubble { left: 4px; transform-origin: 15% 100%; }
.ab-near-top .ab-bubble { bottom: auto; top: calc(100% + 4px); }
.ab-bubble::after {
  content: ""; position: absolute; top: 100%; width: 14px; height: 10px; background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.ab-near-top .ab-bubble::after { top: auto; bottom: 100%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ab-side-r .ab-bubble::after { right: 30px; }
.ab-side-l .ab-bubble::after { left: 30px; }
.ab-bubble.ab-show { opacity: 1; transform: none; pointer-events: auto; }
.ab-bubble-x {
  position: absolute; top: 7px; right: 7px; width: 20px !important; height: 20px !important; padding: 4px !important;
  border-radius: 50% !important; color: var(--ab-muted) !important;
}
.ab-bubble-x:hover { background: var(--ab-surface-2) !important; color: var(--ab-ink) !important; }
.ab-bubble-x svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }

/* "Show assistant" tab when hidden */
.ab-tab {
  position: fixed; right: 0; bottom: 24px; width: 50px !important; height: 46px !important; padding: 5px 9px 5px 7px !important;
  background: var(--ab-navy) !important; border: 2px solid rgba(255, 255, 255, .85) !important; border-right: 0 !important;
  border-radius: 23px 0 0 23px !important; box-shadow: 0 6px 18px rgba(2, 10, 25, .35) !important;
  transform: translateX(8px); transition: transform .2s;
}
.ab-tab.ab-tab-left { right: auto; left: 0; border-right: 2px solid rgba(255, 255, 255, .85) !important; border-left: 0 !important;
  border-radius: 0 23px 23px 0 !important; transform: translateX(-8px); padding: 5px 7px 5px 9px !important; }
.ab-tab:hover, .ab-tab:focus-visible { transform: none; }
.ab-tab:focus-visible { outline: 3px solid var(--ab-focus); outline-offset: 2px; }
.ab-tab[hidden] { display: none !important; }
.ab-tab .ab-svg { width: 100%; height: 100%; }
.ab-tab { padding: 4px 8px 4px 6px !important; }
.ab-tab .ab-svg .ab-o { stroke-width: 0; }

/* ================================================================
 * THE PANEL
 * ============================================================== */
.ab-panel {
  position: fixed; display: none; flex-direction: column; width: 380px; max-height: 600px; overflow: hidden;
  background: var(--ab-surface); color: var(--ab-ink); border-radius: var(--ab-radius);
  box-shadow: 0 24px 60px rgba(2, 10, 25, .45), 0 0 0 1px rgba(4, 28, 70, .1);
  font-family: var(--ab-font); font-size: 14.5px; font-weight: 400; font-style: normal; line-height: 1.5;
  text-align: start; letter-spacing: normal; word-spacing: normal; text-transform: none; text-shadow: none;
  opacity: 0; transform: scale(.88) translateY(10px);
  transition: opacity .18s ease, transform .24s cubic-bezier(.2, .9, .3, 1.1);
}
.ab-panel.ab-is-open { display: flex; }
.ab-panel.ab-in { opacity: 1; transform: none; }
.ab-panel:focus { outline: none; }
.ab-panel.ab-sheet { width: auto; }
.ab-panel p { margin: 0; padding: 0; font-size: inherit; line-height: inherit; color: inherit; font-weight: inherit; }
.ab-panel ul { margin: 6px 0 0; padding: 0 0 0 1.2em; list-style: disc; }
.ab-panel li { margin: 0 0 2px; padding: 0; font-size: inherit; line-height: inherit; color: inherit; }
.ab-panel a { color: var(--ab-navy); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.ab-panel :focus-visible { outline: 3px solid var(--ab-focus); outline-offset: 2px; }

/* Header */
.ab-head { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 12px; background: var(--ab-navy); color: #fff; flex: none; }
.ab-avatar { flex: none; width: 44px; height: 44px; padding: 3px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.ab-avatar .ab-svg { width: 100%; height: 100%; }
.ab-avatar .ab-svg .ab-o { stroke-width: 0; }
.ab-head-text { flex: 1; min-width: 0; }
.ab-title { font-size: 16px; font-weight: 700; line-height: 1.2; color: #fff; }
.ab-sub { font-size: 12.5px; line-height: 1.3; color: rgba(255, 255, 255, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-icon-btn { flex: none; width: 36px !important; height: 36px !important; padding: 8px !important; border-radius: 50% !important; color: #fff !important; transition: background .15s; }
.ab-icon-btn:hover { background: rgba(255, 255, 255, .14) !important; }
.ab-icon-btn svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* AOG strip */
.ab-panel .ab-urgent {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; padding: 8px 14px;
  background: #FDECEC; color: #8E1012; font-size: 13px; font-weight: 500; text-decoration: none; border-bottom: 1px solid #F6CFCF;
}
.ab-urgent-call { font-weight: 700; color: var(--ab-red); white-space: nowrap; }
.ab-panel .ab-urgent:hover .ab-urgent-call { text-decoration: underline; }

/* Conversation */
.ab-log {
  flex: 1 1 auto; min-height: 150px; overflow-y: auto; overscroll-behavior: contain; padding: 14px 12px 6px;
  background: var(--ab-surface-2); display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth;
}
.ab-log:focus { outline: none; }
.ab-log:focus-visible { outline: 3px solid var(--ab-focus); outline-offset: -3px; }
.ab-turn { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ab-msg { max-width: 92%; padding: 10px 12px; border-radius: 4px 16px 16px 16px; word-wrap: break-word; overflow-wrap: anywhere; animation: ab-msg-in .22s ease-out; }
.ab-bot { background: var(--ab-surface); border: 1px solid var(--ab-border); color: var(--ab-ink); align-self: flex-start; }
.ab-bot p + p, .ab-bot p + ul, .ab-bot ul + p { margin-top: 8px; }
.ab-user { align-self: flex-end; background: var(--ab-navy); color: #fff; border-radius: 16px 4px 16px 16px; max-width: 85%; }
@keyframes ab-msg-in { from { opacity: 0; transform: translateY(6px); } }
.ab-draft {
  display: inline-block; margin-bottom: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: #FFF4D6; color: #7A5200; border: 1px solid #F0D58A;
}

/* Action buttons inside answers */
.ab-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ab-panel a.ab-action {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 999px;
  background: var(--ab-surface); color: var(--ab-navy); border: 1.5px solid var(--ab-navy);
  font-size: 13px; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background .15s, color .15s;
}
.ab-panel a.ab-action:hover { background: var(--ab-navy); color: #fff; }
.ab-panel a.ab-action-hot { background: var(--ab-red); border-color: var(--ab-red); color: #fff; }
.ab-panel a.ab-action-hot:hover { background: #A81314; border-color: #A81314; }
.ab-ico { width: 15px; height: 15px; flex: none; }
.ab-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Suggestion chips */
.ab-chips { width: 100%; }
.ab-chips-label { font-size: 12px; font-weight: 600; color: var(--ab-muted); margin: 0 0 6px 2px; }
.ab-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-panel .ab-chip {
  padding: 6px 12px !important; border-radius: 16px !important; background: var(--ab-surface) !important;
  border: 1px solid #C5D0E4 !important; color: var(--ab-navy) !important; font-size: 13px; font-weight: 500; line-height: 1.35;
  text-align: start; transition: background .15s, border-color .15s;
}
.ab-panel .ab-chip:hover { background: #E9EFFA !important; border-color: var(--ab-navy) !important; }
.ab-panel .ab-chip-nav { background: transparent !important; border-style: dashed !important; color: var(--ab-muted) !important; }

/* Typing dots */
.ab-typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.ab-typing i { width: 7px; height: 7px; border-radius: 50%; background: #9AA8C2; animation: ab-dot 1s infinite ease-in-out; }
.ab-typing i:nth-child(2) { animation-delay: .15s; }
.ab-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ab-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }

/* Input */
.ab-form { display: flex; gap: 8px; padding: 10px 10px 8px; border-top: 1px solid var(--ab-border); background: var(--ab-surface); flex: none; margin: 0; }
.ab-panel .ab-input {
  flex: 1; min-width: 0; height: 42px; margin: 0; padding: 0 14px; border: 1.5px solid #C5D0E4; border-radius: 999px;
  background: #fff; color: var(--ab-ink); font: inherit; font-size: 16px; box-shadow: none; -webkit-appearance: none; appearance: none;
}
.ab-panel .ab-input::placeholder { color: #8391AA; opacity: 1; }
.ab-panel .ab-input:focus { outline: none; border-color: var(--ab-navy); box-shadow: 0 0 0 3px rgba(4, 28, 70, .15); }
.ab-panel .ab-input:focus-visible { outline: none; }
.ab-send {
  flex: none; width: 42px !important; height: 42px !important; padding: 10px !important; border-radius: 50% !important;
  background: var(--ab-red) !important; color: #fff !important; transition: background .15s, transform .15s;
}
.ab-send:hover { background: #A81314 !important; }
.ab-send:active { transform: scale(.94); }
.ab-send svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Footer */
.ab-foot { display: flex; align-items: center; gap: 10px; padding: 2px 12px 10px; background: var(--ab-surface); flex: none; }
.ab-privacy { flex: 1; font-size: 11.5px !important; line-height: 1.35 !important; color: var(--ab-muted) !important; }
.ab-calm-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 4px 6px !important; border-radius: 8px !important; font-size: 12px; font-weight: 600; color: var(--ab-muted) !important; white-space: nowrap; }
.ab-calm-btn:hover { background: var(--ab-surface-2) !important; }
.ab-switch { position: relative; width: 28px; height: 16px; border-radius: 8px; background: #C5D0E4; transition: background .15s; }
.ab-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.ab-calm-btn[aria-checked="true"] .ab-switch { background: var(--ab-navy); }
.ab-calm-btn[aria-checked="true"] .ab-switch::after { transform: translateX(12px); }

/* Mobile sheet */
.ab-panel.ab-sheet { border-radius: 20px; }
@media (max-width: 480px) { .ab-bubble { max-width: 200px; } }
@media (max-width: 400px) { .ab-panel .ab-urgent { font-size: 12.5px; padding: 7px 12px; } .ab-privacy { font-size: 11px !important; } }

/* RTL */
[dir="rtl"].ab-panel .ab-msg.ab-bot { border-radius: 16px 4px 16px 16px; }
[dir="rtl"].ab-panel .ab-msg.ab-user { border-radius: 4px 16px 16px 16px; }
[dir="rtl"].ab-panel ul { padding: 0 1.2em 0 0; }
[dir="rtl"] .ab-send svg { transform: scaleX(-1); }

/* ================================================================
 * REDUCED MOTION + CALM MODE
 * ============================================================== */
.ab-is-calm .ab-svg *, .ab-root.ab-is-calm .ab-pet, .ab-panel.ab-is-calm .ab-msg { animation: none !important; }
.ab-panel.ab-is-calm { transition: opacity .12s ease; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ab-theme, .ab-theme *, .ab-theme *::before, .ab-theme *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}
@media print { .ab-theme { display: none !important; } }


/* ================================================================
 * DECLUTTER (v2): calmer, easier to scan
 * ============================================================== */
/* AOG strip: one slim line */
.ab-panel .ab-urgent { padding: 6px 14px; font-size: 12.5px; }
/* Topic buttons: tidy two-column grid */
.ab-chip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ab-panel .ab-chip-grid .ab-chip { text-align: center; border-radius: 12px !important; padding: 9px 8px !important; }
/* Question suggestions: one per line, easy to tap */
.ab-chip-row:not(.ab-chip-grid) { flex-direction: column; align-items: stretch; gap: 5px; }
.ab-panel .ab-chip-row:not(.ab-chip-grid) .ab-chip { border-radius: 12px !important; padding: 8px 12px !important; }
/* "All topics" becomes a quiet text link */
.ab-panel .ab-chip-row:not(.ab-chip-grid) .ab-chip-nav {
  align-self: flex-start; border: 0 !important; background: none !important; padding: 4px 2px !important;
  font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px;
}
.ab-panel .ab-chip-row:not(.ab-chip-grid) .ab-chip-nav:hover { background: none !important; color: var(--ab-navy) !important; }
/* Footer: a single quiet line */
.ab-foot { padding: 0 12px 8px; }
.ab-privacy { font-size: 11px !important; }
.ab-log { gap: 8px; padding-top: 12px; }
.ab-log { min-height: 270px; }

/* ---- Tuck-away: he flies off the side (normal flight, eyes open); the edge tab slides in ---- */
.ab-tab.ab-tab-in { animation: ab-tab-in .5s cubic-bezier(.2, 1.35, .4, 1) backwards; }
.ab-tab.ab-tab-left.ab-tab-in { animation-name: ab-tab-in-l; }
@keyframes ab-tab-in   { from { transform: translateX(64px); } }
@keyframes ab-tab-in-l { from { transform: translateX(-64px); } }
@media (prefers-reduced-motion: reduce) { .ab-tab.ab-tab-in { animation: none; } }

/* eyes stay open for the whole exit */
.ab-root.ab-hiding .ab-lid { animation: none !important; transform: scaleY(0) !important; transition: none !important; }
.ab-root.ab-hiding .ab-eye { animation: none !important; }