:root {
--accent: #1e66ff;
--admin-bg: #f0f2f4;
--muted: #6b7280;
--window-radius: 12px;
--input-height: 56px;
--primary-red: #e60023;
--primary-red-dark: #cc001f;
--primary-red-light: #fff0f0;
--base-bottom-gap: 12px;

/* badge config (nilai lebih kecil supaya tidak dominan) */
--badge-size: 28px; /* DIPERBESAR agar lebih jelas */
--ring-padding: 3px;
--badge-font-scale: 0.70; /* sedikit lebih besar untuk keterbacaan */

/* ukuran bubble (ubah di sini untuk memperbesar/memperkecil) */
--bubble-size: 200px; /* DIUBAH: dibuat lebih besar agar jelas terlihat */
}

/* ================================
BASE STYLES
================================ */
.livechat-root * {
box-sizing: border-box;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ================================
LAUNCHER BUBBLE  (FULL PNG ONLY)
================================ */
.livechat-bubble {
position: fixed;
right: 16px;
bottom: calc(var(--base-bottom-gap) + env(safe-area-inset-bottom, 0px));
width: auto;
height: auto;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
display: inline-block;
z-index: 99999;
cursor: pointer;
padding: 0;
overflow: visible;
line-height: 0;
}

.livechat-bubble img {
/* Paksa ukuran bubble sesuai variabel, override rule lain */
width: var(--bubble-size) !important;
height: var(--bubble-size) !important;
max-width: var(--bubble-size) !important;
max-height: var(--bubble-size) !important;
display: block !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border-radius: 0 !important;
object-fit: contain !important;
image-rendering: auto;
}

/* ================================
UNREAD INDICATOR (HAPUS RING PUTIH)
================================ */
.livechat-bubble[data-unread] {
position: fixed;
}

.livechat-bubble[data-unread]::before {
display: none;
content: none;
}

.livechat-bubble[data-unread]::after {
content: attr(data-unread);
position: absolute;
width: var(--badge-size);
height: var(--badge-size);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: calc(var(--badge-size) * var(--badge-font-scale));
color: #fff;
background: var(--primary-red);
/* posisi lebih mendekat ke PNG: gunakan offset lebih kecil (lebih overlap) */
top: calc(var(--badge-size) * -0.25);
right: calc(var(--badge-size) * -0.25);
z-index: 100002; /* naikkan sedikit agar tidak tertutup */
box-shadow: 0 6px 18px rgba(0,0,0,0.16);
line-height: 1;
padding: 0;
box-sizing: border-box;
pointer-events: none;
}

.livechat-bubble[data-unread]:not([data-unread="1"])::after {
min-width: var(--badge-size);
padding: 0 6px;
border-radius: calc(var(--badge-size) * 0.6);
}

.livechat-bubble[data-unread="1"]::after,
.livechat-bubble[data-unread="2"]::after,
.livechat-bubble[data-unread="3"]::after,
.livechat-bubble[data-unread="4"]::after,
.livechat-bubble[data-unread="5"]::after {
min-width: calc(var(--badge-size) - 2px);
padding: 0 3px;
font-size: calc(var(--badge-size) * var(--badge-font-scale));
}

/* ================================
OVERLAY
================================ */
.livechat-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.28);
z-index: 99990;
display: none;
pointer-events: none;
}

