/* Smart Chatbot Pro – Frontend CSS
   ALL colors, padding, borders and radii come from PHP-injected CSS vars.
   Zero hardcoded visual values.
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Inter:wght@400;500;600&family=Roboto:wght@400;500;700&family=Nunito:wght@400;500;600&display=swap');

/* ── Fallback vars (PHP always overrides via wp_head at priority 99) ── */
#scp-root, #scp-launcher, #scp-window {
  /* Colors */
  --scp-primary:              #4F46E5;
  --scp-text:                 #1f2937;
  --scp-bg:                   #ffffff;
  --scp-font:                 'Poppins', sans-serif;
  --scp-font-size:            14px;
  --scp-header-bg:            #4F46E5;
  --scp-header-text:          #ffffff;
  --scp-launcher-bg:          #4F46E5;
  --scp-launcher-bg-hover:    #4338CA;
  --scp-launcher-icon:        #ffffff;
  --scp-launcher-label-bg:    #4F46E5;
  --scp-launcher-label-text:  #ffffff;
  --scp-bot-bubble-bg:        #ffffff;
  --scp-bot-bubble-text:      #1f2937;
  --scp-user-bubble-bg:       #4F46E5;
  --scp-user-bubble-text:     #ffffff;
  --scp-messages-bg:          #F8F9FC;
  --scp-window-bg:            #ffffff;
  --scp-chip-bg:              #ffffff;
  --scp-chip-text:            #4F46E5;
  --scp-chip-border:          #4F46E5;
  --scp-chip-bg-hover:        #4F46E5;
  --scp-chip-text-hover:      #ffffff;
  --scp-input-bg:             #F8F9FC;
  --scp-input-border:         #E5E7EB;
  --scp-input-border-focus:   #4F46E5;
  --scp-input-text:           #1f2937;
  --scp-input-area-bg:        #ffffff;
  --scp-send-bg:              #4F46E5;
  --scp-send-bg-hover:        #4338CA;
  --scp-send-icon:            #ffffff;
  --scp-form-label:           #374151;
  --scp-form-field-bg:        #F8F9FC;
  --scp-form-field-border:    #E5E7EB;
  --scp-form-field-focus:     #4F46E5;
  --scp-form-field-text:      #1f2937;
  --scp-form-submit-bg:       #4F46E5;
  --scp-form-submit-hover:    #4338CA;
  --scp-form-submit-text:     #ffffff;
  --scp-typing-dot:           #9CA3AF;

  /* Padding */
  --scp-pad-window:           0px;
  --scp-pad-header:           16px 20px 16px 20px;
  --scp-pad-messages:         16px;
  --scp-pad-bot-bubble:       10px 14px;
  --scp-pad-user-bubble:      10px 14px;
  --scp-pad-chip:             8px 14px;
  --scp-pad-input-area:       10px 12px;
  --scp-pad-input:            9px 16px;
  --scp-pad-form-field:       8px 10px;
  --scp-pad-submit:           10px 16px;

  /* Borders (shorthand: width style color) */
  --scp-border-window:        0px solid #E5E7EB;
  --scp-border-header:        0px solid #E5E7EB;
  --scp-border-bot-bubble:    0px solid #E5E7EB;
  --scp-border-user-bubble:   0px solid #4F46E5;
  --scp-border-chip:          2px solid #4F46E5;
  --scp-border-input:         2px solid #E5E7EB;
  --scp-border-input-focus:   2px solid #4F46E5;
  --scp-border-form-field:    2px solid #E5E7EB;
  --scp-border-form-field-focus: 2px solid #4F46E5;
  --scp-border-submit:        0px solid #4F46E5;
  --scp-border-launcher:      0px solid #ffffff;

  /* Border radius */
  --scp-radius-window:        18px;
  --scp-radius-header:        0px;
  --scp-radius-bot-bubble:    18px;
  --scp-radius-user-bubble:   18px;
  --scp-radius-chip:          20px;
  --scp-radius-input:         22px;
  --scp-radius-form-field:    8px;
  --scp-radius-submit:        8px;
  --scp-radius-launcher:      50%;
  --scp-radius-send:          50%;
}

/* ── Global reset for chatbot elements ── */
#scp-root *,
#scp-launcher *,
#scp-window * {
  box-sizing: border-box;
  font-family: var(--scp-font);
  margin: 0;
  padding: 0;
}

/* ════════════════════════════════════
   LAUNCHER
════════════════════════════════════ */
#scp-launcher {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99998;
  display: flex;
  align-items: center;
  gap: 10px;
}

