/* =====================================================
   DELECON® AI CHAT — PREMIUM CSS v4.0
   File: /public_html/css/delecon-ai-chat.css
   ===================================================== */

:root{
  --delecon-blue:#0b3a8f;
  --delecon-blue2:#0a2f72;
  --delecon-white:#ffffff;
  --delecon-text:#0f172a;
  --delecon-muted:#64748b;
  --delecon-line:#e5e7eb;
  --delecon-bg:#f8fafc;
  --delecon-card:#ffffff;

  --r:18px;
  --shadow: 0 18px 60px rgba(0,0,0,.18);
  --shadow2: 0 10px 30px rgba(0,0,0,.16);
}

/* ✅ Prevent ugly selection glitches on mobile */
#delecon-chat-window,
#delecon-chat-window *{
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

/* =====================================================
   FLOATING AI BUTTON (SS2 Style)
   White center + Blue outer ring
   ===================================================== */

#delecon-chat-launcher{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 64px;
  height: 64px;
  z-index: 99999;
  cursor: pointer;
  user-select: none;
}

.ai-badge-ring{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(circle at 30% 20%, #1e5eff 0%, var(--delecon-blue) 60%, #082a62 100%);
  box-shadow: var(--shadow2);
  padding: 6px;
}

.ai-badge-core{
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .5px;
  color: var(--delecon-blue);
  border: 1px solid rgba(11,58,143,.12);
}

/* =====================================================
   CHAT WINDOW — 9:16 PREMIUM PANEL
   ===================================================== */

#delecon-chat-window{
  position: fixed;
  right: 18px;
  bottom: 92px;
  z-index: 99999;

  width: min(92vw, 390px);
  height: min(76vh, 640px);

  background: var(--delecon-card);
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: none;
  flex-direction: column;

  border: 1px solid rgba(15,23,42,.08);
}

/* ✅ On very small phones keep it tall */
@media (max-width: 420px){
  #delecon-chat-window{
    width: 94vw;
    height: 78vh;
    right: 12px;
    bottom: 88px;
  }
}

/* ✅ Rotation safety */
@media (orientation: landscape){
  #delecon-chat-window{
    height: 86vh;
    width: min(88vw, 420px);
  }
}

/* =====================================================
   HEADER
   ===================================================== */

.chat-header{
  background: linear-gradient(180deg, var(--delecon-blue) 0%, var(--delecon-blue2) 100%);
  color: #fff;
  padding: 14px 14px 12px;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}

.chat-title .brand{
  display:block;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .3px;
}

.chat-title .tag{
  display:block;
  font-size: 11px;
  opacity: .85;
  margin-top: 2px;
}

.chat-actions{
  display:flex;
  gap: 8px;
  align-items:center;
}

.mini-btn{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
  font-size: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mini-btn:active{
  transform: scale(.98);
}

.chat-close{
  font-weight: 900;
}

/* =====================================================
   MESSAGES AREA
   ===================================================== */

#chat-messages{
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 55%, #f8fafc 100%);
}

/* =====================================================
   LEAD BOX (WELCOME) — ONCE ONLY
   ===================================================== */

.lead-box{
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

.lead-top{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.lead-brand strong{
  color: var(--delecon-text);
  font-size: 14px;
}

.lead-sub{
  color: var(--delecon-muted);
  font-size: 12px;
  margin-top: 3px;
}

.lead-note{
  font-size: 13px;
  color: var(--delecon-text);
  line-height: 1.4;
  background: #f1f5ff;
  border: 1px solid rgba(11,58,143,.10);
  padding: 10px 12px;
  border-radius: 14px;
}

/* =====================================================
   CATEGORY BUTTONS (PREMIUM)
   ===================================================== */

.delecon-cat{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0 12px;
}

.delecon-cat button{
  border: 1px solid rgba(11,58,143,.14);
  background: #ffffff;
  color: var(--delecon-text);
  padding: 10px 10px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 12px;
  cursor:pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  transition: transform .08s ease, box-shadow .12s ease;
  text-align: left;
}

.delecon-cat button:active{
  transform: scale(.99);
}

.delecon-cat button:hover{
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

/* =====================================================
   LEAD INPUTS
   ===================================================== */

.lead-form-title{
  margin-top: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--delecon-muted);
  font-weight: 700;
}

.lead-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lead-grid input,
.lead-grid select{
  width: 100%;
  padding: 11px 10px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  font-size: 13px;
  outline: none;
}

.lead-grid input:focus,
.lead-grid select:focus{
  border-color: rgba(11,58,143,.45);
  box-shadow: 0 0 0 3px rgba(11,58,143,.12);
}

@media (max-width: 420px){
  .lead-grid{
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   QUICK ACTION BUTTONS
   ===================================================== */

.quick-actions{
  display:flex;
  gap: 10px;
  margin-top: 12px;
}

.btn-primary,
.btn-secondary{
  flex: 1;
  padding: 11px 10px;
  border-radius: 14px;
  font-weight: 800;
  cursor: pointer;
  font-size: 13px;
}

.btn-primary{
  border: none;
  color: #fff;
  background: linear-gradient(180deg, #1e5eff 0%, var(--delecon-blue) 90%);
  box-shadow: 0 14px 30px rgba(30,94,255,.22);
}

.btn-secondary{
  border: 1px solid rgba(15,23,42,.14);
  background: #fff;
  color: var(--delecon-text);
}

.ai-subline{
  margin-top: 10px;
  font-size: 12px;
  color: var(--delecon-muted);
  line-height: 1.45;
}

/* =====================================================
   CHAT BUBBLES
   ===================================================== */

.bot-msg,
.user-msg{
  max-width: 85%;
  padding: 10px 12px;
  border-radius: 14px;
  margin: 10px 0;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.bot-msg{
  background: #ffffff;
  border: 1px solid rgba(15,23,42,.10);
  color: var(--delecon-text);
  border-top-left-radius: 6px;
}

.user-msg{
  margin-left: auto;
  background: linear-gradient(180deg, #1e5eff 0%, var(--delecon-blue) 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-top-right-radius: 6px;
}

/* =====================================================
   FOOTER INPUT
   ===================================================== */

.chat-footer{
  padding: 10px;
  background: #fff;
  border-top: 1px solid rgba(15,23,42,.10);
  display:flex;
  gap: 8px;
  align-items:center;
}

#user-input{
  flex: 1;
  border: 1px solid rgba(15,23,42,.14);
  padding: 12px 12px;
  border-radius: 14px;
  outline: none;
  font-size: 14px;
  background: #fff;
}

#user-input:disabled{
  opacity: .60;
}

.send-btn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: none;
  cursor:pointer;
  font-weight: 900;
  background: linear-gradient(180deg, #1e5eff 0%, var(--delecon-blue) 100%);
  color:#fff;
  box-shadow: 0 12px 26px rgba(30,94,255,.22);
}

.send-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* =====================================================
   WhatsApp CTA inside chat
   ===================================================== */

.wa-link{
  display:block;
  margin-top: 10px;
  text-align:center;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 900;
  color:#fff;
  background: linear-gradient(180deg, #25D366 0%, #13b954 100%);
  box-shadow: 0 12px 25px rgba(37,211,102,.20);
}