/* Motorfy marketing site: floating assistant widget, shared by index.html and business.html.
   Reuses the page's own --purple/--lav/etc custom properties (declared in each page's inline
   <style> :root) instead of redefining them - CSS custom properties on :root are visible to
   every stylesheet in the document, not just the one that declared them, so this file only
   needs to exist once and stays in sync with whatever the brand tokens currently are. */

#mfy-chat-root{position:fixed;right:20px;bottom:20px;z-index:200;font-family:var(--font);}
#mfy-chat-toggle{
  width:60px;height:60px;border-radius:50%;background:var(--purple);color:#fff;
  display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;
  box-shadow:0 12px 28px -10px rgba(42,20,80,.5);transition:transform .15s,background-color .15s;
}
#mfy-chat-toggle:hover{background:var(--purple-deep);transform:scale(1.05)}
#mfy-chat-toggle svg{width:26px;height:26px}
#mfy-chat-toggle .mfy-close-ic{display:none}
#mfy-chat-root.is-open #mfy-chat-toggle .mfy-chat-ic{display:none}
#mfy-chat-root.is-open #mfy-chat-toggle .mfy-close-ic{display:block}

#mfy-chat-panel{
  position:absolute;right:0;bottom:74px;width:376px;max-width:calc(100vw - 40px);
  height:min(560px,calc(100vh - 120px));background:#fff;border:1px solid var(--lav-2);
  border-radius:20px;box-shadow:0 24px 60px -20px rgba(42,20,80,.45);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:translateY(12px) scale(.98);pointer-events:none;transition:opacity .18s,transform .18s;
}
#mfy-chat-root.is-open #mfy-chat-panel{opacity:1;transform:none;pointer-events:auto}

.mfy-chat-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--purple);color:#fff;flex:none}
.mfy-chat-head div b{display:block;font-size:15px;font-weight:650;letter-spacing:-.005em}
.mfy-chat-head div span{display:block;font-size:12px;color:rgba(255,255,255,.72);margin-top:1px}
#mfy-chat-close{background:none;border:none;color:#fff;cursor:pointer;padding:4px;display:flex;opacity:.8;flex:none}
#mfy-chat-close:hover{opacity:1}
#mfy-chat-close svg{width:18px;height:18px}

.mfy-chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--lav)}
.mfy-msg{max-width:84%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.45;white-space:pre-wrap}
.mfy-msg.mfy-bot{align-self:flex-start;background:#fff;border:1px solid var(--lav-2);color:var(--text);border-bottom-left-radius:4px}
.mfy-msg.mfy-user{align-self:flex-end;background:var(--purple);color:#fff;border-bottom-right-radius:4px}
.mfy-msg.mfy-error{align-self:flex-start;background:#fff;border:1px solid #F3D3CE;color:#B42318}
.mfy-typing{align-self:flex-start;display:flex;gap:4px;padding:13px 14px;background:#fff;border:1px solid var(--lav-2);border-radius:14px;border-bottom-left-radius:4px}
.mfy-typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.5;animation:mfy-bounce 1s infinite}
.mfy-typing span:nth-child(2){animation-delay:.15s}
.mfy-typing span:nth-child(3){animation-delay:.3s}
@keyframes mfy-bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

.mfy-chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:#fff;flex:none}
.mfy-chat-form input{flex:1;min-width:0;border:1.5px solid var(--lav-2);border-radius:12px;padding:10px 14px;font:inherit;font-size:14px;color:var(--text);background:var(--white)}
.mfy-chat-form input:focus{outline:none;border-color:var(--purple)}
.mfy-chat-form button{width:40px;height:40px;flex:none;border-radius:10px;background:var(--purple);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .15s}
.mfy-chat-form button:hover{background:var(--purple-deep)}
.mfy-chat-form button:disabled{opacity:.5;cursor:default}
.mfy-chat-form button svg{width:18px;height:18px}

@media (prefers-reduced-motion:reduce){
  #mfy-chat-toggle,#mfy-chat-panel,.mfy-typing span{transition:none;animation:none}
}
@media (max-width:480px){
  #mfy-chat-root{right:14px;bottom:14px}
  #mfy-chat-panel{width:calc(100vw - 28px);height:min(72vh,560px);bottom:70px}
}