/* =====================================================================
   Plugin Idea AI Chatbot Pro — Frontend Stylesheet
   Author: Bappaditya Majumder
   ===================================================================== */

/* ── Variables ─────────────────────────────────────────────────────── */
:root{
  --picp-primary:#6366f1;
  --picp-primary-dark:#4f46e5;
  --picp-bg:#ffffff;
  --picp-surface:#f9fafb;
  --picp-border:#e5e7eb;
  --picp-text:#111827;
  --picp-muted:#6b7280;
  --picp-bot-bubble:#f3f4f6;
  --picp-user-bubble:var(--picp-primary);
  --picp-shadow:0 4px 24px rgba(0,0,0,.14);
  --picp-radius:16px;
  --picp-radius-sm:10px;
  --picp-font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --picp-z:9999;
  --picp-w:380px;
  --picp-h:560px;
}

/* ── Toggle Button ──────────────────────────────────────────────────── */
#picp-toggle{
  position:fixed;bottom:24px;right:24px;
  width:60px;height:60px;border-radius:50%;
  background:var(--picp-primary);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(99,102,241,.45);
  z-index:var(--picp-z);
  transition:transform .25s,box-shadow .25s;
}
#picp-toggle:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(99,102,241,.55);}
#picp-toggle svg{width:28px;height:28px;fill:#fff;transition:transform .3s;}
#picp-toggle.picp-open svg.icon-chat{transform:scale(0);position:absolute;}
#picp-toggle.picp-open svg.icon-close{transform:scale(1);}
#picp-toggle svg.icon-close{transform:scale(0);position:absolute;}

/* Pulse ring */
#picp-toggle::after{
  content:'';position:absolute;
  width:100%;height:100%;
  border-radius:50%;
  background:var(--picp-primary);
  opacity:.3;
  animation:picp-pulse 2.5s infinite;
}
@keyframes picp-pulse{0%{transform:scale(1);opacity:.3}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

/* Notification dot */
#picp-notif{
  position:absolute;top:2px;right:2px;
  width:14px;height:14px;
  background:#ef4444;border:2px solid #fff;
  border-radius:50%;font-size:0;
}

/* ── Chat Window ────────────────────────────────────────────────────── */
#picp-window{
  position:fixed;bottom:96px;right:24px;
  width:var(--picp-w);
  max-height:var(--picp-h);
  background:var(--picp-bg);
  border-radius:var(--picp-radius);
  box-shadow:var(--picp-shadow);
  z-index:var(--picp-z);
  display:flex;flex-direction:column;
  overflow:hidden;
  transform:translateY(20px) scale(.95);
  opacity:0;
  pointer-events:none;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .25s;
}
#picp-window.picp-visible{
  transform:translateY(0) scale(1);
  opacity:1;
  pointer-events:all;
}

