:root{
  --primary:#0084ff;--bg:#fff;--panel:#fff;--text:#050505;--muted:#65676b;--border:#e4e6eb;
  --incoming:#f0f2f5;--incomingText:#050505;--outgoing:#0084ff;--outgoingText:#fff;
  --input:#f0f2f5;--soft:#e7f3ff;--system:#eef5ff;--systemText:#1b5dbf;
  --shadow:0 12px 40px rgba(0,0,0,.20);--app-height:100dvh;--app-top:0px
}
*{box-sizing:border-box;min-width:0}
html,body{width:100%;height:100%;margin:0;overflow:hidden;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);overscroll-behavior:none}
body{position:fixed;inset:var(--app-top) 0 auto 0;height:var(--app-height)}
button,input,textarea,select{font:inherit;color:inherit}button{touch-action:manipulation}.hidden{display:none!important}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.fill{fill:currentColor;stroke:none}
.tap-button{transition:transform .11s ease,filter .11s ease}.tap-button:active,.tap-button.clicked{transform:scale(.88);filter:brightness(.93)}
.app-shell{position:fixed;inset:var(--app-top) 0 auto 0;width:100%;height:var(--app-height);display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--panel);overflow:hidden}
.chat-header{height:calc(70px + env(safe-area-inset-top));padding:calc(8px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);background:var(--panel);z-index:8}
.brand-avatar-wrap{position:relative;width:48px;height:48px;flex:0 0 48px}.brand-logo{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#d8dadf}.avatar-online-dot{position:absolute;right:-1px;bottom:1px;width:14px;height:14px;border:3px solid var(--panel);border-radius:50%;background:#31a24c}
.brand-copy{display:flex;flex-direction:column;flex:1;overflow:hidden}.brand-copy strong{display:flex;align-items:center;gap:5px;font-size:19px;line-height:1.18;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-copy>span{font-size:14px;color:var(--muted)}
.verified-badge{display:inline-grid;place-items:center;width:17px;height:17px;flex:0 0 17px;border-radius:50%;background:#1877f2;color:#fff;font-size:12px;font-weight:900}
.icon-button,.composer-button,.send-button{border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}.icon-button{width:42px;height:42px;background:var(--soft);color:var(--primary)}
.chat-view{display:flex;flex-direction:column;min-height:0;overflow:hidden;position:relative;background:var(--panel)}
.message-list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:8px 9px 7px;scroll-behavior:smooth;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}
.message-row{position:relative;width:100%;display:flex;flex-direction:column;align-items:flex-start;margin:2px 0;padding:0 1px;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;--swipe-x:0px}
.message-row.customer{align-items:flex-end}.message-row.employee,.message-row.system{align-items:flex-start}
.message-row .bubble,.message-row .reply-preview,.message-row .reaction-bar,.message-row .message-meta,.message-row .delivery-status{transform:translateX(var(--swipe-x));transition:transform .16s ease}
.bubble{max-width:min(78%,680px);padding:8px 12px;border-radius:18px;background:var(--incoming);color:var(--incomingText);line-height:1.34;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;transition:transform .16s ease,background-color .55s ease,box-shadow .55s ease}
.customer .bubble{background:var(--outgoing);color:var(--outgoingText)}.system .bubble{background:var(--system);color:var(--systemText)}
.message-row.highlight .bubble{animation:messageFlash 1.25s ease}
@keyframes messageFlash{0%,100%{box-shadow:0 0 0 0 transparent}25%{box-shadow:0 0 0 5px rgba(0,132,255,.38);transform:scale(1.035)}55%{box-shadow:0 0 0 2px rgba(0,132,255,.18);transform:scale(1)}}
.reply-preview{max-width:min(72%,620px);margin:0 8px 2px;padding:5px 9px;border:0;border-left:3px solid var(--primary);border-radius:9px;background:var(--input);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;text-align:left}
.swipe-reply-cue{position:absolute;left:10px;top:50%;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--soft);color:var(--primary);opacity:0;transform:translate(-14px,-50%) scale(.65);transition:opacity .12s ease,transform .12s ease;pointer-events:none}.message-row.swiping .swipe-reply-cue{opacity:1;transform:translate(0,-50%) scale(1)}
/* My messages (right) swipe right->left, so the reply cue sits on the right. */
.message-row.customer .swipe-reply-cue{left:auto;right:10px;transform:translate(14px,-50%) scale(.65)}
.message-row.customer.swiping .swipe-reply-cue{transform:translate(0,-50%) scale(1)}
.message-meta{font-size:11px;color:var(--muted);margin:2px 10px 1px}.customer .message-meta{text-align:right}
.delivery-status{height:18px;margin:0 8px 2px;display:flex;align-items:center;justify-content:flex-end;color:var(--muted)}.delivery-status svg{width:15px;height:15px}.delivery-status .delivered-circle{color:#8a8d91}.delivery-status .delivered-circle .status-fill{fill:currentColor}.receipt-avatar{width:16px;height:16px;border-radius:50%;object-fit:cover;border:1px solid var(--panel)}
.pin-mark{font-size:11px;color:var(--muted);margin:1px 8px}.attachments{display:grid;gap:5px;margin-top:5px;max-width:100%}.attachment{display:flex;align-items:center;gap:8px;max-width:min(300px,72vw);padding:9px 10px;border-radius:12px;background:color-mix(in srgb,var(--panel) 80%,transparent);color:inherit;text-decoration:none;overflow:hidden;text-overflow:ellipsis}.attachment-link{display:block;border:0;padding:0;background:transparent;cursor:zoom-in}.attachment-media{display:block;max-width:min(250px,68vw);width:auto;height:auto;max-height:280px;object-fit:contain;border-radius:13px;background:#111}.attachment-video{width:min(250px,68vw)}audio{max-width:min(290px,76vw)}
.reaction-bar{display:flex;gap:3px;flex-wrap:wrap;font-size:13px;margin:-5px 6px 1px;z-index:2}.reaction-chip{border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:999px;padding:2px 7px;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.12);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.action-card button{border:0;background:var(--primary);color:#fff;padding:8px 12px;border-radius:999px;margin-top:7px;cursor:pointer}
.edge-loader{align-self:center;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--primary);font-size:13px;padding:7px 10px;z-index:4}.edge-loader button{border:0;background:transparent;color:inherit;padding:0;cursor:pointer}.top-loader{position:absolute;top:2px;left:50%;transform:translateX(-50%);border-radius:999px;background:color-mix(in srgb,var(--panel) 94%,transparent);box-shadow:0 2px 10px rgba(0,0,0,.08)}.refresh-loader{position:absolute;left:50%;bottom:68px;transform:translateX(-50%);padding:8px 13px;border-radius:999px;background:var(--panel);box-shadow:var(--shadow);color:var(--muted)}.spinner{width:15px;height:15px;border:2px solid color-mix(in srgb,var(--primary) 25%,transparent);border-top-color:var(--primary);border-radius:50%;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.typing-indicator{display:flex;align-items:center;gap:7px;font-size:12px;padding:5px 14px;color:var(--muted);background:var(--panel)}.typing-dots{display:flex;align-items:center;gap:3px;padding:7px 9px;border-radius:14px;background:var(--incoming)}.typing-dots i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:typingBounce 1.2s infinite ease-in-out}.typing-dots i:nth-child(2){animation-delay:.15s}.typing-dots i:nth-child(3){animation-delay:.3s}@keyframes typingBounce{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-4px);opacity:1}}
.reply-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 12px;border-top:1px solid var(--border);font-size:12px;background:var(--panel)}.reply-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reply-bar button{border:0;background:transparent;color:var(--muted);font-size:20px}
.upload-queue{display:grid;gap:7px;padding:8px 10px;border-top:1px solid var(--border);max-height:180px;overflow:auto;background:var(--panel)}.upload-item{display:grid;grid-template-columns:50px minmax(0,1fr) 34px;gap:9px;align-items:center}.upload-preview{width:50px;height:50px;border-radius:9px;object-fit:cover;background:var(--input);display:grid;place-items:center;font-size:22px}.upload-copy strong,.upload-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.upload-copy small{color:var(--muted);font-size:11px}.progress-track{height:5px;border-radius:999px;background:var(--border);overflow:hidden;margin-top:5px}.progress-bar{height:100%;width:0;background:var(--primary);transition:width .15s linear}.upload-cancel{width:32px;height:32px;border:0;border-radius:50%;background:var(--input);cursor:pointer}
.recording-panel{display:grid;grid-template-columns:36px minmax(0,1fr) auto auto;align-items:center;gap:7px;padding:7px 9px;border-top:1px solid var(--border);background:var(--panel)}.recording-panel canvas{width:100%;height:42px}.recording-panel time{font-variant-numeric:tabular-nums;color:var(--muted)}.record-cancel,.record-send{border:0;border-radius:999px;padding:9px 12px}.record-cancel{width:36px;height:36px;padding:0;background:#fee2e2;color:#b91c1c}.record-send{background:var(--primary);color:#fff}
.composer{display:flex;align-items:flex-end;gap:2px;padding:7px max(6px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));border-top:1px solid var(--border);background:var(--panel);z-index:9}.composer-button{width:34px;height:38px;background:transparent;color:var(--primary)}.composer-button svg{width:23px;height:23px}.composer textarea{flex:1;min-width:42px;resize:none;max-height:112px;min-height:38px;border:0;background:var(--input);border-radius:20px;padding:9px 13px;outline:0;color:var(--text);overflow-y:auto}.composer textarea::placeholder{color:var(--muted)}.send-button{width:38px;height:38px;background:var(--primary);color:#fff}.send-button svg{width:22px;height:22px}.send-button.like-mode{background:transparent;color:var(--primary)}.send-button.like-mode svg{width:27px;height:27px}
.emoji-picker{position:absolute;right:8px;bottom:calc(59px + env(safe-area-inset-bottom));width:min(360px,calc(100vw - 16px));max-height:285px;overflow:auto;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:9px;border:1px solid var(--border);border-radius:16px;background:var(--panel);box-shadow:var(--shadow);z-index:25}.emoji-picker button{border:0;background:transparent;font-size:23px;padding:6px;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.announcement-list{padding:12px}.announcement-card{border:1px solid var(--border);border-radius:16px;padding:14px;margin-bottom:10px;background:var(--panel)}.announcement-card h3{margin:0 0 7px}.announcement-card p{overflow-wrap:anywhere}.announcement-card time{font-size:11px;color:var(--muted)}
dialog.sheet{border:0;border-radius:20px 20px 0 0;padding:0;width:min(560px,100%);max-width:none;max-height:calc(100dvh - env(safe-area-inset-top));margin:auto auto 0;background:var(--panel);color:var(--text);box-shadow:var(--shadow);overflow:auto;overscroll-behavior:contain}dialog.sheet::backdrop,dialog.action-sheet::backdrop{background:rgba(0,0,0,.5)}dialog.sheet.tall{height:min(82dvh,720px)}dialog.sheet header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--panel)}dialog.sheet header button{border:0;background:transparent;color:var(--muted);font-size:24px}dialog.sheet>div,dialog.sheet>button,dialog.sheet>label,dialog.sheet>input{margin-left:16px;margin-right:16px}
.settings-card{padding:14px 0;color:var(--muted)}.settings-card strong{color:var(--text)}.wide-button{display:block;width:calc(100% - 32px);border:0;border-radius:12px;padding:12px;text-align:left;margin-bottom:8px!important;background:var(--input);color:var(--text);cursor:pointer}.install-help{padding:8px 0 12px;color:var(--muted);font-size:13px;line-height:1.45}.theme-row,.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.theme-row{padding-bottom:20px}.theme-row select{background:var(--input);border:1px solid var(--border);border-radius:8px;padding:6px}.toggle-row input{width:20px;height:20px}.full-input{width:calc(100% - 32px);padding:11px;border:1px solid var(--border);border-radius:12px;margin-top:12px;background:var(--input);color:var(--text)}
.form-stack{padding:16px;display:grid;gap:10px}.form-stack input,.form-stack select{width:100%;padding:11px;border:1px solid var(--border);border-radius:10px;background:var(--input);color:var(--text)}.primary-button,.secondary-button{border-radius:10px;padding:11px;cursor:pointer}.primary-button{border:0;background:var(--primary);color:#fff}.secondary-button{border:1px solid var(--border);background:var(--panel);color:var(--text)}.device-card,.search-hit{display:block;width:100%;padding:12px;border:0;border-bottom:1px solid var(--border);background:var(--panel);color:var(--text);text-align:left}.search-hit strong,.search-hit span,.search-hit small{display:block}.search-hit small{color:var(--muted);margin-top:4px}
.action-sheet{border:0;border-radius:18px;padding:9px;width:min(420px,calc(100vw - 20px));margin:auto auto 12px;background:var(--panel);color:var(--text);box-shadow:var(--shadow);overscroll-behavior:contain;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.action-sheet>button{display:block;width:100%;border:0;background:transparent;text-align:left;padding:12px;border-radius:10px}.action-sheet>button:hover{background:var(--input)}.quick-reactions{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:5px}.quick-reactions button{border:0;background:var(--input);border-radius:50%;aspect-ratio:1;font-size:22px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.selectable-message{margin:16px!important;padding:14px;border-radius:12px;background:var(--input);white-space:pre-wrap;user-select:text;-webkit-user-select:text;-webkit-touch-callout:default}.info-list{padding:12px 16px 20px}.info-list p{margin:0;padding:10px 0;border-bottom:1px solid var(--border)}
.image-viewer{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;padding:0;background:rgba(0,0,0,.96);color:#fff;overflow:hidden}.image-viewer::backdrop{background:#000}.viewer-stage{position:absolute;inset:54px 0 62px;display:grid;place-items:center;overflow:auto;touch-action:pan-x pan-y pinch-zoom}.viewer-stage img{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center}.viewer-close,.viewer-arrow{position:absolute;z-index:3;border:0;background:rgba(20,20,20,.65);color:#fff;border-radius:50%}.viewer-close{right:12px;top:10px;width:40px;height:40px;font-size:26px}.viewer-arrow{top:50%;width:44px;height:56px;font-size:38px;transform:translateY(-50%)}.viewer-prev{left:8px}.viewer-next{right:8px}.viewer-toolbar{position:absolute;left:0;right:0;bottom:0;height:58px;display:flex;align-items:center;justify-content:center;gap:12px;padding-bottom:env(safe-area-inset-bottom);background:rgba(0,0,0,.72)}.viewer-toolbar button,.viewer-toolbar a{border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;text-decoration:none;padding:7px 12px;border-radius:999px}.viewer-copied{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px 18px;border-radius:999px;background:#fff;color:#111;font-weight:700}
.toast{position:fixed;left:50%;bottom:calc(72px + env(safe-area-inset-bottom));transform:translateX(-50%);max-width:calc(100vw - 30px);padding:10px 16px;border-radius:999px;background:#111827;color:#fff;z-index:60;box-shadow:var(--shadow);text-align:center}
@media(hover:hover) and (pointer:fine) and (min-width:900px){.bubble{max-width:min(68%,680px)}.image-viewer{width:100vw;height:100vh}}
@media(max-width:430px){.chat-header{height:66px;padding-top:7px;padding-bottom:7px}.brand-avatar-wrap,.brand-logo{width:44px;height:44px}.brand-avatar-wrap{flex-basis:44px}.icon-button{width:38px;height:38px}.composer{gap:0;padding-left:3px;padding-right:3px}.composer-button{width:31px;height:36px}.composer-button svg{width:21px;height:21px}.send-button{width:37px;height:37px}.bubble{max-width:84%}.emoji-picker{grid-template-columns:repeat(7,1fr)}}
@media(max-width:355px){#cameraButton{display:none}.brand-copy strong{font-size:16px}.composer-button{width:29px}}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#18191a;--panel:#18191a;--text:#e4e6eb;--muted:#b0b3b8;--border:#3a3b3c;--incoming:#3a3b3c;--incomingText:#e4e6eb;--input:#242526;--soft:#263951;--system:#23354d;--systemText:#b7d5ff}}
:root[data-theme="dark"]{--bg:#18191a;--panel:#18191a;--text:#e4e6eb;--muted:#b0b3b8;--border:#3a3b3c;--incoming:#3a3b3c;--incomingText:#e4e6eb;--input:#242526;--soft:#263951;--system:#23354d;--systemText:#b7d5ff}

/* Keep long-press inside the custom Messenger-style action sheet. Native text
   selection is re-enabled only inside the Select text dialog. */
.message-row,.message-row .bubble,.message-row .reaction-chip,.quick-reactions{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important}
.selectable-message,.selectable-message *{-webkit-user-select:text!important;user-select:text!important;-webkit-touch-callout:default!important}

/* 20260726c interaction, profile and media stability */
.older-arrows{font-size:24px;line-height:1;color:var(--primary);animation:olderNudge 1.2s ease-in-out infinite}
@keyframes olderNudge{0%,100%{transform:translateY(2px);opacity:.55}50%{transform:translateY(-2px);opacity:1}}
.highlight{animation:messageFlash 5.4s ease!important}
.profile-editor{display:flex;align-items:center;gap:12px;padding:16px 16px 0}.profile-preview{width:84px;height:84px;border-radius:50%;object-fit:cover;border:2px solid var(--border)}.profile-preview.placeholder{display:grid;place-items:center;background:var(--input);color:var(--muted);font-size:12px}.identifier-section{padding:0 16px 18px}.identifier-section h3{margin:8px 0}.identifier-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 0;border-bottom:1px solid var(--border)}.identifier-row>span{min-width:0;overflow-wrap:anywhere}.identifier-row>div{display:flex;gap:4px}.identifier-row button{padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--input);color:var(--text)}
.image-viewer[open]{display:block}.viewer-stage img{will-change:transform;image-rendering:auto}

/* 20260726g stability, branding and accessibility fixes */
body{inset:0;height:var(--app-height)}
.app-shell{inset:0;height:var(--app-height)}
.verified-badge{display:block;width:19px;height:19px;flex:0 0 19px;border:0;border-radius:0;background:transparent;object-fit:contain}
.bubble a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;overflow-wrap:anywhere}
.profile-picture-preview{display:flex;align-items:center;justify-content:center;padding:8px}.profile-picture-preview img{width:82px;height:82px;border-radius:50%;object-fit:cover;border:2px solid var(--border)}
.refresh-loader{min-width:38px;min-height:38px;padding:10px;border-radius:50%}
.viewer-stage{overflow:hidden}.viewer-stage img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;transform:scale(1);transition:transform .12s ease;will-change:auto}
.viewer-toolbar{gap:7px;flex-wrap:wrap;height:auto;min-height:58px;padding:7px max(8px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
.viewer-toolbar button,.viewer-toolbar a{min-width:38px;padding:7px 10px}
.message-list{isolation:isolate;backface-visibility:hidden}
.app-shell.repaint{opacity:.99999}

/* 20260726h viewport, themes, navigation, announcements, and media fixes */
:root{--chat-background-image:none;--header-accent:var(--panel);--wallpaper-overlay:transparent;--chat-bg-blur:0px;--chat-bg-dim:0}
html,body{position:relative!important;inset:auto!important;height:100%!important;min-height:100%!important;overflow:hidden!important}
body{background:var(--bg)!important}
.app-shell{top:var(--app-top)!important;bottom:auto!important;inset-inline:0!important;height:var(--app-height)!important;transform:none!important;opacity:1!important;contain:none!important}
.chat-view{background-color:var(--panel)}
.chat-view::before{content:"";position:absolute;inset:-24px;z-index:0;background-image:linear-gradient(var(--wallpaper-overlay),var(--wallpaper-overlay)),var(--chat-background-image);background-position:center;background-size:cover;filter:blur(var(--chat-bg-blur,0px));pointer-events:none}
.chat-view::after{content:"";position:absolute;inset:0;z-index:0;background:rgba(0,0,0,var(--chat-bg-dim,0));pointer-events:none}
.chat-view>*{position:relative;z-index:1}
.chat-header,.composer,.typing-indicator,.reply-bar,.recording-panel,.upload-queue{backdrop-filter:saturate(1.05);-webkit-backdrop-filter:saturate(1.05)}
.message-list{scrollbar-gutter:auto!important;transform:translateZ(0);contain:strict;isolation:auto!important;backface-visibility:visible!important}
.app-shell.repaint{opacity:1!important}
.scroll-latest{position:absolute;right:16px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:18;width:42px;height:42px;border:0;border-radius:50%;background:var(--primary);color:#fff;font-size:25px;line-height:1;box-shadow:0 6px 18px rgba(0,0,0,.24);display:grid;place-items:center}
.reaction-only{border:0;border-radius:999px;padding:8px;width:min(390px,calc(100vw - 24px));margin:auto auto max(90px,calc(72px + env(safe-area-inset-bottom)));background:var(--panel);color:var(--text);box-shadow:var(--shadow)}
.reaction-only::backdrop{background:rgba(0,0,0,.30)}
.reaction-only .quick-reactions{padding:0}
.quick-reactions button{touch-action:manipulation;pointer-events:auto;position:relative;z-index:2}
.announcement-card.expired{border-color:#ef4444;background:color-mix(in srgb,#ef4444 8%,var(--panel))}.announcement-card.expired h3::after{content:"Expired";display:inline-block;margin-left:8px;padding:2px 7px;border-radius:999px;background:#dc2626;color:#fff;font-size:10px;vertical-align:middle}.announcement-card .announcement-status{display:block;margin-top:5px;font-weight:700;color:#dc2626}
.viewer-stage{overflow:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;touch-action:pan-x pan-y!important}
.viewer-stage img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;transform-origin:center center!important}
.image-viewer[open]{display:block!important}
.selectable-message{min-height:120px;cursor:text}
.background-preview{height:90px;border-radius:12px;background-position:center;background-size:cover;border:1px solid var(--border);margin:8px 16px}
.live-typing-notice{margin:0 16px 10px;padding:8px 10px;border-radius:10px;background:var(--soft);color:var(--muted);font-size:12px}

:root[data-style-theme="messenger"]{--primary:#0084ff;--bg:#fff;--panel:#fff;--text:#050505;--muted:#65676b;--border:#e4e6eb;--incoming:#f0f2f5;--incomingText:#050505;--outgoing:#0084ff;--outgoingText:#fff;--input:#f0f2f5;--soft:#e7f3ff;--system:#eef5ff;--systemText:#1b5dbf;--wallpaper-overlay:rgba(255,255,255,.0)}
:root[data-style-theme="business"]{--primary:#155e75;--bg:#eef4f6;--panel:#fff;--text:#102a33;--muted:#60757d;--border:#cbd9dd;--incoming:#e3edf0;--incomingText:#102a33;--outgoing:#155e75;--outgoingText:#fff;--input:#edf3f5;--soft:#dff1f5;--system:#e3f3f7;--systemText:#155e75;--wallpaper-overlay:rgba(255,255,255,.22)}
:root[data-style-theme="midnight"]{--primary:#6ea8ff;--bg:#090d16;--panel:#101827;--text:#eff6ff;--muted:#a6b4c7;--border:#263349;--incoming:#243044;--incomingText:#f3f7ff;--outgoing:#245fc7;--outgoingText:#fff;--input:#1a2537;--soft:#1d3150;--system:#1c2d49;--systemText:#c8dcff;--wallpaper-overlay:rgba(7,12,22,.42);color-scheme:dark}
:root[data-style-theme="cute"]{--primary:#e8579a;--bg:#fff4fa;--panel:#fffafd;--text:#51233a;--muted:#91677c;--border:#f3cfe1;--incoming:#fde8f2;--incomingText:#51233a;--outgoing:#e8579a;--outgoingText:#fff;--input:#fceaf3;--soft:#ffe0ef;--system:#ffe9f4;--systemText:#a62d69;--wallpaper-overlay:rgba(255,246,251,.30)}
:root[data-style-theme="warm"]{--primary:#d97706;--bg:#fff8ed;--panel:#fffdf8;--text:#442914;--muted:#8a6a50;--border:#ecd8bf;--incoming:#f5e6d2;--incomingText:#442914;--outgoing:#d97706;--outgoingText:#fff;--input:#f7ead9;--soft:#ffecd1;--system:#fff0da;--systemText:#a64b00;--wallpaper-overlay:rgba(255,250,240,.24)}
@media(prefers-color-scheme:dark){:root[data-style-theme="messenger"]{--bg:#18191a;--panel:#18191a;--text:#e4e6eb;--muted:#b0b3b8;--border:#3a3b3c;--incoming:#3a3b3c;--incomingText:#e4e6eb;--input:#242526;--soft:#263951;--system:#23354d;--systemText:#b7d5ff;color-scheme:dark}}
@supports(height:100svh){dialog.sheet{max-height:calc(100svh - env(safe-area-inset-top))}.image-viewer{height:100svh}}

/* 20260726h-final: iOS keyboard viewport and image fit hardening */
html,body{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;overflow:hidden!important;overscroll-behavior:none!important;background:var(--bg)!important}
body{top:0!important;left:0!important;right:0!important;bottom:0!important}
.app-shell{position:fixed!important;top:var(--app-top)!important;left:0!important;right:0!important;bottom:auto!important;width:100%!important;height:var(--app-height)!important;min-height:0!important;max-height:none!important;overflow:hidden!important;transform:none!important;contain:none!important}
.chat-view{min-height:0!important;overflow:hidden!important}
.message-list{min-height:0!important;contain:none!important;transform:none!important;backface-visibility:visible!important;-webkit-transform:none!important;will-change:auto!important}
.composer{flex:0 0 auto!important;position:relative!important}
.viewer-stage{position:absolute!important;inset:54px 8px 66px!important;overflow:hidden!important;display:block!important;padding:0!important;touch-action:pan-x pan-y!important}
.viewer-stage img{position:absolute!important;inset:0!important;margin:auto!important;display:block!important;width:auto!important;height:auto!important;max-width:calc(100% - 12px)!important;max-height:calc(100% - 12px)!important;object-fit:contain!important;transform-origin:center center!important}
@supports(height:100svh){.image-viewer{height:100svh!important}}

/* 20260727c keyboard-safe emoji picker and theme geometry */
:root{
  --bubble-radius-in:18px 18px 18px 5px;
  --bubble-radius-out:18px 18px 5px 18px;
  --composer-radius:20px;
  --control-radius:12px;
  --message-gap:2px;
  --theme-font:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
body{font-family:var(--theme-font)}
.message-row{padding-top:var(--message-gap);padding-bottom:var(--message-gap)}
.message-row.employee .bubble,.message-row.system .bubble{border-radius:var(--bubble-radius-in)}
.message-row.customer .bubble{border-radius:var(--bubble-radius-out)}
.composer textarea{border-radius:var(--composer-radius)}
.sheet,.wide-dialog,.settings-card,.wide-button,button,input,textarea,select{border-radius:var(--control-radius)}
.emoji-picker{position:fixed!important;right:8px!important;bottom:auto!important;z-index:300!important}

:root[data-style-theme="messenger"]{--bubble-radius-in:18px 18px 18px 5px;--bubble-radius-out:18px 18px 5px 18px;--composer-radius:20px;--control-radius:12px;--message-gap:2px;--theme-font:system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
:root[data-style-theme="business"]{--bubble-radius-in:7px;--bubble-radius-out:7px;--composer-radius:6px;--control-radius:6px;--message-gap:5px;--theme-font:Inter,Arial,Helvetica,sans-serif}
:root[data-style-theme="midnight"]{--bubble-radius-in:14px 14px 14px 3px;--bubble-radius-out:14px 14px 3px 14px;--composer-radius:14px;--control-radius:12px;--message-gap:4px;--theme-font:system-ui,-apple-system,"Segoe UI",sans-serif}
:root[data-style-theme="cute"]{--bubble-radius-in:26px 26px 26px 8px;--bubble-radius-out:26px 26px 8px 26px;--composer-radius:28px;--control-radius:20px;--message-gap:7px;--theme-font:"Trebuchet MS",Arial,sans-serif}
:root[data-style-theme="warm"]{--bubble-radius-in:14px 14px 14px 2px;--bubble-radius-out:14px 14px 2px 14px;--composer-radius:10px;--control-radius:8px;--message-gap:6px;--theme-font:Georgia,"Times New Roman",serif}

:root[data-style-theme="messenger"][data-color-mode="light"]{--bg:#fff;--panel:#fff;--text:#050505;--muted:#65676b;--border:#e4e6eb;--incoming:#f0f2f5;--incomingText:#050505;--outgoing:#0084ff;--outgoingText:#fff;--input:#f0f2f5;--soft:#e7f3ff;--system:#eef5ff;--systemText:#1b5dbf;color-scheme:light}
:root[data-style-theme="messenger"][data-color-mode="dark"]{--bg:#18191a;--panel:#18191a;--text:#e4e6eb;--muted:#b0b3b8;--border:#3a3b3c;--incoming:#3a3b3c;--incomingText:#e4e6eb;--outgoing:#0084ff;--outgoingText:#fff;--input:#242526;--soft:#263951;--system:#23354d;--systemText:#b7d5ff;color-scheme:dark}
@media(prefers-color-scheme:dark){:root[data-style-theme="messenger"][data-color-mode="system"]{--bg:#18191a;--panel:#18191a;--text:#e4e6eb;--muted:#b0b3b8;--border:#3a3b3c;--incoming:#3a3b3c;--incomingText:#e4e6eb;--outgoing:#0084ff;--outgoingText:#fff;--input:#242526;--soft:#263951;--system:#23354d;--systemText:#b7d5ff;color-scheme:dark}}


/* 20260727c focused stability hotfix */
.chat-view.reply-active .scroll-latest{bottom:calc(116px + env(safe-area-inset-bottom))}
.message-list.prepending{scroll-behavior:auto!important}


/* 20260727e iOS layer stability, pannable media, and expanded themes */
html,body{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important}
body{top:0!important;left:0!important;right:0!important;bottom:0!important}
.app-shell{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:auto!important;height:var(--app-height)!important;min-height:0!important;transform:none!important}
.message-list{scroll-behavior:auto;contain:layout style!important;isolation:isolate!important;transform:none!important;-webkit-transform:none!important;backface-visibility:visible!important;will-change:auto!important}
.viewer-stage{position:absolute!important;inset:54px 8px 66px!important;overflow:hidden!important;display:block!important;touch-action:none!important;cursor:zoom-in;user-select:none;-webkit-user-select:none}
.viewer-stage.zoomed{cursor:grab}.viewer-stage.zoomed:active{cursor:grabbing}
.viewer-stage img{position:absolute!important;inset:0!important;margin:auto!important;display:block!important;width:auto!important;height:auto!important;max-width:calc(100% - 12px)!important;max-height:calc(100% - 12px)!important;object-fit:contain!important;transform-origin:center center!important;will-change:transform;user-select:none;-webkit-user-drag:none}

:root[data-style-theme="ocean"]{--primary:#087ea4;--bg:#eafaff;--panel:#f6fdff;--text:#073b4c;--muted:#4e7480;--border:#bde8f2;--incoming:#d6f2f8;--incomingText:#073b4c;--outgoing:#087ea4;--outgoingText:#fff;--input:#dff5fa;--soft:#cceff8;--system:#d7f6ff;--systemText:#075f7c;--wallpaper-overlay:rgba(235,251,255,.25);--bubble-radius-in:20px 20px 20px 2px;--bubble-radius-out:20px 20px 2px 20px;--composer-radius:24px;--control-radius:16px;--message-gap:5px;--theme-font:"Segoe UI",Arial,sans-serif}
:root[data-style-theme="forest"]{--primary:#2f7d4a;--bg:#f1f8f0;--panel:#fbfdf9;--text:#173b25;--muted:#64806c;--border:#cfe1cf;--incoming:#e0eee0;--incomingText:#173b25;--outgoing:#2f7d4a;--outgoingText:#fff;--input:#e8f2e7;--soft:#d9ebd8;--system:#e4f4e4;--systemText:#245f38;--wallpaper-overlay:rgba(247,252,245,.30);--bubble-radius-in:5px 18px 18px 18px;--bubble-radius-out:18px 5px 18px 18px;--composer-radius:8px;--control-radius:10px;--message-gap:6px;--theme-font:Verdana,Arial,sans-serif}
:root[data-style-theme="royal"]{--primary:#6d28d9;--bg:#f6f1ff;--panel:#fcfaff;--text:#30145e;--muted:#78649d;--border:#ddd0f5;--incoming:#ebe1fb;--incomingText:#30145e;--outgoing:#6d28d9;--outgoingText:#fff;--input:#eee6f8;--soft:#e7dafb;--system:#efe7ff;--systemText:#5520a5;--wallpaper-overlay:rgba(251,247,255,.22);--bubble-radius-in:16px 4px 16px 4px;--bubble-radius-out:4px 16px 4px 16px;--composer-radius:16px;--control-radius:4px;--message-gap:6px;--theme-font:Georgia,"Times New Roman",serif}
:root[data-style-theme="neon"]{--primary:#00a86b;--bg:#07130f;--panel:#0b1c16;--text:#e8fff5;--muted:#86bca5;--border:#174f39;--incoming:#123426;--incomingText:#e8fff5;--outgoing:#00a86b;--outgoingText:#001b10;--input:#102a20;--soft:#123d2d;--system:#12382a;--systemText:#8dffcb;--wallpaper-overlay:rgba(3,15,11,.38);--bubble-radius-in:2px 16px 2px 16px;--bubble-radius-out:16px 2px 16px 2px;--composer-radius:2px;--control-radius:2px;--message-gap:7px;--theme-font:"Trebuchet MS",Arial,sans-serif;color-scheme:dark}
:root[data-style-theme="minimal"]{--primary:#111827;--bg:#f7f7f7;--panel:#fff;--text:#111827;--muted:#6b7280;--border:#d1d5db;--incoming:#fff;--incomingText:#111827;--outgoing:#111827;--outgoingText:#fff;--input:#fff;--soft:#f1f1f1;--system:#f3f4f6;--systemText:#374151;--wallpaper-overlay:rgba(255,255,255,.55);--bubble-radius-in:0;--bubble-radius-out:0;--composer-radius:0;--control-radius:0;--message-gap:9px;--theme-font:Arial,Helvetica,sans-serif}
:root[data-style-theme="minimal"] .bubble{border:1px solid var(--border);box-shadow:none}
:root[data-style-theme="neon"] .bubble{box-shadow:0 0 10px color-mix(in srgb,var(--primary) 30%,transparent)}


/* 20260727f: align the fixed app with iOS VisualViewport while the keyboard is open */
.app-shell{top:var(--app-top)!important;height:var(--app-height)!important;bottom:auto!important}
@supports(-webkit-touch-callout:none){
  html,body{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important}
  .app-shell{position:fixed!important;left:0!important;right:0!important;top:var(--app-top)!important;height:var(--app-height)!important;bottom:auto!important}
}


/* 20260727j: stable media, true double-tap reactions, rich replies and link previews */
.reaction-arming .quick-reactions button{pointer-events:none!important}
.reply-preview{display:flex;align-items:center;gap:8px;min-height:42px;white-space:normal}
.reply-preview-thumb{width:42px;height:42px;flex:0 0 42px;object-fit:cover;border-radius:8px;background:#111}
.reply-preview-copy{display:flex;min-width:0;flex-direction:column;gap:2px;overflow:hidden}
.reply-preview-copy strong,.reply-preview-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reply-preview-copy strong{color:var(--text);font-size:12px}
.link-preview-host:empty{display:none}
.link-preview-card{display:flex;overflow:hidden;margin-top:8px;max-width:min(330px,72vw);border:1px solid var(--border);border-radius:13px;background:color-mix(in srgb,var(--panel) 92%,transparent);color:var(--text);text-decoration:none}
.link-preview-card>img{width:92px;min-height:78px;object-fit:cover;background:var(--input)}
.link-preview-copy{display:flex;min-width:0;flex:1;flex-direction:column;justify-content:center;gap:3px;padding:9px}
.link-preview-copy strong,.link-preview-copy span,.link-preview-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link-preview-description{color:var(--muted);font-size:12px}
.link-preview-copy small{color:var(--muted);font-size:11px}
.message-audio{display:block;min-width:min(290px,76vw);min-height:40px}


/* 20260727k: stable media rows, silent edge refresh and direct double-tap reaction */
.refresh-loader{display:none!important}
.message-text{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.video-attachment{display:grid;gap:5px;max-width:min(250px,68vw)}
.attachment-video{display:block;width:min(250px,68vw);max-width:100%;height:auto;min-height:132px;aspect-ratio:16/9;object-fit:contain;background:#111;border-radius:13px}
.attachment-video.metadata-ready{min-height:0}
.media-open-link{justify-self:end;color:inherit;font-size:11px;text-decoration:underline;padding:2px 3px}
.message-row.double-tap-reacted .bubble{animation:quickReactionPulse .34s ease}
@keyframes quickReactionPulse{0%,100%{transform:translateX(var(--swipe-x)) scale(1)}45%{transform:translateX(var(--swipe-x)) scale(1.045);filter:brightness(1.12)}}

/* 20260727n: final iOS viewport and repaint stabilization */
html,body{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
.app-shell{
  position:fixed!important;
  left:0!important;
  right:0!important;
  top:var(--app-top)!important;
  bottom:auto!important;
  width:100%!important;
  height:var(--app-height)!important;
  min-height:0!important;
  overflow:hidden!important;
  contain:none!important;
  transform:none!important;
}
.chat-view{min-height:0!important;overflow:hidden!important}
.message-list{
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  contain:none!important;
  isolation:auto!important;
  transform:none!important;
  -webkit-transform:none!important;
  backface-visibility:visible!important;
  will-change:auto!important;
  overflow-anchor:none!important;
}
.composer,.reply-bar,.typing-indicator,.recording-panel,.upload-queue{
  flex-shrink:0!important;
  transform:none!important;
}
@supports(-webkit-touch-callout:none){
  .message-list{-webkit-overflow-scrolling:touch!important}
  .composer textarea{font-size:16px!important}
}

/* 20260727n: stable mobile visual viewport and composer layout */
:root{--app-top:0px!important;--app-height:100dvh}
html,body{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
}
body{top:0!important}
.app-shell{
  position:absolute!important;
  inset:0!important;
  top:0!important;
  bottom:auto!important;
  width:100%!important;
  height:var(--app-height)!important;
  max-height:var(--app-height)!important;
  min-height:0!important;
  overflow:hidden!important;
}
.chat-view{height:100%!important;min-height:0!important;overflow:hidden!important}
.message-list{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scroll-behavior:auto!important;
  scrollbar-gutter:auto!important;
  overscroll-behavior-y:contain!important;
}
.composer,.reply-bar,.typing-indicator,.recording-panel,.upload-queue{position:relative!important;flex:0 0 auto!important}
@supports(height:100svh){:root{--app-height:100svh}}


/* 20260727o: iOS Home Screen keyboard visual-viewport correction */
html,body{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
}
body{top:0!important;left:0!important;right:0!important;bottom:0!important}
.app-shell{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:auto!important;
  top:var(--app-top)!important;
  height:var(--app-height)!important;
  max-height:var(--app-height)!important;
  min-height:0!important;
  overflow:hidden!important;
}
html.keyboard-open .composer{padding-bottom:7px!important}
html.keyboard-open .scroll-latest{bottom:72px!important}

/* First-launch name capture overlay */
.name-gate{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:24px;background:rgba(10,15,25,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.name-gate-card{width:100%;max-width:360px;background:#fff;color:#111;border-radius:20px;padding:26px 22px;display:flex;flex-direction:column;gap:12px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.name-gate-logo{width:76px;height:76px;border-radius:20px;margin:0 auto 4px;object-fit:cover}
.name-gate-title{margin:0;font-size:22px}
.name-gate-sub{margin:0 0 6px;color:#666;font-size:14px}
.name-gate-card input{padding:14px;border:1px solid #d9dbe3;border-radius:12px;font-size:16px;width:100%;background:#fff;color:#111}
.name-gate-card .primary-button{margin-top:6px}
@media (prefers-color-scheme:dark){.name-gate-card{background:#12151c;color:#f2f3f5}.name-gate-sub{color:#9aa3b2}.name-gate-card input{background:#1b1f28;border-color:#2a2f3a;color:#f2f3f5}}

/* One-time live-typing prompt */
.lt-prompt{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:24px;background:rgba(10,15,25,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.lt-prompt-card{width:100%;max-width:340px;background:#fff;color:#111;border-radius:20px;padding:24px 22px;display:flex;flex-direction:column;gap:10px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.lt-prompt-icon{font-size:40px;line-height:1}
.lt-prompt-title{margin:2px 0 0;font-size:20px}
.lt-prompt-sub{margin:0 0 8px;color:#666;font-size:14px}
.lt-later{border:0;background:transparent;color:#65676b;font-size:15px;padding:8px;cursor:pointer}
.lt-steps{margin:0 0 6px;padding:14px 16px 14px 34px;text-align:left;font-size:14px;line-height:1.55;background:rgba(0,132,255,.07);border:1px solid rgba(0,132,255,.18);border-radius:12px}
.lt-steps li{margin:3px 0}
@media (prefers-color-scheme:dark){.lt-prompt-card{background:#12151c;color:#f2f3f5}.lt-prompt-sub{color:#9aa3b2}.lt-later{color:#9aa3b2}.lt-steps{background:rgba(0,132,255,.12);border-color:rgba(0,132,255,.28)}}

.viewer-hd.active{background:var(--primary);color:#fff;font-weight:700}


/* 20260729p generated theme library (customer) */
:root[data-style-theme="sky"]{--primary:#0ea5e9;--bg:#ecf8fd;--panel:#ffffff;--text:#0b273c;--muted:#3484ae;--border:#cfedfb;--incoming:#def3fc;--incomingText:#0b273c;--outgoing:#0ea5e9;--outgoingText:#ffffff;--input:#f4fbfe;--soft:#cfedfb;--system:#def3fc;--systemText:#3484ae;--bubble-radius-in:20px 20px 20px 4px;--bubble-radius-out:20px 20px 4px 20px;--composer-radius:24px;--control-radius:14px;--message-gap:5px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="teal"]{--primary:#0d9488;--bg:#ecf6f5;--panel:#ffffff;--text:#0b242f;--muted:#347c7d;--border:#cfeae7;--incoming:#def1ef;--incomingText:#0b242f;--outgoing:#0d9488;--outgoingText:#ffffff;--input:#f4fafa;--soft:#cfeae7;--system:#def1ef;--systemText:#347c7d;--bubble-radius-in:22px;--bubble-radius-out:22px;--composer-radius:26px;--control-radius:20px;--message-gap:6px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="emerald"]{--primary:#059669;--bg:#ebf7f3;--panel:#ffffff;--text:#0a242a;--muted:#307d6e;--border:#cdeae1;--incoming:#ddf1eb;--incomingText:#0a242a;--outgoing:#059669;--outgoingText:#ffffff;--input:#f4faf8;--soft:#cdeae1;--system:#ddf1eb;--systemText:#307d6e;--bubble-radius-in:14px 14px 14px 3px;--bubble-radius-out:14px 14px 3px 14px;--composer-radius:12px;--control-radius:10px;--message-gap:4px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="lime"]{--primary:#65a30d;--bg:#f3f8ec;--panel:#ffffff;--text:#18261d;--muted:#608440;--border:#e0edcf;--incoming:#eaf3de;--incomingText:#18261d;--outgoing:#65a30d;--outgoingText:#ffffff;--input:#f8fbf4;--soft:#e0edcf;--system:#eaf3de;--systemText:#608440;--bubble-radius-in:20px 20px 20px 4px;--bubble-radius-out:20px 20px 4px 20px;--composer-radius:24px;--control-radius:14px;--message-gap:5px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="amber"]{--primary:#d97706;--bg:#fcf4eb;--panel:#ffffff;--text:#28201c;--muted:#9a6e3c;--border:#f7e4cd;--incoming:#faeddd;--incomingText:#28201c;--outgoing:#d97706;--outgoingText:#ffffff;--input:#fdf9f4;--soft:#f7e4cd;--system:#faeddd;--systemText:#9a6e3c;--bubble-radius-in:14px 14px 14px 3px;--bubble-radius-out:14px 14px 3px 14px;--composer-radius:12px;--control-radius:10px;--message-gap:4px;--theme-font:Georgia,"Times New Roman",serif;color-scheme:light}
:root[data-style-theme="coral"]{--primary:#fb6f51;--bg:#fff3f1;--panel:#ffffff;--text:#2d1f27;--muted:#ab6a62;--border:#fee2dc;--incoming:#feece8;--incomingText:#2d1f27;--outgoing:#fb6f51;--outgoingText:#ffffff;--input:#fff9f7;--soft:#fee2dc;--system:#feece8;--systemText:#ab6a62;--bubble-radius-in:22px;--bubble-radius-out:22px;--composer-radius:26px;--control-radius:20px;--message-gap:6px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="rose"]{--primary:#e11d48;--bg:#fdedf0;--panel:#ffffff;--text:#291426;--muted:#9e405d;--border:#f9d2da;--incoming:#fbe0e6;--incomingText:#291426;--outgoing:#e11d48;--outgoingText:#ffffff;--input:#fef5f7;--soft:#f9d2da;--system:#fbe0e6;--systemText:#9e405d;--bubble-radius-in:20px 20px 20px 4px;--bubble-radius-out:20px 20px 4px 20px;--composer-radius:24px;--control-radius:14px;--message-gap:5px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="bubblegum"]{--primary:#ec4899;--bg:#fdf0f7;--panel:#ffffff;--text:#2a1a31;--muted:#a45686;--border:#fbdaeb;--incoming:#fce6f1;--incomingText:#2a1a31;--outgoing:#ec4899;--outgoingText:#ffffff;--input:#fef7fa;--soft:#fbdaeb;--system:#fce6f1;--systemText:#a45686;--bubble-radius-in:22px;--bubble-radius-out:22px;--composer-radius:26px;--control-radius:20px;--message-gap:6px;--theme-font:"Trebuchet MS",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="lavender"]{--primary:#8b5cf6;--bg:#f6f2fe;--panel:#ffffff;--text:#1d1c3e;--muted:#7360b4;--border:#e8defd;--incoming:#efe9fe;--incomingText:#1d1c3e;--outgoing:#8b5cf6;--outgoingText:#ffffff;--input:#faf8ff;--soft:#e8defd;--system:#efe9fe;--systemText:#7360b4;--bubble-radius-in:20px 20px 20px 4px;--bubble-radius-out:20px 20px 4px 20px;--composer-radius:24px;--control-radius:14px;--message-gap:5px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="indigo"]{--primary:#4f46e5;--bg:#f1f0fd;--panel:#ffffff;--text:#15193c;--muted:#5555ac;--border:#dcdafa;--incoming:#e7e6fb;--incomingText:#15193c;--outgoing:#4f46e5;--outgoingText:#ffffff;--input:#f7f7fe;--soft:#dcdafa;--system:#e7e6fb;--systemText:#5555ac;--bubble-radius-in:20px 20px 20px 4px;--bubble-radius-out:20px 20px 4px 20px;--composer-radius:24px;--control-radius:14px;--message-gap:5px;--theme-font:Inter,system-ui,Arial,sans-serif;color-scheme:light}
:root[data-style-theme="sand"]{--primary:#b45309;--bg:#f9f1eb;--panel:#ffffff;--text:#231b1d;--muted:#885c3e;--border:#f0ddce;--incoming:#f5e8de;--incomingText:#231b1d;--outgoing:#b45309;--outgoingText:#ffffff;--input:#fcf7f4;--soft:#f0ddce;--system:#f5e8de;--systemText:#885c3e;--bubble-radius-in:14px 14px 14px 3px;--bubble-radius-out:14px 14px 3px 14px;--composer-radius:12px;--control-radius:10px;--message-gap:4px;--theme-font:Georgia,"Times New Roman",serif;color-scheme:light}
:root[data-style-theme="mint"]{--primary:#10b981;--bg:#ecf9f5;--panel:#ffffff;--text:#0c292e;--muted:#368e7a;--border:#cff1e6;--incoming:#dff6ee;--incomingText:#0c292e;--outgoing:#10b981;--outgoingText:#ffffff;--input:#f4fcf9;--soft:#cff1e6;--system:#dff6ee;--systemText:#368e7a;--bubble-radius-in:20px 20px 20px 4px;--bubble-radius-out:20px 20px 4px 20px;--composer-radius:24px;--control-radius:14px;--message-gap:5px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="cocoa"]{--primary:#7c5e48;--bg:#f5f2f0;--panel:#ffffff;--text:#1b1d26;--muted:#6c615d;--border:#e5dfda;--incoming:#ede9e6;--incomingText:#1b1d26;--outgoing:#7c5e48;--outgoingText:#ffffff;--input:#f9f8f7;--soft:#e5dfda;--system:#ede9e6;--systemText:#6c615d;--bubble-radius-in:14px 14px 14px 3px;--bubble-radius-out:14px 14px 3px 14px;--composer-radius:12px;--control-radius:10px;--message-gap:4px;--theme-font:Georgia,"Times New Roman",serif;color-scheme:light}
:root[data-style-theme="cherry"]{--primary:#dc2626;--bg:#fceeee;--panel:#ffffff;--text:#281521;--muted:#9c454c;--border:#f8d4d4;--incoming:#fae2e2;--incomingText:#281521;--outgoing:#dc2626;--outgoingText:#ffffff;--input:#fdf5f5;--soft:#f8d4d4;--system:#fae2e2;--systemText:#9c454c;--bubble-radius-in:7px;--bubble-radius-out:7px;--composer-radius:8px;--control-radius:6px;--message-gap:5px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="grape"]{--primary:#9333ea;--bg:#f6effd;--panel:#ffffff;--text:#1e173c;--muted:#774cae;--border:#e9d6fb;--incoming:#f0e3fc;--incomingText:#1e173c;--outgoing:#9333ea;--outgoingText:#ffffff;--input:#faf6fe;--soft:#e9d6fb;--system:#f0e3fc;--systemText:#774cae;--bubble-radius-in:22px;--bubble-radius-out:22px;--composer-radius:26px;--control-radius:20px;--message-gap:6px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="aqua"]{--primary:#06b6d4;--bg:#ebf9fc;--panel:#ffffff;--text:#0a2939;--muted:#308da3;--border:#cdf0f6;--incoming:#ddf5f9;--incomingText:#0a2939;--outgoing:#06b6d4;--outgoingText:#ffffff;--input:#f4fcfd;--soft:#cdf0f6;--system:#ddf5f9;--systemText:#308da3;--bubble-radius-in:20px 20px 20px 4px;--bubble-radius-out:20px 20px 4px 20px;--composer-radius:24px;--control-radius:14px;--message-gap:5px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="honey"]{--primary:#eab308;--bg:#fdf9eb;--panel:#ffffff;--text:#2a291d;--muted:#a28c3d;--border:#fbf0ce;--incoming:#fcf5de;--incomingText:#2a291d;--outgoing:#eab308;--outgoingText:#111827;--input:#fefcf4;--soft:#fbf0ce;--system:#fcf5de;--systemText:#a28c3d;--bubble-radius-in:14px 14px 14px 3px;--bubble-radius-out:14px 14px 3px 14px;--composer-radius:12px;--control-radius:10px;--message-gap:4px;--theme-font:"Trebuchet MS",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="flamingo"]{--primary:#f472b6;--bg:#fef4f9;--panel:#ffffff;--text:#2c1f35;--muted:#a86b94;--border:#fde3f0;--incoming:#feecf5;--incomingText:#2c1f35;--outgoing:#f472b6;--outgoingText:#111827;--input:#fff9fc;--soft:#fde3f0;--system:#feecf5;--systemText:#a86b94;--bubble-radius-in:22px;--bubble-radius-out:22px;--composer-radius:26px;--control-radius:20px;--message-gap:6px;--theme-font:"Trebuchet MS",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="steelblue"]{--primary:#3b6ea5;--bg:#eff3f8;--panel:#ffffff;--text:#121f33;--muted:#4b698c;--border:#d8e2ed;--incoming:#e5ebf3;--incomingText:#121f33;--outgoing:#3b6ea5;--outgoingText:#ffffff;--input:#f6f8fb;--soft:#d8e2ed;--system:#e5ebf3;--systemText:#4b698c;--bubble-radius-in:14px 14px 14px 3px;--bubble-radius-out:14px 14px 3px 14px;--composer-radius:12px;--control-radius:10px;--message-gap:4px;--theme-font:Inter,system-ui,Arial,sans-serif;color-scheme:light}
:root[data-style-theme="sage"]{--primary:#6b8e6b;--bg:#f3f6f3;--panel:#ffffff;--text:#18232a;--muted:#63796e;--border:#e1e8e1;--incoming:#ebf0eb;--incomingText:#18232a;--outgoing:#6b8e6b;--outgoingText:#ffffff;--input:#f8faf8;--soft:#e1e8e1;--system:#ebf0eb;--systemText:#63796e;--bubble-radius-in:7px;--bubble-radius-out:7px;--composer-radius:8px;--control-radius:6px;--message-gap:5px;--theme-font:Verdana,Geneva,sans-serif;color-scheme:light}
:root[data-style-theme="plum"]{--primary:#a21caf;--bg:#f8edf9;--panel:#ffffff;--text:#201334;--muted:#7e4090;--border:#ecd2ef;--incoming:#f2e0f4;--incomingText:#201334;--outgoing:#a21caf;--outgoingText:#ffffff;--input:#fbf5fb;--soft:#ecd2ef;--system:#f2e0f4;--systemText:#7e4090;--bubble-radius-in:20px 20px 20px 4px;--bubble-radius-out:20px 20px 4px 20px;--composer-radius:24px;--control-radius:14px;--message-gap:5px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="midnightblue"]{--primary:#6ea8ff;--bg:#151c2a;--panel:#222e42;--text:#e9ebf0;--muted:#8ea4c8;--border:#455c7e;--incoming:#34445d;--incomingText:#e9ebf0;--outgoing:#6ea8ff;--outgoingText:#111827;--input:#2a374e;--soft:#425c8c;--system:#34445d;--systemText:#8ea4c8;--bubble-radius-in:20px 20px 20px 4px;--bubble-radius-out:20px 20px 4px 20px;--composer-radius:24px;--control-radius:14px;--message-gap:5px;--theme-font:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color-scheme:dark}
:root[data-style-theme="graphitedark"]{--primary:#8ea2c4;--bg:#181c24;--panel:#272d3a;--text:#e9ebf0;--muted:#97a3b7;--border:#4f5a6c;--incoming:#3b4352;--incomingText:#e9ebf0;--outgoing:#8ea2c4;--outgoingText:#111827;--input:#2f3644;--soft:#4d5a77;--system:#3b4352;--systemText:#97a3b7;--bubble-radius-in:14px 14px 14px 3px;--bubble-radius-out:14px 14px 3px 14px;--composer-radius:12px;--control-radius:10px;--message-gap:4px;--theme-font:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color-scheme:dark}
:root[data-style-theme="neondark"]{--primary:#00e58a;--bg:#0a231e;--panel:#133631;--text:#e9ebf0;--muted:#6fb5a7;--border:#246e5b;--incoming:#1e5046;--incomingText:#e9ebf0;--outgoing:#00e58a;--outgoingText:#111827;--input:#18413b;--soft:#1c7164;--system:#1e5046;--systemText:#6fb5a7;--bubble-radius-in:7px;--bubble-radius-out:7px;--composer-radius:8px;--control-radius:6px;--message-gap:5px;--theme-font:"Trebuchet MS",Arial,sans-serif;color-scheme:dark}
:root[data-style-theme="cyber"]{--primary:#f000b8;--bg:#220c23;--panel:#351638;--text:#e9ebf0;--muted:#b275b4;--border:#6c2969;--incoming:#4e224f;--incomingText:#e9ebf0;--outgoing:#f000b8;--outgoingText:#ffffff;--input:#3f1d42;--soft:#6e2373;--system:#4e224f;--systemText:#b275b4;--bubble-radius-in:7px;--bubble-radius-out:7px;--composer-radius:8px;--control-radius:6px;--message-gap:5px;--theme-font:"Courier New",monospace;color-scheme:dark}
:root[data-style-theme="dracula"]{--primary:#bd93f9;--bg:#1d1a29;--panel:#2d2b41;--text:#e9ebf0;--muted:#a49fc6;--border:#5d557c;--incoming:#44405c;--incomingText:#e9ebf0;--outgoing:#bd93f9;--outgoingText:#111827;--input:#37344d;--soft:#5d5589;--system:#44405c;--systemText:#a49fc6;--bubble-radius-in:20px 20px 20px 4px;--bubble-radius-out:20px 20px 4px 20px;--composer-radius:24px;--control-radius:14px;--message-gap:5px;--theme-font:"Courier New",monospace;color-scheme:dark}
:root[data-style-theme="nord"]{--primary:#88c0d0;--bg:#181f25;--panel:#26313b;--text:#e9ebf0;--muted:#95abba;--border:#4d6370;--incoming:#3a4954;--incomingText:#e9ebf0;--outgoing:#88c0d0;--outgoingText:#111827;--input:#2e3b46;--soft:#4b647c;--system:#3a4954;--systemText:#95abba;--bubble-radius-in:14px 14px 14px 3px;--bubble-radius-out:14px 14px 3px 14px;--composer-radius:12px;--control-radius:10px;--message-gap:4px;--theme-font:Inter,system-ui,Arial,sans-serif;color-scheme:dark}
:root[data-style-theme="carbon"]{--primary:#94a3b8;--bg:#191c23;--panel:#282d38;--text:#e9ebf0;--muted:#98a3b4;--border:#515a69;--incoming:#3c434f;--incomingText:#e9ebf0;--outgoing:#94a3b8;--outgoingText:#111827;--input:#303742;--soft:#4f5a73;--system:#3c434f;--systemText:#98a3b4;--bubble-radius-in:7px;--bubble-radius-out:7px;--composer-radius:8px;--control-radius:6px;--message-gap:5px;--theme-font:Inter,system-ui,Arial,sans-serif;color-scheme:dark}
:root[data-style-theme="ember"]{--primary:#fb923c;--bg:#231a16;--panel:#362b26;--text:#e9ebf0;--muted:#b59e91;--border:#705544;--incoming:#514036;--incomingText:#e9ebf0;--outgoing:#fb923c;--outgoingText:#111827;--input:#41342f;--soft:#725549;--system:#514036;--systemText:#b59e91;--bubble-radius-in:14px 14px 14px 3px;--bubble-radius-out:14px 14px 3px 14px;--composer-radius:12px;--control-radius:10px;--message-gap:4px;--theme-font:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color-scheme:dark}
:root[data-style-theme="emeralddark"]{--primary:#34d399;--bg:#0f2120;--panel:#1a3434;--text:#e9ebf0;--muted:#7db0ab;--border:#346960;--incoming:#294d49;--incomingText:#e9ebf0;--outgoing:#34d399;--outgoingText:#111827;--input:#213e3d;--soft:#2e6b69;--system:#294d49;--systemText:#7db0ab;--bubble-radius-in:20px 20px 20px 4px;--bubble-radius-out:20px 20px 4px 20px;--composer-radius:24px;--control-radius:14px;--message-gap:5px;--theme-font:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color-scheme:dark}
:root[data-style-theme="golddark"]{--primary:#fbbf24;--bg:#231f14;--panel:#363123;--text:#e9ebf0;--muted:#b5ab8a;--border:#70633c;--incoming:#514932;--incomingText:#e9ebf0;--outgoing:#fbbf24;--outgoingText:#111827;--input:#413b2b;--soft:#726441;--system:#514932;--systemText:#b5ab8a;--bubble-radius-in:14px 14px 14px 3px;--bubble-radius-out:14px 14px 3px 14px;--composer-radius:12px;--control-radius:10px;--message-gap:4px;--theme-font:Georgia,"Times New Roman",serif;color-scheme:dark}
:root[data-style-theme="oceandark"]{--primary:#22d3ee;--bg:#0d2128;--panel:#18343f;--text:#e9ebf0;--muted:#78b0c3;--border:#2f6979;--incoming:#254d5a;--incomingText:#e9ebf0;--outgoing:#22d3ee;--outgoingText:#111827;--input:#1e3e4b;--soft:#286b86;--system:#254d5a;--systemText:#78b0c3;--bubble-radius-in:20px 20px 20px 4px;--bubble-radius-out:20px 20px 4px 20px;--composer-radius:24px;--control-radius:14px;--message-gap:5px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:dark}
:root[data-style-theme="violetdark"]{--primary:#a78bfa;--bg:#1b1a29;--panel:#2a2a41;--text:#e9ebf0;--muted:#9e9cc6;--border:#56537d;--incoming:#403e5c;--incomingText:#e9ebf0;--outgoing:#a78bfa;--outgoingText:#111827;--input:#33334d;--soft:#55528a;--system:#403e5c;--systemText:#9e9cc6;--bubble-radius-in:22px;--bubble-radius-out:22px;--composer-radius:26px;--control-radius:20px;--message-gap:6px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:dark}
:root[data-style-theme="matrix"]{--primary:#22c55e;--bg:#0d1f1a;--panel:#18322b;--text:#e9ebf0;--muted:#78ad9a;--border:#2f644e;--incoming:#254a3d;--incomingText:#e9ebf0;--outgoing:#22c55e;--outgoingText:#ffffff;--input:#1e3c34;--soft:#286655;--system:#254a3d;--systemText:#78ad9a;--bubble-radius-in:7px;--bubble-radius-out:7px;--composer-radius:8px;--control-radius:6px;--message-gap:5px;--theme-font:"Courier New",monospace;color-scheme:dark}
:root[data-style-theme="crimsondark"]{--primary:#fb7185;--bg:#23171e;--panel:#362631;--text:#e9ebf0;--muted:#b595a5;--border:#704b5a;--incoming:#513945;--incomingText:#e9ebf0;--outgoing:#fb7185;--outgoingText:#111827;--input:#412f3a;--soft:#724962;--system:#513945;--systemText:#b595a5;--bubble-radius-in:7px;--bubble-radius-out:7px;--composer-radius:8px;--control-radius:6px;--message-gap:5px;--theme-font:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color-scheme:dark}

/* 20260729p theme picker grid */
.theme-open-button{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;background:var(--input);border:1px solid var(--border);border-radius:10px;color:var(--text);cursor:pointer}
.theme-open-caret{color:var(--muted)}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;padding:14px;overflow:auto}
.theme-card{display:grid;gap:6px;padding:6px;border:1px solid var(--border);border-radius:12px;background:var(--panel);cursor:pointer}
.theme-card.active{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 45%,transparent)}
.theme-swatch{position:relative;display:block;height:56px;border-radius:9px;overflow:hidden;border:1px solid rgba(0,0,0,.08)}
.theme-swatch .tb-in{position:absolute;left:8px;top:11px;width:46%;height:13px;border-radius:8px}
.theme-swatch .tb-out{position:absolute;right:8px;top:30px;width:52%;height:13px;border-radius:8px}
.theme-swatch .tb-dot{position:absolute;right:7px;bottom:6px;width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.theme-card-name{font-size:11px;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}

/* 20260729o Messenger-style scroll-to-latest: centered pill-circle with a chevron */
.scroll-latest{left:50%;right:auto!important;transform:translateX(-50%);width:40px;height:40px;background:var(--panel);color:var(--primary);border:1px solid var(--border);box-shadow:0 4px 14px rgba(0,0,0,.20);font-size:0}
.scroll-latest::after{content:"";width:10px;height:10px;border-right:2.4px solid currentColor;border-bottom:2.4px solid currentColor;transform:rotate(45deg);margin-top:-3px}

/* new-message counter on the scroll-to-latest button */
.scroll-latest-count{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#fa3e3e;color:#fff;font-size:11px;font-weight:800;line-height:20px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.35);pointer-events:none}

/* Fill the full viewport when the keyboard is closed so the installed app
   (standalone WebView) never leaves a blank strip below the composer. Only
   applies while the keyboard is closed; when it opens (.keyboard-open) the
   JS-managed --app-height takes over so the composer still tracks the keyboard. */
:root:not(.keyboard-open) .app-shell{min-height:100vh!important;min-height:100dvh!important}
:root:not(.keyboard-open) body{min-height:100vh!important;min-height:100dvh!important}

/* Native Android app (Capacitor WebView): env(safe-area-inset-bottom) is always 0
   there, and since v1.0.10 the native shell no longer reserves the gesture-nav zone
   (the WebView draws under the transparent pill, like Messenger). Give the composer
   a touch more padding so the input clears the floating pill. Browsers/iOS keep the
   normal env()-based padding. */
:root.native-android .chat-view .composer{padding-bottom:14px!important}

/* ============================================================
   20260729w customer polish: beautiful menu, per-event sounds,
   realistic theme previews, game button, coming-soon dialog.
   ============================================================ */
:root{--fc-ez:cubic-bezier(.16,1,.3,1);--fc-pop:cubic-bezier(.34,1.56,.64,1)}
@keyframes fcSheetUp{from{opacity:.55;transform:translateY(46px)}to{opacity:1;transform:none}}
@keyframes fcItemIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fcPopCard{0%{opacity:0;transform:scale(.72)}60%{transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
@keyframes fcPop{0%{transform:scale(.3)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes fcSpin{to{transform:rotate(360deg)}}

/* ---- menu sheet ------------------------------------------------------ */
dialog.sheet[open]{animation:fcSheetUp .34s var(--fc-ez)}
dialog.sheet::backdrop{background:rgba(10,14,22,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
dialog.sheet header strong{font-size:19px;letter-spacing:.2px}
#settingsDialog{padding-bottom:18px}
#settingsDialog[open]>*:not(header){animation:fcItemIn .4s both var(--fc-ez)}
#settingsDialog[open]>*:nth-child(2){animation-delay:.03s}
#settingsDialog[open]>*:nth-child(3){animation-delay:.06s}
#settingsDialog[open]>*:nth-child(4){animation-delay:.09s}
#settingsDialog[open]>*:nth-child(5){animation-delay:.12s}
#settingsDialog[open]>*:nth-child(6){animation-delay:.15s}
#settingsDialog[open]>*:nth-child(7){animation-delay:.18s}
#settingsDialog[open]>*:nth-child(8){animation-delay:.21s}
#settingsDialog[open]>*:nth-child(9){animation-delay:.24s}
#settingsDialog[open]>*:nth-child(10){animation-delay:.27s}
#settingsDialog[open]>*:nth-child(n+11){animation-delay:.3s}
#settingsDialog .wide-button{display:flex;align-items:center;gap:11px;text-align:left;padding:13px 14px;border-radius:14px;border:1px solid var(--border);background:var(--panel);font-weight:600;transition:transform .18s var(--fc-ez),box-shadow .18s,border-color .18s,background-color .18s}
#settingsDialog .wide-button:hover{transform:translateX(3px);box-shadow:0 6px 18px rgba(0,0,0,.10);border-color:color-mix(in srgb,var(--primary) 45%,var(--border))}
#settingsDialog .wide-button:active{transform:scale(.98)}
#settingsDialog .wide-button::before{font-size:19px;line-height:1}
#profilePictureButton::before{content:"🖼️"}
#pinnedMessagesButton::before{content:"📌"}
#announcementsButton::before{content:"📢"}
#loginRegisterButton::before{content:"👤"}
#enableNotificationsButton::before{content:"🔔"}
#installButton::before{content:"📲"}
#devicesButton::before{content:"📱"}
#referralButton::before{content:"🔗"}
#backgroundButton::before{content:"🎨"}
#removeBackgroundButton::before{content:"🧹"}
#settingsDialog .toggle-row,#settingsDialog .theme-row,#settingsDialog .sound-row{border:1px solid var(--border);background:var(--panel);border-radius:14px;padding:12px 14px;transition:border-color .18s,box-shadow .18s}
#settingsDialog .toggle-row:hover,#settingsDialog .theme-row:hover,#settingsDialog .sound-row:hover{border-color:color-mix(in srgb,var(--primary) 40%,var(--border))}
/* animated switches */
#settingsDialog .toggle-row input[type=checkbox]{appearance:none;-webkit-appearance:none;width:46px;height:27px;border-radius:999px;background:color-mix(in srgb,var(--muted) 38%,var(--panel));border:0;position:relative;cursor:pointer;transition:background-color .22s var(--fc-ez);flex:none}
#settingsDialog .toggle-row input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.28);transition:transform .22s var(--fc-pop)}
#settingsDialog .toggle-row input[type=checkbox]:checked{background:var(--primary)}
#settingsDialog .toggle-row input[type=checkbox]:checked::after{transform:translateX(19px)}

/* ---- per-event sound settings --------------------------------------- */
.sound-settings{display:grid;gap:8px;margin:2px 0 4px;padding:10px 10px 12px;border-radius:14px;border:1px dashed color-mix(in srgb,var(--primary) 35%,var(--border));background:color-mix(in srgb,var(--primary) 5%,var(--panel));transition:opacity .25s}
.sound-settings.sound-settings-muted{opacity:.45;pointer-events:none}
.sound-settings .sound-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px!important}
.sound-settings .sound-row span{font-size:14px;font-weight:600}
.sound-settings select{min-width:118px;padding:7px 9px;border-radius:10px;font-size:13.5px}
.sound-hint{color:var(--muted);font-size:12px;text-align:center}

/* ---- realistic theme previews ---------------------------------------- */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:12px;padding:14px 16px 20px}
.theme-card{position:relative;border:2px solid transparent;border-radius:16px;padding:4px;background:transparent;cursor:pointer;animation:fcItemIn .45s both var(--fc-ez);animation-delay:var(--tp-delay,0ms)}
.theme-card .theme-preview{display:block;position:relative;height:150px;border-radius:12px;overflow:hidden;background:var(--tp-bg);box-shadow:0 2px 10px rgba(0,0,0,.14);transition:transform .22s var(--fc-ez),box-shadow .22s}
.theme-card:hover .theme-preview{transform:translateY(-3px) scale(1.03);box-shadow:0 10px 24px rgba(0,0,0,.22)}
.theme-card:active .theme-preview{transform:scale(.97)}
.tp-header{position:absolute;top:0;left:0;right:0;height:27px;display:flex;align-items:center;gap:5px;padding:0 7px;background:color-mix(in srgb,var(--tp-bg),#fff 60%);border-bottom:1px solid rgba(0,0,0,.06)}
.theme-card[data-scheme="dark"] .tp-header{background:color-mix(in srgb,var(--tp-bg),#fff 9%);border-bottom-color:rgba(255,255,255,.08)}
.tp-avatar{width:15px;height:15px;border-radius:50%;background:var(--tp-primary);flex:none}
.tp-title{display:flex;flex-direction:column;gap:3px;flex:1}
.tp-line{display:block;height:4px;border-radius:99px;background:rgba(0,0,0,.30);width:100%}
.theme-card[data-scheme="dark"] .tp-line{background:rgba(255,255,255,.5)}
.tp-name{width:36px}
.tp-status{width:22px;height:3px;opacity:.5}
.tp-body{position:absolute;top:32px;left:7px;right:7px;display:flex;flex-direction:column;gap:5px}
.tp-bubble{display:flex;flex-direction:column;gap:3px;padding:5px 7px;border-radius:9px}
.tp-bubble.tp-in{align-self:flex-start;background:var(--tp-in);border-bottom-left-radius:3px}
.tp-bubble.tp-out{align-self:flex-end;background:var(--tp-out);border-bottom-right-radius:3px}
.tp-bubble.tp-out .tp-line{background:rgba(255,255,255,.8)}
.tp-bubble.tp-in .tp-line{background:rgba(0,0,0,.32)}
.theme-card[data-scheme="dark"] .tp-bubble.tp-in .tp-line{background:rgba(255,255,255,.55)}
.tp-short{width:55%}
.tp-w60{width:62%}.tp-w45{width:46%}.tp-w35{width:36%}.tp-w55{width:56%}
.tp-composer{position:absolute;bottom:6px;left:7px;right:7px;display:flex;align-items:center;gap:4px}
.tp-input{flex:1;height:13px;border-radius:99px;background:color-mix(in srgb,var(--tp-bg),#fff 62%);border:1px solid rgba(0,0,0,.09)}
.theme-card[data-scheme="dark"] .tp-input{background:color-mix(in srgb,var(--tp-bg),#fff 12%);border-color:rgba(255,255,255,.12)}
.tp-send{width:13px;height:13px;border-radius:50%;background:var(--tp-primary);flex:none}
.tp-check{position:absolute;top:6px;right:6px;width:19px;height:19px;border-radius:50%;background:var(--tp-primary);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;box-shadow:0 2px 7px rgba(0,0,0,.3);opacity:0;transform:scale(.3);transition:opacity .2s,transform .25s var(--fc-pop)}
.theme-card.active{border-color:var(--tp-primary)}
.theme-card.active .tp-check{opacity:1;transform:scale(1)}
.theme-card-name{display:block;text-align:center;font-size:11.5px;font-weight:600;margin-top:6px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- game (joystick) button with rotating light ----------------------- */
.game-button{position:relative;overflow:visible;width:34px}
.game-glow{position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(from 0deg,#ff5f6d,#ffc371,#47e891,#24c6dc,#7f7fd5,#c86dd7,#ff5f6d);animation:fcSpin 2.6s linear infinite;filter:blur(4px) saturate(1.5);opacity:.9;z-index:0;pointer-events:none}
.game-button::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--panel);z-index:1;pointer-events:none}
.game-emoji{position:relative;z-index:2;font-size:18px;line-height:1;transition:transform .15s var(--fc-pop)}
.game-button:active .game-emoji{transform:scale(.85)}

/* ---- coming soon dialog ---------------------------------------------- */
.coming-soon-dialog{border:0;padding:0;background:transparent;max-width:min(340px,calc(100vw - 44px));margin:auto;overflow:visible}
.coming-soon-dialog::backdrop{background:rgba(10,14,22,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.coming-soon-dialog[open] .coming-soon-card{animation:fcPopCard .34s var(--fc-pop)}
.coming-soon-card{position:relative;background:var(--panel);color:var(--text);border-radius:24px;padding:26px 22px 20px;text-align:center;box-shadow:0 18px 55px rgba(0,0,0,.4)}
.coming-soon-icon{position:relative;isolation:isolate;display:inline-grid;place-items:center;width:78px;height:78px;font-size:40px;margin-bottom:6px}
.coming-soon-halo{position:absolute;inset:4px;border-radius:50%;background:conic-gradient(from 0deg,#ff5f6d,#ffc371,#47e891,#24c6dc,#7f7fd5,#c86dd7,#ff5f6d);animation:fcSpin 3s linear infinite;filter:blur(11px);opacity:.75;z-index:-1}
.coming-soon-card h3{margin:.15em 0 .45em;font-size:22px;font-weight:800}
.coming-soon-card p{margin:0 0 18px;color:var(--muted);font-size:14.5px;line-height:1.5}
.coming-soon-card .primary-button{width:100%;min-height:46px;border-radius:13px;font-weight:700;font-size:16px}

@media(prefers-reduced-motion:reduce){
  dialog.sheet[open],#settingsDialog[open]>*,.theme-card,.coming-soon-dialog[open] .coming-soon-card{animation:none!important}
  .game-glow,.coming-soon-halo{animation:none!important}
}

/* ============================================================
   20260729x customer round 2: header pin/game, search-in-menu,
   attach menu under +, emoji inside input, bigger icons,
   reaction picker / info, smoother swipe-reply cue.
   ============================================================ */

/* ---- header: game + pin ---------------------------------------------- */
.chat-header .header-emoji-button{font-size:20px;line-height:1}
.chat-header .game-button{overflow:visible;width:40px;height:40px}
.chat-header .game-glow{inset:1px}
.chat-header .game-button::after{inset:5px}
.chat-header .game-emoji{font-size:20px}

/* ---- search inside the menu header ----------------------------------- */
.menu-search-button{margin-left:auto;border:0;background:transparent;width:40px;height:40px;min-height:40px;padding:0;display:grid;place-items:center;color:var(--text);border-radius:12px;cursor:pointer}
.menu-search-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.menu-search-button:active{transform:scale(.9)}

/* ---- composer: fewer, BIGGER controls -------------------------------- */
.composer{gap:4px;padding-left:6px;padding-right:6px}
.composer>.composer-button{width:41px;height:42px;min-height:42px}
.composer>.composer-button svg{width:26px;height:26px}
.composer-input-wrap{position:relative;flex:1;display:flex;min-width:0}
.composer-input-wrap textarea{width:100%;flex:1;padding-right:44px}
.emoji-in-input{position:absolute;right:3px;bottom:2px;width:35px;height:35px;min-height:35px;z-index:2}
.emoji-in-input svg{width:24px;height:24px}
.send-button{width:44px;height:44px;min-height:44px}
.send-button svg{width:25px;height:25px}
.thumb-emoji{font-size:30px;line-height:1;display:block;transform:translateY(-1px)}
.send-button.like-mode{background:transparent;border:0;box-shadow:none}

/* ---- attach menu (Camera / Photos / Files under +) -------------------- */
.attach-menu{position:absolute;left:8px;bottom:64px;z-index:32;display:flex;flex-direction:column;gap:2px;padding:7px;border-radius:18px;background:var(--panel);border:1px solid var(--border);box-shadow:0 12px 34px rgba(0,0,0,.28);transform-origin:bottom left;animation:fcPopCard .22s var(--fc-pop)}
.attach-menu.hidden{display:none}
.attach-option{display:flex;align-items:center;gap:11px;border:0;background:transparent;padding:11px 16px 11px 12px;border-radius:12px;font-size:15.5px;font-weight:600;color:var(--text);cursor:pointer;min-height:44px}
.attach-option:hover{background:var(--soft)}
.attach-option:active{transform:scale(.97)}
.attach-emoji{font-size:22px;line-height:1}

/* ---- quick reactions "+" and reaction chips --------------------------- */
.quick-reactions .more-reactions{font-size:24px;font-weight:700;color:var(--primary);background:var(--soft);border-radius:50%;border:0;width:40px;height:40px;min-height:40px;display:grid;place-items:center;line-height:1}
.quick-reactions .more-reactions:active{transform:scale(.88)}
.reaction-chip.reaction-add{font-size:12.5px;font-weight:700;letter-spacing:-1px;opacity:.85}

/* ---- full reaction picker + who-reacted list -------------------------- */
.reaction-picker-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:10px 14px 18px;overflow:auto}
.reaction-picker-grid button{border:0;background:transparent;font-size:24px;padding:7px 0;border-radius:10px;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.reaction-picker-grid button:active{transform:scale(1.25)}
.reaction-info-list{padding:4px 0 14px}
.reaction-info-row{display:flex;align-items:center;gap:13px;padding:11px 18px;border-bottom:1px solid var(--border)}
.reaction-info-row:last-child{border-bottom:0}
.reaction-info-emoji{font-size:27px;line-height:1}
.reaction-info-copy{display:flex;flex-direction:column;gap:2px}
.reaction-info-copy strong{font-size:15px}
.reaction-info-copy small{color:var(--muted);font-size:12.5px}

/* ---- smoother swipe-reply cue ----------------------------------------- */
.swipe-reply-cue{width:36px;height:36px;font-size:19px;background:var(--panel);border:1px solid var(--border);box-shadow:0 4px 12px rgba(0,0,0,.18);color:var(--primary);transition:opacity .16s var(--fc-ez),transform .16s var(--fc-ez)}

/* ============================================================
   20260729y round 3: one-row quick reactions + double-tap row,
   text-size zoom levels, header never collapses.
   ============================================================ */

/* ---- quick reactions: single row + double-tap chooser row ------------- */
.quick-reactions{display:flex;flex-direction:column;gap:8px}
.qr-row{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.dt-choose-row{display:flex;align-items:center;gap:5px;padding:7px 9px;border-radius:13px;background:var(--soft)}
.dt-choose-label{font-size:12px;font-weight:700;color:var(--muted);flex:none;margin-right:2px}
.quick-reactions .dt-choice{border:2px solid transparent;background:transparent;font-size:19px;width:34px;height:34px;min-height:34px;aspect-ratio:auto;border-radius:50%;display:grid;place-items:center;padding:0;line-height:1}
.quick-reactions .dt-choice.dt-active{border-color:var(--primary);background:var(--panel);box-shadow:0 1px 5px rgba(0,0,0,.15)}
.quick-reactions .dt-choice:active{transform:scale(.85)}

/* ---- text size (zoom) levels ------------------------------------------ */
:root{--fzoom:1}
:root[data-fzoom="1"]{--fzoom:.88}
:root[data-fzoom="2"]{--fzoom:1}
:root[data-fzoom="3"]{--fzoom:1.15}
:root[data-fzoom="4"]{--fzoom:1.32}
.message-list .bubble{font-size:calc(15px*var(--fzoom))}
.composer textarea{font-size:calc(16px*var(--fzoom))}
.typing-indicator,.reply-preview{font-size:calc(13px*var(--fzoom))}
.zoom-row{display:flex;align-items:center;justify-content:space-between}
.zoom-controls{display:flex;align-items:center;gap:12px}
.zoom-controls button{width:36px;height:36px;min-height:36px;border-radius:50%;border:1px solid var(--border);background:var(--soft);font-size:21px;font-weight:700;color:var(--primary);display:grid;place-items:center;line-height:1;padding:0}
.zoom-controls button:disabled{opacity:.35}
.zoom-controls button:active:not(:disabled){transform:scale(.88)}
#zoomLevelLabel{min-width:18px;text-align:center;font-weight:800;font-size:16px}

/* ---- header must never wrap/collapse ----------------------------------- */
.chat-header{flex-wrap:nowrap}
.chat-header>.icon-button{flex:0 0 auto}
.brand-copy{min-width:0}
.brand-copy strong{flex-wrap:nowrap;min-width:0}
#brandName{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;display:block}
.verified-badge{flex:0 0 17px}
@media(max-width:430px){
  .chat-header{gap:6px}
  .chat-header .icon-button{width:36px;height:36px}
  .chat-header .game-button{width:36px;height:36px}
  .chat-header .header-emoji-button{font-size:18px}
  .chat-header .game-emoji{font-size:18px}
  .brand-copy strong{font-size:17px}
}

/* ============================================================
   20260729z round 4: slim Menu (search bar + 4 items), Settings
   sub-sheet with collapsible groups, composer gap + keyboard
   collapse behind the chevron.
   ============================================================ */

/* ---- menu search bar (long input-style row) --------------------------- */
.menu-search-bar{display:flex;align-items:center;gap:10px;width:calc(100% - 32px);padding:13px 16px;border-radius:999px;border:1px solid var(--border);background:var(--input);color:var(--muted);font-size:15.5px;font-weight:500;cursor:pointer;text-align:left;transition:border-color .18s,box-shadow .18s}
.menu-search-bar svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.menu-search-bar:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--border))}
.menu-search-bar:active{transform:scale(.98)}

/* ---- settings sub-sheet shares the menu look --------------------------- */
#preferencesDialog{padding-bottom:18px}
#preferencesDialog[open]>*:not(header){animation:fcItemIn .4s both var(--fc-ez)}
#preferencesDialog[open]>*:nth-child(2){animation-delay:.03s}
#preferencesDialog[open]>*:nth-child(3){animation-delay:.06s}
#preferencesDialog[open]>*:nth-child(4){animation-delay:.09s}
#preferencesDialog[open]>*:nth-child(5){animation-delay:.12s}
#preferencesDialog[open]>*:nth-child(6){animation-delay:.15s}
#preferencesDialog[open]>*:nth-child(n+7){animation-delay:.18s}
#preferencesDialog .wide-button{display:flex;align-items:center;gap:11px;text-align:left;padding:13px 14px;border-radius:14px;border:1px solid var(--border);background:var(--panel);font-weight:600;transition:transform .18s var(--fc-ez),box-shadow .18s,border-color .18s}
#preferencesDialog .wide-button:hover{transform:translateX(3px);box-shadow:0 6px 18px rgba(0,0,0,.10);border-color:color-mix(in srgb,var(--primary) 45%,var(--border))}
#preferencesDialog .wide-button:active{transform:scale(.98)}
#preferencesDialog .wide-button::before{font-size:19px;line-height:1}
#preferencesDialog .toggle-row,#preferencesDialog .theme-row,#preferencesDialog .sound-row{border:1px solid var(--border);background:var(--panel);border-radius:14px;padding:12px 14px}
#openSettingsButton::before{content:"⚙️"}
#editProfileButton::before{content:"👤"}
#soundSettingsToggle::before{content:"🔔"}
#themeSettingsToggle::before{content:"🎨"}
.group-caret{margin-left:auto;color:var(--muted);transition:transform .22s var(--fc-ez)}
.group-toggle.group-open .group-caret{transform:rotate(180deg)}
.theme-settings{display:grid;gap:8px;margin:2px 0 4px;padding:10px;border-radius:14px;border:1px dashed color-mix(in srgb,var(--primary) 35%,var(--border));background:color-mix(in srgb,var(--primary) 5%,var(--panel))}

/* ---- composer: tighter gap + keyboard collapse ------------------------- */
.composer{gap:2px}
.composer>.composer-button{width:38px}
#composerExpandButton{display:none;color:var(--primary)}
#composerExpandButton svg{stroke-width:2.6}
.composer.composer-collapsed #fileButton,.composer.composer-collapsed #voiceButton{display:none}
.composer.composer-collapsed #composerExpandButton{display:grid;animation:fcPop .22s var(--fc-pop)}

/* 20260729aa fixes: settings options need air below the header */
#preferencesDialog header{margin-bottom:14px}
#settingsDialog header{margin-bottom:6px}

/* OTP inline error (toasts are invisible under modal sheets) */
.otp-error{color:#d92d20;font-size:13.5px;font-weight:600;margin:0;animation:fcItemIn .25s var(--fc-ez)}
.otp-note{margin:0;font-size:13px;line-height:1.45;color:var(--muted,#65676b);background:rgba(0,132,255,.08);border:1px solid rgba(0,132,255,.2);border-radius:10px;padding:9px 11px}

/* ---- games: wallet, game list, amount sheet --------------------------- */
.game-hub{display:flex;flex-direction:column;gap:16px;padding:16px}
.game-wallet{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 16px;border-radius:18px;
  background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 60%,#000));color:#fff}
.game-wallet span{font-size:13px;opacity:.85;letter-spacing:.04em;text-transform:uppercase}
.game-wallet strong{font-size:34px;font-weight:800;letter-spacing:-.02em}
.game-hub-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.game-hub-actions .primary-button{width:100%}
.primary-button.ghost{background:var(--soft);color:var(--text)}
.game-hint{margin:0;color:var(--muted);font-size:13px;line-height:1.5;text-align:center}
.game-list{display:flex;flex-direction:column;gap:8px;padding:12px 14px 20px}
.game-row{display:flex;align-items:center;gap:12px;width:100%;padding:14px;border:1px solid var(--border);
  border-radius:16px;background:var(--panel);color:var(--text);text-align:left;cursor:pointer}
.game-row:disabled{opacity:.55;cursor:not-allowed}
.game-row-icon{font-size:24px;line-height:1}
.game-row-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.game-row-main strong{font-size:15px}
.game-row-main small{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-row-balance{font-weight:700;font-size:15px;white-space:nowrap}
.game-row-balance.loading{opacity:.5;animation:fcPulse 1s ease-in-out infinite}
@keyframes fcPulse{50%{opacity:.15}}
.game-result{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 18px;text-align:center}
.game-result-icon{font-size:42px}
.game-result h3{margin:0;font-size:19px}
.game-result p{margin:0;font-size:14.5px}
.game-result .primary-button{margin-top:8px;min-width:140px}

/* ---- games: extra links, hot badge, copy rows, history ---------------- */
.game-hub-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.game-link{flex:1 1 auto;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--panel);
  color:var(--text);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.game-hot{margin-left:6px;font-size:13px}
.copy-row{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border-radius:12px;background:var(--soft)}
.copy-label{color:var(--muted);font-size:12px;min-width:74px;text-align:left}
.copy-row code{flex:1;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.copy-button{padding:6px 12px;border-radius:9px;border:1px solid var(--border);background:var(--panel);color:var(--primary);
  font-size:12.5px;font-weight:700;cursor:pointer}
.copy-button.copied{color:#15803d;border-color:#15803d}
.game-history{display:flex;flex-direction:column;gap:6px;padding:12px 14px 20px}
.history-row{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--border);border-radius:14px}
.history-row.pending{border-style:dashed;opacity:.85}
.history-row.voided{opacity:.5}
.history-row.voided .history-amount,.history-row.voided .history-main strong{text-decoration:line-through}
.history-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.history-main strong{font-size:14px}
.history-main small{color:var(--muted);font-size:11.5px}
.history-amount{font-weight:800;font-size:14.5px;white-space:nowrap}
.history-amount.in{color:#15803d}
.history-amount.out{color:#b42318}

/* ---- offline notice (cached conversation still readable) -------------- */
.offline-banner{flex:0 0 auto;margin:0;padding:8px 14px;background:#b45309;color:#fff;font-size:12.5px;
  font-weight:600;text-align:center}

/* ---- unsent messages + delete sheet ----------------------------------- */
.message-row.pending-message .bubble{opacity:.72}
.message-row.pending-message .message-meta{font-style:italic;opacity:.85}
.action-sheet .danger-action{color:#d92d20;font-weight:700}
.delete-note{margin:0;padding:14px 16px 6px;color:var(--muted);font-size:13px;line-height:1.45;text-align:center}
.game-row-icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px}
.game-row-logo{max-width:100%;max-height:100%;object-fit:contain}

/* ---- hot game: the whole card is decorated, not just the emoji -------- */
.game-row-hot{
  position:relative;overflow:hidden;border:1.5px solid transparent;
  /* Gradient ring: panel fill on padding-box, warm gradient on border-box. */
  background:linear-gradient(var(--panel),var(--panel)) padding-box,
             linear-gradient(120deg,#f59e0b,#ef4444,#f59e0b) border-box;
  box-shadow:0 4px 18px rgba(239,68,68,.18)
}
.game-row-hot::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(120deg,rgba(245,158,11,.10),rgba(239,68,68,.06) 60%,transparent)
}
/* Slow sheen sweeping across, so it reads as "featured" without shouting. */
.game-row-hot::after{
  content:"";position:absolute;top:0;bottom:0;width:45%;pointer-events:none;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.30),transparent);
  transform:translateX(-260%);animation:fcHotSheen 4.5s ease-in-out infinite
}
@keyframes fcHotSheen{0%,72%{transform:translateX(-260%)}100%{transform:translateX(320%)}}
.game-row-hot .game-row-main,.game-row-hot .game-row-icon,.game-row-hot .game-row-balance{position:relative;z-index:1}
.game-row-hot .game-row-balance{color:#b45309;font-weight:800}
.game-hot{margin-left:6px;font-size:13px;filter:drop-shadow(0 0 4px rgba(245,158,11,.7))}
.game-hot-chip{
  display:inline-block;margin-right:6px;padding:1px 7px;border-radius:999px;
  background:linear-gradient(120deg,#f59e0b,#ef4444);color:#fff;
  font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase
}
@media (prefers-reduced-motion:reduce){.game-row-hot::after{display:none}}

/* ---- cuter emojis: depth, shine, springy pop ------------------------- */
.quick-reactions button,
.reaction-picker-grid button,
.emoji-picker button,
.reaction-info-emoji{
  /* dark shadow below for depth + a soft white rim on top = shine */
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.30)) drop-shadow(0 -1px .5px rgba(255,255,255,.45));
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),filter .2s ease;
}
/* glossy reaction buttons (leave the "+" and double-tap picker alone) */
.quick-reactions button:not(.more-reactions):not(.dt-choice){
  background:radial-gradient(circle at 32% 24%,color-mix(in srgb,var(--input) 80%,#fff),var(--input));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 2px 5px rgba(0,0,0,.15);
}
.quick-reactions button:hover,
.reaction-picker-grid button:hover,
.emoji-picker button:hover{
  transform:scale(1.16) rotate(-4deg);
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.34)) drop-shadow(0 -1px 1px rgba(255,255,255,.55));
}
.quick-reactions button:active,
.reaction-picker-grid button:active,
.emoji-picker button:active{transform:scale(1.3) rotate(3deg)}
/* the full picker greets you with a cheerful pop */
@keyframes fcEmojiPop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.reaction-picker-grid button{animation:fcEmojiPop .3s cubic-bezier(.34,1.56,.64,1) both}
/* reactions resting on a bubble keep a little lift */
.reaction-chip{filter:drop-shadow(0 1.5px 2px rgba(0,0,0,.2))}
@media(prefers-reduced-motion:reduce){
  .reaction-picker-grid button{animation:none}
  .quick-reactions button,.reaction-picker-grid button,.emoji-picker button{transition:none}
}

/* ---- game transfer loading spinner ----------------------------------- */
.game-spinner{width:46px;height:46px;margin:6px auto 4px;border-radius:50%;
  border:4px solid color-mix(in srgb,var(--primary) 22%,transparent);
  border-top-color:var(--primary);animation:fcSpin .9s linear infinite}
@keyframes fcSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.game-spinner{animation-duration:2s}}

/* ---- deposit/withdraw amount row + "All" button ---------------------- */
.amount-row{display:flex;gap:8px;align-items:stretch}
.amount-row #gameAmountInput{flex:1}
.amount-max{flex:0 0 auto;padding:0 16px;border:1px solid var(--primary);border-radius:12px;
  background:var(--soft);color:var(--primary);font-weight:800;font-size:13px;cursor:pointer;white-space:nowrap}
.amount-max:active{transform:scale(.94)}

/* ---- choosing between accounts that share a phone number ------------- */
.account-choice{display:flex;align-items:center;gap:12px;width:100%;padding:11px 13px;margin-top:8px;
  border:1px solid var(--border);border-radius:14px;background:var(--panel);color:var(--text);
  text-align:left;cursor:pointer}
.account-choice:active{transform:scale(.985)}
.account-choice-avatar{position:relative;flex:0 0 42px;width:42px;height:42px;border-radius:50%;
  overflow:hidden;display:grid;place-items:center;background:var(--soft);color:var(--muted);
  font-weight:800;font-size:17px}
.account-choice-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.account-choice-name{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- formatted staff messages ------------------------------------------ */
.bubble.bubble-custom{border:1px solid rgba(0,0,0,.08)}
.rich-highlight{padding:0 4px;border-radius:5px}
.copy-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;margin:0 1px;padding:2px 8px;
  border-radius:8px;border:1px solid rgba(0,0,0,.12);background:rgba(0,0,0,.06);color:inherit;
  font:inherit;font-weight:600;line-height:1.35;cursor:pointer;vertical-align:baseline;
  transition:background .18s ease,transform .18s ease}
.copy-chip span{overflow-wrap:anywhere}
.copy-chip i{font-style:normal;font-size:.9em;opacity:.7}
.copy-chip:hover{background:rgba(0,0,0,.1)}
.copy-chip:active{transform:scale(.97)}
.copy-chip.copied{background:rgba(22,163,74,.16);border-color:rgba(22,163,74,.4)}
.copy-chip.copied i{opacity:1;color:#16a34a}
@media(prefers-color-scheme:dark){.copy-chip{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}
  .copy-chip:hover{background:rgba(255,255,255,.18)}}
.rich-button{display:block;margin:8px 0 2px;padding:11px 14px;border-radius:12px;background:var(--primary,#0084ff);
  color:#fff!important;font-weight:700;text-align:center;text-decoration:none!important;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.6);transition:transform .18s ease,filter .18s ease}
.rich-button:hover{transform:translateY(-1px);filter:brightness(1.06)}
.rich-button:active{transform:translateY(0)}

/* ---- animated emoji ----------------------------------------------------
   Ordinary glyphs animated with CSS: nothing to download, works offline,
   stays sharp at any size. Motion is disabled for anyone who asks for that. */
.fc-gif{display:inline-block;font-style:normal;line-height:1;vertical-align:-.12em;will-change:transform}
.fc-gif-loading{animation:fcgSpin 1.6s linear infinite}
.fc-gif-spinner{animation:fcgSpin 1s linear infinite}
.fc-gif-clock{animation:fcgSpin 2.4s steps(8) infinite}
.fc-gif-hourglass{animation:fcgFlip 2s ease-in-out infinite}
.fc-gif-check{animation:fcgPop 1.8s ease-out infinite}
.fc-gif-cross{animation:fcgShake .9s ease-in-out infinite}
.fc-gif-warning{animation:fcgBlink 1.1s ease-in-out infinite}
.fc-gif-bell{animation:fcgRing 1.6s ease-in-out infinite;transform-origin:50% 0}
.fc-gif-fire{animation:fcgFlicker .55s ease-in-out infinite alternate}
.fc-gif-money{animation:fcgBounce 1s ease-in-out infinite}
.fc-gif-party{animation:fcgShake 1.2s ease-in-out infinite}
.fc-gif-star{animation:fcgTwinkle 1.4s ease-in-out infinite}
.fc-gif-heart{animation:fcgBeat .9s ease-in-out infinite}
.fc-gif-wave{animation:fcgWave 1.1s ease-in-out infinite;transform-origin:70% 80%}
.fc-gif-thumbsup{animation:fcgPop 1.5s ease-out infinite}
.fc-gif-rocket{animation:fcgRise 1.6s ease-in-out infinite}
.fc-gif-gift{animation:fcgShake 1.6s ease-in-out infinite}
.fc-gif-crown{animation:fcgTwinkle 1.8s ease-in-out infinite}
.fc-gif-dice{animation:fcgSpin 1.4s ease-in-out infinite}
.fc-gif-gem{animation:fcgTwinkle 1.2s ease-in-out infinite}
@keyframes fcgSpin{to{transform:rotate(360deg)}}
@keyframes fcgFlip{0%,45%{transform:rotate(0)}55%,100%{transform:rotate(180deg)}}
@keyframes fcgPop{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.28)}}
@keyframes fcgShake{0%,100%{transform:rotate(0)}25%{transform:rotate(11deg)}75%{transform:rotate(-11deg)}}
@keyframes fcgBlink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes fcgRing{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(14deg)}85%{transform:rotate(-14deg)}}
@keyframes fcgFlicker{from{transform:scale(1) translateY(0);filter:brightness(1)}to{transform:scale(1.13) translateY(-1px);filter:brightness(1.25)}}
@keyframes fcgBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes fcgTwinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(1.22) rotate(18deg);opacity:.75}}
@keyframes fcgBeat{0%,100%{transform:scale(1)}30%{transform:scale(1.24)}45%{transform:scale(1.05)}}
@keyframes fcgWave{0%,100%{transform:rotate(0)}30%{transform:rotate(22deg)}60%{transform:rotate(-12deg)}}
@keyframes fcgRise{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-8deg)}}
/* These are CONTENT — a staff member inserts one the way they would a GIF,
   and a GIF plays regardless of this setting. So reduced motion slows them
   right down rather than stopping them, which previously made them look
   broken on any device with battery saver or "remove animations" on.
   Decorative UI animation elsewhere still honours the setting fully. */
@media(prefers-reduced-motion:reduce){.fc-gif{animation-duration:3.2s!important}}
.emoji-picker .emoji-animated{display:grid;place-items:center;padding:5px;font-size:22px}
/* The lift applied when the keyboard would cover a field. */
dialog[data-lift]{transition:transform .18s ease-out}

/* The game screen keeps the balances ticking while it is open. A change lifts
   and glows for a moment so the customer notices it land instead of wondering
   whether the number was always that. */
@keyframes fcBalanceTick{0%{transform:translateY(0);text-shadow:none}
  35%{transform:translateY(-3px);text-shadow:0 0 12px color-mix(in srgb,var(--primary) 70%,transparent)}
  100%{transform:translateY(0);text-shadow:none}}
.game-row-balance.balance-changed{animation:fcBalanceTick .62s ease}
@media (prefers-reduced-motion:reduce){.game-row-balance.balance-changed{animation-duration:.01ms}}

/* --kb is how much of the window the keyboard is covering (app.js keeps it up
   to date). A sheet never grows past the space that is left, so it cannot turn
   into a scrolling screen with the field pushed off the top; a genuinely tall
   sheet still scrolls inside itself. */
dialog.sheet{max-height:calc(100dvh - env(safe-area-inset-top) - var(--kb,0px))}
dialog.sheet.tall{height:min(82dvh,720px,calc(100dvh - var(--kb,0px)))}
@supports(height:100svh){dialog.sheet{max-height:calc(100svh - env(safe-area-inset-top) - var(--kb,0px))}}

/* The games a customer actually plays sit above the rest, so the one they use
   every day is the first thing they see. */
.game-section-heading{margin:10px 4px 2px;font-size:11.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.game-section-heading:first-child{margin-top:2px}
.game-row-recent{box-shadow:inset 3px 0 0 var(--primary)}

/* A balance nobody has asked for yet: an invitation, not a number. Loading it
   costs a call to that game's panel, so it happens on request only. */
.game-row-balance.tap-to-load{font-size:12.5px;font-weight:600;color:var(--primary,#0084ff);
  padding:5px 10px;border-radius:999px;background:rgba(0,132,255,.10);white-space:nowrap;cursor:pointer}
.game-row-balance.tap-to-load:active{background:rgba(0,132,255,.2)}

/* Wallet tag — the customer's public handle, shown as $ibrahim. */
.wallet-tag-chip {
  margin-top: 6px;
  padding: 4px 12px;
  border: 1px solid var(--line, rgba(0,0,0,.12));
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--accent, #0084ff);
  cursor: pointer;
}
.wallet-tag-chip.wallet-tag-empty { font-weight: 500; opacity: .75; }
/* The $ is ours, not something they type — so it sits in the field, not in it. */
.wallet-tag-field { display: flex; align-items: center; gap: 2px; }
.wallet-tag-field .wallet-tag-dollar { font-size: 1.15rem; font-weight: 700; opacity: .55; }
.wallet-tag-field input { flex: 1; }
.wallet-tag-free { color: #1a9c54; }
.wallet-tag-taken { color: #d3313a; }
.wallet-move { margin-top: 4px; }
.wallet-receive-tag {
  text-align: center;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 18px 8px;
  margin: 4px 0 10px;
  border: 1px dashed var(--line, rgba(0,0,0,.18));
  border-radius: 14px;
  color: var(--accent, #0084ff);
  user-select: all;
}

/* ---------------------------------------------------- send / receive money */
.wallet-suggestions{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.wallet-suggestion{display:flex;align-items:baseline;gap:10px;width:100%;padding:10px 12px;border:1px solid var(--line,rgba(0,0,0,.1));border-radius:12px;background:transparent;font:inherit;text-align:left;cursor:pointer}
.wallet-suggestion strong{color:var(--accent,#0084ff)}
.wallet-suggestion span{color:var(--muted);font-size:13px}
.wallet-suggestion:active{transform:scale(.985)}

/* The confirm card. Big on purpose — this is the "is that really them" step. */
.wallet-person{display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;background:var(--incoming,rgba(0,0,0,.04));animation:fcPopCard .28s ease both}
.wallet-person.small{padding:10px 12px;gap:10px}
.wallet-person-avatar{width:64px;height:64px;flex:0 0 64px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--primary,#0084ff);color:#fff;font-size:26px;font-weight:700}
.wallet-person.small .wallet-person-avatar{width:38px;height:38px;flex-basis:38px;font-size:16px}
.wallet-person-avatar img{width:100%;height:100%;object-fit:cover}
.wallet-person-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.wallet-person-who strong{font-size:17px}
.wallet-person.small .wallet-person-who strong{font-size:15px}
.wallet-person-who span{color:var(--accent,#0084ff);font-weight:600}

/* Payment celebration. Coins fly out and fall; the mark pops once. */
.pay-mark{font-size:44px;text-align:center;animation:payPop .5s cubic-bezier(.2,1.6,.35,1) both}
@keyframes payPop{0%{transform:scale(.2) rotate(-18deg);opacity:0}60%{transform:scale(1.18) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
.coin-burst{position:absolute;inset:0;pointer-events:none;overflow:visible}
.coin-burst i{position:absolute;left:50%;top:38%;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#ffe89a,#f0b429 62%,#c98a10);box-shadow:0 1px 3px rgba(0,0,0,.25);animation:coinFly 1.25s cubic-bezier(.18,.72,.3,1) both}
@keyframes coinFly{0%{transform:translate(-50%,0) scale(.4) rotate(0);opacity:0}18%{opacity:1}100%{transform:translate(calc(-50% + var(--x)),-140px) scale(1) rotate(var(--r));opacity:0}}
.pay-toast{position:fixed;left:50%;top:16%;transform:translateX(-50%);z-index:99;display:flex;flex-direction:column;align-items:center;gap:2px;padding:18px 26px;border-radius:20px;background:var(--panel,#fff);box-shadow:0 14px 40px rgba(0,0,0,.24);animation:fcPopCard .34s ease both}
.pay-toast strong{font-size:19px}
.pay-toast span{color:var(--muted);font-size:13px}
.pay-toast.leaving{animation:payLeave .4s ease both}
@keyframes payLeave{to{opacity:0;transform:translateX(-50%) translateY(-16px)}}

/* ------------------------------------------------------------- PIN keypad */
.pin-dots{display:flex;justify-content:center;gap:12px;margin:6px 0 2px}
.pin-dots i{width:13px;height:13px;border-radius:50%;border:2px solid var(--muted);opacity:.5;transition:transform .12s ease}
.pin-dots i.on{background:var(--primary,#0084ff);border-color:var(--primary,#0084ff);opacity:1;transform:scale(1.15)}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
.pin-key{padding:16px 0;font-size:21px;font-weight:600;border:1px solid var(--line,rgba(0,0,0,.1));border-radius:14px;background:transparent;color:inherit;cursor:pointer}
.pin-key:active{transform:scale(.96);background:var(--incoming,rgba(0,0,0,.05))}
.pin-key.blank{border:0;background:transparent;pointer-events:none}
.pin-done{grid-column:1 / -1;margin-top:4px}
.security-settings{display:flex;flex-direction:column;gap:8px;padding:4px 0 10px}
.security-master{background:var(--primary,#0084ff);color:#fff;border-color:transparent}
.wide-button.danger{color:#d3313a}
@media (prefers-reduced-motion:reduce){
  .coin-burst i,.pay-mark,.pay-toast{animation:none}
  .coin-burst{display:none}
}

/* ==========================================================================
   MONEY SCREENS
   Two colours and nothing else: --money-in for money arriving, and the normal
   text colour for everything leaving. Green therefore always means one thing.
   Big type, generous spacing, one idea per line — these screens are used by
   people who do not enjoy phones.
   ========================================================================== */
.money{--money-in:#118a4e;--money-line:color-mix(in srgb,currentColor 12%,transparent)}
.money-empty{padding:34px 20px;text-align:center;color:var(--muted);font-size:15px;line-height:1.6}

/* A date, then its payments. Blocks, no chevrons, nothing to expand. */
.money-day{position:sticky;top:0;z-index:1;padding:16px 4px 8px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--panel,#fff)}
.money-history{display:flex;flex-direction:column;padding-bottom:14px}
.money-row{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:15px 14px;margin-bottom:9px;border:0;border-radius:16px;background:var(--panel,#fff);box-shadow:0 1px 2px rgba(0,0,0,.05),0 6px 16px rgba(0,0,0,.07);font:inherit;color:inherit;text-align:left;cursor:pointer}
.money-row:active{transform:scale(.99);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.money-left,.money-right{display:flex;flex-direction:column;gap:3px;min-width:0}
.money-right{align-items:flex-end;flex:0 0 auto}
.money-left strong{font-size:17px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.money-left small,.money-right small{font-size:13px;color:var(--muted)}
.money-right strong{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.money-right strong.in{color:var(--money-in)}
.money-row.voided{opacity:.55}
.money-row.voided .money-right strong{text-decoration:line-through}

/* The receipt. Deliberately looks like a document, not a chat bubble. */
.receipt{position:relative;overflow:hidden;padding:30px 22px 22px;border-radius:20px;background:var(--panel,#fff);box-shadow:0 2px 4px rgba(0,0,0,.06),0 18px 44px rgba(0,0,0,.14);text-align:center}
.receipt-guilloche{position:absolute;left:50%;top:-18px;width:230px;height:230px;transform:translateX(-50%);opacity:.07;fill:none;stroke:currentColor;stroke-width:.7;pointer-events:none}
.receipt-amount{position:relative;font-size:40px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.receipt-amount.in{color:var(--money-in)}
.receipt-title{position:relative;margin-top:6px;font-size:18px;font-weight:600}
.receipt-sub{position:relative;color:var(--muted);font-size:14px;margin-top:2px}
.receipt-rows{position:relative;margin:22px 0 6px;padding-top:16px;border-top:1px dashed var(--money-line);display:flex;flex-direction:column;gap:11px;text-align:left}
.receipt-rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.receipt-rows dt{color:var(--muted);font-size:14px}
.receipt-rows dd{margin:0;font-size:15px;font-weight:600;text-align:right}
.receipt-ref dd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}
.receipt-void{position:relative;margin-top:14px;color:#d3313a;font-weight:600}
.receipt-foot{position:relative;margin:16px 0 14px;color:var(--muted);font-size:13px;line-height:1.5}

/* ==========================================================================
   THE WALLET APP
   Full screen, four places along the bottom. Nothing here is smaller than 15px
   and nothing tappable is under 52px, because the people who find this hard are
   the ones with older eyes and bigger thumbs.
   ========================================================================== */
/* The display rule MUST be scoped to [open]. A bare `display:flex` here beats
   the browser's own `dialog:not([open]){display:none}`, and a closed dialog
   that still renders is not invisible — it lays itself out in the page. That
   put the whole wallet inside the chat, over live customers' messages.
   position:fixed pins it to the viewport rather than the scrolling document. */
.wallet-app{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;border-radius:0;background:var(--panel,#fff);color:inherit;overflow:hidden}
.wallet-app[open]{display:flex;flex-direction:column}
.wallet-app::backdrop{background:rgba(0,0,0,.4)}
.wa-bar{display:flex;align-items:center;gap:6px;padding:14px 10px 10px;border-bottom:0.5px solid var(--line,rgba(0,0,0,.08))}
.wa-bar strong{flex:1;text-align:center;font-size:17px;font-weight:600}
.wa-back,.wa-close{width:44px;height:44px;border:0;background:transparent;color:inherit;font-size:26px;line-height:1;cursor:pointer;border-radius:50%}
.wa-back:active,.wa-close:active{background:var(--incoming,rgba(0,0,0,.06))}
.wa-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 16px 22px}
.wa-screen{display:flex;flex-direction:column}
.wa-in{animation:waIn .24s cubic-bezier(.2,.7,.3,1) both}
.wa-back-in{animation:waBackIn .2s ease both}
@keyframes waIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes waBackIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}

/* Balance as the one thing on the screen. */
.wa-balance-label{margin:16px 0 0;text-align:center;font-size:15px;color:var(--muted)}
.wa-balance{margin:2px 0 22px;text-align:center;font-size:46px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.wa-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wa-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:96px;border:0;border-radius:18px;background:var(--panel,#fff);box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 20px rgba(0,0,0,.08);font:inherit;font-size:15px;color:inherit;cursor:pointer}
.wa-tile:active{transform:scale(.98)}
.wa-tile-icon{font-size:24px;line-height:1;color:var(--primary,#0084ff)}
.wa-section{margin:26px 0 10px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.wa-recent{display:flex;flex-direction:column}
.wa-empty{padding:30px 12px;text-align:center;color:var(--muted);font-size:15px;line-height:1.6}
.wa-note{margin:6px 0 0;text-align:center;color:var(--muted);font-size:14px;line-height:1.5}
.wa-error{margin:12px 0 0;text-align:center;color:#d3313a;font-size:14px}
.wa-more{margin-top:26px;display:flex;flex-direction:column;gap:2px}

/* One filled button per screen; everything else is text. */
.wa-primary{margin-top:20px;min-height:56px;border:0;border-radius:16px;background:var(--primary,#0084ff);color:#fff;font:inherit;font-size:17px;font-weight:600;cursor:pointer;box-shadow:0 6px 18px color-mix(in srgb,var(--primary,#0084ff) 32%,transparent)}
.wa-primary:disabled{opacity:.45;box-shadow:none}
.wa-primary:active:not(:disabled){transform:scale(.99)}
.wa-link{margin-top:12px;min-height:52px;border:0;background:transparent;color:var(--primary,#0084ff);font:inherit;font-size:16px;cursor:pointer}

.wa-row{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:14px;border:0;border-radius:16px;background:var(--panel,#fff);box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 20px rgba(0,0,0,.07);font:inherit;color:inherit;text-align:left;cursor:pointer}
.wa-row-main{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.wa-row-main strong{font-size:16px;font-weight:600}
.wa-row-main small{font-size:14px;color:var(--muted)}
.wa-row-go{font-size:22px;color:var(--muted)}

/* Game cards carry the balance already. */
.wa-game{display:flex;align-items:center;gap:13px;width:100%;min-height:72px;padding:13px 14px;margin-bottom:10px;border:0;border-radius:16px;background:var(--panel,#fff);box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 20px rgba(0,0,0,.07);font:inherit;color:inherit;text-align:left;cursor:pointer}
.wa-game:active{transform:scale(.99)}
.wa-game.is-closed{opacity:.6}
.wa-game-badge{width:46px;height:46px;flex:0 0 46px;border-radius:13px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--incoming,rgba(0,0,0,.05));font-size:22px}
.wa-game-badge.big{width:66px;height:66px;flex-basis:66px;border-radius:18px;font-size:30px}
.wa-game-badge img{width:100%;height:100%;object-fit:cover}
.wa-game-main{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.wa-game-main strong{font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-game-main small{font-size:14px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-game-right strong{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.wa-game-head{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:10px}
.wa-game-head strong{font-size:20px;font-weight:600}
.wa-game-balance{margin:14px 0 0;text-align:center;font-size:40px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* One flow for both directions. */
.wa-switch{display:flex;gap:4px;padding:4px;margin:8px 0 18px;border-radius:999px;background:var(--incoming,rgba(0,0,0,.06))}
.wa-switch button{flex:1;min-height:46px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:15px;font-weight:600;color:var(--muted);cursor:pointer}
.wa-switch button.is-on{background:var(--panel,#fff);color:inherit;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.wa-amount{margin:6px 0 0;text-align:center;font-size:46px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.wa-chips{display:flex;gap:8px;margin:18px 0 14px}
.wa-chips button{flex:1;min-height:44px;border:0;border-radius:999px;background:var(--incoming,rgba(0,0,0,.06));font:inherit;font-size:15px;color:inherit;cursor:pointer}
.wa-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wa-pad button{min-height:58px;border:0;border-radius:14px;background:var(--incoming,rgba(0,0,0,.045));font:inherit;font-size:22px;font-weight:600;color:inherit;cursor:pointer}
.wa-pad button:active{background:var(--incoming,rgba(0,0,0,.09))}
.wa-done-title{margin:14px 0 0;text-align:center;font-size:22px;font-weight:700}

/* Four places, always the same four, always in the same order. */
.wa-tabs{display:flex;border-top:0.5px solid var(--line,rgba(0,0,0,.08));background:var(--panel,#fff);padding-bottom:env(safe-area-inset-bottom,0)}
.wa-tabs.hidden{display:none}
.wa-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:58px;padding:9px 0;border:0;background:transparent;font:inherit;font-size:12px;color:var(--muted);cursor:pointer}
.wa-tab span{font-size:21px;line-height:1}
.wa-tab.is-on{color:var(--primary,#0084ff);font-weight:600}
@media (prefers-reduced-motion:reduce){.wa-in,.wa-back-in{animation:none}}