/* ============================================
   NESHARA DIGITAL — Chatbot Widget Styles
   ============================================
   This file contains ALL the styling for the
   AI chatbot widget (Nasha) that appears in
   the bottom-right corner of the website.

   Includes styles for:
   - The toggle button (purple circle)
   - The chat window (popup panel)
   - Message bubbles (bot and user)
   - Typing indicator (animated dots)
   - Input area and send button
   - Quick reply chips
   - Mobile responsive adjustments
   ============================================ */
/* ============================================
   NESHARA DIGITAL — Chatbot Styles
   ============================================ */

/* ══════════════════════════════════════
   CHATBOT WIDGET
══════════════════════════════════════ */

/* ── Toggle Button ── */
#nb-toggle{
  position:fixed;bottom:28px;right:28px;
  width:62px;height:62px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,#32174D,#5a2a8a);
  box-shadow:0 8px 32px rgba(50,23,77,.6),0 0 0 0 rgba(201,168,76,.4);
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;
  z-index:9999;
  animation:pulseRing 3s ease infinite;
}
#nb-toggle:hover{transform:scale(1.08);box-shadow:0 12px 40px rgba(50,23,77,.8),0 0 0 8px rgba(201,168,76,.15)}
#nb-toggle.open{transform:scale(1.08) rotate(180deg)}
#nb-toggle svg{transition:transform .3s,opacity .3s}
#nb-toggle .ico-chat{position:absolute;opacity:1;transition:opacity .25s,transform .25s}
#nb-toggle .ico-close{position:absolute;opacity:0;transform:rotate(-90deg);transition:opacity .25s,transform .25s}
#nb-toggle.open .ico-chat{opacity:0;transform:rotate(90deg)}
#nb-toggle.open .ico-close{opacity:1;transform:rotate(0deg)}

@keyframes pulseRing{
  0%{box-shadow:0 8px 32px rgba(50,23,77,.6),0 0 0 0 rgba(201,168,76,.5)}
  70%{box-shadow:0 8px 32px rgba(50,23,77,.6),0 0 0 14px rgba(201,168,76,0)}
  100%{box-shadow:0 8px 32px rgba(50,23,77,.6),0 0 0 0 rgba(201,168,76,0)}
}

/* ── Notification dot ── */
#nb-dot{
  position:absolute;top:2px;right:2px;
  width:14px;height:14px;border-radius:50%;
  background:#C9A84C;border:2px solid #0E0716;
  animation:dotPop .4s cubic-bezier(.34,1.56,.64,1);
  transition:opacity .3s,transform .3s;
}
#nb-dot.hidden{opacity:0;transform:scale(0)}
@keyframes dotPop{from{transform:scale(0)}to{transform:scale(1)}}

/* ── Chat Window ── */
#nb-window{
  position:fixed;bottom:104px;right:28px;
  width:380px;max-width:calc(100vw - 40px);
  height:580px;max-height:calc(100vh - 130px);
  background:#13082A;
  border:1px solid rgba(201,168,76,.25);
  border-radius:20px;
  display:flex;flex-direction:column;
  box-shadow:0 24px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04) inset;
  transform:scale(.85) translateY(20px);transform-origin:bottom right;
  opacity:0;pointer-events:none;
  transition:transform .35s cubic-bezier(.34,1.3,.64,1),opacity .25s ease;
  z-index:9998;overflow:hidden;
}
#nb-window.open{
  transform:scale(1) translateY(0);
  opacity:1;pointer-events:all;
}

/* ── Header ── */
#nb-header{
  background:linear-gradient(135deg,#32174D 0%,#1e0d35 100%);
  padding:16px 18px 14px;
  border-bottom:1px solid rgba(201,168,76,.2);
  display:flex;align-items:center;gap:12px;
  flex-shrink:0;
  position:relative;overflow:hidden;
}
#nb-header::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 80% 50%,rgba(201,168,76,.08),transparent 70%);
  pointer-events:none;
}
.nb-avatar{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#C9A84C,#7a4fa0);
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:700;color:#fff;
  box-shadow:0 4px 12px rgba(201,168,76,.3);
  position:relative;
}
.nb-avatar::after{
  content:'';position:absolute;bottom:1px;right:1px;
  width:10px;height:10px;border-radius:50%;
  background:#4ade80;border:2px solid #13082A;
}
.nb-header-info{flex:1}
.nb-header-info h3{
  font-family:'Cormorant Garamond',serif;
  font-size:17px;font-weight:700;color:#fff;letter-spacing:.3px;
  line-height:1.2;
}
.nb-header-info span{font-size:11.5px;color:rgba(201,168,76,.8);letter-spacing:.5px}
.nb-close-btn{
  width:28px;height:28px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;font-size:14px;
}
.nb-close-btn:hover{background:rgba(255,255,255,.15);color:#fff}

/* ── Quick Replies ── */
#nb-quick{
  padding:10px 14px 6px;
  display:flex;gap:7px;flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
  background:rgba(0,0,0,.15);
}
.nb-qbtn{
  font-family:'Outfit',sans-serif;font-size:11px;font-weight:500;
  padding:5px 11px;border-radius:20px;border:1px solid rgba(201,168,76,.35);
  background:rgba(201,168,76,.08);color:#C9A84C;cursor:pointer;
  transition:all .2s;white-space:nowrap;
  letter-spacing:.3px;
}
.nb-qbtn:hover{background:rgba(201,168,76,.18);border-color:#C9A84C;color:#E8C96A}

/* ── Messages ── */
#nb-msgs{
  flex:1;overflow-y:auto;padding:16px 14px;
  display:flex;flex-direction:column;gap:12px;
  scroll-behavior:smooth;
}
#nb-msgs::-webkit-scrollbar{width:4px}
#nb-msgs::-webkit-scrollbar-track{background:transparent}
#nb-msgs::-webkit-scrollbar-thumb{background:rgba(201,168,76,.2);border-radius:4px}

