/* ==========================================================================
   IFT LEARNINGS — floating AI assistant
   --------------------------------------------------------------------------
   No API key here, and no provider script. The widget talks only to
   POST /api/assistant on this server; the key stays in .env.
   ========================================================================== */

/* ============================== LAUNCHER ============================== */
/* The wrapper is what's fixed to the corner; the button and the mascot are
   positioned against it. isolation:isolate keeps the two-layer stack (bot
   behind button) local, so it can't be reordered by anything on the page. */
.aiw-launch{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:160;
  isolation:isolate;
}
.aiw-fab{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;gap:.6em;
  padding:13px 20px 13px 16px;border-radius:999px;
  background:var(--accent);color:#fff;
  font-size:.76rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  box-shadow:0 14px 40px -14px rgba(255,61,87,.75);
  transition:transform .5s var(--ease),box-shadow .4s ease,opacity .3s ease;
}
.aiw-fab:hover{transform:translateY(-3px);box-shadow:0 18px 48px -14px rgba(255,61,87,.9)}
.aiw-fab svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9}
.aiw-fab .dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent-2);flex:none;
  animation:aiwDot 2s ease-in-out infinite;
}
@keyframes aiwDot{
  0%,100%{box-shadow:0 0 0 0 rgba(255,194,75,.7)}
  50%{box-shadow:0 0 0 7px rgba(255,194,75,0)}
}
body.aiw-open .aiw-fab{opacity:0;pointer-events:none;transform:scale(.9)}

/* ---------------------------- THE MASCOT ----------------------------
   Peeks out from behind the button, taps at it, ducks back.

   Geometry is not arbitrary. --peek-dip is how far the clip box reaches down
   INTO the button; everything below that line in the artwork is covered by the
   button, which is what makes the bot read as hiding behind it rather than
   floating above it. The pointing finger stops just short of that line so the
   gesture stays visible.

   --peek-x keeps the bot over the FLAT part of the pill. A 999px radius on a
   ~43px-tall button curves for the last ~21px at each end, so a bot parked
   nearer the edge than that would hang off a sloping surface and show daylight
   underneath. */
.aiw-peek{
  --peek-w:56px;
  --peek-x:26px;
  --peek-dip:7px;
  position:absolute;z-index:1;
  right:var(--peek-x);
  bottom:calc(100% - var(--peek-dip));
  width:var(--peek-w);aspect-ratio:56/58;
  overflow:hidden;              /* the bot hides by sliding out of this box —
                                   which also stops it swallowing clicks while
                                   hidden, since hit-testing respects the clip */
  pointer-events:none;
}
/* No cursor:pointer — site.css hides the native cursor on every button and
   site.js already grows the custom one over this, being a <button>. */
.aiw-bot{
  display:block;width:100%;height:100%;pointer-events:auto;
  transform:translateY(102%);transform-origin:50% 100%;
  animation:aiwPeek 9s var(--ease) 2.5s infinite;
  transition:transform .55s var(--ease);
  will-change:transform;
}
.aiw-bot svg{display:block;width:100%;height:100%;overflow:visible}

