/* GPO Chat widget */
#gpoc{--c:#2F6BFF;--hd:#0F1B3D;--ht:#fff;--bb:#fff;--bt:#0A0E14;--bg:#F5F7FB;--r:20px;--ink:var(--bt);--ink2:var(--bt);--mut:color-mix(in srgb,var(--bt) 55%,var(--bb));--line:color-mix(in srgb,var(--bt) 12%,var(--bb));position:fixed;bottom:20px;right:20px;z-index:99990;font:14px/1.5 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--ink2);-webkit-font-smoothing:antialiased}
#gpoc.gpoc-left{right:auto;left:20px}
#gpoc *,#gpoc *:before,#gpoc *:after{box-sizing:border-box}
#gpoc button,#gpoc input,#gpoc textarea{font:inherit;letter-spacing:0;text-transform:none;margin:0}
#gpoc [hidden]{display:none!important}
#gpoc .gpoc-i{display:inline-grid;place-items:center;width:22px;height:22px}
#gpoc .gpoc-i svg{width:100%;height:100%}

/* bubble */
#gpoc .gpoc-bubble{position:relative;display:grid;place-items:center;width:60px;height:60px;padding:0;border:0;border-radius:50%;background:var(--c);color:#fff;cursor:pointer;box-shadow:0 10px 28px rgba(13,17,23,.28);transition:transform .2s}
#gpoc .gpoc-bubble:hover{transform:scale(1.06)}
#gpoc .gpoc-bubble:focus-visible{outline:3px solid #fff;box-shadow:0 0 0 6px var(--c)}
#gpoc .gpoc-bubble .gpoc-i{width:28px;height:28px;grid-area:1/1;transition:transform .2s,opacity .2s}
#gpoc .gpoc-bubble .gpoc-x{opacity:0;transform:rotate(-90deg) scale(.6)}
#gpoc.gpoc-open .gpoc-bubble .gpoc-i:not(.gpoc-x){opacity:0;transform:rotate(90deg) scale(.6)}
#gpoc.gpoc-open .gpoc-bubble .gpoc-x{opacity:1;transform:none}
#gpoc .gpoc-badge{position:absolute;top:-2px;right:-2px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#E0474C;color:#fff;font:700 12px/22px inherit;border:2px solid #fff}
#gpoc .gpoc-greet{position:absolute;bottom:72px;right:0;width:max-content;max-width:240px;padding:10px 14px;border:0;border-radius:14px 14px 4px 14px;background:var(--bb);color:var(--bt);font-weight:600;cursor:pointer;box-shadow:0 10px 30px rgba(13,17,23,.18);animation:gpoc-in .3s ease}
#gpoc.gpoc-left .gpoc-greet{right:auto;left:0;border-radius:14px 14px 14px 4px}

/* panel */
#gpoc .gpoc-panel{position:absolute;bottom:76px;right:0;display:flex;flex-direction:column;width:380px;height:min(620px,calc(100vh - 110px));background:var(--bb);border-radius:var(--r);overflow:hidden;box-shadow:0 24px 60px rgba(13,17,23,.25),0 0 0 1px rgba(13,17,23,.05);animation:gpoc-in .22s ease}
#gpoc.gpoc-left .gpoc-panel{right:auto;left:0}
@keyframes gpoc-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#gpoc .gpoc-head{display:flex;align-items:center;gap:10px;padding:14px 12px 14px 16px;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 55%,var(--hd)),var(--hd));color:var(--ht)}
#gpoc .gpoc-av{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.18);font-weight:800;font-size:17px;position:relative;overflow:hidden}
#gpoc .gpoc-av img,#gpoc .gpoc-mav img{width:100%;height:100%;object-fit:cover;display:block}
#gpoc .gpoc-ht{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
#gpoc .gpoc-ht b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gpoc .gpoc-hs{font-size:12px;opacity:.85;display:flex;align-items:center;gap:6px}
#gpoc .gpoc-hs:before{content:"";width:8px;height:8px;border-radius:50%;background:#35D07F;box-shadow:0 0 0 2px rgba(53,208,127,.3)}
#gpoc .gpoc-hs.off:before{background:#F5B63A;box-shadow:0 0 0 2px rgba(245,182,58,.3)}
#gpoc .gpoc-hb,#gpoc .gpoc-wa{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--ht);cursor:pointer;text-decoration:none}
#gpoc .gpoc-hb:hover,#gpoc .gpoc-wa:hover{background:rgba(255,255,255,.15)}
#gpoc .gpoc-hb .gpoc-i,#gpoc .gpoc-wa .gpoc-i{width:20px;height:20px}
#gpoc.gpoc-human .gpoc-hb:first-of-type{display:none}

