/* ============================================================
   VALERO ASSISTANT — Guided support chat widget
   Rule-based flow (no AI/LLM call needed). Recoloured to brand
   tokens defined in style.css (var(--olive), var(--cream), etc.)
============================================================ */

#ap-bubble{position:fixed;bottom:26px;right:26px;z-index:10000}
#ap-toggle{
  width:62px;height:62px;border-radius:50%;background:var(--olive);
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 18px 60px rgba(89,84,52,.28);transition:transform .2s;outline:none;position:relative;
}
#ap-toggle:hover{transform:scale(1.08)}
#ap-toggle:active{transform:scale(.94)}
#ap-toggle svg{width:28px;height:28px;fill:var(--cream)}
.ic-close{display:none}
.ndot{
  position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;
  background:#C55A3A;border:2px solid var(--cream);font-size:.6rem;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;
}

#ap-win{
  position:fixed;bottom:100px;right:26px;width:400px;max-height:640px;
  background:var(--cream);border-radius:22px;box-shadow:0 18px 60px rgba(26,26,26,.22);
  display:flex;flex-direction:column;overflow:hidden;z-index:9999;
  transform:scale(.88) translateY(24px);opacity:0;pointer-events:none;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),opacity .2s;
  font-family:var(--font-body);
}
#ap-win.open{transform:scale(1) translateY(0);opacity:1;pointer-events:all}

