/* Chat Atendimento Pro — Frontend CSS v1.1.0 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

#cap-widget,#cap-widget *{box-sizing:border-box;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif}

/* ── Float button ── */
.cap-float-btn{
  position:fixed;bottom:24px;right:24px;z-index:2147483640;
  width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 24px rgba(34,197,94,.45);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;
  animation:cap-fadescale .5s cubic-bezier(.34,1.56,.64,1) both;
}
.cap-float-btn:hover{transform:scale(1.1);box-shadow:0 10px 32px rgba(34,197,94,.55)}
.cap-float-btn:active{transform:scale(.94)}
@keyframes cap-fadescale{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}

.cap-status-indicator{
  position:absolute;top:1px;right:1px;
  width:15px;height:15px;border-radius:50%;
  border:2.5px solid #fff;background:#94a3b8;
  transition:background .3s;
}
.cap-status-indicator.online{background:#22c55e;animation:cap-pulse 2s infinite}
@keyframes cap-pulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}60%{box-shadow:0 0 0 7px rgba(34,197,94,0)}}

.cap-unread-badge{
  position:absolute;top:-4px;left:-4px;
  background:#ef4444;color:#fff;
  width:20px;height:20px;border-radius:50%;
  font-size:11px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;animation:cap-fadescale .3s ease;
}

/* Float label pill */
.cap-float-label{
  position:fixed;bottom:30px;right:92px;z-index:2147483639;
  background:#fff;border:1.5px solid #bbf7d0;
  border-radius:100px;padding:6px 14px 6px 10px;
  font-size:13px;font-weight:500;color:#16a34a;
  box-shadow:0 4px 16px rgba(0,0,0,.1);
  display:flex;align-items:center;gap:6px;
  animation:cap-fadescale .5s .6s cubic-bezier(.34,1.56,.64,1) both;
  white-space:nowrap;pointer-events:none;
}
.cap-float-label-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;flex-shrink:0;animation:cap-pulse 1.5s infinite}

