/* ════════════════════════════════════════════════════════════
   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:        410px;
  --ac-h:        590px;
  --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.ac-iconbg-solid { background:var(--ac-custom,#7568ee); }
.ac-trigger.ac-iconbg-soft { background:color-mix(in srgb,var(--ac-custom,#7568ee) 32%,#11131b);border:1px solid color-mix(in srgb,var(--ac-custom,#7568ee) 45%,transparent); }
.ac-trigger.ac-iconbg-glass { background:color-mix(in srgb,var(--ac-custom,#7568ee) 24%,rgba(18,20,30,.76));border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); }
.ac-trigger.ac-iconbg-gradient { background:linear-gradient(135deg,color-mix(in srgb,var(--ac-custom,#7568ee) 72%,#fff),var(--ac-custom,#7568ee),color-mix(in srgb,var(--ac-custom,#7568ee) 65%,#161322)); }
.ac-trigger.ac-iconfx-none { animation:none;box-shadow:0 8px 22px rgba(0,0,0,.42); }
.ac-trigger.ac-iconfx-soft { animation:none;box-shadow:0 8px 26px color-mix(in srgb,var(--ac-custom,#7568ee) 32%,transparent),inset 0 1px rgba(255,255,255,.15); }
.ac-trigger.ac-iconfx-pulse { animation:acCustomPulse 3.2s ease-out infinite; }
.ac-trigger.ac-iconfx-float { animation:acFloat 3.4s ease-in-out infinite; }
@keyframes acCustomPulse { 0%,100%{box-shadow:0 8px 24px color-mix(in srgb,var(--ac-custom,#7568ee) 40%,transparent),0 0 0 0 color-mix(in srgb,var(--ac-custom,#7568ee) 42%,transparent)} 65%{box-shadow:0 8px 26px color-mix(in srgb,var(--ac-custom,#7568ee) 45%,transparent),0 0 0 15px transparent} }
@keyframes acFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.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-radius-soft { --ac-radius:12px; }
.ac-radius-normal { --ac-radius:20px; }
.ac-radius-round { --ac-radius:28px; }
.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;
  display: flex; gap: 6px;
  overflow-x:auto;
  scrollbar-width:none;
}
.ac-suggestions::-webkit-scrollbar { display:none; }
.ac-chip {
  padding: 6px 10px;
  border-radius: 9px;
  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);
  margin:0 12px 10px;
  padding:8px;
  display:flex;flex-direction:column;gap:8px;
  background: rgba(255,255,255,.015);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}
.ac-input-line { display:flex;align-items:flex-end;gap:8px;width:100%; }
.ac-input-row:focus-within { border-color:color-mix(in srgb,var(--ac-custom,#7568ee) 58%,transparent);background:rgba(255,255,255,.025); }
.ac-suggest-panel .ac-input-row { border:0;background:transparent;padding:0;margin:0 12px 10px; }
.ac-suggest-panel .ac-suggestions { padding:8px;flex-wrap:wrap;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.02); }
.ac-suggest-panel .ac-input-line { padding:8px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.025); }
.ac-suggest-hidden .ac-suggestions { display:none !important; }
.ac-input {
  flex: 1;
  background: rgba(255,255,255,.06);
  border: 0;
  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: 330px;
  --ac-h: 480px;
}
.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; min-height: 34px; }
.ac-size-compact .ac-send { width: 34px; height: 34px; border-radius: 10px; }

.ac-size-wide {
  --ac-w: 500px;
  --ac-h: 660px;
}
.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; }
.ac-size-roomy { --ac-w:560px;--ac-h:720px; }
.ac-size-roomy .ac-messages { padding:20px;gap:14px; }
.ac-size-roomy .ac-bubble { font-size:.9rem;line-height:1.58;max-width:84%; }
.ac-density-compact .ac-messages { padding:10px;gap:8px; }
.ac-density-compact .ac-header { padding:10px 12px; }
.ac-density-normal .ac-messages { padding:14px;gap:10px; }
.ac-density-airy .ac-messages { padding:18px;gap:14px; }
.ac-density-airy .ac-header { padding:15px 17px; }

/* ════════════════════════════════════════════════════════════
   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: calc(84px + env(safe-area-inset-bottom, 0px));
    max-height: min(var(--ac-h), calc(100dvh - 104px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  }
  .ac-pos-left.ac-window { left: 10px; right: auto; }
  .ac-trigger { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); 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); }
  .ac-size-roomy   { --ac-w: calc(100vw - 20px); }

  /* iOS Safari auto-zooms form controls whose rendered font is below 16px.
     Keep only the editable field at 16px; the rest of the compact UI stays small. */
  .ac-input,
  .ac-size-compact .ac-input,
  .ac-size-wide .ac-input,
  .ac-size-roomy .ac-input {
    font-size: 16px !important;
    line-height: 1.4;
    min-height: 40px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: manipulation;
  }

  /* When the software keyboard opens, pin the chat to the real VisualViewport
     instead of letting Safari crop/scale the fixed widget. */
  .ac-window.ac-keyboard-open {
    top: calc(var(--ac-vv-top, 0px) + 8px);
    right: 10px;
    bottom: auto !important;
    height: calc(var(--ac-vv-height, 100dvh) - 16px);
    max-height: calc(var(--ac-vv-height, 100dvh) - 16px);
    width: calc(100vw - 20px);
    transform: none;
  }
  .ac-pos-left.ac-window.ac-keyboard-open { left: 10px; right: auto; }
  .ac-window.ac-keyboard-open.ac-visible { transform: none; }
  .ac-window.ac-keyboard-open .ac-messages { min-height: 0; overscroll-behavior: contain; }
  .ac-window.ac-keyboard-open .ac-input-row { margin-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion:reduce){.ac-trigger{animation:none!important}.ac-window,.ac-chip{transition:none!important}}

