/* AI Shop Assistant Pro v2 — chatbot.css */

/* ── Variables ──────────────────────────────────────────────────────────── */
:root {
  --aisa-primary    : #10b981;
  --aisa-primary-light: #10b98122;
  --aisa-bg         : #ffffff;
  --aisa-text       : #1f2937;
  --aisa-muted      : #6b7280;
  --aisa-border     : #e5e7eb;
  --aisa-user-bg    : var(--aisa-primary);
  --aisa-bot-bg     : #f3f4f6;
  --aisa-shadow     : 0 20px 60px rgba(0,0,0,.16);
  --aisa-radius     : 20px;
  --aisa-z          : 999998;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
#aisa-root, #aisa-root * {
  box-sizing : border-box;
  font-family: 'Segoe UI', Tahoma, system-ui, sans-serif;
  line-height: 1.5;
}

/* ── Toggle button ───────────────────────────────────────────────────────── */
#aisa-toggle {
  position    : fixed;
  bottom      : 24px;
  right       : 24px;
  width       : 60px;
  height      : 60px;
  border-radius: 50%;
  background  : var(--aisa-primary);
  color       : #fff;
  border      : none;
  cursor      : pointer;
  font-size   : 26px;
  display     : flex;
  align-items : center;
  justify-content: center;
  box-shadow  : 0 6px 28px rgba(16,185,129,.45);
  z-index     : var(--aisa-z);
  transition  : transform .25s, box-shadow .25s;
  animation   : aisa-pulse 2.5s ease-in-out infinite;
}
#aisa-toggle:hover  { transform: scale(1.1); box-shadow: 0 10px 36px rgba(16,185,129,.6); }
#aisa-toggle:focus-visible { outline: 3px solid var(--aisa-primary); outline-offset: 3px; }

@keyframes aisa-pulse {
  0%, 100% { box-shadow: 0 6px 28px rgba(16,185,129,.45); }
  50%       { box-shadow: 0 6px 36px rgba(16,185,129,.7); }
}

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

/* ── Chat window ──────────────────────────────────────────────────────────── */
#aisa-window {
  position       : fixed;
  bottom         : 96px;
  right          : 24px;
  width          : 370px;
  max-height     : 540px;
  height         : 540px;
  background     : var(--aisa-bg);
  border-radius  : var(--aisa-radius);
  box-shadow     : var(--aisa-shadow);
  display        : flex;
  flex-direction : column;
  z-index        : calc(var(--aisa-z) + 1);
  overflow       : hidden;
  transform      : scale(.88) translateY(28px);
  opacity        : 0;
  pointer-events : none;
  transition     : transform .28s cubic-bezier(.34,1.56,.64,1), opacity .2s;
}
#aisa-window.aisa-open {
  transform    : scale(1) translateY(0);
  opacity      : 1;
  pointer-events: all;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
#aisa-header {
  background : var(--aisa-primary);
  color      : #fff;
  padding    : 14px 16px;
  display    : flex;
  align-items: center;
  gap        : 10px;
  flex-shrink: 0;
}
#aisa-avatar {
  width           : 38px;
  height          : 38px;
  background      : rgba(255,255,255,.22);
  border-radius   : 50%;
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : 18px;
  flex-shrink     : 0;
}
#aisa-header-info h4  { margin:0; font-size:14px; font-weight:700; }
#aisa-header-info span{ font-size:11px; opacity:.85; }
#aisa-close {
  margin-left : auto;
  background  : none;
  border      : none;
  color       : #fff;
  font-size   : 20px;
  cursor      : pointer;
  opacity     : .75;
  padding     : 4px 6px;
  border-radius: 4px;
  transition  : opacity .15s, background .15s;
  line-height : 1;
}
#aisa-close:hover       { opacity:1; background: rgba(255,255,255,.15); }
#aisa-close:focus-visible{ outline:2px solid #fff; }

/* ── Quick replies ─────────────────────────────────────────────────────────── */
#aisa-quick {
  padding       : 10px 12px 6px;
  display       : flex;
  flex-wrap     : wrap;
  gap           : 7px;
  background    : #f9fafb;
  border-bottom : 1px solid var(--aisa-border);
  flex-shrink   : 0;
}
.aisa-q {
  background   : #fff;
  border       : 1.5px solid var(--aisa-primary);
  color        : var(--aisa-primary);
  border-radius: 20px;
  padding      : 5px 11px;
  font-size    : 12px;
  cursor       : pointer;
  transition   : all .18s;
  white-space  : nowrap;
}
.aisa-q:hover        { background: var(--aisa-primary); color:#fff; }
.aisa-q:focus-visible{ outline:2px solid var(--aisa-primary); outline-offset:2px; }

/* ── Message list ─────────────────────────────────────────────────────────── */
#aisa-msgs {
  flex          : 1;
  overflow-y    : auto;
  padding       : 14px;
  display       : flex;
  flex-direction: column;
  gap           : 10px;
  scroll-behavior: smooth;
}
#aisa-msgs::-webkit-scrollbar        { width:4px; }
#aisa-msgs::-webkit-scrollbar-thumb  { background:#d1d5db; border-radius:4px; }

