/* =====================================================================
   URAI WIDGET - EMBEDDABLE COMPONENT
   Semua selector diberi awalan .aura- agar tidak bentrok dengan CSS
   milik website pelanggan tempat widget dipasang.
   ===================================================================== */

.aura-root{
  --w-brand:#01A1E6; --w-accent:#0270B6; --w-dark:#2C3339;
  --w-grad:linear-gradient(135deg,var(--w-brand),var(--w-accent));
  --w-ink:#353D43; --w-muted:#78838D; --w-line:#E4EAEF;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
  position:fixed; z-index:9999; bottom:24px; right:24px;
}
.aura-root.pos-left{ right:auto; left:24px; }
.aura-root *{ box-sizing:border-box; }

/* ---------- FLOATING BUTTON ---------- */
.aura-fab{
  width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
  background:var(--w-grad); box-shadow:0 8px 26px rgba(1,161,230,.42), 0 3px 8px rgba(0,0,0,.14);
  display:flex; align-items:center; justify-content:center; position:relative;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
  margin-left:auto;
}
.aura-fab:hover{ transform:scale(1.07); box-shadow:0 12px 34px rgba(1,161,230,.5); }
.aura-fab:active{ transform:scale(.97); }
.aura-fab svg{ width:30px; height:30px; fill:none; color:#fff; }
.aura-fab .aura-close-ico svg{ fill:#fff; }
.aura-fab .aura-close-ico{ display:none; }
.aura-root.open .aura-fab .aura-open-ico{ display:none; }
.aura-root.open .aura-fab .aura-close-ico{ display:block; }
.aura-fab::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:2px solid rgba(1,161,230,.5); animation:iawPulse 2.6s ease-out infinite;
}
.aura-root.open .aura-fab::after{ display:none; }
@keyframes iawPulse{ 0%{ transform:scale(.9); opacity:.85 } 70%{ transform:scale(1.35); opacity:0 } 100%{ opacity:0 } }

.aura-nudge{
  position:absolute; bottom:74px; right:0; width:238px; background:#fff;
  border:1px solid var(--w-line); border-radius:14px; padding:13px 15px;
  box-shadow:0 12px 30px rgba(16,35,63,.16); font-size:12.5px; color:var(--w-ink);
  line-height:1.55; animation:iawUp .4s ease;
}
.aura-nudge b{ display:block; margin-bottom:3px; }
.aura-nudge .x{ position:absolute; top:6px; right:9px; cursor:pointer; color:#B4C0D0; font-size:15px; }
.aura-root.open .aura-nudge{ display:none; }

/* ---------- PANEL ---------- */
.aura-panel{
  position:absolute; bottom:76px; right:0; width:420px; height:650px;
  max-height:calc(100vh - 120px); max-width:calc(100vw - 32px);
  background:#fff; border-radius:20px; overflow:hidden;
  box-shadow:0 28px 70px rgba(16,35,63,.28), 0 8px 22px rgba(16,35,63,.14);
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(18px) scale(.97); pointer-events:none;
  transition:opacity .24s ease, transform .28s cubic-bezier(.22,1,.36,1);
  transform-origin:bottom right;
}
.aura-root.pos-left .aura-panel{ right:auto; left:0; transform-origin:bottom left; }
.aura-root.open .aura-panel{ opacity:1; transform:none; pointer-events:auto; }

/* header */
.aura-hd{ background:var(--w-dark); color:#fff; padding:15px 17px; display:flex; align-items:center; gap:11px; flex:none; position:relative; }
.aura-hd::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--w-grad); }
.aura-ava{ width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg,#01A1E6,#0270B6); display:flex; align-items:center; justify-content:center; flex:none; }
.aura-ava svg{ width:23px; height:23px; fill:none; color:#fff; }
.aura-hd .t{ flex:1; min-width:0; }
.aura-hd .t b{ font-size:14px; display:block; }
.aura-hd .t span{ font-size:11px; color:#A9B4BD; display:flex; align-items:center; gap:5px; margin-top:1px; }
.aura-live{ width:7px; height:7px; border-radius:50%; background:#3ADB8A; box-shadow:0 0 0 0 rgba(58,219,138,.7); animation:iawLive 2s infinite; }
@keyframes iawLive{ 70%{ box-shadow:0 0 0 6px rgba(58,219,138,0) } 100%{ box-shadow:0 0 0 0 rgba(58,219,138,0) } }
.aura-hbtn{ background:rgba(255,255,255,.1); border:none; color:#CFE0F0; width:28px; height:28px; border-radius:8px; cursor:pointer; font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center; }
.aura-hbtn:hover{ background:rgba(255,255,255,.2); color:#fff; }

/* body */
.aura-bd{ flex:1; overflow-y:auto; padding:18px 16px 8px; background:#F6F9FC; scroll-behavior:smooth; }
.aura-bd::-webkit-scrollbar{ width:6px; }
.aura-bd::-webkit-scrollbar-thumb{ background:#CBD8E6; border-radius:6px; }

.aura-msg{ margin-bottom:16px; animation:iawUp .32s ease; }
@keyframes iawUp{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.aura-msg.u{ display:flex; justify-content:flex-end; }
.aura-msg.u .bub{
  background:var(--w-brand); color:#fff; padding:10px 14px;
  border-radius:16px 16px 4px 16px; max-width:80%; font-size:13.2px; line-height:1.6;
  box-shadow:0 2px 8px rgba(1,161,230,.24);
}
.aura-msg.a .bub{
  background:#fff; color:var(--w-ink); padding:12px 15px; border:1px solid var(--w-line);
  border-radius:16px 16px 16px 4px; max-width:88%; font-size:13.2px; line-height:1.65;
  box-shadow:0 1px 3px rgba(16,35,63,.05);
}
.aura-msg.a .bub p{ margin:0 0 9px; }
.aura-msg.a .bub p:last-child{ margin:0; }
.aura-msg.a .bub ol,.aura-msg.a .bub ul{ margin:6px 0 4px; padding-left:19px; }
.aura-msg.a .bub li{ margin-bottom:4px; }
.aura-time{ font-size:10px; color:#9AA8BB; margin-top:5px; }
.aura-msg.u .aura-time{ text-align:right; }

/* meta jawaban */
.aura-meta{ margin-top:9px; padding-top:9px; border-top:1px dashed var(--w-line); }
.aura-src{ font-size:10.5px; color:var(--w-muted); font-style:italic; margin-bottom:7px; }
.aura-chips{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.aura-conf{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:20px; font-size:10.5px; font-weight:bold; }
.aura-conf.hi{ background:#EEF6E8; color:#4B8F2C; }
.aura-conf.md{ background:#FEF6E3; color:#C98A08; }
.aura-conf.lo{ background:#FDECED; color:#DB3841; }
.aura-fb{ background:#F1F5FA; border:1px solid var(--w-line); color:var(--w-muted); font-size:10.5px; padding:3px 9px; border-radius:20px; cursor:pointer; font-family:inherit; }
.aura-fb:hover{ background:#E7EEF7; color:var(--w-ink); }
.aura-fb.sel{ background:#EEF6E8; border-color:#C6E4B4; color:#4B8F2C; font-weight:bold; }

/* kartu knowledge gap */
.aura-gap{
  background:#FEF9EF; border:1px solid #F3DCAF; border-radius:13px;
  padding:13px 15px; margin-bottom:16px; animation:iawUp .35s ease;
}
.aura-gap .hd{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.aura-gap .ic{ width:20px; height:20px; border-radius:50%; background:#FAB325; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:bold; flex:none; }
.aura-gap b{ font-size:12.2px; color:#95610F; }
.aura-gap p{ margin:0; font-size:11.8px; color:#8A6224; line-height:1.6; }
.aura-gap .tick{ margin-top:8px; font-size:10.5px; color:#A07A38; display:flex; align-items:center; gap:5px; }

/* typing */
.aura-typing{ display:inline-flex; gap:4px; padding:14px 16px; background:#fff; border:1px solid var(--w-line); border-radius:16px 16px 16px 4px; }
.aura-typing i{ width:6px; height:6px; border-radius:50%; background:#A8B8CC; animation:iawDot 1.3s infinite; }
.aura-typing i:nth-child(2){ animation-delay:.18s } .aura-typing i:nth-child(3){ animation-delay:.36s }
@keyframes iawDot{ 0%,60%,100%{ transform:translateY(0); opacity:.45 } 30%{ transform:translateY(-5px); opacity:1 } }

/* suggested */
.aura-sugg{ padding:0 16px 10px; background:#F6F9FC; flex:none; }
.aura-sugg .lb{ font-size:10px; color:var(--w-muted); text-transform:uppercase; letter-spacing:.6px; font-weight:bold; margin-bottom:7px; }
.aura-sugg .row{ display:flex; gap:6px; flex-wrap:wrap; }
.aura-chip{
  background:#fff; border:1px solid #D5E2F0; color:var(--w-brand);
  font-size:11.5px; padding:6px 11px; border-radius:16px; cursor:pointer;
  font-family:inherit; transition:.15s; text-align:left; line-height:1.4;
}
.aura-chip:hover{ background:var(--w-brand); color:#fff; border-color:var(--w-brand); }

/* footer */
.aura-ft{ border-top:1px solid var(--w-line); background:#fff; padding:11px 13px 9px; flex:none; }
.aura-inputrow{ display:flex; align-items:flex-end; gap:7px; }
.aura-ta{
  flex:1; border:1px solid var(--w-line); border-radius:20px; padding:10px 14px;
  font-family:inherit; font-size:13px; resize:none; outline:none; max-height:96px;
  line-height:1.5; color:var(--w-ink); background:#F8FAFD;
}
.aura-ta:focus{ border-color:var(--w-brand); background:#fff; box-shadow:0 0 0 3px rgba(1,161,230,.13); }
.aura-ib{ width:36px; height:36px; border-radius:50%; border:none; cursor:pointer; background:#F1F5FA; color:#8496AC; display:flex; align-items:center; justify-content:center; flex:none; }
.aura-ib:hover{ background:#E5EDF7; color:var(--w-brand); }
.aura-ib svg{ width:17px; height:17px; fill:currentColor; }
.aura-send{ background:var(--w-grad); color:#fff; box-shadow:0 3px 10px rgba(1,161,230,.34); }
.aura-send:hover{ filter:brightness(1.08); color:#fff; }
.aura-brand{ text-align:center; font-size:9.8px; color:#A6B3C4; margin-top:8px; }
.aura-brand b{ color:var(--w-brand); }

/* tema gelap widget */
.aura-root.dark .aura-panel{ background:#131C2B; }
.aura-root.dark .aura-bd{ background:#0E1724; }
.aura-root.dark .aura-msg.a .bub{ background:#1B2739; border-color:#26344A; color:#DCE6F2; }
.aura-root.dark .aura-ft{ background:#131C2B; border-color:#26344A; }
.aura-root.dark .aura-ta{ background:#1B2739; border-color:#26344A; color:#DCE6F2; }
.aura-root.dark .aura-sugg{ background:#0E1724; }
.aura-root.dark .aura-chip{ background:#1B2739; border-color:#2B3B54; color:#7FB6F2; }

@media (max-width:520px){
  .aura-root{ bottom:16px; right:16px; }
  .aura-panel{ width:calc(100vw - 24px); height:calc(100vh - 110px); }
}