/* ═══════════════════════════════════════════════════════════════
   JOHN CHATBOT WIDGET
   Africa Digital Discipleship Project
   Design: Warm earthy greens + amber — rooted, hopeful, African
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables ────────────────────────────────────────────────── */
#adda-root {
  --adda-green:      #1B5E3B;   /* Deep savanna green  */
  --adda-green-mid:  #2D7A55;   /* Mid green           */
  --adda-green-lite: #E8F5EE;   /* Pale green tint     */
  --adda-amber:      #E07B39;   /* Warm amber / sunset */
  --adda-amber-lite: #FEF0E6;   /* Pale amber tint     */
  --adda-cream:      #FDFAF6;   /* Warm background     */
  --adda-ink:        #1A1A1A;   /* Body text           */
  --adda-mid:        #6B7280;   /* Muted text          */
  --adda-line:       #E5E7EB;   /* Dividers            */
  --adda-radius:     16px;
  --adda-shadow:     0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
  --adda-font:       'Georgia', 'Times New Roman', serif; /* Warm, trustworthy */

  /* Position */
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  font-family: var(--adda-font);
}

/* ── Floating Bubble ──────────────────────────────────────────── */
#adda-bubble {
  position:        relative;
  width:           60px;
  height:          60px;
  border-radius:   50%;
  border:          none;
  cursor:          pointer;
  background:      linear-gradient(135deg, var(--adda-green) 0%, var(--adda-green-mid) 100%);
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 4px 16px rgba(27,94,59,0.40), 0 2px 6px rgba(0,0,0,0.15);
  transition:      transform 0.25s cubic-bezier(.34,1.56,.64,1),
                   box-shadow 0.2s ease;
  outline:         none;
}

#adda-bubble:hover {
  transform:  scale(1.08);
  box-shadow: 0 6px 22px rgba(27,94,59,0.50), 0 3px 8px rgba(0,0,0,0.18);
}

#adda-bubble:active { transform: scale(0.96); }

#adda-bubble svg {
  width:      26px;
  height:     26px;
  position:   absolute;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#adda-icon-close {
  opacity:   0;
  transform: rotate(-90deg) scale(0.7);
}

#adda-bubble.adda-active #adda-icon-open  {
  opacity:   0;
  transform: rotate(90deg) scale(0.7);
}
#adda-bubble.adda-active #adda-icon-close {
  opacity:   1;
  transform: rotate(0deg) scale(1);
}

/* Unread dot */
#adda-unread {
  display:         none;
  position:        absolute;
  top:             2px;
  right:           2px;
  width:           20px;
  height:          20px;
  border-radius:   50%;
  background:      var(--adda-amber);
  border:          2px solid #fff;
  color:           #fff;
  font-family:     -apple-system, sans-serif;
  font-size:       11px;
  font-weight:     700;
  align-items:     center;
  justify-content: center;
  animation:       adda-pulse 2s infinite;
}

@keyframes adda-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,123,57,.6); }
  50%       { box-shadow: 0 0 0 6px rgba(224,123,57,0); }
}

/* ── Chat Window ──────────────────────────────────────────────── */
#adda-window {
  position:      absolute;
  bottom:        74px;
  right:         0;
  width:         360px;
  height:        520px;
  background:    var(--adda-cream);
  border-radius: var(--adda-radius);
  box-shadow:    var(--adda-shadow);
  display:       flex;
  flex-direction: column;
  overflow:      hidden;

  /* Hidden state */
  opacity:        0;
  transform:      translateY(20px) scale(0.95);
  pointer-events: none;
  transition:     opacity 0.28s cubic-bezier(.4,0,.2,1),
                  transform 0.28s cubic-bezier(.4,0,.2,1);
  transform-origin: bottom right;
}

#adda-window.adda-open {
  opacity:        1;
  transform:      translateY(0) scale(1);
  pointer-events: all;
}

/* ── Header ───────────────────────────────────────────────────── */
#adda-header {
  background:     linear-gradient(135deg, var(--adda-green) 0%, var(--adda-green-mid) 100%);
  color:          #fff;
  padding:        16px 18px;
  display:        flex;
  align-items:    center;
  gap:            12px;
  flex-shrink:    0;
}

#adda-header-avatar {
  position:        relative;
  width:           44px;
  height:          44px;
  border-radius:   50%;
  background:      rgba(255,255,255,0.18);
  border:          2px solid rgba(255,255,255,0.35);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       20px;
  font-weight:     700;
  flex-shrink:     0;
  letter-spacing:  0;
}