/* ── Popup ── */
.cap-popup{
  position:fixed;bottom:96px;right:24px;z-index:2147483641;
  width:360px;max-width:calc(100vw - 32px);
  background:#fff;border-radius:20px;
  box-shadow:0 24px 64px rgba(0,0,0,.18),0 4px 16px rgba(0,0,0,.08);
  overflow:hidden;
  animation:cap-popupin .3s cubic-bezier(.34,1.56,.64,1) both;
  max-height:calc(100vh - 120px);
  flex-direction:column;
}
@keyframes cap-popupin{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ── Header ── */
.cap-popup-header{
  padding:16px 18px;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
.cap-popup-header-left{display:flex;align-items:center;gap:12px}
.cap-agent-avatar{
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.cap-popup-title{font-size:15px;font-weight:600;line-height:1.2}
.cap-popup-subtitle{font-size:12px;opacity:.9;margin-top:3px;display:flex;align-items:center;gap:5px}
.cap-online-dot{width:7px;height:7px;border-radius:50%;background:#fff;display:inline-block;flex-shrink:0;animation:cap-pulse 1.5s infinite}
.cap-popup-close{
  background:rgba(255,255,255,.22);border:none;
  width:30px;height:30px;border-radius:50%;cursor:pointer;color:#fff;
  display:flex;align-items:center;justify-content:center;transition:background .15s;
}
.cap-popup-close:hover{background:rgba(255,255,255,.38)}

/* ── Body ── */
.cap-popup-body{
  flex:1;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:10px;min-height:180px;
}
.cap-popup-body::-webkit-scrollbar{width:3px}
.cap-popup-body::-webkit-scrollbar-track{background:transparent}
.cap-popup-body::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:3px}

/* ── Pre-chat ── */
.cap-prechat{display:flex;flex-direction:column;gap:10px;align-items:center;padding-top:4px}
.cap-prechat-icon{font-size:38px}
.cap-prechat-msg{font-size:13px;color:#64748b;text-align:center;margin:0}
.cap-form-field{width:100%}
.cap-form-field input,.cap-form-field select,.cap-form-field textarea{
  width:100%;padding:10px 14px;
  border:1.5px solid #e2e8f0;border-radius:10px;
  font-size:14px;outline:none;transition:border-color .15s;
  font-family:inherit;background:#f8fafc;color:#1e293b;
}
.cap-form-field input:focus,.cap-form-field select:focus,.cap-form-field textarea:focus{border-color:#22c55e;background:#fff}
.cap-form-field textarea{resize:vertical}
.cap-popup-btn{
  width:100%;padding:12px;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;border:none;border-radius:12px;
  font-size:14px;font-weight:600;cursor:pointer;transition:opacity .15s;
}
.cap-popup-btn:hover{opacity:.9}
.cap-popup-btn:disabled{opacity:.5;cursor:not-allowed}

/* ── Messages ── */
.cap-messages{display:flex;flex-direction:column;gap:8px}
.cap-bubble-wrap{display:flex;gap:8px;max-width:88%}
.cap-bubble-wrap.visitor{align-self:flex-end;flex-direction:row-reverse}
.cap-bubble-wrap.operator,.cap-bubble-wrap.bot{align-self:flex-start}
.cap-bubble-avatar{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:13px;align-self:flex-end;
}
.cap-bubble-wrap.visitor  .cap-bubble-avatar{background:#22c55e;color:#fff}
.cap-bubble-wrap.operator .cap-bubble-avatar{background:#6366f1;color:#fff}
.cap-bubble-wrap.bot      .cap-bubble-avatar{background:#f59e0b;color:#fff}
.cap-bubble{
  padding:9px 13px;border-radius:14px;
  font-size:13.5px;line-height:1.55;word-break:break-word;
}
.cap-bubble-wrap.visitor  .cap-bubble{background:#dcfce7;color:#1e293b;border-bottom-right-radius:3px}
.cap-bubble-wrap.operator .cap-bubble{background:#f1f5f9;color:#1e293b;border-bottom-left-radius:3px}
.cap-bubble-wrap.bot      .cap-bubble{background:#fef9c3;color:#1e293b;border-bottom-left-radius:3px}
.cap-bubble-time{font-size:10px;color:#94a3b8;margin-top:3px;text-align:right}

/* Chat image */
.cap-chat-img{max-width:200px;max-height:180px;border-radius:10px;display:block;cursor:pointer;object-fit:cover;margin-top:2px}

/* ── Typing ── */
.cap-typing{display:flex;gap:4px;padding:4px 0;align-self:flex-start}
.cap-typing span{width:8px;height:8px;border-radius:50%;background:#cbd5e1;animation:cap-bounce .9s infinite}
.cap-typing span:nth-child(2){animation-delay:.2s}
.cap-typing span:nth-child(3){animation-delay:.4s}
@keyframes cap-bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}

/* ── Offline ── */
.cap-offline-msg{font-size:13px;color:#64748b;text-align:center;margin:0 0 4px}
.cap-offline-success{text-align:center;font-size:13px;font-weight:600;color:#16a34a;padding:12px;background:#dcfce7;border-radius:10px}

/* ── Rating ── */
.cap-rating-panel{text-align:center;padding:8px 0}
.cap-rating-title{font-size:14px;font-weight:600;margin-bottom:10px;color:#1e293b}
.cap-stars{display:flex;justify-content:center;gap:8px}
.cap-star{font-size:30px;cursor:pointer;color:#e2e8f0;transition:color .12s,transform .12s;line-height:1}
.cap-star:hover,.cap-star.active{color:#f59e0b;transform:scale(1.2)}

/* ── WooCommerce badge ── */
.cap-wc-badge{
  background:#dbeafe;color:#1e40af;
  border-radius:10px;padding:10px 14px;
  font-size:12px;display:flex;flex-direction:column;gap:3px;align-self:flex-start;
}
.cap-wc-badge strong{font-weight:600}

/* ── Footer ── */
.cap-popup-footer{
  padding:10px 12px;border-top:1px solid #f1f5f9;
  display:flex;align-items:flex-end;gap:6px;
  background:#fff;flex-shrink:0;
}
.cap-msg-input{
  flex:1;border:1.5px solid #e2e8f0;border-radius:12px;
  padding:9px 12px;font-size:13.5px;outline:none;resize:none;
  font-family:inherit;line-height:1.5;
  min-height:40px;max-height:100px;
  transition:border-color .15s;background:#f8fafc;color:#1e293b;
}
.cap-msg-input:focus{border-color:#22c55e;background:#fff}
.cap-send-btn,.cap-attach-btn{
  width:38px;height:38px;border-radius:10px;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s;
}
.cap-send-btn{background:#22c55e;color:#fff}
.cap-send-btn:hover{background:#16a34a}
.cap-attach-btn{background:#f1f5f9;color:#64748b;font-size:16px}
.cap-attach-btn:hover{background:#e2e8f0}
.cap-wa-btn{
  width:38px;height:38px;border-radius:10px;
  background:#25d366;color:#fff;text-decoration:none;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s;
}
.cap-wa-btn:hover{background:#128c7e}

/* ── Powered ── */
.cap-powered{text-align:center;font-size:10px;color:#94a3b8;padding:6px 0 8px;flex-shrink:0;background:#fff}
.cap-powered strong{color:#64748b}

/* ── Mobile fullscreen ── */
@media(max-width:500px){
  .cap-popup{
    position:fixed;inset:0;bottom:0;right:0;
    width:100%;max-width:100%;height:100%;
    max-height:100%;border-radius:0;z-index:2147483645;
  }
  .cap-float-btn{bottom:16px;right:16px}
  .cap-float-label{display:none!important}
}