/* ================================
CHAT WINDOW
================================ */
.livechat-window {
position: fixed;
right: 12px;
top: env(safe-area-inset-top, 16px);
bottom: calc(var(--base-bottom-gap) + env(safe-area-inset-bottom, 0px));
width: min(100vw - 24px, 380px);
height: min(92vh, 720px);
background: #fff;
border-radius: var(--window-radius);
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 99995;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

/* HEADER */
.lc-header{display:flex;gap:10px;align-items:center;padding:10px;border-bottom:1px solid #eee;position:relative;z-index:10}
.lc-header .avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0}
.lc-header .avatar img{width:100%;height:100%;object-fit:cover;display:block}
.lc-header .info{flex:1;min-width:0}
.lc-header .name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-header .bio{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lc-close{background:none;border:0;font-size:18px;cursor:pointer;color:#666;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:background .2s}
#lc-close:hover

/* BODY */
.lc-body{flex:1;padding:12px;background:#f7f9fb;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(var(--input-height)+16px+env(safe-area-inset-bottom,0px));position:relative;scroll-behavior:smooth}

/* NAME FORM */
.lc-name-form-overlay{position:fixed;inset:0;background:rgba(255,255,255,.98);display:none;align-items:center;justify-content:center;z-index:100000;padding:20px;backdrop-filter:blur(5px);pointer-events:none}
.name-form-container{background:white;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.12);padding:32px 28px;max-width:400px;width:100%;text-align:center;border:1px solid #e5e7eb}
.name-form-container h3{margin:0 0 12px 0;font-size:22px;font-weight:600;color:#111827;line-height:1.3}
.name-form-container>p{margin:0 0 24px 0;font-size:15px;color:#6b7280;line-height:1.5}
#name-form{display:flex;flex-direction:column;gap:16px}
#name-input{padding:16px;border:2px solid #e5e7eb;border-radius:12px;font-size:16px;font-family:inherit;transition:all .2s ease;outline:none;background:#f9fafb}
#name-input:focus{border-color:var(--primary-red);background:var(--primary-red-light);box-shadow:0 0 0 3px rgba(230,0,35,.1)}
#name-input.error{border-color:var(--primary-red);background:var(--primary-red-light);animation:shake .3s ease}
#name-input.error:focus{border-color:var(--primary-red);box-shadow:0 0 0 3px rgba(230,0,35,.2)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
#name-submit{background:var(--primary-red);color:white;border:none;padding:16px;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;font-family:inherit}
#name-submit:hover{background:var(--primary-red-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(230,0,35,.3)}
#name-submit:active{transform:translateY(0)}
.form-note{margin-top:20px!important;font-size:13px!important;color:#9ca3af!important;font-style:italic}

/* MESSAGE ROWS */
.lc-msg{display:flex;gap:8px;margin-bottom:10px;align-items:flex-end;background:transparent}
.lc-msg.admin{justify-content:flex-start}
.lc-msg.user{justify-content:flex-end}
.wrapper{display:flex;flex-direction:column;max-width:76%;background:transparent}
.mini{width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.08);background:#fff}
.mini img{width:100%;height:100%;object-fit:cover;display:block}

/* BUBBLE */
.bubble{padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.35;word-wrap:break-word;display:inline-block;max-width:100%}
.bubble.admin{background:var(--admin-bg);color:#111;border-bottom-left-radius:6px}
.bubble.user{background:var(--primary-red);color:#fff;border-bottom-right-radius:6px}
.bubble.short.user{background:var(--primary-red)!important;color:#fff!important}
.bubble.short{white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis;padding-left:12px;padding-right:12px}

/* IMAGE MESSAGE */
.image-only{max-width:var(--max-image,240px)}
.image-only img{width:100%;height:auto;display:block;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.1);max-width:240px;max-height:300px}

/* META */
.msg-meta{font-size:11px;color:var(--muted);margin-top:6px;display:block;background:transparent;padding:0;border:none;box-shadow:none;line-height:1}
.lc-msg.user .msg-meta{text-align:right;margin-right:4px}
.lc-msg.admin .msg-meta{text-align:left;margin-left:4px}

/* ================================
INPUT AREA  (RESTORED TO ORIGINAL)
================================ */
.lc-inputwrap {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: var(--input-height);
display: flex;
flex-direction: column;
align-items: stretch;
background: #fff;
border-top: 1px solid #eee;
z-index: 20;
padding-top: 8px;
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
min-height: var(--input-height);
height: auto;
}

.input-row {
display: flex;
gap: 8px;
align-items: center;
width: 100%;
padding: 0 8px;
}

/* ================================
TEXTAREA & PREVIEW AREA (RESTORED)
================================ */
.lc-textarea {
flex: 1;
display: flex;
flex-direction: column;
gap: 0;
min-width: 0;
}

#attach-preview-area {
padding: 10px;
background: #f8f9fa;
border-radius: 10px;
margin: 8px 8px 0;
border: 1px solid #e0e0e0;
max-height: 200px;
overflow-y: auto;
display: none;
animation: fadeIn 0.3s ease;
}

#attach-preview-area:not(:empty) {
display: block;
}

#attach-preview-area::-webkit-scrollbar {
width: 4px;
}
#attach-preview-area::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 2px; }
#attach-preview-area::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }
#attach-preview-area::-webkit-scrollbar-thumb:hover { background: #aaa; }

/* ================================
SIMPLE PREVIEW STYLES
================================ */
.simple-preview {
margin-bottom: 8px;
background: white;
border-radius: 8px;
border: 1px solid #e0e0e0;
overflow: hidden;
animation: fadeIn 0.3s ease;
}

/* ================================
TEXTAREA STYLING (RESTORED TO ORIGINAL)
================================ */
#lc-text {
width: 100%;
height: 36px;
min-height: 36px;
max-height: 120px;
resize: none;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid #e6e8ef;
outline: none;
font-size: 14px;
line-height: 1.2;
transition: all 0.2s;
font-family: inherit;
overflow-y: auto;
}

#lc-text:focus {
border-color: var(--primary-red);
box-shadow: 0 0 0 3px rgba(230,0,35,0.08);
}

#lc-text.disabled {
background: #f3f4f6;
color: #9ca3af;
cursor: not-allowed;
border-color: #e5e7eb;
}

#lc-text.disabled::placeholder {
color: #9ca3af;
}

/* ================================
SEND BUTTON (RESTORED TO ORIGINAL)
================================ */
.lc-send-btn {
background: var(--primary-red);
color: #fff;
border: 0;
padding: 10px 12px;
border-radius: 10px;
cursor: pointer;
height: 40px;
min-width: 56px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
transition: all .2s;
flex-shrink: 0;
font-family: inherit;
}

.lc-send-btn:hover:not(.disabled) {
background: var(--primary-red-dark);
}

.lc-send-btn[aria-busy="true"] {
position: relative;
color: transparent;
pointer-events: none;
}

.lc-send-btn[aria-busy="true"]::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
border: 2px solid rgba(255,255,255,.3);
border-radius: 50%;
border-top-color: white;
animation: spin 1s linear infinite;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

/* Disabled styles for attach/send buttons */
.lc-attach-btn.disabled,
.lc-send-btn.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}

/* ================================
ATTACH BUTTON (HILANGKAN BORDER & BACKGROUND)
================================ */
/* hanya menghapus border/outline/box-shadow/semua background agar tombol attach tampil tanpa border atau latar */
.lc-attach-btn {
border: 0 !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
-webkit-appearance: none !important;
appearance: none !important;
padding: 0 !important; /* hapus padding default agar tidak ada 'latarnya' */
margin: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
}

/* juga pastikan pada hover/focus tidak muncul latar */
.lc-attach-btn:hover,
.lc-attach-btn:focus,
.lc-attach-btn:active {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
}

/* jika ada elemen internal yang memberi background (mis. svg wrapper), pastikan transparan */
.lc-attach-btn * {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
}

/* ================================
REST OF THE FILE (unchanged)
================================ */
/* Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }

/* ...keep the rest of your original styles below unchanged... */

/* RESPONSIVE */
@media (max-width: 420px) {
:root { --bubble-size: 96px; --badge-size: 22px; --badge-font-scale: 0.66; --ring-padding: 3px; }
.livechat-window { right: 8px; left: 8px; width: auto; border-radius: 10px; }
.lc-body { padding: 10px; padding-bottom: calc(var(--input-height) + 12px + env(safe-area-inset-bottom, 0px)); }
.image-only img { max-width: 200px; }
.livechat-bubble { max-width: var(--bubble-size); max-height: var(--bubble-size); }
.livechat-bubble img {
width: var(--bubble-size) !important;
height: var(--bubble-size) !important;
max-width: var(--bubble-size) !important;
max-height: var(--bubble-size) !important;
background: transparent !important;
border-radius: 0 !important;
}
}

/* FORCE LIGHT THEME FOR LIVECHAT (dipertahankan) */
.livechat-root,
.livechat-root * { box-sizing: border-box; }

.livechat-root,
.livechat-root .livechat-window,
.livechat-root .lc-header,
.livechat-root .lc-body,
.livechat-root .lc-inputwrap,
.livechat-root .lc-name-form-overlay,
.livechat-root #attach-preview-area {
background: #ffffff !important;
color: #111827 !important;
border-color: #eaeaea !important;
}