#scp-launcher-btn {
  width: 56px;
  height: 56px;
  border-radius: var(--scp-radius-launcher);
  background-color: var(--scp-launcher-bg);
  border: var(--scp-border-launcher);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

#scp-launcher-btn:hover {
  background-color: var(--scp-launcher-bg-hover);
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(0,0,0,.32);
}

#scp-launcher-btn svg {
  width: 26px;
  height: 26px;
  position: absolute;
  transition: transform .3s ease, opacity .3s ease;
}
#scp-launcher-btn .scp-icon-chat {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
#scp-launcher-btn .scp-icon-chat path {
  fill: var(--scp-launcher-icon);
}
#scp-launcher-btn .scp-icon-close {
  opacity: 0;
  transform: rotate(-90deg) scale(0.8);
}
#scp-launcher-btn .scp-icon-close path {
  stroke: var(--scp-launcher-icon);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}
#scp-launcher-btn.open .scp-icon-chat  { opacity: 0; transform: rotate(90deg) scale(0.8); }
#scp-launcher-btn.open .scp-icon-close { opacity: 1; transform: rotate(0deg) scale(1); }

#scp-launcher-label {
  background-color: var(--scp-launcher-label-bg);
  color: var(--scp-launcher-label-text);
  padding: 9px 18px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  cursor: pointer;
  order: -1;
  user-select: none;
}
#scp-launcher-label.scp-hidden { display: none; }

/* ════════════════════════════════════
   CHAT WINDOW
════════════════════════════════════ */
#scp-window {
  position: fixed;
  bottom: 92px;
  right: 24px;
  width: 360px;
  max-height: 560px;
  background-color: var(--scp-window-bg);
  border-radius: var(--scp-radius-window);
  border: var(--scp-border-window);
  padding: var(--scp-pad-window);
  box-shadow: 0 8px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.1);
  display: flex;
  flex-direction: column;
  z-index: 99999;
  overflow: hidden;
  transform-origin: bottom right;
  transform: scale(0.85) translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}
#scp-window.scp-open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}

/* ── Header ── */
#scp-header {
  background-color: var(--scp-header-bg);
  padding: var(--scp-pad-header);
  border-bottom: var(--scp-border-header);
  border-radius: var(--scp-radius-header) var(--scp-radius-header) 0 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#scp-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--scp-header-text);
  line-height: 1.3;
}
#scp-header p {
  font-size: 12px;
  color: var(--scp-header-text);
  opacity: 0.82;
  line-height: 1.3;
}

/* ── Messages area ── */
#scp-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--scp-pad-messages);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: var(--scp-messages-bg);
  scroll-behavior: smooth;
}
#scp-messages::-webkit-scrollbar       { width: 4px; }
#scp-messages::-webkit-scrollbar-track { background: transparent; }
#scp-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 4px; }

/* ── Bubbles ── */
.scp-msg {
  display: flex;
  flex-direction: column;
  max-width: 83%;
  animation: scp-msg-pop .22s ease forwards;
}
@keyframes scp-msg-pop {
  from { transform: translateY(6px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.scp-msg.scp-bot  { align-self: flex-start; }
.scp-msg.scp-user { align-self: flex-end; }

.scp-bubble {
  border-radius: var(--scp-radius-bot-bubble);
  font-size: var(--scp-font-size);
  line-height: 1.55;
  word-break: break-word;
  white-space: pre-wrap;
}
.scp-msg.scp-bot .scp-bubble {
  padding: var(--scp-pad-bot-bubble);
  background-color: var(--scp-bot-bubble-bg);
  color: var(--scp-bot-bubble-text);
  border: var(--scp-border-bot-bubble);
  border-radius: var(--scp-radius-bot-bubble);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.scp-msg.scp-user .scp-bubble {
  padding: var(--scp-pad-user-bubble);
  background-color: var(--scp-user-bubble-bg);
  color: var(--scp-user-bubble-text);
  border: var(--scp-border-user-bubble);
  border-radius: var(--scp-radius-user-bubble);
  border-bottom-right-radius: 4px;
}

/* ── Typing indicator ── */
.scp-typing {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 16px;
  background-color: var(--scp-bot-bubble-bg);
  border: var(--scp-border-bot-bubble);
  border-radius: var(--scp-radius-bot-bubble);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  width: fit-content;
  align-self: flex-start;
  animation: scp-msg-pop .22s ease forwards;
}
.scp-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--scp-typing-dot);
  display: block;
  animation: scp-dot-bounce 1.3s infinite ease-in-out;
}
.scp-typing span:nth-child(1) { animation-delay: 0s; }
.scp-typing span:nth-child(2) { animation-delay: .18s; }
.scp-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes scp-dot-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-7px); }
}

