/* ═══════════════════════════════════════════
   PAGE HEADER
═══════════════════════════════════════════ */
.page-header{
  padding:50px 0 50px;
  background:var(--bg);
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--border);
}
.page-header::before{
  content:'';position:absolute;top:0;right:0;
  width:50%;height:100%;
  background:linear-gradient(160deg,var(--bg2) 0%,var(--navy-lt) 60%,rgba(243,92,37,0.05) 100%);
  clip-path:polygon(14% 0,100% 0,100% 100%,0 100%);
  z-index:0;
}
.page-header::after{
  content:'';position:absolute;bottom:-60px;left:-60px;
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(var(--navy-lt),transparent 70%);
  pointer-events:none;
}
.ph-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.ph-tag{display:inline-flex;align-items:center;gap:7px;background:var(--orange-lt);border:1px solid var(--orange-md);color:var(--orange);font-size:11.5px;font-weight:700;padding:5px 14px;border-radius:100px;margin-bottom:18px;letter-spacing:0.07em;text-transform:uppercase;}
.ph-tag .live-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);animation:blink 1.5s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.ph-title{font-family:var(--display);font-size:clamp(2rem,4vw,3.2rem);font-weight:800;line-height:1.08;letter-spacing:-0.03em;color:var(--text);margin-bottom:16px;}
.ph-title .n{color:var(--navy);}
.ph-title .o{color:var(--orange);}
.ph-sub{font-size:1rem;color:var(--text2);line-height:1.74;max-width:480px;margin-bottom:28px;}
.ph-proof{display:flex;flex-wrap:wrap;gap:12px;}
.proof-pill{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--text2);}
.proof-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;}
.pi-n{background:var(--navy-lt);}
.pi-o{background:var(--orange-lt);}

