.jopal-chat-launcher{position:fixed;right:22px;bottom:22px;z-index:120;width:56px;height:56px;border:0;border-radius:50%;background:#005d6d;color:#fff;box-shadow:0 12px 32px rgba(0,60,72,.24);display:grid;place-items:center;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}.jopal-chat-launcher:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,60,72,.28)}.jopal-chat-launcher svg{width:24px;height:24px}.jopal-chat-launcher .jopal-chat-dot{position:absolute;right:1px;top:1px;width:13px;height:13px;border:3px solid #fff;border-radius:50%;background:#8b98a0}.jopal-chat-launcher.is-online .jopal-chat-dot{background:#29b873}.jopal-chat-launcher.is-away .jopal-chat-dot{background:#e4a11b}.jopal-chat-panel{position:fixed;right:22px;bottom:90px;z-index:121;width:min(382px,calc(100vw - 28px));height:clamp(430px,64vh,540px);border:1px solid #d8e4e7;border-radius:20px;background:#fff;box-shadow:0 22px 60px rgba(13,45,52,.20);overflow:hidden;display:none;grid-template-rows:auto minmax(0,1fr) auto;font-family:Inter,Arial,sans-serif}.jopal-chat-panel.is-open{display:grid}.jopal-chat-head{background:#064d59;color:#fff;padding:14px 16px;display:flex;align-items:center;gap:11px;min-height:66px}.jopal-chat-brand{width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.13);display:grid;place-items:center;font-weight:800;font-size:15px;flex:0 0 auto}.jopal-chat-head-copy{flex:1;min-width:0}.jopal-chat-head-copy strong{display:block;font-size:14px;line-height:1.2}.jopal-chat-presence{font-size:11px;opacity:.82;margin-top:3px}.jopal-chat-close{width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:#fff;font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center}.jopal-chat-close:hover{background:rgba(255,255,255,.10)}.jopal-chat-body{padding:14px 14px 10px;overflow-y:auto;overscroll-behavior:contain;background:#f7fafb;scrollbar-width:thin}.jopal-chat-intro{font-size:13px;line-height:1.5;color:#355158;margin:0 2px 12px}.jopal-chat-panel.has-messages .jopal-chat-intro{display:none}.jopal-chat-messages{display:flex;flex-direction:column;min-height:0}.jopal-chat-msg{width:fit-content;max-width:82%;padding:9px 11px;border-radius:14px;margin:5px 0;font-size:13px;line-height:1.42;white-space:pre-wrap;word-break:break-word}.jopal-chat-msg.is-visitor{align-self:flex-end;margin-left:auto;background:#005d6d;color:#fff;border-bottom-right-radius:5px}.jopal-chat-msg.is-admin,.jopal-chat-msg.is-system{align-self:flex-start;margin-right:auto;background:#fff;color:#243e44;border:1px solid #dce7e9;border-bottom-left-radius:5px}.jopal-chat-time{display:block;font-size:9px;opacity:.62;margin-top:4px}.jopal-chat-form{border-top:1px solid #e4ecee;padding:10px;background:#fff}.jopal-chat-form-row{display:flex;gap:8px;align-items:flex-end}.jopal-chat-input{flex:1;min-width:0;border:1px solid #cadadd;border-radius:12px;padding:10px 11px;font:inherit;font-size:14px;line-height:1.35;resize:none;min-height:42px;max-height:96px;overflow-y:auto;outline:none}.jopal-chat-input:focus{border-color:#6fa3ac;box-shadow:0 0 0 3px rgba(0,93,109,.08)}.jopal-chat-send{width:44px;height:42px;border:0;border-radius:12px;background:#005d6d;color:#fff;cursor:pointer;font-weight:700;display:grid;place-items:center;flex:0 0 auto}.jopal-chat-send:disabled{opacity:.45;cursor:not-allowed}.jopal-chat-disabled{font-size:12px;color:#667c82;text-align:center;padding:7px}.jopal-chat-error{font-size:11px;color:#a33;margin-top:6px}.jopal-chat-unread{position:absolute;left:-4px;top:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#d74a43;color:#fff;border:2px solid #fff;font-size:10px;font-weight:800;display:none;align-items:center;justify-content:center}.jopal-chat-unread.is-visible{display:flex}

@media(max-width:640px){.jopal-chat-launcher{right:14px;bottom:max(14px,env(safe-area-inset-bottom));width:54px;height:54px}.jopal-chat-panel{left:12px;right:12px;bottom:max(76px,calc(env(safe-area-inset-bottom) + 70px));width:auto;height:clamp(430px,68dvh,560px);border-radius:18px}.jopal-chat-panel.is-open+.jopal-chat-launcher{opacity:0;visibility:hidden;pointer-events:none;transform:scale(.9)}.jopal-chat-head{padding:13px 14px;min-height:62px}.jopal-chat-brand{width:34px;height:34px}.jopal-chat-head-copy strong{font-size:14px}.jopal-chat-body{padding:12px 12px 8px}.jopal-chat-intro{font-size:13px;margin-bottom:10px}.jopal-chat-msg{max-width:86%;padding:9px 11px;font-size:14px}.jopal-chat-form{padding:9px;padding-bottom:max(9px,env(safe-area-inset-bottom))}.jopal-chat-input{font-size:16px;min-height:44px;padding:10px 11px}.jopal-chat-send{width:46px;height:44px}.jopal-chat-close{width:32px;height:32px}}

@media(max-width:390px){.jopal-chat-panel{left:8px;right:8px;bottom:max(72px,calc(env(safe-area-inset-bottom) + 66px));height:clamp(410px,66dvh,540px)}.jopal-chat-head{padding:12px}.jopal-chat-body{padding:10px}.jopal-chat-msg{max-width:88%}}.jopal-chat-closed{padding:4px 2px 2px}.jopal-chat-closed strong{display:block;font-size:13px;color:#243e44}.jopal-chat-closed span{display:block;margin-top:3px;font-size:11px;color:#6b8086;line-height:1.4}.jopal-chat-reopen{margin-top:9px;border:0;border-radius:10px;background:#005d6d;color:#fff;padding:9px 12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}.jopal-chat-reopen:disabled{opacity:.5;cursor:wait}.jopal-chat-msg.is-system{align-self:center;max-width:92%;background:transparent;border:0;color:#71868c;text-align:center;font-size:11px;padding:4px 8px;margin:7px auto}.jopal-chat-msg.is-system .jopal-chat-time{display:none}.jopal-chat-form-row[hidden],.jopal-chat-closed[hidden]{display:none!important}
.jopal-chat-tools{position:relative;display:flex;align-items:center;gap:6px;margin-bottom:8px}
.jopal-chat-tool{width:30px;height:30px;border:1px solid #d6e2e4;border-radius:9px;background:#f8fbfb;color:#36555c;display:grid;place-items:center;font-size:17px;cursor:pointer}
.jopal-chat-tool:hover{background:#eef7f6;border-color:#a9c9ce}
.jopal-chat-tool:disabled{opacity:.45;cursor:not-allowed}
.jopal-chat-file-hint{font-size:9px;color:#87999e;margin-left:2px}
.jopal-chat-emoji-picker{position:absolute;left:0;bottom:38px;width:210px;padding:8px;border:1px solid #d8e4e7;border-radius:12px;background:#fff;box-shadow:0 14px 34px rgba(23,59,67,.16);display:grid;grid-template-columns:repeat(6,1fr);gap:4px;z-index:4}
.jopal-chat-emoji-picker[hidden]{display:none!important}
.jopal-chat-emoji-picker button{border:0;background:transparent;border-radius:7px;font-size:18px;line-height:1;padding:6px;cursor:pointer}
.jopal-chat-emoji-picker button:hover{background:#eef7f6}
.jopal-chat-msg.has-attachment{padding:7px;max-width:86%}
.jopal-chat-attachment-image{display:block;overflow:hidden;border-radius:10px}
.jopal-chat-attachment-image img{display:block;max-width:220px;max-height:180px;width:auto;height:auto;object-fit:cover}
.jopal-chat-attachment-card{display:flex;align-items:center;gap:9px;min-width:210px;color:inherit;text-decoration:none;padding:7px 8px;border-radius:10px;background:rgba(255,255,255,.12)}
.jopal-chat-msg.is-admin .jopal-chat-attachment-card{background:#fff;color:#243e44}
.jopal-chat-attachment-icon{width:36px;height:36px;border-radius:9px;background:#eaf2f3;color:#005d6d;display:grid;place-items:center;font-size:9px;font-weight:800}
.jopal-chat-attachment-card strong{display:block;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
.jopal-chat-attachment-card small{display:block;margin-top:2px;font-size:9px;opacity:.7}
@media(max-width:640px){.jopal-chat-file-hint{display:none}.jopal-chat-attachment-image img{max-width:200px;max-height:160px}.jopal-chat-emoji-picker{width:198px}}

/* compact emoji picker */
.jopal-chat-emoji-picker{width:min(276px,calc(100vw - 56px));grid-template-columns:repeat(9,minmax(0,1fr));gap:2px;padding:6px;border-radius:14px;bottom:36px}
.jopal-chat-emoji-picker button{font-size:17px;padding:5px 3px;border-radius:8px}
@media(max-width:640px){.jopal-chat-emoji-picker{width:min(252px,calc(100vw - 44px));grid-template-columns:repeat(9,minmax(0,1fr));left:0}.jopal-chat-emoji-picker button{font-size:16px;padding:5px 2px}}

.jopal-chat-upload-preview{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px;border:1px solid #d7e4e6;border-radius:12px;background:#f8fbfb;margin-bottom:8px}
.jopal-chat-upload-preview[hidden]{display:none!important}
.jopal-chat-upload-thumb{width:54px;height:54px;border-radius:10px;background:#eaf2f3;display:grid;place-items:center;overflow:hidden;color:#005d6d;font-size:10px;font-weight:800}
.jopal-chat-upload-thumb img{width:100%;height:100%;object-fit:cover}
.jopal-chat-upload-copy{min-width:0}
.jopal-chat-upload-copy strong{display:block;font-size:11px;color:#28464d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jopal-chat-upload-copy small{display:block;margin-top:2px;font-size:9px;color:#81949a}
.jopal-chat-upload-caption{width:100%;margin-top:6px;border:1px solid #d2dfe2;border-radius:8px;padding:7px 8px;font:inherit;font-size:11px;outline:none;background:#fff}
.jopal-chat-upload-caption:focus{border-color:#7caab2}
.jopal-chat-upload-progress{height:4px;margin-top:7px;border-radius:999px;background:#e3ecee;overflow:hidden}
.jopal-chat-upload-progress span{display:block;width:0;height:100%;background:#0b7f73;transition:width .12s linear}
.jopal-chat-upload-actions{display:flex;flex-direction:column;gap:5px}
.jopal-chat-upload-actions button{border:0;border-radius:8px;padding:7px 9px;font:inherit;font-size:10px;font-weight:800;cursor:pointer}
.jopal-chat-upload-cancel{background:#eef3f4;color:#60777d}
.jopal-chat-upload-send{background:#005d6d;color:#fff}
.jopal-chat-upload-actions button:disabled{opacity:.5;cursor:wait}
.jopal-chat-attachment-caption{display:block;margin-top:7px;font-size:11px;line-height:1.35}
@media(max-width:640px){.jopal-chat-upload-preview{grid-template-columns:48px minmax(0,1fr) auto;gap:8px}.jopal-chat-upload-thumb{width:48px;height:48px}.jopal-chat-upload-caption{font-size:12px}}

.jopal-chat-typing{padding:4px 3px 7px;color:#70858a;font-size:10px;display:flex;align-items:center;gap:3px}
.jopal-chat-typing[hidden]{display:none!important}
.jopal-chat-typing span{width:4px;height:4px;border-radius:50%;background:#70858a;animation:jopalTyping 1s infinite ease-in-out}
.jopal-chat-typing span:nth-child(2){animation-delay:.15s}.jopal-chat-typing span:nth-child(3){animation-delay:.3s}
.jopal-chat-seen{display:block;text-align:right;font-size:8px;opacity:.62;margin-top:2px;min-height:9px}
@keyframes jopalTyping{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}