/* ==========================================================================
   apex-chat — the miOS mascot lead-capture agent.
   Rides on the tokens in apex-system.css. Loaded on every page of every
   property. Scripted (no LLM): a branching qualifier that ends in a captured
   contact and a tracked conversion event.
   ========================================================================== */

/* The book-fab and the chat launcher both want the bottom-right corner.
   When chat is mounted, the fab lifts to sit above it as one cluster. */
body.has-apex-chat .book-fab{ bottom:calc(clamp(.9rem,2vw,1.6rem) + 4.9rem); }

.apexchat{
  position:fixed; right:clamp(.9rem,2vw,1.6rem); bottom:clamp(.9rem,2vw,1.6rem);
  z-index:95; font-family:var(--font-ui);
}

/* --- launcher ------------------------------------------------------------ */
.apexchat__launch{
  position:relative; display:grid; place-items:center;
  width:4.1rem; height:4.1rem; padding:0; border:0; cursor:pointer;
  border-radius:999px; background:var(--ink-800);
  border:1px solid var(--line-strong);
  box-shadow:0 14px 34px -10px rgba(0,0,0,.7);
  transition:transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.apexchat__launch:hover{ transform:translateY(-3px) scale(1.04); border-color:rgba(224,20,20,.6); }
.apexchat__launch:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.apexchat__launch svg{ width:3.2rem; height:3.2rem; }
.apexchat__launch::before{
  content:""; position:absolute; inset:-4px; border-radius:999px;
  border:2px solid rgba(224,20,20,.5);
  animation:apexchat-ring 2.8s var(--ease) infinite; pointer-events:none;
}
@keyframes apexchat-ring{
  0%{transform:scale(.93);opacity:.85} 70%{transform:scale(1.16);opacity:0} 100%{opacity:0}
}
/* unread dot */
.apexchat__badge{
  position:absolute; top:-2px; right:-2px; width:1.05rem; height:1.05rem;
  border-radius:999px; background:var(--accent-2); border:2px solid var(--bg);
}

/* teaser bubble */
.apexchat__teaser{
  position:absolute; right:calc(100% + .7rem); bottom:.55rem; width:max-content; max-width:15rem;
  padding:.6rem .85rem; border-radius:var(--r-lg) var(--r-lg) .25rem var(--r-lg);
  background:var(--ink-800); border:1px solid var(--line);
  color:var(--fg); font-size:.85rem; line-height:1.35; text-align:left;
  box-shadow:var(--shadow-2);
  animation:apexchat-pop var(--t-slow) var(--ease-out) both;
}
.apexchat__teaser button{
  position:absolute; top:-.5rem; right:-.5rem; width:1.3rem; height:1.3rem; padding:0;
  border-radius:999px; border:1px solid var(--line); background:var(--ink-700);
  color:var(--fg-muted); font-size:.7rem; line-height:1; cursor:pointer;
}
@keyframes apexchat-pop{ from{opacity:0;transform:translateY(6px) scale(.96)} to{opacity:1;transform:none} }

/* --- panel --------------------------------------------------------------- */
.apexchat__panel{
  position:absolute; right:0; bottom:calc(100% + .75rem);
  width:min(23.5rem, calc(100vw - 2rem));
  max-height:min(34rem, calc(100vh - 7rem));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--ink-850); border:1px solid var(--line-strong);
  border-radius:var(--r-xl); box-shadow:var(--shadow-3);
  animation:apexchat-pop var(--t-mid) var(--ease-out) both;
}
.apexchat__panel[hidden]{ display:none; }