#gpoc .gpoc-log{flex:1;overflow-y:auto;padding:16px 14px 8px;background:var(--bg);display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
#gpoc .gpoc-msg{display:flex;flex-direction:column;align-items:flex-start;max-width:88%;gap:6px}
#gpoc .gpoc-msg.gpoc-visitor{align-self:flex-end;align-items:flex-end}
#gpoc .gpoc-b{padding:10px 13px;border-radius:16px 16px 16px 4px;background:var(--bb);color:var(--bt);white-space:pre-line;overflow-wrap:anywhere;box-shadow:0 1px 2px rgba(13,17,23,.06)}
#gpoc .gpoc-visitor .gpoc-b{background:var(--c);color:#fff;border-radius:16px 16px 4px 16px}
#gpoc .gpoc-admin .gpoc-b{background:color-mix(in srgb,var(--c) 10%,var(--bb));color:var(--bt);border:1px solid color-mix(in srgb,var(--c) 25%,var(--bb))}
#gpoc .gpoc-line{display:flex;align-items:flex-end;gap:8px}
#gpoc .gpoc-mav{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;overflow:hidden;background:color-mix(in srgb,var(--c) 18%,var(--bb));color:var(--c);font-weight:700;font-size:12px}
#gpoc .gpoc-joined{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:999px;background:color-mix(in srgb,var(--c) 8%,var(--bb));color:var(--mut);font-size:12.5px}
#gpoc .gpoc-msg.gpoc-sys:has(.gpoc-joined){align-self:center}
#gpoc .gpoc-sys .gpoc-b{background:transparent;box-shadow:none;border:1px dashed var(--line);color:var(--mut);font-size:13px}
#gpoc .gpoc-pending{opacity:.6}
#gpoc .gpoc-failed .gpoc-b{background:#FDECEC;color:#9E2B30}
#gpoc .gpoc-meta{font-size:11px;color:var(--mut);padding:0 4px}
#gpoc .gpoc-btns{display:flex;flex-wrap:wrap;gap:6px}
#gpoc .gpoc-qb{padding:7px 12px;border:1px solid color-mix(in srgb,var(--c) 35%,var(--bb));border-radius:999px;background:var(--bb);color:var(--c);font-weight:600;font-size:13px;cursor:pointer;transition:background .15s,color .15s;text-align:left}
#gpoc .gpoc-qb:hover{background:var(--c);color:#fff}
#gpoc .gpoc-cards{display:flex;flex-direction:column;gap:6px;width:100%;min-width:260px}
#gpoc .gpoc-card{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--bb);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s}
#gpoc a.gpoc-card:hover{border-color:var(--c);transform:translateY(-1px)}
#gpoc .gpoc-cimg{flex:none;width:44px;height:44px;border-radius:8px;object-fit:cover}
#gpoc .gpoc-cbody{flex:1;min-width:0}
#gpoc .gpoc-ct{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
#gpoc .gpoc-ct b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#gpoc .gpoc-cp{flex:none;font-weight:700;color:var(--c);font-size:13px}
#gpoc .gpoc-card small{display:block;color:var(--mut);font-size:12px;margin-top:2px}
#gpoc .gpoc-links{display:flex;flex-wrap:wrap;gap:8px}
#gpoc .gpoc-link{color:var(--c);font-weight:600;font-size:13px;text-decoration:none}
#gpoc .gpoc-link:hover{text-decoration:underline}
#gpoc .gpoc-cform{display:flex;flex-direction:column;gap:8px;width:100%;min-width:260px;padding:12px;border-radius:14px;background:var(--bb);border:1px solid var(--line)}
#gpoc .gpoc-cform input,#gpoc .gpoc-cform textarea,#gpoc .gpoc-cform select{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--bb);color:var(--ink);font-size:14px;resize:none;box-shadow:none}
#gpoc .gpoc-cform input:focus,#gpoc .gpoc-cform textarea:focus,#gpoc .gpoc-form textarea:focus{outline:2px solid color-mix(in srgb,var(--c) 40%,#fff);border-color:var(--c)}
#gpoc .gpoc-cbtn{padding:10px;border:0;border-radius:10px;background:var(--c);color:#fff;font-weight:700;cursor:pointer}
#gpoc .gpoc-cbtn:disabled{opacity:.6}
#gpoc .gpoc-typing .gpoc-b{display:flex;gap:4px;padding:13px 14px}
#gpoc .gpoc-typing i{width:7px;height:7px;border-radius:50%;background:#B5BCC8;animation:gpoc-dot 1s infinite}
#gpoc .gpoc-typing i:nth-child(2){animation-delay:.15s}#gpoc .gpoc-typing i:nth-child(3){animation-delay:.3s}
@keyframes gpoc-dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
#gpoc .gpoc-err{align-self:center;padding:6px 12px;border-radius:999px;background:#FDECEC;color:#9E2B30;font-size:12.5px}