/* ── Header ─────────────────────────────────────────────────────────── */
#picp-header{
  background:var(--picp-primary);
  padding:14px 18px;
  display:flex;align-items:center;gap:12px;
  flex-shrink:0;
}
#picp-avatar{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
}
#picp-header-info{flex:1;min-width:0;}
#picp-header-name{color:#fff;font-weight:600;font-size:15px;font-family:var(--picp-font);}
#picp-header-status{color:rgba(255,255,255,.8);font-size:12px;display:flex;align-items:center;gap:4px;}
.picp-status-dot{width:7px;height:7px;background:#4ade80;border-radius:50%;display:inline-block;}
#picp-header-actions{display:flex;gap:6px;}
.picp-header-btn{
  background:transparent;border:none;cursor:pointer;
  color:rgba(255,255,255,.8);padding:4px;border-radius:6px;
  transition:background .2s,color .2s;font-size:18px;line-height:1;
}
.picp-header-btn:hover{background:rgba(255,255,255,.2);color:#fff;}

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

/* ── Message Bubbles ─────────────────────────────────────────────────── */
.picp-msg{
  display:flex;align-items:flex-end;gap:8px;
  max-width:88%;
  animation:picp-fadein .25s ease;
}
@keyframes picp-fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.picp-msg-bot{align-self:flex-start;}
.picp-msg-user{align-self:flex-end;flex-direction:row-reverse;}

.picp-msg-icon{
  width:28px;height:28px;border-radius:50%;
  background:var(--picp-primary);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;color:#fff;
}
.picp-msg-user .picp-msg-icon{background:#d1d5db;}

.picp-bubble{
  padding:10px 14px;
  border-radius:18px;
  font-size:14px;line-height:1.5;
  font-family:var(--picp-font);
  word-break:break-word;
  max-width:100%;
}
.picp-msg-bot  .picp-bubble{background:var(--picp-bot-bubble);color:var(--picp-text);border-bottom-left-radius:4px;}
.picp-msg-user .picp-bubble{background:var(--picp-user-bubble);color:#fff;border-bottom-right-radius:4px;}

/* ── Typing indicator ────────────────────────────────────────────────── */
.picp-typing .picp-bubble{
  display:flex;align-items:center;gap:4px;
  padding:12px 16px;
}
.picp-dot{width:8px;height:8px;background:var(--picp-muted);border-radius:50%;animation:picp-bounce .8s infinite;}
.picp-dot:nth-child(2){animation-delay:.15s}
.picp-dot:nth-child(3){animation-delay:.3s}
@keyframes picp-bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}

/* ── Product / Service Cards ─────────────────────────────────────────── */
.picp-cards{display:flex;flex-direction:column;gap:8px;width:100%;max-width:320px;}
.picp-card-item{
  background:#fff;border:1px solid var(--picp-border);
  border-radius:var(--picp-radius-sm);
  overflow:hidden;display:flex;align-items:center;gap:10px;
  transition:box-shadow .2s;
}
.picp-card-item:hover{box-shadow:0 2px 12px rgba(0,0,0,.1);}
.picp-card-img{width:70px;height:70px;object-fit:cover;flex-shrink:0;}
.picp-card-img-placeholder{width:70px;height:70px;background:#e5e7eb;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;}
.picp-card-body{flex:1;min-width:0;padding:8px 10px 8px 0;}
.picp-card-title{font-weight:600;font-size:13px;color:var(--picp-text);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.picp-card-meta{font-size:12px;color:var(--picp-muted);margin-bottom:6px;}
.picp-card-price{font-size:14px;font-weight:700;color:var(--picp-primary);}
.picp-card-actions{display:flex;gap:6px;flex-wrap:wrap;}
.picp-card-btn{
  font-size:11px;padding:4px 10px;
  border-radius:20px;border:none;cursor:pointer;
  font-family:var(--picp-font);font-weight:600;
  transition:background .2s,transform .1s;
}
.picp-card-btn:active{transform:scale(.96);}
.picp-btn-primary{background:var(--picp-primary);color:#fff;}
.picp-btn-primary:hover{background:var(--picp-primary-dark);}
.picp-btn-outline{background:transparent;color:var(--picp-primary);border:1.5px solid var(--picp-primary);}
.picp-btn-outline:hover{background:var(--picp-primary);color:#fff;}
.picp-btn-whatsapp{background:#25d366;color:#fff;}
.picp-btn-whatsapp:hover{background:#128c7e;}

/* ── CTA Buttons Row ─────────────────────────────────────────────────── */
.picp-cta-row{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-top:6px;
}
.picp-cta-btn{
  font-size:12px;padding:6px 14px;
  border-radius:20px;border:1.5px solid var(--picp-primary);
  color:var(--picp-primary);background:#fff;
  cursor:pointer;font-family:var(--picp-font);font-weight:600;
  transition:all .2s;
}
.picp-cta-btn:hover{background:var(--picp-primary);color:#fff;}

/* ── Lead Capture Form ───────────────────────────────────────────────── */
.picp-lead-form{
  background:#fff;border:1px solid var(--picp-border);
  border-radius:var(--picp-radius-sm);padding:14px;
  display:flex;flex-direction:column;gap:8px;
  width:100%;max-width:300px;
}
.picp-lead-form input{
  width:100%;padding:8px 10px;
  border:1px solid var(--picp-border);border-radius:8px;
  font-size:13px;font-family:var(--picp-font);
  outline:none;box-sizing:border-box;
}
.picp-lead-form input:focus{border-color:var(--picp-primary);}
.picp-lead-submit{
  background:var(--picp-primary);color:#fff;
  border:none;padding:9px;border-radius:8px;
  font-weight:600;font-size:13px;cursor:pointer;
  transition:background .2s;
}
.picp-lead-submit:hover{background:var(--picp-primary-dark);}

/* ── Funnel / Quick Reply Options ────────────────────────────────────── */
.picp-options{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.picp-option-btn{
  font-size:12px;padding:6px 12px;
  background:#fff;border:1.5px solid var(--picp-primary);
  color:var(--picp-primary);border-radius:20px;
  cursor:pointer;font-family:var(--picp-font);
  transition:all .2s;
}
.picp-option-btn:hover{background:var(--picp-primary);color:#fff;}

/* ── Upgrade Banner ──────────────────────────────────────────────────── */
.picp-upgrade-msg{
  background:#fef3c7;border:1px solid #fbbf24;
  border-radius:10px;padding:10px 14px;
  font-size:12px;color:#92400e;
}
.picp-upgrade-msg a{color:var(--picp-primary);font-weight:600;}

/* ── Input Bar ───────────────────────────────────────────────────────── */
#picp-input-area{
  padding:12px 14px;
  background:#fff;
  border-top:1px solid var(--picp-border);
  display:flex;align-items:center;gap:8px;
  flex-shrink:0;
}
#picp-input{
  flex:1;
  border:1.5px solid var(--picp-border);
  border-radius:24px;
  padding:9px 16px;
  font-size:14px;
  font-family:var(--picp-font);
  outline:none;
  transition:border .2s;
  resize:none;
  max-height:80px;
  line-height:1.4;
}
#picp-input:focus{border-color:var(--picp-primary);}
#picp-send{
  width:40px;height:40px;border-radius:50%;
  background:var(--picp-primary);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .1s;flex-shrink:0;
}
#picp-send:hover{background:var(--picp-primary-dark);}
#picp-send:active{transform:scale(.93);}
#picp-send svg{width:18px;height:18px;fill:#fff;}
#picp-send:disabled{background:#d1d5db;cursor:not-allowed;}

/* ── Powered By ──────────────────────────────────────────────────────── */
#picp-footer{
  text-align:center;padding:6px 0 8px;
  font-size:11px;color:var(--picp-muted);
  background:#fff;
  border-top:1px solid var(--picp-border);
  flex-shrink:0;
}
#picp-footer a{color:var(--picp-muted);text-decoration:none;}

/* ── Inline shortcode embed ──────────────────────────────────────────── */
.picp-inline-chatbot{
  width:100%;max-width:480px;margin:0 auto;
  border-radius:var(--picp-radius);
  box-shadow:var(--picp-shadow);
  overflow:hidden;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media(max-width:480px){
  #picp-window{
    right:0;bottom:0;
    width:100vw;
    max-height:100dvh;
    border-radius:0;
  }
  #picp-toggle{bottom:16px;right:16px;}
}