.aiw-bot .head,.aiw-bot .body{fill:#2A0D16;stroke:var(--accent);stroke-width:2.4}
.aiw-bot .eyes circle{fill:var(--accent-2)}
.aiw-bot .mouth{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round}
.aiw-bot .ant .ln{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round}
.aiw-bot .ant .bulb{fill:var(--accent-2)}
/* Gold, not crimson: the hand sits directly against the crimson button and
   would disappear into it. */
.aiw-bot .palm{fill:var(--accent-2)}
.aiw-bot .finger{stroke:var(--accent-2);stroke-width:4;stroke-linecap:round}

.aiw-bot .eyes{transform-box:fill-box;transform-origin:50% 50%;animation:aiwBlink 9s linear 2.5s infinite}
.aiw-bot .hand{transform-box:fill-box;transform-origin:50% 0;animation:aiwTap 9s var(--ease) 2.5s infinite}

/* Out for ~40% of the cycle, hidden for the rest — long enough to be noticed,
   idle long enough not to nag. */
/* No negative translateY anywhere. The clip box is exactly the artwork's size and
   the antenna tip has only ~0.9 units of headroom, so an overshoot above the
   resting position would shave the top off the antenna mid-bounce. The snap comes
   from the rotation and the strong ease-out instead — rotating about the bottom
   centre only ever moves the artwork down, never up. */
@keyframes aiwPeek{
  0%,6%    {transform:translateY(102%) rotate(0deg)}
  14%      {transform:translateY(0)    rotate(-9deg)}
  22%      {transform:translateY(0)    rotate(-2deg)}
  52%      {transform:translateY(0)    rotate(-3deg)}
  59%      {transform:translateY(14%)  rotate(3deg)}
  68%,100% {transform:translateY(102%) rotate(0deg)}
}
/* Three taps at the button, only while the bot is actually out. */
@keyframes aiwTap{
  0%,20%       {transform:translateY(0) rotate(0deg)}
  25%          {transform:translateY(2px) rotate(-15deg)}
  30%          {transform:translateY(0) rotate(0deg)}
  35%          {transform:translateY(2px) rotate(-15deg)}
  40%          {transform:translateY(0) rotate(0deg)}
  45%          {transform:translateY(2px) rotate(-15deg)}
  50%,100%     {transform:translateY(0) rotate(0deg)}
}
@keyframes aiwBlink{
  0%,29%,32%,46%,49%,100%{transform:scaleY(1)}
  30.5%,47.5%{transform:scaleY(.1)}
}

/* Hovering the launcher is intent — bring the bot out and hold it there
   instead of letting it duck away mid-reach. */
.aiw-launch:hover .aiw-bot,
.aiw-launch:focus-within .aiw-bot{animation:none;transform:translateY(0) rotate(-3deg)}
/* The 9s tap track only fires during its own window, so held out on hover the
   hand would sit still most of the time. Give it a short loop of its own. */
.aiw-launch:hover .aiw-bot .hand,
.aiw-launch:focus-within .aiw-bot .hand{animation:aiwTapQuick 1.15s var(--ease) infinite}
@keyframes aiwTapQuick{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(2px) rotate(-15deg)}
}

/* Hide with the button while the panel is open, and stop the loop for good once
   the visitor has opened the assistant — at that point it has done its job and
   a bot still tapping at a button you already pressed is just noise. */
.aiw-peek{transition:opacity .3s ease}
body.aiw-open .aiw-peek{opacity:0}
body.aiw-seen .aiw-bot{animation:none}

@media(max-width:560px){
  .aiw-fab .label{display:none}
  .aiw-fab{padding:15px;border-radius:50%}
  /* No flat top on a circle, so the bot is centred on it instead: the button is
     ~61px wide here, and (61 - 46) / 2 ≈ 8px. */
  .aiw-peek{--peek-x:8px;--peek-w:46px;--peek-dip:6px}
  /* And the torso has to be narrowed. A circle's crown falls away fast — at the
     full 26-unit width the shoulders overhang the edge and hang in mid-air
     instead of tucking behind the button. 16 units keeps them inside the flat
     part of the crown. (SVG geometry properties in CSS; where unsupported this
     falls back to the attribute, i.e. today's look, not a broken one.) */
  .aiw-bot .body{x:20;width:16}
}
@media(prefers-reduced-motion:reduce){
  /* Still visible, just not moving — the bot is the affordance, the motion was
     only the invitation. */
  .aiw-bot{animation:none;transform:translateY(0) rotate(-3deg)}
  .aiw-bot .eyes,.aiw-bot .hand{animation:none}
  .aiw-fab .dot{animation:none}
}

/* ============================== PANEL ============================== */
.aiw{
  position:fixed;z-index:161;
  right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);
  width:min(390px,calc(100vw - 2rem));
  height:min(600px,calc(100vh - 2rem));
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line-2);border-radius:16px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9);
  overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.98);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
}
body.aiw-open .aiw{opacity:1;visibility:visible;transform:none}
@media(max-width:560px){
  .aiw{right:0;bottom:0;width:100vw;height:100dvh;border-radius:0;border:0}
}