/* ════════════════════════════════════════════════════════════
   LIVE CHAT V8 — CSKH identity + attachment composer/messages
════════════════════════════════════════════════════════════ */
.ac-header-avatar-bot,.ac-header-avatar-agent{display:grid;place-items:center;width:100%;height:100%;position:relative}
.ac-header-avatar-agent{display:none}
.ac-header-avatar--agent{background:linear-gradient(135deg,#00a884,#0f766e);box-shadow:0 5px 18px rgba(0,168,132,.34);animation:acAgentPulse 2.8s ease-in-out infinite}
.ac-header-avatar--agent .ac-header-avatar-bot{display:none}
.ac-header-avatar--agent .ac-header-avatar-agent{display:grid;font-size:.9rem}
.ac-header-avatar-agent b{position:absolute;right:-4px;bottom:-4px;width:17px;height:17px;border-radius:7px;background:#08131a;border:2px solid #13c79b;display:grid;place-items:center;font-size:.47rem;color:#6fffd0}
@keyframes acAgentPulse{0%,100%{box-shadow:0 5px 18px rgba(0,168,132,.28)}50%{box-shadow:0 5px 24px rgba(0,214,160,.5)}}

.ac-input-tools{display:flex;align-items:flex-end;gap:3px;flex:0 0 auto}
.ac-attach-btn{width:34px;height:34px;border:0;border-radius:11px;background:rgba(255,255,255,.045);color:#9aa7ba;display:grid;place-items:center;cursor:pointer;font-size:.82rem;transition:.16s;-webkit-tap-highlight-color:transparent}
.ac-attach-btn:hover{background:color-mix(in srgb,var(--ac-custom,#7568ee) 20%,rgba(255,255,255,.04));color:#fff;transform:translateY(-1px)}
.ac-attach-btn:active{transform:scale(.94)}
.ac-attach-btn:disabled{opacity:.35;cursor:not-allowed;transform:none}

.ac-attachment-preview{display:none;align-items:center;gap:9px;padding:7px 8px;border-radius:12px;background:rgba(12,18,28,.84);border:1px solid rgba(255,255,255,.09);min-width:0}
.ac-attachment-preview.show{display:flex;animation:acMsgIn .2s ease both}
.ac-attachment-thumb{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;color:#a8b7cb;background:linear-gradient(135deg,rgba(59,130,246,.16),rgba(139,92,246,.12));background-size:cover;background-position:center;font-size:.95rem;overflow:hidden}
.ac-attachment-preview.is-image .ac-attachment-thumb{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.ac-attachment-meta{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.ac-attachment-meta strong{font-size:.69rem;color:#e5edf7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-attachment-meta span{font-size:.58rem;color:#738197}
.ac-attachment-remove{width:28px;height:28px;border:0;border-radius:9px;background:rgba(244,63,94,.08);color:#fb7185;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}

.ac-message-text{margin-top:6px}.ac-message-text:first-child{margin-top:0}
.ac-chat-image{display:block;border-radius:12px;overflow:hidden;background:#070b11;border:1px solid rgba(255,255,255,.08);max-width:250px}
.ac-chat-image img{display:block;width:100%;max-height:240px;object-fit:cover}
.ac-file-caption{display:flex;align-items:center;gap:5px;margin-top:5px;min-width:0;font-size:.61rem;color:#9aabc0}
.ac-file-caption span{min-width:0;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ac-file-caption small{margin-left:auto;color:#65758b;font-size:.54rem}
.ac-chat-file{display:flex;align-items:center;gap:9px;min-width:210px;max-width:260px;padding:8px 9px;border-radius:12px;background:rgba(3,8,15,.28);border:1px solid rgba(255,255,255,.09)!important;color:inherit!important;text-decoration:none!important}
.ac-chat-file:hover{background:rgba(255,255,255,.055)}
.ac-chat-file-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;background:linear-gradient(135deg,rgba(59,130,246,.24),rgba(99,102,241,.2));color:#8bc1ff}
.ac-chat-file-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}.ac-chat-file-copy strong{font-size:.67rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}.ac-chat-file-copy small{font-size:.55rem;color:#8593a6}.ac-chat-file-download{font-size:.68rem;color:#8ea3bc}

@media(max-width:440px){
  .ac-input-line{gap:5px}.ac-input-tools{gap:1px}.ac-attach-btn{width:31px;height:36px;border-radius:10px;font-size:.76rem}.ac-input{padding-left:10px;padding-right:10px}.ac-send{width:36px;height:36px}.ac-chat-image{max-width:210px}.ac-chat-file{min-width:180px;max-width:220px}.ac-attachment-thumb{width:36px;height:36px}.ac-attachment-meta strong{font-size:.67rem}
}


/* LIVE CHAT V9 — server-state identity sync + mobile composer visibility */
.ac-window.ac-mode-live .ac-header{
  background:linear-gradient(135deg,rgba(5,87,75,.96),rgba(0,168,132,.76))!important;
  border-bottom-color:rgba(60,255,202,.2)!important;
}
.ac-window.ac-mode-live .ac-header-name{color:#f3fffb;text-shadow:0 0 18px rgba(71,255,205,.14)}
.ac-window.ac-mode-live .ac-header-status{color:rgba(220,255,245,.78)}
.ac-window.ac-mode-live .ac-watermark{color:rgba(74,222,168,.42)}
.ac-window.ac-mode-waiting .ac-header{border-bottom-color:rgba(253,203,110,.18)!important}
@media(max-width:440px){
  .ac-input-tools{display:flex!important;visibility:visible!important;opacity:1!important;flex:0 0 auto!important}
  .ac-attach-btn{display:grid!important;visibility:visible!important;opacity:1}
  .ac-input-line{grid-template-columns:auto minmax(0,1fr) auto;align-items:flex-end}
  .ac-input{min-width:0!important}
}

/* ===== V9 — attachment render reliability ===== */
.ac-chat-image-wrap{position:relative;display:block;max-width:250px}
.ac-image-fallback{display:none;align-items:center;gap:8px;min-height:74px;padding:12px;border-radius:12px;background:rgba(2,8,15,.68);border:1px dashed rgba(96,165,250,.35)!important;color:#9ecbff!important;text-decoration:none!important;font-size:.65rem;line-height:1.35}
.ac-image-fallback i{font-size:1rem}.ac-chat-image-wrap.is-error .ac-chat-image{display:none}.ac-chat-image-wrap.is-error .ac-image-fallback{display:flex}
@media(max-width:768px){.ac-chat-image-wrap{max-width:210px}.ac-image-fallback{min-height:64px;padding:10px;font-size:.62rem}}


/* ════════════════════════════════════════════════════════════
   LIVE CHAT V10 — TOP LAYER / FLOATING-WIDGET COLLISION FIX
   - Chat is always above every public floating control.
   - Right-side contact buttons temporarily yield while chat is open.
════════════════════════════════════════════════════════════ */
.ac-window{
  z-index:2147483630!important;
  isolation:isolate;
}
.ac-trigger{
  z-index:2147483620!important;
}

/* The portal marker is added by ai-chat.js after the widget is moved directly
   under <body>. This avoids header/site transforms creating a lower stacking
   context on Safari/iOS and Chromium. */
body>.ac-window.ac-chat-portal,
body>.ac-trigger.ac-chat-portal{
  position:fixed!important;
}

/* The contact shortcuts are useful while browsing, but must never sit on top
   of the chat surface. They slide out only while the chat is open. */
body.ac-chat-open .global-contact-float{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateX(74px)!important;
  z-index:1!important;
  transition:opacity .16s ease,transform .2s ease,visibility .16s ease!important;
}

/* Other floating utilities stay usable visually, but are guaranteed below the
   active chat so they can never cover the header, messages or composer. */
body.ac-chat-open .ambient-music,
body.ac-chat-open .rain-sound-toggle{
  z-index:900!important;
}

/* Product/store overlays that can be opened before chat are also forced below
   the active support layer. The chat remains the last interactive surface. */
body.ac-chat-open .pm-overlay,
body.ac-chat-open .pm-modal,
body.ac-chat-open .od-overlay,
body.ac-chat-open .od-modal,
body.ac-chat-open .od2-overlay,
body.ac-chat-open .od2-modal,
body.ac-chat-open .dl-banner-wrap,
body.ac-chat-open .rnd-confirm,
body.ac-chat-open .rnd-game{
  z-index:100000!important;
}

@media(max-width:768px){
  body.ac-chat-open .global-contact-float{
    display:flex!important;
    opacity:0!important;
    visibility:hidden!important;
    transform:translateX(84px)!important;
  }
  body.ac-chat-open .ac-window{
    z-index:2147483630!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body.ac-chat-open .global-contact-float{transition:none!important}
}