/* ── Message bubbles ──────────────────────────────────────────────────────── */
.aisa-msg {
  display    : flex;
  align-items: flex-end;
  gap        : 8px;
  max-width  : 88%;
  animation  : aisa-fade-in .22s ease;
}
.aisa-msg.aisa-bot  { align-self: flex-start; }
.aisa-msg.aisa-user { align-self: flex-end; flex-direction: row-reverse; }

.aisa-bubble {
  padding      : 10px 13px;
  border-radius: 16px;
  font-size    : 14px;
  word-break   : break-word;
}
.aisa-bot  .aisa-bubble { background:var(--aisa-bot-bg); color:var(--aisa-text); border-bottom-left-radius:4px; }
.aisa-user .aisa-bubble { background:var(--aisa-primary); color:#fff; border-bottom-right-radius:4px; }

.aisa-bubble ul { margin:6px 0 0 16px; padding:0; }
.aisa-bubble li { margin-bottom:3px; }
.aisa-link      { color:var(--aisa-primary); text-decoration:underline; }
.aisa-user .aisa-bubble .aisa-link { color:#d1fae5; }

.aisa-icon {
  width           : 26px;
  height          : 26px;
  background      : var(--aisa-primary);
  border-radius   : 50%;
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : 13px;
  flex-shrink     : 0;
}

@keyframes aisa-fade-in {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Typing indicator ─────────────────────────────────────────────────────── */
.aisa-dots-wrap { display:flex; gap:4px; align-items:center; padding:14px 16px; }
.aisa-dot {
  width       : 7px;
  height      : 7px;
  background  : #9ca3af;
  border-radius: 50%;
  animation   : aisa-bounce 1.1s infinite;
}
.aisa-dot:nth-child(2) { animation-delay:.18s; }
.aisa-dot:nth-child(3) { animation-delay:.36s; }
@keyframes aisa-bounce {
  0%,60%,100% { transform:translateY(0); }
  30%          { transform:translateY(-5px); }
}

/* ── WhatsApp button ──────────────────────────────────────────────────────── */
#aisa-wa-btn {
  display       : block;
  margin        : 0 12px 8px;
  background    : #25d366;
  color         : #fff;
  text-align    : center;
  border-radius : 10px;
  padding       : 8px;
  text-decoration: none;
  font-size     : 13px;
  font-weight   : 600;
  transition    : opacity .18s;
  flex-shrink   : 0;
}
#aisa-wa-btn:hover { opacity:.9; }

/* ── Input area ───────────────────────────────────────────────────────────── */
#aisa-input-wrap {
  padding       : 10px 12px 8px;
  border-top    : 1px solid var(--aisa-border);
  background    : #fff;
  flex-shrink   : 0;
}
#aisa-input {
  width         : 100%;
  border        : 1.5px solid var(--aisa-border);
  border-radius : 14px;
  padding       : 9px 14px;
  font-size     : 14px;
  resize        : none;
  outline       : none;
  transition    : border-color .18s;
  max-height    : 100px;
  overflow-y    : auto;
  background    : #fff;
  color         : var(--aisa-text);
  display       : block;
}
#aisa-input:focus { border-color: var(--aisa-primary); }
#aisa-input-footer {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  margin-top     : 6px;
}
#aisa-char-count {
  font-size  : 11px;
  color      : var(--aisa-muted);
}
#aisa-char-count.aisa-char-warn { color:#ef4444; }
#aisa-send {
  width           : 36px;
  height          : 36px;
  background      : var(--aisa-primary);
  color           : #fff;
  border          : none;
  border-radius   : 50%;
  cursor          : pointer;
  font-size       : 16px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  transition      : transform .18s, background .18s;
  flex-shrink     : 0;
}
#aisa-send:hover        { transform:scale(1.1); }
#aisa-send:focus-visible{ outline:2px solid var(--aisa-primary); outline-offset:2px; }

/* ── Left position ────────────────────────────────────────────────────────── */
.aisa-left #aisa-toggle,
.aisa-left #aisa-window {
  right : auto;
  left  : 24px;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #aisa-window {
    width  : calc(100vw - 16px);
    right  : 8px;
    bottom : 82px;
    height : 72vh;
    max-height: 72vh;
    border-radius: 16px;
  }
  #aisa-toggle { bottom:14px; right:14px; }
  .aisa-left #aisa-window  { right:auto; left:8px; }
  .aisa-left #aisa-toggle  { right:auto; left:14px; }
}