/* WP AI Chat — widget styles */

/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
  --wac-primary:   #0D1B3E;
  --wac-accent:    #E91E8C;
  --wac-bg:        #ffffff;
  --wac-bg-msg:    #F0F4FF;
  --wac-text:      #1a1a2e;
  --wac-muted:     #6b7280;
  --wac-border:    #e5e7eb;
  --wac-shadow:    0 8px 32px rgba(0,0,0,.18);
  --wac-radius:    12px;
  --wac-w:         360px;
  --wac-h:         520px;
}

/* ── Bubble ─────────────────────────────────────────────────────────────────── */
.wac-bubble {
  position: fixed;
  z-index: 99998;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--wac-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--wac-shadow);
  transition: transform .2s, opacity .2s;
}
.wac-bubble:hover { transform: scale(1.08); }
.wac-bubble.wac-hidden { opacity: 0; pointer-events: none; }

/* Position variants */
.wac-bubble.wac-pos-bottom-right { bottom: 24px; right: 24px; }
.wac-bubble.wac-pos-bottom-left  { bottom: 24px; left:  24px; }

/* ── Window ─────────────────────────────────────────────────────────────────── */
.wac-window {
  position: fixed;
  z-index: 99999;
  width: var(--wac-w);
  height: var(--wac-h);
  background: var(--wac-bg);
  border-radius: var(--wac-radius);
  box-shadow: var(--wac-shadow);
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0; pointer-events: none;
  transform: translateY(12px) scale(.97);
  transition: opacity .2s, transform .2s;
}
.wac-window.wac-open {
  opacity: 1; pointer-events: auto; transform: none;
}
.wac-window.wac-pos-bottom-right { bottom: 88px; right: 24px; }
.wac-window.wac-pos-bottom-left  { bottom: 88px; left:  24px; }

/* ── Header ─────────────────────────────────────────────────────────────────── */
.wac-header {
  background: var(--wac-primary);
  color: #fff;
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.wac-header-title { font-weight: 600; font-size: 15px; }
.wac-close {
  background: none; border: none; color: rgba(255,255,255,.7);
  font-size: 16px; cursor: pointer; padding: 0 2px; line-height: 1;
}
.wac-close:hover { color: #fff; }

/* ── Messages ───────────────────────────────────────────────────────────────── */
.wac-messages {
  flex: 1; overflow-y: auto; padding: 14px 14px 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.wac-msg {
  max-width: 82%; padding: 9px 13px;
  border-radius: 16px; font-size: 13.5px; line-height: 1.5;
  word-break: break-word;
}
.wac-bot {
  background: var(--wac-bg-msg); color: var(--wac-text);
  border-bottom-left-radius: 4px; align-self: flex-start;
}
.wac-user {
  background: var(--wac-primary); color: #fff;
  border-bottom-right-radius: 4px; align-self: flex-end;
}

/* Typing dots */
.wac-typing { display: flex; gap: 5px; align-items: center; padding: 12px 14px; }
.wac-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--wac-muted);
  animation: wac-bounce .9s infinite ease-in-out;
}
.wac-typing span:nth-child(2) { animation-delay: .15s; }
.wac-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes wac-bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40%            { transform: translateY(-6px); }
}

/* ── Panels ─────────────────────────────────────────────────────────────────── */
.wac-panel { flex-shrink: 0; border-top: 1px solid var(--wac-border); }
.wac-panel.wac-hidden { display: none; }

/* Chat input row */
.wac-input-row {
  display: flex; gap: 8px; padding: 10px 12px;
}
.wac-input-row input {
  flex: 1; border: 1px solid var(--wac-border); border-radius: 8px;
  padding: 8px 12px; font-size: 13.5px; outline: none; color: var(--wac-text);
}
.wac-input-row input:focus { border-color: var(--wac-primary); }
#wac-send {
  background: var(--wac-primary); color: #fff;
  border: none; border-radius: 8px; padding: 8px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: opacity .15s;
}
#wac-send:hover { opacity: .85; }
#wac-send:disabled { opacity: .5; cursor: default; }

/* ── Lead form ──────────────────────────────────────────────────────────────── */
.wac-form {
  padding: 14px 16px;
  max-height: 340px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
}
.wac-form-title { font-weight: 700; font-size: 14px; color: var(--wac-text); margin: 0; }
.wac-form-sub   { font-size: 12px; color: var(--wac-muted); margin: 0 0 4px; }
.wac-form label { font-size: 12px; font-weight: 600; color: var(--wac-text); }
.wac-req        { color: var(--wac-accent); margin-left: 2px; }
.wac-form input,
.wac-form textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--wac-border); border-radius: 7px;
  padding: 8px 10px; font-size: 13px; color: var(--wac-text);
  font-family: inherit; outline: none; resize: vertical;
}
.wac-form input:focus,
.wac-form textarea:focus { border-color: var(--wac-primary); }
.wac-btn {
  background: var(--wac-accent); color: #fff;
  border: none; border-radius: 8px; padding: 10px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  width: 100%; transition: opacity .15s;
}
.wac-btn:hover { opacity: .88; }
.wac-btn:disabled { opacity: .5; cursor: default; }
.wac-err { font-size: 12px; color: #dc2626; margin: 0; }
.wac-err.wac-hidden { display: none; }

/* ── OTP ────────────────────────────────────────────────────────────────────── */
.wac-otp {
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.wac-otp-title { font-weight: 700; font-size: 14px; margin: 0; color: var(--wac-text); }
.wac-otp-sub   { font-size: 12.5px; color: var(--wac-muted); margin: 0; }
.wac-otp-boxes { display: flex; gap: 8px; justify-content: center; }
.wac-otp-box {
  width: 42px; height: 50px;
  text-align: center; font-size: 20px; font-weight: 700;
  border: 2px solid var(--wac-border); border-radius: 8px;
  outline: none; caret-color: var(--wac-accent);
  color: var(--wac-text);
}
.wac-otp-box:focus { border-color: var(--wac-accent); }
.wac-resend {
  background: none; border: none; color: var(--wac-accent);
  font-size: 12.5px; cursor: pointer; padding: 0; align-self: center;
}
.wac-resend:disabled { color: var(--wac-muted); cursor: default; }

/* ── Success ────────────────────────────────────────────────────────────────── */
.wac-success {
  padding: 28px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.wac-success-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: #dcfce7; color: #16a34a;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700;
}
.wac-success p { font-size: 14px; color: var(--wac-text); margin: 0; }

/* ── Mobile ─────────────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  .wac-window {
    width: 100% !important; height: 100% !important;
    bottom: 0 !important; right: 0 !important; left: 0 !important;
    border-radius: 0;
  }
  .wac-bubble.wac-pos-bottom-right { bottom: 16px; right: 16px; }
  .wac-bubble.wac-pos-bottom-left  { bottom: 16px; left:  16px; }
}