/* ── FAQ chips ── */
#scp-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 14px 12px;
  background-color: var(--scp-messages-bg);
  flex-shrink: 0;
}
.scp-chip {
  padding: var(--scp-pad-chip);
  background-color: var(--scp-chip-bg);
  color: var(--scp-chip-text);
  border: var(--scp-border-chip);
  border-radius: var(--scp-radius-chip);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background-color .15s, color .15s, border-color .15s;
  font-family: var(--scp-font);
}
.scp-chip:hover {
  background-color: var(--scp-chip-bg-hover);
  color: var(--scp-chip-text-hover);
  border-color: var(--scp-chip-bg-hover);
}

/* ── Input bar ── */
#scp-input-area {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--scp-pad-input-area);
  background-color: var(--scp-input-area-bg);
  border-top: 1px solid rgba(0,0,0,.07);
  flex-shrink: 0;
}
#scp-input {
  flex: 1;
  border: var(--scp-border-input);
  border-radius: var(--scp-radius-input);
  padding: var(--scp-pad-input);
  font-family: var(--scp-font);
  font-size: 13px;
  color: var(--scp-input-text);
  background-color: var(--scp-input-bg);
  outline: none;
  transition: border .18s, background-color .18s;
  line-height: 1.4;
}
#scp-input:focus {
  border: var(--scp-border-input-focus);
  background-color: var(--scp-window-bg);
}
#scp-input::placeholder { color: var(--scp-typing-dot); opacity: 1; }

#scp-send {
  width: 38px;
  height: 38px;
  border-radius: var(--scp-radius-send);
  background-color: var(--scp-send-bg);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color .15s, transform .1s;
}
#scp-send:hover  { background-color: var(--scp-send-bg-hover); }
#scp-send:active { transform: scale(.9); }
#scp-send svg { width: 16px; height: 16px; }
#scp-send svg path { fill: var(--scp-send-icon); }

/* ════════════════════════════════════
   CONTACT FORM
════════════════════════════════════ */
.scp-form-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 0 4px;
}
.scp-form-field { display: flex; flex-direction: column; gap: 4px; }
.scp-form-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--scp-form-label);
  font-family: var(--scp-font);
}
.scp-form-field input,
.scp-form-field select,
.scp-form-field textarea {
  width: 100%;
  padding: var(--scp-pad-form-field);
  border: var(--scp-border-form-field);
  border-radius: var(--scp-radius-form-field);
  font-family: var(--scp-font);
  font-size: 13px;
  background-color: var(--scp-form-field-bg);
  color: var(--scp-form-field-text);
  outline: none;
  transition: border .15s, background-color .15s;
  line-height: 1.4;
}
.scp-form-field input:focus,
.scp-form-field select:focus,
.scp-form-field textarea:focus {
  border: var(--scp-border-form-field-focus);
  background-color: var(--scp-window-bg);
}
.scp-form-field textarea { resize: vertical; min-height: 72px; }
.scp-form-field.scp-error input,
.scp-form-field.scp-error select,
.scp-form-field.scp-error textarea { border-color: #EF4444; }
.scp-required { color: #EF4444; margin-left: 2px; }

.scp-form-submit {
  padding: var(--scp-pad-submit);
  background-color: var(--scp-form-submit-bg);
  color: var(--scp-form-submit-text);
  border: var(--scp-border-submit);
  border-radius: var(--scp-radius-submit);
  font-family: var(--scp-font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s;
  margin-top: 2px;
  text-align: center;
  width: 100%;
}
.scp-form-submit:hover    { background-color: var(--scp-form-submit-hover); }
.scp-form-submit:disabled { opacity: .6; cursor: not-allowed; }

.scp-check-group { display: flex; flex-direction: column; gap: 6px; }
.scp-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--scp-form-field-text);
  cursor: pointer;
  font-family: var(--scp-font);
}
.scp-check-item input[type=checkbox],
.scp-check-item input[type=radio] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border: none;
  padding: 0;
  background: none;
}

/* ════════════════════════════════════
   RESPONSIVE
════════════════════════════════════ */
@media (max-width: 420px) {
  #scp-window   { width: calc(100vw - 24px); right: 12px; bottom: 88px; }
  #scp-launcher { right: 12px; bottom: 16px; }
}