/* ==========================================================================
   The mascot and its chat. Built from the brand's own parts (BRAND.md 5):
   the body is a tile (white face, darker fold, navy strip on the right),
   the visor is a name tag with a mint nudge, the antenna light is mint
   because mint means yes. Tokens only, from site.css. Motion uses the
   expressive register for hops and the productive one for UI feedback.
   ========================================================================== */

/* ---------- the robot drawing (shared by the floating button and the avatar) ---------- */
.bot { display: block; width: 100%; height: auto; overflow: visible; }
.bot__leg rect, .bot__arm rect, .bot__strip, .bot__screen, .bot__chip { fill: var(--brand-strip); }
.bot__leg rect + rect { fill: var(--brand-fold); }
.bot__fold { fill: var(--brand-fold); }
.bot__card { fill: var(--tile-face); stroke: var(--border-strong); stroke-width: 1; }
.bot__chip { fill: var(--brand-raised-2); }
.bot__nudge, .bot__light { fill: var(--yes-solid); }
.bot__glint { fill: var(--tile-face); opacity: 0.85; }
.bot__stalk { fill: none; stroke: var(--brand-strip); stroke-width: 3; stroke-linecap: round; }
.bot__eyes-open rect { fill: var(--tile-face); }
.bot__eyes-happy, .bot__eyes-shut {
  fill: none;
  stroke: var(--tile-face);
  stroke-width: 2.6;
  stroke-linecap: round;
  opacity: 0;
}
.bot__blush { fill: color-mix(in srgb, var(--prio-high-strip) 26%, transparent); }
.bot__smile { fill: none; stroke: var(--brand-strip); stroke-width: 2.6; stroke-linecap: round; }
.bot__mouth { fill: var(--brand-strip); opacity: 0; }
.bot__z {
  fill: var(--brand-strip);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  opacity: 0;
}

/* every moving part turns around its own box */
.bot__arm, .bot__antenna, .bot__eyes, .bot__eyes-open, .bot__mouth { transform-box: fill-box; }
.bot__arm { transform-origin: 50% 12%; }
.bot__antenna { transform-origin: 50% 100%; }
.bot__eyes, .bot__eyes-open, .bot__mouth { transform-origin: 50% 50%; }
.bot__eyes { transition: transform var(--dur-base) var(--ease-ui); }
.bot__eyes-open { transition: transform 70ms var(--ease-ui), opacity var(--dur-fast) var(--ease-ui); }

/* poses */
.bot-host.look-down .bot__eyes { transform: translate(0, 2.4px); }
.bot-host.look-up .bot__eyes { transform: translate(0, -2.8px); }
.bot-host.look-left .bot__eyes { transform: translate(-3.4px, 0.6px); }
.bot-host.is-blink .bot__eyes-open { transform: scaleY(0.12); }
.bot-host.is-happy .bot__eyes-open,
.bot-host.is-sleep .bot__eyes-open { opacity: 0; }
.bot-host.is-happy .bot__eyes-happy { opacity: 1; }
.bot-host.is-sleep .bot__eyes-shut { opacity: 1; }
.bot-host.is-sleep .bot__light { opacity: 0.35; }
.bot-host.is-sleep .bot__glint { opacity: 0; }
.bot-host.is-sleep .bot__z { opacity: 1; }
.bot-host.is-sleep .bot__arm--l { transform: rotate(-8deg); }
.bot-host.is-sleep .bot__arm--r { transform: rotate(8deg); }
.bot-host.is-happy .bot { rotate: -4deg; }
.bot-host.is-talking .bot__smile { opacity: 0; }
.bot-host.is-talking .bot__mouth { opacity: 1; }
.bot-host.is-talking.is-happy .bot__mouth { transform: scale(1.15, 1.05); }

/* on a navy band: limbs and strip get a light edge so the outline still reads */
.mascot.is-on-dark .bot__strip,
.mascot.is-on-dark .bot__arm rect,
.mascot.is-on-dark .bot__leg rect { fill: var(--brand-raised-2); stroke: var(--text-on-brand-secondary); stroke-width: 1.2; }
.mascot.is-on-dark .bot__stalk { stroke: var(--text-on-brand-secondary); }
.mascot.is-on-dark .bot__chip { fill: var(--brand-raised); }
.mascot.is-on-dark .bot__card { stroke: none; }
.mascot.is-on-dark .bot__z { fill: var(--text-on-brand); }

/* ---------- the floating button ---------- */
.mascot {
  --m-edge: 16px;
  --mx: 0px;
  --my: 0px;
  --duck: 0px;
  position: fixed;
  right: var(--m-edge);
  bottom: var(--m-edge);
  z-index: 45;
  transform: translate3d(var(--mx), calc(var(--my) + var(--duck)), 0);
  transition: transform var(--dur-reveal) var(--ease-enter);
}
@media (min-width: 768px) { .mascot { --m-edge: 24px; } }
.mascot.is-ducked { --duck: 150px; transition-duration: 320ms; transition-timing-function: var(--ease-exit); }

