/* Floating widgets — WhatsApp + chatbot (MTB black & gold theme) */

/* ---------- WhatsApp ---------- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:9990;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;color:#06281a;background:#25D366;text-decoration:none;
  box-shadow:0 12px 34px -8px rgba(37,211,102,.55);transition:transform .25s ease}
.wa-float:hover{transform:translateY(-4px) scale(1.05)}
.wa-float__pulse{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(37,211,102,.6);
  animation:wa-pulse 2.2s ease-out infinite;pointer-events:none}
@keyframes wa-pulse{0%{transform:scale(1);opacity:1}100%{transform:scale(1.8);opacity:0}}
.wa-float__tip{position:absolute;right:66px;top:50%;transform:translateY(-50%) translateX(6px);
  background:#171410;color:#F3CC6C;border:1px solid rgba(236,189,97,.35);padding:7px 14px;
  font:500 13px/1 'Rubik',sans-serif;white-space:nowrap;clip-path:polygon(8px 0,100% 0,100% 100%,8px 100%,0 50%);
  opacity:0;pointer-events:none;transition:.25s ease}
.wa-float:hover .wa-float__tip{opacity:1;transform:translateY(-50%) translateX(0)}

/* ---------- Chatbot ---------- */
.cb{position:fixed;right:22px;bottom:96px;z-index:9991;font-family:'Rubik',ui-sans-serif,system-ui,sans-serif}
/* the hidden attribute must win over display:flex below */
.cb__panel[hidden]{display:none}
.cb__bubble{width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;display:grid;place-items:center;
  color:#171205;background:linear-gradient(135deg,#F3CC6C,#C9964A);
  box-shadow:0 12px 34px -8px rgba(236,189,97,.5);transition:transform .25s ease}
.cb__bubble:hover{transform:translateY(-4px) scale(1.05)}
.cb__icon-close{display:none}
.cb.is-open .cb__icon-open{display:none}
.cb.is-open .cb__icon-close{display:block}
.cb__panel{position:absolute;right:0;bottom:70px;width:min(360px,calc(100vw - 32px));height:min(480px,calc(100dvh - 190px));
  display:flex;flex-direction:column;background:#0C0B09;border:1px solid rgba(236,189,97,.28);
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
  box-shadow:0 24px 70px -18px rgba(0,0,0,.85);overflow:hidden;
  transform-origin:bottom right;animation:cb-in .22s ease}
@keyframes cb-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1}}
.cb__head{display:flex;gap:12px;align-items:center;padding:14px 16px;background:#12100C;border-bottom:1px solid rgba(236,189,97,.14)}
.cb__head strong{color:#F4EFE4;font-size:14px;line-height:1.2;display:block}
.cb__status{color:#7FB069;font-size:11.5px}
.cb__log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin}
.cb__msg{max-width:82%;padding:10px 13px;font-size:13.5px;line-height:1.5;border-radius:12px 12px 12px 3px;
  background:#1A1712;color:#EDE7DA;border:1px solid rgba(236,189,97,.14);word-wrap:break-word}
.cb__msg a{color:#ECBD61}
.cb__msg--user{align-self:flex-end;border-radius:12px 12px 3px 12px;color:#171205;border:none;
  background:linear-gradient(135deg,#F3CC6C,#C9964A)}
.cb__typing{color:#8A8377;font-size:12px;font-style:italic}
.cb__chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}
.cb__chips:empty{display:none}
.cb__chip{background:transparent;border:1px solid rgba(236,189,97,.4);color:#F3CC6C;border-radius:99px;
  padding:6px 13px;font:500 12px/1 'Rubik',sans-serif;cursor:pointer;transition:.2s}
.cb__chip:hover{background:rgba(236,189,97,.12)}
.cb__form{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(236,189,97,.14);background:#12100C}
.cb__form input{flex:1;min-width:0;background:#0C0B09;border:1px solid #2A251B;color:#F4EFE4;
  padding:10px 12px;font:400 13px 'Rubik',sans-serif;outline:none;border-radius:8px}
.cb__form input:focus{border-color:#C9964A}
.cb__form button{width:42px;height:42px;border:none;cursor:pointer;flex:0 0 auto;
  background:linear-gradient(135deg,#F3CC6C,#C9964A);color:#171205;border-radius:8px;display:grid;place-items:center}
@media (max-width:640px){
  .wa-float{right:16px;bottom:16px;width:52px;height:52px}
  .cb{right:16px;bottom:82px}
  .cb__bubble{width:52px;height:52px}
}