/* A1Topup AI chat widget - bottom-right, every page. A glassy, "AI product" look: a pill-shaped trigger with
   a continuously animated rainbow border (not just on hover), and a frosted-glass panel when open.
   Self-contained - doesn't depend on a1.css variables so it renders identically on every page. */
.a1c-wrap { position: fixed; z-index: 2147483000; left: 22px; bottom: 24px; font-family: 'Poppins', 'Segoe UI', Arial, sans-serif; }

/* ---------- the animated "flowing current" ring, shared by the trigger pill and the open panel ---------- */
@property --a1c-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes a1c-spin { to { --a1c-angle: 360deg; } }
.a1c-bubble-ring, .a1c-panel-ring {
  position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--a1c-angle), #ff5f9e, #8637af, #4f7bff, #35d0ba, #ffce4a, #ff5f9e);
  animation: a1c-spin 3.5s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .a1c-bubble-ring, .a1c-panel-ring { background: linear-gradient(90deg, #ff5f9e, #8637af, #4f7bff, #35d0ba, #ffce4a, #ff5f9e); background-size: 300% 100%; animation: a1c-slide 3.5s linear infinite; }
  @keyframes a1c-slide { to { background-position: 300% 0; } }
}

/* ---------- the pill-shaped trigger ("Ask AI") ---------- */
.a1c-bubble { position: relative; border: 0; cursor: pointer; padding: 3px; border-radius: 999px;
  background: transparent; display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 10px 26px rgba(90,34,116,.38)) drop-shadow(0 2px 8px rgba(0,0,0,.16));
  transition: transform .22s cubic-bezier(.34,1.56,.64,1); }
.a1c-bubble:hover { transform: translateY(-2px) scale(1.035); }
.a1c-bubble-inner { position: relative; display: flex; align-items: center; gap: 10px; height: 45px; padding: 0 14px 0 10px; border-radius: 999px;
  background: linear-gradient(150deg, rgba(46,20,66,.92), rgba(28,12,46,.95)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: #fff; overflow: hidden; }
.a1c-bubble-inner::before { content: ''; position: absolute; top: -40%; left: -20%; width: 60%; height: 220%; background: rgba(255,255,255,.08); transform: rotate(20deg); pointer-events: none; }
.a1c-bubble-icon { position: relative; width: 36px; height: 36px; flex: 0 0 auto; display: flex; transition: opacity .2s ease, transform .2s ease; }
.a1c-bubble-icon svg { width: 100%; height: 100%; }
.a1c-icon-close { position: absolute; opacity: 0; transform: rotate(-45deg) scale(.5); }
.a1c-icon-chat { opacity: 1; transform: none; animation: a1c-iconbob 2.6s ease-in-out infinite; }
@keyframes a1c-iconbob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} }
.a1c-bubble.a1c-open .a1c-icon-chat { opacity: 0; transform: rotate(45deg) scale(.5); animation: none; }
.a1c-bubble.a1c-open .a1c-icon-close { opacity: 1; transform: none; }
.a1c-bubble-label { font-size: 14px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; background: linear-gradient(90deg,#fff,#e6d6f5,#fff); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: a1c-shimmer 3s linear infinite; }
@keyframes a1c-shimmer { to { background-position: -220% 0; } }
.a1c-bubble.a1c-open .a1c-bubble-label { display: none; }
.a1c-bubble.a1c-open .a1c-bubble-inner { padding: 0; width: 60px; }
.a1c-dot { position: absolute; top: 1px; right: 1px; width: 12px; height: 12px; border-radius: 50%; background: #ef4444; border: 2px solid #2e1442; display: none; z-index: 2; animation: a1c-pulse 1.5s infinite; }
.a1c-bubble.a1c-attention { animation: a1c-shake .5s ease; }
@keyframes a1c-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px) rotate(-4deg)} 40%{transform:translateX(5px) rotate(4deg)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
@keyframes a1c-pulse { 0%{box-shadow:0 0 0 0 rgba(239,68,68,.6)} 70%{box-shadow:0 0 0 7px rgba(239,68,68,0)} 100%{box-shadow:0 0 0 0 rgba(239,68,68,0)} }

/* ---------- the glass chat panel ---------- */
.a1c-panel { position: absolute; left: 0; bottom: 70px; width: 366px; max-width: calc(100vw - 32px); height: 528px; max-height: calc(100vh - 140px);
  border-radius: 22px; padding: 2px; opacity: 0; visibility: hidden; transform: translateY(18px) scale(.96); transform-origin: bottom left;
  transition: opacity .25s ease, transform .25s cubic-bezier(.2,.9,.3,1.2), visibility .25s;
  filter: drop-shadow(0 26px 60px rgba(20,10,40,.35)); }
.a1c-panel.a1c-open { opacity: 1; visibility: visible; transform: none; }
.a1c-panel-inner { position: relative; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column;
  background: linear-gradient(165deg, rgba(38,18,58,.72), rgba(22,10,38,.82)); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,.08); }

.a1c-head { flex: 0 0 auto; display: flex; align-items: center; gap: 11px; padding: 15px 16px; color: #fff; position: relative;
  background: linear-gradient(120deg, rgba(134,55,175,.35), rgba(90,34,116,.25)); border-bottom: 1px solid rgba(255,255,255,.08); }
.a1c-head-avatar { position: relative; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.18); }
.a1c-head-avatar svg { width: 20px; height: 20px; position: relative; z-index: 1; }
.a1c-head-avatar-glow { position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient(from 0deg, #ff5f9e, #8637af, #4f7bff, #35d0ba, #ffce4a, #ff5f9e); filter: blur(6px); opacity: .55; animation: a1c-spin2 4s linear infinite; }
@keyframes a1c-spin2 { to { transform: rotate(360deg); } }
.a1c-head-text { display: flex; flex-direction: column; line-height: 1.35; font-size: 13.5px; min-width: 0; }
.a1c-head-text span { font-size: 11.5px; color: #e3cff2; display: flex; align-items: center; gap: 5px; }
.a1c-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; display: inline-block; box-shadow: 0 0 0 0 rgba(52,211,153,.7); animation: a1c-livepulse 2s infinite; }
@keyframes a1c-livepulse { 0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)} 70%{box-shadow:0 0 0 5px rgba(52,211,153,0)} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0)} }
.a1c-close { margin-left: auto; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); color: #fff; width: 27px; height: 27px; border-radius: 50%; font-size: 16px; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.a1c-close:hover { background: rgba(255,255,255,.2); }