.mascot__btn {
  position: relative;
  display: block;
  width: 58px;
  height: 68px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--dur-base) var(--ease-ui), transform var(--dur-base) var(--ease-ui), visibility 0s;
}
@media (min-width: 768px) { .mascot__btn { width: 74px; height: 87px; } }
.mascot__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.mascot.is-on-dark .mascot__btn { --focus-ring: var(--yes-solid); }
.mascot__btn .bot { position: absolute; left: 0; bottom: 0; transform-origin: 50% 92%; }
.mascot__btn:hover .bot { transform: translateY(-2px); transition: transform var(--dur-base) var(--ease-ui); }
.mascot__btn:active .bot { transform: scale(1.05, 0.94); transition-duration: var(--dur-fast); }

.mascot__shadow {
  position: absolute;
  left: 18%;
  right: 22%;
  bottom: 0;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-solid) 18%, transparent);
  transform-origin: 50% 50%;
}

/* chat open: the robot hops into the panel header */
.mascot.is-away .mascot__btn {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.5) translateY(24px);
  transition: opacity var(--dur-base) var(--ease-exit), transform var(--dur-base) var(--ease-exit), visibility 0s linear var(--dur-base);
}

/* the tooltip is a name tag: navy label, mint nudge, a small tail toward the robot */
.mascot__bubble {
  position: absolute;
  right: calc(100% - 2px);
  bottom: 58%;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 13px 5px 15px;
  border-radius: var(--r-tag);
  background: var(--tag-surface);
  color: var(--tag-text);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  line-height: 1.3;
  font-weight: 650;
  font-stretch: 94%;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: var(--shadow-tile);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-exit), transform var(--dur-base) var(--ease-exit);
  pointer-events: none;
}
.mascot__bubble::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  width: 7px;
  height: 18px;
  border-radius: 3px;
  background: var(--yes-solid);
  transform: translateY(-50%);
}
.mascot__bubble::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: 7px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--tag-surface);
  transform: rotate(45deg);
}
.mascot.is-hinting .mascot__bubble {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-reveal) var(--ease-enter), transform var(--dur-reveal) var(--ease-enter);
}

/* ---------- motion: expressive register, no loops, nothing under reduced motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .mascot.is-hop .bot { animation: bot-hop 620ms linear both; }
  .mascot.is-hop .mascot__shadow { animation: bot-shadow 620ms linear both; }
  .mascot.is-hop .bot__antenna { animation: bot-antenna 760ms var(--ease-ui) both; }
  .mascot.is-hop .bot__arm--l { animation: bot-flap-l 620ms var(--ease-ui) both; }
  .mascot.is-hop .bot__arm--r { animation: bot-flap-r 620ms var(--ease-ui) both; }
  .mascot.is-wave .bot__arm--l { animation: bot-wave 1400ms var(--ease-ui) both; }
  .mascot.is-wave .bot__antenna { animation: bot-antenna 900ms var(--ease-ui) both; }
  .bot-host.is-typing .bot__mouth { animation: bot-talk 300ms var(--ease-ui) infinite alternate; }
  .bot-host.is-sleep .bot__z { animation: bot-z 900ms var(--ease-enter) both; }
}
@keyframes bot-hop {
  0% { transform: none; }
  14% { transform: scale(1.08, 0.9); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  46% { transform: translateY(-22px) scale(0.95, 1.06); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.4); }
  84% { transform: scale(1.07, 0.92); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  100% { transform: none; }
}
@keyframes bot-shadow {
  0%, 14%, 100% { transform: none; opacity: 1; }
  46% { transform: scale(0.55); opacity: 0.45; }
  84% { transform: scale(1.12, 1); opacity: 1; }
}
@keyframes bot-antenna {
  0%, 14% { transform: none; }
  40% { transform: rotate(-12deg); }
  66% { transform: rotate(10deg); }
  86% { transform: rotate(-4deg); }
  100% { transform: none; }
}
@keyframes bot-flap-l { 0%, 100% { transform: none; } 46% { transform: rotate(38deg); } }
@keyframes bot-flap-r { 0%, 100% { transform: none; } 46% { transform: rotate(-38deg); } }
@keyframes bot-wave {
  0% { transform: none; }
  18% { transform: rotate(150deg); }
  32% { transform: rotate(124deg); }
  46% { transform: rotate(156deg); }
  60% { transform: rotate(124deg); }
  74% { transform: rotate(150deg); }
  100% { transform: none; }
}
@keyframes bot-talk { from { transform: scaleY(0.35); } to { transform: scaleY(1.1); } }
@keyframes bot-z { from { opacity: 0; transform: translate(-4px, 6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mascot, .mascot__btn, .mascot__bubble, .bot__eyes, .bot__eyes-open { transition: none !important; }
}

/* ---------- the chat panel: a tile, close button on its strip ---------- */
.chat {
  --chat-strip: 48px;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--chat-strip);
  width: min(400px, calc(100vw - 32px));
  height: min(640px, calc(100dvh - 120px));
  border-radius: 20px;
  background: var(--brand-strip);
  color: var(--text-primary);
  box-shadow: var(--shadow-dialog);
  transform-origin: 100% 100%;
}
.chat[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .chat.is-open { animation: chat-in var(--dur-reveal) var(--ease-enter); }
}
@keyframes chat-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }

