/* Nova Clean Bot — Stylesheet v1.0.0 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* ── Launcher Button ─────────────────────────────────────────── */
#ncb-launcher{
  position:fixed;bottom:24px;right:24px;z-index:99999;
  width:62px;height:62px;border-radius:50%;
  background:linear-gradient(135deg,#0077b6,#00b4d8);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(0,180,216,.45);
  transition:transform .2s,box-shadow .2s;
}
#ncb-launcher:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(0,180,216,.6);}
#ncb-launcher svg{width:28px;height:28px;fill:white;}

/* Badge */
#ncb-badge{
  position:absolute;top:-2px;right:-2px;
  width:18px;height:18px;border-radius:50%;
  background:#ef4444;color:white;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  font-family:sans-serif;border:2px solid white;
  animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

/* ── Chat Window ─────────────────────────────────────────────── */
#ncb-window{
  position:fixed;bottom:100px;right:24px;z-index:99998;
  width:385px;height:610px;max-height:82vh;
  background:#ffffff;border-radius:22px;
  border:1px solid rgba(0,0,0,.1);
  box-shadow:0 10px 48px rgba(0,0,0,.18);
  display:flex;flex-direction:column;overflow:hidden;
  transform-origin:bottom right;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s;
}
#ncb-window.ncb-hidden{
  transform:scale(.55) translateY(24px);
  opacity:0;pointer-events:none;
}

