/* ============================================================
   MUK Health — chat launcher + assistant
   Sits above the page, never inside the layout, so it cannot move
   anything. Sized to stay clear of the back-to-top button.
   ============================================================ */

.mka{
  position:fixed; z-index:9400;
  right:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px));
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  font-family:'Jost',sans-serif;
}

/* ---------- launcher ---------- */
.mka-fab{
  position:relative;
  width:56px; height:56px; flex:none;
  border:0; padding:0; border-radius:50%; cursor:pointer;
  background:var(--forest,#1F3D2C); color:var(--cream,#F7F4EC);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -8px rgba(14,28,19,.55), 0 0 0 1px rgba(14,28,19,.08);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), background .3s ease;
}
.mka-fab svg{width:25px;height:25px;flex:none}
.mka-fab:hover{transform:translateY(-3px) scale(1.04); background:var(--forest-deep,#0E1C13)}
.mka-fab:focus-visible{outline:2px solid var(--stone,#C9A86A); outline-offset:3px}
/* gentle attention pulse, stops once opened */
.mka-fab::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(201,168,106,.55);
  animation:mkaPulse 3.4s ease-out infinite;
}
.mka.is-open .mka-fab::after{animation:none}
@keyframes mkaPulse{
  0%{box-shadow:0 0 0 0 rgba(201,168,106,.5)}
  70%{box-shadow:0 0 0 16px rgba(201,168,106,0)}
  100%{box-shadow:0 0 0 0 rgba(201,168,106,0)}
}
/* icon swap */
.mka-fab__x{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:rotate(-90deg); transition:opacity .3s ease, transform .3s ease}
.mka.is-open .mka-fab__x{opacity:1; transform:rotate(0)}
.mka.is-open .mka-fab > svg:first-child{opacity:0}
.mka-fab > svg:first-child{transition:opacity .3s ease}

/* ---------- panel ---------- */
.mka-panel{
  width:min(360px, calc(100vw - 32px));
  max-height:min(560px, calc(100vh - 130px));
  background:var(--cream,#F7F4EC);
  box-shadow:0 0 0 1px rgba(14,28,19,.10), 0 26px 60px -22px rgba(14,28,19,.55);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; visibility:hidden;
  transform:translate3d(0,18px,0) scale(.97);
  transform-origin:100% 100%;
  transition:opacity .34s cubic-bezier(.22,1,.36,1),
             transform .34s cubic-bezier(.22,1,.36,1),
             visibility 0s linear .34s;
}
.mka.is-open .mka-panel{
  opacity:1; visibility:visible;
  transform:translate3d(0,0,0) scale(1);
  transition-delay:0s;
}

.mka-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 14px 16px 18px; flex:none;
  background:var(--forest,#1F3D2C); color:var(--cream,#F7F4EC);
}
.mka-head__t{font-family:'Cormorant Garamond',Georgia,serif; font-size:19px; line-height:1.1}
.mka-head__s{font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.72; margin-top:3px}
.mka-head__x{
  width:36px;height:36px;flex:none;border:0;padding:0;background:none;cursor:pointer;
  color:var(--cream,#F7F4EC); display:flex; align-items:center; justify-content:center;
  transition:transform .3s ease;
}
.mka-head__x svg{width:17px;height:17px;flex:none}
.mka-head__x:hover{transform:rotate(90deg)}
.mka-head__x:focus-visible{outline:2px solid var(--stone,#C9A86A); outline-offset:2px}

/* ---------- transcript ---------- */
.mka-log{
  flex:1 1 auto; overflow-y:auto; padding:16px 16px 6px;
  display:flex; flex-direction:column; gap:10px;
  -webkit-overflow-scrolling:touch;
}
.mka-msg{
  max-width:88%; padding:11px 13px; font-size:14px; line-height:1.6;
  animation:mkaIn .32s cubic-bezier(.22,1,.36,1) both;
}
@keyframes mkaIn{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
.mka-msg--bot{
  align-self:flex-start; background:#fff; color:var(--ink,#26301F);
  box-shadow:0 1px 0 rgba(14,28,19,.06), 0 0 0 1px rgba(31,61,44,.07);
}
.mka-msg--me{
  align-self:flex-end; background:var(--forest,#1F3D2C); color:var(--cream,#F7F4EC);
}
.mka-msg a{color:var(--stone-text,#82652F); text-decoration:underline}
.mka-msg--me a{color:var(--stone,#C9A86A)}

/* typing indicator */
.mka-dots{display:inline-flex;gap:4px;align-items:center;height:16px}
.mka-dots i{width:6px;height:6px;border-radius:50%;background:rgba(31,61,44,.35);animation:mkaBounce 1.1s infinite}
.mka-dots i:nth-child(2){animation-delay:.15s}
.mka-dots i:nth-child(3){animation-delay:.3s}
@keyframes mkaBounce{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}

/* product card inside an answer */
.mka-card{
  display:flex; gap:11px; align-items:flex-start;
  margin-top:10px; padding-top:10px; border-top:1px solid rgba(31,61,44,.10);
}
.mka-card img{width:52px;height:52px;object-fit:cover;flex:none;background:#fff}
.mka-card__n{font-family:'Cormorant Garamond',Georgia,serif;font-size:16px;color:var(--forest,#1F3D2C);line-height:1.2}
.mka-card__p{font-size:14px;color:var(--forest,#1F3D2C);margin-top:3px}
.mka-card__p s{opacity:.5;font-size:12.5px;margin-left:5px}
.mka-card__s{font-size:11.5px;color:var(--muted,#60665B);margin-top:2px}
.mka-card__b{
  display:inline-block;margin-top:7px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--forest,#1F3D2C) !important;
  border-bottom:1px solid currentColor;text-decoration:none !important;padding-bottom:2px;
}

/* quick replies */
.mka-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.mka-chip{
  border:1px solid rgba(31,61,44,.22); background:transparent; cursor:pointer;
  font-family:'Jost',sans-serif; font-size:12px; color:var(--forest,#1F3D2C);
  padding:8px 12px; min-height:36px;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.mka-chip:hover{background:var(--forest,#1F3D2C); color:var(--cream,#F7F4EC); border-color:var(--forest,#1F3D2C)}
.mka-chip:focus-visible{outline:2px solid var(--stone-dark,#A9843F); outline-offset:2px}

/* ---------- channel row ---------- */
.mka-chans{
  display:flex; gap:8px; padding:12px 16px; flex:none;
  border-top:1px solid rgba(31,61,44,.10); background:var(--cream-2,#EFE9DB);
}
.mka-chan{
  flex:1 1 0; min-width:0; min-height:44px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  text-decoration:none !important; color:var(--forest,#1F3D2C) !important;
  background:#fff; box-shadow:0 0 0 1px rgba(31,61,44,.08);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, color .25s ease;
}
.mka-chan svg{width:18px;height:18px;flex:none}
.mka-chan span{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase}
.mka-chan:hover{transform:translateY(-3px); box-shadow:0 8px 18px -8px rgba(14,28,19,.4)}
.mka-chan:focus-visible{outline:2px solid var(--stone-dark,#A9843F); outline-offset:2px}
.mka-chan--whatsapp:hover{color:#25D366 !important}
.mka-chan--messenger:hover{color:#0084FF !important}
.mka-chan--instagram:hover{color:#E1306C !important}
.mka-chan--tiktok:hover{color:#000 !important}

/* ---------- composer ---------- */
.mka-form{display:flex; gap:8px; padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px)); flex:none;
  border-top:1px solid rgba(31,61,44,.10); background:var(--cream,#F7F4EC)}
.mka-input{
  flex:1 1 auto; min-width:0; min-height:44px; padding:0 13px;
  border:1px solid rgba(31,61,44,.20); background:#fff; border-radius:0;
  font-family:'Jost',sans-serif; font-size:14px; color:var(--ink,#26301F);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.mka-input:focus{outline:none; border-color:var(--stone-dark,#A9843F); box-shadow:0 0 0 3px rgba(201,168,106,.22)}
.mka-send{
  width:44px;height:44px;flex:none;border:0;padding:0;cursor:pointer;
  background:var(--forest,#1F3D2C); color:var(--cream,#F7F4EC);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease;
}
.mka-send svg{width:18px;height:18px;flex:none}
.mka-send:hover{background:var(--forest-deep,#0E1C13)}
.mka-send:focus-visible{outline:2px solid var(--stone,#C9A86A); outline-offset:2px}

/* ---------- small screens ---------- */
@media (max-width:480px){
  .mka{right:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .mka-panel{width:calc(100vw - 28px); max-height:calc(100vh - 118px)}
  .mka-fab{width:52px;height:52px;padding:0}
}

/* keep clear of the existing back-to-top control */
.muk .muk-top{bottom:88px}
@media (max-width:480px){ .muk .muk-top{bottom:80px} }


/* iOS Safari applies its own control chrome to button/input; the design is square. */
.mka-fab,.mka-head__x,.mka-send,.mka-chip,.mka-input{-webkit-appearance:none;appearance:none}

@media (prefers-reduced-motion: reduce){
  .mka-fab,.mka-fab::after,.mka-panel,.mka-msg,.mka-chan,.mka-dots i{
    animation:none !important; transition-duration:.01ms !important;
  }
  .mka.is-open .mka-panel{transform:none !important}
}