/* AZFancy Chat Widget Styles — WordPress Edition */
:root {
  --azf-primary:    #1a73e8;
  --azf-primary-dk: #1558c0;
  --azf-bg:         #ffffff;
  --azf-surface:    #f8fafc;
  --azf-border:     #e2e8f0;
  --azf-text:       #1e293b;
  --azf-muted:      #64748b;
  --azf-bot-bg:     #f1f5f9;
  --azf-shadow:     0 20px 60px rgba(0,0,0,0.15);
  --azf-r:          16px;
  --azf-w:          380px;
  --azf-h:          560px;
}

/* Scope all styles inside the widget root */
#azf-chat-widget-root *,
#azf-chat-widget-root *::before,
#azf-chat-widget-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Launcher button ──────────────────────────────────────────────────── */
#azf-launcher {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--azf-primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(26, 115, 232, 0.4);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 999999;
  outline: none;
}
#azf-launcher:hover  { transform: scale(1.08); box-shadow: 0 6px 28px rgba(26, 115, 232, 0.5); }
#azf-launcher:active { transform: scale(0.96); }

#azf-badge {
  position: absolute;
  top: -2px; right: -2px;
  width: 20px; height: 20px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid #fff;
  font-size: 11px; font-weight: 700;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
}

/* ── Chat window ──────────────────────────────────────────────────────── */
#azf-window {
  position: fixed;
  bottom: 96px;
  right: 24px;
  width: var(--azf-w);
  height: var(--azf-h);
  background: var(--azf-bg);
  border-radius: var(--azf-r);
  box-shadow: var(--azf-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 999998;
  border: 1px solid var(--azf-border);
  transform-origin: bottom right;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#azf-window.azf-hidden {
  opacity: 0;
  transform: scale(0.8) translateY(20px);
  pointer-events: none;
}
#azf-window.azf-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ── Header ───────────────────────────────────────────────────────────── */
#azf-header {
  background: linear-gradient(135deg, var(--azf-primary) 0%, var(--azf-primary-dk) 100%);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
#azf-hdr-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
#azf-hdr-info { flex: 1; }
#azf-hdr-name   { font-size: 15px; font-weight: 700; color: #fff; }
#azf-hdr-status {
  font-size: 12px; color: rgba(255,255,255,0.8);
  margin-top: 2px; display: flex; align-items: center; gap: 5px;
}
#azf-dot {
  width: 7px; height: 7px;
  border-radius: 50%; background: #4ade80; display: inline-block;
}
#azf-close {
  background: rgba(255,255,255,0.15);
  border: none; border-radius: 8px;
  width: 32px; height: 32px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: #fff; transition: background 0.2s; flex-shrink: 0;
}
#azf-close:hover { background: rgba(255,255,255,0.25); }

/* ── Messages area ────────────────────────────────────────────────────── */
#azf-msgs {
  flex: 1; overflow-y: auto;
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 10px;
  scroll-behavior: smooth;
}
#azf-msgs::-webkit-scrollbar         { width: 4px; }
#azf-msgs::-webkit-scrollbar-track   { background: transparent; }
#azf-msgs::-webkit-scrollbar-thumb   { background: var(--azf-border); border-radius: 4px; }

.azf-message {
  display: flex; gap: 8px; max-width: 100%;
  animation: azfIn 0.22s ease;
}
@keyframes azfIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.azf-message.azf-bot  { align-items: flex-end; }
.azf-message.azf-user { flex-direction: row-reverse; }

.azf-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--azf-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0; margin-bottom: 4px;
}

.azf-bubble {
  padding: 10px 14px; border-radius: 18px;
  font-size: 14px; line-height: 1.55;
  max-width: 82%; word-break: break-word;
}
.azf-bot  .azf-bubble { background: var(--azf-bot-bg); color: var(--azf-text); border-bottom-left-radius: 5px; }
.azf-user .azf-bubble { background: var(--azf-primary); color: #fff; border-bottom-right-radius: 5px; }
.azf-bubble strong { font-weight: 700; }
.azf-bubble ul { padding-left: 16px; margin: 5px 0 3px; }
.azf-bubble li { margin-bottom: 3px; }
.azf-bubble a  { color: inherit; }

/* ── Typing indicator ─────────────────────────────────────────────────── */
#azf-typing     { display: none; }
#azf-typing.azf-vis { display: flex; }

.azf-typing-bub {
  background: var(--azf-bot-bg);
  border-radius: 18px; border-bottom-left-radius: 5px;
  padding: 12px 16px; display: flex; gap: 4px; align-items: center;
}
.azf-dot2 {
  width: 7px; height: 7px; border-radius: 50%;
  background: #94a3b8; animation: azfBounce 1.2s infinite;
}
.azf-dot2:nth-child(2) { animation-delay: 0.2s; }
.azf-dot2:nth-child(3) { animation-delay: 0.4s; }
@keyframes azfBounce {
  0%, 80%, 100% { transform: translateY(0); }
  40%           { transform: translateY(-6px); }
}

/* ── Quick replies ────────────────────────────────────────────────────── */
#azf-qr {
  padding: 0 14px 10px;
  display: flex; flex-wrap: wrap; gap: 7px; flex-shrink: 0;
}
.azf-qr-btn {
  background: var(--azf-primary);
  border: none;
  color: #fff;
  border-radius: 20px;
  padding: 8px 16px; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all 0.18s; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.3);
}
.azf-qr-btn:hover { background: var(--azf-primary-dk); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(26, 115, 232, 0.4); }

/* ── Input area ───────────────────────────────────────────────────────── */
#azf-inp-area {
  padding: 10px 14px 14px;
  border-top: 1px solid var(--azf-border);
  display: flex; gap: 10px; align-items: flex-end;
  flex-shrink: 0; background: #fff;
}
#azf-inp {
  flex: 1;
  border: 1.5px solid var(--azf-border);
  border-radius: 22px; padding: 10px 14px;
  font-size: 14px; color: var(--azf-text); background: var(--azf-surface);
  outline: none; resize: none; max-height: 100px; min-height: 42px;
  line-height: 1.5; transition: border-color 0.2s; font-family: inherit;
}
#azf-inp:focus       { border-color: var(--azf-primary); background: #fff; }
#azf-inp::placeholder { color: #94a3b8; }
#azf-inp:disabled    { opacity: 0.6; }

#azf-attach {
  background: none; border: none; cursor: pointer; padding: 6px;
  opacity: .5; display: flex; align-items: center; flex-shrink: 0;
}
#azf-attach:hover { opacity: .8; }

#azf-send {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--azf-primary); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all 0.2s; color: #fff;
}
#azf-send:hover    { background: var(--azf-primary-dk); transform: scale(1.05); }
#azf-send:disabled { background: #cbd5e1; cursor: not-allowed; transform: none; }

/* ── Footer ───────────────────────────────────────────────────────────── */
#azf-footer {
  padding: 5px 0 10px; text-align: center;
  font-size: 11px; color: #94a3b8; flex-shrink: 0;
}
#azf-footer a { color: var(--azf-primary); text-decoration: none; }

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #azf-window {
    bottom: 0; right: 0;
    width: 100vw; height: 100vh;
    border-radius: 0;
  }
  #azf-launcher { bottom: 16px; right: 16px; }
}