/* =========================================================
   JAKSKY AUTO CS V1
   Frontend-only support assistant. Tidak mengubah API/database.
   ========================================================= */

#jakCsLauncher{
  position:fixed!important;
  right:14px!important;
  bottom:calc(86px + env(safe-area-inset-bottom))!important;
  z-index:2147482000!important;
  height:47px!important;
  min-width:80px!important;
  padding:0 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:17px!important;
  background:linear-gradient(135deg,#ff3f98,#b443e6)!important;
  color:#fff!important;
  box-shadow:0 14px 34px rgba(184,49,137,.27)!important;
  font:800 12px/1 system-ui,-apple-system,Segoe UI,sans-serif!important;
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent!important;
  transition:transform .16s ease,box-shadow .16s ease!important;
}
#jakCsLauncher:active{transform:scale(.94)!important}
#jakCsLauncher .jakCsLauncherIcon{font-size:18px;line-height:1}
#jakCsLauncher .jakCsLauncherText{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
#jakCsLauncher .jakCsLauncherText b{font-size:11px;color:#fff!important}
#jakCsLauncher .jakCsLauncherText small{font-size:8px;font-weight:700;color:#ffe3f1!important;opacity:.94}
#jakCsLauncher .jakCsOnlineDot{
  width:7px;height:7px;border-radius:50%;background:#7cf4ae;
  box-shadow:0 0 0 3px rgba(124,244,174,.16),0 0 10px rgba(124,244,174,.56);
  animation:jakCsPulse 2.1s ease-in-out infinite;
}

