/* ========================================================================== SHAHAZ.com — Canonical Help Center Live Chat (site-wide modal) -------------------------------------------------------------------------- Visual source of truth: the approved "SHAHAZ Live Chat — Guest + Logged-in Final Preview". The two state blocks below (GUEST / MEMBER) are the preview's own stylesheets, value-for-value, with only two mechanical changes: every class is namespaced .shz-lc-* and every rule is scoped to its state root (.shz-lc--guest / .shz-lc--member) so nothing can leak into or be overridden by the rest of the theme. The SHELL block turns the preview's 430px phone screen into a real modal (fixed overlay, full-bleed on phones, centred 430px card on wider screens) and adds production-only behaviour: safe-area insets, keyboard-aware height, deliberate SHAHAZ focus ring, neutral tap/selection paint, theme-reset protection, reduced motion. ONE modal, ONE stylesheet — this file replaces the old gateway/modal CSS. ========================================================================== */ /* ---- SHELL ------------------------------------------------------------- */ .shz-lc[hidden]{display:none!important} .shz-lc{ position:fixed;left:0;right:0;top:0;bottom:var(--lc-kb,0px);height:auto; /* ZIP-432: pinned to the screen edges; only the keyboard lifts the bottom */ z-index:2147481000;display:flex;align-items:stretch;justify-content:center; pointer-events:none;color:#211a20; font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-text-size-adjust:100%;text-size-adjust:100%; } .shz-lc.is-open{pointer-events:auto} .shz-lc,.shz-lc *{-webkit-tap-highlight-color:transparent} .shz-lc *,.shz-lc *::before,.shz-lc *::after{box-sizing:border-box} .shz-lc-scrim{ position:absolute;inset:0;background:rgba(24,12,20,.42); -webkit-backdrop-filter:none;backdrop-filter:none; opacity:0;transition:opacity .24s ease; } .shz-lc.is-open .shz-lc-scrim{opacity:1} .shz-lc.shz-lc--guest .shz-lc-app, .shz-lc.shz-lc--member .shz-lc-app{ position:relative;width:min(100vw,430px);height:100%;min-height:0; transform:translateY(18px);opacity:0;outline:none; transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .22s ease; } .shz-lc.is-open.shz-lc--guest .shz-lc-app, .shz-lc.is-open.shz-lc--member .shz-lc-app{transform:none;opacity:1} html.shz-lc-lock,body.shz-lc-open{overflow:hidden!important} .shz-lc-main,.shz-lc-chat{overscroll-behavior:contain;-webkit-overflow-scrolling:touch} /* Theme-reset protection: Astra / WooCommerce global button, link and input rules must never restyle the chat controls. Component rules above are more specific and re-apply every value the preview defines. */ .shz-lc button{margin:0;padding:1px 6px;line-height:normal;letter-spacing:normal;text-transform:none;text-shadow:none;border-radius:0;box-shadow:none;-webkit-appearance:none;appearance:none;background:none;border:0;color:inherit;font:inherit} .shz-lc a{text-decoration:none} .shz-lc input{margin:0;padding:1px 2px;min-height:0;height:auto;line-height:normal;box-shadow:none;border-radius:0;-webkit-appearance:none;appearance:none;outline:0} .shz-lc h1,.shz-lc h2,.shz-lc h3,.shz-lc p{margin:0;padding:0} /* Neutral touch / selection paint: no blue tap flash, no blue selection, no callout on controls. Message text stays selectable. */ .shz-lc button,.shz-lc a{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation} .shz-lc-bubble{-webkit-user-select:text;user-select:text} .shz-lc ::selection{background:rgba(237,8,125,.18);color:inherit} .shz-lc ::-moz-selection{background:rgba(237,8,125,.18);color:inherit} /* Deliberate SHAHAZ focus treatment (keyboard only) — pink ring, never the browser's blue box. Pointer/touch focus paints nothing. */ .shz-lc button:focus,.shz-lc a:focus,.shz-lc input:focus{outline:0} .shz-lc.shz-lc button:focus-visible, .shz-lc.shz-lc a:focus-visible{outline:2px solid #ed087d;outline-offset:2px;box-shadow:none} .shz-lc .shz-lc-hero button:focus-visible{outline-color:#ffd0e6;box-shadow:none} .shz-lc .shz-lc-app:focus,.shz-lc .shz-lc-app:focus-visible{outline:none;box-shadow:none} /* ---- GUEST (logged-out) — preview stylesheet, scoped ------------------------ */ .shz-lc--guest{--plum:#26121f;--pink:#ed087d;--pink-deep:#d80670;--pink-soft:#fff0f7; --pink-soft-2:#fff6fa;--paper:#fffdfb;--ink:#211a20;--muted:#91878f; --line:#e8e0e6;--gold:#c8a46b;} .shz-lc--guest *{box-sizing:border-box} .shz-lc--guest button{font:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent} .shz-lc--guest button:focus{outline:0;box-shadow:none} .shz-lc--guest .shz-lc-app{width:min(100vw,430px);height:100svh;min-height:620px;background:var(--paper);display:flex;flex-direction:column;overflow:hidden} .shz-lc--guest .shz-lc-hero{flex:0 0 auto;color:#fff;padding:11px 15px 14px;position:relative;overflow:hidden; background: radial-gradient(circle at 93% -8%,rgba(255,48,159,.35),transparent 39%), radial-gradient(circle at 15% 115%,rgba(200,164,107,.09),transparent 27%), linear-gradient(145deg,#26121f,#160c14 80%)} .shz-lc--guest .shz-lc-top{height:36px;display:flex;align-items:center;gap:7px;position:relative;z-index:1} .shz-lc--guest .shz-lc-back{width:34px;height:34px;color:#fff;font-size:29px;font-weight:300} .shz-lc--guest .shz-lc-brand{flex:1} .shz-lc--guest .shz-lc-kicker{font-size:7.5px;letter-spacing:2.1px;color:#decfd7;font-weight:850} .shz-lc--guest .shz-lc-title{font-size:22px;line-height:1;font-weight:790;letter-spacing:-.8px;margin-top:2px} .shz-lc--guest .shz-lc-more{width:34px;color:#d9cad3;font-size:18px} .shz-lc--guest .shz-lc-support-row{display:flex;align-items:center;margin-top:12px;position:relative;z-index:1} .shz-lc--guest .shz-lc-avatar{width:43px;height:43px;border-radius:14px;background:#fff;color:var(--pink);display:grid;place-items:center;font-size:18px;font-weight:900} .shz-lc--guest .shz-lc-support-text{flex:1;margin-left:10px} .shz-lc--guest .shz-lc-support-name{font-size:14px;font-weight:780} .shz-lc--guest .shz-lc-guest-status{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:9px;color:#e8dce2} .shz-lc--guest .shz-lc-dot{width:7px;height:7px;border-radius:50%;background:var(--gold)} .shz-lc--guest .shz-lc-guest-pill{border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:6px 9px;font-size:7px;letter-spacing:.85px;font-weight:850;color:#eadde5} .shz-lc--guest .shz-lc-main{flex:1;min-height:0;overflow:auto;scrollbar-width:none;padding:20px 14px 22px; background: radial-gradient(circle at 100% 0%,rgba(255,218,237,.72),transparent 34%), radial-gradient(circle at 0% 70%,rgba(255,241,215,.32),transparent 25%), linear-gradient(180deg,#fffafd,#fffdfb)} .shz-lc--guest .shz-lc-main::-webkit-scrollbar{display:none} .shz-lc--guest .shz-lc-secure-line{display:flex;align-items:center;justify-content:center;gap:7px;color:#aaa0a8;font-size:7px;font-weight:850;letter-spacing:1.5px;margin:0 0 16px} .shz-lc--guest .shz-lc-secure-line:before,.shz-lc--guest .shz-lc-secure-line:after{content:"";height:1px;background:#eee6ea;width:52px} .shz-lc--guest .shz-lc-access{background:rgba(255,255,255,.98);border:1px solid var(--line);border-radius:22px;padding:19px 16px 16px} .shz-lc--guest .shz-lc-heading-row{display:flex;gap:11px;align-items:flex-start} .shz-lc--guest .shz-lc-mark{width:47px;height:47px;border-radius:15px;background:linear-gradient(145deg,#fff0f7,#ffe0ef);color:var(--pink);display:grid;place-items:center;font-size:19px;font-weight:900;flex:0 0 47px} .shz-lc--guest .shz-lc-kicker2{font-size:6.8px;letter-spacing:1.35px;text-transform:uppercase;color:#aaa0a8;font-weight:850} .shz-lc--guest .shz-lc-h1{font-size:18px;line-height:1.08;font-weight:830;letter-spacing:-.45px;margin-top:2px} .shz-lc--guest .shz-lc-sub{font-size:8px;color:#877e86;line-height:1.45;margin-top:5px;max-width:285px} .shz-lc--guest .shz-lc-choose{font-size:7px;letter-spacing:1.15px;text-transform:uppercase;color:#a39aa1;font-weight:850;margin:17px 0 7px} .shz-lc--guest .shz-lc-auth{width:100%;height:47px;border:1px solid #efb8d1;border-radius:14px; display:flex;align-items:center;gap:9px;padding:6px 10px;text-align:left;margin-top:10px; position:relative;overflow:hidden; box-shadow: none; transition:transform .12s,box-shadow .12s,background .12s} .shz-lc--guest .shz-lc-auth:before{content:"";position:absolute;left:12px;right:12px;top:1px;height:1px; background:rgba(255,255,255,.95);pointer-events:none} .shz-lc--guest .shz-lc-auth.shz-lc-google-bar{background:linear-gradient(180deg,#fff7fb 0%,#ffedf6 100%)} .shz-lc--guest .shz-lc-auth.shz-lc-email-bar{background:linear-gradient(180deg,#fff9fb 0%,#ffedf3 100%)} .shz-lc--guest .shz-lc-auth:active{transform:translateY(1px);box-shadow:none} .shz-lc--guest .shz-lc-icon{width:31px;height:31px;border-radius:10px;background:#fff; border:1px solid #eadfe5;display:grid;place-items:center;flex:0 0 31px; box-shadow:none} .shz-lc--guest .shz-lc-google-logo{width:18px;height:18px;display:block} .shz-lc--guest .shz-lc-email-logo{width:18px;height:18px;display:block} .shz-lc--guest .shz-lc-copy{flex:1} .shz-lc--guest .shz-lc-name{display:block;font-size:9.6px;font-weight:810;color:#332d33} .shz-lc--guest .shz-lc-desc{display:block;font-size:6.8px;color:#9a9098;margin-top:1px} .shz-lc--guest .shz-lc-arrow{font-size:15px;color:#b1839b;margin-right:1px} .shz-lc--guest .shz-lc-auth-gap{height:2px} .shz-lc--guest .shz-lc-return-note{display:flex;gap:7px;align-items:flex-start;margin:12px 2px 0;padding-top:11px;border-top:1px solid #eee7eb;color:#9b9299;font-size:6.9px;line-height:1.42} .shz-lc--guest .shz-lc-check{width:15px;height:15px;border-radius:5px;background:#fff0f7;color:var(--pink);display:grid;place-items:center;flex:0 0 15px;font-size:8px} .shz-lc--guest .shz-lc-bottom{flex:0 0 auto;border-top:1px solid var(--line);padding:9px 12px max(9px,0px);background:rgba(255,253,251,.985);text-align:center;color:#aaa1a9;font-size:6.9px} .shz-lc--guest .shz-lc-bottom-dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--gold);margin-right:5px} .shz-lc--guest .shz-lc-toast{position:absolute;left:50%;bottom:54px;transform:translate(-50%,10px);background:var(--plum);color:#fff;border-radius:999px;padding:7px 11px;font-size:7.5px;font-weight:750;opacity:0;pointer-events:none;transition:.2s;white-space:nowrap;z-index:20} .shz-lc--guest .shz-lc-toast.is-show{opacity:1;transform:translate(-50%,0)} /* ---- MEMBER (logged-in) — preview stylesheet, scoped ------------------------ */ .shz-lc--member{--plum:#24121f;--plum2:#3b1730;--pink:#ed087d;--pink2:#ff4aa6;--paper:#fffdfb;--ink:#19151a;--muted:#988f97;--line:#e7dfe5;--soft:#fff0f7;--green:#25ae82;--gold:#c6a36a} .shz-lc--member *{box-sizing:border-box} .shz-lc--member button,.shz-lc--member input{font:inherit} .shz-lc--member button{-webkit-tap-highlight-color:transparent;border:0;background:none;cursor:pointer} .shz-lc--member button:focus,.shz-lc--member input:focus{outline:0;box-shadow:none} .shz-lc--member .shz-lc-app{width:min(100vw,430px);height:100svh;min-height:620px;background:var(--paper);display:flex;flex-direction:column;overflow:hidden;position:relative} .shz-lc--member .shz-lc-hero{flex:0 0 auto;color:#fff;padding:11px 15px 12px;position:relative;overflow:hidden;background:radial-gradient(circle at 94% -12%,rgba(255,49,158,.34),transparent 37%),radial-gradient(circle at 72% 115%,rgba(198,163,106,.1),transparent 28%),linear-gradient(145deg,var(--plum),#160d14 78%)} .shz-lc--member .shz-lc-hero-top{height:36px;display:flex;align-items:center;gap:7px;position:relative;z-index:1} .shz-lc--member .shz-lc-back{width:34px;height:34px;color:#fff;font-size:29px;font-weight:300} .shz-lc--member .shz-lc-brand{flex:1} .shz-lc--member .shz-lc-kicker{font-size:7.5px;letter-spacing:2.1px;color:#d9cbd3;font-weight:850} .shz-lc--member .shz-lc-title{font-size:21px;line-height:1;font-weight:790;letter-spacing:-.7px;margin-top:2px} .shz-lc--member .shz-lc-more{width:34px;height:34px;color:#d9cbd3;font-size:18px} .shz-lc--member .shz-lc-support-row{display:flex;align-items:center;margin-top:10px;position:relative;z-index:1} .shz-lc--member .shz-lc-avatar{width:40px;height:40px;border-radius:13px;background:#fff;color:var(--pink);display:grid;place-items:center;font-size:17px;font-weight:850} .shz-lc--member .shz-lc-support-text{flex:1;margin-left:10px} .shz-lc--member .shz-lc-support-name{font-size:13.5px;font-weight:760} .shz-lc--member .shz-lc-status{display:flex;align-items:center;gap:5px;font-size:9.5px;color:#d5efe6;margin-top:2px} .shz-lc--member .shz-lc-dot{width:6px;height:6px;border-radius:50%;background:#30c692} .shz-lc--member .shz-lc-online{border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:5px 8px;font-size:7.5px;letter-spacing:.75px;font-weight:850;color:#eadde5} .shz-lc--member .shz-lc-topic-rail{flex:0 0 auto;background:#fff;border-bottom:1px solid var(--line);padding:7px 13px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none} .shz-lc--member .shz-lc-topic-rail::-webkit-scrollbar{display:none} .shz-lc--member .shz-lc-topic{height:30px;padding:0 11px;border:1px solid #e2dbe1;border-radius:10px;background:#fff;color:#706970;font-size:9.5px;font-weight:750;white-space:nowrap} .shz-lc--member .shz-lc-topic.is-active{color:#fff;background:linear-gradient(135deg,var(--pink),#d80470);border-color:var(--pink);box-shadow:none} .shz-lc--member .shz-lc-chat{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:10px 14px 10px;background:radial-gradient(circle at 100% 0%,rgba(255,222,239,.78),transparent 30%),radial-gradient(circle at 0% 100%,rgba(198,163,106,.05),transparent 28%),linear-gradient(180deg,#fffaf7,#fffdfb)} .shz-lc--member .shz-lc-chat::-webkit-scrollbar{display:none} .shz-lc--member .shz-lc-day{display:flex;align-items:center;justify-content:center;gap:7px;color:#a59ca4;font-size:7.5px;font-weight:850;letter-spacing:1.55px;margin:1px 0 8px} .shz-lc--member .shz-lc-day:before,.shz-lc--member .shz-lc-day:after{content:"";height:1px;background:#eee6ea;width:35px} .shz-lc--member .shz-lc-context{display:flex;align-items:center;gap:8px;padding:8px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:13px;margin-bottom:9px} .shz-lc--member .shz-lc-context-icon{width:29px;height:29px;border-radius:9px;background:linear-gradient(145deg,#fff0f7,#ffe8f3);color:var(--pink);display:grid;place-items:center;font-size:12px;font-weight:850} .shz-lc--member .shz-lc-context-copy{flex:1;min-width:0} .shz-lc--member .shz-lc-context-kicker{font-size:6.5px;letter-spacing:1px;text-transform:uppercase;color:#aaa0a8;font-weight:850} .shz-lc--member .shz-lc-context-title{font-size:9.7px;font-weight:760;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .shz-lc--member .shz-lc-context-status{font-size:7px;color:var(--green);font-weight:700;margin-top:1px} .shz-lc--member .shz-lc-view{font-size:7.5px;color:var(--pink);font-weight:850} .shz-lc--member .shz-lc-row{display:flex;flex-direction:column;margin-bottom:9px} .shz-lc--member .shz-lc-me{align-items:flex-end} .shz-lc--member .shz-lc-support{align-items:flex-start} .shz-lc--member .shz-lc-bubble{max-width:79%;font-size:12px;line-height:1.4;padding:9px 11px} .shz-lc--member .shz-lc-me .shz-lc-bubble{color:#fff;background:linear-gradient(145deg,var(--pink2),#d90570);border-radius:14px 14px 4px 14px;box-shadow:none} .shz-lc--member .shz-lc-support .shz-lc-bubble{background:#fff;border:1px solid #e3dde1;border-radius:14px 14px 14px 4px} .shz-lc--member .shz-lc-meta{font-size:7.5px;color:#aaa1a9;margin-top:3px} .shz-lc--member .shz-lc-me .shz-lc-meta{display:flex;gap:6px} .shz-lc--member .shz-lc-reply{color:var(--pink);font-weight:800} .shz-lc--member .shz-lc-support-head{display:flex;align-items:center;gap:5px;margin-bottom:3px;font-size:7px;color:#a49ba3;font-weight:700} .shz-lc--member .shz-lc-mini-avatar{width:15px;height:15px;border-radius:5px;background:var(--plum);color:#fff;display:grid;place-items:center;font-size:7px;font-weight:850} .shz-lc--member .shz-lc-next{margin:2px 0 9px;padding-top:7px;border-top:1px solid rgba(231,223,229,.7)} .shz-lc--member .shz-lc-next-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px} .shz-lc--member .shz-lc-next-title{font-size:6.8px;letter-spacing:1.25px;text-transform:uppercase;color:#a49aa2;font-weight:850} .shz-lc--member .shz-lc-next-hint{font-size:7px;color:#aaa1a9} .shz-lc--member .shz-lc-suggestions{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none} .shz-lc--member .shz-lc-suggestions::-webkit-scrollbar{display:none} .shz-lc--member .shz-lc-suggestion{flex:0 0 auto;max-width:190px;padding:7px 9px;border:1px solid #efbdd7;background:#fff8fb;border-radius:10px;color:#c50769;font-size:8.1px;font-weight:750;text-align:left} .shz-lc--member .shz-lc-suggestion:active{transform:scale(.98);background:#fff0f7} .shz-lc--member .shz-lc-next-hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .shz-lc--member .shz-lc-session{display:flex;align-items:center;justify-content:center;gap:5px;margin:3px 0 2px;color:#aaa1a9;font-size:7px} .shz-lc--member .shz-lc-session i{width:4px;height:4px;border-radius:50%;background:var(--gold)} .shz-lc--member .shz-lc-file{display:none} .shz-lc--member .shz-lc-media-preview{position:absolute;left:11px;bottom:69px;width:215px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:14px;display:none;align-items:center;gap:7px;box-shadow:none;z-index:30} .shz-lc--member .shz-lc-media-preview.is-show{display:flex} .shz-lc--member .shz-lc-thumb{width:39px;height:39px;border-radius:9px;background:#f7edf2;overflow:hidden;display:grid;place-items:center;color:var(--pink)} .shz-lc--member .shz-lc-thumb img{width:100%;height:100%;object-fit:cover} .shz-lc--member .shz-lc-file-info{flex:1;min-width:0} .shz-lc--member .shz-lc-file-info strong{display:block;font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .shz-lc--member .shz-lc-file-info span{display:block;font-size:7px;color:#aaa1a9;margin-top:2px} .shz-lc--member .shz-lc-remove{width:25px;height:25px;border-radius:8px;background:#f7f1f4;color:#777078;font-size:15px;display:grid;place-items:center} .shz-lc--member .shz-lc-toast{position:absolute;left:50%;bottom:69px;transform:translate(-50%,7px);opacity:0;background:#19151a;color:#fff;border-radius:11px;padding:8px 11px;font-size:9.5px;transition:.18s;pointer-events:none;white-space:nowrap;z-index:60} .shz-lc--member .shz-lc-toast.is-show{opacity:1;transform:translate(-50%,0)} @media(max-width:350px){.shz-lc--member .shz-lc-online{display:none} .shz-lc--member .shz-lc-topic{padding:0 8px} .shz-lc--member .shz-lc-bubble{max-width:84%} .shz-lc--member .shz-lc-smart{min-height:50px}} /* ---- MEMBER: real-conversation states (ZIP-493) ------------------------------ Additions ONLY for what a real backend needs to show: presence, loading, error, empty, pending / failed, system event, attachments, "load earlier". They reuse the preview's colours, radii and type scale. */ .shz-lc--member .shz-lc-day[hidden]{display:none} .shz-lc--member .shz-lc-status.is-away{color:#e6d9df} .shz-lc--member .shz-lc-status.is-away .shz-lc-dot{background:transparent;box-shadow:inset 0 0 0 1.5px #bba9b4} .shz-lc--member .shz-lc-online.is-away{color:#c8bac2;border-color:rgba(255,255,255,.13)} .shz-lc--member .shz-lc-state{margin:12px 0;text-align:center;font-size:9.5px;color:var(--muted)} .shz-lc--member .shz-lc-state[hidden],.shz-lc--member .shz-lc-empty[hidden],.shz-lc--member .shz-lc-older[hidden]{display:none} .shz-lc--member .shz-lc-state button{margin-left:7px;color:var(--pink);font-weight:850;font-size:9.5px;text-decoration:underline} .shz-lc--member .shz-lc-empty{margin:16px 12px 14px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center} .shz-lc--member .shz-lc-empty b{font-size:13px;line-height:1.3;color:var(--ink);font-weight:800} .shz-lc--member .shz-lc-empty span{font-size:10.5px;line-height:1.4;color:#8d838b} .shz-lc--member .shz-lc-older{display:block;margin:0 auto 10px;padding:5px 11px;border:1px solid #efbdd7;border-radius:999px;background:#fff8fb;color:var(--pink);font-size:8.5px;font-weight:800} .shz-lc--member .shz-lc-bubble{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word} .shz-lc--member .shz-lc-row.is-pending .shz-lc-bubble{opacity:.68} .shz-lc--member .shz-lc-row.is-failed .shz-lc-bubble{color:#c50769;background:#fff;border:1px solid #efbdd7;box-shadow:none} .shz-lc--member .shz-lc-retry{padding:0;color:var(--pink);font-size:7.5px;font-weight:850;text-decoration:underline} .shz-lc--member .shz-lc-failed-note{color:#c50769;font-weight:800} .shz-lc--member .shz-lc-system-row{align-items:center} .shz-lc--member .shz-lc-system{max-width:84%;padding:5px 11px;border:1px dashed #e5d9e0;border-radius:999px;background:rgba(255,255,255,.72);color:#8d838b;font-size:8.5px;line-height:1.35;text-align:center} .shz-lc--member .shz-lc-attach{display:block;max-width:100%;max-height:230px;margin:0 0 6px;border-radius:9px;background:#f7edf2} .shz-lc--member .shz-lc-bubble .shz-lc-attach:last-child{margin-bottom:0} .shz-lc--member .shz-lc-day-new{color:var(--pink)} /* ---- MEMBER: message ticks (ZIP-496) ------------------------------------------- sending = single grey tick, delivered = double grey, read by SHAHAZ Support = double green. Same size as the tick that was already there; only the colour and count change. */ .shz-lc--member .shz-lc-tick{display:inline-block;color:#aaa1a9;font-weight:700;letter-spacing:-1.5px;line-height:1} .shz-lc--member .shz-lc-tick.is-sending{opacity:.75} .shz-lc--member .shz-lc-tick.is-read{color:var(--green)} /* ---- OVERRIDES (must follow the state blocks: equal specificity, later wins) ---- */ /* Safe areas (notch / home indicator). Zero on ordinary browsers. */ .shz-lc .shz-lc-hero{padding-top:calc(11px + env(safe-area-inset-top,0px))} /* Toasts: keep the preview's single-line pill for short messages, but let a long message wrap inside the card instead of overflowing it. */ .shz-lc .shz-lc-toast{width:max-content;max-width:calc(100% - 28px);white-space:normal;text-align:center} /* iOS Safari zooms the whole page when an input under 16px is focused. Only on iOS, the field uses 16px so the keyboard never zooms the page. */ /* ---- GUEST: premium auth-button interaction layer ------------------------ The preview ships this layer for the two authentication controls. Resting look = the preview's rendered bars (untouched); hover = lift + shimmer + icon motion; press = tactile scale; keyboard = pink ring. */ .shz-lc--guest .shz-lc-auth{ color:inherit;text-decoration:none;isolation:isolate; transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s cubic-bezier(.2,.8,.2,1),border-color .22s ease,background .22s ease; } .shz-lc--guest .shz-lc-auth>*{position:relative;z-index:1} .shz-lc--guest .shz-lc-auth::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(112deg,transparent 0%,rgba(255,255,255,.02) 28%,rgba(255,255,255,.32) 50%,rgba(255,255,255,.02) 72%,transparent 100%); transform:translateX(-120%);transition:transform .58s cubic-bezier(.22,.61,.36,1); } .shz-lc--guest .shz-lc-auth .shz-lc-google-logo, .shz-lc--guest .shz-lc-auth .shz-lc-email-logo{transition:transform .25s cubic-bezier(.2,.8,.2,1)} @media (hover:hover){ .shz-lc--guest .shz-lc-auth:hover{ transform:translateY(-2px);border-color:rgba(255,58,145,.46); box-shadow:none; } .shz-lc--guest .shz-lc-auth:hover::after{transform:translateX(120%)} .shz-lc--guest .shz-lc-google-bar:hover{background:linear-gradient(180deg,#fff,#fff8fc)} .shz-lc--guest .shz-lc-google-bar:hover .shz-lc-google-logo{transform:scale(1.07)} .shz-lc--guest .shz-lc-email-bar:hover{box-shadow:none} .shz-lc--guest .shz-lc-email-bar:hover .shz-lc-email-logo{transform:translateX(2px) scale(1.05)} } .shz-lc--guest .shz-lc-auth:active{transform:translateY(0) scale(.985);transition-duration:.08s} .shz-lc.shz-lc--guest .shz-lc-auth:focus-visible{ outline:none; box-shadow:none; } @media (prefers-reduced-motion:reduce){ .shz-lc *,.shz-lc *::before,.shz-lc *::after{transition-duration:.01ms!important;animation-duration:.01ms!important} } /* ========================================================================== ZIP-497 HEADER REFINEMENT — scoped Live Chat header only -------------------------------------------------------------------------- Uses the existing site logo asset; does not modify the global/home header. The More menu remains functional and is intentionally retained. ========================================================================== */ .shz-lc .shz-lc-hero-top{ display:flex;align-items:center;gap:0;height:34px;position:relative;z-index:3; } .shz-lc .shz-lc-top-spacer{flex:1;min-width:0} .shz-lc .shz-lc-back, .shz-lc .shz-lc-more{ flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center; } .shz-lc .shz-lc-more{line-height:1;font-size:18px;letter-spacing:2px;padding-bottom:6px} .shz-lc .shz-lc-top-title{ position:relative;z-index:2;margin:5px 0 0;font-size:21px;line-height:1.05; font-weight:790;letter-spacing:-.7px;color:#fff; } .shz-lc .shz-lc-support-row{ display:flex;align-items:center;gap:10px;margin-top:10px;position:relative;z-index:2; } .shz-lc .shz-lc-brand-lockup{flex:1;min-width:0} .shz-lc .shz-lc-site-logo{ display:block;width:min(205px,100%);height:auto;max-height:47px;object-fit:contain;object-position:left center; filter:none; } .shz-lc .shz-lc-support-center{ margin-top:2px;color:#fff;font-size:13px;line-height:1.05;font-weight:760;letter-spacing:.05px; } .shz-lc .shz-lc-status{font-size:9px;margin-top:4px} /* The live indicator reuses the approved preview's five expanding rings and bulb. It sits in the support row, not in the top control row with the three dots. */ .shz-lc .shz-lc-live-indicator{ position:relative;flex:0 0 88px;width:88px;height:88px;display:grid;place-items:center; color:#00ff78;isolation:isolate; } .shz-lc .shz-lc-live-rings{position:absolute;inset:0;z-index:0} .shz-lc .shz-lc-live-rings i{ position:absolute;left:50%;top:42%;width:76px;height:76px;border-radius:50%; border:1.6px solid currentColor;opacity:0;transform:translate(-50%,-50%) scale(.18); box-shadow:none; animation:shzLiveWave 3s cubic-bezier(.15,.65,.2,1) infinite; } .shz-lc .shz-lc-live-rings i:nth-child(1){animation-delay:0s} .shz-lc .shz-lc-live-rings i:nth-child(2){width:66px;height:66px;animation-delay:.22s} .shz-lc .shz-lc-live-rings i:nth-child(3){width:56px;height:56px;animation-delay:.44s} .shz-lc .shz-lc-live-rings i:nth-child(4){width:46px;height:46px;animation-delay:.66s} .shz-lc .shz-lc-live-rings i:nth-child(5){width:36px;height:36px;animation-delay:.88s} @keyframes shzLiveWave{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.18)} 9%{opacity:.92} 48%{opacity:.66} 78%{opacity:.14} 100%{opacity:0;transform:translate(-50%,-50%) scale(1)} } .shz-lc .shz-lc-live-core{ position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:2; width:39px;height:39px;border-radius:50%;display:grid;place-items:center; color:#fff;background:radial-gradient(circle at 42% 34%,#fff 0 8%,#baffd8 17%,#42ff91 33%,#00c957 58%,#06351f 100%); box-shadow:none; animation:shzLiveCoreGlow 1.9s ease-in-out infinite; } .shz-lc .shz-lc-live-core svg{width:23px;height:27px;filter:none} @keyframes shzLiveCoreGlow{ 50%{box-shadow:none} } .shz-lc .shz-lc-live-label{ position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:3; color:#00ff78;font-size:10px;line-height:1;font-weight:900;letter-spacing:1.15px; white-space:nowrap;text-shadow:none; } .shz-lc .shz-lc-live-indicator.is-away{color:#9a7f8e} .shz-lc .shz-lc-live-indicator.is-away .shz-lc-live-rings i{animation:none;opacity:0} .shz-lc .shz-lc-live-indicator.is-away .shz-lc-live-core{ color:#d6c5ce;background:radial-gradient(circle at 42% 34%,#fff 0 8%,#e2d7dd 22%,#9a8993 58%,#4a3942 100%); box-shadow:none;animation:none; } .shz-lc .shz-lc-live-indicator.is-away .shz-lc-live-label{color:#c9b8c1;text-shadow:none} /* Guest state uses the same real site branding but has no fake LIVE presence. */ .shz-lc--guest .shz-lc-support-row{align-items:flex-start} .shz-lc--guest .shz-lc-site-logo{width:min(205px,100%);max-height:47px} .shz-lc--guest .shz-lc-support-center{margin-top:2px} .shz-lc--guest .shz-lc-guest-status{margin-top:4px} @media (max-width:370px){ .shz-lc .shz-lc-site-logo{width:175px;max-height:40px} .shz-lc .shz-lc-live-indicator{flex-basis:78px;width:78px;height:80px} .shz-lc .shz-lc-live-rings i{width:68px;height:68px} .shz-lc .shz-lc-live-rings i:nth-child(2){width:59px;height:59px} .shz-lc .shz-lc-live-rings i:nth-child(3){width:50px;height:50px} .shz-lc .shz-lc-live-rings i:nth-child(4){width:41px;height:41px} .shz-lc .shz-lc-live-rings i:nth-child(5){width:33px;height:33px} .shz-lc .shz-lc-live-core{width:35px;height:35px} .shz-lc .shz-lc-live-label{font-size:9px} } /* -------------------------------------------------------------------------- ZIP-497 LIVE CHAT — premium conversation refinement Scoped to the customer member chat only. Backend, routing and other pages are intentionally untouched. -------------------------------------------------------------------------- */ .shz-lc--member .shz-lc-chat{ background: radial-gradient(circle at 100% 0%,rgba(255,214,236,.62),transparent 31%), radial-gradient(circle at 0% 100%,rgba(255,232,244,.52),transparent 30%), linear-gradient(180deg,#fffafd 0%,#fffdfb 100%); } .shz-lc--member .shz-lc-row{margin-bottom:14px} .shz-lc--member .shz-lc-message-line{ width:100%;display:flex;align-items:flex-end;gap:8px; } .shz-lc--member .shz-lc-me .shz-lc-message-line{justify-content:flex-end} .shz-lc--member .shz-lc-support .shz-lc-message-line{justify-content:flex-start;align-items:flex-end} .shz-lc--member .shz-lc-support-body{ display:flex;flex-direction:column;align-items:flex-start;max-width:78%;min-width:0; } .shz-lc--member .shz-lc-message-avatar{ position:relative;flex:0 0 46px;width:46px;height:46px;border-radius:50%; padding:3px;display:grid;place-items:center;overflow:visible; background:linear-gradient(135deg,#ff0b88 0%,#ff6fba 45%,#c90068 100%); box-shadow:none; } .shz-lc--member .shz-lc-message-avatar:before{ content:"";position:absolute;inset:0;border-radius:50%; border:1px solid rgba(255,255,255,.92);pointer-events:none;z-index:2; } .shz-lc--member .shz-lc-message-avatar img{ width:100%;height:100%;display:block;border-radius:50%; object-fit:cover;object-position:center center;background:#fff; border:2px solid #fff;position:relative;z-index:1; } .shz-lc--member .shz-lc-avatar-fallback{ width:100%;height:100%;border-radius:50%;display:grid;place-items:center; background:linear-gradient(145deg,#fff,#f8eaf2);color:var(--pink); font-size:16px;font-weight:900;position:relative;z-index:1; } .shz-lc--member .shz-lc-avatar-online, .shz-lc--member .shz-lc-support-online{ display:block;width:10px;height:10px;border-radius:50%; background:#24d58c;border:2px solid #fff;box-shadow:none; } .shz-lc--member .shz-lc-avatar-online{ position:absolute;right:-1px;bottom:2px;z-index:4; } .shz-lc--member .shz-lc-support-head{ width:100%;display:flex;align-items:center;gap:6px;margin:0 0 5px; font-size:10px;color:#9d939b;font-weight:700;line-height:1; } .shz-lc--member .shz-lc-support-name{ color:#ed087d;font-size:13px;font-weight:900;letter-spacing:-.15px; } .shz-lc--member .shz-lc-support-online{ width:7px;height:7px;border:0;flex:0 0 7px; } .shz-lc--member .shz-lc-support-head .shz-lc-time{ margin-left:auto;color:#aaa1a9;font-size:8px;font-weight:600; } .shz-lc--member .shz-lc-bubble{ max-width:none;font-size:13px;line-height:1.58;padding:11px 14px; letter-spacing:-.05px; } .shz-lc--member .shz-lc-me .shz-lc-bubble{ color:#3a3037; background:linear-gradient(145deg,#ffd0e7 0%,#ffb9dc 48%,#ffabd5 100%); border:1px solid rgba(245,112,173,.28); border-radius:22px 22px 6px 22px; box-shadow:none; } .shz-lc--member .shz-lc-support .shz-lc-bubble{ color:#29242a;background:#fff;border:1px solid #eadfe6; border-radius:7px 22px 22px 22px; box-shadow:none; } .shz-lc--member .shz-lc-meta{ font-size:8px;color:#aaa1a9;margin-top:5px;line-height:1; } .shz-lc--member .shz-lc-me .shz-lc-meta{ display:flex;align-items:center;gap:7px;padding-right:54px; } .shz-lc--member .shz-lc-reply{color:#ed087d;font-weight:850} .shz-lc--member .shz-lc-tick{font-weight:900;letter-spacing:-2px} .shz-lc--member .shz-lc-tick.is-read{color:#1bbf89} .shz-lc--member .shz-lc-attachment{ border-radius:15px;overflow:hidden;margin:-2px -4px 7px; } @media(max-width:390px){ .shz-lc--member .shz-lc-message-avatar{flex-basis:41px;width:41px;height:41px} .shz-lc--member .shz-lc-support-body{max-width:80%} .shz-lc--member .shz-lc-bubble{font-size:12.5px;padding:10px 12px} } /* ========================================================================== ZIP-556 POLICY MENU 01 — Customer Live Chat More Menu -------------------------------------------------------------------------- Customer-only shortcut menu opened by the existing top-right three-dot control. It is shared by guest and signed-in customer chat states. No seller/support-admin destination is exposed here. ========================================================================== */ .shz-lc .shz-lc-more-menu{ position:absolute; top:55px; right:11px; z-index:90; width:min(304px,calc(100% - 22px)); padding:8px; border:1px solid rgba(255,255,255,.82); border-radius:18px; background:linear-gradient(180deg,rgba(255,255,255,.985),rgba(255,249,252,.98)); box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; transform-origin:top right; animation:shzLcMoreIn .16s cubic-bezier(.2,.8,.2,1); } .shz-lc .shz-lc-more-menu[hidden]{display:none!important} @keyframes shzLcMoreIn{ from{opacity:0;transform:translateY(-5px) scale(.985)} to{opacity:1;transform:translateY(0) scale(1)} } .shz-lc .shz-lc-more-menu-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:3px 5px 7px; } .shz-lc .shz-lc-more-menu-head span{ color:#a59aa2; font-size:7px; font-weight:850; letter-spacing:1.1px; text-transform:uppercase; } .shz-lc .shz-lc-more-menu-head strong{ color:#3a3037; font-size:8px; font-weight:820; } .shz-lc .shz-lc-more-menu-list{ display:flex; flex-direction:column; gap:6px; } .shz-lc .shz-lc-more-item{ min-height:47px; width:100%; display:flex; align-items:center; gap:9px; padding:6px 9px 6px 7px; border:1px solid #eadfe5; border-radius:14px; text-decoration:none; position:relative; overflow:hidden; box-shadow:none; transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease; -webkit-tap-highlight-color:transparent; } .shz-lc .shz-lc-more-item:before{ content:""; position:absolute; left:12px; right:12px; top:1px; height:1px; background:rgba(255,255,255,.98); pointer-events:none; } .shz-lc .shz-lc-more-item:active{ transform:translateY(1px) scale(.992); box-shadow:none; } .shz-lc .shz-lc-more-item:focus-visible{ outline:2px solid rgba(237,8,125,.45); outline-offset:2px; } .shz-lc .shz-lc-more-policy{background:linear-gradient(180deg,#fff7fb,#ffedf6);border-color:#efb5d0} .shz-lc .shz-lc-more-whatsapp{background:linear-gradient(180deg,#f5fff9,#eafff2);border-color:#a9e7c2} .shz-lc .shz-lc-more-email{background:linear-gradient(180deg,#fff9fa,#fff0f3);border-color:#f0bdc8} .shz-lc .shz-lc-more-contact{background:linear-gradient(180deg,#fffdf7,#fff8e9);border-color:#ead9b4} .shz-lc .shz-lc-more-icon{ width:32px; height:32px; flex:0 0 32px; display:grid; place-items:center; border-radius:10px; background:#fff; box-shadow:none; } .shz-lc .shz-lc-more-icon svg{ width:21px; height:21px; display:block; filter:none; } .shz-lc .shz-lc-more-copy{ min-width:0; flex:1; display:flex; flex-direction:column; justify-content:center; } .shz-lc .shz-lc-more-copy strong{ display:block; color:#2f2930; font-size:9px; line-height:1.15; font-weight:820; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .shz-lc .shz-lc-more-copy small{ display:block; margin-top:2px; color:#958a93; font-size:6.9px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .shz-lc .shz-lc-more-arrow{ flex:0 0 auto; color:#9d7d8d; font-size:17px; line-height:1; margin-left:1px; } .shz-lc .shz-lc-more-whatsapp .shz-lc-more-arrow{color:#239a5b} .shz-lc .shz-lc-more-email .shz-lc-more-arrow{color:#d74c69} .shz-lc .shz-lc-more-contact .shz-lc-more-arrow{color:#a77b31} @media (min-width:700px){ .shz-lc .shz-lc-more-menu{ width:320px; top:58px; right:14px; } } @media (max-width:370px){ .shz-lc .shz-lc-more-menu{ top:53px; right:8px; width:calc(100% - 16px); } .shz-lc .shz-lc-more-item{min-height:45px;padding-right:8px} .shz-lc .shz-lc-more-copy strong{font-size:8.6px} .shz-lc .shz-lc-more-copy small{font-size:6.6px} } /* ========================================================================== ZIP-567 LIVE CHAT MOBILE FINISH — compact hero + inline topic questions Front-end only. Existing auth, routing, chat data and backend are untouched. ========================================================================== */ .shz-lc .shz-lc-hero{padding-top:calc(7px + env(safe-area-inset-top,0px));padding-bottom:7px;} .shz-lc .shz-lc-hero-top{height:34px;display:flex;align-items:center;gap:0;} .shz-lc .shz-lc-back,.shz-lc .shz-lc-more{flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;} .shz-lc .shz-lc-back{font-size:29px;line-height:1;transform:translateY(4px);} .shz-lc .shz-lc-top-title{flex:0 0 auto;margin:0;font-size:21px;line-height:1;font-weight:790;letter-spacing:-.7px;transform:translateY(4px);} .shz-lc .shz-lc-top-spacer{flex:1;min-width:0;} .shz-lc .shz-lc-more{font-size:18px;line-height:1;letter-spacing:2px;padding-bottom:6px;transform:translateY(4px);} .shz-lc .shz-lc-support-row{margin-top:10px;} .shz-lc--member .shz-lc-top-title,.shz-lc--member .shz-lc-support-center,.shz-lc--member .shz-lc-status{margin-left:0;} .shz-lc--member .shz-lc-status .shz-lc-dot{position:static;transform:none;} /* Inline topic disclosure: opens directly below the five topic buttons. */ .shz-lc--member .shz-lc-desk{position:relative;left:auto;right:auto;bottom:auto;width:auto;margin:0 10px;padding:7px 9px 9px;background:linear-gradient(180deg,#fffafd 0%,#fff 100%);border:1px solid #eadfe6;border-radius:15px;transform:none;opacity:0;visibility:hidden;max-height:0;overflow:hidden;pointer-events:none;box-shadow:none;transition:max-height .24s cubic-bezier(.18,.82,.22,1),opacity .18s ease,visibility 0s linear .24s,margin .24s ease,padding .24s ease;z-index:2;} .shz-lc--member .shz-lc-desk.is-open{max-height:900px;opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:max-height .24s cubic-bezier(.18,.82,.22,1),opacity .18s ease,visibility 0s linear 0s,margin .24s ease,padding .24s ease;} .shz-lc--member .shz-lc-desk-header{display:block;margin:0 2px 5px;} .shz-lc--member .shz-lc-desk-eyebrow{display:none;} .shz-lc--member .shz-lc-desk-title{font-size:10px;line-height:1.2;font-weight:850;color:#6f6670;} .shz-lc--member .shz-lc-grid{display:flex;flex-direction:column;gap:4px;} .shz-lc--member .shz-lc-smart{width:100%;min-height:0;padding:8px 9px;display:block;text-align:left;border:1px solid #eadfe6;border-radius:10px;background:#fff;color:#3f3940;box-shadow:none;} .shz-lc--member .shz-lc-smart b{display:block;font-size:9px;line-height:1.3;font-weight:780;color:#3f3940;white-space:normal;} .shz-lc--member .shz-lc-smart span{display:none;} .shz-lc--member .shz-lc-smart:active{transform:scale(.992);border-color:#f0a7c9;background:#fff7fb;} .shz-lc--member .shz-lc-backdrop{display:none!important;} .shz-lc--member .shz-lc-desk .shz-lc-close,.shz-lc--member .shz-lc-desk .shz-lc-desk-footer{display:none!important;} @media(max-width:370px){.shz-lc .shz-lc-top-title{font-size:20px}.shz-lc--member .shz-lc-desk{margin-left:8px;margin-right:8px;}} /* ZIP-567 parity: the logged-in presence light is overlaid so it does not * increase the hero's height; guest and member banners therefore share the * same compact geometry while the live indicator remains fully functional. */ .shz-lc--member .shz-lc-support-row{position:relative;min-height:70px;padding-right:82px;} .shz-lc--member .shz-lc-live-rings i{width:64px;height:64px;} .shz-lc--member .shz-lc-live-rings i:nth-child(2){width:56px;height:56px;} .shz-lc--member .shz-lc-live-rings i:nth-child(3){width:48px;height:48px;} .shz-lc--member .shz-lc-live-rings i:nth-child(4){width:40px;height:40px;} .shz-lc--member .shz-lc-live-rings i:nth-child(5){width:32px;height:32px;} .shz-lc--member .shz-lc-live-core{width:34px;height:34px;} .shz-lc--member .shz-lc-live-core svg{width:20px;height:24px;} .shz-lc--member .shz-lc-live-label{font-size:8px;bottom:1px;} @media(max-width:370px){ .shz-lc--member .shz-lc-support-row{padding-right:72px;} .shz-lc--member .shz-lc-live-rings i{width:57px;height:57px;} .shz-lc--member .shz-lc-live-rings i:nth-child(2){width:50px;height:50px;} .shz-lc--member .shz-lc-live-rings i:nth-child(3){width:43px;height:43px;} .shz-lc--member .shz-lc-live-rings i:nth-child(4){width:36px;height:36px;} .shz-lc--member .shz-lc-live-rings i:nth-child(5){width:29px;height:29px;} .shz-lc--member .shz-lc-live-core{width:31px;height:31px;} } /* ========================================================================== ZIP-569 LIVE CHAT MICRO-ALIGNMENT FINISH -------------------------------------------------------------------------- Only the requested mobile front-end geometry is refined. Existing logo asset, colors, typography, auth/chat logic and topic data remain intact. ========================================================================== */ @media (max-width:430px){ /* Remove exactly 20px from the existing top breathing room on BOTH states. The safe-area inset is retained where available, but never allowed to create the old oversized blank band. */ .shz-lc .shz-lc-hero{ padding-top:max(0px,calc(7px + env(safe-area-inset-top,0px) - 20px)); } /* Final mobile alignment: move the existing presence indicator 15px left from the ZIP-572 position, while keeping its center on the same vertical axis as the three-dot control above it. The rings, bulb and ONLINE/AWAY state are unchanged. */ } /* ZIP-573 MICRO FINISH — remove the native input's inner rectangular paint without changing the outer rounded composer bar. */ /* ZIP-121 Live Chat body refinements: keep the existing SHAHAZ hero intact. */ .shz-lc--member .shz-lc-question-rail{flex:0 0 auto;display:flex;align-items:center;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;white-space:nowrap;padding:9px 12px;background:linear-gradient(180deg,#fff8fc,#ffedf5);border-top:1px solid rgba(237,8,125,.10);border-bottom:1px solid rgba(237,8,125,.10)} .shz-lc--member .shz-lc-question-rail::-webkit-scrollbar{display:none} .shz-lc--member .shz-lc-question{flex:0 0 auto;min-height:34px;padding:0 13px;border:1px solid rgba(237,8,125,.16);border-radius:999px;background:#fff;color:var(--plum);font-size:11px;font-weight:700;white-space:nowrap;box-shadow:none} .shz-lc--member .shz-lc-question.is-active{color:#fff;background:linear-gradient(135deg,var(--pink),#d80470);border-color:var(--pink);box-shadow:none} /* ZIP-122: reference-led clean chat body; hero remains untouched. */ .shz-lc--member .shz-lc-chat{background:linear-gradient(180deg,#fffafd 0%,#fff5fa 100%);padding:14px 14px 12px} .shz-lc--member .shz-lc-question-rail{padding:10px 12px;background:linear-gradient(180deg,#fff3f9,#ffeaf4);border-top:1px solid #f6c9df;border-bottom:1px solid #f6c9df} .shz-lc--member .shz-lc-question{height:42px;min-height:42px;padding:0 16px;border:1px solid #f2c2d9;border-radius:999px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,242,249,.88));color:#72133f;font-size:12px;font-weight:750;box-shadow:none} .shz-lc--member .shz-lc-question.is-active{background:linear-gradient(145deg,#ff2992,#cf005f);border-color:#f10a77;color:#fff;box-shadow:none} /* ZIP-125 assistant identity and legibility refinements */ .shz-lc--member .shz-lc-support .shz-lc-bubble{overflow-wrap:anywhere;white-space:pre-wrap;line-height:1.55} /* ZIP-126: subtle typing caret while SHAHAZ AI progressively reveals a reply */ .shz-lc--member .shz-lc-bubble .shz-lc-typing:after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.12em;background:#c21870;animation:shz-lc-type-caret .8s steps(1,end) infinite} @keyframes shz-lc-type-caret{50%{opacity:0}} @media(prefers-reduced-motion:reduce){.shz-lc--member .shz-lc-bubble .shz-lc-typing:after{animation:none;opacity:0}} /* ZIP-127: requested compact Live Chat header and 35px composer. Emoji control and picker were removed from source, not hidden. */ .shz-lc .shz-lc-hero{ padding-top:0!important; padding-bottom:6px!important; } .shz-lc .shz-lc-support-row{margin-top:5px!important} .shz-lc .shz-lc-live-indicator{height:68px!important;width:68px!important;flex-basis:68px!important} /* White light sweep removed site-wide (owner request). */ .shz-lc--guest .shz-lc-auth::after{content:none !important;display:none !important;animation:none !important;} /* ===================================================================== * Live Chat (member) — final layout: header bulb inside its ring, * slim customer bubbles, AI assistant (greeting, typing, order / product * cards), fixed "লাইভ চ্যাট" chip, composer: gallery · voice · input · * stylish send (fly-up on send). One block; replaces the old layers. * ===================================================================== */ /* Header bulb: a little in from the edge, centred in its decorative ring */ .shz-lc--member .shz-lc-live-indicator{position:absolute;right:10px;top:-2px;width:68px;height:68px;flex-basis:68px;transform:none;} .shz-lc--member .shz-lc-live-indicator::before{content:"";position:absolute;left:50%;top:42%;z-index:-1;width:150px;height:150px;border:1px solid rgba(255,255,255,.08);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;} /* Customer bubble: same colours, slimmer */ .shz-lc--member .shz-lc-me .shz-lc-bubble{padding:7px 14px !important;line-height:1.4 !important;border-radius:18px 18px 6px 18px !important;} /* Composer: 3px off the screen edge, gallery · voice · input · send */ .shz-lc--member .shz-lc-composer{flex:0 0 auto;position:relative;margin:0 0 3px;padding:7px 10px max(5px,0px);background:linear-gradient(180deg,#fffdfd,#fff7fb);border-top:1px solid #f4dce8;} .shz-lc--member .shz-lc-compose-row{display:flex;align-items:center;gap:7px;margin:0;} .shz-lc--member .shz-lc-compose-action{flex:0 0 38px;width:38px;height:38px;min-width:0;min-height:0;margin:0;padding:0;display:grid;place-items:center;border:1px solid #e9d5e0;border-radius:50%;background:linear-gradient(145deg,#fff,#fff5fa);color:#8a1c4f;box-shadow:none;cursor:pointer;-webkit-tap-highlight-color:transparent;} .shz-lc--member .shz-lc-compose-action svg{width:19px;height:19px;} .shz-lc--member .shz-lc-compose-action:active{transform:scale(.95);} .shz-lc--member .shz-lc-mic-btn.is-listening{color:#fff;border-color:#e6007e;background:linear-gradient(145deg,#ff4fa8,#e6007e);animation:shzLcMicPulse 1.2s ease-in-out infinite;} @keyframes shzLcMicPulse{0%,100%{box-shadow:0 0 0 0 rgba(230,0,126,.45);}50%{box-shadow:none;}} .shz-lc--member .shz-lc-input-bar{flex:1 1 auto;min-width:0;height:40px;display:flex;align-items:center;padding:0 14px;border:1px solid #e7d3df;border-radius:999px;background:#fff;box-shadow:none;} .shz-lc--member .shz-lc-input-bar:focus-within{border-color:#f0a7c9;box-shadow:none;} .shz-lc--member .shz-lc-input-bar .shz-lc-text-input{-webkit-appearance:none;appearance:none;width:100%;height:38px;min-height:0;margin:0;padding:0;border:0 !important;outline:0 !important;box-shadow:none !important;background:transparent !important;color:#302a30;font-size:14px;line-height:38px;} .shz-lc--member .shz-lc-text-input::placeholder{color:#aaa1a9;} /* Send: glossy magenta-red disc with a white paper plane that flies up */ .shz-lc--member .shz-lc-send{position:relative;flex:0 0 44px;width:44px;height:44px;min-width:0;min-height:0;margin:0;padding:0;display:grid;place-items:center;overflow:hidden;border:0;border-radius:50%;background:radial-gradient(circle at 32% 28%,#ff6fb5 0%,#f0157f 45%,#c2004f 100%);box-shadow:none;cursor:pointer;-webkit-tap-highlight-color:transparent;} .shz-lc--member .shz-lc-send:focus{outline:none;} .shz-lc--member .shz-lc-send:active{transform:scale(.94);} .shz-lc--member .shz-lc-send-plane{width:22px;height:22px;transform:translate(-1px,1px) rotate(0deg);filter:none;} .shz-lc--member .shz-lc-send.is-flying .shz-lc-send-plane{animation:shzLcFly .7s cubic-bezier(.3,.7,.3,1);} @keyframes shzLcFly{0%{transform:translate(-1px,1px);opacity:1;}45%{transform:translate(22px,-26px) rotate(-12deg) scale(.7);opacity:0;}46%{transform:translate(-22px,26px);opacity:0;}100%{transform:translate(-1px,1px);opacity:1;}} /* AI assistant: greeting, typing, cards */ .shz-lc--member .shz-lc-greet-title{display:block;margin-bottom:3px;color:#c2005f;font-weight:900;} .shz-lc--member .shz-lc-greet-text{display:block;} .shz-lc--member .shz-lc-typing-bubble{display:inline-flex;align-items:center;gap:6px;color:#8a7480;font-size:13px;} .shz-lc-typing-dots{display:inline-flex;gap:3px;} .shz-lc-typing-dots i{width:6px;height:6px;border-radius:50%;background:#e6007e;opacity:.3;animation:shzLcDot 1s infinite;} .shz-lc-typing-dots i:nth-child(2){animation-delay:.15s;} .shz-lc-typing-dots i:nth-child(3){animation-delay:.3s;} @keyframes shzLcDot{0%,100%{opacity:.25;transform:translateY(0);}50%{opacity:1;transform:translateY(-3px);}} .shz-lc-aicard{display:flex;flex-direction:column;gap:8px;margin-top:8px;} .shz-lc-aicard__item{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid #f3d6e4;border-radius:14px;background:linear-gradient(180deg,#fff,#fff6fa);color:#2b1520;text-decoration:none;-webkit-tap-highlight-color:transparent;} .shz-lc-aicard__media{flex:0 0 auto;width:62px;height:62px;overflow:hidden;border-radius:10px;background:#fdeef5;} .shz-lc-aicard__media img{display:block;width:100%;height:100%;object-fit:cover;} .shz-lc-aicard__info{display:flex;flex:1 1 auto;flex-direction:column;gap:2px;min-width:0;} .shz-lc-aicard__title{overflow:hidden;font-size:13.5px;font-weight:800;line-height:1.25;white-space:nowrap;text-overflow:ellipsis;} .shz-lc-aicard__meta{color:#7a6470;font-size:11.5px;} .shz-lc-aicard__price{color:#e6007e;font-size:14px;font-weight:900;} .shz-lc-aicard__status{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;} .shz-lc-aicard__status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;} .shz-lc-aicard__status.is-work{color:#1a9f53;} .shz-lc-aicard__status.is-wait{color:#d98a00;} .shz-lc-aicard__status.is-done{color:#1d6fd6;} .shz-lc-aicard__status.is-stop{color:#c62828;} .shz-lc-aicard__arrow{flex:0 0 auto;color:#c2005f;font-size:22px;font-weight:700;} .shz-lc-aicard__cta{display:flex;align-items:center;justify-content:center;height:38px;border-radius:999px;background:linear-gradient(180deg,#ff3fa0,#e6007e 60%,#b0005e);box-shadow:none;color:#fff;font-size:14px;font-weight:800;text-decoration:none;} @media (prefers-reduced-motion:reduce){.shz-lc--member .shz-lc-send.is-flying .shz-lc-send-plane,.shz-lc-typing-dots i,.shz-lc--member .shz-lc-mic-btn.is-listening{animation:none;}} /* Mode bar (top): Live Chat · SHAHAZ AI Assistant — slim, glossy, gold rim */ .shz-lc--member .shz-lc-modebar{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 10px;background:linear-gradient(180deg,#fff0f7,#ffe6f2);border-bottom:1px solid #f6c9df;} .shz-lc--member .shz-lc-mode{position:relative;display:flex;align-items:center;gap:7px;min-width:0;height:44px;margin:0;padding:0 8px 0 4px;overflow:hidden;border:1.5px solid #f2c45a;border-radius:999px;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s ease,box-shadow .25s ease;} .shz-lc--member .shz-lc-mode::before{content:"";position:absolute;inset:1px 10% auto;height:45%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none;} .shz-lc--member .shz-lc-mode--live{background:linear-gradient(180deg,#ff4fa8 0%,#e6007e 55%,#a3005a 100%);color:#fff;box-shadow:none;} .shz-lc--member .shz-lc-mode--ai{background:linear-gradient(135deg,#3b0f2c 0%,#6b1247 45%,#0f5a45 100%);color:#fff;box-shadow:none;} .shz-lc--member .shz-lc-mode:focus{outline:none;} .shz-lc--member .shz-lc-mode:active{transform:translateY(1px) scale(.99);} .shz-lc--member .shz-lc-mode__icon{position:relative;z-index:1;flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.6);overflow:hidden;} .shz-lc--member .shz-lc-mode__icon svg{display:block;width:100%;height:100%;} .shz-lc--member .shz-lc-mode__text{position:relative;z-index:1;display:flex;flex:1 1 auto;flex-direction:column;min-width:0;line-height:1.1;} .shz-lc--member .shz-lc-mode__text b{overflow:hidden;font-size:14px;font-weight:900;white-space:nowrap;text-overflow:ellipsis;} .shz-lc--member .shz-lc-mode__text small{overflow:hidden;font-size:10.5px;font-weight:700;opacity:.92;white-space:nowrap;text-overflow:ellipsis;} .shz-lc--member .shz-lc-mode--ai .shz-lc-mode__text b{background:linear-gradient(180deg,#fff3c4,#f2b632);-webkit-background-clip:text;background-clip:text;color:transparent;} .shz-lc--member .shz-lc-mode__go{position:relative;z-index:1;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:1.5px solid rgba(255,255,255,.75);border-radius:50%;box-sizing:border-box;line-height:0;} .shz-lc--member .shz-lc-mode__go svg{display:block;width:14px;height:14px} .shz-lc--member .shz-lc-question-rail[hidden]{display:none !important;} /* ===================================================================== * Full-screen Live Chat on every device (mobile, tablet, desktop) — never a * popup. Height follows the real visible viewport (keyboard aware, set by * JS as --lc-kb, ZIP-432). On wide screens the conversation sits in a comfortable * centred column while the page itself stays full screen. * ===================================================================== */ .shz-lc{position:fixed !important;inset:0 0 var(--lc-kb,0px) 0 !important;height:auto !important;align-items:stretch !important;justify-content:stretch !important;} .shz-lc .shz-lc-scrim{display:none !important;} .shz-lc.shz-lc--guest .shz-lc-app, .shz-lc.shz-lc--member .shz-lc-app{ position:fixed !important;inset:0 0 var(--lc-kb,0px) 0 !important; width:auto !important;max-width:none !important; height:auto !important;min-height:0 !important;max-height:none !important; margin:0 !important;border:0 !important;border-radius:0 !important;box-shadow:none !important; } /* Wide screens: content column (full-bleed backgrounds stay edge to edge) */ @media (min-width:760px){ .shz-lc--member .shz-lc-hero, .shz-lc--member .shz-lc-modebar, .shz-lc--member .shz-lc-chat, .shz-lc--member .shz-lc-question-rail, .shz-lc--member .shz-lc-composer{padding-left:max(16px,calc((100% - 920px) / 2)) !important;padding-right:max(16px,calc((100% - 920px) / 2)) !important;} .shz-lc--member .shz-lc-modebar{gap:14px;} .shz-lc--member .shz-lc-mode{height:48px;} .shz-lc--member .shz-lc-support-body,.shz-lc--member .shz-lc-me .shz-lc-bubble{max-width:min(620px,78%);} } /* Quick questions: always visible on every device */ .shz-lc--member .shz-lc-question-rail, .shz-lc--member .shz-lc-question-rail[hidden]{display:flex !important;} /* Composer: compact, small clean gap at the bottom (safe area kept) */ .shz-lc--member .shz-lc-composer{margin:0 !important;padding-top:6px !important;padding-bottom:max(6px,0px) !important;} /* Avatars: always a perfect circle; never stretched by long messages */ .shz-lc--member .shz-lc-message-avatar{flex:0 0 38px !important;width:38px !important;height:38px !important;min-width:38px !important;min-height:38px !important;max-width:38px !important;max-height:38px !important;aspect-ratio:1 / 1;padding:2px !important;border-radius:50% !important;overflow:hidden !important;} .shz-lc--member .shz-lc-message-avatar img{width:100% !important;height:100% !important;max-width:100% !important;max-height:100% !important;aspect-ratio:1 / 1;border-radius:50% !important;object-fit:cover !important;object-position:center !important;} .shz-lc--member .shz-lc-message-avatar .shz-lc-avatar-fallback{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;} /* ZIP-311: no photo yet → the whole SHAHAZ bag on a soft pink disc (not cropped). */ .shz-lc--member .shz-lc-message-avatar.is-logo img{object-fit:contain !important;padding:3px !important;box-sizing:border-box !important;border-radius:50% !important;background:radial-gradient(circle at 50% 38%,#fff 0%,#ffeaf4 62%,#ffd3e7 100%) !important;} /* Bubbles wrap long text, never overflow */ .shz-lc--member .shz-lc-bubble{overflow-wrap:anywhere;word-break:break-word;} .shz-lc--member .shz-lc-chat{min-height:0;} /* ===================================================================== * ZIP-210 — Live Chat header, mode buttons and message avatars (final). * One block; the older scattered header/dots/avatar-alignment patches were * deleted. Header geometry is derived from the real logo file * (shahaz-logo-final.svg: bag centre at 40% of its height, the "S" of the * wordmark at 88.7%), so on every screen: * · the back arrow sits centred above the logo bag; * · "Live Chat", the SHAHAZ.com wordmark, "Support Center" and * "Available now" share ONE left text edge; * · the three dots are plain dots (no disc) centred above the green light. * ===================================================================== */ .shz-lc .shz-lc-hero{--lc-logo-h:40px;--lc-textcol:calc(var(--lc-logo-h) * .887);--lc-bagmid:calc(var(--lc-logo-h) * .4)} @media (min-width:760px){.shz-lc .shz-lc-hero{--lc-logo-h:46px}} .shz-lc .shz-lc-hero .shz-lc-hero-top{display:grid !important;grid-template-columns:var(--lc-textcol) minmax(0,1fr) auto;align-items:center !important;gap:0;height:auto;min-height:36px} .shz-lc .shz-lc-hero .shz-lc-top-spacer{display:none} .shz-lc .shz-lc-hero .shz-lc-back{grid-column:1;justify-self:start;width:34px;height:34px;margin:0 0 0 calc(var(--lc-bagmid) - 17px);padding:0;transform:none;border:0;background:none !important;color:#fff;font-size:30px;line-height:1;display:grid;place-items:center} .shz-lc .shz-lc-hero .shz-lc-top-title{grid-column:2;margin:0;transform:none;justify-self:start} /* Three dots: horizontal white dots, no background disc. */ .shz-lc .shz-lc-hero .shz-lc-more, .shz-lc .shz-lc-hero .shz-lc-more:hover, .shz-lc .shz-lc-hero .shz-lc-more:focus, .shz-lc .shz-lc-hero .shz-lc-more:active{grid-column:3;display:grid !important;place-items:center !important;width:34px;height:34px;margin:0;padding:0;transform:none;border:0;border-radius:0;background:none !important;box-shadow:none !important;color:#fff !important;opacity:1 !important} .shz-lc .shz-lc-more-dots{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:5px} .shz-lc .shz-lc-more-dots i{display:block;width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:#fff;box-shadow:none} /* Member: dots centred exactly above the light (light = 68px wide, 10px from the edge). */ .shz-lc--member .shz-lc-hero .shz-lc-more{width:68px;margin-right:10px} /* Logo + text column */ .shz-lc .shz-lc-hero .shz-lc-support-row{margin-top:4px !important} .shz-lc .shz-lc-hero .shz-lc-brand-lockup{display:grid;grid-template-columns:var(--lc-textcol) minmax(0,1fr);align-items:center;row-gap:3px;flex:1 1 auto;min-width:0} .shz-lc .shz-lc-hero .shz-lc-site-logo{grid-column:1 / -1;display:block;width:auto !important;height:var(--lc-logo-h) !important;max-width:none !important;max-height:none !important;filter:none} .shz-lc .shz-lc-hero .shz-lc-support-center, .shz-lc .shz-lc-hero .shz-lc-status, .shz-lc .shz-lc-hero .shz-lc-guest-status{grid-column:2;margin:0 !important;justify-self:start} .shz-lc .shz-lc-hero .shz-lc-status{display:flex;align-items:center;gap:6px;position:static} .shz-lc .shz-lc-hero .shz-lc-status .shz-lc-dot{position:static;transform:none;flex:0 0 auto} /* Mode buttons: the SHAHAZ.com bag (Live Chat) and the AI robot (AI Assistant) on a glossy ROUND tile — 3D without * any dark or blurred shadow. The tile has the SAME gap on its left, top and bottom (button height − 2 × gap). * ZIP-357 (owner): the tile is a full circle like a football, not a rounded square. */ .shz-lc--member .shz-lc-mode{--mode-gap:5px;padding-left:calc(var(--mode-gap) - 1px)} .shz-lc--member .shz-lc-mode .shz-lc-mode__icon{--tile:calc(44px - var(--mode-gap) * 2);flex:0 0 var(--tile);width:var(--tile);height:var(--tile);padding:2px;overflow:hidden;border:1.5px solid #fff;border-radius:50%; background:radial-gradient(circle at 32% 26%,#ffffff 0%,#fff3f9 45%,#ffd3e8 100%); box-shadow:0 0 0 .8px #f2c45a;box-sizing:border-box} .shz-lc--member .shz-lc-mode .shz-lc-mode__icon img{display:block;width:100% !important;height:100% !important;max-width:none !important;object-fit:contain;border-radius:50%} @media(min-width:760px){.shz-lc--member .shz-lc-mode .shz-lc-mode__icon{--tile:calc(48px - var(--mode-gap) * 2)}} /* ZIP-357: the AI button title is the SHAHAZ.com wordmark (white SHAHAZ + gold .com on the dark button). */ .shz-lc--member .shz-lc-mode--ai .shz-lc-mode__text b.shz-lc-mode__brand{display:block;background:none;color:#fff;font-size:15px;line-height:1.05} /* Message avatars: staff / admin / AI avatar sits on the LEFT of the sender * name, on the same line — not at the bottom of the bubble. The AI * Assistant name uses the same hot magenta as every support name. */ .shz-lc--member .shz-lc-support .shz-lc-message-line{align-items:flex-start} .shz-lc--member .shz-lc-support .shz-lc-message-avatar{align-self:flex-start !important} .shz-lc--member .shz-lc-support .shz-lc-message-line:has(.shz-lc-support-head) > .shz-lc-message-avatar{margin-top:-12px} .shz-lc--member .shz-lc-me .shz-lc-message-line{align-items:flex-end} .shz-lc--member .shz-lc-me .shz-lc-message-avatar{align-self:flex-end} .shz-lc--member .shz-lc-support .shz-lc-message-avatar img{object-fit:contain !important;background:#fff} /* ZIP-356 (owner): the chat must never slide left / right. A wide AI card (e.g. "my orders" with a long product name) * used to stretch its bubble past the screen. The chat never scrolls sideways, a bubble is never wider than its * column, and a card always fits its bubble (long names end with "…"). */ .shz-lc--member .shz-lc-chat{overflow-x:hidden} .shz-lc--member [data-shz-lc-messages]{max-width:100%;min-width:0} .shz-lc--member .shz-lc-support-body > .shz-lc-bubble{max-width:100%;min-width:0;box-sizing:border-box} .shz-lc--member .shz-lc-support-body:has(.shz-lc-aicard){width:100%} .shz-lc--member .shz-lc-support-body > .shz-lc-bubble:has(.shz-lc-aicard){width:100%} .shz-lc-aicard,.shz-lc-aicard__item{min-width:0;max-width:100%;box-sizing:border-box} /* ZIP-356: while the chat is open no offer popup floats over it (they come back when the chat closes). */ body.shz-lc-open #shahaz-enterprise-popup-root{display:none !important} /* ZIP-482: support answer → slim pill buttons to the right page */ .shz-lc-aicard--links{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;} .shz-lc-aicard__link{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;border:1px solid #F1C6DC;background:#fff;color:#A3005A;font-size:13px;font-weight:700;text-decoration:none;-webkit-tap-highlight-color:transparent;box-shadow:none;} .shz-lc-aicard__link:active{background:#FFF0F7;} /* ZIP-573 (owner's video): the chosen chat type is unmistakable. The chosen button stays fully lit with a white + * gold ring and a green "active" tick inside its round ring (five green rings grow out of it, ZIP-574); the other button is dimmed (darker, calmer colours — never blurred, never see-through) and its * ring is empty. No arrow any more. */ .shz-lc--member .shz-lc-mode{transition:filter .25s ease,box-shadow .25s ease,transform .15s ease} .shz-lc--member .shz-lc-mode:not(.is-active){filter:brightness(.55) saturate(.6)} .shz-lc--member .shz-lc-mode.is-active{filter:none;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #f2c45a} .shz-lc--member .shz-lc-mode .shz-lc-mode__go{width:24px;height:24px;border:1.5px solid rgba(255,255,255,.6);background:transparent;color:transparent;overflow:visible} .shz-lc--member .shz-lc-mode .shz-lc-mode__go svg{width:15px;height:15px;opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .25s cubic-bezier(.3,1.6,.5,1)} .shz-lc--member .shz-lc-mode.is-active .shz-lc-mode__go{border-color:transparent;color:#fff} /* the green ball is its own layer, so the rings grow from behind it (like the header bulb) */ .shz-lc--member .shz-lc-mode.is-active .shz-lc-mode__go::before{content:"";position:absolute;inset:-1.5px;z-index:1;border:2px solid #fff;border-radius:50%;box-sizing:border-box;background:radial-gradient(circle at 35% 30%,#5ff0a8 0%,#18c27a 55%,#0a8a52 100%)} .shz-lc--member .shz-lc-mode.is-active .shz-lc-mode__go svg{opacity:1;transform:none} /* ZIP-574 (owner): the same five expanding rings as the header's live bulb (shzLiveWave), scaled to the 24px tick * (header bulb 39px → rings 76…36px; here 47…22px), only on the chosen button. */ .shz-lc--member .shz-lc-mode{overflow:visible} .shz-lc--member .shz-lc-mode .shz-lc-mode__go svg{position:relative;z-index:2} .shz-lc--member .shz-lc-mode__rings{position:absolute;inset:0;z-index:0;color:#00ff78;pointer-events:none} .shz-lc--member .shz-lc-mode__rings i{position:absolute;left:50%;top:50%;width:47px;height:47px;border-radius:50%;border:1.3px solid currentColor;opacity:0;transform:translate(-50%,-50%) scale(.18);box-sizing:border-box} .shz-lc--member .shz-lc-mode.is-active .shz-lc-mode__rings i{animation:shzLiveWave 3s cubic-bezier(.15,.65,.2,1) infinite} .shz-lc--member .shz-lc-mode__rings i:nth-child(2){width:41px;height:41px;animation-delay:.22s !important} .shz-lc--member .shz-lc-mode__rings i:nth-child(3){width:34px;height:34px;animation-delay:.44s !important} .shz-lc--member .shz-lc-mode__rings i:nth-child(4){width:28px;height:28px;animation-delay:.66s !important} .shz-lc--member .shz-lc-mode__rings i:nth-child(5){width:22px;height:22px;animation-delay:.88s !important} @media (prefers-reduced-motion:reduce){.shz-lc--member .shz-lc-mode.is-active .shz-lc-mode__rings i{animation:none}} .shz-lc--member .shz-lc-mode:focus-visible{outline:2px solid #F0146E;outline-offset:3px} /* ZIP-594 (owner): Live Chat's back button in the app's round glass ball (as the header back arrow). */ .shz-lc .shz-lc-back{position:relative;isolation:isolate} .shz-lc .shz-lc-back::before{content:"";position:absolute;left:50%;top:50%;width:32px;height:32px;margin:-16px 0 0 -16px;z-index:-1;border-radius:50%; border:1.2px solid rgba(255,255,255,.75); background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,.12) 46%,rgba(255,255,255,0) 47%) top/76% 52% no-repeat, radial-gradient(circle at 50% 42%,rgba(255,255,255,.30) 0,rgba(255,255,255,.18) 55%,rgba(255,255,255,.10) 100%)}