/* livechat polish — konsisten tema hijau editorial, light + dark */
html.livechat-page{--lc-bg:#f4f6f1;--lc-card:#fff;--lc-soft:#f1f4ed;--lc-line:#dce2d9;--lc-ink:#18231d;--lc-ink2:#586558;--lc-ink3:#7a877a;--lc-brand:#1a251e;--lc-lime:#c7f36b;--lc-lime-soft:#e9f7c9;--lc-lime-ink:#3d5a1c;--lc-me:#c7f36b;--lc-me-ink:#18231d;--lc-warn:#fff7dd;--lc-warn-line:#ecd98a}
html[data-theme="dark"].livechat-page{--lc-bg:#111812;--lc-card:#1a241c;--lc-soft:#151d17;--lc-line:#2a382d;--lc-ink:#edf2e9;--lc-ink2:#b3bfb0;--lc-ink3:#8a978a;--lc-brand:#c7f36b;--lc-lime-soft:#26351f;--lc-lime-ink:#c7f36b;--lc-me:#c7f36b;--lc-me-ink:#142016;--lc-warn:#2a2616;--lc-warn-line:#5a4f22}

/* container & hero */
html.livechat-page body:has(.chat-hero) .page{max-width:960px!important;padding:20px 16px 64px!important}
html.livechat-page body:has(.chat-hero) .chat-top{margin:0 0 4px}
html.livechat-page body:has(.chat-hero) .back-link{margin:0!important;padding:7px 13px!important;font-size:.8rem!important;color:var(--lc-ink2)!important;background:var(--lc-card)!important;border:1px solid var(--lc-line)!important;border-radius:99px!important}
html.livechat-page body:has(.chat-hero) .back-link:hover{color:var(--lc-ink)!important;border-color:var(--lc-ink3)!important}
html.livechat-page body:has(.chat-hero) .chat-hero{display:block!important;text-align:center!important;max-width:620px!important;margin:0 auto!important;padding:26px 0 24px!important;border:0!important}
html.livechat-page body:has(.chat-hero) .chat-hero .eyebrow{display:inline-block;padding:5px 12px;margin-bottom:14px;border-radius:99px;background:var(--lc-lime-soft)!important;color:var(--lc-lime-ink)!important;font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
html.livechat-page body:has(.chat-hero) .chat-hero h1{max-width:none!important;margin:0 0 12px!important;font-size:clamp(1.85rem,6vw,2.75rem)!important;font-weight:800!important;letter-spacing:-.045em!important;line-height:1.12!important;color:var(--lc-ink)!important}
html.livechat-page body:has(.chat-hero) .chat-hero h1 span{background:linear-gradient(transparent 62%,var(--lc-lime) 62% 92%,transparent 92%)!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:inherit!important;-webkit-text-fill-color:currentColor!important;padding:0 .12em}
html.livechat-page body:has(.chat-hero) .chat-hero p{max-width:480px;margin:0 auto!important;font-size:.95rem!important;line-height:1.65;color:var(--lc-ink2)!important}

/* layout */
html.livechat-page body:has(.chat-hero) #faqSection{max-width:none!important;margin:8px 0 0!important}
html.livechat-page body:has(.chat-hero) .chat-layout{gap:20px!important;grid-template-columns:minmax(0,1fr)}
@media(min-width:860px){html.livechat-page body:has(.chat-hero) .chat-layout{grid-template-columns:minmax(0,1fr) 290px!important}html.livechat-page body:has(.chat-hero) .chat-side{position:sticky;top:84px}}

/* panel */
html.livechat-page body:has(.chat-hero) .live-chat-panel{border:1px solid var(--lc-line)!important;border-radius:16px!important;background:var(--lc-card)!important;box-shadow:0 1px 2px rgba(24,35,29,.04),0 12px 32px -18px rgba(24,35,29,.22)!important}
html.livechat-page body:has(.chat-hero) .chat-head{padding:14px 18px!important;gap:12px!important;background:var(--lc-brand)!important;color:#f1f5eb!important}
html.livechat-page body:has(.chat-hero) .chat-head::after{display:none!important}
html.livechat-page body:has(.chat-hero) .chat-ava{width:42px!important;height:42px!important;border-radius:13px!important;background:var(--lc-lime)!important;color:#1a251e!important;font-size:1.05rem!important}
html.livechat-page body:has(.chat-hero) .chat-ava::after{border-color:var(--lc-brand)!important;width:11px!important;height:11px!important}
html.livechat-page body:has(.chat-hero) .chat-head-text h3{font-size:.98rem!important;line-height:1.3;color:inherit!important}
html.livechat-page body:has(.chat-hero) .chat-head-text p{font-size:.76rem!important;opacity:.78!important;margin-top:1px!important;color:inherit!important}
html.livechat-page body:has(.chat-hero) .chat-status-line{padding:8px 18px!important;gap:8px!important;font-size:.72rem!important;line-height:1.45;color:var(--lc-ink3)!important;background:var(--lc-soft)!important;border-bottom:1px solid var(--lc-line)!important;align-items:flex-start!important}
html.livechat-page body:has(.chat-hero) .chat-status-dot{margin-top:4px;box-shadow:none!important;animation:none!important}

/* messages */
html.livechat-page body:has(.chat-hero) .chat-messages{height:min(54vh,480px)!important;min-height:280px!important;padding:20px 18px!important;gap:10px!important;background:var(--lc-soft)!important;overscroll-behavior:contain}
html.livechat-page body:has(.chat-hero) .chat-empty{margin:auto!important;max-width:280px;text-align:center;gap:6px!important;color:var(--lc-ink3)!important}
html.livechat-page body:has(.chat-hero) .chat-empty::before{background-color:var(--lc-lime-soft)!important;border-color:transparent!important;border-radius:18px!important;margin-bottom:6px}
html.livechat-page body:has(.chat-hero) .chat-empty b{font-size:.95rem;color:var(--lc-ink)}
html.livechat-page body:has(.chat-hero) .chat-empty span{font-size:.82rem;line-height:1.5}
html.livechat-page body:has(.chat-hero) .chat-bubble{max-width:78%!important;width:fit-content;padding:9px 13px 8px!important;font-size:.9rem!important;line-height:1.55!important;letter-spacing:0;box-shadow:none!important;white-space:normal!important;overflow-wrap:anywhere;word-break:normal}
html.livechat-page body:has(.chat-hero) .chat-bubble.admin{align-self:flex-start;background:var(--lc-card)!important;color:var(--lc-ink)!important;border:1px solid var(--lc-line)!important;border-radius:16px 16px 16px 4px!important}
html.livechat-page body:has(.chat-hero) .chat-bubble.visitor{align-self:flex-end;background:var(--lc-me)!important;color:var(--lc-me-ink)!important;border:0!important;border-radius:16px 16px 4px 16px!important}
html.livechat-page body:has(.chat-hero) .chat-meta{display:block;margin-top:4px!important;font-size:.68rem!important;line-height:1.3;font-weight:500;color:var(--lc-ink3)!important}
html.livechat-page body:has(.chat-hero) .chat-bubble.visitor .chat-meta{color:rgba(24,35,29,.6)!important;text-align:right}
html.livechat-page body:has(.chat-hero) .chat-message-image{border-color:var(--lc-line)!important;border-radius:10px;margin-top:8px}

/* quick replies: wrap, tidak terpotong */
html.livechat-page body:has(.chat-hero) .quick-replies{flex-wrap:wrap!important;overflow:visible!important;gap:7px!important;padding:14px 16px 2px!important}
html.livechat-page body:has(.chat-hero) .quick-replies button{padding:7px 12px!important;font-size:.76rem!important;font-weight:600;line-height:1.3;border-radius:99px!important;border:1px solid var(--lc-line)!important;background:var(--lc-card)!important;color:var(--lc-ink2)!important;white-space:normal;text-align:left}
html.livechat-page body:has(.chat-hero) .quick-replies button:hover{background:var(--lc-lime)!important;border-color:var(--lc-lime)!important;color:#18231d!important;transform:none!important}

/* form */
html.livechat-page body:has(.chat-hero) .live-chat-form{padding:12px 16px 6px!important;gap:8px!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:end!important}
html.livechat-page body:has(.chat-hero) .chat-attach-btn{width:46px!important;height:46px!important;border-radius:12px!important;background:var(--lc-card)!important;border:1px solid var(--lc-line)!important;display:inline-flex!important;align-items:center;justify-content:center}
html.livechat-page body:has(.chat-hero) .chat-attach-btn::before{background:var(--lc-ink2)!important}
html.livechat-page body:has(.chat-hero) .chat-attach-btn:hover{border-color:var(--lc-ink3)!important;background:var(--lc-soft)!important}
html.livechat-page body:has(.chat-hero) #chatInput{min-height:46px!important;padding:12px 14px!important;border-radius:12px!important;border:1px solid var(--lc-line)!important;background:var(--lc-card)!important;color:var(--lc-ink)!important;font-size:.92rem!important;line-height:1.4!important}
html.livechat-page body:has(.chat-hero) #chatInput::placeholder{color:var(--lc-ink3)}
html.livechat-page body:has(.chat-hero) #chatInput:focus{border-color:var(--lc-ink2)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--lc-lime) 55%,transparent)!important}
html.livechat-page body:has(.chat-hero) .live-chat-form .btn,html.livechat-page body:has(.chat-hero) .live-chat-form .btn.btn-primary{width:46px!important;height:46px!important;border-radius:12px!important;background:var(--lc-brand)!important;color:var(--lc-lime)!important;box-shadow:none!important;border:0!important}
html.livechat-page body:has(.chat-hero) .live-chat-form .btn::before{background:var(--lc-lime)!important}
html.livechat-page body:has(.chat-hero) .live-chat-form .btn:hover{opacity:.88;transform:none}
html.livechat-page body:has(.chat-hero) .live-chat-form .btn:disabled{opacity:.45}
html.livechat-page body:has(.chat-hero) .img-preview{border-radius:12px!important;background:var(--lc-soft)!important;border:1px solid var(--lc-line)!important}
html.livechat-page body:has(.chat-hero) .img-preview span{color:var(--lc-ink)!important}
html.livechat-page body:has(.chat-hero) .img-preview button{background:var(--lc-card)!important;border-color:var(--lc-line)!important;color:var(--lc-ink2)!important}
html.livechat-page body:has(.chat-hero) .chat-foot{padding:4px 18px 14px!important;align-items:flex-start}
html.livechat-page body:has(.chat-hero) .chat-note{font-size:.7rem!important;line-height:1.5;color:var(--lc-ink3)!important}
html.livechat-page body:has(.chat-hero) .chat-count{font-size:.7rem;color:var(--lc-ink3)!important;padding-top:1px}

/* sidebar */
html.livechat-page body:has(.chat-hero) .chat-side{gap:12px!important}
html.livechat-page body:has(.chat-hero) .chat-side .side-card{padding:18px!important;border:1px solid var(--lc-line)!important;border-radius:14px!important;background:var(--lc-card)!important;box-shadow:none!important}
html.livechat-page body:has(.chat-hero) .side-card h4{font-size:.82rem!important;margin:0 0 14px!important;color:var(--lc-ink)!important}
html.livechat-page body:has(.chat-hero) .side-list{gap:14px!important}
html.livechat-page body:has(.chat-hero) .side-list li{gap:12px!important;font-size:.78rem!important;line-height:1.5!important;color:var(--lc-ink2)!important}
html.livechat-page body:has(.chat-hero) .side-list .si{width:32px!important;height:32px!important;border-radius:10px!important;background:var(--lc-lime-soft)!important;color:var(--lc-lime-ink)!important}
html.livechat-page body:has(.chat-hero) .side-list b{margin-bottom:1px;font-size:.82rem!important;color:var(--lc-ink)!important}
html.livechat-page body:has(.chat-hero) .chat-side .side-card.warn{background:var(--lc-warn)!important;border-color:var(--lc-warn-line)!important}
html.livechat-page body:has(.chat-hero) .side-card.warn h4{margin-bottom:8px!important}
html.livechat-page body:has(.chat-hero) .side-card.warn p{font-size:.78rem!important;line-height:1.6!important;color:var(--lc-ink2)!important;margin:0}

/* mobile */
@media(max-width:640px){
  html.livechat-page body:has(.chat-hero) .page{padding:14px 14px 48px!important}
  html.livechat-page body:has(.chat-hero) .chat-hero{padding:18px 0 18px!important}
  html.livechat-page body:has(.chat-hero) .chat-messages{height:min(50vh,420px)!important;min-height:260px!important;padding:16px 14px!important}
  html.livechat-page body:has(.chat-hero) .chat-bubble{max-width:88%!important;font-size:.9rem!important}
  html.livechat-page body:has(.chat-hero) .chat-head{padding:12px 14px!important}
  html.livechat-page body:has(.chat-hero) .chat-status-line,html.livechat-page body:has(.chat-hero) .chat-foot{padding-left:14px!important;padding-right:14px!important}
  html.livechat-page body:has(.chat-hero) .quick-replies{padding:12px 14px 2px!important}
  html.livechat-page body:has(.chat-hero) .live-chat-form{padding:10px 14px 4px!important}
  html.livechat-page body:has(.chat-hero) .chat-foot{flex-direction:column;gap:4px}
  html.livechat-page body:has(.chat-hero) .chat-count{align-self:flex-end;margin-top:-18px}
}

/* dark mode overrides (spesifisitas lebih tinggi) */
html[data-theme="dark"].livechat-page body:has(.chat-hero) .chat-head{background:#223226!important;color:#edf2e9!important;border-bottom:1px solid var(--lc-line)}
html[data-theme="dark"].livechat-page body:has(.chat-hero) .chat-ava::after{border-color:#223226!important}
html[data-theme="dark"].livechat-page body:has(.chat-hero) .chat-hero h1 span{background:none!important;color:var(--lc-lime)!important;-webkit-text-fill-color:var(--lc-lime)!important;padding:0}
html[data-theme="dark"].livechat-page body:has(.chat-hero) .live-chat-form .btn,html[data-theme="dark"].livechat-page body:has(.chat-hero) .live-chat-form .btn.btn-primary{background:var(--lc-lime)!important}
html[data-theme="dark"].livechat-page body:has(.chat-hero) .live-chat-form .btn::before{background:#142016!important}
html[data-theme="dark"].livechat-page body:has(.chat-hero) .chat-bubble.visitor .chat-meta{color:rgba(20,32,22,.62)!important}

/* ── Label AI vs manusia ───────────────────────────────── */
html.livechat-page{--lc-ai:#2f5bd6;--lc-ai-soft:#eaf0ff;--lc-ai-line:#c5d4fb;--lc-ai-ink:#1f3d99}
html[data-theme="dark"].livechat-page{--lc-ai:#8fb0ff;--lc-ai-soft:#1c2540;--lc-ai-line:#2f3d6b;--lc-ai-ink:#c9d8ff}
.ai-badge,.human-badge{display:inline-flex;align-items:center;padding:1px 7px;border-radius:99px;font-size:.62rem;font-weight:800;letter-spacing:.08em;line-height:1.5;text-transform:uppercase}
.ai-badge{background:var(--lc-ai,#2f5bd6);color:#fff}
html[data-theme="dark"] .ai-badge{color:#0f1a38}
.human-badge{background:var(--lc-lime,#c7f36b);color:#18231d}
.chat-sender{display:flex;align-items:center;gap:7px;margin:0 0 5px;font-size:.72rem;font-weight:700;color:var(--lc-ink2,#586558)}
html.livechat-page body:has(.chat-hero) .chat-bubble.ai{align-self:flex-start;background:var(--lc-ai-soft)!important;color:var(--lc-ink)!important;border:1px solid var(--lc-ai-line)!important;border-radius:16px 16px 16px 4px!important}
html.livechat-page body:has(.chat-hero) .chat-bubble.ai .chat-sender{color:var(--lc-ai-ink)}
html.livechat-page body:has(.chat-hero) .chat-bubble.human{border-left:3px solid var(--lc-lime)!important}
html.livechat-page body:has(.chat-hero) .chat-bubble.system{align-self:center;max-width:90%!important;background:transparent!important;border:1px dashed var(--lc-line)!important;border-radius:12px!important;color:var(--lc-ink3)!important;font-size:.76rem!important;text-align:center;padding:6px 12px!important}
.typing-dots{display:inline-flex;gap:4px;padding:2px 0 3px}
.typing-dots i{width:6px;height:6px;border-radius:50%;background:var(--lc-ai,#2f5bd6);opacity:.35;animation:lc-typing 1.2s infinite ease-in-out}
.typing-dots i:nth-child(2){animation-delay:.18s}.typing-dots i:nth-child(3){animation-delay:.36s}
@keyframes lc-typing{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.typing-dots i{animation:none;opacity:.7}}
.ai-banner{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:9px 18px;font-size:.72rem;line-height:1.5;color:var(--lc-ai-ink,#1f3d99);background:var(--lc-ai-soft,#eaf0ff);border-bottom:1px solid var(--lc-ai-line,#c5d4fb)}
.ai-banner[hidden]{display:none}
.ai-banner span:not(.ai-badge){flex:1 1 220px}
.ai-human-btn{flex:0 0 auto;padding:6px 12px;border-radius:99px;border:1px solid var(--lc-ai-line,#c5d4fb);background:var(--lc-card,#fff);color:var(--lc-ai-ink,#1f3d99);font:inherit;font-weight:700;cursor:pointer}
.ai-human-btn:hover:not(:disabled){background:var(--lc-ai,#2f5bd6);color:#fff;border-color:var(--lc-ai,#2f5bd6)}
.ai-human-btn:disabled{opacity:.6;cursor:default}
.ai-human-btn[hidden]{display:none}
@media(max-width:640px){.ai-banner{padding:9px 14px}}