/* ── Message Bubbles ── */
.nb-msg{display:flex;gap:8px;animation:msgSlide .3s cubic-bezier(.34,1.2,.64,1)}
@keyframes msgSlide{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.nb-msg.bot{align-items:flex-end}
.nb-msg.user{align-items:flex-end;flex-direction:row-reverse}

.nb-msg-avatar{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#C9A84C,#7a4fa0);
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-size:12px;font-weight:700;color:#fff;
}

.nb-bubble{
  max-width:82%;padding:10px 14px;border-radius:16px;
  font-size:13.5px;line-height:1.6;
  animation:bubbleIn .25s ease;
}
@keyframes bubbleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}

.nb-msg.bot .nb-bubble{
  background:rgba(50,23,77,.6);
  border:1px solid rgba(201,168,76,.15);
  color:rgba(255,255,255,.92);
  border-bottom-left-radius:4px;
}
.nb-msg.user .nb-bubble{
  background:linear-gradient(135deg,#32174D,#5a2a8a);
  border:1px solid rgba(201,168,76,.2);
  color:#fff;
  border-bottom-right-radius:4px;
}

/* ── Typing indicator ── */
.nb-typing{display:flex;gap:5px;align-items:center;padding:4px 2px}
.nb-typing span{
  width:7px;height:7px;border-radius:50%;background:#C9A84C;opacity:.6;
  animation:typingDot 1.2s ease infinite;
}
.nb-typing span:nth-child(2){animation-delay:.2s}
.nb-typing span:nth-child(3){animation-delay:.4s}
@keyframes typingDot{0%,60%,100%{transform:translateY(0);opacity:.6}30%{transform:translateY(-5px);opacity:1}}

/* ── Input Area ── */
#nb-footer{
  padding:12px 14px;
  border-top:1px solid rgba(255,255,255,.07);
  display:flex;gap:8px;align-items:flex-end;
  background:rgba(0,0,0,.2);flex-shrink:0;
}
#nb-input{
  flex:1;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:10px 14px;
  color:#fff;font-family:'Outfit',sans-serif;font-size:13.5px;
  resize:none;max-height:100px;min-height:42px;height:42px;
  transition:border-color .2s,background .2s;outline:none;
  overflow-y:hidden;line-height:1.5;
}
#nb-input::placeholder{color:rgba(255,255,255,.3)}
#nb-input:focus{border-color:rgba(201,168,76,.4);background:rgba(255,255,255,.09)}
#nb-send{
  width:42px;height:42px;border-radius:12px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#C9A84C,#a07828);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform .2s,box-shadow .2s,opacity .2s;
  box-shadow:0 4px 16px rgba(201,168,76,.3);
}
#nb-send:hover{transform:scale(1.06);box-shadow:0 6px 20px rgba(201,168,76,.5)}
#nb-send:active{transform:scale(.96)}
#nb-send:disabled{opacity:.4;cursor:not-allowed;transform:none}
#nb-send svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Powered by ── */
#nb-powered{
  text-align:center;padding:6px;font-size:10.5px;
  color:rgba(255,255,255,.2);letter-spacing:.5px;
  background:rgba(0,0,0,.15);
}
#nb-powered span{color:rgba(201,168,76,.5)}

/* ── Markdown-like formatting in messages ── */
.nb-bubble strong{color:#E8C96A;font-weight:600}
.nb-bubble em{color:rgba(255,255,255,.7)}
.nb-bubble a{color:#C9A84C;text-decoration:underline}
.nb-bubble ul{margin:6px 0 4px 16px}
.nb-bubble ul li{margin-bottom:3px;color:rgba(255,255,255,.85)}
.nb-bubble br{display:block;content:'';margin:3px 0}

/* ── Particles on open ── */
.nb-particle{
  position:fixed;width:6px;height:6px;border-radius:50%;
  background:#C9A84C;pointer-events:none;z-index:9997;
  animation:particleFly .8s ease forwards;
}
@keyframes particleFly{
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}
}

/* ── Responsive ── */
@media(max-width:440px){
  #nb-window{right:16px;bottom:96px;width:calc(100vw - 32px)}
  #nb-toggle{right:16px;bottom:20px}
}