.ap-hdr{background:var(--olive);padding:14px 16px;display:flex;align-items:center;gap:11px;flex-shrink:0}
.ap-ava{
  width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;position:relative;
}
.sdot{position:absolute;bottom:1px;right:1px;width:11px;height:11px;border-radius:50%;background:#4ade80;border:2px solid rgba(255,255,255,.5)}
.ap-hdr-txt{flex:1;min-width:0}
.ap-hdr-txt h3{color:#fff;font-size:.95rem;font-weight:700;margin:0}
.ap-hdr-txt p{color:rgba(255,255,255,.75);font-size:.72rem;margin-top:1px}
.ap-hbtn{
  background:rgba(255,255,255,.16);border:none;width:30px;height:30px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:.9rem;margin-left:4px;transition:background .15s;
}
.ap-hbtn:hover{background:rgba(255,255,255,.3)}

.ap-progress{background:rgba(255,255,255,.14);height:4px;flex-shrink:0}
.ap-prog-fill{height:100%;background:var(--sand);transition:width .5s ease;width:0%}

.ap-step-lbl{
  background:var(--cream);border-bottom:1px solid var(--line);padding:7px 16px;
  font-size:.72rem;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.sl-badge{background:var(--olive);color:#fff;padding:2px 9px;border-radius:999px;font-size:.68rem;font-weight:700}

.ap-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--cream-pale)}
.ap-msgs::-webkit-scrollbar{width:4px}
.ap-msgs::-webkit-scrollbar-thumb{background:var(--sand);border-radius:4px}

.mrow{display:flex;gap:8px;animation:apFu .32s cubic-bezier(.21,.91,.36,1.05)}
.mrow.user{flex-direction:row-reverse}
@keyframes apFu{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

.typing-bub{display:flex;align-items:center;gap:4px;padding:13px 16px}
.tdot{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:tBounce 1.1s infinite ease-in-out}
.tdot:nth-child(2){animation-delay:.15s}
.tdot:nth-child(3){animation-delay:.3s}
@keyframes tBounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.mava{width:28px;height:28px;border-radius:50%;flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;font-size:.82rem}
.mava.bot{background:var(--olive);color:#fff}
.mava.user{background:#EFEAD8;color:var(--olive);font-weight:700;font-size:.65rem}
.mgrp{display:flex;flex-direction:column;gap:3px;max-width:82%}
.mrow.user .mgrp{align-items:flex-end}
.mbub{padding:10px 14px;border-radius:14px;font-size:.858rem;line-height:1.55;word-break:break-word}
.mbub.bot{background:var(--cream);color:var(--ink);border-bottom-left-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.mbub.user{background:var(--olive);color:#fff;border-bottom-right-radius:4px}
.mmeta{font-size:.65rem;color:var(--muted);padding:0 4px}

.opt-row{display:flex;gap:7px;flex-wrap:wrap}
.ap-opts{padding:8px 14px 12px;display:flex;flex-direction:column;gap:7px;flex-shrink:0;background:var(--cream);border-top:1px solid var(--line)}
.opt{
  padding:8px 14px;border-radius:10px;border:1.5px solid var(--line);background:var(--cream);color:var(--ink);
  font-size:.82rem;font-weight:600;cursor:pointer;transition:all .18s;display:flex;align-items:center;gap:6px;
  text-align:left;font-family:inherit;
}
.opt:hover{border-color:var(--olive);color:var(--olive);background:#F5F2E8;transform:translateY(-1px)}
.opt:active{transform:scale(.96);background:#EFEAD8}
.opt.full{width:100%}
.opt-icon{font-size:1rem}

.ap-inp-wrap{background:var(--cream);border-top:1px solid var(--line);padding:10px 12px;display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.ap-inp-row{display:flex;align-items:flex-end;gap:8px}
#ap-inp{
  flex:1;border:1.5px solid var(--line);border-radius:13px;padding:9px 13px;font-size:.86rem;
  color:var(--ink);background:var(--cream-pale);outline:none;resize:none;max-height:80px;
  font-family:inherit;transition:border .2s;line-height:1.4;
}
#ap-inp:focus{border-color:var(--olive);background:var(--cream)}
#ap-inp::placeholder{color:var(--muted)}
.ap-send{
  width:40px;height:40px;flex-shrink:0;border-radius:12px;background:var(--olive);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .15s,opacity .15s;
}
.ap-send:hover{transform:scale(1.08)}
.ap-send:active{transform:scale(.9)}
.ap-send:disabled{opacity:.4;cursor:not-allowed;transform:none}
.ap-send svg{width:17px;height:17px;fill:#fff}

.file-zone{
  border:2px dashed var(--line);border-radius:12px;padding:14px;text-align:center;cursor:pointer;
  transition:border .2s,background .2s;background:var(--cream-pale);margin:8px 14px;
}
.file-zone:hover{border-color:var(--olive);background:#F5F2E8}
.file-zone p{font-size:.78rem;color:var(--muted)}
.file-zone strong{color:var(--olive)}
#file-inp{display:none}
.file-preview{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}
.fp-item{position:relative;width:56px;height:56px;border-radius:8px;overflow:hidden;border:1.5px solid var(--line)}
.fp-item img{width:100%;height:100%;object-fit:cover}
.fp-del{
  position:absolute;top:2px;right:2px;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;
  width:16px;height:16px;cursor:pointer;font-size:.6rem;display:flex;align-items:center;justify-content:center;
}

.ap-footer{text-align:center;font-size:.66rem;color:var(--muted);padding:7px;background:var(--cream);border-top:1px solid var(--line);flex-shrink:0}
.ap-footer a{color:var(--olive);text-decoration:none;font-weight:600}

.success-wrap{text-align:center;padding:20px 16px}
.success-icon{font-size:3rem;margin-bottom:10px}
.success-wrap h3{color:#1a7a4a;font-size:1.1rem;font-weight:700;margin:0}
.success-wrap p{color:var(--muted);font-size:.82rem;margin-top:6px;line-height:1.6}
.ticket-no{
  background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:8px 16px;margin:12px auto;
  display:inline-block;font-weight:700;color:#1a7a4a;font-size:.9rem;
}

@media(max-width:440px){
  #ap-win{right:10px;left:10px;width:auto;bottom:92px}
  #ap-bubble{right:14px;bottom:14px}
}