#enChatbot{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:999999;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  --en-primary:#2f6bff;
  --en-accent:#ffb000;
  --en-head-glow: rgba(47,107,255,.45);
  --en-head-grad1: rgba(47,107,255,.32);
  --en-head-grad2: rgba(106,166,255,.10);
  --en-body-glow: rgba(47,107,255,.16);
  --en-border-opacity: .95;
}

/* Themes */
#enChatbot.en-theme-dark{
  --en-bg:#0b0f1a;
  --en-surface:#0f172a;
  --en-surface2:#111c33;
  --en-text:#e5e7eb;
  --en-muted:#94a3b8;
  --en-border: rgba(148,163,184,.18);
  --en-bubble:#0f172a;
}
#enChatbot.en-theme-light{
  --en-bg:#f7f8fb;
  --en-surface:#ffffff;
  --en-surface2:#f3f4f6;
  --en-text:#111827;
  --en-muted:#6b7280;
  --en-border: rgba(17,24,39,.10);
  --en-bubble:#ffffff;
}

#enChatbot *{ box-sizing:border-box; }
.en-ico{ width:18px; height:18px; fill: currentColor; }

.en-fab{
  width:56px; height:56px; border-radius:18px;
  border:0; cursor:pointer;
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
  background: linear-gradient(135deg, var(--en-primary), #6aa6ff);
  color:#fff; font-size:20px;
  display:flex; align-items:center; justify-content:center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.en-fab:hover{ transform: translateY(-1px); box-shadow: 0 18px 55px rgba(0,0,0,.26); }

.en-panel{
  width:390px; max-width: calc(100vw - 36px);
  height:640px; max-height: calc(100vh - 110px);
  background: var(--en-surface);
  border-radius:26px;
  box-shadow: 0 24px 80px rgba(0,0,0,.34);
  position:absolute; right:0; bottom:72px;
  overflow:hidden;
  transform: translateY(12px) scale(.99);
  opacity:0; pointer-events:none;
  transition: .18s ease;
  border: 1px solid var(--en-border);
  display:flex;
  flex-direction:column;  /* FIX: remove extra empty space */
}

.en-panel.is-open{ opacity:1; pointer-events:auto; transform: translateY(0) scale(1); }

.en-head{
  padding:14px 14px;
  background:
    radial-gradient(600px 260px at 20% 0%, var(--en-head-glow), transparent 58%),
    linear-gradient(135deg, var(--en-head-grad1), var(--en-head-grad2));
  color: var(--en-text);
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--en-border);
  flex: 0 0 auto;
}
.en-head-left{ display:flex; align-items:center; gap:10px; }
.en-avatar{
  width:40px; height:40px; border-radius:16px;
  background: rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; letter-spacing:.5px;
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}
.en-title strong{ display:block; font-size:15px; line-height:1.1; }
.en-title span{ display:block; font-size:12px; color: var(--en-muted); margin-top:3px; }
.en-close{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--en-text);
  width:40px; height:40px;
  border-radius:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}

.en-body{
  padding:14px;
  overflow:auto;
  background:
    radial-gradient(720px 360px at 10% 0%, var(--en-body-glow), transparent 55%),
    var(--en-bg);
  flex: 1 1 auto;     /* FIX */
  min-height: 0;      /* FIX for flex overflow */
}

.en-msg{ display:flex; margin:10px 0; }
.en-user{ justify-content:flex-end; }
.en-bot{ justify-content:flex-start; }

.en-bubble{
  max-width: 86%;
  padding:12px 12px;
  border-radius:18px;
  font-size:14px;
  line-height:1.45;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
  position:relative;
  border: 1px solid var(--en-border);
  background: var(--en-bubble);
  color: var(--en-text);
}
.en-time{
  font-size:11px;
  color: var(--en-muted);
  margin-top:6px;
}