.a1c-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 12px 6px; display: flex; flex-direction: column; }
.a1c-row { display: flex; align-items: flex-end; gap: 7px; margin-bottom: 10px; animation: a1c-slidein .3s ease; }
@keyframes a1c-slidein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.a1c-row-user { justify-content: flex-end; }
.a1c-avatar { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg,#8637af,#4f7bff); color: #fff; font-size: 8.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.a1c-bubble-msg { max-width: 78%; padding: 9px 13px; border-radius: 15px; font-size: 13.5px; line-height: 1.5; word-wrap: break-word; }
.a1c-bubble-bot { background: rgba(255,255,255,.94); color: #241a33; border-bottom-left-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.a1c-bubble-user { background: linear-gradient(120deg, #8637af, #4f6bd8); color: #fff; border-bottom-right-radius: 4px; box-shadow: 0 2px 8px rgba(79,107,216,.3); }
.a1c-bubble-msg a { color: inherit; text-decoration: underline; }
.a1c-typing span { display: inline-block; width: 6px; height: 6px; margin: 0 1.5px; border-radius: 50%; background: #b9a8c6; animation: a1c-bounce 1s infinite; }
.a1c-typing span:nth-child(2) { animation-delay: .15s; } .a1c-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes a1c-bounce { 0%,60%,100%{transform:translateY(0);opacity:.5} 30%{transform:translateY(-4px);opacity:1} }

.a1c-actions { display: flex; gap: 8px; margin: -2px 0 10px 29px; flex-wrap: wrap; }
.a1c-action-btn { font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 999px; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.a1c-action-tel { background: rgba(134,55,175,.22); color: #e7d3f5; border: 1px solid rgba(134,55,175,.4); }
.a1c-action-whatsapp { background: rgba(52,211,153,.16); color: #b8f3d8; border: 1px solid rgba(52,211,153,.35); }

.a1c-quick { flex: 0 0 auto; display: none; flex-wrap: wrap; gap: 7px; padding: 8px 12px; border-top: 1px solid rgba(255,255,255,.08); }
.a1c-chip { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); color: #f1e6fa; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 999px; cursor: pointer; transition: background .15s, transform .1s; }
.a1c-chip:hover { background: rgba(255,255,255,.16); }
.a1c-chip:active { transform: scale(.96); }

.a1c-inputbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 11px; border-top: 1px solid rgba(255,255,255,.08); }
.a1c-inputbar input { flex: 1; border: 1px solid rgba(255,255,255,.16); border-radius: 22px; padding: 10px 15px; font-size: 13.5px; outline: none; font-family: inherit; background: rgba(255,255,255,.08); color: #fff; }
.a1c-inputbar input::placeholder { color: rgba(255,255,255,.5); }
.a1c-inputbar input:focus { border-color: rgba(134,55,175,.7); box-shadow: 0 0 0 3px rgba(134,55,175,.22); }
.a1c-inputbar button { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 0; background: linear-gradient(135deg,#8637af,#4f6bd8); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(134,55,175,.4); }
.a1c-inputbar button svg { width: 17px; height: 17px; }
.a1c-inputbar button:disabled, .a1c-inputbar input:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 480px) {
  .a1c-wrap { left: 12px; bottom: 14px; }
  .a1c-panel { position: fixed; left: 8px; right: 8px; bottom: 84px; width: auto; height: calc(100vh - 140px); }
  .a1c-bubble-inner { height: 45px; }
  .a1c-bubble-label { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .a1c-bubble-ring, .a1c-panel-ring, .a1c-head-avatar-glow, .a1c-bubble-label, .a1c-icon-chat, .a1c-bubble.a1c-attention, .a1c-live-dot, .a1c-dot, .a1c-typing span, .a1c-row { animation: none !important; }
}