/* Gen 3D companion (js/gen3d.js). Fixed bottom inline-end: right in LTR, left in RTL. */
#gen3d-root, .gen3d {
  --g3-size: 200px;
  --g3-surface: #FFFFFF;
  --g3-text: #0E1540;
  --g3-muted: #5A6178;
  --g3-line: rgba(14, 21, 64, .12);
  --g3-shadow: 0 14px 38px -14px rgba(14, 21, 64, .35), 0 2px 6px rgba(14, 21, 64, .08);
  --g3-gold: #E3B04B;
  --g3-on-gold: #0E1540;
  --g3-brand: #2B3AA8;
  --g3-ring: #2B3AA8;
  position: fixed;
  bottom: max(12px, env(safe-area-inset-bottom));
  inset-inline-end: 12px;
  z-index: 45;
  width: var(--g3-size);
  height: var(--g3-size);
  pointer-events: none;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
.gen3d[lang="ar"] { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; }
#gen3d-root[data-theme="dark"], .gen3d[data-theme="dark"] {
  --g3-surface: #131A38;
  --g3-text: #E8ECF7;
  --g3-muted: #9AA3C0;
  --g3-line: rgba(232, 236, 247, .14);
  --g3-shadow: 0 16px 40px -12px rgba(0, 0, 0, .6), 0 0 0 1px rgba(142, 155, 255, .12);
  --g3-ring: #8E9BFF;
}
@media (max-width: 640px) {
  #gen3d-root, .gen3d { --g3-size: 140px; inset-inline-end: 6px; }
}

/* stage: SVG placeholder first, canvas fades in when three.js is ready */
.gen3d-stage { position: absolute; inset: 0; pointer-events: none; }
.gen3d-svg {
  position: absolute; inset: 14% 10% 16%; width: 80%; height: 70%;
  object-fit: contain; transition: opacity .5s ease, transform .4s cubic-bezier(.3, 1.4, .5, 1);
  user-select: none;
}
.gen3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s ease; }
.gen3d.is-3d .gen3d-canvas { opacity: 1; }
.gen3d.is-3d .gen3d-svg { opacity: 0; }

/* SVG fallback expressions */
.gen3d-stage[data-expr="curious"] .gen3d-svg { transform: rotate(-8deg); }
.gen3d-stage[data-expr="think"] .gen3d-svg { transform: rotate(6deg) translateY(-2px); }
.gen3d-stage[data-expr="surprise"] .gen3d-svg { transform: translateY(-10px) scale(1.04); }
.gen3d-stage[data-expr="celebrate"] .gen3d-svg { animation: g3-jump .9s cubic-bezier(.3, 1.4, .5, 1) 2; }
.gen3d-stage[data-expr="nod"] .gen3d-svg { animation: g3-nod .7s ease-in-out 2; }
@keyframes g3-jump { 0%, 100% { transform: translateY(0) } 40% { transform: translateY(-16px) rotate(-6deg) } 70% { transform: translateY(0) rotate(4deg) } }
@keyframes g3-nod { 0%, 100% { transform: translateY(0) } 40% { transform: translateY(5px) } }