.en-user .en-bubble{
  background: linear-gradient(135deg, var(--en-primary), #6aa6ff);
  color:#fff;
  border: 0;
  border-bottom-right-radius:10px;
}
.en-bot .en-bubble{
  border-bottom-left-radius:10px;
}

/* typing */
.en-typing{ display:flex; gap:6px; align-items:center; padding:10px 12px; }
.en-typing .dot{
  width:7px; height:7px; border-radius:999px;
  background: rgba(148,163,184,.85);
  animation: enDot 1.1s infinite ease-in-out;
}
.en-typing .dot:nth-child(2){ animation-delay:.15s; }
.en-typing .dot:nth-child(3){ animation-delay:.3s; }
@keyframes enDot{
  0%, 80%, 100% { transform: translateY(0); opacity:.55; }
  40% { transform: translateY(-4px); opacity:1; }
}

.en-templates{
  padding:12px 14px 12px;
  background: var(--en-surface);
  border-top: 1px solid var(--en-border);
  flex: 0 0 auto;
}
.en-tpl-title{ font-size:12px; color: var(--en-muted); margin-bottom:10px; }
.en-tpl-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.en-tpl-btn{
  border:1px solid var(--en-border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:10px 12px;
  border-radius:16px;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
  color: var(--en-text);
  transition:.12s ease;
}
.en-tpl-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(47,107,255,.55);
  box-shadow: 0 12px 22px rgba(0,0,0,.18);
}

/* Lead form */
.en-lead{
  padding:14px;
  background: var(--en-surface);
  border-top: 1px solid var(--en-border);
  flex: 0 0 auto;
}
.en-lead-title{ font-weight:900; color: var(--en-text); font-size:14px; }
.en-lead-sub{ font-size:12px; color: var(--en-muted); margin-top:4px; margin-bottom:10px; }

.en-field label{
  display:block;
  font-size:12px;
  color: var(--en-muted);
  margin:8px 0 6px;
}
.en-lead input{
  width:100%; padding:12px 12px;
  border:1px solid var(--en-border);
  border-radius:16px; outline:none;
  background: var(--en-surface2);
  color: var(--en-text);
}
.en-lead input:focus{ border-color: rgba(47,107,255,.65); box-shadow: 0 0 0 4px rgba(47,107,255,.18); }

.en-btn{
  width:100%;
  padding:12px 12px;
  border:0; cursor:pointer;
  border-radius:18px;
  background: linear-gradient(135deg, var(--en-accent), #ffd36a);
  color:#111827; font-weight:900;
  margin-top:12px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  position:relative;
}
.en-btn.is-loading{
  opacity:.85;
  cursor:progress;
}
.en-btn.is-loading .en-ico{ display:none; }
.en-btn.is-loading:after{
  content:'';
  width:18px; height:18px;
  border-radius:999px;
  border:2px solid rgba(17,24,39,.35);
  border-top-color: rgba(17,24,39,.9);
  position:absolute;
  right:14px;
  animation: enSpin .9s linear infinite;
}
@keyframes enSpin { to { transform: rotate(360deg); } }

.en-hint{ font-size:12px; color: var(--en-muted); margin-top:10px; text-align:center; }
.en-note{ font-size:12px; color: var(--en-muted); margin:10px 2px 0; text-align:center; }

/* Input bar */
.en-input{
  display:flex; gap:10px;
  padding:12px 14px;
  background: var(--en-surface);
  border-top: 1px solid var(--en-border);
  flex: 0 0 auto;
}
.en-input input{
  flex:1; padding:12px 12px;
  border:1px solid var(--en-border);
  border-radius:18px; outline:none;
  background: var(--en-surface2);
  color: var(--en-text);
}
.en-input input:focus{ border-color: rgba(47,107,255,.65); box-shadow: 0 0 0 4px rgba(47,107,255,.18); }
.en-send{
  width:46px; height:46px;
  border:0; cursor:pointer;
  border-radius:18px;
  background: linear-gradient(135deg, rgba(47,107,255,.22), rgba(106,166,255,.12));
  color: var(--en-text);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--en-border);
  transition:.12s ease;
}
.en-send.is-active{
  background: linear-gradient(135deg, var(--en-primary), #6aa6ff);
  border:0;
  color:#fff;
}


/* ===== Full Theme Skins (Preset-based) ===== */
#enChatbot.en-skin-dark_blue{
  --en-head-glow: rgba(47,107,255,.45);
  --en-head-grad1: rgba(47,107,255,.32);
  --en-head-grad2: rgba(106,166,255,.10);
  --en-body-glow: rgba(47,107,255,.16);
  --en-border-opacity: .95;
}

#enChatbot.en-skin-black_gold{
  --en-head-glow: rgba(212,175,55,.45);
  --en-head-grad1: rgba(212,175,55,.24);
  --en-head-grad2: rgba(255,211,106,.08);
  --en-body-glow: rgba(212,175,55,.12);
  --en-border-opacity: .98;
}
#enChatbot.en-skin-black_gold.en-theme-dark{
  --en-bg:#06070c;
  --en-surface:#0b0f1a;
  --en-surface2:#0f1628;
  --en-border: rgba(212,175,55,.14);
  --en-muted:#a8b3c7;
  --en-bubble:#0c1322;
}

