/* ===============================
   WP Local Chatbot – Full Styles
   =============================== */

/* --- Positioning / Base --- */
.wplc-chatbot{
  position:fixed;
  bottom:18px;
  z-index:99999;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.wplc-pos-right{ right:18px; }
.wplc-pos-left{  left:18px;  }

/* --- Floating Action Button (FAB) ---
   Uses inline CSS variables set from backend:
   --wplc-fab-bg   (button background)
   --wplc-fab-icon (icon color)
*/
.wplc-toggle{
  width:60px; height:60px;
  border-radius:999px; border:0; cursor:pointer;
  background:var(--wplc-fab-bg, #111827);
  color:var(--wplc-fab-icon, #ffffff);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.wplc-toggle:hover{ transform:translateY(-1px); box-shadow:0 14px 36px rgba(0,0,0,.4); }
.wplc-toggle:active{ transform:translateY(0); }
.wplc-toggle i{ font-size:22px; line-height:1; }
.wplc-toggle:focus{ outline:2px solid #60a5fa; outline-offset:3px; }

/* --- Chat Panel Visibility ---
   Force closed by default; open only when .is-open is present.
   Panel overlays ABOVE the button, not pushing it.
*/
#wplc-panel{ display:none !important; }
#wplc-panel.is-open{ display:flex !important; }

/* --- Chat Panel (overlay above FAB) --- */
.wplc-panel{
  position:absolute;
  bottom:75px; /* opens above the FAB */
  right:0;
  width:360px;
  max-width:calc(100vw - 36px);
  height:520px;
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  box-shadow:0 18px 50px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.06);
  flex-direction:column;
}
.wplc-pos-left .wplc-panel{ left:0; right:auto; }

/* --- Header --- */
.wplc-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px;
  background:rgba(246,247,249,.9);
  border-bottom:1px solid rgba(0,0,0,.07);
}
.wplc-brand{ display:flex; align-items:center; gap:10px; font-weight:600; }
.wplc-dot{
  width:10px; height:10px; border-radius:999px;
  background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.15);
}

/* --- Close button (round) --- */
.wplc-close{
  width:32px;height:32px;border-radius:999px;border:1px solid rgba(0,0,0,.12);
  background:#fff; color:#333; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease, opacity .2s ease;
  margin-right:8px;
}
.wplc-close i{ font-size:16px; }
.wplc-close:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.16); opacity:0.9; }

.wplc-header select{
  font-size:14px; padding:6px 8px;
  border-radius:10px; border:1px solid rgba(0,0,0,.12);
  background:#fff;
}

/* --- Language Picker (first screen) --- */
.wplc-lang-picker{ display:none; padding:18px 12px; text-align:center; }
.wplc-lang-title{ font-weight:600; margin-bottom:12px; }
.wplc-lang-options{ display:flex; justify-content:center; gap:16px; }
.wplc-lang-btn{
  width:56px; height:56px; border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.wplc-lang-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.16); }
.wplc-flag{ font-size:26px; line-height:1; }

/* --- Messages Area --- */
.wplc-messages{
  flex:1 1 auto;
  padding:12px;
  overflow:auto;
  background:#fff;
}
.wplc-user, .wplc-bot{
  padding:10px 12px;
  border-radius:12px;
  margin:6px 0;
  white-space:pre-wrap;
  max-width:90%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
  word-wrap:break-word;
}
.wplc-user{ background:rgba(0,102,255,.08); margin-left:auto; }
.wplc-bot{  background:rgba(0,0,0,.05); }
.wplc-typing{ opacity:.7; font-style:italic; }

/* --- Form --- */
.wplc-form{
  display:flex; gap:8px;
  border-top:1px solid rgba(0,0,0,.07);
  padding:10px;
  background:rgba(255,255,255,.98);
}
.wplc-input{
  flex:1; padding:12px;
  border-radius:12px; border:1px solid rgba(0,0,0,.15);
  background:#fff;
}
.wplc-send{
  padding:12px 14px; border-radius:12px; border:0; cursor:pointer;
  background:#111827; color:#fff;
  box-shadow:0 6px 18px rgba(17,24,39,.25);
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.wplc-send:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(17,24,39,.32); background:#0f172a; }
.wplc-send:active{ transform:translateY(0); }

/* --- Dark Mode --- */
@media (prefers-color-scheme: dark){
  .wplc-panel{
    background:rgba(17,24,39,.95);
    box-shadow:0 18px 50px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05);
  }
  .wplc-header{
    background:rgba(15,23,42,.9);
    border-bottom-color:rgba(255,255,255,.06);
    color:#e5e7eb;
  }
  .wplc-close{
    background:#0b1220; color:#e5e7eb; border-color:rgba(255,255,255,.15);
  }
  .wplc-lang-btn{
    background:#0b1220; color:#e5e7eb; border-color:rgba(255,255,255,.15);
  }
  .wplc-messages{ background:#0b1220; }
  .wplc-user{ background:rgba(56,189,248,.16); }
  .wplc-bot{  background:rgba(255,255,255,.08); color:#e5e7eb; }
  .wplc-input{
    background:#0b1220; color:#e5e7eb; border-color:rgba(255,255,255,.15);
  }
  .wplc-send{ background:#1f2937; }
}

/* --- Small Viewports --- */
@media (max-width:480px){
  .wplc-panel{
    height:70vh;
    width:calc(100vw - 24px);
    max-width:calc(100vw - 24px);
  }
}