:root{font-family:Inter,Segoe UI,system-ui,sans-serif;color:#111827;background:#f2f4f8;--green:#273469;--green2:#4059ad;--bright:#20c7b7;--pale:#e7eaff;--line:#e2e8f0;--muted:#667085}
.mobile-only,.sidebar-view{display:none}
*{box-sizing:border-box}[hidden]{display:none!important}html,body{width:100%;max-width:100%;overflow:hidden}body{margin:0;min-height:100vh}button,input,textarea{font:inherit}button,a{ -webkit-tap-highlight-color:transparent}
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:22px;background:linear-gradient(180deg,var(--green) 0 225px,#e7eeee 225px)}
html.session-pending #auth{display:none!important}
.session-boot{display:none;position:fixed;inset:0;z-index:9999;place-items:center;align-content:center;gap:14px;background:linear-gradient(145deg,#f7f9ff,#eef5f4);color:#273469;font-weight:800;letter-spacing:.01em}
.session-boot img{width:74px;height:74px;border-radius:24px;box-shadow:0 16px 40px #27346922;animation:bootPulse 1.2s ease-in-out infinite alternate}
html.session-pending .session-boot{display:grid}

/* Desktop sign-in is intentionally split: the browser displays the QR and the
   authenticated phone scans it. Keeping this outside the phone card also makes
   the direction of the linking flow unambiguous. */
.auth-layout{width:min(1180px,calc(100% - 40px));display:grid;grid-template-columns:minmax(340px,430px) minmax(520px,1fr);gap:24px;align-items:stretch;margin:auto}
.auth-layout>.auth-card{width:100%;height:100%;margin:0}
.web-qr-card{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:38px;align-items:center;padding:42px;background:linear-gradient(145deg,#fff 0%,#fbfcff 100%);border:1px solid #dbe1ef;border-radius:32px;box-shadow:0 24px 65px #14275d1a;overflow:hidden;position:relative}
.web-qr-card:before{content:"";position:absolute;width:230px;height:230px;border-radius:50%;right:-95px;top:-105px;background:radial-gradient(circle,#62dfd93d,transparent 70%);pointer-events:none}
.web-qr-copy h2{margin:0 0 12px;color:#17254b;font-size:clamp(28px,3vw,42px);letter-spacing:-.04em}
.web-qr-copy>p{color:#60708c;font-size:16px;line-height:1.6}
.web-qr-copy ol{list-style:none;margin:25px 0;padding:0;counter-reset:steps;display:grid;gap:17px}
.web-qr-copy li{counter-increment:steps;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:12px;color:#273654;line-height:1.45}
.web-qr-copy li:before{content:counter(steps);width:32px;height:32px;display:grid;place-items:center;border:1px solid #aeb9d1;border-radius:50%;font-weight:800;color:#344a88;background:#fff}
.web-qr-security{margin:22px 0 0;padding-top:18px;border-top:1px solid #e3e7f0;font-size:13px!important}
.web-qr-visual{text-align:center;position:relative;z-index:1}
.web-qr-frame{padding:14px;background:#fff;border:1px solid #dbe1ef;border-radius:24px;box-shadow:0 12px 30px #26376314;aspect-ratio:1}
.web-qr-frame img{display:block;width:100%;height:100%;object-fit:contain;border-radius:12px}
.web-qr-visual p{min-height:22px;margin:14px 0 10px;color:#60708c;font-size:13px}
.web-qr-visual .secondary-action{width:100%;border-radius:14px}

@media(min-width:900px){
  #auth{padding:40px 0;background:radial-gradient(circle at 80% 10%,#d8fbf355,transparent 32%),linear-gradient(135deg,#eef3fb,#edf6f4)}
}
@media(max-width:899px){
  .auth-layout{display:block;width:100%}
  .web-qr-card{display:none}
  .auth-layout>.auth-card{height:auto}
}
@keyframes bootPulse{to{transform:translateY(-5px) scale(1.035);box-shadow:0 22px 48px #27346930}}
.auth-card{width:min(440px,100%);background:#fff;border-radius:24px;padding:34px;box-shadow:0 16px 50px #001b1730;text-align:center}.logo-ring{width:92px;height:92px;margin:auto;display:grid;place-items:center;border-radius:50%;background:#e3f7ef}.logo{width:72px;height:72px;object-fit:contain}.auth-card h1{font-size:38px;color:var(--green);margin:13px 0 3px}.auth-card>p{color:var(--muted);margin:0}.tabs{display:flex;background:#f0f2f5;border-radius:999px;padding:4px;margin:26px 0 20px}.tabs button{flex:1;border:0;padding:11px;border-radius:999px;background:transparent;color:#526067;font-weight:650}.tabs .active{background:#fff;color:var(--green);box-shadow:0 2px 9px #0001}
label{display:block;text-align:left;margin:13px 0;color:#3b4a54;font-size:14px;font-weight:650}input,textarea,select{width:100%;padding:13px 14px;border:1px solid #d2dadf;border-radius:11px;background:#fff;color:#111b21;outline:none}input:focus,textarea:focus,select:focus{border-color:var(--green2);box-shadow:0 0 0 3px #128c7e18}.primary{border:0;border-radius:999px;padding:13px 20px;background:var(--green2);color:#fff;font-weight:750;cursor:pointer}.primary:hover{background:var(--green)}.auth-card .primary{width:100%;margin-top:8px}.error{color:#b42318!important;min-height:20px}.download-button{display:inline-block;margin-top:4px;color:var(--green);font-weight:750;text-decoration:none}.secure-note{display:block;margin-top:22px;color:var(--muted)}
#app{height:100vh;display:grid;grid-template-columns:370px 1fr;background:#fff;max-width:1600px;margin:auto;box-shadow:0 0 35px #0002}aside{display:grid;grid-template-rows:auto auto auto 1fr auto;border-right:1px solid #d9dfe2;background:#fff;min-width:0}.brand-bar,.chat-bar{display:flex;align-items:center;gap:11px;background:#f0f2f5;padding:10px 15px;min-height:64px}.brand-bar img{width:42px;height:42px;border-radius:50%;background:#d9fdd3}.brand-bar strong{font-size:21px;flex:1;color:var(--green)}.brand-bar button,.icon-link,.chat-bar button{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:#54656f;text-decoration:none;font-size:21px;cursor:pointer}.brand-bar button:hover,.icon-link:hover,.chat-bar button:hover{background:#dfe5e7}
.search-shell{display:flex;align-items:center;gap:8px;margin:8px 12px;padding:0 13px;background:#f0f2f5;border-radius:10px;color:#667781}.search-shell input{border:0;background:transparent;padding:10px 0;box-shadow:none}.search-shell input:focus{box-shadow:none}.search-shell+button{margin:2px 12px 8px;width:calc(100% - 24px)}
#conversation-list{overflow:auto}.conversation{width:100%;display:grid;grid-template-columns:49px 1fr;gap:12px;text-align:left;padding:11px 14px;border:0;background:#fff;cursor:pointer}.conversation:before{display:none}.conversation-avatar{display:grid;place-items:center;width:49px;height:49px;border-radius:50%;color:#fff;background:linear-gradient(135deg,var(--green2),var(--bright));font-weight:800;font-size:20px}@media(hover:hover){.conversation:hover{background:#f7f8fb}}.conversation strong{display:block;margin:3px 0;font-size:16px}.conversation small{display:block;color:var(--muted)}aside footer{padding:12px;text-align:center;color:#86969f;font-size:12px;border-top:1px solid var(--line)}
.chat{position:relative;display:grid;grid-template-rows:auto 1fr auto;min-width:0;background-color:#efeae2;background-image:radial-gradient(#a7a19840 1px,transparent 1px);background-size:18px 18px;background-position:center}.chat-bar{border-bottom:1px solid #d9dfe2;z-index:2}.chat-heading{flex:1;min-width:0}.chat-heading strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-heading small{display:block;color:var(--muted);margin-top:3px}.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--green2);color:#fff;font-weight:800}.chat-actions{display:flex}#mobile-conversations{display:none}.chat-bar svg,#composer svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.send svg{stroke:#fff}#chat-menu{position:fixed;right:14px;top:65px;z-index:8;min-width:190px;padding:7px;background:#fff;border-radius:9px;box-shadow:0 5px 22px #0003}#chat-menu button{display:block;width:100%;padding:11px 13px;border:0;background:#fff;text-align:left}#chat-menu button:hover{background:#f0f2f5}
#messages{overflow:auto;padding:22px 7%;display:flex;flex-direction:column;gap:5px}.empty-chat{margin:auto;text-align:center;color:var(--muted)}.empty-chat img{width:115px;opacity:.65}.empty-chat h2{color:#41525d;font-weight:400}.bubble{position:relative;max-width:min(68%,650px);padding:8px 10px 6px;border-radius:9px;background:#fff;align-self:flex-start;overflow-wrap:anywhere;box-shadow:0 1px 1px #0002}.bubble.mine{align-self:flex-end;background:var(--pale)}.bubble img{max-width:100%;max-height:440px;border-radius:7px;display:block}.bubble time{display:block;font-size:11px;color:#667781;margin:4px 0 0 14px;text-align:right}.media-actions{display:flex;gap:8px;margin-top:5px}.media-actions button,.file-card button{border:0;border-radius:999px;padding:6px 10px;background:#ffffffb8;color:var(--green);font-size:12px;font-weight:700}.file-card{display:flex;align-items:center;gap:10px;min-width:min(360px,65vw);padding:10px;border-radius:8px;background:#ffffff88}.file-icon{font-size:28px}.file-info{flex:1;min-width:0}.file-info strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-info small{color:var(--muted)}
#composer{display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:end;gap:6px;padding:9px 13px;background:#f0f2f5;z-index:2}#composer button{width:43px;height:43px;border:0;border-radius:50%;background:transparent;color:#54656f;font-size:23px;cursor:pointer}#composer textarea{resize:none;max-height:120px;border:0;border-radius:22px;padding:11px 15px;box-shadow:none}.send{background:var(--green2)!important;color:#fff!important}#voice-note-button.recording{background:#d92d20!important;color:#fff!important;animation:pulse 1s infinite}@keyframes pulse{50%{transform:scale(.9);opacity:.78}}.bubble audio{max-width:min(300px,70vw);height:40px}.message-actions{position:absolute;right:3px;top:2px;display:flex;opacity:0}.bubble:hover .message-actions{opacity:1}.message-actions button{border:0;background:transparent;color:#667781;font-size:14px;padding:2px 4px}.bubble.mine{padding-right:48px}.reply-quote{display:block;padding:5px 8px;margin-bottom:5px;border-left:3px solid var(--green2);background:#ffffff80;color:#536c66;font-size:12px}#emoji-panel{position:absolute;bottom:66px;left:12px;z-index:4;width:min(390px,calc(100% - 24px));padding:12px;background:#fff;border-radius:14px;box-shadow:0 7px 28px #0003;display:flex;flex-wrap:wrap;gap:4px}#emoji-panel[hidden]{display:none}#emoji-panel button{border:0;background:transparent;font-size:24px;padding:7px;cursor:pointer}
dialog{border:0;border-radius:18px;padding:0;width:calc(100% - 24px);max-width:430px;max-height:min(78dvh,680px);overflow:hidden;box-shadow:0 16px 60px #0005}dialog::backdrop{background:#001b1766}dialog form{display:grid;grid-template-rows:auto minmax(0,1fr);max-height:min(78dvh,680px)}dialog header{display:flex;align-items:center;padding:15px 18px;background:var(--green);color:#fff}dialog h2{margin:0;flex:1;font-size:22px}dialog header button{border:0;background:transparent;color:#fff;font-size:25px}.person{width:100%;padding:15px 18px;text-align:left;border:0;border-bottom:1px solid var(--line);background:#fff;cursor:pointer}.person:hover{background:#f0f2f5}#people-list{min-height:120px;overflow:auto}.people-empty{padding:24px 20px;text-align:center;color:var(--muted)}.people-empty strong{display:block;color:#26373f;font-size:18px}.people-empty p{line-height:1.45}.people-empty a{display:inline-block;padding:11px 16px;border-radius:999px;background:var(--green2);color:#fff;text-decoration:none;font-weight:700}
#toast{position:fixed;z-index:20;bottom:90px;left:50%;transform:translateX(-50%);background:#111b21;color:#fff;padding:10px 17px;border-radius:999px;box-shadow:0 5px 20px #0003}#call-layer{position:fixed;inset:0;background:#071d1b;z-index:60;display:grid;place-items:center;overflow:hidden}#call-layer[hidden],#toast[hidden]{display:none}#remote-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#071d1b}.call-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,#334d78 0,#17274c 38%,#07131f 100%);transition:opacity .2s}#remote-video.remote-active:not(.voice-only)+.call-backdrop{opacity:.2}.call-identity{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;color:#fff;text-align:center;align-self:start;margin-top:max(70px,12dvh)}.call-avatar{display:grid;place-items:center;width:126px;height:126px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--green2),var(--bright));font-size:48px;font-weight:800;box-shadow:0 18px 60px #0007}.call-avatar img{width:100%;height:100%;object-fit:cover}.call-identity strong{margin-top:20px;font-size:30px}.call-identity small{margin-top:8px;color:#d9e4ef;font-size:15px}#local-video{position:absolute;z-index:3;right:18px;top:18px;width:min(25%,220px);aspect-ratio:9/14;object-fit:cover;border:2px solid #ffffffb5;border-radius:18px;background:#132236;box-shadow:0 12px 36px #0008}.incoming-call-actions,.active-call-actions{position:absolute;z-index:4;left:50%;bottom:max(34px,calc(20px + env(safe-area-inset-bottom)));transform:translateX(-50%);display:flex;gap:22px;align-items:center}.call-control{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:70px;border:0;background:transparent;color:#fff;font-weight:700}.call-control span{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#ffffff26;font-size:24px;backdrop-filter:blur(12px)}.call-control.active span{background:#fff;color:#17274c}.call-accept span{background:#21b66f}.call-decline span{background:#e1453d}
.call-history-item{display:grid;width:100%;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:12px;border:0;background:#fff;padding:12px 16px;text-align:left}.call-history-item:hover{background:#f5f6fa}.call-history-item strong,.call-history-item small{display:block}.call-history-item small{margin-top:3px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.call-history-item .missed-call{color:#b42318}
.settings-body{padding:18px 20px;overflow:auto}.settings-body h3{margin:22px 0 5px;color:var(--green)}.profile-editor{display:grid;grid-template-columns:112px 1fr;gap:18px;align-items:center}.profile-photo{width:104px;height:104px;padding:0;border:0;border-radius:50%;overflow:hidden;background:#d9fdd3;color:var(--green);position:relative;font-size:38px;font-weight:800;cursor:pointer}.profile-photo img{width:100%;height:100%;object-fit:cover}.profile-photo small{position:absolute;inset:auto 0 0;padding:5px;background:#001b17aa;color:#fff;font-size:10px}.profile-fields label{margin:7px 0}.settings-help{color:var(--muted);font-size:13px}.linked-device{padding:11px 0;border-bottom:1px solid var(--line)}.linked-device strong,.linked-device small{display:block}.linked-device small{color:var(--muted);margin-top:3px}.save-profile{width:100%;margin-top:20px}
@media(max-width:720px){#app{display:block}.chat{height:100dvh}.brand-bar{padding-top:max(10px,env(safe-area-inset-top))}aside{position:fixed;inset:0;z-index:5;transform:translateX(-105%);transition:transform .2s ease}aside.mobile-open{transform:translateX(0)}#mobile-conversations{display:grid}.chat-bar{min-height:58px;padding:6px 5px;padding-top:max(6px,env(safe-area-inset-top));gap:4px}.chat-bar .avatar{width:37px;height:37px}.chat-heading strong{font-size:16px}.chat-heading small{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-actions button{width:34px;height:34px}.chat-actions svg{width:21px;height:21px}.bubble{max-width:86%}#messages{padding:13px 8px}.empty-chat{display:none}#composer{padding:6px 7px;padding-bottom:max(6px,env(safe-area-inset-bottom));grid-template-columns:auto auto 1fr auto}#composer button{width:38px;height:38px}#composer textarea{font-size:15px;padding:9px 13px}.send{width:40px!important;height:40px!important}.search-shell+button{padding:11px}.conversation{padding:9px 12px}}
@media(max-width:720px){#composer{grid-template-columns:auto auto 1fr auto auto}.message-actions{opacity:1}}
@media(max-width:720px){#app,.chat{width:100vw;max-width:100%;overflow:hidden}aside{width:100vw;max-width:100%;overflow:hidden}dialog{width:calc(100vw - 24px);max-width:calc(100vw - 24px);margin:auto}dialog h2{font-size:20px}}
@media(max-width:480px){.profile-editor{grid-template-columns:1fr}.profile-photo{margin:auto}.settings-body{padding:14px}}
.receipt{display:inline;margin-left:4px;color:#667781;font-weight:800;letter-spacing:-3px}.receipt.read{color:#1b8ed1}.chat-heading,.chat-bar .avatar{cursor:pointer}.people-search{padding:12px;background:#fff}.contact-profile{text-align:center;padding:26px 20px}.contact-photo{display:grid;place-items:center;width:150px;height:150px;margin:auto;border-radius:50%;background:var(--green2);color:#fff;font-size:50px;font-weight:800}.contact-profile h2{margin:16px 0 3px}.contact-profile p{color:var(--muted)}#status-media{display:grid;place-items:center;background:#071d1b;min-height:300px}#status-media img,#status-media video{display:block;max-width:100%;max-height:75dvh}
@media(max-width:720px){
  #mobile-nav{grid-template-columns:repeat(4,1fr)}
  #main-menu{top:66px;width:210px;padding:6px;border-radius:10px;box-shadow:0 6px 24px #0003}
  #main-menu button{padding:12px 14px;font-size:15px}
  #background-button{display:none}.chat-actions button{width:36px;height:36px}
  #camera-shortcut svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8}
  .conversation-avatar{width:56px;height:56px;font-size:22px}
  #new-chat-fab{background:var(--green2)}.brand-bar strong{color:var(--green2)}.status-avatar{color:var(--green2);border-color:var(--green2)}
  #people-dialog form{grid-template-rows:auto auto minmax(0,1fr)}
  #contact-dialog,#status-viewer{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border-radius:0}
  #contact-dialog form,#status-viewer form{height:100dvh;max-height:none;grid-template-rows:auto 1fr}
  #contact-dialog header,#status-viewer header{background:#fff;color:#111b21;border-bottom:1px solid #eee}
  #contact-dialog header button,#status-viewer header button{color:#111b21}
  .linked-device strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.linked-device small{font-size:12px}
  .settings-body{font-size:14px}.settings-body input,.settings-body select{font-size:15px;padding:11px 12px}
}

/* PingMe 1.6 visual system */
:root{--mine-bubble:#e9ddff;--surface:#fff;--surface-soft:#f5f6fb;--ink:#12182a;--default-chat-wallpaper:radial-gradient(circle at 1px 1px,#27346916 1px,transparent 1.2px)}
.bubble.mine{background:var(--mine-bubble);border-bottom-right-radius:3px}.bubble:not(.mine){border-bottom-left-radius:3px}.bubble{animation:bubble-in .2s cubic-bezier(.2,.8,.2,1);box-shadow:0 2px 8px #24304b14}
@keyframes bubble-in{from{opacity:0;transform:translateY(7px) scale(.985)}to{opacity:1;transform:none}}
input,textarea,select{min-height:48px;border:1px solid #d8ddea;border-radius:15px;background:#fbfcff;transition:border-color .18s,box-shadow .18s,transform .18s}
input:focus,textarea:focus,select:focus{background:#fff;border-color:var(--green2);box-shadow:0 0 0 4px color-mix(in srgb,var(--green2) 13%,transparent)}
.settings-card{padding:20px;border-radius:22px;box-shadow:0 8px 30px #2734690b}.settings-card>label{padding:7px 0}.settings-toggle{display:flex!important;align-items:center;gap:12px}.settings-toggle>span{flex:1}.settings-toggle input{width:48px;min-height:28px;accent-color:var(--green2)}
.profile-photo{overflow:visible}.profile-photo img{border-radius:50%}.profile-edit-badge{position:absolute;right:-3px;bottom:-3px;display:grid;place-items:center;width:31px;height:31px;border:3px solid #fff;border-radius:50%;background:var(--green2);color:#fff;font-size:15px;box-shadow:0 5px 15px #0002}
.photo-preview-dialog,.theme-dialog{max-width:520px}.photo-preview-card{padding:0 0 22px;text-align:center}.photo-preview-card img{display:block;width:min(360px,82vw);height:min(360px,82vw);object-fit:cover;margin:20px auto;border-radius:28px;background:#eef1f7}.photo-edit-button{border:0;border-radius:999px;padding:13px 19px;background:var(--green2);color:#fff;font-weight:800}
.theme-dialog form{overflow:auto}.theme-dialog form>h3,.theme-dialog form>button{margin-left:18px;margin-right:18px}.theme-preview{display:flex;flex-direction:column;gap:10px;padding:28px;margin:18px;border-radius:22px;background:var(--default-chat-wallpaper);background-size:18px 18px}.theme-preview span{align-self:flex-start;padding:10px 13px;border-radius:13px 13px 13px 3px;background:#fff;box-shadow:0 3px 10px #0001}.theme-preview .theme-preview-mine{align-self:flex-end;border-radius:13px 13px 3px 13px;background:var(--mine-bubble)}
.bubble-palette,.wallpaper-palette{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:12px 18px}.bubble-palette button{aspect-ratio:1;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #d5dae5,0 5px 12px #0001}.wallpaper-palette{grid-template-columns:repeat(3,1fr)}.wallpaper-palette button{aspect-ratio:.72;border:2px solid #fff;border-radius:17px;box-shadow:0 0 0 1px #d5dae5,0 7px 16px #0001}
.call-control{transition:transform .17s}.call-control:active{transform:scale(.92)}.active-call-actions{padding:13px 18px;border-radius:28px;background:#07131fb8;backdrop-filter:blur(16px)}
.dark-ui{color-scheme:dark;--surface:#141925;--surface-soft:#1c2230;--ink:#f5f7ff;--line:#303849;--muted:#aab3c5}.dark-ui body,.dark-ui #app,.dark-ui aside,.dark-ui .settings-body,.dark-ui .settings-card,.dark-ui .settings-menu button,.dark-ui .conversation,.dark-ui dialog form{background:var(--surface);color:var(--ink)}.dark-ui input,.dark-ui textarea,.dark-ui select{background:#1c2230;color:#fff;border-color:#3a4355}.dark-ui .brand-bar,.dark-ui .chat-bar,.dark-ui #composer{background:#1b2130}.dark-ui .bubble:not(.mine){background:#202737;color:#fff}
:root[data-chat-font="small"] .bubble{font-size:13px}:root[data-chat-font="large"] .bubble{font-size:17px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media(max-width:720px){
  .brand-bar{background:linear-gradient(125deg,#23356f,#6047a4)!important;color:#fff;border-radius:0 0 26px 26px;box-shadow:0 8px 24px #27346925}.brand-bar strong,.brand-bar button{color:#fff!important}
  .search-shell{margin:15px 14px 9px;border-radius:20px;background:#f5f5f7}.conversation{padding:12px 16px;transition:background .15s,transform .15s}.conversation:active{transform:scale(.985)}
  .photo-preview-dialog,.theme-dialog{width:calc(100vw - 20px)!important;max-width:none!important;border-radius:24px!important}
  .bubble-palette{grid-template-columns:repeat(5,1fr)}.wallpaper-palette{grid-template-columns:repeat(3,1fr)}
  .active-call-actions{gap:10px;width:calc(100% - 24px);justify-content:center}.call-control{min-width:62px}
}

/* PingMe 1.5.1: stable mobile viewport, swipe navigation, status controls and structured settings. */
.settings-chevron{margin-left:auto;color:var(--muted);font-size:30px;font-weight:300}
.settings-menu{margin:14px 0;background:#fff;border:1px solid #e5e8f0;border-radius:18px;overflow:hidden}
.settings-menu>button{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) 16px;align-items:center;gap:12px;border:0;border-bottom:1px solid #edf0f5;background:#fff;padding:15px 16px;text-align:left;color:#172033}
.settings-menu>button:last-child{border-bottom:0}.settings-menu>button:hover{background:#f7f8fc}
.settings-menu strong,.settings-menu small{display:block}.settings-menu strong{font-size:17px}.settings-menu small{margin-top:4px;color:var(--muted);line-height:1.35}.settings-menu b{color:#9aa3b2;font-size:22px;font-weight:400}
.settings-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--pale);color:var(--green);font-size:19px;font-weight:800}
#settings-pages>[data-settings-page][hidden]{display:none!important}
.settings-toggle{display:flex!important;align-items:center;justify-content:space-between;gap:18px}.settings-toggle>span{min-width:0}.settings-toggle input{width:22px;height:22px;flex:0 0 auto}
#status-viewer header{display:flex;align-items:center;gap:10px;padding:5px 10px 7px 14px;background:#07100f!important;color:#fff!important;border:0!important}
#status-owner-button{display:flex;align-items:center;gap:11px;min-width:0;flex:1;border:0;background:transparent;color:#fff;text-align:left;padding:3px}
#status-owner-avatar{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:var(--green2);color:#fff;font-weight:800;background-size:cover;background-position:center}
#status-owner-button>span:last-child{min-width:0}#status-owner-button strong,#status-owner-button small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#status-owner-button strong{font-size:16px}#status-owner-button small{margin-top:2px;color:#d7dddd;font-size:12px}
#status-menu-button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:#fff;font-size:28px}
#status-menu{position:absolute;z-index:12;right:10px;top:66px;width:min(270px,78vw);padding:7px;border-radius:12px;background:#fff;color:#111827;box-shadow:0 12px 42px #0008}
#status-menu button{display:block;width:100%;border:0;background:#fff;padding:13px 15px;text-align:left;font-size:16px}#status-menu button:hover{background:#f2f3f6}
#status-menu .danger-menu-item{color:#b42318;font-weight:750;border-top:1px solid #edf0f5}
#status-viewer.status-paused #status-progress span.active i{animation-play-state:paused}
#status-viewer.status-paused #status-media:after{content:"Ⅱ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:66px;height:66px;border-radius:50%;background:#0008;color:#fff;font-size:29px;pointer-events:none}
#status-media{position:relative;touch-action:pan-y}

@media(max-width:720px){
  html,body{height:var(--pingme-height,100dvh);min-height:0;position:fixed;inset:0;overflow:hidden}
  #app,.chat,aside{height:var(--pingme-height,100dvh)!important;min-height:0}
  .chat{grid-template-rows:auto minmax(0,1fr) auto;overscroll-behavior:none}
  .chat-bar{position:relative;top:0;z-index:10;flex:0 0 auto;min-height:calc(58px + env(safe-area-inset-top))!important;padding:calc(7px + env(safe-area-inset-top)) 6px 7px!important;background:#f8f9ff!important}
  #messages{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-bottom:18px}
  #composer{position:relative!important;z-index:11;flex:0 0 auto;padding-bottom:max(7px,env(safe-area-inset-bottom))!important}
  .auth-shell{height:var(--pingme-height,100dvh);min-height:0;display:block;overflow-y:auto;padding:max(18px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom));background:linear-gradient(180deg,var(--green) 0 30%,#e9eef2 30%)}
  .auth-card{width:min(100%,430px);min-height:0;margin:0 auto;padding:24px 20px;border-radius:24px}.auth-card .logo-ring{width:76px;height:76px}.auth-card .logo{width:60px;height:60px}.auth-card h1{font-size:32px;margin-top:8px}.auth-card .tabs{margin:18px 0 14px}.auth-card label{margin:10px 0}.secure-note{margin-top:15px}
  #settings-dialog,#settings-dialog form{height:var(--pingme-height,100dvh)!important;max-height:none}
  #settings-dialog header{position:sticky;top:0;z-index:3;min-height:calc(58px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 14px 0!important}
  #settings-dialog header button{width:44px;height:44px;font-size:25px}#settings-dialog header h2{font-size:22px}
  .settings-body{padding:14px 12px max(28px,env(safe-area-inset-bottom));background:#f7f8fb}.profile-hero{border:0;box-shadow:none;border-radius:15px;padding:13px}.profile-hero .profile-photo{width:68px;height:68px}.profile-hero strong{font-size:17px}
  .settings-menu{margin-top:10px;border:0;box-shadow:0 4px 16px #2734690b}.settings-menu>button{padding:13px 14px}.settings-menu strong{font-size:16px}.settings-menu small{font-size:12px}.settings-icon{width:38px;height:38px}
  #status-viewer,#status-viewer form{height:var(--pingme-height,100dvh)!important;max-height:none!important;padding-top:0!important}
  #status-progress{padding-top:max(8px,env(safe-area-inset-top))}
  #status-viewer header{min-height:58px;padding-left:12px}
  #status-reply{padding-bottom:max(10px,env(safe-area-inset-bottom))}
  #mobile-nav{height:calc(76px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
  #new-chat-fab{bottom:calc(90px + env(safe-area-inset-bottom))}
}

/* PingMe 1.5.0: linked devices and conversation organisation. */
.secondary-action,.settings-secondary{
  width:100%;border:1px solid #cfd5e3;border-radius:12px;background:#fff;color:var(--green);
  padding:11px 14px;font-weight:750;cursor:pointer
}
.secondary-action{margin:4px 0 12px}
.settings-secondary{margin:8px 0 4px}
.linked-device{display:flex;align-items:center;gap:12px}
.linked-device>span{min-width:0;flex:1}
.device-signout{
  border:1px solid #e3a8a3;border-radius:999px;background:#fff;color:#a8241a;
  padding:7px 11px;font-weight:700;white-space:nowrap
}
.device-link-content{padding:20px;text-align:center}
.device-link-content img{display:block;width:min(300px,100%);height:auto;margin:0 auto 14px;border-radius:16px}
.device-link-content h3{margin:8px 0}.device-link-content p{color:var(--muted);line-height:1.5}
#device-link-status{margin-top:14px;padding:11px;border-radius:10px;background:var(--pale);font-weight:700}
#conversation-mode{display:flex;align-items:center;justify-content:space-between;padding:9px 16px;background:#eef1fb;color:var(--green)}
#conversation-mode button{border:0;background:transparent;color:var(--green2);font-weight:750}
.conversation-muted{font-size:12px;opacity:.7}.message-star{margin-left:5px;color:#ad7b00;font-size:11px}
#starred-message-list{overflow:auto;min-height:120px;max-height:60dvh}
.starred-message{display:block;width:100%;border:0;border-bottom:1px solid var(--line);background:#fff;padding:14px 18px;text-align:left}
.starred-message strong,.starred-message small{display:block}.starred-message small{margin-top:4px;color:var(--muted)}
@media(max-width:720px){
  #device-link-dialog{width:calc(100vw - 20px);max-width:430px}
  .device-link-content{padding:14px 18px 22px}
  .linked-device{align-items:flex-start}
}
@media(max-width:720px){
  .mobile-only{display:grid}
  aside{display:grid;grid-template-rows:auto auto 1fr;background:#fff}
  .brand-bar{min-height:82px;padding:22px 18px 10px;background:#fff}
  .brand-bar img{display:none}.brand-bar strong{font-size:29px;color:#16a763;letter-spacing:-1px}
  .brand-bar #settings-button,.brand-bar .icon-link,.brand-bar #logout{display:none}
  .brand-bar #camera-shortcut,.brand-bar #main-menu-button{display:grid;width:42px;height:42px;color:#111b21;font-size:26px}
  .search-shell{height:52px;margin:10px 16px 8px;padding:0 18px;border-radius:28px;background:#f6f5f3;font-size:24px}
  .search-shell input{font-size:17px}
  .search-shell+button{display:none}
  #conversation-list{padding-bottom:92px}
  .conversation{grid-template-columns:56px 1fr;padding:10px 16px;gap:13px}
  .conversation:before{width:56px;height:56px;font-size:22px}
  .conversation strong{font-size:17px}.conversation small{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #new-chat-fab{position:absolute;right:18px;bottom:88px;z-index:7;width:58px;height:58px;border:0;border-radius:17px;place-items:center;background:#18ad66;color:#fff;font-size:30px;box-shadow:0 5px 18px #0003}
  #mobile-nav{position:absolute;left:0;right:0;bottom:0;z-index:6;height:75px;grid-template-columns:repeat(3,1fr);background:#fff;border-top:1px solid #e6e6e6;padding-bottom:max(4px,env(safe-area-inset-bottom))}
  #mobile-nav button{border:0;background:#fff;color:#263238;display:grid;place-items:center;align-content:center;gap:2px;font-size:12px;font-weight:700}
  #mobile-nav button span{display:grid;place-items:center;min-width:54px;height:30px;border-radius:18px;font-size:21px}
  #mobile-nav button.active span{background:#d9fdd3;color:#075e54}
  aside footer{display:none}
  .sidebar-view.active{display:block;overflow:auto;padding:8px 16px 100px}
  .view-heading h2{font-size:28px;margin:10px 0 4px}.view-heading p,.empty-section p{color:var(--muted)}
  .status-card{width:100%;display:grid;grid-template-columns:58px 1fr;gap:13px;align-items:center;padding:14px 0;border:0;background:#fff;text-align:left}
  .status-avatar{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#e8f8ef;color:#16a763;font-size:28px;border:2px solid #16a763}
  .status-card strong,.status-card small{display:block}.status-card strong{font-size:17px}.status-card small{color:var(--muted);margin-top:4px}
  .empty-section{text-align:center;padding:70px 24px;color:#44555d}.empty-section strong{font-size:18px}
  #main-menu{position:fixed;right:10px;top:62px;z-index:30;width:min(275px,78vw);padding:8px;background:#fff;border-radius:14px;box-shadow:0 6px 28px #0004}
  #main-menu button{display:block;width:100%;padding:15px 18px;border:0;background:#fff;text-align:left;font-size:17px}
  #settings-dialog{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border-radius:0}
  #settings-dialog form{height:100dvh;max-height:none;grid-template-rows:auto 1fr}
  #settings-dialog header{min-height:68px;background:#fff;color:#111b21;border-bottom:1px solid #eee;padding-top:max(14px,env(safe-area-inset-top))}
  #settings-dialog header button{color:#111b21;order:-1;margin-right:12px}
  #settings-dialog header h2{font-size:24px}
  .settings-body{padding:22px 20px 40px}
  .profile-editor{display:block;text-align:center}.profile-photo{width:150px;height:150px;margin:5px auto 24px}
  .profile-fields{text-align:left}
  .settings-body h3{font-size:18px;margin-top:28px}
  .settings-body label{font-size:16px;padding:5px 0}
  .linked-device{padding:14px 0}
}
/* Final responsive overrides: keep these after the mobile shell rules. */
@media(max-width:720px){
  #mobile-nav{grid-template-columns:repeat(4,minmax(0,1fr));height:82px}
  #mobile-nav button{min-width:0;font-size:11px;overflow:hidden}
  #mobile-nav button span{min-width:46px;height:28px}
  #mobile-nav button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  #new-chat-fab{bottom:96px;background:var(--green2)}
  #main-menu{top:66px;width:205px;padding:5px;border-radius:9px}
  #main-menu button{padding:11px 13px;font-size:14px}
}
.chat-image{cursor:zoom-in;min-width:180px;min-height:100px;object-fit:cover}.media-viewer-shell{height:min(92dvh,850px);display:grid;grid-template-rows:auto 1fr auto;background:#0b141a}.media-viewer-shell header{background:#111b21}.media-viewer-shell footer{display:flex;justify-content:center;gap:12px;padding:12px;background:#111b21}.media-viewer-shell footer button{border:0;border-radius:999px;padding:10px 18px;background:#fff;color:#111b21;font-weight:700}.media-viewer-shell footer .danger{background:#d92d20;color:#fff}#media-viewer-content{display:grid;place-items:center;overflow:auto}#media-viewer-content img{display:block;max-width:100%;max-height:100%;object-fit:contain}.contact-updates{text-align:left;border-top:1px solid var(--line);margin-top:22px;padding-top:14px}.contact-status{display:block;width:100%;padding:11px;border:0;border-radius:10px;background:var(--pale);color:#1c3a31;text-align:left;margin:7px 0}
@media(max-width:720px){#media-viewer{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border-radius:0}.media-viewer-shell{height:100dvh}.contact-photo{border:0}}

/* Media, status, group and safe-area corrections. */
.chat{
  background-color:#efeae2;
  background-image:
    linear-gradient(45deg,#a8a29a17 25%,transparent 25%),
    linear-gradient(-45deg,#a8a29a17 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#a8a29a17 75%),
    linear-gradient(-45deg,transparent 75%,#a8a29a17 75%);
  background-size:28px 28px;
  background-position:0 0,0 14px,14px -14px,-14px 0;
}
#media-viewer{width:min(92vw,1100px);max-width:1100px;height:min(90dvh,850px);max-height:90dvh}
.media-viewer-shell{height:100%;min-height:0}
.media-viewer-shell header{min-width:0}
.media-viewer-shell header h2{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#media-viewer-content{min-height:0;overflow:hidden;padding:12px}
#media-viewer-content img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.group-builder{padding:18px;overflow:auto}
#group-people-list{max-height:270px;overflow:auto;margin:10px 0;border:1px solid var(--line);border-radius:12px}
.group-person{display:flex;align-items:center;gap:11px;width:100%;padding:12px;border:0;border-bottom:1px solid var(--line);background:#fff;text-align:left}
.group-person:last-child{border-bottom:0}.group-person input{width:20px;height:20px;margin:0 0 0 auto}
#group-selected{color:var(--muted);font-size:13px}.action-card{border-radius:12px!important;padding:10px!important;background:#f7faf9!important}
.contact-danger{border:1px solid #f0b7b3;background:#fff;color:#b42318;border-radius:999px;padding:9px 17px;font-weight:700}
#status-viewer{background:#07100f;color:#fff}
#status-viewer form{height:min(92dvh,820px);max-height:92dvh;grid-template-rows:auto auto minmax(0,1fr) auto;position:relative}
#status-viewer header{background:#07100f}
#status-progress{display:flex;gap:4px;padding:8px 10px 0;background:#07100f}
#status-progress span{height:3px;flex:1;background:#ffffff55;border-radius:999px;overflow:hidden}
#status-progress i{display:block;height:100%;width:0;background:#fff}
#status-progress span.done i{width:100%}
#status-progress span.active i{animation:status-progress 5s linear forwards}
@keyframes status-progress{to{width:100%}}
#status-media{min-height:0;height:100%;overflow:hidden}
#status-media img,#status-media video{width:100%;height:100%;max-height:none;object-fit:contain}
#status-reply{display:flex;gap:8px;padding:12px;background:#07100f}
#status-reply input{border-radius:999px;background:#1f2c30;border-color:#4b5a5e;color:#fff}
#status-reply button{border:0;border-radius:999px;padding:0 18px;background:var(--green2);color:#fff;font-weight:750}
.message-sender{display:block;color:var(--green2);font-size:12px;margin:0 36px 4px 0}

@media(max-width:720px){
  .brand-bar{min-height:96px!important;padding:calc(max(30px,env(safe-area-inset-top)) + 8px) 18px 10px!important}
  .chat-bar{min-height:82px!important;padding-top:max(25px,env(safe-area-inset-top))!important}
  #messages{padding-bottom:16px}
  #media-viewer{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border-radius:0}
  .media-viewer-shell{height:100dvh}
  #media-viewer-content{padding:0}
  #status-viewer form{height:100dvh;max-height:none}
  #status-viewer header{background:#07100f;color:#fff;border:0}
  #status-viewer header button{color:#fff}
  #status-reply{padding-bottom:max(12px,env(safe-area-inset-bottom))}
  #group-dialog{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border-radius:0}
  #group-dialog form{height:100dvh;max-height:none}
  .group-builder{padding-bottom:40px}
  #chat-menu{top:76px;right:7px;min-width:215px;max-width:78vw}
}

/* PingMe 1.4.0: distinctive shell, compact conversations and stable viewport. */
#app{height:100dvh}
.chat{height:100%;min-height:0;overflow:hidden}
#messages{min-height:0}
#composer{min-width:0;flex-shrink:0;border-top:1px solid #dfe3eb;background:#f7f8fb}
#composer textarea{min-width:0;background:#fff}
.brand-bar{
  background:linear-gradient(135deg,#18224d 0%,#3e4fa3 56%,#5f43a5 100%);
  color:#fff;box-shadow:0 5px 22px #26336c24
}
.brand-bar img{border-radius:13px;background:#ffffffec;padding:3px}
.brand-bar strong{color:#fff;letter-spacing:-.4px}
.brand-bar button,.brand-bar .icon-link{color:#fff}
.brand-bar button:hover,.brand-bar .icon-link:hover{background:#ffffff1f}
.brand-bar{gap:6px;overflow:hidden}
.brand-bar strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-bar button,.brand-bar .icon-link{flex:0 0 36px;width:36px;height:36px}
@media(min-width:721px){.brand-bar .mobile-only{display:none!important}}
.chat-bar{background:linear-gradient(90deg,#f8f9ff,#f1f3fb);border-bottom-color:#dfe3ef}
.conversation{grid-template-columns:49px minmax(0,1fr)}
.conversation-copy{min-width:0}
.conversation-title-row,.conversation-preview-row{display:flex;align-items:center;gap:8px;min-width:0}
.conversation-title-row strong{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conversation-title-row time{color:var(--muted);font-size:11px;white-space:nowrap}
.conversation-preview-row small{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unread-badge{display:grid;place-items:center;min-width:21px;height:21px;padding:0 6px;border-radius:999px;background:var(--bright);color:#102a2a;font-size:11px;font-weight:800}
.message-actions{display:none!important}
.bubble.mine{padding-right:10px}
.bubble.long-press-ready{touch-action:pan-y}
.action-sheet-body{padding:10px 14px 16px;background:#fff}
.action-grip{width:42px;height:4px;border-radius:999px;background:#c9ced8;margin:2px auto 14px}
.action-sheet-body h2{margin:0 4px 8px;font-size:19px}
.action-sheet-body>button{display:block;width:100%;border:0;border-top:1px solid #edf0f5;background:#fff;padding:14px 10px;text-align:left;font-weight:650}
.danger-text{color:#b42318!important}
.compact-dialog form{display:block}
.dialog-content{padding:16px}
.compact-dialog footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.compact-dialog footer button,.confirm-actions button{border:0;border-radius:10px;padding:10px 16px;font-weight:750}
.confirm-body{padding:22px}.confirm-body h2{font-size:21px}.confirm-body p{color:var(--muted);line-height:1.5}
.confirm-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}
.danger-button{background:#b42318!important;color:#fff}
#status-viewer header{position:relative;z-index:4;min-height:58px}
#close-status-viewer{width:46px;height:46px;display:grid;place-items:center;cursor:pointer}

@media(max-width:720px){
  .brand-bar{
    min-height:108px!important;
    padding:calc(max(28px,env(safe-area-inset-top)) + 8px) 17px 13px!important;
    border-radius:0 0 24px 24px
  }
  .brand-bar img{display:block!important;width:43px;height:43px}
  .brand-bar strong{font-size:25px!important;color:#fff!important}
  .brand-bar #camera-shortcut,.brand-bar #main-menu-button{color:#fff!important}
  .chat-bar{background:#f8f9ff}
  .conversation{grid-template-columns:56px minmax(0,1fr)}
  #status-viewer form{padding-top:max(14px,env(safe-area-inset-top));background:#07100f}
  #status-progress{padding-top:8px}
  #status-viewer header{padding:4px 10px 6px 14px}
  #close-status-viewer{font-size:31px!important}
  .action-sheet{width:100vw;max-width:none;margin:auto 0 0;border-radius:22px 22px 0 0}
  .action-sheet::backdrop{background:#10152b88}
  .compact-dialog{max-width:calc(100vw - 34px)}
  #composer{position:relative;padding-bottom:max(7px,env(safe-area-inset-bottom))}
}

/* PingMe 1.4 profile, picker, location and message-interaction refinements. */
.settings-body{background:#f5f7fb}
.profile-hero,.settings-card{background:#fff;border:1px solid #e4e8f1;border-radius:18px;box-shadow:0 5px 18px #2734690b}
.profile-hero{display:flex;align-items:center;gap:18px;padding:18px}
.profile-hero .profile-photo{flex:0 0 auto;width:96px;height:96px}
.profile-hero strong{font-size:20px;color:#1b2340}.profile-hero p{margin:6px 0 0;color:var(--muted)}
.settings-card{padding:17px 18px;margin-top:14px}
.settings-card h3{margin:0 0 13px!important;color:var(--green)!important}
.settings-card label{display:block;margin:12px 0}.settings-card label>small{display:block;margin-top:5px;color:var(--muted)}
.profile-fields{display:block}.input-with-action{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:7px}
.input-with-action button{border:1px solid var(--line);border-radius:10px;background:#fff;font-size:20px}
.danger-zone{border-color:#f2c7c3;background:#fffafa}.danger-zone h3{color:#b42318!important}.danger-zone p{color:#704541}
.danger-zone button{border:1px solid #d92d20;border-radius:10px;background:#fff;color:#b42318;padding:10px 14px;font-weight:750}
.contact-details{margin:14px auto;max-width:360px;text-align:left;border-radius:13px;background:#f4f6fb;padding:4px 14px}
.contact-details p{overflow-wrap:anywhere}
#attachment-menu{position:absolute;z-index:9;left:54px;bottom:72px;width:min(290px,calc(100vw - 30px));padding:8px;border:1px solid #e2e6ee;border-radius:15px;background:#fff;box-shadow:0 12px 36px #16204433}
#attachment-menu[hidden]{display:none}#attachment-menu button{display:block;width:100%;border:0;border-radius:9px;background:#fff;padding:12px;text-align:left;font-weight:650}
#attachment-menu button:hover{background:#f1f3fa}
#emoji-panel{display:block;max-height:min(52dvh,470px);overflow:hidden;padding:0}
#emoji-panel[hidden]{display:none}.picker-tabs{display:grid;grid-template-columns:1fr 1fr;padding:7px;border-bottom:1px solid #e6e9f0;background:#f7f8fc}
.picker-tabs button{border:0;border-radius:9px;background:transparent;padding:9px;font-weight:750}.picker-tabs button.active{background:var(--pale);color:var(--green)}
#emoji-grid,#sticker-grid{max-height:min(42dvh,380px);overflow:auto;padding:10px}
#emoji-grid section{margin:0 0 12px}#emoji-grid h4{margin:2px 5px 7px;text-transform:capitalize;color:var(--muted);font-size:12px}
#emoji-grid section>div{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
#emoji-grid button,#sticker-grid button{border:0;background:transparent;border-radius:8px;font-size:23px;padding:7px}
#emoji-grid button:hover,#sticker-grid button:hover{background:#eef1f8}
#sticker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
#sticker-grid[hidden]{display:none}.sticker-choice{display:grid;place-items:center;min-height:70px!important;font-size:44px!important;background:#f4f6fb!important}
#emoji-panel.profile-picker{position:fixed;z-index:70;left:50%;bottom:18px;transform:translateX(-50%);width:min(470px,calc(100vw - 24px))}
.chat-sticker{font-size:64px;line-height:1}.sticker-bubble{background:transparent!important;box-shadow:none!important;padding:4px!important}
.location-card{display:grid;grid-template-columns:54px minmax(0,1fr);gap:4px 10px;min-width:min(300px,70vw);padding:8px}
.location-map{grid-row:1/5;display:grid;place-items:center;width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,var(--pale),#fff);font-size:28px}
.location-card strong,.location-card small,.location-card a{display:block}.location-card small{color:var(--muted);line-height:1.35}.location-card a{color:var(--green2);font-weight:750;text-decoration:none}
.location-card button{grid-column:2;border:0;border-radius:9px;background:var(--green2);color:#fff;padding:8px 10px;font-weight:700}
.location-request{min-width:min(290px,70vw)}.location-request strong{font-size:16px}
.bubble.long-press-ready{transition:transform .16s ease,box-shadow .16s ease}.bubble.swipe-replied{box-shadow:0 0 0 3px var(--bright)}
.action-sheet-body{padding:16px 18px 18px}.action-sheet-body h2{font-size:18px;color:#1e294f;padding-bottom:9px}
.action-sheet-body>button{border:0;margin-top:7px;border-radius:12px;background:#f4f6fb;padding:14px 16px}.action-sheet-body>button:hover{background:#e9edf7}

@media(max-width:720px){
  .settings-body{padding:16px 14px 42px}
  .profile-hero{padding:16px}.profile-hero .profile-photo{width:86px;height:86px;margin:0}
  .profile-hero strong{font-size:18px}.settings-card{padding:15px;margin-top:12px}
  #attachment-menu{position:fixed;left:12px;bottom:max(76px,calc(62px + env(safe-area-inset-bottom)));width:calc(100vw - 24px)}
  #emoji-panel{position:fixed;left:8px;right:8px;bottom:max(70px,calc(56px + env(safe-area-inset-bottom)));width:auto;max-height:52dvh}
  #emoji-panel.profile-picker{left:8px;right:8px;bottom:max(12px,env(safe-area-inset-bottom));transform:none;width:auto}
  #emoji-grid section>div{grid-template-columns:repeat(7,1fr)}
  .location-card{min-width:min(280px,76vw)}
  .action-sheet{width:calc(100vw - 20px);margin:auto 10px 10px;border-radius:20px}
  .action-sheet-body{padding:12px 14px 14px}
}

/* Final 1.5.1 viewport overrides must remain last. */
@media(max-width:720px){
  html,body{height:var(--pingme-height,100dvh)!important;min-height:0!important;position:fixed!important;inset:0;overflow:hidden!important}
  #app,.chat,aside{height:var(--pingme-height,100dvh)!important;min-height:0!important}
  .chat{grid-template-rows:auto minmax(0,1fr) auto!important;overscroll-behavior:none}
  .chat-bar{position:relative!important;top:0;z-index:10!important;min-height:calc(58px + env(safe-area-inset-top))!important;padding:calc(7px + env(safe-area-inset-top)) 6px 7px!important}
  #messages{min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain;padding-bottom:18px!important}
  #composer{position:relative!important;z-index:11!important;padding-bottom:max(7px,env(safe-area-inset-bottom))!important}
.auth-shell:not([hidden]){height:var(--pingme-height,100dvh)!important;min-height:0!important;display:block!important;overflow-y:auto!important;padding:max(18px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom))!important}

.qr-scanner-dialog{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#071116;color:#fff}
.qr-scanner-dialog::backdrop{background:#071116}
.qr-scanner-shell{min-height:100%;display:flex;flex-direction:column;padding:max(14px,env(safe-area-inset-top)) 0 max(18px,env(safe-area-inset-bottom))}
.qr-scanner-shell header{height:64px;display:flex;align-items:center;gap:14px;padding:0 18px;background:#101b21}
.qr-scanner-shell header button{width:42px;height:42px;border:0;border-radius:50%;background:transparent;color:#fff;font-size:30px}
.qr-scanner-shell h2{margin:0;font-size:25px}.qr-scanner-shell>p{margin:22px auto;text-align:center;max-width:620px;padding:0 24px;color:#d5dde0;line-height:1.45}
.qr-camera-stage{position:relative;flex:1;min-height:360px;overflow:hidden;background:#000}
#qr-camera{width:100%;height:100%;object-fit:cover}
.qr-camera-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(#071116aa,#07111622 25%,transparent 38% 62%,#07111622 75%,#071116aa);pointer-events:none}
.qr-corner{position:absolute;z-index:2;width:58px;height:58px;border-color:#fff;border-style:solid;filter:drop-shadow(0 2px 5px #0008)}
.qr-corner.top-left{left:calc(50% - 145px);top:calc(50% - 145px);border-width:4px 0 0 4px;border-radius:18px 0 0}.qr-corner.top-right{right:calc(50% - 145px);top:calc(50% - 145px);border-width:4px 4px 0 0;border-radius:0 18px 0 0}.qr-corner.bottom-left{left:calc(50% - 145px);bottom:calc(50% - 145px);border-width:0 0 4px 4px;border-radius:0 0 0 18px}.qr-corner.bottom-right{right:calc(50% - 145px);bottom:calc(50% - 145px);border-width:0 4px 4px 0;border-radius:0 0 18px}
.qr-scan-line{position:absolute;z-index:2;left:calc(50% - 132px);top:calc(50% - 120px);width:264px;height:2px;background:#35d6c7;box-shadow:0 0 15px #35d6c7;animation:qrSweep 2.2s ease-in-out infinite alternate}
@keyframes qrSweep{to{transform:translateY(240px)}}
@media(min-width:721px){.qr-scanner-dialog{width:min(520px,100vw);height:min(760px,100dvh);margin:auto;border-radius:24px}.qr-camera-stage{margin:0 22px;border-radius:24px}}
  .auth-card{width:min(100%,430px)!important;min-height:0;margin:0 auto;padding:24px 20px!important}.auth-card .logo-ring{width:76px;height:76px}.auth-card .logo{width:60px;height:60px}.auth-card h1{font-size:32px;margin-top:8px}.auth-card .tabs{margin:18px 0 14px}.auth-card label{margin:10px 0}.secure-note{margin-top:15px}
  #settings-dialog,#settings-dialog form,#status-viewer,#status-viewer form{height:var(--pingme-height,100dvh)!important;max-height:none!important}
  #settings-dialog header{position:sticky!important;top:0;z-index:3;min-height:calc(58px + env(safe-area-inset-top))!important;padding:env(safe-area-inset-top) 14px 0!important}
  .settings-body{padding:14px 12px max(28px,env(safe-area-inset-bottom))!important}.profile-hero{padding:13px!important}.profile-hero .profile-photo{width:68px!important;height:68px!important}.settings-menu>button{padding:13px 14px}
  #status-viewer form{padding-top:0!important}#status-progress{padding-top:max(8px,env(safe-area-inset-top))!important}#status-viewer header{padding:5px 10px 7px 12px!important;background:#07100f!important;color:#fff!important}
  #status-reply{padding-bottom:max(10px,env(safe-area-inset-bottom))!important}
  #mobile-nav{height:calc(76px + env(safe-area-inset-bottom))!important;padding-bottom:env(safe-area-inset-bottom)!important}#new-chat-fab{bottom:calc(90px + env(safe-area-inset-bottom))!important}
  .brand-bar{background:linear-gradient(125deg,#23356f,#6047a4)!important;color:#fff!important;border-radius:0 0 26px 26px!important;box-shadow:0 8px 24px #27346925}.brand-bar strong,.brand-bar button{color:#fff!important}
  .search-shell{margin:15px 14px 9px!important;border-radius:20px!important}.conversation{padding:12px 16px!important}
  .active-call-actions{gap:10px;width:calc(100% - 24px);justify-content:center;padding:13px 10px;border-radius:28px;background:#07131fb8;backdrop-filter:blur(16px)}
  /* The conversation list must cover the chat chrome while it is open. */
  #sidebar{z-index:20!important}
}
.bubble.mine{background:var(--mine-bubble)!important;border-bottom-right-radius:3px}.bubble:not(.mine){border-bottom-left-radius:3px}.profile-edit-badge{display:grid!important}.photo-preview-dialog,.theme-dialog{z-index:80}

/* Compact, touch-friendly message action sheet. */
.action-sheet{max-width:390px}
.action-sheet-body{padding:10px 12px 12px;border-radius:22px;background:#fff}
.action-sheet-body h2{margin:0;padding:3px 8px 9px;font-size:17px;color:#172044}
.action-sheet-body>button{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:11px;margin:4px 0;padding:10px 12px;border:0;border-radius:14px;background:#f6f7fb;text-align:left;color:#172044}
.action-sheet-body>button:active{transform:scale(.985);background:#eceff7}
.action-sheet-body>button>span:last-child{min-width:0}.action-sheet-body strong,.action-sheet-body small{display:block}.action-sheet-body strong{font-size:15px}.action-sheet-body small{margin-top:2px;color:#6c7589;font-size:11px;font-weight:500}
.action-sheet-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#e9edfa;color:#344da8;font-size:21px;font-weight:700}
.danger-text .action-sheet-icon{background:#fff0ef;color:#b42318}.danger-text strong{color:#b42318}
@media(max-width:720px){.action-sheet{width:calc(100vw - 34px)!important;max-width:390px!important;margin:auto auto max(12px,env(safe-area-inset-bottom))!important;border-radius:22px!important}}

/* Message selection, reactions and contact details. */
#message-selection-bar{position:fixed;z-index:75;left:0;right:0;top:0;min-height:64px;padding:env(safe-area-inset-top) 10px 0;display:grid;grid-template-columns:48px 38px 1fr repeat(5,48px);align-items:center;background:#fff;color:#111b21;box-shadow:0 2px 10px #111b2122}
#message-selection-bar[hidden],#message-reaction-strip[hidden]{display:none!important}
#message-selection-bar button{width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:#111b21;font-size:24px;cursor:pointer}
#message-selection-bar button:active{background:#edf0f3;transform:scale(.94)}#selected-message-count{font-size:23px;font-weight:500}
#message-reaction-strip{position:fixed;z-index:76;display:flex;align-items:center;justify-content:space-around;padding:7px 8px;border-radius:999px;background:#fff;box-shadow:0 8px 30px #111b2140;animation:reaction-pop .16s ease-out}
#message-reaction-strip button{display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:transparent;font-size:26px;cursor:pointer;transition:transform .14s ease,background .14s ease}
#message-reaction-strip button:hover,#message-reaction-strip button:active{background:#eef1f5;transform:scale(1.17)}#message-reaction-strip .reaction-more{background:#eef1f5;color:#4d5d65;font-size:28px}
@keyframes reaction-pop{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:none}}
.bubble.message-selected{filter:brightness(.89);box-shadow:0 0 0 3px #4264c780!important}.message-reactions{position:absolute;bottom:-20px;display:flex;gap:3px;z-index:2}.bubble.mine .message-reactions{right:8px}.bubble:not(.mine) .message-reactions{left:8px}
.message-reactions button{border:1px solid #dfe4eb;border-radius:999px;background:#fff;padding:2px 7px;font-size:13px;box-shadow:0 2px 5px #0002}.message-reactions button.mine{border-color:#536bc0;background:#edf0ff}
.bubble:has(.message-reactions){margin-bottom:16px}

.contact-dialog{width:min(560px,calc(100vw - 24px));max-height:min(94dvh,920px);padding:0;border:0;border-radius:20px;background:#f3f4f6;overflow:hidden}.contact-dialog form{display:grid;grid-template-rows:auto minmax(0,1fr);max-height:min(94dvh,920px)}
.contact-topbar{position:sticky;top:0;z-index:3;display:grid!important;grid-template-columns:48px 1fr 48px;align-items:center;padding:8px 10px!important;background:#fff!important;color:#111b21!important;border-bottom:1px solid #e7eaed}.contact-topbar h2{text-align:left;font-size:21px}.contact-topbar button{border:0!important;background:transparent!important;color:#111b21!important;font-size:28px!important}
.contact-menu{position:absolute;z-index:14;top:62px;right:10px;width:min(255px,calc(100% - 24px));padding:7px;border:1px solid #e5e8ec;border-radius:15px;background:#fff;box-shadow:0 10px 32px #111b2138;animation:contact-menu-in .15s ease-out}.contact-menu[hidden]{display:none!important}.contact-menu button{display:block;width:100%;padding:13px 15px;border:0;border-radius:10px;background:transparent;color:#172128;text-align:left;font-size:15px}.contact-menu button:hover,.contact-menu button:active{background:#f0f3f6}.contact-menu .danger-menu-item{color:#b42318}@keyframes contact-menu-in{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.contact-profile{overflow-y:auto;padding:22px 14px 36px!important;background:#f3f4f6}.contact-photo{width:190px;height:190px;border:0;background:linear-gradient(135deg,#4264bd,#22c7c7);font-size:68px;box-shadow:0 8px 25px #2232651c}.contact-profile>h2{font-size:29px;margin-top:15px}.contact-profile>#contact-username{font-size:18px;margin:4px 0}.contact-profile>#contact-about{margin:8px 0 0;font-size:15px}.contact-profile>#contact-presence{margin:4px 0 16px;color:#177b74}
.contact-quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:390px;margin:19px auto}.contact-quick-actions button{display:grid;place-items:center;gap:5px;min-height:86px;border:1px solid #e4e7eb;border-radius:24px;background:#fff;color:#182237}.contact-quick-actions span{font-size:28px}.contact-quick-actions small{font-size:14px;color:#5f6d76}
.contact-card{max-width:500px;margin:12px auto;padding:14px 16px;border:1px solid #e4e7eb;border-radius:17px;background:#fff;text-align:left;box-shadow:0 2px 8px #27346908}.contact-section-heading{display:flex;width:100%;justify-content:space-between;border:0;background:transparent;padding:0 0 12px;font-size:17px;color:#25323a}.contact-section-heading b{font-weight:500;color:#667781}.contact-media-strip{display:flex;gap:8px;min-height:76px;overflow-x:auto}.contact-media-strip>p{margin:auto;color:#667781}.contact-media-thumb{flex:0 0 84px;height:84px;padding:0;border:0;border-radius:12px;overflow:hidden;background:#e8ebee}.contact-media-thumb img{width:100%;height:100%;object-fit:cover}
.contact-settings-list{padding:3px 14px}.contact-settings-list>button{display:grid;grid-template-columns:44px 1fr;align-items:center;width:100%;padding:14px 2px;border:0;border-bottom:1px solid #edf0f2;background:transparent;text-align:left}.contact-settings-list>button:last-child{border-bottom:0}.contact-settings-list strong,.contact-settings-list small,.contact-encryption strong,.contact-encryption small{display:block}.contact-settings-list small,.contact-encryption small{margin-top:3px;color:#667781}.contact-row-icon{display:grid;place-items:center;font-size:24px;color:#52616a}.contact-encryption{display:grid;grid-template-columns:44px 1fr;align-items:start}.contact-updates{border-top:0;margin-top:12px;padding-top:14px}.contact-danger{display:block;margin:18px auto 0;background:#fff}
.choice-dialog{width:min(440px,calc(100vw - 28px));padding:0;border:0;border-radius:28px;background:#fff;color:#152027;box-shadow:0 20px 70px #0005}.choice-dialog::backdrop{background:#10182070;backdrop-filter:blur(1px)}.choice-dialog form{display:block!important;padding:26px 25px 18px}.choice-dialog h2{margin:0 0 12px;font-size:24px;line-height:1.24;text-align:left}.choice-dialog form>p{margin:0 0 17px;color:#667781;line-height:1.45}.choice-options{display:grid;gap:3px;margin:13px 0 22px}.choice-options label{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:13px;min-height:60px;padding:6px;border-radius:13px;cursor:pointer}.choice-options label:hover{background:#f5f7f8}.choice-options input{width:24px;height:24px;margin:0;accent-color:#4058b4}.choice-options strong,.choice-options small{display:block}.choice-options small{margin-top:3px;color:#667781}.choice-dialog footer{display:flex;justify-content:flex-end;gap:10px;padding:0!important;background:transparent!important}.choice-dialog footer button{min-width:78px;padding:11px 14px;border:0;border-radius:12px;background:transparent;color:#354fae;font-weight:700}.choice-dialog footer button[type="submit"]{background:#edf0ff}
@media(max-width:720px){
  #message-selection-bar{min-height:calc(62px + env(safe-area-inset-top));grid-template-columns:46px 32px 1fr repeat(5,42px);padding-top:env(safe-area-inset-top)}#message-selection-bar button{width:40px;height:40px;font-size:22px}
  .contact-dialog{width:100vw!important;height:var(--pingme-height,100dvh)!important;max-height:none!important;margin:0!important;border-radius:0!important}.contact-dialog form{height:var(--pingme-height,100dvh)!important;max-height:none!important}.contact-topbar{min-height:calc(58px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 8px 0!important}.contact-menu{top:calc(58px + env(safe-area-inset-top));right:8px}.contact-profile{padding:18px 12px max(34px,env(safe-area-inset-bottom))!important}.contact-photo{width:164px;height:164px}.contact-profile>h2{font-size:27px}.contact-card{margin:10px 0}.contact-quick-actions{gap:8px}.contact-quick-actions button{min-height:78px;border-radius:20px}.choice-dialog{width:calc(100vw - 30px);max-width:430px}.choice-dialog form{padding:25px 21px 17px}.choice-dialog h2{font-size:22px}
}
@media(max-width:420px){#message-selection-bar{grid-template-columns:42px 28px 1fr repeat(5,38px)}#message-selection-bar button{width:36px;height:36px;font-size:20px}}

/* Optional admin-controlled ambient effects and polished media gestures. */
#ambient-effects{position:fixed;inset:0;z-index:18;overflow:hidden;pointer-events:none;contain:strict}#ambient-effects:empty{display:none}
#ambient-effects i{position:absolute;display:block;font-style:normal;will-change:transform,opacity}
.ambient-bubbles i{left:var(--x);bottom:-45px;width:var(--size);height:var(--size);border:1px solid #6fe7dc88;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff9,#6fe7dc33 44%,#4d5cc022);box-shadow:0 0 16px #4ddbc855;animation:ambient-rise 9s var(--delay) linear infinite}
.ambient-sparkles i{left:var(--x);top:105%;color:hsl(var(--hue) 80% 58%);font-size:var(--size);text-shadow:0 0 12px currentColor;animation:ambient-rise 8s var(--delay) ease-in-out infinite}
.ambient-celebration i{left:var(--x);top:-30px;width:8px;height:15px;border-radius:3px;background:hsl(var(--hue) 82% 58%);animation:ambient-confetti 5.5s var(--delay) cubic-bezier(.16,.74,.48,1) both}
.ambient-subtle i{opacity:.24}.ambient-standard i{opacity:.42}
@keyframes ambient-rise{0%{transform:translate3d(0,0,0) scale(.75);opacity:0}12%{opacity:.48}80%{opacity:.3}100%{transform:translate3d(var(--drift),-115vh,0) scale(1.15);opacity:0}}
@keyframes ambient-confetti{0%{transform:translate3d(0,-30px,0) rotate(0);opacity:0}12%{opacity:.75}100%{transform:translate3d(var(--drift),110vh,0) rotate(720deg);opacity:0}}
body:not(.effects-off) .conversation{animation:conversation-enter .28s ease both}body:not(.effects-off) #new-chat-fab{animation:fab-breathe 3.2s ease-in-out infinite}
@keyframes conversation-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}@keyframes fab-breathe{50%{transform:translateY(-3px);box-shadow:0 9px 24px #27346936}}
.conversation.active{background:#fff!important}.conversation+.conversation{border-top:1px solid #f1f2f5}
.media-viewer-shell{transform:translateY(var(--media-drag-y,0));opacity:var(--media-drag-opacity,1);transition:transform .2s ease,opacity .2s ease}.media-viewer-shell.dragging{transition:none}.media-viewer-shell.dismissing{transform:translateY(calc(var(--media-drag-y,0px) * 1.8));opacity:0}.media-viewer-shell footer[hidden]{display:none!important}#media-viewer-content{touch-action:none;cursor:grab}#media-viewer-content:active{cursor:grabbing}
@media(max-width:720px){.conversation:hover,.conversation.active{background:#fff!important}.conversation{min-height:77px}.conversation-title-row time{font-size:12px}.media-viewer-shell header{padding-top:max(15px,env(safe-area-inset-top))}.media-viewer-shell footer{padding-bottom:max(12px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){#ambient-effects{display:none!important}}

/* Profile-photo confirmation flow and softer Settings presentation. */
.settings-body{background:
  radial-gradient(circle at 15% 8%,color-mix(in srgb,var(--pale) 72%,transparent) 0 120px,transparent 290px),
  radial-gradient(circle at 92% 38%,#20c7b712 0 90px,transparent 250px),#f7f8fc}
.settings-profile-card,.settings-menu,.settings-card{box-shadow:0 14px 38px #2734690d;border-color:#e7e9f1}
.settings-profile-card{overflow:hidden;position:relative}.settings-profile-card::after{content:"";position:absolute;right:-28px;top:-38px;width:120px;height:120px;border-radius:50%;background:linear-gradient(145deg,#4059ad18,#20c7b724);pointer-events:none}
.settings-menu button,.settings-card{animation:settings-rise .28s ease both}.settings-menu button:nth-child(2){animation-delay:.025s}.settings-menu button:nth-child(3){animation-delay:.05s}.settings-menu button:nth-child(4){animation-delay:.075s}.settings-menu button:nth-child(5){animation-delay:.1s}.settings-menu button:nth-child(6){animation-delay:.125s}
.settings-menu button{transition:background .16s ease,transform .16s ease}.settings-menu button:active{transform:scale(.985);background:#f2f4fb}.settings-icon{transition:transform .2s ease,box-shadow .2s ease}.settings-menu button:hover .settings-icon{transform:translateY(-2px) rotate(-3deg);box-shadow:0 7px 16px #4059ad20}
@keyframes settings-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.account-photo-editor{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:16px;margin:2px 0 20px;padding:14px;border:1px solid #e3e7f0;border-radius:20px;background:linear-gradient(135deg,#fbfcff,#f4f6ff);box-shadow:0 8px 24px #2734690b}
.account-photo-editor>button{position:relative;width:76px;height:76px;padding:0;border:3px solid #fff;border-radius:50%;overflow:visible;background:linear-gradient(135deg,var(--green2),var(--bright));box-shadow:0 7px 20px #27346928;color:#fff;font-size:28px;font-weight:800;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.account-photo-editor>button:hover{transform:scale(1.035);box-shadow:0 10px 26px #27346932}.account-photo-editor img{width:100%;height:100%;border-radius:50%;object-fit:cover}.account-photo-editor i{position:absolute;right:-3px;bottom:-2px;display:grid;place-items:center;width:29px;height:29px;border:3px solid #fff;border-radius:50%;background:var(--green2);color:#fff;font-size:14px;font-style:normal;box-shadow:0 4px 10px #2734692b}.account-photo-editor strong,.account-photo-editor small{display:block}.account-photo-editor strong{font-size:16px;color:#172044}.account-photo-editor small{margin-top:4px;color:#6c7589;line-height:1.35}
.photo-preview-dialog{width:min(460px,calc(100vw - 28px));padding:0;border:0;border-radius:30px;background:transparent;overflow:visible}.photo-preview-dialog::backdrop{background:#111b2d8a;backdrop-filter:blur(5px)}
.photo-preview-card{position:relative;padding:0 22px 24px;border-radius:30px;background:linear-gradient(160deg,#fff 35%,#f2f5ff);box-shadow:0 26px 80px #10182c66;overflow:hidden;animation:photo-card-in .24s cubic-bezier(.2,.8,.2,1)}.photo-preview-card::before{content:"";position:absolute;inset:-90px -70px auto auto;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,#20c7b72d,transparent 68%)}
.photo-preview-card header{position:relative;z-index:2;display:grid;grid-template-columns:1fr 42px;align-items:center;padding:18px 0 6px;background:transparent}.photo-preview-card h2{margin:0;color:#172044;font-size:22px}.photo-preview-card header button{width:40px;height:40px;border:0;border-radius:50%;background:#eef1f8;color:#34405b;font-size:26px;cursor:pointer}.photo-preview-stage{position:relative;display:grid;place-items:center;width:min(276px,72vw);aspect-ratio:1;margin:12px auto 10px;border-radius:50%;background:linear-gradient(145deg,#e6edff,#dffaf7);box-shadow:inset 0 0 0 1px #fff,0 18px 38px #27346925}.photo-preview-stage img{position:relative;z-index:2;width:88%;height:88%;border:6px solid #fff;border-radius:50%;object-fit:cover;box-shadow:0 12px 28px #17204432;animation:photo-reveal .3s ease both}.photo-orbit{position:absolute;inset:5%;border:2px dashed #4059ad50;border-radius:50%;animation:photo-orbit 16s linear infinite}.photo-orbit::after{content:"";position:absolute;left:12%;top:3%;width:13px;height:13px;border-radius:50%;background:var(--bright);box-shadow:0 0 0 6px #20c7b71c}
.photo-preview-card>p{margin:13px 10px 18px;color:#6c7589;text-align:center}.photo-preview-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.photo-preview-actions button{min-height:48px;padding:11px 14px;border:0;border-radius:15px;font-weight:800;cursor:pointer}.photo-edit-button{background:#e9edfa;color:#273469}.photo-confirm-button{background:linear-gradient(135deg,var(--green2),#5269c5);color:#fff;box-shadow:0 8px 18px #4059ad2c}.photo-confirm-button[hidden]{display:none}.photo-preview-actions:has(.photo-confirm-button[hidden]){grid-template-columns:1fr}.photo-preview-actions:has(.photo-confirm-button[hidden]) .photo-edit-button{background:linear-gradient(135deg,var(--green2),#5269c5);color:#fff}
@keyframes photo-card-in{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}@keyframes photo-reveal{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}@keyframes photo-orbit{to{transform:rotate(360deg)}}

/* Compact media preference sheet with an obvious current choice. */
.choice-dialog{width:min(388px,calc(100vw - 32px));border-radius:26px}.choice-dialog form{padding:20px 20px 17px}.choice-graphic{display:grid;place-items:center;width:54px;height:54px;margin:0 0 12px;border-radius:18px;background:linear-gradient(145deg,#e8edff,#dcfaf5);box-shadow:inset 0 0 0 1px #fff,0 8px 20px #4059ad17;font-size:25px;animation:choice-icon-in .3s ease both}.choice-dialog h2{margin-bottom:5px;font-size:21px}.choice-dialog form>p{margin-bottom:14px;font-size:13px;line-height:1.4}.choice-options{gap:8px;margin:8px 0 17px}.choice-options label{grid-template-columns:25px minmax(0,1fr);gap:11px;min-height:50px;padding:9px 12px;border:1px solid #e5e8ef;border-radius:15px;background:#fafbfe;transition:border-color .15s ease,background .15s ease,transform .15s ease}.choice-options label:has(input:checked){border-color:#8797d7;background:linear-gradient(135deg,#eef1ff,#f3fffd);box-shadow:0 5px 15px #4059ad12}.choice-options label:active{transform:scale(.985)}.choice-options input{width:20px;height:20px}.choice-options label>span{font-size:14px;font-weight:750;color:#1a2541}.choice-dialog footer{gap:8px}.choice-dialog footer button{min-width:82px;padding:10px 14px;border-radius:13px}.choice-dialog footer button:first-child{color:#68728a}.choice-dialog footer button[type="submit"]{background:linear-gradient(135deg,var(--green2),#5269c5);color:#fff;box-shadow:0 6px 14px #4059ad24}
@keyframes choice-icon-in{from{opacity:0;transform:rotate(-10deg) scale(.82)}to{opacity:1;transform:none}}
@media(max-width:720px){.account-photo-editor{grid-template-columns:66px minmax(0,1fr);padding:12px}.account-photo-editor>button{width:66px;height:66px}.photo-preview-dialog{width:calc(100vw - 26px);max-width:430px}.photo-preview-card{padding:0 18px 20px}.photo-preview-stage{width:min(250px,68vw)}.choice-dialog{width:calc(100vw - 34px);max-width:388px;margin:auto!important}.choice-dialog form{padding:18px 17px 15px}.choice-options label{min-height:48px}}
@media(prefers-reduced-motion:reduce){.settings-menu button,.settings-card,.photo-preview-card,.photo-preview-stage img,.choice-graphic{animation:none!important}.photo-orbit{animation:none!important}}

/* v173: native-feeling chat search, clean profile-photo editing and scheduled celebrations. */
.chat{position:relative}.chat-search-bar{position:absolute;z-index:45;inset:0 0 auto;display:grid;grid-template-columns:42px minmax(0,1fr) auto 42px 42px;align-items:center;gap:6px;min-height:76px;padding:max(10px,env(safe-area-inset-top)) 12px 10px;background:color-mix(in srgb,var(--header) 96%,#fff);border-bottom:1px solid var(--line);box-shadow:0 8px 24px #1720441c}.chat-search-bar[hidden]{display:none}.chat-search-bar button{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--text);font-size:22px}.chat-search-bar input[type=search]{min-width:0;height:46px;border:1px solid var(--line);border-radius:23px;padding:0 16px;background:var(--surface);font:inherit;outline:0}.chat-search-bar input[type=search]:focus{border-color:var(--green2);box-shadow:0 0 0 3px color-mix(in srgb,var(--green2) 16%,transparent)}.chat-search-bar small{white-space:nowrap;color:var(--muted);font-weight:700}.chat-search-date-input{position:absolute;width:1px!important;height:1px!important;opacity:0;pointer-events:none}.bubble.search-match{outline:2px solid #f3c333;outline-offset:2px}.bubble.search-current{outline:3px solid var(--green2);animation:search-pulse .8s ease}
.photo-preview-stage{width:min(280px,72vw);aspect-ratio:1;border-radius:50%;padding:8px;background:linear-gradient(145deg,#e8edff,#dcfaf5);box-shadow:0 15px 36px #17204420}.photo-preview-stage img{width:100%;height:100%;border:5px solid #fff;border-radius:50%;object-fit:cover;background:#eef1f7;box-shadow:0 8px 22px #17204424}.photo-preview-actions{grid-template-columns:1fr 1fr 1fr}.photo-remove-button{background:#fff0f0!important;color:#b42318!important}.photo-preview-actions:has(.photo-confirm-button[hidden]){grid-template-columns:1fr 1fr}.photo-preview-actions:has(.photo-confirm-button[hidden]) .photo-edit-button{background:linear-gradient(135deg,var(--green2),#5269c5);color:#fff}
#celebration-effects{position:fixed;z-index:64;inset:0;overflow:hidden;pointer-events:none}#celebration-effects:empty{display:none}#celebration-effects i{position:absolute;left:var(--x);bottom:-70px;font-style:normal;font-size:30px;filter:drop-shadow(0 4px 6px #0003);animation:celebration-rise var(--duration) var(--delay) linear infinite}.celebration-fireworks i,.celebration-confetti i{top:-50px;bottom:auto;animation-name:celebration-fall}.celebration-banner{position:absolute;left:50%;top:max(92px,calc(env(safe-area-inset-top) + 70px));transform:translateX(-50%);max-width:min(88vw,520px);padding:12px 22px;border-radius:999px;background:#101a24e8;color:#fff;font-weight:800;text-align:center;box-shadow:0 12px 30px #0004;animation:celebration-banner-in .45s cubic-bezier(.2,.8,.2,1)}
@keyframes search-pulse{50%{transform:scale(1.025)}}@keyframes celebration-rise{from{transform:translate3d(0,0,0) rotate(0);opacity:0}10%{opacity:1}to{transform:translate3d(var(--drift),-115vh,0) rotate(360deg);opacity:.1}}@keyframes celebration-fall{from{transform:translate3d(0,0,0) rotate(0);opacity:0}10%{opacity:1}to{transform:translate3d(var(--drift),115vh,0) rotate(720deg);opacity:.1}}@keyframes celebration-banner-in{from{opacity:0;transform:translate(-50%,-18px) scale(.94)}}
@media(max-width:720px){.chat-search-bar{position:fixed;top:0;left:0;right:0;grid-template-columns:38px minmax(0,1fr) auto 38px 38px}.chat-search-bar button{width:38px;height:38px}.chat-search-bar small{font-size:12px}.photo-preview-actions{grid-template-columns:1fr 1fr}.photo-preview-actions .photo-confirm-button{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){#celebration-effects{display:none!important}.bubble.search-current{animation:none}}