.h88-chat-layer[hidden], .h88-chat-layer [hidden] { display: none!important; }
.h88-chat-layer { position: fixed; inset: 0; z-index: 110000; color: #25313f; font-family: inherit; }
.h88-chat-backdrop { position: absolute; inset: 0; background: rgb(8 25 48 / 28%); }
.h88-chat-panel { position: fixed; right: max(12px, env(safe-area-inset-right)); top: 12px; display: flex; flex-direction: column; width: min(390px,calc(100vw - 24px)); height: 570px; max-height: calc(100dvh - 24px); padding: 14px; box-sizing: border-box; background: #fff; border: 1px solid #e0e5ec; border-radius: 10px; box-shadow: 0 12px 45px #08245130; overflow: hidden; }
.h88-chat-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; }
.h88-chat-heading h2 { margin: 0!important; color: #082451; font-size: 16px!important; line-height: 1.3; font-weight: 600; }
.h88-chat-heading button { width: 44px; height: 44px; min-width: 44px; padding: 0; border: 0; background: transparent; color: #617084; font-size: 27px; cursor: pointer; }
.h88-chat-intro,.h88-chat-privacy { flex-shrink: 0; margin: 4px 0 8px; font-size: 12px; line-height: 1.45; color: #617084; }
.h88-chat-privacy { font-size: 10px; margin-top: 0; }
.h88-chat-messages { flex: 1 1 auto; min-height: 70px; padding: 8px 2px; overflow-y: auto; overscroll-behavior: contain; background: #fafbfc; border-radius: 5px; }
.h88-chat-message { max-width: 88%; width: fit-content; margin: 0 auto 10px 0; padding: 8px 10px; border-radius: 8px; background: #edf1f6; overflow-wrap: anywhere; }
.h88-chat-message.is-customer { margin-left: auto; margin-right: 0; background: #eaf2ff; }
.h88-chat-message small { display: block; color: #627087; font-size: 10px; line-height: 1.35; }
.h88-chat-message p { margin: 4px 0!important; color: #25313f; font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.h88-chat-message time { display: block; color: #798491; font-size: 9px; line-height: 1.35; }
.h88-chat-earlier { flex-shrink: 0; min-height: 36px; padding: 4px; border: 0; background: transparent; color: #075bd3; font-size: 11px; cursor: pointer; }
.h88-chat-status { flex-shrink: 0; margin: 6px 0; color: #617084; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.h88-chat-status:empty { display: none; }
.h88-chat-status.is-error { color: #ac2337; }
.h88-chat-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 8px; flex-shrink: 0; margin: 0; padding: 0; }
.h88-chat-form label { grid-column: 1 / -1; color: #536172; font-size: 11px; }
.h88-chat-form textarea { min-width: 0; width: 100%; min-height: 50px; max-height: 100px; margin: 0; padding: 8px; box-sizing: border-box; border: 1px solid #cbd4e1; border-radius: 5px; background: #fff; color: #25313f; font-family: inherit; font-size: 16px; line-height: 1.4; resize: vertical; }
.h88-chat-form button { align-self: end; min-width: 62px; min-height: 44px; margin: 0; padding: 8px 12px; border: 0; border-radius: 5px; background: #075bd3; color: #fff; font-size: 12px; cursor: pointer; }
.h88-chat-form button:disabled { opacity: .5; cursor: default; }
.h88-chat-session-note { flex-shrink: 0; margin-top: 7px; color: #798491; font-size: 9px; line-height: 1.35; }
.h88-chat-panel :focus-visible { outline: 2px solid #438bff; outline-offset: 2px; }
@media (max-height: 480px) { .h88-chat-intro,.h88-chat-privacy,.h88-chat-session-note { display: none; } .h88-chat-panel { padding: 8px; } }

/* Mobile software keyboards resize visualViewport even when the layout viewport stays tall. */
.h88-chat-layer.is-short .h88-chat-intro,.h88-chat-layer.is-short .h88-chat-privacy,.h88-chat-layer.is-short .h88-chat-session-note { display: none; }
.h88-chat-layer.is-short .h88-chat-panel { padding: 8px; }
.h88-chat-layer.is-short .h88-chat-messages { min-height: 0; }

/* Only a confirmed unseen staff reply shows this dot; it does not change navigation layout. */
[data-h88-chat-open] { position: relative; }
[data-h88-chat-open] .h88-chat-unread { position: absolute; top: 4px; right: calc(50% - 18px); width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #df2638; pointer-events: none; }
[data-h88-chat-open] .h88-chat-unread[hidden] { display: none!important; }
.h88-chat-message.is-deleted p { color: #6b7786; font-style: italic; }
.h88-chat-message .h88-message-action { min-height: 36px; margin: 1px 0 -4px; padding: 5px 0; border: 0; background: transparent; color: #526984; font-size: 11px; cursor: pointer; }
.h88-chat-message .h88-message-action:disabled { opacity: .5; }
.h88-chat-form .h88-emoji-toolbar { grid-column: 1/-1; display: flex; align-items: start; gap: 6px; min-width: 0; }
.h88-chat-form .h88-emoji-toggle { min-width: 44px; width: 44px; min-height: 44px; padding: 3px; background: #f1f4f8; color: #25313f; font-size: 25px; }
.h88-chat-form .h88-emoji-picker { display: grid; grid-template-columns: repeat(4,44px); gap: 0; max-height: 132px; overflow-y: auto; padding: 2px; background: #f1f4f8; border-radius: 5px; }
.h88-chat-form .h88-emoji-picker button { width: 44px; min-width: 44px; min-height: 44px; padding: 2px; background: transparent; color: #25313f; font-size: 23px; }
.h88-chat-layer.is-short .h88-emoji-picker { max-height: 88px; }
.h88-chat-form .h88-emoji-toolbar { position: relative; }
.h88-chat-form .h88-emoji-picker { position: absolute; left: 50px; bottom: 0; z-index: 1; box-shadow: 0 2px 12px #08245120; }
@media (any-pointer: coarse) { .h88-chat-message .h88-message-action { min-height: 44px; } }

/* v4: a dedicated conversation surface, filling the mobile visual viewport. */
.h88-chat-panel{width:min(520px,calc(100vw - 32px));right:16px;padding:0;border-radius:18px;max-height:calc(100dvh - 32px)}
.h88-chat-heading{padding:12px 16px;border-bottom:1px solid #eceff2;justify-content:flex-start;gap:12px}
.h88-chat-heading [data-h88-chat-close]{order:-1;color:#d30018;font-size:28px}
.h88-chat-heading h2{font-size:17px!important;color:#20242b}
.h88-chat-intro{margin:0;padding:10px 20px 4px;font-size:12px}
.h88-chat-privacy{margin:0;padding:4px 20px 12px}
.h88-chat-messages{border-radius:0;background:#f4f4f4;padding:18px 14px;min-height:0}
.h88-chat-message{border:1px solid #e6e6e6;background:#fff;border-radius:14px;padding:10px 12px;max-width:88%}
.h88-chat-message.is-customer{background:#fff0ed;border-color:#ffe1da}
.h88-chat-message p{font-size:14px;line-height:1.5}
.h88-chat-status{padding:0 14px;margin:6px 0}
.h88-chat-form{padding:10px 12px;grid-template-columns:44px minmax(0,1fr) 44px auto;gap:8px;align-items:center;border-top:1px solid #eceff2;background:#fff;position:relative}
.h88-chat-form>label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.h88-chat-form textarea{grid-column:2;grid-row:1;min-height:44px!important;height:44px;max-height:96px;resize:none;border-radius:22px;padding:10px 13px;line-height:22px}
.h88-chat-form>[type=submit]{grid-column:4;grid-row:1;min-width:52px;border-radius:22px;background:#d30018;padding:8px 10px}
.h88-chat-form .h88-emoji-toolbar{grid-column:3;grid-row:1;position:static}
.h88-chat-form .h88-emoji-toggle{background:transparent;color:#687079;border-radius:50%;font-size:29px}
.h88-chat-form .h88-emoji-picker{left:12px;right:12px;bottom:calc(100% + 4px);width:auto;grid-template-columns:repeat(auto-fit,minmax(44px,1fr));max-height:min(264px,42dvh);border:1px solid #e1e4e8;padding:8px;background:#fff;z-index:2;border-radius:14px;overscroll-behavior:contain}
.h88-chat-form .h88-emoji-picker button{justify-self:center}
.h88-chat-session-note{margin:0;padding:3px 14px max(8px,env(safe-area-inset-bottom));font-size:9px;background:#fff}
.h88-chat-layer.is-fullscreen .h88-chat-panel{left:0;right:0;width:100%;border:0;border-radius:0;box-shadow:none;padding:0}
.h88-chat-layer.is-fullscreen .h88-chat-heading{padding-top:max(8px,env(safe-area-inset-top));padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
.h88-chat-layer.is-short .h88-chat-panel{padding:0}.h88-chat-layer.is-short .h88-emoji-picker{max-height:132px}
@media(max-width:360px){.h88-chat-form{gap:4px;padding-left:8px;padding-right:8px;grid-template-columns:40px minmax(0,1fr) 40px auto}.h88-chat-form>[type=submit]{min-width:44px;padding:8px}}