/* ══════════════════════════════════════
   NYMBI — Chatbot Styles
   ══════════════════════════════════════ */

/* ── Launcher Button ── */
.nymbi-launcher {
  position: fixed; bottom: 24px; right: 24px; z-index: 900;
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, #7c5cbf, #9b7dd4);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(124,92,191,.4);
  transition: all .3s ease;
}
.nymbi-launcher:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(124,92,191,.5);
}
.nymbi-launcher.hidden { display: none; }
.nymbi-launcher-icon {
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.nymbi-launcher .nymbi-badge {
  position: absolute; top: -2px; right: -2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #E84393; border: 2px solid #1E1533;
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 700; color: #fff;
  opacity: 0; transform: scale(0);
  transition: all .3s ease;
}
.nymbi-launcher .nymbi-badge.show {
  opacity: 1; transform: scale(1);
}

/* ── Pulse ring on launcher ── */
.nymbi-launcher::before {
  content: ''; position: absolute; inset: -6px;
  border-radius: 50%; border: 2px solid rgba(124,92,191,.4);
  animation: nymbiPulse 2s ease-in-out infinite;
}
@keyframes nymbiPulse {
  0%, 100% { transform: scale(1); opacity: .6; }
  50% { transform: scale(1.15); opacity: 0; }
}

/* ── Chat Window ── */
.nymbi-window {
  position: fixed; bottom: 96px; right: 24px; z-index: 901;
  width: 380px; max-height: 520px;
  background: #2a1f42;
  border: 1px solid rgba(201,184,219,.14);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0,0,0,.55);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transform: translateY(16px) scale(.96);
  transition: all .3s ease;
  overflow: hidden;
}
.nymbi-window.open {
  opacity: 1; visibility: visible;
  transform: translateY(0) scale(1);
}

/* ── Header ── */
.nymbi-header {
  padding: 16px 20px;
  background: linear-gradient(135deg, #31254d, #2a1f42);
  border-bottom: 1px solid rgba(201,184,219,.1);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.nymbi-header-left {
  display: flex; align-items: center; gap: 12px;
}
.nymbi-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #7c5cbf, #9b7dd4);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
  padding: 2px;
}
.nymbi-header-info h4 {
  font-size: .92rem; font-weight: 700; color: #fff;
  margin: 0; line-height: 1.2;
}
.nymbi-header-info span {
  font-size: .72rem; color: #C9B8DB; display: flex;
  align-items: center; gap: 5px;
}
.nymbi-header-info span::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #10b981;
}
.nymbi-close {
  background: none; border: none; cursor: pointer;
  color: #8b7ba3; font-size: 1.2rem; padding: 4px;
  border-radius: 6px; transition: all .2s;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
}
.nymbi-close:hover {
  background: rgba(255,255,255,.08); color: #fff;
}

/* ── Messages Area ── */
.nymbi-messages {
  flex: 1; overflow-y: auto; padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 200px; max-height: 320px;
}
.nymbi-messages::-webkit-scrollbar { width: 4px; }
.nymbi-messages::-webkit-scrollbar-track { background: transparent; }
.nymbi-messages::-webkit-scrollbar-thumb {
  background: rgba(201,184,219,.2); border-radius: 4px;
}

/* Message bubbles */
.nymbi-msg {
  max-width: 85%; padding: 12px 16px;
  border-radius: 14px; font-size: .9rem;
  line-height: 1.55; word-wrap: break-word;
  animation: nymbiMsgIn .3s ease forwards;
}
@keyframes nymbiMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nymbi-msg.bot {
  background: #31254d; color: #ddd0eb;
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}
.nymbi-msg.user {
  background: linear-gradient(135deg, #E84393, #FF6B9D);
  color: #fff;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}

/* Typing indicator */
.nymbi-typing {
  display: flex; gap: 5px; padding: 12px 16px;
  background: #31254d; border-radius: 14px;
  border-bottom-left-radius: 4px;
  align-self: flex-start; max-width: 70px;
}
.nymbi-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: #8b7ba3;
  animation: nymbiDot 1.2s ease-in-out infinite;
}
.nymbi-typing span:nth-child(2) { animation-delay: .15s; }
.nymbi-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes nymbiDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* ── Quick Replies ── */
.nymbi-quick-replies {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 20px 4px;
  animation: nymbiMsgIn .3s ease forwards;
}
.nymbi-quick-btn {
  padding: 8px 16px; border-radius: 20px;
  background: rgba(232,67,147,.1);
  border: 1px solid rgba(232,67,147,.3);
  color: #FF6B9D; font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: all .2s;
  font-family: inherit;
}
.nymbi-quick-btn:hover {
  background: rgba(232,67,147,.2);
  border-color: #E84393;
  transform: translateY(-1px);
}

/* ── Input Area ── */
.nymbi-input-area {
  padding: 14px 16px;
  border-top: 1px solid rgba(201,184,219,.1);
  display: flex; gap: 10px; align-items: center;
  flex-shrink: 0;
  background: #241a3a;
}
.nymbi-input {
  flex: 1; padding: 10px 14px;
  background: #31254d; border: 1px solid rgba(201,184,219,.12);
  border-radius: 10px; color: #ddd0eb;
  font-size: .88rem; font-family: inherit;
  outline: none; transition: border-color .2s;
}
.nymbi-input::placeholder { color: #8b7ba3; }
.nymbi-input:focus { border-color: rgba(232,67,147,.4); }
.nymbi-send {
  width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(135deg, #F97316, #FF6B9D);
  border: none; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; transition: all .2s; flex-shrink: 0;
}
.nymbi-send:hover {
  transform: scale(1.06);
  box-shadow: 0 3px 12px rgba(249,115,22,.35);
}
.nymbi-send:disabled {
  opacity: .4; cursor: not-allowed; transform: none;
  box-shadow: none;
}

/* ── Scared reaction on lightning ── */
.nymbi-launcher.scared {
  animation: nymbiScared .5s ease;
}
@keyframes nymbiScared {
  0%   { transform: scale(1) rotate(0deg); }
  15%  { transform: scale(1.15) rotate(-8deg); }
  30%  { transform: scale(0.92) rotate(6deg); }
  45%  { transform: scale(1.08) rotate(-4deg); }
  60%  { transform: scale(0.96) rotate(3deg); }
  80%  { transform: scale(1.03) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .nymbi-window {
    right: 8px; left: 8px; bottom: 88px;
    width: auto; max-height: 70vh;
  }
  .nymbi-launcher { bottom: 16px; right: 16px; }
}