#adda-online-dot {
  position:      absolute;
  bottom:        1px;
  right:         1px;
  width:         11px;
  height:        11px;
  border-radius: 50%;
  background:    #4ADE80;
  border:        2px solid var(--adda-green);
}

#adda-header-name {
  font-size:   16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

#adda-header-sub {
  font-size:   11px;
  opacity:     0.80;
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-style:  italic;
  margin-top:  2px;
}

/* ── Messages Feed ────────────────────────────────────────────── */
#adda-messages {
  flex:       1;
  overflow-y: auto;
  padding:    16px 14px;
  display:    flex;
  flex-direction: column;
  gap:        10px;
  scroll-behavior: smooth;
}

#adda-messages::-webkit-scrollbar { width: 4px; }
#adda-messages::-webkit-scrollbar-track { background: transparent; }
#adda-messages::-webkit-scrollbar-thumb {
  background:    var(--adda-line);
  border-radius: 4px;
}

/* Message row */
.adda-msg {
  display:        flex;
  animation:      adda-slide-in 0.22s ease forwards;
}

.adda-msg-user      { justify-content: flex-end; }
.adda-msg-assistant { justify-content: flex-start; }

@keyframes adda-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* Bubble */
.adda-bubble {
  max-width:     80%;
  padding:       10px 14px;
  border-radius: 18px;
  font-size:     14.5px;
  line-height:   1.55;
  word-break:    break-word;
}

.adda-msg-user .adda-bubble {
  background:         var(--adda-green);
  color:              #fff;
  border-bottom-right-radius: 4px;
  font-family:        -apple-system, 'Helvetica Neue', sans-serif;
}

.adda-msg-assistant .adda-bubble {
  background:         #fff;
  color:              var(--adda-ink);
  border-bottom-left-radius: 4px;
  border:             1px solid var(--adda-line);
  box-shadow:         0 1px 3px rgba(0,0,0,0.06);
}

/* Typing dots */
.adda-typing {
  display:     flex;
  gap:         5px;
  align-items: center;
  padding:     12px 16px;
}

.adda-typing span {
  display:       block;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--adda-mid);
  animation:     adda-dot 1.2s infinite;
}
.adda-typing span:nth-child(2) { animation-delay: 0.18s; }
.adda-typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes adda-dot {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
  40%           { transform: scale(1.1); opacity: 1;   }
}

/* ── Input Footer ─────────────────────────────────────────────── */
#adda-footer {
  display:      flex;
  align-items:  center;
  padding:      10px 12px;
  gap:          8px;
  border-top:   1px solid var(--adda-line);
  background:   #fff;
  flex-shrink:  0;
}

#adda-input {
  flex:          1;
  border:        1.5px solid var(--adda-line);
  border-radius: 22px;
  padding:       9px 16px;
  font-size:     14px;
  font-family:   -apple-system, 'Helvetica Neue', sans-serif;
  color:         var(--adda-ink);
  background:    var(--adda-cream);
  outline:       none;
  transition:    border-color 0.18s ease, box-shadow 0.18s ease;
  resize:        none;
}

#adda-input:focus {
  border-color: var(--adda-green-mid);
  box-shadow:   0 0 0 3px rgba(45,122,85,0.12);
}

#adda-input:disabled {
  opacity:    0.6;
  cursor:     not-allowed;
}

#adda-send {
  width:           40px;
  height:          40px;
  border-radius:   50%;
  border:          none;
  background:      var(--adda-amber);
  color:           #fff;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  transition:      background 0.18s, transform 0.15s;
  outline:         none;
}

#adda-send:hover:not(:disabled) {
  background:  #C86A28;
  transform:   scale(1.07);
}

#adda-send:active:not(:disabled) { transform: scale(0.94); }

#adda-send:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}

#adda-send svg {
  width:  18px;
  height: 18px;
}

/* ── Powered-by ───────────────────────────────────────────────── */
#adda-powered {
  text-align:  center;
  font-size:   10px;
  font-family: -apple-system, sans-serif;
  color:       var(--adda-mid);
  padding:     5px 0 8px;
  opacity:     0.70;
  flex-shrink: 0;
}

/* ── Responsive: Mobile ───────────────────────────────────────── */
@media (max-width: 480px) {
  #adda-root {
    bottom: 16px;
    right:  16px;
  }

  #adda-window {
    position:   fixed;
    bottom:     0;
    right:      0;
    left:       0;
    top:        0;
    width:      100%;
    height:     100%;
    border-radius: 0;
    transform-origin: bottom center;
  }

  #adda-window.adda-open {
    transform: translateY(0) scale(1);
  }
}