.apexchat__head{
  display:flex; align-items:center; gap:.7rem; padding:.85rem 1rem;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(224,20,20,.14), transparent);
}
.apexchat__head svg{ width:2.4rem; height:2.4rem; flex:0 0 auto; }
.apexchat__who{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.apexchat__who b{ font-size:.95rem; letter-spacing:-.01em; }
.apexchat__who span{ font-size:.72rem; color:var(--fg-faint); }
.apexchat__status{ display:inline-flex; align-items:center; gap:.3rem; }
.apexchat__status i{
  width:.42rem; height:.42rem; border-radius:999px; background:#37d67a; font-style:normal;
}
.apexchat__x{
  margin-left:auto; width:1.9rem; height:1.9rem; display:grid; place-items:center;
  border-radius:var(--r-sm); border:1px solid transparent; background:transparent;
  color:var(--fg-muted); cursor:pointer; font-size:1.1rem; line-height:1;
}
.apexchat__x:hover{ background:var(--bg-elev); color:var(--fg); }
.apexchat__x:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

.apexchat__log{
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  padding:1rem; display:flex; flex-direction:column; gap:.6rem;
  scrollbar-width:thin;
}
.apexchat__msg{
  max-width:88%; padding:.62rem .85rem; border-radius:var(--r-lg);
  font-size:.88rem; line-height:1.45; animation:apexchat-pop 260ms var(--ease-out) both;
}
.apexchat__msg--bot{
  align-self:flex-start; background:var(--bg-elev-2); color:var(--fg);
  border:1px solid var(--line); border-bottom-left-radius:.28rem;
}
.apexchat__msg--me{
  align-self:flex-end; background:var(--accent); color:var(--accent-ink);
  border-bottom-right-radius:.28rem; font-weight:600;
}
.apexchat__msg a{ color:inherit; text-underline-offset:2px; }

/* typing indicator */
.apexchat__typing{ display:inline-flex; gap:.22rem; padding:.2rem 0; }
.apexchat__typing i{
  width:.4rem; height:.4rem; border-radius:999px; background:var(--fg-faint);
  animation:apexchat-bounce 1.1s ease-in-out infinite;
}
.apexchat__typing i:nth-child(2){ animation-delay:.16s }
.apexchat__typing i:nth-child(3){ animation-delay:.32s }
@keyframes apexchat-bounce{ 0%,60%,100%{transform:translateY(0);opacity:.5} 30%{transform:translateY(-4px);opacity:1} }

/* --- reply rail ---------------------------------------------------------- */
.apexchat__foot{ border-top:1px solid var(--line); padding:.75rem; background:var(--ink-900); }
.apexchat__chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.apexchat__chip{
  padding:.48rem .8rem; border-radius:999px; cursor:pointer;
  background:var(--bg-elev); border:1px solid var(--line-strong);
  color:var(--fg); font-family:inherit; font-size:.82rem; font-weight:600; text-align:left;
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.apexchat__chip:hover{ background:var(--accent-soft); border-color:var(--accent); transform:translateY(-1px); }
.apexchat__chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.apexchat__form{ display:flex; gap:.45rem; }
.apexchat__form input{
  flex:1 1 auto; min-width:0; padding:.6rem .8rem; border-radius:var(--r-md);
  background:var(--ink-800); border:1px solid var(--line-strong); color:var(--fg);
  font-family:inherit; font-size:.88rem;
}
.apexchat__form input::placeholder{ color:var(--fg-faint); }
.apexchat__form input:focus{ outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent; }
.apexchat__send{
  flex:0 0 auto; width:2.5rem; border-radius:var(--r-md); cursor:pointer;
  background:var(--grad, var(--accent)); border:0; color:#fff; font-size:1rem;
}
.apexchat__send:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.apexchat__err{ margin:.4rem .1rem 0; font-size:.76rem; color:#ff8f8f; }
.apexchat__legal{ margin:.5rem .1rem 0; font-size:.68rem; color:var(--fg-faint); line-height:1.4; }
.apexchat__legal a{ color:var(--fg-muted); }

/* mascot speaking cue — the mouth opens while a bot line is being delivered */
.apexchat[data-speaking="true"] [data-part="mouth"]{ animation:apexchat-talk .34s ease-in-out infinite; }
@keyframes apexchat-talk{ 0%,100%{d:path("M108 166 Q120 178 132 166")} 50%{d:path("M108 164 Q120 184 132 164")} }

@media (max-width:480px){
  .apexchat__panel{ width:calc(100vw - 1.6rem); max-height:calc(100vh - 6rem); }
  .apexchat__launch{ width:3.6rem; height:3.6rem; }
  .apexchat__launch svg{ width:2.8rem; height:2.8rem; }
}
@media print{ .apexchat{ display:none } }
@media (prefers-reduced-motion:reduce){
  .apexchat__launch::before{ display:none }
  .apexchat__msg,.apexchat__panel,.apexchat__teaser{ animation:none }
  .apexchat__typing i{ animation:none }
  .apexchat[data-speaking="true"] [data-part="mouth"]{ animation:none }
}