/* =========================================================
   Click Connect Media – AI Assistant (FULL CSS) ✅ FIXED
   - Desktop: width thodi kam + height thodi badi
   - Header cut fix (min-height + safe padding)
   - Mobile cut fix (100dvh + safe-area)
   - Services list CSS SAME (as your screenshot)
   - Modal works + always on top
   ========================================================= */

#enChatbot{
  position: fixed;
  right: 18px;
  bottom: max(18px, env(safe-area-inset-bottom));
  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; }
#enChatbot button{ font-family: inherit; }
#enChatbot a{ color: inherit; }
#enChatbot .en-ico{ width:18px; height:18px; fill: currentColor; }

/* =========================
   FAB (Floating icon)
   ========================= */
#enChatbot .en-fab{
  width: 140px;
  height: 140px;
  border-radius: 0;
  border: 0;
  cursor: pointer;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, filter .15s ease;
  padding: 0;
}
#enChatbot .en-fab:hover{ transform: translateY(-1px); }

#enChatbot .en-fab-img{
  width: 120px;
  height: 120px;
  display: block;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
}

/* =========================
   Panel (chat window) ✅ FIXED
   Desktop: width कम + height ज्यादा
   ========================= */
#enChatbot .en-panel{
  width: clamp(340px, 24vw, 400px);          /* FIX: width less */
  max-width: calc(100vw - 28px);

  height: clamp(580px, 78vh, 780px);         /* FIX: taller */
  max-height: calc(100dvh - 160px);
  max-height: calc(100vh - 160px);

  background: var(--en-surface);
  border-radius: 26px;
  box-shadow: 0 24px 80px rgba(0,0,0,.34);

  position: absolute;
  right: 0;
  bottom: 155px;
  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;
  isolation: isolate; /* for animated border */
}

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

/* Large desktop: little more height */
@media (min-width: 1280px){
  #enChatbot .en-panel{
    width: clamp(360px, 22vw, 410px);
    height: clamp(620px, 80vh, 820px);
    max-height: calc(100vh - 160px);
  }
}

/* Mobile: prevent cut + safe margins */
@media (max-width: 768px){
  #enChatbot{
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  #enChatbot .en-fab{ width: 110px; height: 110px; }
  #enChatbot .en-fab-img{ width: 96px; height: 96px; }

  #enChatbot .en-panel{
    width: min(420px, calc(100vw - 22px));
    height: min(680px, calc(100dvh - 150px));
    height: min(680px, calc(100vh - 150px));
    bottom: 125px;
    border-radius: 24px;
  }
}

/* Very small mobiles */
@media (max-width: 420px){
  #enChatbot .en-panel{ width: calc(100vw - 18px); }
}

/* =========================
   Header ✅ FIX: never cut
   ========================= */
#enChatbot .en-head{
  padding: 14px 14px;
  min-height: 68px;       /* FIX: header cut stop */
  flex: 0 0 auto;

  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);
}

#enChatbot .en-head-left{ display:flex; align-items:center; gap:10px; }
#enChatbot .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);
}
#enChatbot .en-title strong{ display:block; font-size:15px; line-height:1.1; }
#enChatbot .en-title span{ display:block; font-size:12px; color: var(--en-muted); margin-top:3px; }
#enChatbot .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;
}

/* =========================
   Body (messages) ✅ scroll fix
   ========================= */
#enChatbot .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;
  min-height: 0; /* critical for flex + scroll */
}

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

#enChatbot .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);
  word-break: break-word;
}
#enChatbot .en-time{
  font-size: 11px;
  color: var(--en-muted);
  margin-top: 6px;
}

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

/* Typing dots */
#enChatbot .en-typing{ display:flex; gap:6px; align-items:center; padding:10px 12px; }
#enChatbot .en-typing .dot{
  width:7px; height:7px; border-radius:999px;
  background: rgba(148,163,184,.85);
  animation: enDot 1.1s infinite ease-in-out;
}
#enChatbot .en-typing .dot:nth-child(2){ animation-delay:.15s; }
#enChatbot .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; }
}

/* CTA buttons inside bot reply */
#enChatbot .en-cta-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
#enChatbot .en-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  padding:9px 12px;
  border-radius:14px;
  font-weight:900;
  font-size:12px;
  border:1px solid var(--en-border);
  color: var(--en-text);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
#enChatbot .en-cta-btn.en-wa{
  border:0;
  color:#111827;
  background: linear-gradient(135deg, var(--en-accent), #ffd36a);
}
#enChatbot .en-cta-btn.en-email{ border-color: rgba(47,107,255,.45); }

/* =========================
   Services bar ✅ KEEP SAME (as screenshot)
   ========================= */
#enChatbot .en-templates{
  padding: 8px 10px;
  background: var(--en-surface);
  border-top: 1px solid var(--en-border);
  flex: 0 0 auto;
}
#enChatbot .en-tpl-title{
  font-size: 11px;
  color: var(--en-muted);
  margin-bottom: 6px;
}
#enChatbot .en-tpl-grid{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
#enChatbot .en-tpl-grid::-webkit-scrollbar{ height:6px; }
#enChatbot .en-tpl-grid::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.25);
  border-radius: 999px;
}
#enChatbot .en-tpl-btn{
  border:1px solid var(--en-border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding: 8px 10px;
  border-radius: 12px;
  cursor:pointer;
  font-size: 12px;
  font-weight: 800;
  color: var(--en-text);
  white-space: nowrap;
  flex: 0 0 auto;
  transition: .12s ease;
}
#enChatbot .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
   ========================= */
