/* Customer Service tetap menempel di viewport, terpisah dari container halaman. */
.support-fab{--support-size:clamp(44px,calc(48 * var(--u)),68px);display:block;width:var(--support-size);height:var(--support-size);border-radius:999px;background:transparent;isolation:isolate;overflow:hidden;transition:width .26s ease;transform:none!important}
.support-fab:before{content:'';position:absolute;inset:7% 0;background:#0057ff;border-radius:999px;z-index:-1}
.support-icon{position:absolute;right:0;top:0;width:var(--support-size);height:var(--support-size);display:grid;place-items:center;background:var(--orange);border-radius:50%;color:#fff}
.support-label{position:absolute;left:18px;right:calc(var(--support-size) + 7px);top:50%;transform:translate(8px,-50%);opacity:0;white-space:nowrap;text-align:left;font-size:clamp(14px,calc(14 * var(--u)),20px);font-weight:700;transition:opacity .18s ease,transform .25s ease}
.support-fab:focus-visible,.support-fab.is-touched,.support-fab[aria-expanded="true"]{width:clamp(220px,calc(240 * var(--u)),310px)}
.support-fab:focus-visible .support-label,.support-fab.is-touched .support-label,.support-fab[aria-expanded="true"] .support-label{opacity:1;transform:translate(0,-50%)}
@media(hover:hover){.support-fab:hover{width:clamp(220px,calc(240 * var(--u)),310px)}.support-fab:hover .support-label{opacity:1;transform:translate(0,-50%)}}
.chat-panel[hidden],.chat-pending[hidden],.chat-error[hidden],.chat-notice[hidden]{display:none!important}
.chat-panel{position:fixed;right:max(12px,calc(20 * var(--u)));bottom:calc(clamp(44px,calc(48 * var(--u)),68px) + 27px);z-index:30;width:min(370px,calc(100vw - 24px));height:550px;max-height:calc(100dvh - clamp(44px,calc(48 * var(--u)),68px) - 45px);display:flex;flex-direction:column;overflow:hidden;background:#f3f4f6;color:#233044;border:1px solid #e2e7ef;border-radius:17px;box-shadow:0 15px 60px #001a4e3d;font-size:13px;line-height:1.45}
.chat-header{display:flex;align-items:center;gap:10px;padding:15px;background:#0051ed;color:white;flex-shrink:0}
.chat-header h2{font-size:16px;line-height:21px;margin:0;font-weight:700;letter-spacing:0}
.chat-header p{font-size:11px;line-height:16px;margin:2px 0 0;opacity:.85}
.chat-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--orange);flex-shrink:0}
.chat-avatar svg{width:24px;height:24px;display:block}
#chat-close{margin-left:auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#ffffff1f}
#chat-close:hover{background:#ffffff38}
#chat-close svg{width:18px;height:18px}
.chat-notice{padding:8px 12px;margin:0;font-size:11px;line-height:16px;background:#fff7df;color:#756039;flex-shrink:0}
.chat-log{flex:1;min-height:90px;overflow-y:auto;overscroll-behavior:contain;padding:16px 12px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin}
.chat-bubble{padding:10px 11px 7px;max-width:87%;border-radius:10px;box-shadow:0 1px 2px #2536510e;overflow-wrap:anywhere;flex-shrink:0}
.chat-bubble.assistant{align-self:flex-start;background:#fff;border-bottom-left-radius:3px}
.chat-bubble.user{align-self:flex-end;background:#d5f3e9;border-bottom-right-radius:3px}
.chat-bubble p{white-space:pre-wrap;line-height:1.45;margin:0;font-size:13px}
.chat-message-meta{display:flex;justify-content:flex-end;align-items:center;gap:7px;margin-top:5px;font-size:10px;line-height:15px;color:#73818d}
.chat-message-meta.failed{color:#b44a32}
.chat-retry{background:none;color:#0051ed;padding:0;font-size:10px;text-decoration:underline}
.chat-message-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:7px}
.chat-message-images.single{grid-template-columns:1fr}
.chat-message-images a{display:block;min-width:0;border-radius:7px;overflow:hidden;background:#fff}
.chat-message-images img{display:block;max-height:190px;width:100%;height:100%;object-fit:contain}
.chat-compose{padding:9px 10px 7px;background:white;border-top:1px solid #e7eaf0;flex-shrink:0}
.chat-input-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#chat-message{display:block;width:100%;min-height:49px;max-height:120px;padding:4px 3px;border:0;outline:none;resize:none;font:13px/19px Arial,Helvetica,sans-serif;color:#233044;background:white}
#chat-message::placeholder{color:#8f97a2}
#chat-message:focus-visible{box-shadow:inset 0 -2px #0051ed44}
.chat-toolbar{display:flex;gap:7px;align-items:center;margin-top:3px}
.chat-attach{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;border-radius:8px;color:#7190c5;background:transparent}
.chat-attach:hover{background:#f0f5fd;color:#0051ed}
.chat-attach svg,.chat-send svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.chat-file-hint{font-size:10px;color:#8b96a5}
.chat-send{margin-left:auto;background:#0051ed;color:white;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;flex-shrink:0}
.chat-send:hover:not(:disabled){background:#0043c5}
.chat-send:disabled{opacity:.35}
.chat-save-note{font-size:10px;line-height:14px;color:#8a94a1;margin:4px 3px 0;text-align:center}
.chat-error{font-size:11px;color:#ad3e2a;background:#fff0eb;padding:6px 8px;border-radius:6px;margin:6px 0 0;line-height:16px}
.chat-pending{padding:8px 11px;background:white;border-top:1px solid #e7eaf0;display:flex;gap:8px;overflow-x:auto;flex-shrink:0}
.chat-pending-image{position:relative;width:64px;flex-shrink:0}
.chat-pending-image img{display:block;width:64px;height:55px;object-fit:cover;border-radius:7px;border:1px solid #e0e6ed}
.chat-pending-image small{display:block;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px;color:#7a8798}
.chat-remove-image{position:absolute;top:-4px;right:-4px;background:#172b4d;color:#fff;width:20px;height:20px;border-radius:50%;font-size:14px;line-height:20px;padding:0}
@media(max-width:599px){.support-fab{--support-size:48px;width:48px;height:48px}.support-fab:focus-visible,.support-fab.is-touched,.support-fab[aria-expanded="true"]{width:220px}.chat-panel{left:10px;right:10px;bottom:calc(72px + env(safe-area-inset-bottom));width:auto;height:550px;max-height:calc(100dvh - 93px - env(safe-area-inset-bottom))}.chat-header{padding:12px}.chat-header h2{font-size:15px}.chat-file-hint{font-size:9px}}