/* =========================================================
   ZOFA TECH CHATBOT (ZT UI) - PREMIUM RESPONSIVE v5
   Works with:
   #ztChatBtn #ztChatPopup #ztChatClose #ztChatContent #ztChatInput #ztChatSend
   ========================================================= */

/* ---------- Theme variables ---------- */
:root{
  --zt-accent: var(--accent-color, #ff4a17);
  --zt-accent-dark: color-mix(in srgb, var(--zt-accent), #000 18%);

  --zt-shell-top: #0f172a;
  --zt-shell: #0b1220;

  --zt-border: rgba(255,255,255,.12);
  --zt-shadow: 0 18px 55px rgba(0,0,0,.35);

  --zt-chat-bg: #f4f6fb;
  --zt-text: #111827;
  --zt-muted: #6b7280;

  --zt-bot-bubble: #ffffff;
  --zt-user-bubble: color-mix(in srgb, var(--zt-accent), #fff 86%);

  --zt-radius: 18px;
  --zt-radius-sm: 14px;

  --zt-font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ---------- Floating Button ---------- */
#ztChatBtn{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  z-index: 99999;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#fff;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.24), transparent 58%),
    linear-gradient(135deg, var(--zt-accent), var(--zt-accent-dark));
  box-shadow: 0 16px 44px rgba(0,0,0,.33);

  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
#ztChatBtn:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 24px 60px rgba(0,0,0,.40);
}
#ztChatBtn i{ font-size: 22px; }

/* ---------- Popup Container ---------- */
#ztChatPopup{
  position: fixed;
  right: 22px;
  bottom: 98px;

  width: 410px;
  max-width: calc(100vw - 44px);

  height: 620px;
  max-height: 78vh;

  z-index: 99999;

  display: none;
  flex-direction: column;

  border-radius: var(--zt-radius);
  overflow: hidden;
  border: 1px solid var(--zt-border);
  box-shadow: var(--zt-shadow);

  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.10), transparent 40%),
    linear-gradient(180deg, rgba(11,18,32,.98), rgba(11,18,32,.92));

  opacity: 0;
  transform: translateY(12px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}

#ztChatPopup.active{
  display:flex;
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---------- Header ---------- */
.zt-chat-header{
  padding: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;

  border-bottom: 1px solid rgba(255,255,255,.08);
  color:#fff;

  background:
    radial-gradient(circle at 15% 15%, rgba(255,255,255,.10), transparent 45%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(10px);
}

.zt-chat-title{
  display:flex;
  gap: 12px;
  align-items:center;
}

.zt-chat-badge{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.zt-chat-name{
  font-family: var(--zt-font);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .2px;
  line-height: 1.1;
}

.zt-chat-sub{
  margin-top: 2px;
  font-size: 12px;
  color: rgba(229,231,235,.80);
}

/* Close button */
#ztChatClose{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 0;
  cursor:pointer;

  background: rgba(255,255,255,.06);
  color:#fff;

  display:flex;
  align-items:center;
  justify-content:center;

  transition: background .18s ease, transform .18s ease;
}
#ztChatClose:hover{
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

/* ---------- Content ---------- */
#ztChatContent{
  flex: 1;
  padding: 14px 14px 10px 14px;
  overflow-y: auto;
  scroll-behavior: smooth;

  font-family: var(--zt-font);

  /* ✅ light chat canvas for readability */
  background:
    radial-gradient(circle at 20% 10%, rgba(255,74,23,.12), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.55), transparent 45%),
    var(--zt-chat-bg);
}

/* Scrollbar */
#ztChatContent::-webkit-scrollbar{ width: 10px; }
#ztChatContent::-webkit-scrollbar-track{ background: rgba(0,0,0,.05); }
#ztChatContent::-webkit-scrollbar-thumb{
  background: rgba(17,24,39,.25);
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,.65);
}
#ztChatContent::-webkit-scrollbar-thumb:hover{ background: rgba(17,24,39,.35); }

/* selection */
#ztChatPopup ::selection{
  background: color-mix(in srgb, var(--zt-accent), transparent 70%);
  color: #111;
}

/* ---------- Messages ---------- */
.chat-message{
  margin: 10px 0;
  display:flex;
  flex-direction: column;
}