.aiw-head{
  display:flex;align-items:center;gap:.75rem;
  padding:.95rem 1rem;border-bottom:1px solid var(--line);flex:none;
}
.aiw-head .mk{width:30px;height:30px;flex:none;overflow:visible}
.aiw-head .aiw-who{display:flex;flex-direction:column;gap:.1rem;line-height:1.25;min-width:0}
.aiw-head .aiw-who b{font-family:var(--font-d);font-weight:700;font-size:.92rem}
.aiw-head .aiw-who span{
  color:var(--muted);font-size:.68rem;letter-spacing:.09em;
  display:flex;align-items:center;gap:.4em;
}
.aiw-head .aiw-who span i{
  width:6px;height:6px;border-radius:50%;background:#4ADE80;flex:none;font-style:normal;
}
.aiw-x{
  margin-left:auto;width:32px;height:32px;border-radius:50%;flex:none;
  display:grid;place-items:center;color:var(--muted);
  transition:background-color .3s ease,color .3s ease,rotate .4s var(--ease);
}
.aiw-x svg{width:14px;height:14px}
.aiw-x:hover{background:rgba(243,233,235,.08);color:var(--fg);rotate:90deg}

/* ============================== MESSAGES ============================== */
.aiw-log{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:1.1rem 1rem;display:flex;flex-direction:column;gap:.85rem;
  scrollbar-width:thin;
}
.aiw-msg{max-width:86%;font-size:.9rem;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.aiw-msg.bot{
  align-self:flex-start;background:rgba(243,233,235,.06);
  border:1px solid var(--line);border-radius:12px 12px 12px 3px;
  padding:.7rem .85rem;color:var(--fg);
}
.aiw-msg.me{
  align-self:flex-end;background:var(--accent);color:#fff;
  border-radius:12px 12px 3px 12px;padding:.7rem .85rem;
}
.aiw-msg.err{
  align-self:stretch;max-width:100%;background:rgba(255,61,87,.1);
  border:1px solid var(--accent);border-radius:10px;
  padding:.7rem .85rem;color:var(--fg);font-size:.86rem;
}
/* Shown after the assistant successfully books a demo class. */
.aiw-msg.booked{
  align-self:stretch;max-width:100%;
  background:rgba(255,194,75,.1);border:1px solid var(--accent-2);border-radius:10px;
  padding:.7rem .85rem;color:var(--accent-2);font-size:.86rem;font-weight:600;
  display:flex;align-items:flex-start;gap:.55em;
}
.aiw-msg.booked svg{width:15px;height:15px;flex:none;margin-top:.15em}

.aiw-typing{align-self:flex-start;display:flex;gap:4px;padding:.8rem .85rem}
.aiw-typing i{
  width:6px;height:6px;border-radius:50%;background:var(--muted);
  animation:aiwBounce 1.2s ease-in-out infinite;
}
.aiw-typing i:nth-child(2){animation-delay:.15s}
.aiw-typing i:nth-child(3){animation-delay:.3s}
@keyframes aiwBounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}

/* quick-reply chips shown on first open */
.aiw-chips{display:flex;gap:.4rem;flex-wrap:wrap;padding:0 1rem 1rem}
.aiw-chips button{
  border:1px solid var(--line-2);border-radius:999px;padding:7px 13px;
  font-size:.74rem;color:var(--muted);
  transition:color .3s ease,border-color .3s ease;
}
.aiw-chips button:hover{color:var(--fg);border-color:var(--accent)}

/* ============================== COMPOSER ============================== */
.aiw-form{
  flex:none;border-top:1px solid var(--line);padding:.75rem;
  display:flex;gap:.55rem;align-items:flex-end;
}
.aiw-form textarea{
  flex:1;background:transparent;border:1px solid var(--line-2);border-radius:10px;
  padding:.62rem .75rem;color:var(--fg);font-family:inherit;font-size:.9rem;
  line-height:1.5;resize:none;max-height:120px;min-height:42px;
  transition:border-color .3s ease;
}
.aiw-form textarea:focus{outline:none;border-color:var(--accent)}
.aiw-form textarea::placeholder{color:rgba(154,129,137,.65)}
.aiw-send{
  width:42px;height:42px;border-radius:10px;flex:none;
  display:grid;place-items:center;background:var(--accent);color:#fff;
  transition:opacity .3s ease,transform .3s var(--ease);
}
.aiw-send svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.aiw-send:hover:not(:disabled){transform:translateY(-2px)}
.aiw-send:disabled{opacity:.4;cursor:not-allowed}
.aiw-note{
  flex:none;padding:0 .95rem .7rem;color:var(--muted);font-size:.66rem;line-height:1.45;
}

@media(prefers-reduced-motion:reduce){
  .aiw,.aiw-fab{transition:none}
  .aiw-typing i,.aiw-fab .dot{animation:none}
}