/* =========================================================
   Sahan — the on-page AI guide
   ========================================================= */
:root { --sahan-size: 76px; --sahan-ease: cubic-bezier(.45, 0, .2, 1); }

/* ---------- The character ---------- */
.sahan {
  position: fixed; z-index: 90; left: 0; top: 0;
  width: var(--sahan-size); height: var(--sahan-size);
  transition: transform .9s var(--sahan-ease);
  will-change: transform; pointer-events: none;
}
.sahan.no-anim { transition: none; }
.sahan-body {
  position: absolute; inset: 0; border: 0; padding: 0; background: none; cursor: pointer; pointer-events: auto;
  animation: sahan-bob 3.2s ease-in-out infinite;
  filter: drop-shadow(0 12px 18px rgba(11, 27, 43, .28));
}
.sahan.docked .sahan-body:hover { animation: sahan-hop .6s ease-out; }
@keyframes sahan-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px) rotate(-4deg); } 70% { transform: translateY(0) rotate(2deg); } }
.sahan-body:focus-visible { outline: 3px solid var(--brand-100, #DCEAFB); outline-offset: 4px; border-radius: 24px; }
.sahan-body svg { width: 100%; height: 100%; overflow: visible; }
.sahan.flying .sahan-body { animation: sahan-fly .9s var(--sahan-ease); }
@keyframes sahan-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes sahan-fly { 0% { transform: rotate(0); } 30% { transform: rotate(-12deg) scale(1.04); } 70% { transform: rotate(6deg); } 100% { transform: rotate(0); } }

/* Eyes blink; the antenna star twinkles */
.sahan-eye { transform-box: fill-box; transform-origin: center; animation: sahan-blink 4.6s infinite; }
@keyframes sahan-blink {
  0%, 40%, 44%, 86%, 89.5%, 93%, 100% { transform: scaleY(1); }
  42% { transform: scaleY(.08); }              /* blink */
  87.7%, 91.2% { transform: scaleY(.08); }     /* quick double blink */
}
.sahan.talking .sahan-mouth { animation: sahan-talk .32s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes sahan-talk { from { transform: scaleY(1); } to { transform: scaleY(.45); } }

/* The pointing arm rotates around the shoulder */
.sahan-arm {
  position: absolute; left: 50%; top: 58%; width: var(--arm-len, 62px); height: 26px; margin-top: -13px;
  display: flex; align-items: center;
  transform-origin: 0 50%; transform: rotate(var(--arm-angle, 0deg)) scaleX(0);
  transition: transform .45s var(--sahan-ease), width .45s var(--sahan-ease); pointer-events: none;
}
.sahan.pointing .sahan-arm { transform: rotate(var(--arm-angle, 0deg)) scaleX(1); }
.sahan.pointing .sahan-arm svg { animation: sahan-poke 1s ease-in-out infinite; }
@keyframes sahan-poke { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.sahan-forearm { flex: 1; height: 7px; margin-right: -4px; border-radius: 4px; background: #D99D61; }
.sahan-arm svg { width: 30px; height: 26px; flex: none; overflow: visible; }
/* The arm starts behind the head so it reads as coming from the body */
.sahan-arm { z-index: -1; }
.sahan-body { z-index: 1; }

/* Name tag shown while docked */
.sahan-tag {
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--ink, #0B1B2B); color: #fff; font-size: .78rem; font-weight: 700; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px; box-shadow: 0 8px 20px rgba(11,27,43,.2);
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.sahan.docked:hover .sahan-tag, .sahan.docked.hint .sahan-tag { opacity: 1; }
.sahan.chat-open .sahan-tag { opacity: 0 !important; }

/* Keep pointed-at elements clear of the sticky navigation bar */
[data-guide-id] { scroll-margin-top: 110px; }

/* ---------- Spotlight around the target ---------- */
.sahan-spot {
  position: fixed; z-index: 85; pointer-events: none; border-radius: 14px;
  box-shadow: 0 0 0 4px rgba(65,137,221,.9), 0 0 0 9999px rgba(11,27,43,.28);
  transition: all .45s var(--sahan-ease); opacity: 0;
}
.sahan-spot.on { opacity: 1; }
.sahan-spot::after {
  content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 3px solid #8EC1FF;
  animation: sahan-ring 1.6s ease-out infinite;
}
@keyframes sahan-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.08); opacity: 0; } }

/* ---------- Speech bubble (tour) ---------- */
.sahan-bubble {
  position: fixed; z-index: 95; width: 310px; max-width: calc(100vw - 32px);
  background: #fff; color: var(--text, #1E2A36); border-radius: 16px; padding: 16px 18px 14px;
  box-shadow: 0 24px 48px -12px rgba(11,27,43,.35), 0 0 0 1px rgba(11,27,43,.06);
  opacity: 0; transform: translateY(6px) scale(.98); transition: opacity .25s, transform .25s, left .45s var(--sahan-ease), top .45s var(--sahan-ease);
  pointer-events: none;
}
.sahan-bubble.on { opacity: 1; transform: none; pointer-events: auto; }
.sahan-bubble h4 { margin: 0 0 6px; font-size: 1rem; color: var(--ink, #0B1B2B); }
.sahan-bubble p { margin: 0; font-size: .92rem; line-height: 1.5; }
.sahan-bubble .sahan-who { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-600, #2F6FC0); margin-bottom: 6px; }
.sahan-bubble .sahan-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.sahan-dots { display: flex; gap: 5px; }
.sahan-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong, #CBD4DF); }
.sahan-dots i.on { background: var(--brand, #4189DD); width: 16px; border-radius: 3px; }
.sahan-bubble .sahan-actions { display: flex; gap: 6px; }

/* ---------- Chat panel ---------- */
.sahan-panel {
  position: fixed; z-index: 96; right: 20px; bottom: 112px; width: 380px; max-width: calc(100vw - 32px);
  height: min(560px, calc(100vh - 140px)); display: flex; flex-direction: column;
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 60px -12px rgba(11,27,43,.35), 0 0 0 1px rgba(11,27,43,.06);
  opacity: 0; transform: translateY(14px) scale(.97); transform-origin: bottom right; pointer-events: none;
  transition: opacity .22s, transform .22s;
}
.sahan-panel.on { opacity: 1; transform: none; pointer-events: auto; }
.sahan-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: #fff;
  background: radial-gradient(300px 120px at 100% 0%, rgba(242,179,61,.35), transparent 60%), linear-gradient(135deg, #2F6FC0, #0B1B2B); }
.sahan-head .mini { width: 38px; height: 38px; flex: none; }
.sahan-head strong { display: block; font-size: 1rem; }
.sahan-head small { color: #C9D5E3; font-size: .76rem; display: flex; align-items: center; gap: 6px; }
.sahan-head small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; }
.sahan-head button { margin-left: auto; background: rgba(255,255,255,.12); border: 0; color: #fff; width: 32px; height: 32px; border-radius: 10px; cursor: pointer; display: grid; place-items: center; }
.sahan-head button:hover { background: rgba(255,255,255,.22); }
.sahan-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--surface, #F6F8FB); }
.sahan-msg { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: .92rem; line-height: 1.5; white-space: pre-line; word-wrap: break-word; }
.sahan-msg.bot { background: #fff; border: 1px solid var(--border, #E3E8EF); border-bottom-left-radius: 4px; align-self: flex-start; }
.sahan-msg.me { background: var(--brand, #4189DD); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.sahan-msg a { font-weight: 700; }
.sahan-msg.me a { color: #fff; }
.sahan-msg .sahan-show { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--brand-100, #DCEAFB); background: var(--brand-50, #EEF5FD); color: var(--brand-700, #225597); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.sahan-typing { display: inline-flex; gap: 4px; align-items: center; }
.sahan-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--subtle, #8A97A6); animation: sahan-dot 1s infinite; }
.sahan-typing i:nth-child(2) { animation-delay: .15s; } .sahan-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes sahan-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.sahan-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 16px 0; background: #fff; }
.sahan-chips button { border: 1px solid var(--border, #E3E8EF); background: #fff; color: var(--ink, #0B1B2B); border-radius: 999px; padding: 6px 11px; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.sahan-chips button:hover { border-color: var(--brand, #4189DD); color: var(--brand-700, #225597); }
.sahan-chips button.tour { background: var(--brand-50, #EEF5FD); border-color: var(--brand-100, #DCEAFB); color: var(--brand-700, #225597); }
.sahan-form { display: flex; gap: 8px; padding: 12px 16px 14px; background: #fff; }
.sahan-form input { flex: 1; min-width: 0; font: inherit; font-size: .93rem; padding: 10px 13px; border: 1px solid var(--border-strong, #CBD4DF); border-radius: 12px; }
.sahan-form input:focus { outline: none; border-color: var(--brand, #4189DD); box-shadow: 0 0 0 4px rgba(65,137,221,.15); }
.sahan-form button { border: 0; border-radius: 12px; width: 44px; background: var(--brand, #4189DD); color: #fff; cursor: pointer; display: grid; place-items: center; }
.sahan-form button:disabled { opacity: .5; cursor: default; }
.sahan-foot { font-size: .7rem; color: var(--subtle, #8A97A6); text-align: center; padding: 0 16px 10px; background: #fff; }

/* Toasts sit above the docked guide */
.toast-stack { bottom: 112px; }

@media (max-width: 640px) {
  :root { --sahan-size: 60px; }
  .sahan-panel { right: 12px; left: 12px; width: auto; max-width: none; bottom: 88px; height: calc(100vh - 120px); }
  .sahan-bubble.sheet { left: 12px !important; right: 12px; width: auto; top: auto !important; bottom: 16px; }
  .sahan-tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sahan, .sahan-arm, .sahan-spot, .sahan-bubble { transition: none !important; }
  .sahan-body, .sahan-eye, .sahan.pointing .sahan-arm svg, .sahan-spot::after, .sahan.talking .sahan-mouth { animation: none !important; }
}

@media print { .sahan, .sahan-spot, .sahan-bubble, .sahan-panel { display: none !important; } }