#jakCsLayer[hidden]{display:none!important}
#jakCsLayer{
  position:fixed!important;inset:0!important;z-index:2147483000!important;
  display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;
  padding:14px 14px calc(14px + env(safe-area-inset-bottom))!important;
  pointer-events:none!important;
}
#jakCsLayer.open{pointer-events:auto!important}
.jakCsBackdrop{
  position:absolute;inset:0;background:rgba(28,10,22,.34);
  opacity:0;transition:opacity .2s ease;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
#jakCsLayer.open .jakCsBackdrop{opacity:1}
.jakCsPanel{
  position:relative!important;width:min(405px,calc(100vw - 28px))!important;
  height:min(660px,calc(100dvh - 105px))!important;
  display:grid!important;grid-template-rows:auto auto 1fr auto!important;
  overflow:hidden!important;border-radius:27px!important;
  background:linear-gradient(180deg,#fff 0%,#fff8fc 100%)!important;
  border:1px solid rgba(190,80,137,.14)!important;
  box-shadow:0 30px 90px rgba(40,13,31,.32)!important;
  transform:translateY(22px) scale(.97);opacity:0;
  transition:transform .24s cubic-bezier(.22,.8,.2,1),opacity .18s ease;
}
#jakCsLayer.open .jakCsPanel{transform:none;opacity:1}

.jakCsHead{
  display:flex;align-items:center;gap:11px;padding:15px 15px 13px;
  background:linear-gradient(135deg,#351626,#24121f 62%,#3c1832);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.jakCsAvatar{
  width:43px;height:43px;display:grid;place-items:center;flex:0 0 43px;
  border-radius:15px;background:linear-gradient(135deg,#ff429a,#a844eb);
  color:#fff;font-size:20px;box-shadow:0 9px 22px rgba(215,55,157,.25);
}
.jakCsHeadText{min-width:0;flex:1}
.jakCsHeadText b{display:block;color:#fff!important;font-size:14px!important;line-height:1.2}
.jakCsHeadText small{display:flex;align-items:center;gap:5px;margin-top:4px;color:#cdb6c2!important;font-size:9px}
.jakCsHeadText small i{width:6px;height:6px;border-radius:50%;background:#71e99e;box-shadow:0 0 8px rgba(113,233,158,.58)}
.jakCsClose{
  width:36px;height:36px;min-width:36px;border-radius:12px;border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.07);color:#f5dfe9;font-size:17px;cursor:pointer;
}

.jakCsChips{
  display:flex;gap:7px;overflow-x:auto;padding:10px 11px 9px;
  background:rgba(255,255,255,.82);border-bottom:1px solid rgba(154,73,116,.08);
  scrollbar-width:none;
}
.jakCsChips::-webkit-scrollbar{display:none}
.jakCsChip{
  flex:0 0 auto;min-height:34px;padding:0 11px;border-radius:12px;
  border:1px solid rgba(187,77,135,.11);background:#fff;color:#7a5268;
  font:800 10px/1 system-ui,-apple-system,Segoe UI,sans-serif;cursor:pointer;
  box-shadow:0 4px 12px rgba(76,27,54,.045);
}
.jakCsChip:active{transform:scale(.96)}

.jakCsMessages{
  min-height:0;overflow:auto;padding:15px 12px 18px;scroll-behavior:smooth;
  background:
    radial-gradient(circle at 10% 8%,rgba(255,70,159,.055),transparent 25%),
    linear-gradient(180deg,#fffafd,#fff7fb);
}
.jakCsRow{display:flex;margin:0 0 11px;align-items:flex-end;gap:7px}
.jakCsRow.user{justify-content:flex-end}
.jakCsMiniAvatar{
  width:25px;height:25px;flex:0 0 25px;display:grid;place-items:center;
  border-radius:9px;background:linear-gradient(135deg,#ff4a9d,#af46e6);color:#fff;font-size:11px;
}
.jakCsBubble{
  max-width:82%;padding:10px 12px;border-radius:17px 17px 17px 5px;
  background:#fff;color:#4b3542;font:500 11.5px/1.52 system-ui,-apple-system,Segoe UI,sans-serif;
  border:1px solid rgba(148,70,111,.09);box-shadow:0 6px 18px rgba(65,23,47,.055);
  white-space:pre-wrap;word-break:break-word;
}
.jakCsRow.user .jakCsBubble{
  border-radius:17px 17px 5px 17px;background:linear-gradient(135deg,#ff439a,#c044d8);color:#fff;
  border:0;box-shadow:0 7px 18px rgba(206,55,155,.14);
}
.jakCsBubbleMeta{display:block;margin-top:6px;font-size:7.5px;opacity:.56;text-align:right}
.jakCsActions{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.jakCsAction{
  min-height:31px;padding:0 9px;border-radius:10px;border:1px solid rgba(223,65,148,.15);
  background:#fff4fa;color:#bc3b80;font:800 9px/1 system-ui,-apple-system,Segoe UI,sans-serif;cursor:pointer;
}
.jakCsTyping{display:flex;align-items:center;gap:4px;padding:11px 13px!important;width:max-content}
.jakCsTyping i{width:5px;height:5px;border-radius:50%;background:#c99aaf;animation:jakCsTyping 1s ease-in-out infinite}
.jakCsTyping i:nth-child(2){animation-delay:.12s}.jakCsTyping i:nth-child(3){animation-delay:.24s}

.jakCsComposer{
  display:grid;grid-template-columns:1fr 43px;gap:8px;padding:10px 11px;
  background:rgba(255,255,255,.94);border-top:1px solid rgba(145,67,108,.09);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
}
.jakCsInput{
  min-width:0;height:43px;border-radius:14px!important;border:1px solid rgba(153,73,115,.14)!important;
  background:#fff8fc!important;color:#402d38!important;padding:0 13px!important;outline:none!important;
  font:500 11.5px/1 system-ui,-apple-system,Segoe UI,sans-serif!important;box-shadow:none!important;
}
.jakCsInput:focus{border-color:rgba(255,63,152,.40)!important;box-shadow:0 0 0 4px rgba(255,63,152,.07)!important}
.jakCsSend{
  width:43px;height:43px;min-width:43px;border:0;border-radius:14px;
  background:linear-gradient(135deg,#ff3f98,#a943eb);color:#fff;font-size:17px;cursor:pointer;
  box-shadow:0 8px 18px rgba(205,54,157,.18);
}
.jakCsSend:disabled{opacity:.48;box-shadow:none}

html[data-jak-theme="dark"] .jakCsPanel{
  background:linear-gradient(180deg,#2b1b27,#21151e)!important;
  border-color:rgba(255,218,237,.11)!important;box-shadow:0 32px 90px rgba(8,2,7,.56)!important;
}
html[data-jak-theme="dark"] .jakCsChips{background:#2c1b28;border-color:rgba(255,221,239,.07)}
html[data-jak-theme="dark"] .jakCsChip{background:#392431;color:#e7cad8;border-color:rgba(255,220,238,.08);box-shadow:none}
html[data-jak-theme="dark"] .jakCsMessages{
  background:radial-gradient(circle at 12% 8%,rgba(255,73,162,.08),transparent 24%),linear-gradient(180deg,#251720,#20131c);
}
html[data-jak-theme="dark"] .jakCsBubble{background:#38242f;color:#f1dce6;border-color:rgba(255,222,239,.07);box-shadow:none}
html[data-jak-theme="dark"] .jakCsRow.user .jakCsBubble{background:linear-gradient(135deg,#e53b8d,#9e3fd3);color:#fff}
html[data-jak-theme="dark"] .jakCsAction{background:#422438;color:#ff8dc2;border-color:rgba(255,106,177,.15)}
html[data-jak-theme="dark"] .jakCsComposer{background:#281923;border-color:rgba(255,221,239,.07)}
html[data-jak-theme="dark"] .jakCsInput{background:#38242f!important;color:#fff1f7!important;border-color:rgba(255,219,237,.10)!important}
html[data-jak-theme="dark"] .jakCsInput::placeholder{color:#9e818f!important;-webkit-text-fill-color:#9e818f!important}

@keyframes jakCsPulse{0%,100%{transform:scale(.86);opacity:.76}50%{transform:scale(1);opacity:1}}
@keyframes jakCsTyping{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(-3px);opacity:1}}

@media(max-width:560px){
  #jakCsLayer{padding:0!important;align-items:flex-end!important}
  .jakCsPanel{
    width:100%!important;height:min(680px,88dvh)!important;
    border-radius:27px 27px 0 0!important;border-left:0!important;border-right:0!important;border-bottom:0!important;
  }
  #jakCsLauncher{right:11px!important;bottom:calc(83px + env(safe-area-inset-bottom))!important;height:44px!important;min-width:74px!important;padding:0 11px!important}
  #jakCsLauncher .jakCsLauncherText small{display:none}
  .jakCsBubble{max-width:86%}
}

@media(prefers-reduced-motion:reduce){
  #jakCsLauncher .jakCsOnlineDot,.jakCsTyping i{animation:none!important}
  .jakCsPanel,.jakCsBackdrop{transition:none!important}
}


/* JAKSKY AUTO CS VISIBILITY REPAIR V2 */
#jakCsLauncher{
  transition:
    opacity .16s ease,
    visibility .16s ease,
    transform .16s ease !important;
}

html.jakCsBlockedByModal #jakCsLauncher{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(10px) scale(.92) !important;
}

/* JAKSKY CS MODAL BLOCK FIX */
html.jakCsBlockedByModal #jakCsLauncher,
html.jakCsBlockedByModal #jakCsLayer{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

html.jakCsBlockedByModal #jakCsLayer{
  display:none !important;
}