#enChatbot.en-skin-white_gold{
  --en-head-glow: rgba(212,175,55,.35);
  --en-head-grad1: rgba(212,175,55,.16);
  --en-head-grad2: rgba(17,24,39,.04);
  --en-body-glow: rgba(212,175,55,.10);
  --en-border-opacity: .70;
}
#enChatbot.en-skin-white_gold.en-theme-light{
  --en-bg:#fbfbfd;
  --en-surface:#ffffff;
  --en-surface2:#f3f4f6;
  --en-border: rgba(212,175,55,.18);
  --en-bubble:#ffffff;
}

#enChatbot.en-skin-pink_black{
  --en-head-glow: rgba(255,77,166,.45);
  --en-head-grad1: rgba(255,77,166,.22);
  --en-head-grad2: rgba(255,211,106,.06);
  --en-body-glow: rgba(255,77,166,.12);
  --en-border-opacity: .95;
}
#enChatbot.en-skin-pink_black.en-theme-dark{
  --en-bg:#070712;
  --en-surface:#0f1024;
  --en-surface2:#141634;
  --en-border: rgba(255,77,166,.14);
  --en-bubble:#10122b;
}

#enChatbot.en-skin-midnight_purple{
  --en-head-glow: rgba(124,58,237,.50);
  --en-head-grad1: rgba(124,58,237,.26);
  --en-head-grad2: rgba(34,211,238,.10);
  --en-body-glow: rgba(124,58,237,.14);
  --en-border-opacity: .92;
}
#enChatbot.en-skin-midnight_purple.en-theme-dark{
  --en-bg:#070a15;
  --en-surface:#0b1024;
  --en-surface2:#111a3a;
  --en-border: rgba(34,211,238,.12);
  --en-bubble:#0c1530;
}

/* Custom uses admin theme + colors */
#enChatbot.en-skin-custom{ }

/* ===== Animated Border (adapts to preset colors) ===== */
#enChatbot.en-anim-border .en-panel{
  position:absolute;
  isolation:isolate;
}
#enChatbot.en-anim-border .en-panel::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:28px;
  padding:2px;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    var(--en-primary) 16%,
    var(--en-accent) 32%,
    var(--en-primary) 52%,
    transparent 72%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: var(--en-border-opacity);
  filter: drop-shadow(0 0 12px rgba(0,0,0,.35));
  animation: enBorderSpin 3.6s linear infinite;
  z-index:-1;
  pointer-events:none;
}
@keyframes enBorderSpin{ to{ transform: rotate(360deg); } }
/* ===== BIG CHAT ICON (DEFAULT 💬) ===== */
#enChatbot .en-fab{
  width:74px !important;      /* button size */
  height:74px !important;
  border-radius:22px !important;
}

#enChatbot .en-fab-ico{
  font-size:34px !important;  /* icon size (💬) */
  line-height:1 !important;
  display:block !important;
  transform: translateY(1px);
}
/* ===== FAB: NO BACKGROUND + BIG ICON ===== */
#enChatbot .en-fab{
  width:76px !important;         /* click area */
  height:76px !important;
  border-radius:0 !important;    /* no blue box shape */
  background: transparent !important;
  box-shadow: none !important;
  border:0 !important;
  padding:0 !important;
}

/* If you are using <img class="en-fab-img"> */
#enChatbot .en-fab-img{
  width:68px !important;         /* icon size */
  height:68px !important;
  object-fit:contain !important;
  display:block !important;
  background: transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:none !important;
}

/* If you are using emoji <span class="en-fab-ico">💬</span> */
#enChatbot .en-fab-ico{
  font-size:44px !important;
  line-height:1 !important;
  display:block !important;
}
/* ===== FAB DOUBLE SIZE + NO BACKGROUND ===== */
#enChatbot .en-fab{
  width:140px !important;      /* button/click area (2x) */
  height:140px !important;
  background: transparent !important;
  box-shadow: none !important;
  border:0 !important;
  padding:0 !important;
}

/* Image icon (robot) double size */
#enChatbot .en-fab-img{
  width:120px !important;      /* icon size (2x) */
  height:120px !important;
  object-fit:contain !important;
  display:block !important;
  background: transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:none !important;
}