/* ============================================================
   Magical Pest Control — Widgets
   Chatbot · Cookie consent · Back-to-top · Toasts
   ============================================================ */

/* ---------- Chatbot launcher ---------- */
.chat-launcher {
  position: fixed; right: 22px; bottom: 22px; z-index: 480;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--grad-cta); color: #fff; display: grid; place-items: center;
  box-shadow: var(--shadow-glow); transition: transform .3s var(--ease), box-shadow .3s;
}
.chat-launcher:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 18px 50px rgba(225,29,42,.5); }
.chat-launcher .mpc-icon { width: 30px; height: 30px; }
.chat-launcher .close-ico { display: none; }
.chat-launcher.open .open-ico { display: none; }
.chat-launcher.open .close-ico { display: block; }
.chat-launcher::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--violet); opacity: .6; animation: ping 2.2s var(--ease) infinite;
}
@keyframes ping { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(1.4);opacity:0} }
.chat-badge {
  position: absolute; top: -2px; right: -2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--coral); color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center;
  border: 2px solid #fff;
}

/* ---------- Chat window ---------- */
.chat-window {
  position: fixed; right: 22px; bottom: 98px; z-index: 481;
  width: min(390px, calc(100vw - 32px)); height: min(620px, calc(100vh - 130px));
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(20px) scale(.98); transform-origin: bottom right;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  border: 1px solid var(--line);
}
.chat-window.open { opacity: 1; visibility: visible; transform: none; }
.chat-header { background: var(--grad-cta); color: #fff; padding: 1.1rem 1.2rem; display: flex; align-items: center; gap: .8rem; position: relative; }
.chat-header .bot-ava { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; flex:0 0 auto; }
.chat-header .bot-ava .mpc-icon { width: 26px; height: 26px; }
.chat-header h4 { color: #fff; font-size: 1.05rem; margin: 0; }
.chat-header .status { font-size: .8rem; color: rgba(255,255,255,.85); display: flex; align-items: center; gap: .4rem; }
.chat-header .dot { width: 8px; height: 8px; border-radius: 50%; background: #6ee7b7; box-shadow: 0 0 0 0 rgba(110,231,183,.7); animation: live 2s infinite; }
@keyframes live { 0%{box-shadow:0 0 0 0 rgba(110,231,183,.6)} 70%{box-shadow:0 0 0 8px rgba(110,231,183,0)} 100%{box-shadow:0 0 0 0 rgba(110,231,183,0)} }
.chat-min { margin-left: auto; color: #fff; opacity:.85; width:32px; height:32px; border-radius:8px; display:grid; place-items:center; }
.chat-min:hover { opacity:1; background: rgba(255,255,255,.15); }

.chat-body { flex: 1; overflow-y: auto; padding: 1.1rem; background: var(--bg-soft); display: flex; flex-direction: column; gap: .8rem; }
.msg { max-width: 84%; padding: .75rem 1rem; border-radius: 16px; font-size: .94rem; line-height: 1.5; animation: msgIn .3s var(--ease); }
@keyframes msgIn { from{opacity:0; transform: translateY(8px)} to{opacity:1;transform:none} }
.msg.bot { background: #fff; color: var(--slate); border: 1px solid var(--line); border-bottom-left-radius: 5px; align-self: flex-start; box-shadow: var(--shadow-sm); }
.msg.user { background: var(--grad-cta); color: #fff; border-bottom-right-radius: 5px; align-self: flex-end; }
.msg.bot a { color: var(--violet-600); font-weight:600; text-decoration: underline; }
.msg b { color: var(--ink); }
.msg.user b { color:#fff; }
.chat-typing { display: flex; gap: 4px; padding: .8rem 1rem; }
.chat-typing span { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); opacity:.5; animation: typing 1.2s infinite; }
.chat-typing span:nth-child(2){animation-delay:.2s} .chat-typing span:nth-child(3){animation-delay:.4s}
@keyframes typing { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-5px);opacity:1} }

/* quick reply chips */
.chat-quick { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 1.1rem .4rem; }
.quick-chip { font-size: .85rem; font-weight: 600; color: var(--violet-700); background: #fff; border: 1px solid var(--violet-50); padding: .45rem .85rem; border-radius: var(--radius-pill); transition: background .2s, transform .2s; box-shadow: var(--shadow-sm); }
.quick-chip:hover { background: var(--violet-50); transform: translateY(-2px); }

.chat-footer { padding: .8rem 1rem; border-top: 1px solid var(--line); background:#fff; }
.chat-input-row { display: flex; gap: .5rem; align-items: flex-end; }
.chat-input { flex: 1; border: 1.5px solid var(--line); border-radius: 14px; padding: .65rem .9rem; font-family: inherit; font-size: .95rem; resize: none; max-height: 90px; outline: none; transition: border-color .2s; }
.chat-input:focus { border-color: var(--violet); }
.chat-send { width: 44px; height: 44px; border-radius: 12px; background: var(--grad-cta); color: #fff; display: grid; place-items: center; flex:0 0 auto; transition: transform .2s; }
.chat-send:hover { transform: translateY(-2px); }
.chat-send:disabled { opacity: .5; transform: none; cursor: not-allowed; }
.chat-disclaimer { font-size: .72rem; color: var(--muted); text-align: center; margin-top: .5rem; }
.chat-disclaimer a { color: var(--muted); text-decoration: underline; }

/* lead capture mini-form inside chat */
.chat-leadform { background:#fff; border:1px solid var(--line); border-radius:14px; padding:.9rem; box-shadow:var(--shadow-sm); }
.chat-leadform .field { margin-bottom:.6rem; }
.chat-leadform input { width:100%; padding:.6rem .8rem; border:1.5px solid var(--line); border-radius:10px; font-family:inherit; font-size:.9rem; }
.chat-leadform input:focus{ outline:none; border-color:var(--violet); }

/* ---------- Cookie consent ---------- */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 470;
  max-width: 480px; background: var(--glass-strong); backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 1.4rem; transform: translateY(140%); transition: transform .45s var(--ease); opacity:0;
}
.cookie-banner.show { transform: none; opacity:1; }
.cookie-banner h4 { font-size: 1.1rem; margin-bottom: .5rem; display:flex; align-items:center; gap:.5rem; }
.cookie-banner h4 .mpc-icon { color: var(--violet); }
.cookie-banner p { font-size: .88rem; color: var(--slate); margin-bottom: 1rem; }
.cookie-banner p a { color: var(--violet-600); text-decoration: underline; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.cookie-actions .btn { flex: 1 1 auto; }
.cookie-actions .btn-sm { padding:.6rem 1rem; }

/* preferences modal */
.cookie-modal { position: fixed; inset: 0; z-index: 600; display:none; align-items:center; justify-content:center; padding:1rem; background: rgba(15,23,42,.5); backdrop-filter: blur(6px); }
.cookie-modal.open { display:flex; }
.cookie-modal-panel { background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width:min(560px,100%); max-height: 88vh; overflow-y:auto; }
.cookie-modal-head { padding:1.3rem 1.5rem; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.cookie-modal-head h3 { margin:0; }
.cookie-modal-body { padding: 1.2rem 1.5rem; }
.cookie-cat { border:1px solid var(--line); border-radius: var(--radius); padding:1.1rem; margin-bottom:.9rem; }
.cookie-cat-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.4rem; }
.cookie-cat-head strong { font-family:var(--font-head); color:var(--ink); }
.cookie-cat p { font-size:.85rem; color:var(--muted); margin:0; }
.cookie-modal-foot { padding:1.1rem 1.5rem; border-top:1px solid var(--line); display:flex; gap:.6rem; justify-content:flex-end; flex-wrap:wrap; }

/* toggle switch */
.switch { position: relative; width: 46px; height: 26px; flex:0 0 auto; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; inset:0; background:#cbd5e1; border-radius:999px; transition:.3s; cursor:pointer; }
.slider::before { content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.3s; box-shadow: var(--shadow-sm); }
.switch input:checked + .slider { background: var(--grad-cta); }
.switch input:checked + .slider::before { transform: translateX(20px); }
.switch input:disabled + .slider { background: var(--teal); opacity:.7; cursor:not-allowed; }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; left: 22px; bottom: 22px; z-index: 460; width: 46px; height: 46px; border-radius: 50%;
  background: var(--glass-strong); backdrop-filter: blur(10px); border: 1px solid var(--glass-border);
  color: var(--violet-700); display: grid; place-items: center; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s, transform .3s, visibility .3s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-3px); color: var(--violet-700); }
.to-top .mpc-icon { transform: rotate(-90deg); }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 700; display:flex; flex-direction:column; gap:.6rem; width:min(380px,calc(100vw - 24px)); }
.toast { background:#fff; border:1px solid var(--line); border-left:4px solid var(--violet); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding:.9rem 1.1rem; display:flex; gap:.7rem; align-items:flex-start; animation: msgIn .3s var(--ease); }
.toast.ok { border-left-color: var(--green); }
.toast.err { border-left-color: var(--coral-600); }
.toast .mpc-icon { flex:0 0 auto; margin-top:2px; }
.toast.ok .mpc-icon { color: var(--green); }
.toast strong { display:block; color:var(--ink); font-size:.95rem; font-family:var(--font-head); }
.toast span { font-size:.85rem; color:var(--muted); }