/* click target: the head area only */
.gen3d-hit {
  position: absolute; inset: 12% 8% 14%; border: 0; padding: 0; margin: 0;
  background: transparent; border-radius: 42%; cursor: pointer; pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.gen3d-hit:focus-visible { outline: 2px solid var(--g3-ring); outline-offset: 2px; }

/* minimize / restore */
.gen3d-min {
  position: absolute;
  bottom: calc(50% - var(--g3-size) * var(--g3-scale, 1) / 2 + 4px);
  inset-inline-end: calc(50% - var(--g3-size) * var(--g3-scale, 1) / 2 + 4px);
  width: 28px; height: 28px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; cursor: pointer; pointer-events: auto;
  background: var(--g3-surface); color: var(--g3-text);
  border: 1px solid var(--g3-line); box-shadow: var(--g3-shadow);
  opacity: .0; transform: scale(.85);
  transition: opacity .2s ease, transform .2s ease, width .25s ease, height .25s ease;
}
.gen3d:hover .gen3d-min, .gen3d-min:focus-visible, .gen3d.is-min .gen3d-min { opacity: 1; transform: none; }
@media (hover: none) { .gen3d-min { opacity: .9; transform: none; } }
.gen3d-min svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.gen3d-min-face { display: none; width: 44px; height: 40px; }
.gen3d-min:focus-visible { outline: 2px solid var(--g3-ring); outline-offset: 2px; }

.gen3d.is-min { pointer-events: none; }
.gen3d.is-min .gen3d-stage { opacity: 0; transform: scale(.4) translateY(30%); visibility: hidden; }
.gen3d.is-min .gen3d-min {
  bottom: 0; inset-inline-end: 0; width: 60px; height: 60px;
  background: var(--g3-surface); border-color: var(--g3-line);
}
.gen3d.is-min .gen3d-min svg { display: none; }
.gen3d.is-min .gen3d-min-face { display: block; }
.gen3d-stage {
  transform: scale(var(--g3-scale, 1)); transform-origin: 50% 50%;
  transition: opacity .3s ease, transform .35s cubic-bezier(.3, 1.3, .5, 1), visibility 0s linear 0s;
}
.gen3d.is-min .gen3d-stage { transform-origin: 85% 90%; }
.gen3d.is-min[dir="rtl"] .gen3d-stage { transform-origin: 15% 90%; }
.gen3d.is-flying .gen3d-stage { transition: opacity .3s ease; }
.gen3d.no-anim .gen3d-stage, .gen3d.no-anim .gen3d-min { transition: none; }

/* speech bubble (sits above Gen, aligned to its inline-end) */
.gen3d-bubble {
  position: absolute; bottom: calc(50% + var(--g3-size) * var(--g3-scale, 1) / 2 - 18px); inset-inline-end: 6px;
  width: max-content; max-width: min(250px, calc(100vw - 32px));
  padding: 11px 14px 12px; border-radius: 16px;
  background: var(--g3-surface); color: var(--g3-text);
  border: 1px solid var(--g3-line); box-shadow: var(--g3-shadow);
  font-size: 14.5px; line-height: 1.4; font-weight: 600;
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(.94);
  transform-origin: 85% 100%;
  transition: opacity .2s ease, transform .25s cubic-bezier(.3, 1.4, .5, 1), visibility 0s linear .25s;
}
.gen3d[dir="rtl"] .gen3d-bubble { transform-origin: 15% 100%; font-size: 15px; }
.gen3d-bubble::after {
  content: ""; position: absolute; bottom: -7px; inset-inline-end: 44px;
  width: 12px; height: 12px; background: var(--g3-surface);
  border-inline-end: 1px solid var(--g3-line); border-bottom: 1px solid var(--g3-line);
  transform: rotate(45deg); border-end-end-radius: 3px;
}
.gen3d[dir="rtl"] .gen3d-bubble::after { transform: rotate(-45deg); }
.gen3d-bubble.is-on {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .2s ease, transform .3s cubic-bezier(.3, 1.4, .5, 1), visibility 0s;
}
.gen3d-text { margin: 0; }
.gen3d-text:empty { display: none; }
.gen3d-cta {
  display: inline-flex; align-items: center; margin-top: 9px;
  padding: 8px 14px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--g3-gold); color: var(--g3-on-gold);
  font: inherit; font-size: 13.5px; font-weight: 700;
  transition: transform .15s ease, filter .15s ease;
}
.gen3d-cta[hidden] { display: none; }
.gen3d-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.gen3d-cta:focus-visible { outline: 2px solid var(--g3-ring); outline-offset: 2px; }

/* bubble side follows Gen around the page (classes set by js) */
.gen3d.bub-r .gen3d-bubble { right: 6px; left: auto; transform-origin: 85% 100%; }
.gen3d.bub-l .gen3d-bubble { left: 6px; right: auto; transform-origin: 15% 100%; }
.gen3d.bub-r .gen3d-bubble::after { right: 44px; left: auto; }
.gen3d.bub-l .gen3d-bubble::after { left: 44px; right: auto; }
.gen3d.bub-below .gen3d-bubble { bottom: auto; top: calc(50% + var(--g3-size) * var(--g3-scale, 1) / 2 - 6px); }
.gen3d.bub-below .gen3d-bubble::after { bottom: auto; top: -7px; transform: rotate(225deg); }
.gen3d.bub-below[dir="rtl"] .gen3d-bubble::after { transform: rotate(135deg); }

/* soft gold motion trail while Gen travels */
.gen3d-trail {
  position: fixed; left: 0; top: 0; z-index: 44; pointer-events: none;
  width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: radial-gradient(circle, #F7D98C 0, rgba(227, 176, 75, .7) 40%, rgba(227, 176, 75, 0) 70%);
  animation: g3-trail .85s ease-out forwards;
}
@keyframes g3-trail {
  from { opacity: .95; transform: translate(var(--x), var(--y)) scale(var(--k, 1)); }
  to { opacity: 0; transform: translate(var(--x), calc(var(--y) + 18px)) scale(.2); }
}

@media (prefers-reduced-motion: reduce) {
  .gen3d *, .gen3d *::before, .gen3d *::after { animation: none !important; transition: none !important; }
}
@media print { #gen3d-root, .gen3d, .gen3d-trail { display: none; } }