/* ════════════════════════════════════════════════════════════
   AI CHAT WIDGET  |  ai-chat.css  |  v2 — Theme support
════════════════════════════════════════════════════════════ */

/* ── Base variables ─────────────────────────────────────── */
:root {
  --ac-bg:       #13151f;
  --ac-card:     #1a1d2e;
  --ac-border:   rgba(108,92,231,.3);
  --ac-purple:   #6c5ce7;
  --ac-light:    #a29bfe;
  --ac-text:     rgba(240,242,248,.88);
  --ac-muted:    rgba(240,242,248,.42);
  --ac-user-bg:  linear-gradient(135deg,#5a4fcf,#6c5ce7,#a29bfe);
  --ac-bot-bg:   rgba(255,255,255,.05);
  --ac-radius:   22px;
  --ac-w:        360px;
  --ac-h:        540px;
  --ac-hdr-bg:   linear-gradient(135deg,rgba(90,79,207,.55),rgba(108,92,231,.3));
  --ac-hdr-bdr:  rgba(108,92,231,.25);
  --ac-av-bg:    linear-gradient(135deg,#4a3fc7,#6c5ce7);
  --ac-chip-bg:  rgba(108,92,231,.1);
  --ac-chip-bdr: rgba(108,92,231,.35);
  --ac-chip-col: #a29bfe;
  --ac-send-bg:  linear-gradient(135deg,#5a4fcf,#6c5ce7);
}

/* ════════════════════════════════════════════════════════════
   TRIGGER BUTTON
════════════════════════════════════════════════════════════ */
.ac-trigger {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9980;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg,#4a3fc7,#6c5ce7,#a29bfe);
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.3rem;
  box-shadow: 0 6px 24px rgba(108,92,231,.55), 0 2px 8px rgba(0,0,0,.4), 0 0 0 0 rgba(108,92,231,.4);
  animation: acPulseRing 3.5s ease-out infinite;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.ac-trigger:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 32px rgba(108,92,231,.75), 0 2px 8px rgba(0,0,0,.4);
  animation-play-state: paused;
}
.ac-trigger.ac-open {
  background: linear-gradient(135deg,#3d3380,#5a4fcf);
  animation: none;
}
@keyframes acPulseRing {
  0%   { box-shadow: 0 6px 24px rgba(108,92,231,.55), 0 0 0 0   rgba(108,92,231,.5); }
  60%  { box-shadow: 0 6px 24px rgba(108,92,231,.55), 0 0 0 18px rgba(108,92,231,0); }
  100% { box-shadow: 0 6px 24px rgba(108,92,231,.55), 0 0 0 0   rgba(108,92,231,0); }
}

/* Position modifier */
.ac-trigger.ac-pos-left,
.ac-window.ac-pos-left { right: auto; left: 24px; }

/* Notification badge */
.ac-badge {
  position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #ff3b30; border: 2px solid #13151f;
  font-size: .58rem; font-weight: 900; color: #fff;
  display: flex; align-items: center; justify-content: center;
  animation: acBadgePop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes acBadgePop { from{transform:scale(0)} to{transform:scale(1)} }

/* Tooltip */
.ac-tooltip {
  position: absolute; bottom: 68px; right: 0;
  background: #0f1220;
  border: 1px solid rgba(108,92,231,.35);
  border-radius: 12px;
  padding: 6px 13px;
  font-size: .78rem; font-weight: 600;
  color: rgba(240,242,248,.9);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0; transform: translateY(8px) scale(.94);
  transition: opacity .2s, transform .22s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
.ac-tooltip::after {
  content:''; position:absolute; bottom:-6px; right:19px;
  width:10px; height:6px;
  background:#0f1220;
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.ac-trigger:hover .ac-tooltip,
.ac-trigger:focus .ac-tooltip { opacity:1; transform:translateY(0) scale(1); }
.ac-pos-left .ac-tooltip { right: auto; left: 0; }
.ac-pos-left .ac-tooltip::after { right: auto; left: 19px; }

/* ════════════════════════════════════════════════════════════
   CHAT WINDOW
════════════════════════════════════════════════════════════ */
.ac-window {
  position: fixed;
  bottom: 96px; right: 24px;
  z-index: 9981;
  width: var(--ac-w);
  max-height: var(--ac-h);
  display: flex; flex-direction: column;
  background: var(--ac-card);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04),
    0 32px 80px rgba(0,0,0,.7),
    0 0 60px rgba(108,92,231,.14),
    inset 0 1px 0 rgba(255,255,255,.07);
  overflow: hidden;
  opacity: 0; pointer-events: none;
  transform: translateY(20px) scale(.95);
  transition: opacity .3s ease, transform .34s cubic-bezier(.34,1.56,.64,1);
}
.ac-window.ac-visible {
  opacity: 1; pointer-events: auto;
  transform: translateY(0) scale(1);
}
.ac-pos-left.ac-window { right: auto; left: 24px; }

/* ════════════════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════════════════ */
.ac-header {
  flex-shrink: 0;
  background: var(--ac-hdr-bg);
  border-bottom: 1px solid var(--ac-hdr-bdr);
  padding: 13px 14px;
  display: flex; align-items: center; gap: 10px;
}

/* Avatar icon */
.ac-header-avatar {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--ac-av-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: #fff; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(108,92,231,.45);
  animation: acFloat 3.5s ease-in-out infinite;
}
@keyframes acFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-3px); }
}

.ac-header-info { flex: 1; min-width: 0; }
.ac-header-name {
  font-size: .9rem; font-weight: 800; color: #f0f2f8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ac-header-status {
  font-size: .68rem; color: var(--ac-muted);
  display: flex; align-items: center; gap: 5px; margin-top: 2px;
}
.ac-status-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #00e676;
  animation: acBlink 2s ease-in-out infinite; flex-shrink: 0;
}
@keyframes acBlink { 0%,100%{opacity:1} 50%{opacity:.35} }

.ac-header-close {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.07);
  color: var(--ac-muted); cursor: pointer; font-size: .82rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.ac-header-close:hover { background:rgba(255,59,48,.18); color:#ff6b6b; border-color:rgba(255,59,48,.3); }

/* ════════════════════════════════════════════════════════════
   MESSAGES AREA
════════════════════════════════════════════════════════════ */
.ac-messages {
  flex: 1; overflow-y: auto;
  padding: 14px 12px;
  display: flex; flex-direction: column; gap: 10px;
  scroll-behavior: smooth;
}
.ac-messages::-webkit-scrollbar { width: 4px; }
.ac-messages::-webkit-scrollbar-track { background: transparent; }
.ac-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }

/* Row */
.ac-msg-row {
  display: flex; gap: 8px; align-items: flex-end;
  animation: acMsgIn .28s cubic-bezier(.34,1.56,.64,1) both;
}
.ac-msg-row--user { flex-direction: row-reverse; }
@keyframes acMsgIn {
  from { opacity:0; transform:translateY(12px) scale(.93); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* Avatar */
.ac-msg-av {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--ac-av-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; color: #fff; flex-shrink: 0;
}
.ac-msg-row--user .ac-msg-av {
  background: linear-gradient(135deg,#2d5a3d,#00b894);
}

/* Bubble */
.ac-bubble {
  max-width: 80%;
  padding: 9px 13px;
  border-radius: 16px;
  font-size: .82rem; line-height: 1.55;
  color: var(--ac-text);
  word-break: break-word;
}
.ac-msg-row--bot .ac-bubble {
  background: var(--ac-bot-bg);
  border: 1px solid rgba(255,255,255,.07);
  border-bottom-left-radius: 5px;
}
.ac-msg-row--user .ac-bubble {
  background: var(--ac-user-bg);
  color: #fff;
  border-bottom-right-radius: 5px;
  box-shadow: 0 3px 14px rgba(108,92,231,.35);
}
.ac-bubble a { color: #a29bfe; text-decoration: underline; }
.ac-bubble strong { color: #f0f2f8; font-weight: 700; }
.ac-bubble ul,.ac-bubble ol { padding-left: 16px; margin: 4px 0 0; }
.ac-bubble li { margin: 2px 0; }

/* Typing */
.ac-typing {
  display: flex; align-items: center; gap: 5px;
  padding: 11px 14px;
}
.ac-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ac-light);
  animation: acDotBounce 1.3s ease-in-out infinite;
}
.ac-dot:nth-child(2) { animation-delay: .18s; }
.ac-dot:nth-child(3) { animation-delay: .36s; }
@keyframes acDotBounce {
  0%,80%,100% { transform:translateY(0); opacity:.38; }
  40%          { transform:translateY(-6px); opacity:1; }
}

/* ════════════════════════════════════════════════════════════
   SUGGESTIONS / QUICK CHIPS
════════════════════════════════════════════════════════════ */
.ac-suggestions {
  flex-shrink: 0;
  padding: 0 10px 8px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ac-chip {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--ac-chip-bdr);
  background: var(--ac-chip-bg);
  color: var(--ac-chip-col);
  font-size: .74rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .12s;
  animation: acChipIn .25s ease both;
  -webkit-tap-highlight-color: transparent;
}
.ac-chip:hover { background:rgba(108,92,231,.24); border-color:rgba(108,92,231,.65); transform:translateY(-1px); }
.ac-chip:active { transform:translateY(0); }
@keyframes acChipIn { from{opacity:0;transform:scale(.88)} to{opacity:1;transform:scale(1)} }

/* ════════════════════════════════════════════════════════════
   INPUT ROW
════════════════════════════════════════════════════════════ */
.ac-input-row {
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 9px 10px;
  display: flex; gap: 8px; align-items: flex-end;
  background: rgba(255,255,255,.015);
}
.ac-input {
  flex: 1;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 9px 13px;
  color: #f0f2f8;
  font-size: .84rem;
  font-family: inherit;
  resize: none; max-height: 100px; min-height: 38px;
  line-height: 1.45;
  transition: border-color .15s, background .15s;
  outline: none;
}
.ac-input:focus {
  border-color: rgba(108,92,231,.6);
  background: rgba(255,255,255,.08);
}
.ac-input::placeholder { color: var(--ac-muted); }
.ac-send {
  flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--ac-send-bg);
  border: none; cursor: pointer; color: #fff; font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 12px rgba(108,92,231,.4);
  transition: opacity .15s, transform .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.ac-send:hover { opacity:.9; transform:scale(1.07); box-shadow:0 5px 18px rgba(108,92,231,.6); }
.ac-send:active { transform:scale(.95); }
.ac-send:disabled { opacity:.35; cursor:not-allowed; transform:none; }

/* Watermark */
.ac-watermark {
  text-align: center;
  padding: 5px 0 8px;
  font-size: .64rem;
  color: rgba(240,242,248,.16);
  letter-spacing: .04em;
}

/* ════════════════════════════════════════════════════════════
   THEMES
════════════════════════════════════════════════════════════ */

/* ── Minimal: clean flat, no gradient header ── */
.ac-theme-minimal {
  --ac-card: #141620;
  --ac-border: rgba(255,255,255,.1);
  --ac-hdr-bg: rgba(20,22,32,.98);
  --ac-hdr-bdr: rgba(255,255,255,.07);
  --ac-bot-bg: rgba(255,255,255,.04);
  --ac-chip-bg: rgba(255,255,255,.06);
  --ac-chip-bdr: rgba(255,255,255,.12);
  --ac-chip-col: rgba(240,242,248,.7);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
}
.ac-theme-minimal .ac-header-avatar {
  background: rgba(108,92,231,.18);
  border: 1px solid rgba(108,92,231,.28);
  color: #a29bfe;
  animation: none;
}
.ac-theme-minimal .ac-send-bg,
.ac-theme-minimal .ac-send { background: rgba(108,92,231,.85); }

/* ── Dark: deeper dark with subtle purple tint ── */
.ac-theme-dark {
  --ac-card: #0d0f1b;
  --ac-border: rgba(108,92,231,.2);
  --ac-bot-bg: rgba(255,255,255,.04);
  --ac-hdr-bg: linear-gradient(135deg,rgba(60,52,180,.6),rgba(80,70,200,.4));
  border-radius: 20px;
}
.ac-theme-dark .ac-messages { background: rgba(0,0,0,.15); }

/* ── Teal: teal/green support feel ── */
.ac-theme-teal {
  --ac-purple:   #00b894;
  --ac-light:    #55efc4;
  --ac-border:   rgba(0,184,148,.32);
  --ac-hdr-bg:   linear-gradient(135deg,rgba(0,100,80,.55),rgba(0,184,148,.3));
  --ac-hdr-bdr:  rgba(0,184,148,.25);
  --ac-av-bg:    linear-gradient(135deg,#00897b,#00b894);
  --ac-user-bg:  linear-gradient(135deg,#00897b,#00b894);
  --ac-chip-bg:  rgba(0,184,148,.1);
  --ac-chip-bdr: rgba(0,184,148,.35);
  --ac-chip-col: #55efc4;
  --ac-send-bg:  linear-gradient(135deg,#00897b,#00b894);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 32px 80px rgba(0,0,0,.7), 0 0 60px rgba(0,184,148,.14);
}

/* ── Glass: translucent blur ── */
.ac-theme-glass {
  --ac-card: rgba(22,25,42,.85);
  background: rgba(22,25,42,.82) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.1) !important;
}
.ac-theme-glass .ac-header { background: rgba(108,92,231,.2) !important; }
.ac-theme-glass .ac-input  { background: rgba(255,255,255,.08); }
.ac-theme-glass .ac-input-row { background: rgba(255,255,255,.03); }

/* ════════════════════════════════════════════════════════════
   SIZE MODIFIERS
════════════════════════════════════════════════════════════ */
.ac-size-compact {
  --ac-w: 310px;
  --ac-h: 460px;
}
.ac-size-compact .ac-header { padding: 10px 12px; }
.ac-size-compact .ac-header-avatar { width: 32px; height: 32px; font-size: .85rem; }
.ac-size-compact .ac-header-name { font-size: .84rem; }
.ac-size-compact .ac-messages { padding: 10px 10px; gap: 8px; }
.ac-size-compact .ac-bubble { font-size: .78rem; padding: 7px 11px; }
.ac-size-compact .ac-chip { font-size: .7rem; padding: 4px 9px; }
.ac-size-compact .ac-input { font-size: .8rem !important; min-height: 34px; }
.ac-size-compact .ac-send { width: 34px; height: 34px; border-radius: 10px; }

.ac-size-wide {
  --ac-w: 430px;
  --ac-h: 600px;
}
.ac-size-wide .ac-header-avatar { width: 42px; height: 42px; font-size: 1.1rem; border-radius: 12px; }
.ac-size-wide .ac-bubble { font-size: .86rem; }

/* ════════════════════════════════════════════════════════════
   LIVE CHAT — Admin bubble, System bubble, Live indicator
════════════════════════════════════════════════════════════ */

/* Admin message row (mirrors user row layout but left-aligned) */
.ac-msg-row--admin {
  flex-direction: row-reverse;
  align-self: flex-start;
}
.ac-msg-av--admin {
  background: linear-gradient(135deg,#00897b,#00b894);
}
.ac-bubble--admin {
  background: linear-gradient(135deg,rgba(0,137,123,.55),rgba(0,184,148,.35));
  border: 1px solid rgba(0,184,148,.3);
  border-bottom-left-radius: 5px !important;
  color: #d9f7f2;
}

/* System message */
.ac-msg-row--system {
  justify-content: center;
  width: 100%;
  max-width: 100%;
}
.ac-bubble--system {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  color: rgba(240,242,248,.42);
  font-size: .72rem;
  padding: 5px 12px;
  border-radius: 8px;
  max-width: 90%;
  text-align: center;
}

/* Live status dot for header */
.ac-live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 3px;
  vertical-align: middle;
}
.ac-live-dot--waiting {
  background: #fdcb6e;
  animation: acLiveWait .7s ease-in-out infinite alternate;
}
.ac-live-dot--live {
  background: #00b894;
  animation: acBlink 2s ease-in-out infinite;
}
@keyframes acLiveWait { from{opacity:.4} to{opacity:1} }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 440px) {
  :root { --ac-w: calc(100vw - 20px); --ac-h: 82vh; }
  .ac-window { right: 10px; bottom: 84px; }
  .ac-pos-left.ac-window { left: 10px; right: auto; }
  .ac-trigger { right: 14px; bottom: 14px; width: 52px; height: 52px; font-size: 1.15rem; }
  .ac-pos-left.ac-trigger { left: 14px; right: auto; }
  .ac-size-compact { --ac-w: calc(100vw - 20px); }
  .ac-size-wide    { --ac-w: calc(100vw - 20px); }
}