/* =========================================================
   Delltona Chatbot Widget — chatbot.css
   Toggle button joins #contact-icons stack (above WhatsApp)
   Panel floats fixed above the contact-icons cluster
   ========================================================= */

/* ── Toggle Button — matches circle-icon style exactly ───── */
#dlt-chat-toggle {
  display: flex;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.15);
  border: 1px solid rgba(37, 99, 235, 0.4);
  color: #60a5fa;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3), 0 0 0 0 rgba(37, 99, 235, 0.4);
  overflow: hidden;
  white-space: nowrap;
  justify-content: flex-end;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: dlt-btn-pulse 2s infinite;
  text-decoration: none;
  position: relative;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}

@keyframes dlt-btn-pulse {
  0%   { transform: scale(1);    box-shadow: 0 4px 15px rgba(0,0,0,0.3), 0 0 0 0  rgba(37,99,235,0.4); }
  70%  { transform: scale(1.05); box-shadow: 0 4px 15px rgba(0,0,0,0.3), 0 0 0 12px rgba(37,99,235,0); }
  100% { transform: scale(1);    box-shadow: 0 4px 15px rgba(0,0,0,0.3), 0 0 0 0  rgba(37,99,235,0); }
}

/* Icon container — same 50px as circle-icon's icon-wrap */
#dlt-chat-toggle .dlt-icon-wrap {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  position: relative;
}

/* Robot and close icons stacked, swap on open */
#dlt-chat-toggle .dlt-icon-bot,
#dlt-chat-toggle .dlt-icon-close {
  position: absolute;
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(.34,1.56,.64,1);
  display: flex; align-items: center; justify-content: center;
}
#dlt-chat-toggle .dlt-icon-bot   { opacity: 1; transform: scale(1) rotate(0deg); }
#dlt-chat-toggle .dlt-icon-close { opacity: 0; transform: scale(0.5) rotate(-90deg); }

#dlt-chat-toggle.is-open .dlt-icon-bot   { opacity: 0; transform: scale(0.5) rotate(90deg); }
#dlt-chat-toggle.is-open .dlt-icon-close { opacity: 1; transform: scale(1) rotate(0deg); }

/* Expand label on hover — same pattern as widget-whatsapp */
#dlt-chat-toggle .dlt-btn-label {
  opacity: 0;
  margin-right: 14px;
  font-size: 14px;
  font-weight: 500;
  transform: translateX(10px);
  transition: all 0.3s ease;
  order: -1;
  color: #fff;
}

#dlt-chat-toggle:hover {
  background-color: #2563eb;
  border-color: #2563eb;
  color: #fff;
  width: 150px;
  animation: none;
}
#dlt-chat-toggle:hover .dlt-btn-label {
  opacity: 1;
  transform: translateX(0);
}

#dlt-chat-toggle.is-open:hover {
  width: 50px; /* Do not expand if open */
}

#dlt-chat-toggle.is-open .dlt-btn-label {
  display: none;
}

/* Notification badge */
#dlt-chat-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid #050505;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  animation: dlt-badge-pop 0.4s cubic-bezier(.34,1.56,.64,1);
}
#dlt-chat-badge.hidden { display: none; }

@keyframes dlt-badge-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* ── Chat Panel ──────────────────────────────────────────── */
#dlt-chat-panel {
  position: fixed;
  bottom: 210px;   /* sits above the 3-icon stack (3 × 50px + 2 × 12px gap + 25px) */
  right: 25px;
  width: 380px;
  height: 600px;
  max-height: calc(100dvh - 240px); /* Prevents top cutoff on short screens */
  background: rgba(8, 8, 12, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7),
              0 0 0 1px rgba(37,99,235,0.15),
              inset 0 1px 0 rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 99998;
  transform-origin: bottom right;
  transform: scale(0.85) translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), opacity 0.25s ease;
  font-family: 'Poppins', system-ui, sans-serif;
}
#dlt-chat-panel.is-open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}
#dlt-chat-panel * { box-sizing: border-box; margin: 0; padding: 0; font-family: inherit; }

/* ── Panel Header ────────────────────────────────────────── */
.dlt-chat-header {
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(37,99,235,0.25) 0%, rgba(29,78,216,0.15) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.dlt-header-left { display: flex; align-items: center; gap: 10px; }
.dlt-chat-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem; color: #fff; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.3);
}
.dlt-header-name { font-size: 0.9rem; font-weight: 600; color: #ffffff; line-height: 1.2; }
.dlt-header-status {
  font-size: 0.72rem; color: #94a3b8;
  display: flex; align-items: center; gap: 4px; margin-top: 1px;
}
.dlt-status-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
  animation: dlt-status-pulse 2.5s ease-in-out infinite; flex-shrink: 0;
}
@keyframes dlt-status-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}
.dlt-close-btn {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: #94a3b8; font-size: 0.8rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s; flex-shrink: 0;
}
.dlt-close-btn:hover {
  background: rgba(239,68,68,0.15); color: #ef4444;
  border-color: rgba(239,68,68,0.3);
}