.chat__face {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--surface-card);
  box-shadow: var(--fold-w) 0 0 0 var(--brand-fold);
}
.chat__strip {
  display: grid;
  align-content: start;
  justify-items: center;
  padding: 14px 0 14px var(--fold-w);
}
.chat__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: var(--brand-raised-2);
  color: var(--text-on-brand);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-ui);
}
.chat__close:hover { background: var(--brand-raised); }
.chat__close .icon { width: 18px; height: 18px; }

.chat__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.chat__avatar { display: block; width: 42px; }
.chat__id { display: grid; gap: 4px; min-width: 0; }
.chat__title { margin: 0 0 0 4px; font-size: 0.9375rem; }
.chat__sub { font-size: 0.8125rem; line-height: 1.35; color: var(--text-secondary); }
.chat__hide {
  min-height: 36px;
  padding: 6px 10px;
  border: 1.5px solid transparent;
  border-radius: var(--r-input);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-ui), color var(--dur-fast) var(--ease-ui);
}
.chat__hide:hover { border-color: var(--border-strong); color: var(--text-primary); }

.chat__log {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 14px 16px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface-well);
}
.chat__log:focus-visible { outline-offset: -3px; }

/* messages: the bot speaks in small tiles (strip and fold on the right), you in navy */
.msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: var(--r-tile);
  font-size: 0.9375rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.msg p + p { margin-top: 8px; }
.msg--bot {
  --msg-strip: var(--brand-strip);
  --msg-fold: var(--brand-fold);
  align-self: flex-start;
  padding-right: 22px;
  background: var(--tile-face);
  color: var(--text-primary);
  box-shadow: inset -6px 0 0 var(--msg-strip), inset -9px 0 0 var(--msg-fold), inset 0 0 0 1px var(--border-subtle);
}
.msg--warn { --msg-strip: var(--prio-medium-strip); --msg-fold: var(--prio-medium-fold); }
.msg--user {
  align-self: flex-end;
  background: var(--brand-solid);
  color: var(--text-on-brand);
  white-space: pre-line;
}
.msg .link { font-weight: 600; }
.msg--typing { display: inline-flex; gap: 5px; align-items: center; min-height: 40px; }
.msg--typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-strip); opacity: 0.35; }
@media (prefers-reduced-motion: no-preference) {
  .msg--typing span { animation: chat-dot 900ms var(--ease-ui) infinite; }
  .msg--typing span:nth-child(2) { animation-delay: 150ms; }
  .msg--typing span:nth-child(3) { animation-delay: 300ms; }
  .chat__log > .msg:not(.msg--typing) { animation: rise var(--dur-base) var(--ease-enter); }
}
@keyframes chat-dot { 0%, 100% { opacity: 0.3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

/* suggested questions and the New chat button */
.chat__suggest { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 0; }
.chat__q {
  min-height: 36px;
  padding: 6px 12px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-input);
  background: var(--surface-card);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-ui), background-color var(--dur-fast) var(--ease-ui);
}
.chat__q:hover { border-color: var(--text-primary); background: var(--surface-well); }
.chat__q--again { margin-top: 10px; }

.chat__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 4px 8px;
  padding: 12px 14px 4px 16px;
}
.chat__input {
  display: block;
  width: 100%;
  min-height: 46px;
  max-height: 132px;
  padding: 11px 12px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-input);
  background: var(--surface-card);
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.4;
  resize: none;
}
.chat__input::placeholder { color: var(--text-secondary); opacity: 1; }
.chat__input:focus-visible { border-color: var(--text-primary); outline-offset: 2px; }
.chat__input:disabled { background: var(--surface-well); }
.chat__send {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: var(--r-input);
  background: var(--brand-solid);
  color: var(--text-on-brand);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-ui);
}
.chat__send:hover { background: var(--brand-raised-2); }
.chat__send[disabled] { opacity: 0.5; cursor: not-allowed; }
.chat__hint { grid-column: 1 / -1; min-height: 4px; font-size: 0.8125rem; line-height: 1.3; text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.chat__note { padding: 4px 16px 14px; font-size: 0.8125rem; line-height: 1.45; color: var(--text-secondary); }
.chat__note .link { color: var(--text-primary); }

/* phones: a full screen sheet, the strip stays on the right */
@media (max-width: 559px) {
  .chat {
    --chat-strip: 40px;
    inset: 0;
    width: auto;
    height: 100dvh;
    border-radius: 0;
  }
  .chat__face { border-radius: 0 16px 16px 0; }
  .chat__close { width: 32px; height: 32px; border-radius: 9px; }
  .chat__head { padding: 10px 10px 10px 14px; gap: 10px; }
  .chat__avatar { width: 38px; }
  html.chat-open { overflow: hidden; }
}