/* ============================================================
   FLOATING WIDGETS — assistant, back to top, WhatsApp
   One stack in the bottom-right corner. Positions are derived from
   the same size + gap values so the three can never overlap.
   ============================================================ */
:root{
  --fab:        52px;
  --fab-gap:    12px;
  --fab-inset:  20px;
  --fab-2: calc(var(--fab-inset) + var(--fab) + var(--fab-gap));            /* middle */
  --fab-3: calc(var(--fab-inset) + (var(--fab) + var(--fab-gap)) * 2);      /* top    */
}
@media(max-width:520px){
  :root{ --fab:48px; --fab-gap:10px; --fab-inset:14px; }
}

.float-btn{
  position:fixed; right:var(--fab-inset); z-index:var(--z-bar);
  width:var(--fab); height:var(--fab); border-radius:50%;
  display:grid; place-items:center; font-size:1.12rem;
  transition:transform var(--t-fast), background var(--t-fast),
             opacity var(--t), visibility var(--t);
}
.float-btn:hover{ transform:scale(1.07); }

/* WhatsApp — stays at the bottom */
.wa-float{
  bottom:var(--fab-inset);
  width:var(--fab);
  height:var(--fab);
}

/* AI Assistant — middle */
.ab-fab{
  bottom:var(--fab-2);
  background:var(--primary);
  color:#fff;
  box-shadow:0 8px 24px rgba(122,38,58,.34);
}

.ab-fab:hover{
  background:var(--primary-soft);
}

.ab-fab[aria-expanded="true"] i{
  transform:rotate(8deg);
}

/* Back to Top — top */
.to-top{
  bottom:var(--fab-3);
  background:var(--surface);
  color:var(--primary);
  border:1px solid var(--border);
  box-shadow:0 6px 20px rgba(37,33,29,.16);
  opacity:0;
  visibility:hidden;
  transform:scale(.9);
}

.to-top.show{
  opacity:1;
  visibility:visible;
  transform:none;
}

.to-top:hover{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}

.ab-fab:hover{ background:var(--primary-soft); }
.ab-fab[aria-expanded="true"] i{ transform:rotate(8deg); }

/* ---------------- chat panel ---------------- */
.ab-panel{
  position:fixed; right:var(--fab-inset); bottom:var(--fab-3);
  z-index:calc(var(--z-overlay) + 3);
  width:min(370px, calc(100vw - var(--fab-inset) * 2));
  max-height:min(560px, calc(100vh - var(--fab-3) - 20px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:0 18px 48px rgba(37,33,29,.22);
  opacity:0; visibility:hidden; transform:translateY(12px) scale(.98);
  transform-origin:100% 100%;
  transition:opacity var(--t), transform var(--t), visibility var(--t);
}
.ab-panel.open{ opacity:1; visibility:visible; transform:none; }

.ab-head{
  display:flex; align-items:center; gap:10px; padding:13px 15px;
  background:var(--primary); color:#fff; flex-shrink:0;
}
.ab-head b{ display:block; font-family:var(--font-display); font-size:.98rem; }
.ab-head span{ font-size:var(--fs-xs); opacity:.82; }
.ab-head .icon-btn{ margin-left:auto; color:#fff; width:34px; height:34px; }
.ab-head .icon-btn:hover{ background:rgba(255,255,255,.16); }

.ab-log{
  flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px;
  background:var(--background); min-height:120px;
}
.ab-msg{ display:flex; }
.ab-msg.me{ justify-content:flex-end; }
.ab-bubble{
  max-width:85%; padding:9px 13px; border-radius:14px; font-size:.86rem; line-height:1.5;
  background:var(--surface); border:1px solid var(--border-soft); color:var(--text);
}
.ab-msg.me .ab-bubble{
  background:var(--primary); color:#fff; border-color:transparent; border-bottom-right-radius:5px;
}
.ab-msg.bot .ab-bubble{ border-bottom-left-radius:5px; }

.ab-acts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.ab-act{
  font-size:var(--fs-xs); font-weight:600; padding:6px 11px; border-radius:var(--r-pill);
  background:var(--primary-tint); color:var(--primary); border:1px solid transparent;
  transition:background var(--t-fast), color var(--t-fast);
}
.ab-act:hover{ background:var(--primary); color:#fff; }

.ab-typing{ display:flex; gap:4px; align-items:center; padding:12px 14px; }
.ab-typing span{
  width:6px; height:6px; border-radius:50%; background:var(--muted-text);
  animation:abDot 1.1s infinite;
}
.ab-typing span:nth-child(2){ animation-delay:.15s }
.ab-typing span:nth-child(3){ animation-delay:.3s }
@keyframes abDot{ 0%,60%,100%{ opacity:.3; transform:translateY(0) }
                  30%{ opacity:1; transform:translateY(-3px) } }

.ab-chips{
  display:flex; gap:6px; overflow-x:auto; padding:10px 14px 0;
  flex-shrink:0; scrollbar-width:none;
}
.ab-chips::-webkit-scrollbar{ display:none; }
.ab-chip{
  flex:0 0 auto; font-size:var(--fs-xs); padding:7px 12px; border-radius:var(--r-pill);
  border:1px solid var(--border); background:var(--surface); color:var(--text-2);
  white-space:nowrap; transition:all var(--t-fast);
}
.ab-chip:hover{ border-color:var(--primary); color:var(--primary); }

.ab-input{ display:flex; gap:8px; padding:12px 14px; flex-shrink:0; }
.ab-input input{
  flex:1; min-width:0; padding:11px 14px; border-radius:var(--r-pill);
  border:1.5px solid var(--border); background:var(--surface); font-size:.86rem;
}
.ab-input input:focus{ outline:none; border-color:var(--primary); }
.ab-send{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:var(--primary); color:#fff; display:grid; place-items:center;
  transition:background var(--t-fast);
}
.ab-send:hover{ background:var(--primary-soft); }

/* on a phone the panel becomes a sheet rather than a floating card */
@media(max-width:520px){
  .ab-panel{
    right:0; left:0; bottom:0; width:100vw;
    max-height:82vh; border-radius:var(--r-xl) var(--r-xl) 0 0;
    transform:translateY(100%); transform-origin:50% 100%;
  }
  .ab-panel.open{ transform:none; }
}

@media (prefers-reduced-motion:reduce){
  .float-btn,.ab-panel{ transition:opacity .01ms, visibility .01ms; transform:none !important; }
  .ab-typing span{ animation:none; }
}