/* ── Messages ─────────────────────────────────────────────── */
.dlt-chat-messages {
  flex: 1; overflow-y: auto; padding: 14px 14px 8px;
  display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth;
}
.dlt-chat-messages::-webkit-scrollbar { width: 3px; }
.dlt-chat-messages::-webkit-scrollbar-track { background: transparent; }
.dlt-chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.dlt-msg { display: flex; gap: 7px; animation: dlt-msg-in 0.3s ease; max-width: 100%; }
@keyframes dlt-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.dlt-msg.user { flex-direction: row-reverse; }

.dlt-msg-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 700; color: #fff; flex-shrink: 0; margin-top: 2px;
}
.dlt-msg.user .dlt-msg-avatar { background: rgba(255,255,255,0.1); }

.dlt-msg-bubble {
  max-width: 80%; padding: 9px 13px; border-radius: 14px;
  font-size: 0.84rem; line-height: 1.55; color: #e2e8f0;
}
.dlt-msg.bot .dlt-msg-bubble {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  border-top-left-radius: 4px;
}
.dlt-msg.user .dlt-msg-bubble {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff; border-top-right-radius: 4px;
}
.dlt-msg-bubble strong { color: #93c5fd; font-weight: 600; }
.dlt-msg.user .dlt-msg-bubble strong { color: #bfdbfe; }
.dlt-msg-bubble ul { padding-left: 16px; margin-top: 5px; display: flex; flex-direction: column; gap: 2px; }
.dlt-msg-bubble li { font-size: 0.82rem; }
.dlt-msg-bubble a { color: #60a5fa; text-decoration: underline; text-underline-offset: 2px; }

/* Typing dots */
.dlt-typing-bubble {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  border-top-left-radius: 4px; padding: 11px 14px; border-radius: 14px;
  display: flex; align-items: center; gap: 4px;
}
.dlt-typing-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #64748b;
  animation: dlt-typing 1.2s ease-in-out infinite;
}
.dlt-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.dlt-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes dlt-typing {
  0%, 80%, 100% { transform: translateY(0);   background: #64748b; }
  40%            { transform: translateY(-5px); background: #3b82f6; }
}

/* ── Chips ───────────────────────────────────────────────── */
.dlt-chips-wrap { padding: 5px 12px 8px; flex-shrink: 0; }
.dlt-chips-label {
  font-size: 0.68rem; color: #64748b;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px;
}
.dlt-chips-row {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 3px;
  scrollbar-width: none; flex-wrap: nowrap;
}
.dlt-chips-row::-webkit-scrollbar { display: none; }
.dlt-chip {
  white-space: nowrap; padding: 5px 12px; border-radius: 18px;
  background: rgba(37,99,235,0.12); border: 1px solid rgba(37,99,235,0.35);
  color: #93c5fd; font-size: 0.76rem; font-weight: 500;
  cursor: pointer; transition: background 0.2s, transform 0.15s; flex-shrink: 0;
  font-family: inherit;
}
.dlt-chip:hover {
  background: rgba(37,99,235,0.25); border-color: rgba(37,99,235,0.6);
  color: #bfdbfe; transform: translateY(-1px);
}

/* ── Input ───────────────────────────────────────────────── */
.dlt-input-area {
  padding: 10px 12px 12px; border-top: 1px solid rgba(255,255,255,0.07);
  display: flex; gap: 7px; align-items: center; flex-shrink: 0;
}
#dlt-chat-input {
  flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px; padding: 9px 14px; color: #e2e8f0; font-size: 0.84rem;
  outline: none; transition: border-color 0.2s, background 0.2s; min-width: 0;
  font-family: inherit;
}
#dlt-chat-input::placeholder { color: #475569; }
#dlt-chat-input:focus { border-color: rgba(37,99,235,0.6); background: rgba(37,99,235,0.06); }

#dlt-chat-send {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #1d4ed8); border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 10px rgba(37,99,235,0.4);
}
#dlt-chat-send:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(37,99,235,0.6); }
#dlt-chat-send:active { transform: scale(0.95); }
#dlt-chat-send svg { width: 15px; height: 15px; stroke: #fff; fill: none; }

/* Powered by */
.dlt-powered { text-align: center; padding: 0 0 5px; font-size: 0.66rem; color: #334155; }
.dlt-powered a { color: #3b82f6; text-decoration: none; }

/* ── Responsive Mobile & Tablet ──────────────────────────── */
@media (max-width: 768px) {
  #dlt-chat-panel {
    width: 350px;
    bottom: 180px; /* Sits above scaled-down icons (45px) */
    max-height: calc(100dvh - 220px);
    right: 15px;
  }
}

@media (max-width: 480px) {
  #dlt-chat-panel {
    width: calc(100vw - 30px);
    right: 15px;
    bottom: 180px;
    height: calc(100dvh - 220px);
    max-height: 500px;
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #dlt-chat-toggle { animation: none; }
  #dlt-chat-panel { transition: opacity 0.15s ease; }
}