/* Page header right — preview card */
.ph-preview-card{background:#fff;border-radius:var(--radius-lg);border:1.5px solid var(--border);box-shadow:var(--sh-lg);padding:22px;position:relative;}
.ph-preview-card::before{content:'';position:absolute;top:0;left:20px;right:20px;height:3px;background:linear-gradient(90deg,var(--navy),var(--orange));border-radius:0 0 4px 4px;}
.ppc-topbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border);}
.ppc-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--navy-lt),var(--navy-mid));display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:13px;font-weight:800;color:var(--navy);flex-shrink:0;}
.ppc-name{font-size:13.5px;font-weight:700;color:var(--text);}
.ppc-status{font-size:10.5px;color:var(--green);display:flex;align-items:center;gap:4px;}
.online-dot{width:6px;height:6px;border-radius:50%;background:var(--green);}
.ppc-msgs{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.msg-demo{max-width:82%;font-size:12px;line-height:1.55;padding:8px 11px;border-radius:12px;}
.msg-demo.bot{background:var(--bg2);border:1px solid var(--border);align-self:flex-start;border-bottom-left-radius:3px;}
.msg-demo.user{background:var(--navy);color:#fff;align-self:flex-end;border-bottom-right-radius:3px;}
.ppc-input{display:flex;gap:8px;align-items:center;}
.ppc-input-fake{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:7px 14px;font-size:11.5px;color:var(--muted);}
.ppc-send{width:30px;height:30px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ppc-send svg{width:13px;height:13px;fill:#fff;}

/* ═══════════════════════════════════════════
   MAIN BUILDER LAYOUT
═══════════════════════════════════════════ */
.builder-section{padding:48px 0 80px;background:var(--bg2);}
.builder-layout{display:grid;grid-template-columns:420px 1fr;gap:24px;align-items:start;}

/* ── LEFT PANEL ── */
.left-panel{
  background:#fff;border:1.5px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--sh-md);
  overflow:hidden;
  position:sticky;top:84px;
}
.lp-header{
  background:var(--navy);
  padding:20px 24px;
  position:relative;overflow:hidden;
}
.lp-header::before{content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,0.05);pointer-events:none;}
.lp-header-title{font-family:var(--display);font-size:17px;font-weight:800;color:#fff;letter-spacing:-0.02em;margin-bottom:4px;}
.lp-header-sub{font-size:12px;color:rgba(255,255,255,0.55);font-weight:500;}

/* Step progress */
.step-track{display:flex;align-items:center;padding:10px 20px 0;gap:0;}
.step-node{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;z-index:1;}
.step-circle{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:12px;font-weight:800;
  background:var(--border);color:var(--muted);
  border:2px solid var(--border2);
  transition:all 0.3s;cursor:pointer;
}
.step-circle.done{background:var(--green);color:#fff;border-color:var(--green);}
.step-circle.active{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-lt);}
.step-circle.done-orange{background:var(--orange);color:#fff;border-color:var(--orange);}
.step-label-txt{font-size:9px;font-weight:700;color:var(--muted);letter-spacing:0.03em;text-align:center;max-width:54px;line-height:1.3;transition:color 0.2s;}
.step-label-txt.active{color:var(--navy);}
.step-label-txt.done{color:var(--green);}
.step-connector{flex:1;height:2px;background:var(--border2);margin-bottom:16px;transition:background 0.3s;}
.step-connector.done{background:var(--green);}

/* Form body */
.form-body{padding:5px 15px 5px;max-height:520px;overflow-y:auto;}
.form-body::-webkit-scrollbar{width:3px;}
.form-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px;}
.step-form{display:none;}
.step-form.active{display:block;}
.step-heading{
    font-family: var(--display);
    font-size: 16px;
    line-height: 22px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 0px;	
}
.step-sub{font-size:12px;color:var(--muted);margin-bottom:5px;line-height:1.5;}

/* Form fields */
.fg{display:flex;flex-direction:column;gap:5px;margin-bottom:5px;}
.fg label{font-size:11.5px;font-weight:700;color:var(--text2);letter-spacing:0.02em;}
.fg label .req{color:var(--orange);}
.fg input,.fg select,.fg textarea{
  width:100%;background:var(--bg2);border:1.5px solid var(--border);
  border-radius:9px;padding:9px 12px;font-size:13px;
  color:var(--text);font-family:var(--font);outline:none;
  transition:border-color 0.2s,background 0.2s;
}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--navy);background:#fff;}
.fg input.error,.fg select.error,.fg textarea.error{border-color:var(--red);}
.fg input::placeholder,.fg textarea::placeholder{color:#bbbfce;}
.fg select{color:var(--text2);}
.fg select.filled{color:var(--text);}
.fg textarea{min-height:68px;resize:vertical;line-height:1.5;}
.fg .char-count{font-size:10.5px;color:var(--muted);text-align:right;margin-top:2px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* Chip selectors */
.chip-group{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.chip{
  font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:100px;
  border:1.5px solid var(--border2);cursor:pointer;
  color:var(--muted);background:#fff;
  transition:all 0.15s;user-select:none;
}
.chip:hover{border-color:var(--navy-mid);color:var(--navy);}
.chip.active{background:var(--navy-lt);border-color:var(--navy-mid);color:var(--navy);font-weight:700;}
.chip.active-orange{background:var(--orange-lt);border-color:var(--orange-md);color:var(--orange);}

/* Tone grid */
.tone-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:4px;}
.tone-opt{
  padding:9px 10px;border-radius:10px;border:1.5px solid var(--border);
  cursor:pointer;transition:all 0.15s;background:#fff;
}
.tone-opt:hover{border-color:var(--navy-mid);}
.tone-opt.active{background:var(--navy-lt);border-color:var(--navy-mid);}
.tone-opt-name{font-size:12px;font-weight:700;color:var(--text);margin-bottom:2px;}
.tone-opt.active .tone-opt-name{color:var(--navy);}
.tone-opt-desc{font-size:10px;color:var(--muted);line-height:1.3;}

/* Form nav buttons */
.form-nav{display:flex;gap:8px;padding:14px 22px;border-top:1px solid var(--border);background:var(--bg2);}
.btn-step{flex:1;padding:10px;border-radius:9px;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;border:none;transition:all 0.2s;text-align:center;}
.btn-back{background:var(--bg3);color:var(--text2);border:1.5px solid var(--border2);}
.btn-back:hover{background:var(--border2);}
.btn-next{background:var(--navy);color:#fff;box-shadow:0 3px 14px rgba(29,40,120,0.22);}
.btn-next:hover{background:var(--navy-dark);}
.btn-generate{background:linear-gradient(135deg,var(--navy),#2d40b0);color:#fff;box-shadow:0 4px 18px rgba(29,40,120,0.3);}
.btn-generate:hover{opacity:0.88;}

/* ── RIGHT PANEL ── */
.right-panel{
  background:#fff;border:1.5px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--sh-md);
  overflow:hidden;
  min-height:680px;
  display:flex;flex-direction:column;height:100%;
}

/* Placeholder state */
.rp-placeholder{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:3rem 2rem;text-align:center;
  gap:0;height:100%;
}
.rp-placeholder-icon{
  width:72px;height:72px;border-radius:50%;
  background:var(--bg2);border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;margin-bottom:18px;
}
.rp-placeholder-title{font-family:var(--display);font-size:18px;font-weight:700;color:var(--text);margin-bottom:8px;}
.rp-placeholder-sub{font-size:13px;color:var(--muted);max-width:300px;line-height:1.65;}
.rp-placeholder-steps{display:flex;flex-direction:column;gap:10px;margin-top:28px;max-width:320px;text-align:left;}
.rp-ps{display:flex;align-items:flex-start;gap:10px;padding:10px;background:var(--bg2);border-radius:10px;border:1px solid var(--border);}
.rp-ps-num{width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--display);}
.rp-ps-text{font-size:12px;font-weight:600;color:var(--text2);}

/* Generating state */
.rp-generating{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:2rem;text-align:center;gap:18px;
  background:var(--bg2);
}
.gen-ring{position:relative;width:70px;height:70px;}
.gen-ring-circle{
  width:70px;height:70px;border-radius:50%;
  border:3px solid var(--border2);
  border-top-color:var(--navy);
  border-right-color:var(--orange);
  animation:spin 0.9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.gen-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;}
.gen-title{font-family:var(--display);font-size:17px;font-weight:800;color:var(--text);}
.gen-label{font-size:13px;color:var(--text2);max-width:260px;line-height:1.6;}
.gen-progress-wrap{width:100%;max-width:280px;background:var(--border);border-radius:4px;height:4px;overflow:hidden;}
.gen-progress-bar{height:4px;background:linear-gradient(90deg,var(--navy),var(--orange));border-radius:4px;width:0%;transition:width 0.4s ease;}
.gen-steps-done{display:flex;flex-direction:column;gap:5px;max-width:280px;text-align:left;}
.gen-step-done{font-size:11.5px;color:var(--green);display:flex;align-items:center;gap:7px;}
.gen-step-done::before{content:'✓';font-weight:800;}

/* ── CHAT UI ── */
.chat-wrapper{display:none;flex:1;flex-direction:column;}
.chat-topbar{
  padding:14px 18px;border-bottom:1px solid var(--border);
  background:#fff;display:flex;align-items:center;gap:12px;
  flex-shrink:0;
}
.chat-avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--navy-lt),var(--navy-mid));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:14px;font-weight:800;
  color:var(--navy);flex-shrink:0;
  border:2px solid var(--border2);
}
.chat-bot-name{font-size:14px;font-weight:700;color:var(--text);}
.chat-bot-status{font-size:11px;color:var(--green);display:flex;align-items:center;gap:5px;}
.chat-online-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:blink 2s infinite;}
.chat-topbar-right{margin-left:auto;display:flex;gap:8px;}
.chat-tb-btn{
  font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:7px;
  border:1.5px solid var(--border);background:var(--bg2);color:var(--text2);
  cursor:pointer;transition:all 0.15s;font-family:var(--font);
}
.chat-tb-btn:hover{border-color:var(--navy-mid);color:var(--navy);background:var(--navy-lt);}
.chat-tb-btn.orange-btn{background:var(--orange);color:#fff;border-color:var(--orange);}
.chat-tb-btn.orange-btn:hover{background:#d94c18;}

.chat-body{
  flex:1;overflow-y:auto;padding:18px;
  display:flex;flex-direction:column;gap:10px;
  background:var(--bg2);
  min-height:320px;max-height:400px;
}
.chat-body::-webkit-scrollbar{width:3px;}
.chat-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px;}

.msg-wrap{display:flex;flex-direction:column;}
.msg-wrap.user-wrap{align-items:flex-end;}

.msg{
  max-width:76%;font-size:13px;line-height:1.58;
  padding:10px 13px;border-radius:14px;
  white-space:pre-line;
}
.msg.bot{
  background:#fff;border:1px solid var(--border);
  align-self:flex-start;color:var(--text);
  border-bottom-left-radius:4px;
  box-shadow:var(--sh-sm);
}
.msg.user{
  background:var(--navy);color:#fff;
  align-self:flex-end;
  border-bottom-right-radius:4px;
}
.msg-time{font-size:10px;color:var(--muted);margin-top:3px;}
.msg-time.user-time{text-align:right;}

.quick-replies{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-top:4px;align-self:flex-start;
}
.qr-btn{
  font-size:11.5px;font-weight:600;padding:5px 12px;border-radius:100px;
  border:1.5px solid var(--border2);background:#fff;color:var(--navy);
  cursor:pointer;transition:all 0.15s;font-family:var(--font);
}
.qr-btn:hover{background:var(--navy-lt);border-color:var(--navy-mid);}

/* Typing indicator */
.typing-wrap{align-self:flex-start;}
.typing-bubble{
  background:#fff;border:1px solid var(--border);
  border-radius:14px;border-bottom-left-radius:4px;
  padding:10px 16px;box-shadow:var(--sh-sm);
  display:flex;align-items:center;gap:5px;
}
.typing-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--muted);
  animation:tBounce 0.9s infinite;
}
.typing-dot:nth-child(2){animation-delay:0.15s;}
.typing-dot:nth-child(3){animation-delay:0.3s;}
@keyframes tBounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}

.chat-input-area{
  padding:12px 16px;border-top:1px solid var(--border);
  background:#fff;display:flex;gap:10px;align-items:flex-end;
  flex-shrink:0;
}
.chat-input{
  flex:1;font-size:13px;padding:9px 14px;
  border:1.5px solid var(--border);border-radius:20px;
  background:var(--bg2);color:var(--text);
  font-family:var(--font);outline:none;
  resize:none;max-height:90px;line-height:1.45;
  transition:border-color 0.2s;
}
.chat-input:focus{border-color:var(--navy);}
.chat-send-btn{
  width:36px;height:36px;border-radius:50%;
  background:var(--navy);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all 0.2s;
}
.chat-send-btn:hover{background:var(--navy-dark);}
.chat-send-btn svg{width:14px;height:14px;fill:#fff;}

/* ── Config summary (right panel after generation) ── */
.config-summary{
  padding:16px 18px;border-bottom:1px solid var(--border);
  background:var(--bg2);display:flex;gap:10px;flex-wrap:wrap;
  align-items:center;flex-shrink:0;
}
.cfg-tag{
  font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:100px;
  background:#fff;border:1px solid var(--border);color:var(--text2);
}

/* ═══════════════════════════════════════════
   SUCCESS SECTION
═══════════════════════════════════════════ */
.success-section{
  background:linear-gradient(135deg,var(--navy),#2d3ea0);
  padding:64px 0;position:relative;overflow:hidden;display:none;
}
.success-section::before{content:'';position:absolute;top:-80px;right:-80px;width:360px;height:360px;border-radius:50%;background:radial-gradient(rgba(243,92,37,.12),transparent 70%);pointer-events:none;}
.success-inner{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;}
.success-card{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius);padding:22px;}
.sc-icon{font-size:24px;margin-bottom:10px;}
.sc-title{font-family:var(--display);font-size:15px;font-weight:700;color:#fff;margin-bottom:6px;}
.sc-val{font-size:13px;color:rgba(255,255,255,0.65);line-height:1.55;}

/* ═══════════════════════════════════════════
   TOAST
═══════════════════════════════════════════ */
.toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--navy);color:#fff;font-size:13px;font-weight:600;
  padding:10px 20px;border-radius:100px;
  box-shadow:0 6px 24px rgba(29,40,120,0.35);
  opacity:0;transition:all 0.25s;white-space:nowrap;z-index:999;pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.floatWhatsappBtn{position:fixed;bottom:20px;right:20px;display:inline-block;width:50px;height:50px;z-index:10;}
.floatWhatsappBtn img{}
.floatWhatsappBtn.hide{display:none;}
/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media(max-width:1100px){
  .builder-layout{grid-template-columns:380px 1fr;}
}
@media(max-width:960px){
  .nav-links{display:none;}
  .builder-layout{grid-template-columns:1fr;}
  .left-panel{position:static;}
  .ph-inner{grid-template-columns:1fr;}
  .ph-preview-card{display:none;}
}
@media(max-width:600px){
  .form-row{grid-template-columns:1fr;}
  .tone-grid{grid-template-columns:1fr;}
  .success-inner{grid-template-columns:1fr;}
  .container{}
 
}