#enChatbot .en-lead{
  padding: 14px;
  background: var(--en-surface);
  border-top: 1px solid var(--en-border);
  flex: 0 0 auto;
}
#enChatbot .en-lead-title{ font-weight:900; color: var(--en-text); font-size:14px; }
#enChatbot .en-lead-sub{ font-size:12px; color: var(--en-muted); margin-top:4px; margin-bottom:10px; }

#enChatbot .en-field label{
  display:block;
  font-size:12px;
  color: var(--en-muted);
  margin:8px 0 6px;
}
#enChatbot .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);
}
#enChatbot .en-lead input:focus{
  border-color: rgba(47,107,255,.65);
  box-shadow: 0 0 0 4px rgba(47,107,255,.18);
}

#enChatbot .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;
}
#enChatbot .en-btn.is-loading{ opacity:.85; cursor:progress; }
#enChatbot .en-btn.is-loading .en-ico{ display:none; }
#enChatbot .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); } }

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

/* =========================
   Footer CTA buttons
   ========================= */
#enChatbot .en-footer-cta{
  display:flex;
  gap:10px;
  padding:10px 14px;
  background: var(--en-surface);
  border-top: 1px solid var(--en-border);
  flex: 0 0 auto;
}
#enChatbot .en-footer-cta .en-cta{
  flex: 1;
  text-align: center;
  padding: 10px 10px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 900;
  font-size: 12px;
  border: 0;
  color: #fff;
  transition: transform .12s ease, box-shadow .12s ease;
  white-space: nowrap;
}
#enChatbot .en-footer-cta .en-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
}
#enChatbot .en-footer-cta .en-cta.en-wa{ background: linear-gradient(135deg, #25D366, #0ea75a); }
#enChatbot .en-footer-cta .en-cta.en-mail{ background: linear-gradient(135deg, #2f6bff, #1c4ed8); }
#enChatbot .en-footer-cta .en-cta.en-ig{ background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); }

/* =========================
   Input bar
   ========================= */
#enChatbot .en-input{
  display:flex;
  gap:10px;
  padding:12px 14px;
  background: var(--en-surface);
  border-top: 1px solid var(--en-border);
  flex: 0 0 auto;
}
#enChatbot .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);
}
#enChatbot .en-input input:focus{
  border-color: rgba(47,107,255,.65);
  box-shadow: 0 0 0 4px rgba(47,107,255,.18);
}
#enChatbot .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;
}
#enChatbot .en-send.is-active{
  background: linear-gradient(135deg, var(--en-primary), #6aa6ff);
  border:0;
  color:#fff;
}

/* =========================
   Modal (All services)
   ========================= */
#enChatbot .en-modal{ position:fixed; inset:0; z-index:1000000; display:none; }
#enChatbot .en-modal.is-open{ display:block; }
#enChatbot .en-modal-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
#enChatbot .en-modal-card{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  width: min(520px, calc(100vw - 28px)); /* nice on desktop */
  max-height: min(76vh, 640px);
  background: var(--en-surface);
  border:1px solid var(--en-border);
  border-radius:20px;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
#enChatbot .en-modal-head{
  padding:14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--en-border);
}
#enChatbot .en-modal-title{ font-weight:900; color: var(--en-text); font-size:14px; }
#enChatbot .en-modal-sub{ font-size:12px; color: var(--en-muted); margin-top:2px; }
#enChatbot .en-modal-close{
  width:40px; height:40px;
  border-radius:14px;
  cursor:pointer;
  border:1px solid var(--en-border);
  background: transparent;
  color: var(--en-text);
}
#enChatbot .en-modal-body{ padding:10px; overflow:auto; }
#enChatbot .en-modal-item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  margin:8px 0;
  border-radius:14px;
  border:1px solid var(--en-border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color: var(--en-text);
  font-weight:900;
  cursor:pointer;
  transition:.12s ease;
}
#enChatbot .en-modal-item:hover{
  transform: translateY(-1px);
  border-color: rgba(212,175,55,.55);
  box-shadow: 0 12px 22px rgba(0,0,0,.18);
}
#enChatbot .en-modal-arrow{ opacity:.7; font-size:18px; }

/* =========================
   Preset skins (same)
   ========================= */
#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;
}

#enChatbot.en-skin-custom{}

/* =========================
   Animated Border
   ========================= */
#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 2.8s linear infinite;
  z-index: -1;
  pointer-events:none;
}
#enChatbot.en-anim-border .en-panel::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:28px;
  pointer-events:none;
  background:
    radial-gradient(220px 80px at 20% 0%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(220px 80px at 80% 100%, rgba(255,255,255,.08), transparent 62%);
  mix-blend-mode: overlay;
  opacity: .55;
  z-index: -1;
}
@keyframes enBorderSpin{ to{ transform: rotate(360deg); } }

/* Ensure modal always above */
#enChatbot .en-modal{ z-index: 1000000 !important; }
/* =========================
   CCM: Panel position (move down)
   Paste at END of CSS
   ========================= */

/* Desktop + default */
#enChatbot .en-panel{
  bottom: 125px !important; /* pehle 155px tha -> now lower */
}

/* Mobile */
@media (max-width: 768px){
  #enChatbot .en-panel{
    bottom: 105px !important; /* pehle 125px tha -> now lower */
  }
}