/* ── Header ──────────────────────────────────────────────────── */
.ncb-header{
  background:linear-gradient(135deg,#0a2540 0%,#0077b6 100%);
  padding:14px 16px;display:flex;align-items:center;gap:10px;flex-shrink:0;
}
.ncb-avatar{
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.ncb-header-info{flex:1;}
.ncb-header-info h3{color:#fff;font-size:15px;font-weight:600;font-family:sans-serif;line-height:1.2;}
.ncb-header-info p{color:rgba(255,255,255,.65);font-size:11px;font-family:sans-serif;margin-top:2px;}
.ncb-online{display:inline-block;width:7px;height:7px;border-radius:50%;background:#4ade80;margin-right:4px;}
.ncb-close-btn{
  background:none;border:none;color:rgba(255,255,255,.75);
  cursor:pointer;font-size:20px;padding:2px 7px;border-radius:6px;line-height:1;
}
.ncb-close-btn:hover{background:rgba(255,255,255,.15);}

/* ── Step Progress ───────────────────────────────────────────── */
.ncb-steps{
  display:flex;gap:4px;padding:9px 16px;flex-shrink:0;
  background:#f8fafc;border-bottom:1px solid #f1f5f9;
}
.ncb-step{flex:1;height:3px;border-radius:3px;background:#e2e8f0;transition:background .35s;}
.ncb-step.active{background:#0077b6;}
.ncb-step.done{background:#00b4d8;}

/* ── Messages Area ───────────────────────────────────────────── */
.ncb-messages{
  flex:1;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:10px;
  scroll-behavior:smooth;
}
.ncb-messages::-webkit-scrollbar{width:4px;}
.ncb-messages::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px;}

/* ── Message Bubbles ─────────────────────────────────────────── */
.ncb-msg{display:flex;gap:8px;animation:ncbFadeIn .28s ease;}
@keyframes ncbFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.ncb-msg.user{flex-direction:row-reverse;}
.ncb-msg-av{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:13px;
}
.ncb-msg.bot .ncb-msg-av{background:linear-gradient(135deg,#0077b6,#00b4d8);color:#fff;}
.ncb-msg.user .ncb-msg-av{background:#e2e8f0;color:#475569;}
.ncb-bubble{
  max-width:80%;padding:10px 13px;border-radius:16px;
  font-size:13.5px;line-height:1.55;font-family:sans-serif;
}
.ncb-msg.bot .ncb-bubble{
  background:#f0f9ff;color:#0a2540;
  border-bottom-left-radius:4px;border:1px solid #e0f2fe;
}
.ncb-msg.user .ncb-bubble{
  background:linear-gradient(135deg,#0077b6,#00b4d8);
  color:#fff;border-bottom-right-radius:4px;
}

/* ── Quick Reply Buttons ─────────────────────────────────────── */
.ncb-qr{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.ncb-qr-btn{
  background:#fff;border:1.5px solid #0077b6;color:#0077b6;
  padding:6px 13px;border-radius:20px;font-size:12px;
  cursor:pointer;font-family:sans-serif;transition:all .15s;
  white-space:nowrap;
}
.ncb-qr-btn:hover{background:#0077b6;color:#fff;}
.ncb-qr-btn.primary{background:#0077b6;color:#fff;}
.ncb-qr-btn.full{width:100%;text-align:center;padding:9px;}

/* ── Service Grid ────────────────────────────────────────────── */
.ncb-svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px;}
.ncb-svc-card{
  background:#fff;border:1.5px solid #e0f2fe;border-radius:10px;
  padding:8px 10px;cursor:pointer;transition:all .15s;font-family:sans-serif;
}
.ncb-svc-card:hover{border-color:#0077b6;background:#f0f9ff;}
.ncb-svc-card.sel{border-color:#0077b6;background:#0077b6;color:#fff;}
.ncb-svc-name{font-size:12px;font-weight:600;}
.ncb-svc-price{font-size:11px;color:#64748b;margin-top:2px;}
.ncb-svc-card.sel .ncb-svc-price{color:rgba(255,255,255,.8);}

/* ── Summary Card ────────────────────────────────────────────── */
.ncb-summary{
  background:#f0f9ff;border:1px solid #bae6fd;border-radius:10px;
  padding:10px 13px;margin-top:8px;font-family:sans-serif;font-size:13px;
}
.ncb-sum-row{display:flex;justify-content:space-between;padding:3px 0;color:#334155;}
.ncb-sum-total{
  border-top:1px dashed #94a3b8;margin-top:6px;padding-top:6px;
  font-weight:700;color:#0a2540;font-size:14px;
}

/* ── Form Elements ───────────────────────────────────────────── */
.ncb-label{font-size:12px;color:#64748b;margin-top:8px;display:block;font-family:sans-serif;}
.ncb-input{
  width:100%;padding:8px 10px;border:1.5px solid #e2e8f0;border-radius:8px;
  font-size:13px;font-family:sans-serif;color:#1e293b;outline:none;
  margin-top:4px;background:#fff;
  transition:border-color .2s;
}
.ncb-input:focus{border-color:#0077b6;}
.ncb-input-row{display:flex;gap:6px;}
.ncb-input-row .ncb-input{flex:1;}

/* ── Payment ─────────────────────────────────────────────────── */
.ncb-pay-btn{
  width:100%;margin-top:10px;padding:12px;border:none;border-radius:10px;
  background:linear-gradient(135deg,#0077b6,#00b4d8);
  color:#fff;font-size:14px;font-weight:600;cursor:pointer;
  font-family:sans-serif;display:flex;align-items:center;justify-content:center;gap:7px;
  transition:opacity .15s;
}
.ncb-pay-btn:hover{opacity:.91;}
.ncb-pay-btn:disabled{opacity:.55;cursor:not-allowed;}
.ncb-pay-alt{font-size:11px;color:#94a3b8;text-align:center;margin-top:7px;font-family:sans-serif;}
.ncb-pay-alt span{color:#0077b6;}

/* Stripe card element */
#ncb-card-element{
  padding:10px 11px;border:1.5px solid #e2e8f0;border-radius:8px;
  background:#fff;margin-top:8px;transition:border-color .2s;
}
#ncb-card-element.StripeElement--focus{border-color:#0077b6;}
#ncb-card-errors{color:#ef4444;font-size:12px;font-family:sans-serif;margin-top:6px;min-height:16px;}

/* ── Typing Indicator ────────────────────────────────────────── */
.ncb-typing{
  display:flex;gap:4px;padding:10px 13px;
  background:#f0f9ff;border-radius:16px;border-bottom-left-radius:4px;
  width:fit-content;border:1px solid #e0f2fe;
}
.ncb-typing span{
  width:7px;height:7px;border-radius:50%;background:#0077b6;
  animation:ncbBounce 1.1s infinite;
}
.ncb-typing span:nth-child(2){animation-delay:.18s;}
.ncb-typing span:nth-child(3){animation-delay:.36s;}
@keyframes ncbBounce{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-6px);opacity:1}}

/* ── Confirmation ────────────────────────────────────────────── */
.ncb-conf-icon{font-size:38px;text-align:center;display:block;margin:8px 0 4px;}
.ncb-conf-ref{text-align:center;font-size:19px;font-weight:700;color:#0a2540;font-family:sans-serif;}
.ncb-conf-sub{text-align:center;font-size:12px;color:#64748b;font-family:sans-serif;margin-top:2px;}
.ncb-conf-notify{
  background:#f0fdf4;border:1px solid #bbf7d0;border-radius:9px;
  padding:9px 12px;font-size:12px;color:#166534;font-family:sans-serif;
  margin-top:9px;line-height:1.7;
}

/* ── Input Area ──────────────────────────────────────────────── */
.ncb-input-area{
  border-top:1px solid #e2e8f0;padding:10px 12px;
  display:flex;gap:8px;flex-shrink:0;background:#fff;
}
#ncb-text-input{
  flex:1;border:1.5px solid #e2e8f0;border-radius:20px;
  padding:8px 14px;font-size:13px;font-family:sans-serif;outline:none;resize:none;
  max-height:80px;
}
#ncb-text-input:focus{border-color:#0077b6;}
#ncb-send-btn{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,#0077b6,#00b4d8);
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
#ncb-send-btn svg{width:16px;height:16px;fill:white;}

/* ── Responsive ──────────────────────────────────────────────── */
@media(max-width:440px){
  #ncb-window{width:calc(100vw - 16px);right:8px;bottom:90px;}
  #ncb-launcher{right:16px;bottom:16px;}
}