#gpoc .gpoc-form{display:flex;align-items:flex-end;gap:8px;padding:10px 10px 10px 14px;border-top:1px solid var(--line);background:var(--bb)}
#gpoc .gpoc-form textarea{flex:1;min-height:40px;max-height:120px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);resize:none;font-size:14.5px;line-height:1.4;box-shadow:none}
#gpoc .gpoc-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#gpoc .gpoc-send{flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:12px;background:var(--c);color:#fff;cursor:pointer}
#gpoc .gpoc-send .gpoc-i{width:20px;height:20px}
#gpoc .gpoc-foot{padding:0 14px 8px;background:var(--bb);text-align:center;font-size:11px;color:var(--mut)}

@media (max-width:480px){
	#gpoc{bottom:14px;right:14px}#gpoc.gpoc-left{left:14px}
	#gpoc .gpoc-bubble{width:56px;height:56px}
	#gpoc.gpoc-open .gpoc-bubble{display:none}
	#gpoc .gpoc-panel{position:fixed;inset:0;width:100%;height:100%;border-radius:0}
	#gpoc .gpoc-head{padding-top:max(14px,env(safe-area-inset-top))}
	#gpoc .gpoc-form{padding-bottom:max(10px,env(safe-area-inset-bottom))}
	#gpoc .gpoc-form textarea{font-size:16px}
	#gpoc .gpoc-cards,#gpoc .gpoc-cform{min-width:0}
	#gpoc .gpoc-msg{max-width:92%}
}
@media (prefers-reduced-motion:reduce){#gpoc *{animation:none!important;transition:none!important}}

/* label launcher */
#gpoc.gpoc-pill .gpoc-bubble{width:auto;height:52px;padding:0 20px 0 16px;border-radius:999px;display:flex;gap:8px}
#gpoc.gpoc-pill .gpoc-bubble .gpoc-i{width:22px;height:22px}
#gpoc.gpoc-pill .gpoc-lbl{font-weight:700;font-size:14.5px;white-space:nowrap}
#gpoc.gpoc-pill.gpoc-open .gpoc-lbl{display:none}
#gpoc.gpoc-pill.gpoc-open .gpoc-bubble{width:52px;padding:0;justify-content:center}
#gpoc.gpoc-pill .gpoc-bubble .gpoc-x{position:absolute}
#gpoc.gpoc-pill .gpoc-panel{bottom:68px}