/* Header row */
.message-header{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-bottom: 6px;
}

.message-avatar{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;

  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

/* Bot vs user avatar */
.bot-avatar{
  background: #fff;
  color: #111827;
}
.user-avatar{
  background: linear-gradient(135deg, var(--zt-accent), var(--zt-accent-dark));
  color:#fff;
  border-color: rgba(255,74,23,.30);
}

/* Header text */
.message-header-info{
  display:flex;
  gap:10px;
  align-items:baseline;
  color: rgba(17,24,39,.85);
}
.message-header-info strong{
  font-size: 12.5px;
  font-weight: 800;
}
.message-time{
  font-size: 11px;
  color: rgba(107,114,128,.90);
}

/* Bubble */
.message-text{
  max-width: 86%;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(17,24,39,.08);
  background: var(--zt-bot-bubble);

  color: var(--zt-text);
  font-size: 13.5px;
  line-height: 1.5;
  word-wrap: break-word;

  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

/* Bot bubble shape */
.bot-message .message-text{
  margin-right: auto;
  border-top-left-radius: 6px;
}

/* User alignment */
.user-message{ text-align: right; }
.user-message .message-header{ flex-direction: row-reverse; }
.user-message .message-text{
  margin-left: auto;
  text-align: left;
  background: var(--zt-user-bubble);
  border-color: rgba(255,74,23,.22);
  border-top-right-radius: 6px;
}

/* ---------- Footer ---------- */
.zt-chat-footer{
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.08);

  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.08), transparent 55%),
    rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}

.zt-chat-input-wrap{
  display:flex;
  gap:10px;
  align-items:center;
}

#ztChatInput{
  flex: 1;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color:#fff;
  outline:none;

  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#ztChatInput::placeholder{ color: rgba(229,231,235,.60); }

#ztChatInput:focus{
  border-color: color-mix(in srgb, var(--zt-accent), transparent 35%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--zt-accent), transparent 82%);
  background: rgba(255,255,255,.08);
}

#ztChatSend{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 0;
  cursor:pointer;

  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(135deg, var(--zt-accent), var(--zt-accent-dark));
  color:#fff;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow: 0 14px 28px rgba(0,0,0,.26);
  transition: transform .18s ease, filter .18s ease;
}
#ztChatSend:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
}

/* hint */
.zt-chat-hint{
  margin-top: 10px;
  font-size: 11.5px;
  color: rgba(229,231,235,.72);
}

/* CTA button inside messages */
.zt-chat-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 13px;

  color:#fff !important;
  background: var(--zt-accent);
  border: 1px solid color-mix(in srgb, var(--zt-accent), transparent 45%);
  text-decoration: none !important;

  transition: transform .18s ease, filter .18s ease;
}
.zt-chat-cta-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* ---------- Tablet ---------- */
@media (max-width: 900px){
  #ztChatPopup{
    width: 380px;
    height: 72vh;
    bottom: 92px;
  }
}

/* ---------- Mobile (Bottom Sheet Style) ---------- */
@media (max-width: 520px){
  #ztChatPopup{
    left: 12px;
    right: 12px;
    width: auto;

    bottom: 86px;
    height: 78vh;

    border-radius: 18px;
  }
  #ztChatBtn{
    right: 16px;
    bottom: 16px;
  }
}

/* Small height screens */
@media (max-height: 650px){
  #ztChatPopup{ height: 72vh; }
}
/* Typing dots animation */
.zt-typing-dots {
  display: inline-block;
  width: 48px;
  height: 12px;
  position: relative;
}

.zt-typing-dots::before,
.zt-typing-dots::after,
.zt-typing-dots span {
  content: "";
  position: absolute;
  top: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
  animation: ztDotBounce 1.2s infinite ease-in-out;
}

.zt-typing-dots::before { left: 0; animation-delay: 0s; }
.zt-typing-dots span { left: 16px; animation-delay: 0.15s; }
.zt-typing-dots::after { left: 32px; animation-delay: 0.3s; }

@keyframes ztDotBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .4; }
  40% { transform: translateY(-6px); opacity: 1; }
}

/* If you used <span class="zt-typing-dots"></span> only,
   then add this JS or HTML patch: we can inject middle dot span */