.livechat-root .lc-body { background: #f7f9fb !important; color: #111827 !important; }

.livechat-root .bubble { background: transparent !important; color: inherit !important; box-shadow: none !important; display: inline-block; }
.livechat-root .bubble.user { background: var(--primary-red) !important; color: #ffffff !important; }
.livechat-root .bubble.admin { background: var(--admin-bg) !important; color: #111827 !important; }
.livechat-root .wrapper, .livechat-root .lc-msg { background: transparent !important; }
.livechat-root .lc-inputwrap, .livechat-root #lc-text, .livechat-root .lc-textarea {
background: #ffffff !important;
color: #111827 !important;
border-color: #e6e8ef !important;
}
.livechat-root #lc-text::placeholder { color: rgba(17,24,39,0.45) !important; }

.livechat-root #attach-preview-area, .livechat-root .simple-preview {
background: #ffffff !important;
border-color: #e0e0e0 !important;
color: #111827 !important;
}

.livechat-root .lc-header { background: #ffffff !important; color: #111827 !important; }
.livechat-root .mini, .livechat-root .mini img { background: #fff !important; filter: none !important; }
.livechat-root .livechat-overlay { background: rgba(0,0,0,0.28) !important; pointer-events: auto !important; }
.livechat-root .lc-toast { background: rgba(0, 0, 0, 0.8) !important; color: #fff !important; }

/* OVERRIDE: pastikan launcher bubble hanya menampilkan PNG */
.livechat-root .livechat-bubble { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
.livechat-root .livechat-bubble img {
width: var(--bubble-size) !important;
height: var(--bubble-size) !important;
max-width: var(--bubble-size) !important;
max-height: var(--bubble-size) !important;
background: transparent !important;
border-radius: 0 !important;
display: block !important;
object-fit: contain !important;
}