*{box-sizing:border-box;margin:0;padding:0}
:root{
--black:#0A0908;--surface:#131210;--surface2:#1A1815;--surface3:#222019;
--border:#252220;--border2:#302C28;
--gold:#682C43;--gold-dim:rgba(104,44,67,0.1);--gold-border:rgba(104,44,67,0.22);
--cream:#EDE7DC;--cream2:#B8B0A6;--muted:#6A6460;--hint:#3A3632;
--green:#71947C;--green-dim:rgba(74,155,111,0.1);
--red:#C87588;--red-dim:rgba(192,57,43,0.1);
--blue:#60A5FA;--blue-dim:rgba(96,165,250,0.1);
}
/* Keeps declared font sizes rendering the same on iOS Safari as everywhere
else — without this, Safari's own text-size heuristics can adjust
rendered size independently of the CSS px value in some layouts. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#fff;color:var(--cream);min-height:100vh;min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
/* Every screen already sets its own background (all white/gold themed now),
so the document background is only ever visible in brief rendering gaps —
e.g. the on-screen keyboard resizing the visual viewport faster than
#s-chat's children can re-tile. It used to be black here, which showed up
as a black strip above the keyboard on Android/Gboard in exactly that gap;
white blends in instead. */
button{cursor:pointer;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;border:none;outline:none}
input,textarea{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;outline:none}
/* min-height:100dvh (not just 100vh) matters specifically on Android
Chrome: 100vh there is sized against the viewport with the address bar
hidden, but on first load the address bar is visible, so the actually
visible area is shorter than 100vh — a min-height:100vh box then extends
past the bottom of what's on screen, forcing a scroll even though nothing
is really "overflowing" in the usual sense. 100dvh tracks the real
currently-visible viewport instead. */
.screen{display:none;min-height:100vh;min-height:100dvh;overflow-y:auto}
.screen.active{display:flex}
#s-chat.active{overflow:hidden;height:100vh;height:100dvh}
/* Present in the initial HTML (not created after window.load), so the browser
never paints the landing page while locally saved vaults are restoring. */
#restore-skeleton-overlay{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:linear-gradient(150deg,#FBF7F8 0%,#F7EEF1 100%);opacity:1;transition:opacity .18s ease;overflow:hidden}
#restore-skeleton-overlay::before{content:'';position:absolute;width:min(78vw,440px);aspect-ratio:1;border-radius:50%;background:rgba(200,117,136,.12);filter:blur(72px);transform:translate(-42%,-38%)}
#restore-skeleton-overlay.leaving{opacity:0;pointer-events:none}
.startup-brand{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;color:#271D25}
.startup-mark{width:82px;height:82px;border-radius:25px;display:grid;place-items:center;background:#682C43;box-shadow:0 18px 44px rgba(104,44,67,.24)}
.startup-mark svg{width:39px;height:39px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.startup-word{font:750 27px/1 'Manrope','Inter',sans-serif;letter-spacing:-.035em}
.startup-pulse{display:flex;gap:6px;margin-top:3px}
.startup-pulse span{width:5px;height:5px;border-radius:50%;background:#C87588;animation:startup-pulse 1.15s ease-in-out infinite}
.startup-pulse span:nth-child(2){animation-delay:.16s}.startup-pulse span:nth-child(3){animation-delay:.32s}
@keyframes startup-pulse{0%,70%,100%{opacity:.28;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){#restore-skeleton-overlay{transition:none}.startup-pulse span{animation:none;opacity:.7}}
/* -- LANDING -- */
/* Bottom padding is intentionally larger than the sides — .landing-footer
is position:fixed at the very bottom of the viewport, and on shorter
screens (many Android phones, especially with the install button now
always visible there) the vertically-centered content column could
otherwise grow tall enough to sit underneath it. This reserves enough
room so centered content never gets covered. */
#s-landing{flex-direction:column;align-items:center;justify-content:center;position:relative;padding:24px 24px calc(92px + env(safe-area-inset-bottom));}
#s-landing.active{overflow-y:visible}
.landing-glow{position:absolute;inset:0;background:radial-gradient(ellipse 55% 45% at 50% 38%,rgba(104,44,67,0.04) 0%,transparent 68%);pointer-events:none}
/* Landing doubles as both the app's true entry screen (first launch —
nothing to go back to) and the "add another room" screen reached via the
"+" tab from an existing chat (where there's very much something to go
back to, and previously no way to reach it without picking a card and
starting a new room). Hidden by default; shown only in the latter case —
see the toggle in showScreen(). */
.landing-back-btn{display:none;position:fixed;top:calc(16px + env(safe-area-inset-top));left:16px;z-index:5;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.9);border:0.5px solid #E8E2DA;color:#9A8C7E;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:all .15s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.landing-back-btn.show{display:flex}
.landing-back-btn:hover{color:#4A3F35;border-color:#D0CAC0}
.landing-back-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* margin-bottom lives on the class (not inline on the element) specifically
so the height-based media queries below can override it — an inline
style would always win over a media-query rule regardless of viewport. */
.logo{text-align:center;margin-bottom:44px}
.logo-rule{height:1px;background:var(--gold);margin:0 auto 18px;width:108px}
.logo-rule.go{width:108px}
.logo-name{font-family:'Cormorant Garamond',serif;font-size:clamp(52px,9vw,88px);font-weight:300;letter-spacing:.12em;color:var(--cream);opacity:1}
.logo-name.go{opacity:1}
.logo-sub{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:10px;opacity:1}
.logo-sub.go{opacity:1}
/* transition here is specifically for the tagline ROTATION (see
startLandingTaglineRotation) — .tagline is only ever used on #logoTag,
so adding it to the base rule is safe; nothing else opacity-toggles
this element via .go (that class is a no-op for opacity on this
element already, see the identical value below — vestigial from a
shared entrance-animation pattern with the other logo elements). */
.tagline{font-family:'Cormorant Garamond',serif;font-size:clamp(22px,4vw,32px);font-weight:300;font-style:italic;color:var(--cream2);letter-spacing:0.04em;text-align:center;line-height:1.6;max-width:480px;margin:0 auto 52px;opacity:1;transition:opacity .35s ease}
.tagline.go{opacity:1}
.cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;width:100%;max-width:660px;opacity:1}
.cards.go{opacity:1}
.card{background:var(--surface);border:0.5px solid var(--border2);border-radius:3px;padding:20px 18px;cursor:pointer;transition:transform .2s,border-color .15s,background .15s,box-shadow .2s,opacity .35s;text-align:left}
/* card-hidden/reveal is a plain opacity+transform TRANSITION (not a
@keyframes animation) driven by triggerLandingAnim() — deliberately, so
the card's transform property is free again the instant it's done and
:hover/:active below keep working normally afterward. A fill-forwards
keyframe animation would keep "winning" the cascade on that property
indefinitely and silently break hover/press feedback post-entrance. */
.card.card-hidden{opacity:0;transform:translateY(10px)}
.card:hover{border-color:var(--gold-border);background:var(--surface3);transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.05)}
.card:active{transform:translateY(0) scale(.97);box-shadow:none}
.card-icon{width:34px;height:34px;border-radius:2px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.card-icon svg{width:16px;height:16px;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card-title{font-size:13px;font-weight:500;color:var(--cream);margin-bottom:4px}
.card-desc{font-size:11px;color:var(--muted);line-height:1.6;font-style:italic}
.landing-footer{position:fixed;bottom:0;left:0;right:0;text-align:center;font-size:10px;color:var(--hint);letter-spacing:.08em;text-transform:uppercase;padding:14px;background:linear-gradient(transparent,var(--black) 40%);}
/* On a shorter viewport (most phones once the browser chrome/address bar
is accounted for) the logo + tagline + three cards + footer-clearance
padding add up to more than fits without scrolling. Rather than shrink
text (readability matters more), tighten the vertical gaps between
sections — the content itself doesn't need to change size, just sit
closer together. */
@media(max-height:700px){
#s-landing{padding-top:16px}
.logo{margin-bottom:24px}
.logo-rule{margin-bottom:12px}
.card{padding:14px 16px}
}
@media(max-height:600px){
#s-landing{padding-top:12px}
.logo{margin-bottom:16px}
.tagline{font-size:15px}
}
/* -- SETUP -- */
#s-setup{flex-direction:column;align-items:center;justify-content:center;padding:24px}
.setup-card{background:var(--surface);border:0.5px solid var(--border2);border-radius:3px;padding:36px 32px;width:100%;max-width:380px}
.setup-back{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer;margin-bottom:24px;background:none;transition:color .15s;padding:0}
.setup-back:hover{color:var(--cream2)}
.setup-back svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.setup-logo{text-align:center;margin-bottom:24px}
.setup-logo .rule{height:1px;background:var(--gold);width:60px;margin:0 auto 12px}
.setup-logo span{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:300;letter-spacing:.12em;color:var(--cream)}
.setup-title{font-size:16px;font-weight:400;color:var(--cream2);margin-bottom:20px;text-align:center}
.field{margin-bottom:14px;transition:opacity .35s,transform .35s}
.field.field-hidden{opacity:0;transform:translateY(8px)}
.field label{display:block;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field input{width:100%;background:var(--surface2);border:0.5px solid var(--border2);border-radius:2px;padding:10px 13px;font-size:16px;color:var(--cream);transition:border-color .15s,box-shadow .15s}
.field input:focus{border-color:var(--gold-border);box-shadow:0 0 0 3px rgba(104,44,67,.12)}
.field input::placeholder{color:var(--hint)}
.field-note{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.5}
.name-field-wrap{position:relative}
.name-field-wrap input{padding-right:42px}
.name-shuffle-btn{position:absolute;top:0;right:0;bottom:0;width:38px;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;color:#682C43;opacity:0.75;transition:opacity .15s,transform .15s}
.name-shuffle-btn:hover{opacity:1}
.name-shuffle-btn:active{transform:rotate(80deg)}
.name-shuffle-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-gold{width:100%;background:var(--gold);color:var(--black);font-size:15px;font-weight:500;letter-spacing:.05em;padding:13px;border-radius:2px;border:none;transition:background .15s,transform .1s;margin-top:6px}
.btn-gold:hover{background:#542237}
.btn-gold:disabled{opacity:.5;cursor:not-allowed}
.err-msg{font-size:13px;color:var(--red);margin-top:8px;text-align:center;display:none}
/* -- WAITING -- */
#s-waiting{flex-direction:column;align-items:center;justify-content:center;padding:24px}
.waiting-card{background:var(--surface);border:0.5px solid var(--border2);border-radius:3px;padding:40px 36px;width:100%;max-width:380px;text-align:center}
.w-logo{margin-bottom:28px}
.w-logo .rule{height:1px;background:var(--gold);width:60px;margin:0 auto 12px}
.w-logo span{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:300;letter-spacing:.12em;color:var(--cream)}
.w-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:300;color:var(--cream);margin-bottom:6px}
.w-sub{font-size:13px;color:var(--muted);margin-bottom:28px;line-height:1.6}
.code-box{background:var(--surface2);border:0.5px solid var(--gold-border);border-radius:3px;padding:16px 20px;margin-bottom:20px;transition:box-shadow .6s,background .15s;cursor:pointer}
.code-box:active{background:var(--surface3)}
.code-box.code-lit{box-shadow:0 0 0 3px rgba(104,44,67,.14)}
.code-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.code-value{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:400;letter-spacing:.08em;color:var(--gold);word-break:break-all}
/* Secondary, low-weight affordance for the "share via code" path — Share/
Copy below stay the one obvious primary action (full link message, right
default for most people); this just makes the bare code itself tappable
for anyone who specifically wants only the code (reading it aloud,
writing it down, or avoiding a link's automatic preview-fetch). */
.code-tap-hint{font-size:10px;letter-spacing:.04em;color:var(--hint);margin-top:8px}
.code-value .code-char{display:inline-block;opacity:0;transform:translateY(6px) scale(.85);animation:code-char-in .35s ease forwards}
/* The server-appended random suffix on a named vault's code — same font,
size and reveal animation as the rest, only the color differs, so the
label/suffix boundary is visible without reading the note below. See
revealCode()'s labelLen parameter. */
.code-value .code-char.code-char-suffix{color:#C87588}
@keyframes code-char-in{to{opacity:1;transform:translateY(0) scale(1)}}
.code-actions{display:flex;gap:8px;justify-content:center;margin-bottom:20px}
.copy-btn,.share-btn{background:none;border:0.5px solid var(--border2);border-radius:2px;padding:7px 16px;font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;transition:all .15s}
.copy-btn:hover,.share-btn:hover{border-color:var(--gold-border);color:var(--gold)}
.copy-btn svg,.share-btn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.share-btn{background:var(--gold);border-color:var(--gold);color:var(--black)}
.share-btn:hover{background:#542237;color:var(--black)}
.w-pulse{display:flex;align-items:center;justify-content:center;gap:5px;margin-bottom:24px}
.pulse-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.3;animation:pulse-seq 1.4s infinite}
.pulse-dot:nth-child(2){animation-delay:.2s}.pulse-dot:nth-child(3){animation-delay:.4s}
@keyframes pulse-seq{0%,80%,100%{opacity:.3}40%{opacity:1}}
.w-note{font-size:12px;color:var(--hint);line-height:1.6}
.close-btn{background:none;border:0.5px solid var(--border);border-radius:2px;padding:8px 20px;font-size:12px;color:var(--muted);margin-top:20px;display:block;width:100%;transition:all .15s}
.close-btn:hover{border-color:var(--red);color:var(--red)}
/* -- CHAT -- */
#s-chat{flex-direction:column;height:100vh;height:100dvh;overflow:hidden;background:#fff}
.chat-hdr{flex-shrink:0;background:#fff;border-bottom:1px solid #EFEFEF;padding:env(safe-area-inset-top) 12px 0;height:calc(56px + env(safe-area-inset-top));display:flex;align-items:center;gap:8px;box-shadow:0 1px 4px rgba(0,0,0,0.06)}
.chat-hdr.hidden{display:none}
/* Multi-select bar — replaces the normal header while picking messages to delete */
.select-bar{display:none;flex-shrink:0;align-items:center;gap:10px;background:#1A1916;color:#fff;padding:env(safe-area-inset-top) 14px 0;height:calc(56px + env(safe-area-inset-top))}
.select-bar.show{display:flex}
.select-bar-cancel{background:none;border:none;color:#fff;font-size:20px;line-height:1;cursor:pointer;padding:4px 6px;opacity:.85}
.select-bar-cancel:hover{opacity:1}
.select-bar-count{flex:1;font-size:14px;font-weight:500}
.select-bar-delete{background:rgba(255,255,255,0.12);border:none;color:#fff;font-size:16px;border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.select-bar-delete:disabled{opacity:.35;cursor:not-allowed}
.chat-hdr-logo{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:400;letter-spacing:.1em;color:#1A1916;flex-shrink:0}
/* Two zones instead of the old flat row of seven-ish competing pieces:
identity (logo + room name + status dot) on the left, actions (settings,
Leave, Close & erase) pinned right via margin-left:auto. The permanent-
room 🔗 badge and the 🔒 E2E badge that used to live here were both pure
duplicates — the room's permanence is already shown in Settings > This
room, and encryption confirmation now lives on the tappable e2e-bar
directly below instead of a second badge up here. */
.chat-hdr-identity{display:flex;align-items:center;gap:8px;min-width:0;flex:1;overflow:hidden}
.chat-hdr-actions{display:flex;align-items:center;margin-left:auto;flex-shrink:0}
.chat-hdr-room{font-size:12px;color:#888;font-family:monospace;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px;flex-shrink:1;min-width:0;cursor:pointer}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}
.status-dot.away{background:#CCC}
@media(max-width:640px){
.leave-btn{margin-left:6px}
.destroy-btn{margin-left:4px}
}
.leave-btn{background:none;border:1px solid #D0CAC0;border-radius:20px;padding:5px 10px;font-size:11px;color:#7A6E65;letter-spacing:.03em;transition:all;flex-shrink:0;white-space:nowrap;cursor:pointer;transition:.15s;margin-left:12px}
.leave-btn:hover{border-color:#682C43;color:#682C43;background:rgba(104,44,67,0.05)}
.destroy-btn{background:none;border:1px solid #C87588;border-radius:20px;padding:5px 10px;font-size:11px;color:#C87588;letter-spacing:.03em;flex-shrink:0;white-space:nowrap;cursor:pointer;transition:all .15s;margin-left:8px}
.destroy-btn:hover{border-color:#e53e3e;color:#e53e3e;background:#fff5f5}
.call-btn{background:none;border:1px solid rgba(104,44,67,.4);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;margin-left:8px;transition:.15s;padding:0}
.call-btn svg{width:18px;height:18px;fill:none;stroke:#682C43;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.call-btn:hover{background:rgba(104,44,67,.08)}
.call-btn:disabled{opacity:.3;cursor:not-allowed}
.call-btn:disabled:hover{background:none}
.e2e-bar{flex-shrink:0;background:#FFFBF0;border-top:1px solid #F0E8CC;border-bottom:1px solid #F0E8CC;padding:6px 14px;font-size:11px;color:#682C43;text-align:center;letter-spacing:.04em;font-weight:500}
/* -- ROOM SWITCHER (multi-room tabs) -- */
.room-tabs{display:none;flex-shrink:0;background:#fff;border-bottom:1px solid #EFEFEF;padding:6px 10px;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;align-items:center}
.room-tabs.show{display:flex}
.room-tabs::-webkit-scrollbar{height:0}
.room-tab{position:relative;flex-shrink:0;display:flex;align-items:center;gap:6px;background:#F5F5F5;border:1px solid transparent;border-radius:16px;padding:6px 12px;font-size:12px;color:#666;cursor:pointer;white-space:nowrap;transition:all .15s;font-family:inherit}
.room-tab.active{background:rgba(104,44,67,0.13);border-color:rgba(104,44,67,0.4);color:#1A1510;font-weight:500}
.room-tab .rt-dot{width:6px;height:6px;border-radius:50%;background:#CCC;flex-shrink:0}
.room-tab .rt-dot.online{background:var(--green)}
.room-tab .rt-badge{background:#C87588;color:#fff;border-radius:9px;min-width:16px;height:16px;font-size:10px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;line-height:1;font-weight:600}
.room-tab-add{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:#fff;border:1px dashed #D0CAC0;color:#9A8C7E;font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;padding:0}
.room-tab-add:hover{border-color:var(--gold);color:var(--gold)}
.room-tab-add:disabled{opacity:.4;cursor:not-allowed}
.room-tab-add svg{width:13px;height:13px}
/* -- VAULT INBOX --
This is the returning-user home, not a message archive. Vault metadata is
local to this device and previews are concealed unless the user explicitly
opts in for the current device. */
#s-vault-list{flex-direction:column;height:100vh;height:100dvh;overflow:hidden;background:#FBF7F8;color:#271D25}
.vault-list-hdr{flex-shrink:0;background:#682C43;color:#fff;padding:calc(16px + env(safe-area-inset-top)) 20px 16px;display:flex;align-items:center;gap:13px}
.vault-list-heading{min-width:0;flex:1}
.vault-list-title{font-size:26px;line-height:1.05;font-weight:700;color:#fff;letter-spacing:-.025em}
.vault-list-search{min-width:0;flex:1}
.vault-search-input{width:100%;background:rgba(255,255,255,.14);border:0;border-radius:11px;color:#fff;font-size:16px;padding:9px 12px;outline:0}
.vault-search-input::placeholder{color:rgba(255,255,255,.65)}
.vault-list-nav{display:flex;align-items:center;gap:8px;flex-shrink:0}
.vault-list-settings{width:42px;height:42px;border-radius:50%;border:0;background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.vault-list-settings:active{background:rgba(255,255,255,.12)}
.vault-list-settings svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vault-list-main{flex:1;min-height:0;display:flex;flex-direction:column;width:min(100%,760px);margin:0 auto;padding:0 0 88px}
.vault-list-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;border:0;border-radius:0;box-shadow:none}
.status-rail{display:flex;gap:12px;overflow-x:auto;padding:10px 14px 5px;background:#fff;border-bottom:1px solid #F1E9EB;scrollbar-width:none;flex:none}.status-rail::-webkit-scrollbar{display:none}.status-person{width:62px;flex:0 0 62px;border:0;background:transparent;padding:0;color:#44383E;text-align:center;cursor:pointer}.status-ring{display:block;width:58px;height:58px;margin:0 auto 6px;border-radius:50%;padding:3px;background:conic-gradient(#C87588 var(--status-progress,100%),#E4D9DD 0);position:relative;box-sizing:border-box;overflow:visible}.status-ring.viewed{background:#D8CFD2}.status-page-row .status-ring{margin:0}.status-avatar{width:100%;height:100%;border:2px solid #fff;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--avatar-bg,#F2E8EC);color:var(--avatar-fg,#682C43);font:700 18px/1 Manrope,sans-serif;box-sizing:border-box}.status-avatar img{width:100%;height:100%;display:block;object-fit:cover}.status-add{position:absolute;right:2px;bottom:2px;width:19px;height:19px;border-radius:50%;background:#682C43;color:#fff;border:2px solid #fff;display:grid;place-items:center;font:700 14px/1 sans-serif;box-sizing:border-box}.status-person-name{display:block;font:600 10.5px/1.2 Inter,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-overlay{position:fixed;inset:0;z-index:10020;background:#171216;color:#fff;display:flex;flex-direction:column}.status-progress{display:flex;gap:4px;padding:calc(12px + env(safe-area-inset-top)) 12px 8px}.status-progress span{height:3px;background:#ffffff55;border-radius:4px;flex:1;overflow:hidden}.status-progress span i{display:block;height:100%;background:#fff;width:0}.status-progress span.done i{width:100%}.status-progress span.active i{animation:statusTimer var(--status-duration,6s) linear forwards}@keyframes statusTimer{to{width:100%}}.status-view-head{display:flex;align-items:center;gap:10px;padding:7px 14px 12px}.status-view-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#F2E8EC;color:#682C43;font-weight:700}.status-view-avatar img{width:100%;height:100%;object-fit:cover}.status-view-name{font:700 14px Inter,sans-serif}.status-view-time{font:500 10px Inter,sans-serif;color:#ffffffaa;margin-top:3px}.status-view-close{margin-left:auto;border:0;background:transparent;color:#fff;font-size:28px}.status-stage{position:relative;flex:1;min-height:0;display:grid;place-items:center;overflow:hidden;padding:0;background:#000}.status-stage>img,.status-stage>video{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;border-radius:0}.status-video-loading{width:100%;height:100%;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;font:650 14px/1.45 Inter,sans-serif;color:#ffffffcc;text-align:center}.status-video-loading button{min-height:42px;border-radius:13px;border:1px solid #ffffff44;background:#ffffff18;color:#fff;padding:0 18px;font:700 13px Inter,sans-serif}.status-video-spinner{width:34px;height:34px;border-radius:50%;border:3px solid #ffffff38;border-top-color:#fff;animation:statusSpin .8s linear infinite}@keyframes statusSpin{to{transform:rotate(360deg)}}.status-text-card{width:min(86vw,520px);aspect-ratio:4/5;border-radius:25px;padding:34px;display:grid;place-items:center;text-align:center;background:linear-gradient(145deg,#7B2949,#35101F);font:700 clamp(24px,6vw,42px)/1.28 Manrope,sans-serif;box-shadow:0 24px 70px #0007}.status-tap-zone{position:absolute;top:0;bottom:0;width:40%;border:0;background:transparent}.status-prev{left:0}.status-next{right:0}.status-stage>.status-video-player{opacity:0}.status-stage>.status-video-player.ready{opacity:1}.status-video-startup{position:absolute;inset:0;z-index:2;background:#000;display:grid;place-items:center}.status-view-actions{padding:12px 16px calc(14px + env(safe-area-inset-bottom));display:flex;gap:9px}.status-view-actions button{min-height:44px;border-radius:14px;border:1px solid #ffffff33;background:#ffffff13;color:#fff;padding:0 16px;font:650 13px Inter,sans-serif}.status-view-actions .status-reply{flex:1;text-align:left}.status-view-actions.status-owner-actions{justify-content:center;gap:18px}.status-icon-action{width:54px;height:54px;min-height:54px!important;padding:0!important;display:grid;place-items:center;border-radius:18px!important}.status-icon-action svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.status-composer{position:fixed;inset:0;z-index:10030;background:rgba(39,29,37,.58);display:grid;place-items:end center;padding:18px}.status-compose-card{width:min(100%,560px);background:#fff;color:#271D25;border-radius:24px;padding:20px;margin-bottom:env(safe-area-inset-bottom);box-shadow:0 24px 80px #0005}.status-compose-card h2{font:750 21px Manrope,sans-serif;margin:0 0 14px}.status-compose-card textarea{width:100%;min-height:110px;resize:none;border:1px solid #DDCFD5;border-radius:15px;padding:14px;font:500 16px/1.45 Inter,sans-serif;box-sizing:border-box}.status-compose-row{display:flex;gap:9px;margin-top:11px}.status-compose-row button,.status-compose-card>button{min-height:44px;border-radius:13px;border:1px solid #DBCBD1;background:#fff;color:#682C43;padding:0 15px;font:700 13px Inter,sans-serif}.status-compose-row .primary{background:#682C43;color:#fff;border-color:#682C43;flex:1}.status-compose-step[hidden]{display:none}.status-compose-copy{margin:-5px 0 14px;color:#75656D;font:500 12px/1.5 Inter,sans-serif}.status-audience{max-height:260px;overflow:auto;margin:12px 0;border:1px solid #EEE5E8;border-radius:13px;padding:8px}.status-audience label{display:flex;align-items:center;gap:9px;padding:10px 8px;font:600 13px Inter,sans-serif}.status-media-preview{max-height:240px;max-width:100%;display:block;margin:10px auto;border-radius:13px}.status-media-preview[hidden]{display:none}#s-status-page{flex-direction:column}.status-page-head{display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 16px 12px;background:#fff;border-bottom:1px solid #F1E9EB;flex:none}.status-page-back{width:40px;height:40px;flex:0 0 40px;border-radius:13px;background:#F4E9ED;color:#682C43;display:grid;place-items:center;border:0;cursor:pointer}.status-page-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.status-page-head h1{flex:1;margin:0;font:750 19px Manrope,sans-serif;color:#271D25}.status-page-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;padding-bottom:90px}.status-page-section-label{padding:16px 16px 6px;font:700 11px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#8A7A82}.status-page-row{display:flex;align-items:center;gap:13px;width:100%;padding:8px 16px;border:0;background:none;text-align:left;cursor:pointer;color:#271D25}.status-page-row:active{background:#FBF5F7}.status-page-row-text{flex:1;min-width:0}.status-page-row-text strong{display:block;font:700 15px Inter,sans-serif;color:#271D25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-page-row-text span{display:block;margin-top:2px;font:500 12px Inter,sans-serif;color:#8A7A82}.status-page-empty{padding:70px 28px;text-align:center;color:#8A7A82;font:600 13px/1.55 Inter,sans-serif}
.status-overlay{background:#090709;height:100dvh}.status-view-head{display:grid;grid-template-columns:38px 36px minmax(0,1fr) 40px;gap:9px;padding:6px 12px 11px}.status-view-back,.status-view-menu{width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:#fff;display:grid;place-items:center;padding:0}.status-view-back svg,.status-view-menu svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.status-view-menu svg circle{fill:currentColor;stroke:none}.status-view-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-view-actions{padding:11px 14px calc(13px + env(safe-area-inset-bottom));align-items:center;background:linear-gradient(180deg,transparent,#090709 28%)}.status-peer-actions{display:flex;width:100%;gap:9px;align-items:center}.status-reply-pill{min-width:0;flex:1;height:52px;border-radius:26px;border:1px solid #ffffff31;background:#ffffff17;display:flex;align-items:center;padding:0 8px 0 18px;gap:4px}.status-reply-launch{flex:1!important;min-width:0!important;border:0!important;background:transparent!important;text-align:left!important;padding:0!important;font:600 15px Inter,sans-serif!important}.status-quick-reaction{width:42px;min-width:42px!important;padding:0!important;border:0!important;background:transparent!important;font-size:23px!important}.status-heart{width:52px;min-width:52px!important;height:52px;min-height:52px!important;border-radius:50%!important;padding:0!important;display:grid;place-items:center}.status-heart svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.9}.status-overflow{position:absolute;z-index:8;top:calc(62px + env(safe-area-inset-top));right:12px;width:min(300px,calc(100vw - 36px));padding:9px;background:#fff;color:#271d25;border-radius:20px;box-shadow:0 18px 60px #0008;display:grid;gap:2px}.status-overflow[hidden]{display:none}.status-overflow button{min-height:49px;border:0;border-radius:12px;background:transparent;color:#271d25;text-align:left;padding:0 17px;font:650 15px Inter,sans-serif}.status-overflow button:active{background:#f5ecef}.status-overflow .danger{color:#a33d53}.status-inline-reply{display:none;width:100%;flex-direction:column;gap:10px}.status-view-actions.replying .status-peer-actions{display:none}.status-view-actions.replying .status-inline-reply{display:flex}.status-reaction-tray{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:4px}.status-reaction-tray button{border:0;background:transparent;padding:0;min-height:38px;font-size:26px}.status-reply-compose{display:grid;grid-template-columns:46px minmax(0,1fr) 46px 46px;gap:7px;align-items:center}.status-reply-compose>button{width:46px;min-width:46px;padding:0;border-radius:50%;display:grid;place-items:center}.status-reply-compose svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.status-reply-compose input{width:100%;height:48px;border-radius:24px;border:1px solid #ffffff38;background:#ffffff18;color:#fff;padding:0 15px;font:600 15px Inter,sans-serif;box-sizing:border-box;outline:none}.status-reply-compose input::placeholder{color:#ffffffa8}.status-reply-send{background:#8f3455!important;border-color:#b55879!important}.status-reply-send[hidden],.status-reply-mic[hidden]{display:none}
.status-tap-zone{z-index:2}
.status-video-manual-play{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border:0;border-radius:50%;display:grid;place-items:center;background:#fff;color:#35101F;box-shadow:0 8px 28px #0008;font:800 25px/1 sans-serif}.status-video-sound{position:absolute;z-index:4;right:18px;bottom:18px;width:46px;height:46px;border:1px solid #ffffff66;border-radius:50%;display:grid;place-items:center;background:#1b1419cc;color:#fff;box-shadow:0 5px 18px #0007;font:700 20px/1 sans-serif}
.status-video-loading{pointer-events:none}.status-video-loading button{position:relative;z-index:3;pointer-events:auto}
.status-video-loading.has-preview{position:relative;padding:0;overflow:hidden;background:#000}.status-video-loading-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.status-video-loading.has-preview .status-video-spinner{position:relative;z-index:2;box-shadow:0 0 0 12px #0005}.status-audience label{gap:13px;padding:13px 10px;font:650 17px/1.35 Inter,sans-serif}.status-audience input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:24px;height:24px;flex:0 0 24px;margin:0;border:2px solid #BDAEB4;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 5px #fff;transition:background .16s ease,border-color .16s ease}.status-audience input[type="checkbox"]:checked{background:#682C43;border-color:#682C43}.status-audience input[type="checkbox"]:focus-visible{outline:3px solid #C8758866;outline-offset:2px}.status-composer.audience-open{padding:0;background:#fff;place-items:stretch}.status-composer.audience-open .status-compose-card{width:100%;height:100dvh;max-width:none;margin:0;padding:calc(24px + env(safe-area-inset-top)) 20px calc(18px + env(safe-area-inset-bottom));border-radius:0;box-shadow:none;box-sizing:border-box}.status-composer.audience-open #status-compose-audience{height:100%;display:flex;flex-direction:column;min-height:0}.status-composer.audience-open #status-compose-audience[hidden]{display:none}.status-composer.audience-open .status-compose-card h2{font-size:28px;margin-bottom:12px}.status-composer.audience-open .status-compose-copy{font-size:14px;margin-bottom:10px}.status-composer.audience-open .status-audience{flex:1;min-height:0;max-height:none;margin:10px 0 14px;-webkit-overflow-scrolling:touch}.status-composer.audience-open .status-compose-row{flex:none}
.vault-list-empty{padding:52px 26px;text-align:center;color:#746A70;font-size:14px;line-height:1.55}
.vault-list-empty strong{display:block;color:#271D25;font-size:19px;margin-bottom:6px}
.vault-list-request{margin:14px;padding:16px;border:1px solid #DCCDD2;border-radius:18px;background:#FBF4F6;box-shadow:0 8px 20px rgba(104,44,67,.08)}
.vault-list-request-name{font-size:16px;font-weight:750;color:#271D25}
.vault-list-request-number{font-size:12.5px;color:#81767C;margin-top:3px}
.vault-list-request-copy{font-size:12.5px;color:#682C43;margin-top:9px}
.vault-list-request-actions{display:flex;gap:8px;margin-top:13px}
.vault-list-request-actions button{min-height:38px;border-radius:12px;padding:0 14px;font:700 12px/1 inherit;cursor:pointer;flex:1}
.vault-list-request-accept{border:1px solid #682C43;background:#682C43;color:#fff}
.vault-list-request-decline{border:1px solid #DCCDD2;background:#fff;color:#682C43}
.vault-list-request.quick-connect-focus{border-color:#682C43;box-shadow:0 0 0 3px rgba(104,44,67,.13),0 12px 28px rgba(104,44,67,.14);animation:quickConnectFocus .45s ease both}
.account-status-card.quick-connect-focus{border-color:#682C43;box-shadow:0 0 0 3px rgba(104,44,67,.13);animation:quickConnectFocus .45s ease both}
@keyframes quickConnectFocus{from{transform:translateY(8px);opacity:.6}to{transform:none;opacity:1}}
.vault-list-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:15px 16px;border-bottom:1px solid #F1E9EB;cursor:pointer;transition:background .15s;position:relative}
.vault-list-row:last-child{border-bottom:0}
.vault-list-row:hover,.vault-list-row:active{background:#FDF9FA}
.vault-list-avatar{grid-row:1/3;width:48px;height:48px;border-radius:50%;background:var(--avatar-bg,#F2E8EC);color:var(--avatar-fg,#9A4C68);display:flex;align-items:center;justify-content:center;position:relative;font:700 18px/1 'Manrope',sans-serif}
.vault-list-avatar.has-live-status{box-shadow:0 0 0 3px #E34B63}
.vault-list-avatar svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vault-list-row-dot{position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border:3px solid #fff;border-radius:50%;background:#C9C2C5}
.vault-list-row-dot.online{background:#71947C}
.vault-list-row-name{min-width:0;font-size:15px;font-weight:700;color:#271D25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:end}
.vault-list-row-preview{min-width:0;font-size:12.5px;color:#81767C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:start;margin-top:3px}
.vault-list-row-preview.alert{color:#A84964;font-weight:600}
.vault-call-direction{width:15px;height:15px;vertical-align:-2.5px;margin-right:4px;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.vault-call-direction.incoming{transform:rotate(180deg)}
.vault-call-direction.outgoing{stroke:var(--green)}
.vault-call-direction.incoming{stroke:#D9822B}
.vault-call-direction.missed{stroke:#C0293F}
.vault-list-row-meta{grid-column:3;grid-row:1/3;display:flex;flex-direction:column;align-items:flex-end;gap:7px;min-width:58px}
.vault-list-row-time{font-size:10.5px;color:#9A9095;white-space:nowrap}
.vault-list-row-badge{font-size:9px;letter-spacing:.055em;text-transform:uppercase;padding:4px 7px;border-radius:8px;font-weight:700;white-space:nowrap}
.vault-list-row-badge.temp{background:#F4E8EC;color:#8D3C56}
.vault-list-row-badge.perm{background:#EAF1EC;color:#557761}
.vault-list-row-unread{background:#C87588;color:#fff;border-radius:10px;min-width:20px;height:20px;font-size:10px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;line-height:1;font-weight:700}
.vault-list-actions{position:fixed;left:50%;right:auto;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);padding:5px;background:rgba(251,247,248,.94);border:1px solid #E8DDE1;border-radius:20px;display:flex;gap:4px;justify-content:center;z-index:5;box-shadow:0 8px 24px rgba(74,45,56,.12);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.group-row-avatar{border-radius:16px!important;background:linear-gradient(145deg,#7b2949,#c87588)!important;color:#fff!important}.group-row-avatar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.group-create-overlay{position:fixed;inset:0;z-index:10025;background:rgba(25,14,20,.64);display:none;align-items:flex-end;justify-content:center;padding:16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.group-create-overlay.open{display:flex}.group-create-card{width:min(520px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:#fff;border-radius:24px;padding:22px;box-shadow:0 24px 80px #0005}.group-create-card h2{margin:0 0 6px;font:750 23px Manrope,sans-serif}.group-create-card>p{margin:0 0 16px;color:#78676f;font:500 13px/1.45 Inter,sans-serif}.group-name-input{width:100%;height:48px;border:1px solid #ddcfd5;border-radius:14px;padding:0 14px;font:600 15px Inter,sans-serif;box-sizing:border-box}.group-contact-list{margin:14px 0;max-height:300px;overflow:auto;border:1px solid #eee5e8;border-radius:15px}.group-contact{display:flex;align-items:center;gap:11px;padding:12px;border-bottom:1px solid #f3ecef;font:650 14px Inter,sans-serif}.group-contact:last-child{border-bottom:0}.group-contact small{display:block;color:#8a7a82;font-size:11px;margin-top:3px}.group-create-actions{display:flex;gap:9px}.group-create-actions button{height:46px;border-radius:14px;padding:0 18px;font:700 14px Inter,sans-serif}.group-create-actions .primary{flex:1;background:#682c43;color:#fff}.group-create-actions .secondary{background:#f5ecef;color:#682c43}.group-chat{position:fixed;inset:0;z-index:10018;background:#fbf7f8;display:none;flex-direction:column}.group-chat.open{display:flex}.group-chat-head{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;background:#fff;border-bottom:1px solid #eee5e8}.group-chat-head button{width:42px;height:42px;border-radius:14px;background:#f4e9ed;color:#682c43;font-size:22px}.group-chat-title{font:750 17px Manrope,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-chat-sub{margin-top:2px;color:#88767e;font:550 11px Inter,sans-serif}.group-chat-body{flex:1;min-height:0;overflow:auto;padding:18px 14px;display:flex;flex-direction:column;gap:8px}.group-message{max-width:82%;padding:10px 12px;border-radius:15px;background:#fff;box-shadow:0 2px 8px #60364a12;align-self:flex-start}.group-message.mine{align-self:flex-end;background:#682c43;color:#fff}.group-message-name{font:700 10px/1.2 Inter,sans-serif;color:#aa5572;margin-bottom:4px}.group-message.mine .group-message-name{color:#f2ccd8}.group-message-text{font:500 14px/1.42 Inter,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere}.group-msg{position:relative;align-self:flex-start;max-width:82%;display:flex;flex-direction:column}.group-msg.mine{align-self:flex-end;align-items:flex-end}.group-msg>.group-message{max-width:100%;align-self:auto}.group-msg .msg-actions{width:max-content;max-width:calc(100vw - 28px);flex-wrap:wrap}.group-msg.mine .msg-actions{justify-content:flex-end}.group-msg .reaction-picker{align-self:flex-start}.group-msg.mine .reaction-picker{align-self:flex-end}.group-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.group-reactions .msg-reaction-badge{position:static;font-size:14px;padding:1px 6px}.group-reactions .msg-reaction-badge small{font-size:10px;margin-left:3px;font-weight:700}.group-reactions .msg-reaction-badge.mine{border-color:#c87588;background:#fbeff3}.group-reply-quote{margin:0 0 6px;font-size:11px;line-height:1.35;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-message.mine .group-reply-quote{background:#ffffff26;color:#f6dbe4;border-left-color:#f2ccd8}.group-message.mine .group-reply-quote strong{color:#fff}.group-msg.flash>.group-message{animation:group-flash 1.2s ease}@keyframes group-flash{0%,60%{box-shadow:0 0 0 3px #c87588}100%{box-shadow:0 2px 8px #60364a12}}.group-message-select{display:none;position:absolute;top:8px;left:-30px;width:22px;height:22px;border-radius:50%;border:2px solid #b9a7af;background:#fff;color:#fff;font:700 13px/18px Inter,sans-serif;text-align:center;box-sizing:border-box}.group-chat.selecting .group-msg{margin-left:34px;max-width:calc(82% - 34px)}.group-chat.selecting .group-message-select{display:block}.group-msg.selected .group-message-select{background:#682c43;border-color:#682c43}.group-msg.selected>.group-message{box-shadow:0 0 0 2px #682c43}.group-select-bar{display:none;position:absolute;top:0;left:0;right:0;z-index:3;height:calc(62px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 14px 0;align-items:center;gap:12px;background:#682c43;color:#fff}.group-chat.selecting .group-select-bar{display:flex}.group-select-bar button{width:40px;height:40px;border-radius:50%;background:#ffffff1f;color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center}.group-select-bar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.group-select-count{flex:1;font:650 15px Inter,sans-serif}.group-reply-preview{display:none;align-items:center;gap:10px;padding:8px 14px;background:#f5ecef;border-top:1px solid #eee5e8;border-left:3px solid #c87588;font:500 12px Inter,sans-serif;color:#5b4650}.group-reply-preview.show{display:flex}.group-reply-body{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-reply-name{margin-right:6px;color:#682c43}.group-reply-preview button{background:none;color:#8a7880;font-size:16px;padding:4px 6px}.group-delete-overlay{position:fixed;inset:0;z-index:10050;background:rgba(26,25,22,.7);display:flex;align-items:center;justify-content:center;padding:24px}.group-delete-card{background:#fff;border-radius:18px;padding:20px;width:min(320px,100%);display:flex;flex-direction:column;gap:8px;text-align:center}.group-delete-title{font:600 14px/1.5 Inter,sans-serif;color:#4a4038;margin-bottom:6px}.group-delete-card button{border-radius:22px;padding:11px;font:650 13px Inter,sans-serif}.group-delete-card .everyone{background:#c87588;color:#fff}.group-delete-card .me{background:#1a1916;color:#fff}.group-delete-card .cancel{background:none;color:#8a8074}.group-message-time{margin-top:5px;text-align:right;font:500 9px Inter,sans-serif;opacity:.65}.group-chat-empty{margin:auto;color:#897880;text-align:center;font:600 13px/1.5 Inter,sans-serif}.group-chat-footer{display:flex;align-items:flex-end;gap:9px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #eee5e8}.group-chat-footer textarea{flex:1;min-width:0;min-height:46px;max-height:110px;resize:none;border:1px solid #dfd2d7;border-radius:15px;padding:11px 13px;font:500 15px Inter,sans-serif;box-sizing:border-box}.group-chat-footer button{flex:0 0 46px;width:46px;height:46px;border-radius:15px;font-size:20px}.group-chat-footer .group-attach-btn,.group-chat-footer .group-mic-btn{background:#f4e9ed;color:#682c43}.group-chat-footer .group-attach-btn{font-size:28px;font-weight:300;line-height:1}.group-chat-footer .group-mic-btn.recording{background:#8b2949;color:#fff;animation:pulse 1.2s ease-in-out infinite}.group-chat-footer .group-mic-btn svg,.group-chat-footer .group-send-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.group-chat-footer .group-send-btn{display:none;background:#682c43;color:#fff}.group-chat-footer.has-text .group-send-btn{display:block}.group-chat-footer.has-text .group-mic-btn{display:none}.group-message-attachment{display:block;max-width:min(260px,65vw);margin-top:2px;border-radius:12px;overflow:hidden}.group-message-attachment img{display:block;width:100%;max-height:320px;object-fit:cover}.group-file-card{display:flex;align-items:center;gap:9px;border:0;border-radius:11px;padding:10px;background:#f5ecef;color:#682c43;font:700 12px Inter,sans-serif;max-width:240px;text-align:left}.group-message.mine .group-file-card{background:#ffffff24;color:#fff}.group-attachment-status{font:600 12px/1.4 Inter,sans-serif;opacity:.75;padding:8px 0}.group-members{position:fixed;inset:0;z-index:10028;background:rgba(25,14,20,.64);display:none;align-items:flex-end;justify-content:center;padding:16px}.group-members.open{display:flex}.group-members-card{width:min(520px,100%);max-height:75dvh;overflow:hidden;background:#fff;border-radius:24px;padding:20px;display:flex;flex-direction:column}#group-members-list{flex:1;min-height:0;overflow:auto}.group-members-title{font:750 20px Manrope,sans-serif;margin-bottom:12px}.group-member{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid #f1e9eb}.group-member strong{display:block;font:700 14px Inter,sans-serif}.group-member small{color:#88767e;font:500 11px Inter,sans-serif}.group-member button{padding:8px 10px;border-radius:10px;background:#f6e9ed;color:#8b2949;font:700 11px Inter,sans-serif}.group-member>span:last-child{display:flex;gap:6px}.group-member .icon-btn{width:38px;height:38px;padding:0;border-radius:12px;display:flex;align-items:center;justify-content:center}.group-member .icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.group-member .icon-btn.report{background:#f3eaed;color:#682c43}.group-members-actions{display:flex;gap:9px;margin-top:16px}.group-members-actions button{width:46px;height:46px;border-radius:14px;padding:0;display:flex;align-items:center;justify-content:center}.group-members-actions button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.group-search-input{width:100%;height:44px;border:1px solid #ddcfd5;border-radius:13px;padding:0 14px;margin:0 0 10px;font:500 14px Inter,sans-serif;box-sizing:border-box;background:#fff}.group-contact[hidden]{display:none}.group-members-actions .danger{background:#8b2949;color:#fff}.group-members-actions .close{margin-left:auto;background:#f3eaed;color:#682c43}.group-members-actions .add{background:#682c43;color:#fff}#group-add-overlay{z-index:10032}.group-message-text{cursor:pointer}
.vault-nav-badge{position:absolute;right:-5px;top:-5px;min-width:19px;height:19px;padding:0 5px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#B64261;color:#fff;border:2px solid #fff;font:700 10px/1 system-ui;pointer-events:none}
.vault-nav-badge[hidden]{display:none}
.vault-list-action{width:46px;height:44px;border-radius:15px;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;background:transparent;color:#682C43;border:0}
.vault-list-action svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vault-list-action.active{background:#682C43;color:#fff;box-shadow:0 5px 12px rgba(104,44,67,.2)}
.vault-list-action:active{transform:scale(.97)}
.vault-list-action[data-tooltip]::after{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(3px);white-space:nowrap;padding:7px 10px;border-radius:9px;background:#2F2227;color:#fff;font:600 12px/1.2 'Inter',sans-serif;opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease;box-shadow:0 5px 14px rgba(47,34,39,.2)}
.vault-list-action[data-tooltip]:hover::after,.vault-list-action[data-tooltip]:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
.vault-call-icon{grid-row:1/3;width:48px;height:48px;border-radius:50%;background:#F2E8EC;color:#8D3C56;display:flex;align-items:center;justify-content:center;position:relative}
.vault-call-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* A genuinely missed, not-yet-viewed call — deliberately a different,
stronger red than the muted .alert preview text every missed call
already gets, so a row you haven't looked at yet is unmistakable at a
glance against ones you have. Cleared the instant the calls tab is
opened (markVaultMissedCallsViewed runs right after this renders), so
the highlight only ever shows once, on first view — same idea as a
phone app's missed-call badge. */
.vault-call-row.missed-unseen{background:#FDF0F1}
.vault-call-row.missed-unseen .vault-call-icon{background:#F9D9DD;color:#C0293F}
.vault-call-row.missed-unseen .vault-call-icon::after{content:'';position:absolute;top:-1px;right:-1px;width:13px;height:13px;border-radius:50%;background:#C0293F;border:2px solid #fff}
.vault-call-row.missed-unseen .vault-list-row-preview.alert{color:#C0293F;font-weight:700}
/* Call-history actions ring directly without opening the conversation row. */
button.vault-call-btn{padding:0;border:0;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,background .12s ease}
button.vault-call-btn:active{transform:scale(.92);background:#E9D6DD}
button.vault-call-btn:focus-visible{outline:2px solid #8D3C56;outline-offset:2px}
.vault-call-video-btn{width:36px;height:36px;padding:0;border:1px solid #E4D5DA;border-radius:12px;background:#F7EEF1;color:#682C43;display:grid;place-items:center;cursor:pointer;transition:transform .12s ease,background .12s ease}
.vault-call-video-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vault-call-video-btn:active{transform:scale(.92);background:#E9D6DD}
.vault-call-video-btn:focus-visible{outline:2px solid #8D3C56;outline-offset:2px}
@media(min-width:760px){
.vault-list-hdr{padding-left:max(28px,calc((100vw - 760px)/2));padding-right:max(28px,calc((100vw - 760px)/2))}
.vault-list-main{padding-top:0}.vault-list-row{padding:17px 20px}
}
@media(max-width:390px){.vault-list-title{font-size:24px}}
/* -- IN-ROOM DISAPPEARING-TIMER CONTROL (+ call button) -- */
/* space-between rather than center now that the call button lives here too
— keeps the timer control grouped on one side and the call button
anchored to the other, instead of all three items bunching in the middle. */
/* flex-wrap intentionally NOT set here — the call button used to drop onto
its own orphan line on some Android devices (OnePlus 13s reported) once
the label+select pair got too wide for the row, which defeats the point
of the button living next to the disappearing-messages control in the
first place. Instead the label (least important part — purely a
description) truncates with an ellipsis so the select and call button
always stay pinned on one line, in view, at a fixed size. */
.timer-bar{flex-shrink:0;background:#FAF8F4;border-bottom:1px solid #F0E8CC;padding:6px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap}
.timer-bar-controls{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;flex:1 1 auto;min-width:0}
.timer-bar-label{font-size:11px;color:#7A6E65;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#timer-bar-select{font-size:11px;color:#4A3F35;background:#fff;border:0.5px solid #E0D9D0;border-radius:12px;padding:3px 8px;font-family:inherit;cursor:pointer;flex-shrink:0}
.chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:4px;background:#fff}
/* Settle-in for a message that just genuinely arrived (sent or received
live) — see renderMessageRecord's animate param. A gentle scale+rise
rather than a hard cut, matching the care already put into the bigger
ceremonial moments (V-entrance, vanish) but for the everyday rhythm of
the app instead of just its bookends. */
.msg-enter{animation:msg-settle .28s cubic-bezier(0.22,1,0.36,1)}
@keyframes msg-settle{0%{opacity:0;transform:translateY(8px) scale(0.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
.msg{display:flex;flex-direction:column;max-width:72%;margin-bottom:2px}
.msg.me{align-self:flex-end;align-items:flex-end}
.msg.them{align-self:flex-start;align-items:flex-start}
/* Own messages: no label needed, you know you sent them (and they're on
the right). Their messages: show who it's from, small and muted above
the bubble — this is what was actually being asked for; showing it on
both sides again would bring back the redundancy the original removal
was trying to avoid. */
.msg.me .msg-name{display:none}
.msg.them .msg-name{font-size:11px;color:#9A8C7E;margin:0 2px 2px;letter-spacing:.02em}
/* Long-pressing text is the same gesture that opens Reply/React/Select/
Delete (see the quick-tap handler in wireMsgActions) — without this, the
phone's own text-selection callout popped up on top of/instead of that
menu on a slightly longer press. Copy is still reachable, just via the
app's own action row now instead of native selection. */
.bubble{padding:9px 14px;border-radius:18px;font-size:15px;line-height:1.5;color:#111;word-break:break-word;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.msg.flash .bubble{animation:msg-flash 1.2s ease}@keyframes msg-flash{0%,60%{box-shadow:0 0 0 3px #c87588}100%{box-shadow:none}}
/* Sent/received bubbles used to be WhatsApp's stock green/grey — every other
screen in the app (landing, calls, settings, the V ceremonies) has been
deliberately rebuilt in Vaultlix's own gold-on-cream palette, but the one
surface people actually spend their time looking at was never touched.
Warm gold-tinted cream for "me", a lighter neutral oatmeal for "them" —
still readable at a glance which is which, now actually on-brand. */
.msg.me .bubble{background:#EAD8A0;border-bottom-right-radius:4px}
.msg.them .bubble{background:#F4F1EC;border-bottom-left-radius:4px}
.bubble.emoji-jumbo{background:none !important;padding:2px 4px;font-size:2.6em;line-height:1.15}
.msg-time{font-size:11px;color:#999;margin-top:2px;display:flex;align-items:center;gap:3px}
.msg-ticks{color:#53bdeb;font-size:13px;letter-spacing:-2px;margin-left:2px}
/* Reply / React action row — shown under a message when tapped. Icons used
to be raw Unicode glyphs (↩ ☑ etc) which render through the OS's plain
symbol font on a lot of devices — exactly the "old Windows icon" look —
instead of anything drawn by the app. Replaced with the same thin-stroke
SVG style used everywhere else (mic/speaker/copy icons), each sitting in
its own small tinted chip so the row reads as a set of graphical actions
rather than a line of text with emoji glued on. */
.msg-actions{display:none;gap:6px;margin-top:3px}
.msg-actions.show{display:flex}
.msg.me .msg-actions{justify-content:flex-end}
.msg-action-btn{background:#FAF7F1;border:1px solid rgba(104,44,67,.22);border-radius:14px;padding:7px 10px 6px;font-size:12px;font-weight:500;color:#5C5145;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:50px;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:background .15s,border-color .15s,transform .12s,box-shadow .15s}
.msg-action-icon{width:24px;height:24px;border-radius:50%;background:rgba(104,44,67,.13);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,transform .18s}
.msg-action-icon svg{width:13px;height:13px;fill:none;stroke:#682C43;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.msg-action-label{font-size:10px;line-height:1}
.msg-action-btn:hover{background:#F3ECDD;border-color:rgba(104,44,67,.4);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.msg-action-btn:hover .msg-action-icon{background:rgba(104,44,67,.22)}
.msg-action-btn:active{transform:scale(.93)}
.msg-action-btn:active .msg-action-icon{transform:scale(.88)}
.msg-action-btn[data-action="delete"]{color:#C87588}
.msg-action-btn[data-action="delete"] .msg-action-icon{background:rgba(192,57,43,.1)}
.msg-action-btn[data-action="delete"] .msg-action-icon svg{stroke:#C87588}
.msg-action-btn[data-action="delete"]:hover{background:#FDF0EE;border-color:rgba(192,57,43,.35)}
.msg-action-btn[data-action="delete"]:hover .msg-action-icon{background:rgba(192,57,43,.2)}
/* Entrance — each button pops in on its own beat instead of the whole row
snapping into view at once; a small spring overshoot (the cubic-bezier)
is what reads as "alive" rather than a flat fade. */
.msg-actions.show .msg-action-btn{animation:msg-action-pop .32s cubic-bezier(.34,1.56,.64,1) both}
.msg-actions.show .msg-action-btn:nth-child(1){animation-delay:0ms}
.msg-actions.show .msg-action-btn:nth-child(2){animation-delay:35ms}
.msg-actions.show .msg-action-btn:nth-child(3){animation-delay:70ms}
.msg-actions.show .msg-action-btn:nth-child(4){animation-delay:105ms}
.msg-actions.show .msg-action-btn:nth-child(5){animation-delay:140ms}
@keyframes msg-action-pop{from{opacity:0;transform:translateY(6px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Quick-reaction strip, opened from the React action */
.reaction-picker{display:none;gap:4px;background:#fff;border:0.5px solid #E8E2DA;border-radius:20px;padding:5px 8px;margin-top:3px;box-shadow:0 2px 10px rgba(0,0,0,0.08);align-self:flex-start}
.reaction-picker.show{display:flex}
.msg.me .reaction-picker{align-self:flex-end}
.reaction-picker span{font-size:19px;cursor:pointer;padding:2px;border-radius:50%;transition:transform .1s}
.reaction-picker span:hover{transform:scale(1.25)}
/* Reaction badge shown on the bubble once someone reacts */
.msg-reactions{position:absolute;bottom:-11px;right:6px;display:flex;gap:2px}
.msg.me .msg-reactions{right:auto;left:6px}
.msg-reaction-badge{background:#fff;border:1px solid #E8E2DA;border-radius:10px;padding:1px 5px;font-size:16px;line-height:1.3;box-shadow:0 1px 3px rgba(0,0,0,0.1)}
/* Media messages (image/file/view-once) get a wrapper so the selection
checkbox and the reaction badge have somewhere to anchor — an ![]()
/
can't usefully host absolutely positioned children of its own. */
.msg-media-wrap{position:relative;display:inline-block;max-width:100%}
/* has-caption: image/album + a caption share ONE card (background, border,
outer radius matching each theme's bubble color) instead of looking like
two separate stacked bubbles — the media flows flush into the card, the
caption text sits padded below it. Scoped to this modifier only: bare
.msg-media-wrap (voice notes, GIFs — never captioned) stays untouched. */
.msg-media-wrap.has-caption{display:block;width:min(280px,68vw);border-radius:17px;overflow:hidden;border:1px solid #E7DDE1;background:#fff}
.msg.me .msg-media-wrap.has-caption{border-color:#E8C9D1;background:#F2DDE3;border-radius:17px 17px 5px 17px}
.msg.them .msg-media-wrap.has-caption{border-color:#E7DDE1;background:#fff;border-radius:17px 17px 17px 5px}
.msg-media-wrap.has-caption .msg-image{width:100%;max-width:none;max-height:none;border-radius:0;margin-top:0;display:block}
.msg-media-wrap.has-caption .msg-album-grid{max-width:none;border-radius:0;margin-top:0}
.msg-link{color:#0B63C5;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere;word-break:break-word;-webkit-tap-highlight-color:rgba(11,99,197,.18)}.group-message.mine .msg-link{color:#FFD9E5}
.msg-caption-text{padding:8px 12px 10px;font:450 14px/1.42 Inter,sans-serif;color:#30242B;white-space:pre-wrap;overflow-wrap:anywhere}
.send-img-overlay{position:fixed;inset:0;z-index:10060;display:flex;align-items:flex-end;justify-content:center;padding:18px;background:rgba(26,25,22,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.send-img-sheet{width:min(520px,100%);max-height:calc(100dvh - 36px);overflow:auto;border-radius:25px;background:#fff;padding:15px;box-shadow:0 28px 80px rgba(20,11,16,.32)}
.send-img-sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.send-img-sheet-head strong{font:750 16px/1.2 Manrope,sans-serif;color:#2b2026}.send-img-close{width:38px;height:38px;border:0;border-radius:50%;background:#f5ecef;color:#682c43;font:500 25px/1 Inter,sans-serif}
.send-img-preview{position:relative;display:grid;place-items:center;min-height:180px;max-height:min(56dvh,520px);overflow:hidden;border-radius:18px;background:#21181e}.send-img-preview img{display:block;max-width:100%;max-height:min(56dvh,520px);object-fit:contain}.send-img-count{position:absolute;top:10px;right:10px;padding:5px 9px;border-radius:999px;background:rgba(26,25,22,.82);color:#fff;font:700 11px/1 Inter,sans-serif}
.send-img-compose{display:grid;grid-template-columns:minmax(0,1fr) 44px 48px;align-items:end;gap:8px;margin-top:12px}.send-img-compose.send-img-compose-group{grid-template-columns:minmax(0,1fr) 48px}.send-img-compose textarea{width:100%;min-height:48px;max-height:120px;resize:none;border:1px solid #e2d5da;border-radius:18px;background:#f8f3f5;padding:13px 14px;font:500 15px/1.4 Inter,sans-serif;color:#2b2026}
.send-img-once-toggle{width:44px;height:44px;border:1.5px solid #9b8c93;border-radius:50%;background:#fff;color:#6e6067;display:grid;place-items:center;transition:.16s ease}.send-img-once-toggle svg{width:26px;height:26px;overflow:visible}.send-img-once-toggle circle{fill:none;stroke:currentColor;stroke-width:1.8;stroke-dasharray:4 2}.send-img-once-toggle text{fill:currentColor;font:700 12px Inter,sans-serif}.send-img-once-toggle[aria-pressed="true"]{border-color:#682c43;background:#682c43;color:#fff;box-shadow:0 0 0 4px rgba(104,44,67,.13)}
.send-img-submit{width:48px;height:48px;border:0;border-radius:50%;background:#682c43;color:#fff;display:grid;place-items:center;box-shadow:0 8px 18px rgba(104,44,67,.24)}.send-img-submit svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.send-img-once-hint{min-height:18px;margin:8px 52px 0 2px;color:#826f78;font:600 11px/1.4 Inter,sans-serif}
@media(min-width:620px){.send-img-overlay{align-items:center}.send-img-sheet{padding:18px}}
/* The browser's own "save/copy/share image" long-press menu (both iOS
Safari's callout and Android Chrome's context menu) would otherwise pop
up on top of / instead of the app's own action row. Long-press is now a
deliberate app gesture (see attachLongPress), so the native one needs to
be turned off on the media elements it would normally trigger on. */
.msg-image,.msg-file,.msg-pdf-card,.msg-viewonce{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* Multi-select mode: once active, every message shows an empty checkbox;
picking one fills it in gold and brings that message back to full
opacity while the rest dim slightly, the same visual language as
WhatsApp/Telegram's multi-select. */
.msg-select-badge{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid #D0CAC0;color:transparent;font-size:11px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,0.15);z-index:4;transition:background-color .15s,border-color .15s}
.msg-select-badge.checked{background:#682C43;border-color:#682C43;color:#fff}
.msg.them .msg-select-badge{right:auto;left:-8px}
.sys-msg{align-self:center;font-size:12px;color:#999;background:rgba(0,0,0,0.04);border-radius:20px;padding:5px 16px;text-align:center;font-style:italic;margin:6px 0}
/* One-time verify nudge is a full sentence, not a short "X joined"-style
line — left-aligned and width-capped so it reads as a paragraph inside
the pill instead of stretching edge-to-edge on wide viewports. */
.sys-msg-nudge{max-width:280px;text-align:left;line-height:1.5}
.sys-msg-link{color:var(--gold);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-style:normal}
.typing-indicator{align-self:flex-start;display:none;align-items:center;gap:4px;padding:12px 16px;background:#F0F0F0;border-radius:18px;border-bottom-left-radius:4px;margin-top:4px}
.typing-indicator.show{display:flex}
.chat-restore-pending{width:100%;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:0;background:transparent;color:#8A747C;font:600 12px/1.4 Inter,sans-serif;letter-spacing:.01em}
.chat-restore-pending .typing-indicator{align-self:center;margin:0}
.t-dot{width:5px;height:5px;border-radius:50%;background:#AAA;animation:typing-bounce .9s infinite}
.t-dot:nth-child(2){animation-delay:.15s}.t-dot:nth-child(3){animation-delay:.3s}
@keyframes typing-bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
/* Someone is typing: their picture with a small bubble of bouncing dots on its upper right. */
.typing-indicator.peer-typing{position:relative;width:46px;height:38px;padding:0;gap:0;background:transparent;border:0;border-radius:0;margin:8px 0 2px 2px;align-items:flex-end}
.peer-typing-avatar{width:30px;height:30px;border-radius:50%;overflow:hidden;flex:none;background:#EBDDE3;color:#682C43;display:grid;place-items:center;font:700 13px/1 Inter,sans-serif}
.peer-typing-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.peer-typing-dots{position:absolute;left:20px;top:0;display:flex;align-items:center;gap:2px;padding:5px 7px;background:#fff;border:1px solid #E8DDE1;border-radius:12px;box-shadow:0 1px 3px rgba(60,20,40,.12)}
.peer-typing-dots .t-dot{width:4px;height:4px;background:#8A747C;animation-name:typing-bounce-small}
/* Who is typing in a private group: pictures, a small bubble, and a line naming them. */
.group-typing{display:flex;align-items:center;gap:8px;padding:6px 14px 4px;min-height:34px;background:inherit}
.group-typing[hidden]{display:none}
.group-typing-avatars{display:flex;flex:none}
.group-typing-avatar{width:26px;height:26px;border-radius:50%;overflow:hidden;background:#EBDDE3;color:#682C43;display:grid;place-items:center;font:700 12px/1 Inter,sans-serif;border:2px solid #fff;margin-left:-8px}
.group-typing-avatar:first-child{margin-left:0}
.group-typing-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.group-typing-bubble{display:flex;align-items:center;gap:2px;padding:6px 8px;background:#fff;border:1px solid #E8DDE1;border-radius:12px;box-shadow:0 1px 3px rgba(60,20,40,.1)}
.group-typing-bubble .t-dot{width:4px;height:4px;background:#8A747C;animation-name:typing-bounce-small}
.group-typing-recording{gap:4px;color:#682C43}
.group-typing-recording svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.group-typing-recording i{width:6px;height:6px;border-radius:50%;background:#D93B4A;animation:recording-pulse 1s ease-in-out infinite}
.group-typing-label{min-width:0;font:500 12px/1.3 Inter,sans-serif;color:#8A747C;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
/* Someone is recording a voice note: the same bubble, with a pulsing red dot and a microphone. */
.peer-typing-mic{position:absolute;left:20px;top:0;display:none;align-items:center;gap:4px;padding:5px 8px;background:#fff;border:1px solid #E8DDE1;border-radius:12px;box-shadow:0 1px 3px rgba(60,20,40,.12);color:#682C43}
.peer-typing-mic svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.peer-typing-mic i{width:6px;height:6px;border-radius:50%;background:#D93B4A;animation:recording-pulse 1s ease-in-out infinite}
@keyframes recording-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.typing-indicator.peer-typing.recording .peer-typing-dots{display:none}
.typing-indicator.peer-typing.recording .peer-typing-mic{display:flex}
@keyframes typing-bounce-small{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-3px)}}
.chat-ftr{flex-shrink:0;background:#fff;border-top:1px solid #EFEFEF;padding:12px 14px calc(12px + env(safe-area-inset-bottom));display:flex;gap:4px;align-items:flex-end}
.smart-reply-rail{flex:none;display:flex;gap:8px;overflow-x:auto;padding:8px 12px 7px;background:#fff;border-top:1px solid #efe7ea;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.smart-reply-rail::-webkit-scrollbar{display:none}.smart-reply-rail[hidden]{display:none}
.smart-reply-chip{flex:0 0 auto;max-width:min(72vw,280px);min-height:36px;padding:8px 14px;border:1px solid #d9cbd1;border-radius:18px;background:#fff;color:#682c43;font:650 12.5px/1.3 Inter,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 8px rgba(71,30,47,.06)}
.smart-reply-chip:active{background:#f5e9ed;border-color:#b98699}.smart-reply-chip:focus-visible{outline:3px solid rgba(104,44,67,.2);outline-offset:2px}
/* 16px, not 15 — anything smaller than 16px on a text input makes iOS
Safari auto-zoom the whole page in on focus, which is a likely
contributor to text looking off afterward. */
#msg-input{flex:1;background:#F5F5F5;border:1.5px solid #E8E8E8;border-radius:24px;padding:10px 18px;font-size:16px;color:#111;resize:none;min-height:44px;max-height:120px;overflow-y:hidden;line-height:1.5;transition:border-color .15s}
#msg-input:focus{border-color:#682C43;background:#fff}
#msg-input::placeholder{color:#BBB}
#msg-input:disabled{opacity:.35;cursor:not-allowed}
.group-chat-footer textarea{overflow-y:hidden}
.send-btn{width:44px;height:44px;background:#682C43;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;border:none;box-shadow:0 2px 8px rgba(104,44,67,0.3);touch-action:manipulation}
.send-btn:hover{background:#542237;transform:scale(1.05)}
.send-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.send-btn svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.group-send-btn{touch-action:manipulation}
.secure-reconnect-banner{display:none;margin:10px 16px 0;padding:12px 14px;border:1px solid rgba(104,44,67,.24);border-radius:14px;background:#FAF3F5;color:#4A2835;align-items:center;gap:12px;font-size:13px;line-height:1.35}
.secure-reconnect-banner.show{display:flex}
.secure-reconnect-banner span{flex:1}
.secure-reconnect-banner button{min-height:44px;border:0;border-radius:22px;padding:0 16px;background:#682C43;color:#fff;font:600 13px Inter,sans-serif;white-space:nowrap}
.mic-btn{width:44px;height:44px;background:#682C43;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;border:none;box-shadow:0 2px 8px rgba(104,44,67,0.3)}
.mic-btn:hover{background:#542237;transform:scale(1.05)}
.mic-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.mic-btn:active{transform:scale(.92)}
.mic-btn svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.speech-to-text-btn{display:none;flex:0 0 40px;width:40px;height:40px;margin-bottom:2px;border:1px solid #E7DCE0;border-radius:50%;align-items:center;justify-content:center;background:#F7EEF1;color:#682C43;transition:background .16s,color .16s,transform .16s;box-shadow:none}
html.speech-to-text-ready .speech-to-text-btn{display:flex}
.chat-ftr.has-text:not(.dictating) .speech-to-text-btn,.group-chat-footer.has-text:not(.dictating) .speech-to-text-btn{display:none}
.speech-to-text-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.speech-to-text-btn.listening{background:#682C43;color:#fff;border-color:#682C43;animation:voice-rec-pulse 1.1s ease-in-out infinite}
.speech-to-text-btn:disabled{opacity:.38;cursor:not-allowed}
.group-chat-footer .speech-to-text-btn{flex-basis:40px!important;width:40px!important;height:40px!important;border-radius:14px;margin-bottom:3px}
.voice-record-bar{display:none;align-items:center;gap:10px;background:#fff;border-top:1px solid #EFEFEF;padding:12px 14px calc(12px + env(safe-area-inset-bottom))}
.voice-record-bar.show{display:flex}
.voice-record-bar{position:relative}
.voice-hud{position:absolute;left:50%;bottom:calc(100% + 16px);transform:translateX(-50%);width:96px;height:96px;display:none;place-items:center;pointer-events:none;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 8px 26px rgba(60,30,45,.18)}
.voice-record-bar.show .voice-hud{display:grid}
.voice-hud-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.voice-hud-ring circle{fill:none;stroke-width:3.5}
.voice-hud-ring .track{stroke:#EBDDE3}
.voice-hud-ring .progress{stroke:#C25777;stroke-linecap:round;stroke-dasharray:276.46;stroke-dashoffset:276.46}
.voice-hud-bars{display:flex;align-items:center;justify-content:center;gap:3px;height:44px}
.voice-hud-bars span{width:3px;height:6px;border-radius:2px;background:#C25777;transition:height .09s ease}
.voice-stop-btn{width:38px;height:38px;border-radius:50%;border:none;background:rgba(194,87,119,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0}
.voice-stop-square{width:14px;height:14px;border-radius:3px;background:#C25777}
.voice-review-bar{display:none;align-items:center;gap:10px;background:#fff;border-top:1px solid #EFEFEF;padding:12px 14px calc(12px + env(safe-area-inset-bottom))}
.voice-review-bar.show{display:flex}
.voice-review-wave{flex:1;min-width:0;height:34px;display:flex;align-items:center;justify-content:space-between;gap:2px;cursor:pointer}
.voice-review-wave span{flex:1;max-width:4px;min-width:2px;border-radius:2px;background:#D9C6CF;transition:background .12s}
.voice-review-wave span.played{background:#682C43}
.voice-review-time{font-size:13px;color:#4A4038;font-variant-numeric:tabular-nums;flex-shrink:0}
#s-chat .voice-review-bar{background:#fff!important;border-top:1px solid #EEE5E8!important}
.voice-cancel-btn,.voice-send-btn{width:38px;height:38px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0}
.voice-cancel-btn{background:rgba(0,0,0,0.05)}
.voice-cancel-btn svg{width:16px;height:16px;fill:none;stroke:#9A8C7E;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.voice-send-btn{background:#682C43;box-shadow:0 2px 8px rgba(104,44,67,0.3)}
.voice-send-btn svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.voice-record-indicator{flex:1;display:flex;align-items:center;gap:8px;font-size:14px;color:#4A4038;font-variant-numeric:tabular-nums}
.voice-record-dot{width:9px;height:9px;border-radius:50%;background:#C87588;animation:voice-rec-pulse 1s ease-in-out infinite}
@keyframes voice-rec-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.voice-note-shell{margin-top:4px;min-width:180px;max-width:260px}
.msg-voice{display:flex;align-items:center;gap:7px;background:rgba(0,0,0,0.04);border:0.5px solid #E0D9D0;border-radius:20px;padding:8px 9px 8px 8px;min-width:210px;max-width:250px}
.voice-play-btn{width:32px;height:32px;border-radius:50%;background:#682C43;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0}
.voice-play-btn svg{width:14px;height:14px;fill:#fff;stroke:none}
.voice-track{flex:1;height:3px;background:#D9D2C6;border-radius:2px;cursor:pointer;position:relative}
.voice-track-fill{position:absolute;top:0;left:0;height:100%;background:#682C43;border-radius:2px;width:0%}
.voice-duration{font-size:11px;color:#8A7F72;font-variant-numeric:tabular-nums;flex-shrink:0}
.voice-rate-btn{height:28px;min-width:32px;padding:0 6px;border:0.5px solid #CDBFC4;border-radius:14px;background:#fff;color:#682C43;font-size:10px;font-weight:750;font-variant-numeric:tabular-nums;line-height:1;cursor:pointer;flex-shrink:0}
.voice-rate-btn:active{background:#F3E7EB}
.group-voice-player{display:flex;align-items:center;gap:7px;max-width:min(300px,72vw)}
.group-voice-player .group-message-attachment{flex:1;min-width:0;margin:0}
.group-message.mine .voice-rate-btn{background:#ffffff22;border-color:#ffffff55;color:#fff}
.voice-transcript-action{display:none;margin:7px 4px 0;padding:0;border:0;background:none;color:#682C43;font-size:12px;font-weight:650;line-height:1.4;cursor:pointer;text-align:left}
html.voice-transcript-ready .voice-transcript-action{display:block}
.voice-transcript-action:disabled{color:#9A8C7E;cursor:default}
.voice-transcript{display:none;margin:7px 0 0;padding:10px 12px;border-radius:12px;background:#F7F1F3;color:#3E3337;font-size:13px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.voice-transcript.show{display:block}
.group-message .voice-note-shell{max-width:280px}
/* -- CLOSED -- */
#s-closed{flex-direction:column;align-items:center;justify-content:center;padding:24px}
.closed-card{background:var(--surface);border:0.5px solid var(--border2);border-radius:3px;padding:48px 40px;max-width:380px;width:100%;text-align:center}
.closed-icon{width:48px;height:48px;border-radius:50%;background:var(--red-dim);border:0.5px solid rgba(192,57,43,.2);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.closed-icon svg{width:22px;height:22px;fill:none;stroke:var(--red);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.closed-title{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:300;color:var(--cream);margin-bottom:8px}
.closed-sub{font-size:12px;color:var(--muted);line-height:1.7;margin-bottom:28px}
.closed-note{font-size:11px;color:var(--hint);line-height:1.6;background:var(--surface2);border:0.5px solid var(--border);border-radius:2px;padding:12px 16px;margin-bottom:24px;text-align:left}
.closed-note strong{color:var(--muted)}
.toast{position:fixed;bottom:24px;right:24px;background:var(--surface2);border:0.5px solid var(--gold-border);border-radius:2px;padding:9px 16px;font-size:12px;color:var(--cream);z-index:13050;animation:toast-in .2s ease;pointer-events:none;display:flex;align-items:center;gap:8px}
@keyframes toast-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
/* "Busy" toast (peer's on another call) gets its own beat and its own
position: dead center of the screen rather than the corner, like a real
call outcome you can't miss, plus a quick two-buzz shake — like a busy
signal — and a small pulsing dot instead of the plain fade-in every other
toast uses. All positioning below (top/left/transform) has to be baked
into the shake keyframes too, since an in-progress CSS animation fully
owns the transform property for its duration — anything set outside it
would get clobbered the moment the shake starts. */
.toast-busy{position:fixed;top:50%;left:50%;bottom:auto;right:auto;transform:translate(-50%,-50%);border-color:rgba(192,57,43,0.4);padding:14px 22px;font-size:13px;border-radius:4px;box-shadow:0 8px 28px rgba(0,0,0,0.18);animation:toast-in-center .2s ease,toast-busy-shake .42s ease .2s}
.toast-busy-dot{width:6px;height:6px;border-radius:50%;background:var(--red);flex-shrink:0;animation:toast-busy-pulse 1s ease-in-out infinite}
@keyframes toast-in-center{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes toast-busy-shake{0%,100%{transform:translate(-50%,-50%)}20%{transform:translate(calc(-50% - 4px),-50%)}40%{transform:translate(calc(-50% + 3px),-50%)}60%{transform:translate(calc(-50% - 2px),-50%)}80%{transform:translate(calc(-50% + 1px),-50%)}}
@keyframes toast-busy-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(0.8)}}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#E0E0E0;border-radius:2px}
@media(max-width:520px){.cards{grid-template-columns:1fr}.setup-card,.waiting-card,.closed-card{padding:28px 22px}}
@media(max-width:480px){
.logo-name{font-size:52px !important}
.tagline{font-size:16px !important;margin-bottom:36px}
.card{padding:16px 14px}
.card-title{font-size:13px}
.card-desc{font-size:12px;font-style:italic}
.setup-card,.waiting-card,.closed-card{padding:24px 18px}
.code-value{font-size:22px}
.chat-hdr{height:calc(46px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 12px 0}
.chat-hdr-logo{font-size:16px}
/* Message text is what people actually spend their time reading — this
used to drop it from the 15px base down to 13px on any screen under
480px CSS-wide, which is most phones. Keep the tighter side padding for
narrow screens, but leave the text size alone. (.msg-input below was a
dead rule too: the composer textarea only ever had id="msg-input", so
it never matched — the real #msg-input rule is set once, above.) */
.bubble{padding:9px 12px}
.e2e-bar{font-size:10px;padding:4px 12px}
.w-title{font-size:18px}
.call-name{font-size:22px}
.closed-title{font-size:20px}
.btn-gold{font-size:14px;padding:13px}
}
/* ── LANDING PAGE — WHITE + GOLD PALETTE ──────────────────────────── */
#s-landing {
background: #FFFFFF;
}
#s-landing .landing-glow {
background: radial-gradient(ellipse 60% 50% at 50% 35%, rgba(104,44,67,0.08) 0%, transparent 70%);
}
#s-landing .logo-rule {
background: var(--gold);
}
#s-landing .logo-sub {
color: #9A8C7E;
}
#s-landing #logoTag {
color: #1A1510;
}
#s-landing .card {
background: #F7F4F0;
border: 0.5px solid #E8E2DA;
}
#s-landing .card:hover {
background: #F0EBE3;
border-color: rgba(104,44,67,0.35);
transform: translateY(-1px);
}
#s-landing .card-title {
color: #1A1510;
}
#s-landing .card-desc {
color: #7A6E65;
}
#s-landing .landing-footer {
color: #C4B8AC;
background: linear-gradient(transparent, #FFFFFF 40%);
}
/* Vaultlix wordmark in dark on white bg */
#s-landing .logo-name,
#s-landing [style*="Cormorant Garamond"][style*="28px"] {
color: #1A1510 !important;
}
/* V mark border in gold */
#s-landing [style*="border:0.5px solid var(--gold-border)"] {
border-color: rgba(104,44,67,0.4) !important;
}
/* Chevron arrows in light tone */
#s-landing svg[style*="stroke:var(--hint)"] {
stroke: #C4B8AC !important;
}
/* ── PWA INSTALL UI ───────────────────────────────────────────────── */
.install-btn{margin:32px auto 0;display:flex;align-items:center;justify-content:center;gap:6px;background:transparent;border:1px solid #682C43;color:#682C43;border-radius:20px;padding:9px 20px;font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;}
.install-btn:active{background:rgba(104,44,67,.08)}
.install-note{margin:20px auto 0;font-size:11px;color:#9A8C7E;letter-spacing:.03em;text-align:center}
.ios-install-banner{position:fixed;left:0;right:0;bottom:36px;z-index:50;display:none;align-items:center;gap:10px;background:#FFFFFF;border-top:2px solid #682C43;box-shadow:0 -4px 16px rgba(26,21,16,.08);padding:10px 14px;font-family:'Inter',sans-serif;font-size:11px;color:#4A3F35;line-height:1.4;}
.ios-install-banner .ios-banner-text{flex:1}
.ios-install-banner svg{stroke:#682C43;vertical-align:-2px}
.ios-banner-close{flex-shrink:0;background:none;border:none;color:#682C43;font-size:18px;line-height:1;padding:2px 4px;}
.ios-sheet-overlay{position:fixed;inset:0;background:rgba(26,21,16,.55);z-index:1000;display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .22s ease;}
.ios-sheet-overlay.open{opacity:1}
.ios-sheet{background:#fff;width:100%;max-width:480px;border-radius:16px 16px 0 0;padding:24px 24px calc(22px + env(safe-area-inset-bottom));text-align:center;transform:translateY(100%);transition:transform .28s cubic-bezier(.32,.72,0,1);}
.ios-sheet-overlay.open .ios-sheet{transform:translateY(0)}
.ios-sheet-rule{width:36px;height:2px;background:var(--gold);margin:0 auto 10px}
.ios-sheet-word{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;letter-spacing:.12em;color:#1A1510;margin-bottom:18px}
.ios-sheet-title{font-size:15px;font-weight:500;color:#1A1510;margin-bottom:16px}
.ios-sheet-step{display:flex;align-items:flex-start;gap:12px;text-align:left;font-size:13px;color:#4A3F35;padding:9px 0;line-height:1.45}
.ios-sheet-num{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:rgba(104,44,67,.1);border:0.5px solid rgba(104,44,67,.3);color:#682C43;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:1px}
.ios-sheet-divider{height:1px;background:#EFEAE3;margin:16px 0}
.ios-sheet-hint{font-size:11px;color:#9A8C7E;margin-bottom:18px}
.ios-sheet-btn{width:100%;background:#682C43;color:#fff;border:none;border-radius:22px;padding:13px;font-size:13px;font-weight:500;letter-spacing:.03em}
.dots-badge{display:inline-flex;align-items:center;justify-content:center;padding:1px 7px;border-radius:8px;background:rgba(104,44,67,.1);border:0.5px solid rgba(104,44,67,.3);color:#682C43;font-weight:700;letter-spacing:1px;font-size:12px;vertical-align:-1px}
/* ── SETUP / WAITING / CLOSED — WHITE + GOLD PALETTE ─────────────── */
#s-setup, #s-waiting, #s-closed {
background: #FFFFFF;
}
#s-setup .setup-card,
#s-waiting .waiting-card,
#s-closed .closed-card {
background: #F7F4F0;
border: 0.5px solid #E8E2DA;
}
#s-setup .setup-back {
color: #9A8C7E;
}
#s-setup .setup-back:hover {
color: #4A3F35;
}
#s-setup .setup-logo .rule {
background: var(--gold);
}
#s-setup .setup-logo span {
color: #1A1510;
}
#s-setup .setup-title {
color: #4A3F35;
}
#s-setup .field label {
color: #9A8C7E;
}
#s-setup .field input {
background: #FFFFFF;
border-color: #E0D9D0;
color: #1A1510;
}
#s-setup .field input:focus {
border-color: rgba(104,44,67,0.5);
box-shadow: 0 0 0 3px rgba(104,44,67,.12);
}
#s-setup .btn-gold:active {
transform: scale(.98);
}
#s-setup .field input::placeholder {
color: #C4B8AC;
}
#s-setup .field-note {
color: #B0A498;
}
#s-setup .err-msg {
color: #C87588;
}
#s-setup .btn-gold {
background: var(--gold);
color: #1A1510;
}
#s-setup .btn-gold:hover {
background: #542237;
}
/* Waiting card */
#s-waiting .w-logo span {
color: #1A1510;
}
#s-waiting .w-title {
color: #1A1510;
}
#s-waiting .w-sub {
color: #7A6E65;
}
#s-waiting .w-note {
color: #B0A498;
}
#s-waiting .code-box {
background: #FFFFFF;
border-color: rgba(104,44,67,0.35);
}
#s-waiting .code-box:active {
background: #F7F4F0;
}
#s-waiting .code-label {
color: #9A8C7E;
}
#s-waiting .code-value {
color: var(--gold);
}
#s-waiting .code-tap-hint {
color: #B0A498;
}
#s-waiting .copy-btn {
background: none;
border-color: #E0D9D0;
color: #7A6E65;
}
#s-waiting .copy-btn:hover {
border-color: rgba(104,44,67,0.4);
color: var(--gold);
}
#s-waiting .close-btn {
border-color: #E0D9D0;
color: #B0A498;
}
#s-waiting .close-btn:hover {
border-color: #C87588;
color: #C87588;
}
/* Closed card */
#s-closed .closed-title {
color: #1A1510;
}
#s-closed .closed-sub {
color: #7A6E65;
}
#s-closed .closed-note {
background: #FFFFFF;
border-color: #E8E2DA;
color: #7A6E65;
}
#s-closed .closed-note strong {
color: #4A3F35;
}
#s-closed .closed-icon {
background: rgba(74,155,111,0.08);
border-color: rgba(74,155,111,0.2);
}
#s-closed .closed-icon svg {
stroke: #71947C;
}
#s-closed .btn-gold {
background: var(--gold);
color: #1A1510;
}
/* ── READ RECEIPTS + DISAPPEARING MESSAGES ──────────────────────── */
.msg-meta { display:flex; align-items:center; gap:5px; }
.msg-edited{font-size:9px;line-height:1;color:inherit;opacity:.72;font-weight:500}
.msg-receipt { font-size:11px; color:#B0A898; font-weight:400; }
.msg-receipt.delivered { color:#7A6E65; font-weight:500; }
.msg-receipt.read { color:#682C43; font-weight:600; font-size:12px; }
.msg-progress-wrap { height:2px; border-radius:1px; background:rgba(0,0,0,0.06); margin-top:3px; overflow:hidden; }
.msg.me .msg-progress-wrap { background:rgba(104,44,67,0.15); }
.msg-progress { height:100%; border-radius:1px; background:var(--gold); transition:width 1s linear; }
.msg-fade { animation: msgFade 0.5s ease forwards; }
@keyframes msgFade { to { opacity:0; transform:scale(0.95); } }
/* ── EMOJI SCREEN EFFECT (see triggerEmojiEffect) ──────────────── */
@keyframes emoji-float-up {
0% { transform: translate(0,0) rotate(0deg); opacity:0; }
12% { opacity:1; }
80% { opacity:1; }
100% { transform: translate(var(--emoji-drift), -120vh) rotate(var(--emoji-rotate)); opacity:0; }
}
/* ── DELETE TIMER SELECTOR ─────────────────────────────────────── */
.timer-select { width:100%; background:#FFFFFF; border:0.5px solid #E0D9D0; border-radius:2px; padding:10px 13px; font-size:14px; color:#1A1510; margin-top:4px; }
@media(max-width:480px){
.chat-hdr { padding:env(safe-area-inset-top) 10px 0; gap:6px; height:calc(52px + env(safe-area-inset-top)); }
.chat-hdr-logo { font-size:15px; }
.chat-hdr-room { max-width:56px; font-size:10px; }
.leave-btn { padding:4px 8px; font-size:10px; margin-left:6px; }
.destroy-btn { padding:4px 8px; font-size:10px; margin-left:4px; }
.call-btn { width:30px; height:30px; margin-left:6px; }
.call-btn svg { width:15px; height:15px; }
.e2e-bar { font-size:9px; }
}
/* ── FILE ATTACHMENTS ─────────────────────────────────────────── */
.attach-btn { width:28px; height:38px; background:none; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; opacity:0.5; transition:opacity 0.15s; padding:0; }
.attach-btn:hover { opacity:0.9; }
.attach-btn svg { width:22px; height:22px; fill:none; stroke:#7A6E65; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.attach-popover { position:fixed; display:flex; gap:6px; background:#fff; border-radius:18px; padding:8px; box-shadow:0 4px 20px rgba(26,25,22,0.22); z-index:999; animation:attachPopIn 0.14s ease; }
/* The group chat is a full-screen fixed overlay at z-index 10018, so its attach menu must sit above it (but below the KLIPY picker at 10020). */
#group-attach-popover { z-index:10019; }
/* Direct-conversation file cards use fixed dark text; keep them readable inside a dark "mine" group bubble. */
.group-message.mine .msg-file { background:#ffffff24; border-color:transparent; color:#fff; }
.group-message.mine .msg-file svg { stroke:#fff; }
/* Your own attachments sit in a white bubble with burgundy text, like everyone else's. */
.group-message.mine.has-attachment{background:#fff;color:#682c43}
.group-message.mine.has-attachment .group-message-name{color:#682c43}
.group-message.mine.has-attachment .group-message-time{color:#682c43;opacity:.7}
.group-message.mine.has-attachment .group-reply-quote{background:#682c4312;color:#682c43;border-left-color:#682c43}
.group-message.mine.has-attachment .group-reply-quote strong{color:#682c43}
.group-message.mine.has-attachment .msg-file,.group-message.mine.has-attachment .group-file-card{background:#f6eef1;border-color:#e6d3db;color:#682c43}
.group-message.mine.has-attachment .msg-file svg{stroke:#682c43}
.group-message .msg-video-card{width:min(280px,74vw)}
/* Compact PDF card inside group bubbles: narrower and shorter than the direct-chat card, still cropped from the top of page 1. */
.group-message .msg-pdf-card { width:min(280px,74vw); }
.group-message .msg-pdf-preview { height:160px; }
@keyframes attachPopIn { from{ opacity:0; transform:translateY(6px) scale(0.96); } to{ opacity:1; transform:translateY(0) scale(1); } }
.attach-opt { display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:none; cursor:pointer; padding:6px 8px; width:60px; }
.attach-opt-icon { width:42px; height:42px; border-radius:50%; background:#F3EEE6; display:flex; align-items:center; justify-content:center; transition:background 0.15s; }
.attach-opt:active .attach-opt-icon { background:#E5DED2; }
.attach-opt-icon svg { width:20px; height:20px; fill:none; stroke:#4A4038; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.attach-opt-label { font-size:10px; color:#8A7F72; }
.msg-image { max-width:min(280px,68vw); max-height:280px; border-radius:6px; display:block; margin-top:4px; cursor:pointer; }
.msg-image-preview-loading{width:200px;height:150px;max-width:100%;border-radius:8px;margin-top:4px;background:linear-gradient(110deg,#eee7e9 8%,#f8f4f5 18%,#eee7e9 33%);background-size:200% 100%;animation:imagePreviewPulse 1.3s linear infinite;display:flex;align-items:center;justify-content:center;color:#7d5965;font-size:12px}
.msg-album-tile .msg-image-preview-loading{width:100%;height:100%;margin:0;border-radius:0}
@keyframes imagePreviewPulse{to{background-position-x:-200%}}
.msg-video-card{position:relative;width:min(300px,68vw);height:200px;overflow:hidden;border-radius:12px;background:linear-gradient(145deg,#3B2831,#171216);cursor:pointer;color:#fff;margin-top:4px}
.msg-video-card img{display:block;width:100%;height:100%;object-fit:cover}.msg-video-card::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 45%,#0009)}
.msg-video-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border:0;padding:0;border-radius:50%;display:grid;place-items:center;background:#682C43E8;color:#fff;cursor:pointer;box-shadow:0 4px 18px #0006}
.msg-video-play svg{width:22px;height:22px;fill:#fff;stroke:none;margin-left:3px}.msg-video-name{position:absolute;z-index:2;left:10px;right:10px;bottom:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:600 11px/1.2 Inter,sans-serif}
.msg-upload-pending{position:relative;overflow:hidden;border-radius:12px}.msg-upload-animation{position:absolute;left:8px;right:8px;bottom:8px;z-index:4;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:7px;min-height:32px;padding:6px 10px;border:1px solid #ffffff2e;border-radius:999px;background:#171216c7;color:#fff;font:700 10px/1.2 Inter,sans-serif;letter-spacing:.02em;box-shadow:0 3px 12px #0005;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}.msg-upload-animation .vault-upload-orbit{width:18px;height:18px;flex:none}.msg-upload-animation .vault-upload-orbit:before{content:'';position:absolute;inset:0;border:1.5px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:photo-send-spin .8s linear infinite}.msg-upload-animation .vault-upload-orbit svg{width:10px;height:10px;animation:none}.msg-upload-animation .vault-upload-orbit i{display:none}
.vault-upload-orbit{position:relative;width:48px;height:48px;display:grid;place-items:center}.vault-upload-orbit svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;animation:vault-upload-lock 1.4s ease-in-out infinite}
.vault-upload-orbit i{position:absolute;width:7px;height:7px;border-radius:50%;background:#C87588;box-shadow:0 0 12px #C87588}.vault-upload-orbit i:nth-child(1){animation:vault-upload-dot-a 1.7s linear infinite}.vault-upload-orbit i:nth-child(2){animation:vault-upload-dot-b 1.7s linear infinite}.vault-upload-orbit i:nth-child(3){animation:vault-upload-dot-c 1.7s linear infinite}
@keyframes vault-upload-dot-a{from{transform:rotate(0) translateX(22px) rotate(0)}to{transform:rotate(360deg) translateX(22px) rotate(-360deg)}}@keyframes vault-upload-dot-b{from{transform:rotate(120deg) translateX(22px) rotate(-120deg)}to{transform:rotate(480deg) translateX(22px) rotate(-480deg)}}@keyframes vault-upload-dot-c{from{transform:rotate(240deg) translateX(22px) rotate(-240deg)}to{transform:rotate(600deg) translateX(22px) rotate(-600deg)}}@keyframes vault-upload-lock{50%{transform:scale(1.12);stroke:#F2CCD8}}
.video-attachment-viewer{position:fixed;inset:0;z-index:10045;background:#080607;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;box-sizing:border-box;touch-action:none;will-change:transform}
.video-attachment-viewer video{display:block;width:100%;height:100%;object-fit:contain;background:#000;opacity:1;transition:opacity .16s ease}.video-attachment-viewer.loading video{opacity:0}.video-attachment-loader{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:13px;color:#fff;font:700 12px/1.2 Inter,sans-serif;letter-spacing:.03em;background:#080607}.video-attachment-viewer.loading .video-attachment-loader{display:flex}.video-attachment-loader .vault-upload-orbit i:nth-child(1){background:#FF3B6B}.video-attachment-loader .vault-upload-orbit i:nth-child(2){background:#2EC5FF}.video-attachment-loader .vault-upload-orbit i:nth-child(3){background:#FFB800}.video-attachment-tap{display:none;min-height:44px;padding:0 18px;border-radius:999px;background:#fff;color:#281F23;font:750 13px Inter,sans-serif}.video-attachment-loader.awaiting-tap .video-attachment-tap{display:block}
.video-attachment-close,.video-attachment-download,.video-attachment-share{position:absolute;top:calc(12px + env(safe-area-inset-top));z-index:5;width:42px;height:42px;border-radius:50%;background:#0009;color:#fff;border:1px solid #ffffff33;display:grid;place-items:center}.video-attachment-close{left:14px}.video-attachment-share{right:14px}.video-attachment-download{right:62px}.video-attachment-close svg,.video-attachment-download svg,.video-attachment-share svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.video-attachment-controls{position:absolute;z-index:5;left:18px;right:18px;bottom:calc(16px + env(safe-area-inset-bottom));display:grid;grid-template-columns:auto auto minmax(80px,1fr) auto auto;align-items:center;gap:10px;padding:10px 12px;border-radius:18px;background:#121013d9;color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:opacity .16s ease}.video-attachment-viewer.loading .video-attachment-controls{opacity:0;pointer-events:none}.video-attachment-play{width:40px;height:40px;border:0;border-radius:50%;display:grid;place-items:center;background:#fff;color:#281F23}.video-attachment-play svg{width:20px;height:20px;fill:currentColor}.video-attachment-time{min-width:36px;color:#fff;font:600 11px/1 Inter,sans-serif;font-variant-numeric:tabular-nums}.video-attachment-seek{width:100%;min-width:70px;accent-color:#C87588}.video-attachment-speed{height:38px;min-width:48px;border:0;border-radius:999px;background:#ffffff20;color:#fff;font:700 12px/1 Inter,sans-serif}.video-attachment-viewer:after{content:'Swipe down to return to chat';position:absolute;z-index:4;left:50%;top:calc(27px + env(safe-area-inset-top));transform:translateX(-50%);color:#ffffffaa;font:600 10px/1 Inter,sans-serif;pointer-events:none;white-space:nowrap}@media(max-width:430px){.video-attachment-controls{left:10px;right:10px;gap:7px;padding:8px}.video-attachment-time{font-size:10px;min-width:31px}.video-attachment-speed{min-width:44px}}
.msg-gif{display:block;width:min(240px,70vw);min-height:120px;max-height:280px;object-fit:contain;border-radius:12px;background:#F3EEE6;cursor:pointer;content-visibility:auto}
.klipy-picker{position:fixed;inset:0;z-index:10020;background:rgba(20,15,18,.52);display:flex;align-items:flex-end;justify-content:center}
.klipy-sheet{width:min(620px,100%);height:min(72vh,650px);background:#fff;border-radius:24px 24px 0 0;padding:14px;display:flex;flex-direction:column;box-shadow:0 -14px 45px rgba(0,0,0,.2)}
.klipy-head{display:flex;align-items:center;gap:10px}.klipy-search{flex:1;border:1px solid #E0D9D0;border-radius:14px;padding:12px 14px;font:500 14px/1.2 Manrope,sans-serif;outline:none}.klipy-close{border:0;background:#F3EEE6;border-radius:50%;width:38px;height:38px;font-size:22px;cursor:pointer}
.klipy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;overflow:auto;margin-top:12px;min-height:0}.klipy-result{border:0;padding:0;background:#F3EEE6;border-radius:10px;overflow:hidden;cursor:pointer;min-height:110px}.klipy-result img{display:block;width:100%;height:150px;object-fit:cover}.klipy-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 2px 2px;color:#786D73;font-size:11px}.klipy-more{border:1px solid #DCCFD4;background:#fff;border-radius:10px;padding:7px 12px;color:#682C43;cursor:pointer}.klipy-status{text-align:center;color:#8A7F72;padding:30px 8px;grid-column:1/-1}
.msg-file { display:flex; align-items:center; gap:8px; background:rgba(0,0,0,0.04); border:0.5px solid #E0D9D0; border-radius:6px; padding:8px 12px; margin-top:4px; text-decoration:none; color:#4A3F35; font-size:12px; cursor:pointer; }
.msg-file svg { width:16px; height:16px; fill:none; stroke:#9A8C7E; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.msg-pdf-card{width:min(300px,68vw);overflow:hidden;background:#F8F5F3;border:.5px solid #DED6D2;border-radius:12px;margin-top:4px;cursor:pointer;color:#281F23}
.msg-pdf-preview{height:170px;background:linear-gradient(145deg,#F4EFEC,#E9E0E2);display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:.5px solid #DED6D2}
.msg-pdf-preview img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.msg-pdf-placeholder{display:flex;flex-direction:column;align-items:center;gap:7px;color:#7A304C;font:700 13px/1 Inter,sans-serif;letter-spacing:.08em}
.msg-pdf-placeholder svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.msg-pdf-info{display:flex;align-items:center;gap:10px;padding:10px 12px;text-align:left}
.msg-pdf-icon{width:34px;height:34px;border-radius:8px;background:#762B47;color:#fff;display:grid;place-items:center;flex:none;font:800 9px/1 Inter,sans-serif;letter-spacing:.04em}
.msg-pdf-copy{min-width:0;display:flex;flex-direction:column;gap:4px}.msg-pdf-name{font:600 12px/1.25 Inter,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.msg-pdf-meta{font:500 10px/1.2 Inter,sans-serif;color:#8A7F84}
.msg-media-blocked { display:flex; align-items:center; gap:8px; background:rgba(0,0,0,0.04); border:0.5px solid #E0D9D0; border-radius:6px; padding:8px 12px; margin-top:4px; color:#8A7F72; font-size:12px; }
.msg-blocked { display:flex; align-items:center; gap:8px; background:#FDF0EE; border:0.5px solid #F1C4BC; border-radius:6px; padding:8px 12px; margin-top:4px; color:#C87588; font-size:12px; }
.file-progress { font-size:10px; color:#9A8C7E; margin-top:4px; }
.msg-viewonce { display:flex; align-items:center; gap:8px; background:#1A1916; border-radius:10px; padding:12px 14px; margin-top:4px; cursor:pointer; width:180px; }
.msg-viewonce svg { flex-shrink:0; fill:none; stroke:#D9B94E; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.msg-viewonce span { font-size:12px; color:#EDE7DC; letter-spacing:.01em; }
.msg-viewonce-opened { background:rgba(0,0,0,0.04); border:0.5px solid #E0D9D0; cursor:default; width:auto; }
.msg-viewonce-opened span { color:#9A8C7E; }
.msg-viewonce-badge { font-size:10px; color:#682C43; margin-top:4px; letter-spacing:.02em; }
/* Album grid — several photos picked together land as one grid bubble
(see sendAlbumMessage/buildAlbumGridHtml) instead of a wall of separate
image messages. 2 columns by default (2 photos = one row of 2, 4 photos
= 2x2); 3 photos gets its own override to a single row of 3 rather than
an awkward 2-then-1. Square tiles (aspect-ratio:1) with object-fit:cover
keep the grid tidy regardless of each photo's original proportions. */
.msg-album-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;max-width:240px;border-radius:8px;overflow:hidden;margin-top:4px}
.msg-album-grid-3{grid-template-columns:repeat(3,1fr)}
.msg-album-tile{position:relative;aspect-ratio:1;overflow:hidden;cursor:pointer;background:#EAEAEA}
.msg-album-tile .msg-image{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;border-radius:0;margin-top:0;display:block}
.msg-album-more{position:absolute;inset:0;background:rgba(0,0,0,0.45);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:500}
.msg-album-viewonce{position:absolute;inset:0;background:#1A1916;display:flex;align-items:center;justify-content:center}
.msg-album-viewonce svg{stroke:#D9B94E;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* ── LEGAL PAGES ──────────────────────────────────────────────── */
#s-privacy, #s-terms {
background:#FFFFFF;
flex-direction:column;
align-items:center;
padding:40px 20px 60px;
overflow-y:auto;
}
.legal-card {
max-width:640px;
width:100%;
}
.legal-back {
display:flex;
align-items:center;
gap:6px;
font-size:12px;
color:#9A8C7E;
cursor:pointer;
background:none;
border:none;
padding:0;
margin-bottom:28px;
transition:color 0.15s;
}
.legal-back:hover { color:#4A3F35; }
.legal-logo {
text-align:center;
margin-bottom:32px;
}
.legal-logo .rule { height:1px;background:var(--gold);width:60px;margin:0 auto 12px; }
.legal-logo span { font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:300;letter-spacing:.12em;color:#1A1510; }
.legal-title {
font-family:'Cormorant Garamond',serif;
font-size:28px;
font-weight:400;
color:#1A1510;
margin-bottom:6px;
}
.legal-date { font-size:11px;color:#9A8C7E;margin-bottom:28px; }
.legal-section { margin-bottom:24px; }
.legal-section h3 { font-size:13px;font-weight:600;color:#1A1510;margin-bottom:8px;letter-spacing:.04em;text-transform:uppercase; }
.legal-section p { font-size:13px;color:#4A3F35;line-height:1.8;margin-bottom:8px; }
.legal-section ul { font-size:13px;color:#4A3F35;line-height:1.8;padding-left:18px; }
.legal-section ul li { margin-bottom:4px; }
.legal-highlight {
background:#F7F4F0;
border:0.5px solid #E8E2DA;
border-radius:4px;
padding:14px 16px;
font-size:13px;
color:#4A3F35;
line-height:1.7;
margin:12px 0;
}
.legal-contact { font-size:12px;color:#9A8C7E;border-top:0.5px solid #E8E2DA;padding-top:20px;margin-top:32px; }
/* ── MESSAGE REPLY ────────────────────────────────────────────── */
.reply-preview {
display:none;
background:#F0EBE3;
border-left:3px solid var(--gold);
border-radius:0 4px 4px 0;
padding:8px 12px;
margin:0 14px 0;
font-size:12px;
color:#4A3F35;
position:relative;
align-items:center;
}
.reply-preview.show { display:flex; }
/* ── DAILY NUDGE ──────────────────────────────────────────────── */
.daily-nudge {
display:flex;
align-items:center;
background:#FBF6EC;
border-left:3px solid var(--gold);
border-radius:0 4px 4px 0;
padding:8px 12px;
margin:0 14px 0;
font-size:12px;
color:#4A3F35;
}
.daily-nudge-text { flex:1; }
.daily-nudge-close { background:none; border:none; color:#9A8C7E; font-size:16px; cursor:pointer; padding:0 0 0 10px; line-height:1; }
.reply-preview-thumb { width:42px; height:42px; object-fit:cover; border-radius:6px; margin-right:8px; flex-shrink:0; }
.reply-preview-text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reply-preview-name { font-weight:600; color:#1A1510; margin-right:6px; }
.reply-close { background:none; border:none; color:#9A8C7E; font-size:16px; cursor:pointer; padding:0 0 0 10px; line-height:1; }
.msg-reply-quote {
background:rgba(0,0,0,0.04);
border-left:2px solid var(--gold);
border-radius:0 3px 3px 0;
padding:4px 8px;
margin-bottom:4px;
font-size:11px;
color:#7A6E65;
cursor:pointer;
}
.msg-reply-quote strong { color:#4A3F35; font-weight:500; }
.msg.me .msg-reply-quote { background:rgba(104,44,67,0.08); }
.msg-reply-quote-photo { display:flex; align-items:center; gap:6px; }
.msg-reply-quote-thumb { width:34px; height:34px; object-fit:cover; border-radius:5px; flex-shrink:0; }
.msg-status-reply {
width:min(230px,62vw); min-height:50px; display:grid; grid-template-columns:42px minmax(0,1fr) 16px;
align-items:center; gap:8px; border:0; border-left:3px solid #C87588; border-radius:8px;
padding:6px; margin:0 0 5px; background:#F5ECEF; color:#4A3F35; text-align:left; cursor:pointer;
}
.msg.me .msg-status-reply { background:rgba(255,255,255,.16); color:#fff; border-left-color:#F2CCD8; }
.msg-status-reply-thumb { width:42px; height:42px; border-radius:7px; object-fit:cover; background:#DCCDD3; }
.msg-status-reply-placeholder { width:42px; height:42px; border-radius:7px; display:grid; place-items:center; background:#E7DADF; color:#682C43; }
.msg-status-reply-placeholder svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; }
.msg-status-reply-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.msg-status-reply-copy strong { font:700 11px/1.2 Inter,sans-serif; color:inherit; }
.msg-status-reply-copy span { font:500 10px/1.3 Inter,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.78; }
.msg-status-reply-arrow { font-size:18px; opacity:.62; }
/* ── PRIVACY COVER ─────────────────────────────────────────────────── */
#privacy-cover{
display:none;
position:fixed; inset:0; z-index:99999;
background:var(--black);
flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
#privacy-cover.show{ display:flex; }
/* CallKit may foreground the app while App Lock is armed. The call overlay
contains no messages or credentials and must remain usable until hang-up;
keep the lock armed underneath and reveal it again as soon as the call ends. */
body.native-ios-call-over-app-lock #privacy-cover{display:none!important}
.pc-mark{
width:56px; height:56px; border-radius:50%;
border:0.5px solid var(--gold-border); background:var(--gold-dim);
display:flex; align-items:center; justify-content:center;
}
.pc-mark svg{ width:24px; height:24px; fill:var(--gold); }
.pc-word{
font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:300;
letter-spacing:.14em; color:var(--cream);
}
.pc-lock-copy{display:none;text-align:center;max-width:270px;color:#BEB5AA;font-size:12px;line-height:1.55}
.app-lock-form{display:none;width:min(310px,calc(100vw - 44px));flex-direction:column;gap:10px;margin-top:4px}
.app-lock-input{width:100%;box-sizing:border-box;border:1px solid var(--gold-border);border-radius:13px;background:rgba(255,255,255,.07);color:var(--cream);padding:13px 15px;text-align:center;font-size:18px;letter-spacing:.12em;outline:none}
.app-lock-input:focus{border-color:var(--gold)}
.pc-unlock{border:1px solid var(--gold-border);border-radius:999px;background:var(--gold-dim);color:var(--cream);padding:11px 24px;font-size:13px;letter-spacing:.03em;cursor:pointer}
.app-lock-forgot{border:0;background:none;color:#A99D91;font-size:11px;cursor:pointer;padding:5px}
.app-lock-error{min-height:17px;text-align:center;color:#E5A9B5;font-size:11px;line-height:1.4}
#privacy-cover.quick-locked .pc-lock-copy,#privacy-cover.quick-locked .app-lock-form{display:flex}
#privacy-cover.unlocking .pc-unlock{opacity:.55;pointer-events:none}
.app-lock-overlay{position:fixed;inset:0;z-index:10030;background:rgba(14,8,11,.72);display:none;align-items:flex-end;justify-content:center;padding:16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.app-lock-overlay.open{display:flex}
.app-lock-sheet{width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#FFFDF9;border-radius:22px;padding:22px;box-sizing:border-box;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.app-lock-title{margin:0 0 8px;font-family:'Cormorant Garamond',serif;font-size:29px;color:#241B1E}
.app-lock-copy{font-size:13px;line-height:1.55;color:#6B5D61;margin-bottom:16px}
.app-lock-field{display:block;margin:11px 0}.app-lock-field span{display:block;margin-bottom:6px;color:#5F5055;font-size:12px;font-weight:600}
.app-lock-field input{width:100%;box-sizing:border-box;border:1px solid #DDD1D4;border-radius:12px;padding:12px 13px;font-size:16px;outline:none}.app-lock-field input:focus{border-color:#8A3C57}
.app-lock-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}.app-lock-actions button{border:1px solid #D8CDD0;border-radius:999px;background:#fff;color:#5A4B50;padding:10px 16px;cursor:pointer}.app-lock-actions .primary{background:#682C43;border-color:#682C43;color:#fff}.app-lock-actions .danger{color:#9B2945;border-color:#D8A2AE}
.vault-list-settings[hidden]{display:none!important}
.hidden-chats-sheet{font-family:'Inter',sans-serif}.hidden-chats-sheet .locker-brand{margin-bottom:17px}.hidden-chats-sheet .app-lock-copy{margin-bottom:18px}.hidden-chats-sheet .app-lock-actions{align-items:stretch}.hidden-chats-sheet .app-lock-actions button{min-width:0;min-height:46px;border-radius:14px;font:750 13px/1.25 'Manrope',sans-serif}
.hidden-chats-secret-input,.local-secret-input{-webkit-text-security:disc}
.hidden-chats-timeout{margin:0 0 18px}.hidden-chats-section-label{display:block;margin:0 0 8px;color:#57464E;font:750 11px/1.2 'Inter',sans-serif}.hidden-chats-timeout-copy{margin:8px 1px 0;color:#8D7982;font:500 11px/1.45 'Inter',sans-serif}.hidden-chats-timeout-options{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.hidden-chats-timeout-options button{height:40px;border:1px solid #E0D3D8;border-radius:12px;background:#fff;color:#715C65;font:750 12px 'Manrope',sans-serif}.hidden-chats-timeout-options button.active{border-color:#682C43;background:#682C43;color:#fff;box-shadow:0 7px 16px rgba(104,44,67,.17)}
#hidden-chats-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin-top:4px}#hidden-chats-actions button{width:100%;white-space:normal}.hidden-chats-sheet.manage-mode #hidden-chats-actions .hidden-chats-done{background:#682C43;border-color:#682C43;color:#fff}.hidden-chats-sheet.manage-mode #hidden-chats-actions .hidden-chats-change{background:#fff;color:#682C43}.hidden-chats-sheet.manage-mode #hidden-chats-actions .hidden-chats-remove{background:#FFF5F6;border-color:#EDCDD4;color:#9B2945}
.hidden-chats-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;padding:11px 13px;border:1px solid #E8D2DA;border-radius:14px;background:#FAF1F4;color:#682C43;font:750 12px/1.35 'Manrope',sans-serif}.hidden-chats-bar button.quiet{height:34px;border:1px solid #D8BFC8;border-radius:11px;background:#fff;color:#682C43;padding:0 13px;font:750 11px 'Manrope',sans-serif}
.hidden-chat-lock{width:13px;height:13px;margin-left:6px;vertical-align:-1px;fill:none;stroke:#8A3C57;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tone-sheet{width:min(100%,520px);max-height:88vh;display:flex;flex-direction:column;border-radius:26px;background:#F4F1F6;box-shadow:0 26px 80px rgba(20,10,16,.35);overflow:hidden;font-family:inherit}
.tone-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 16px 10px}
.tone-sheet-title{font:750 17px/1.2 'Manrope','Inter',sans-serif;color:#271D25;text-align:center;flex:1}
.tone-sheet-btn{width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.85);color:#4A4038;display:grid;place-items:center;font-size:18px;cursor:pointer}
.tone-sheet-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tone-sheet-btn.done{background:#682C43;color:#fff}
.tone-list{margin:6px 14px calc(18px + env(safe-area-inset-bottom));padding:0;list-style:none;overflow-y:auto;border-radius:18px;background:#fff}
.tone-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:0;background:#fff;padding:15px 18px;font:500 16px/1.2 'Inter',sans-serif;color:#271D25;text-align:left;cursor:pointer;border-bottom:1px solid #EEE7EA}
.tone-list li:last-child .tone-row{border-bottom:0}
.tone-row:active{background:#F7F1F4}
.tone-row .tone-check{width:18px;height:18px;fill:none;stroke:#682C43;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.tone-row[aria-checked="true"] .tone-check{opacity:1}
.tone-row-note{color:#9B8A92;font-size:13px;margin-left:6px}
/* Contacts (private phone book) */
#s-contacts{background:#FBF7F8;flex-direction:column}
.contacts-head{display:flex;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top)) 14px 8px;flex:none}
.contacts-head h1{flex:1;margin:0;font:750 22px/1.2 'Manrope','Inter',sans-serif;color:#271D25}
.contacts-back,.contacts-add{width:38px;height:38px;border:0;border-radius:50%;background:#fff;color:#4A4038;display:grid;place-items:center;box-shadow:0 1px 6px rgba(40,25,35,.1);cursor:pointer}
.contacts-back svg,.contacts-add svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.contacts-search{padding:4px 14px 8px;flex:none}
.contacts-search input{width:100%;box-sizing:border-box;border:1px solid #E7DDE1;border-radius:14px;background:#fff;padding:11px 14px;font:500 15px 'Inter',sans-serif;color:#271D25;outline:none}
.contacts-body{flex:1;min-height:0;overflow-y:auto;padding:0 14px calc(24px + env(safe-area-inset-bottom))}
.contacts-section-label{padding:14px 6px 6px;font:700 12px 'Inter',sans-serif;letter-spacing:.08em;color:#9B7E89;text-transform:uppercase}
.contact-row{display:flex;align-items:center;gap:12px;width:100%;border:0;border-bottom:1px solid #F0E8EB;background:#fff;padding:11px 14px;text-align:left;cursor:pointer;font-family:inherit}
.contact-row:first-of-type{border-radius:16px 16px 0 0}
.contact-row:active{background:#F8F1F4}
.contact-avatar{width:42px;height:42px;border-radius:50%;background:#EBDDE3;color:#682C43;display:grid;place-items:center;font:700 16px 'Inter',sans-serif;overflow:hidden;flex:none}
.contact-avatar img{width:100%;height:100%;object-fit:cover}
.contact-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.contact-text strong{font:600 16px 'Inter',sans-serif;color:#271D25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-text span{font:400 12.5px 'Inter',sans-serif;color:#8A7C83}
.contact-star{color:#C8A25A;font-size:16px}
.contacts-empty{margin:40px 10px;text-align:center;color:#75666D;font:400 14px/1.6 'Inter',sans-serif}
.contacts-empty strong{display:block;font:700 17px 'Inter',sans-serif;color:#271D25;margin-bottom:6px}
.contacts-empty button{margin-top:14px;border:0;border-radius:14px;background:#682C43;color:#fff;padding:11px 20px;font:600 14px 'Inter',sans-serif;cursor:pointer}
.contact-sheet-overlay{position:fixed;inset:0;z-index:10040;background:rgba(20,10,16,.6);display:flex;align-items:flex-end;justify-content:center;padding:16px}
.contact-sheet{width:min(100%,420px);max-height:90vh;overflow-y:auto;background:#fff;border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:8px;margin-bottom:env(safe-area-inset-bottom)}
.contact-sheet-head{display:flex;flex-direction:column;gap:3px;padding:2px 4px 8px}
.contact-sheet-head strong{font:700 18px 'Inter',sans-serif;color:#271D25}
.contact-sheet-head span{font:400 13px/1.45 'Inter',sans-serif;color:#8A7C83}
.contact-sheet-btn{border:1px solid #E7DDE1;border-radius:14px;background:#fff;color:#271D25;padding:12px;font:600 15px 'Inter',sans-serif;cursor:pointer}
.contact-sheet-btn.primary{background:#682C43;border-color:#682C43;color:#fff}
.contact-sheet-btn.danger{color:#9B2945;border-color:#F0D3DA}
.contact-sheet-btn.quiet{border:0;color:#8A7C83;background:none}
.contact-sheet-rename{display:flex;flex-direction:column;gap:4px;font:600 12px 'Inter',sans-serif;color:#8A7C83}
.contact-sheet-rename input{border:1px solid #E7DDE1;border-radius:12px;padding:11px 12px;font:500 15px 'Inter',sans-serif;color:#271D25;outline:none}
.request-intro{display:flex;flex-direction:column;gap:6px;margin:10px 0 4px;text-align:left}
.request-intro-bubble{align-self:flex-start;max-width:100%;padding:9px 12px;border-radius:14px 14px 14px 4px;background:#fff;border:1px solid #E7DDE1;color:#271D25;font:500 14px/1.4 'Inter',sans-serif;white-space:pre-wrap;overflow-wrap:anywhere}
.request-intro-bubble.muted{color:#8A7C83;font-style:italic}
#request-message-overlay{z-index:13000}
.vault-requests-row{display:flex;align-items:center;gap:12px;width:calc(100% - 28px);margin:10px 14px 4px;padding:12px 14px;border:1px solid #E9D9E0;border-radius:16px;background:linear-gradient(145deg,#FFFDFE,#F8F0F3);color:#271D25;text-align:left;cursor:pointer;font-family:inherit}
.vault-requests-row:active{background:#F4E8ED}
.daily-look-styles[hidden]{display:none}
.swipe-reply-icon{position:fixed;z-index:60;width:34px;height:34px;border-radius:50%;background:rgba(104,44,67,.14);color:#682C43;display:grid;place-items:center;pointer-events:none;opacity:0;transform:scale(.6)}
.swipe-reply-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.swipe-reply-icon.ready{background:#682C43;color:#fff}
.profile-photo-preview.has-image{cursor:zoom-in}
.profile-photo-preview.has-image:focus-visible{outline:2px solid #682C43;outline-offset:2px}
.vault-invite-card{margin:10px 14px 4px;padding:14px;border:1px solid #E9D9E0;border-radius:16px;background:linear-gradient(145deg,#FBF4F6,#F6E9EE)}
.vault-invite-card strong{display:block;font:700 15px/1.3 Inter,sans-serif;color:#271D25}
.vault-invite-card>span{display:block;margin-top:3px;font:500 12.5px/1.45 Inter,sans-serif;color:#6D5A63}
.vault-invite-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.vault-invite-actions button{border:1px solid #DCCDD2;background:#fff;color:#682C43;border-radius:12px;padding:9px 14px;font:650 13px Inter,sans-serif;cursor:pointer}
.vault-invite-actions button.primary{background:#682C43;border-color:#682C43;color:#fff}
.vault-invite-actions button.quiet{border-color:transparent;background:none;color:#8A747C;text-decoration:underline}
.vault-avatar-offer{display:flex;align-items:flex-start;gap:12px;margin:10px 14px 4px;padding:13px 14px;border:1px solid #E9D9E0;border-radius:16px;background:#FBF4F6}
.vault-avatar-offer-icon{width:40px;height:40px;flex:none;border-radius:50%;background:#EBDDE3;color:#682C43;display:grid;place-items:center}
.vault-avatar-offer-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vault-avatar-offer-text{min-width:0;flex:1}
.vault-avatar-offer-text strong{display:block;font:700 14px/1.3 Inter,sans-serif;color:#271D25}
.vault-avatar-offer-text>span{display:block;margin-top:2px;font:500 12.5px/1.4 Inter,sans-serif;color:#8A747C}
.vault-avatar-offer-actions{display:flex;gap:8px;margin-top:10px}
.vault-avatar-offer-actions button{border:1px solid #DCCDD2;background:#fff;color:#682C43;border-radius:12px;padding:8px 14px;font:650 13px Inter,sans-serif;cursor:pointer}
.vault-avatar-offer-actions button.primary{background:#682C43;border-color:#682C43;color:#fff}
.vault-requests-icon{width:40px;height:40px;border-radius:12px;background:#682C43;color:#fff;display:grid;place-items:center;flex:none}
.vault-requests-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vault-requests-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vault-requests-text strong{font:700 15px 'Inter',sans-serif}
.vault-requests-text span{font:400 12.5px 'Inter',sans-serif;color:#8A7C83;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vault-requests-badge{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#C25777;color:#fff;font:700 12px/22px 'Inter',sans-serif;text-align:center}
.vault-requests-chevron{color:#B9A9B1;font-size:22px;line-height:1}
#s-requests{background:#FBF7F8;flex-direction:column}
#s-requests .vault-list-request{margin:0 0 12px}
.request-outgoing-meta{margin-top:6px;font:500 12.5px 'Inter',sans-serif;color:#8A7C83}
.request-outgoing-cancel{display:block;margin-top:10px;border:0;background:none;color:#A0455F;padding:4px 0;font:600 13px 'Inter',sans-serif;cursor:pointer}
.request-outgoing-add{margin-top:8px;border:1px solid #E0CED6;border-radius:12px;background:#fff;color:#682C43;padding:8px 12px;font:600 13px 'Inter',sans-serif;cursor:pointer}
.policy-option{text-align:left;display:flex;flex-direction:column;gap:3px}
.policy-option span{font:400 12.5px/1.4 'Inter',sans-serif;color:#8A7C83}
.policy-option.selected{border-color:#682C43;background:#FBF4F7}
.request-message-input{width:100%;box-sizing:border-box;border:1px solid #E7DDE1;border-radius:14px;padding:11px 12px;font:500 15px/1.4 'Inter',sans-serif;color:#271D25;resize:none;outline:none}
/* While the Chats search box is being typed in, the floating bottom bar would ride up on top of the keyboard. */
html.vault-search-typing .vault-list-actions{display:none!important}
/* Android plays no in-app message chime (the system notification carries the tone), so the switch has nothing to control there. */
html.vaultlix-native-android #settings-chime-row{display:none!important}
/* iPhone app: Settings pages in the grouped-list style of iOS Settings — a lilac
page, inset white cards, plain text rows with a grey value and chevron, green
switches, and a round floating back button. Scoped to the iOS app so the web and
Android keep their own look. The icon tiles stay on the top-level menu. */
html.vaultlix-native-ios #settings-panel{background:#EFEEF5;border-left:0;box-shadow:none}
html.vaultlix-native-ios #settings-panel .settings-header{background:transparent;border-bottom:0;gap:0;padding:calc(10px + env(safe-area-inset-top)) 14px 8px}
html.vaultlix-native-ios #settings-panel .settings-back{width:38px;height:38px;background:rgba(255,255,255,.92);color:#271D25;box-shadow:0 1px 8px rgba(30,20,40,.1)}
html.vaultlix-native-ios #settings-panel .settings-back svg{width:18px;height:18px}
html.vaultlix-native-ios #settings-panel .settings-header-title{font:650 17px/1.2 'Inter',-apple-system,sans-serif;letter-spacing:-.01em;text-align:center;margin-right:38px;color:#1B1720}
html.vaultlix-native-ios #settings-panel #settings-general-section{margin:8px 14px 0;background:#fff;border-radius:18px;overflow:hidden}
html.vaultlix-native-ios #settings-panel #settings-general-section .settings-section-label{display:none}
html.vaultlix-native-ios #settings-panel #settings-general-section .settings-row{padding:14px 16px;gap:10px;border-bottom:.5px solid #E7E4EB}
html.vaultlix-native-ios #settings-panel #settings-general-section .settings-row.ios-last{border-bottom:0}
html.vaultlix-native-ios #settings-panel #settings-general-section .settings-row-icon{display:none}
html.vaultlix-native-ios #settings-panel #settings-general-section .settings-row-title{font:500 16px/1.25 'Inter',-apple-system,sans-serif;color:#1B1720;margin-bottom:0}
html.vaultlix-native-ios #settings-panel #settings-general-section .settings-row-sub{font:400 12.5px/1.4 'Inter',-apple-system,sans-serif;color:#8A8590;margin-top:2px}
html.vaultlix-native-ios #settings-panel #settings-general-section .settings-status{font:400 15px/1.2 'Inter',-apple-system,sans-serif;letter-spacing:0;color:#8A8590;max-width:42%;white-space:normal}
html.vaultlix-native-ios #settings-panel #settings-general-section .settings-status-action::after{content:'\203A';margin-left:8px;color:#C4C0CB;font-size:22px;line-height:1;vertical-align:-2px}
html.vaultlix-native-ios #settings-panel .toggle-switch{width:51px;height:31px}
html.vaultlix-native-ios #settings-panel .toggle-track{border-radius:16px;background:#E5E5EA}
html.vaultlix-native-ios #settings-panel .toggle-switch input:checked + .toggle-track{background:#34C759}
html.vaultlix-native-ios #settings-panel .toggle-thumb{top:2px;left:2px;width:27px;height:27px;box-shadow:0 2px 6px rgba(0,0,0,.22)}
html.vaultlix-native-ios #settings-panel .toggle-switch input:checked ~ .toggle-thumb{transform:translateX(20px)}
.locker-sheet{position:relative;overflow:hidden;background:linear-gradient(160deg,#FFFDFE 0%,#FBF5F7 100%);border:1px solid rgba(104,44,67,.12);border-radius:28px;padding:26px;box-shadow:0 26px 80px rgba(47,25,35,.3);font-family:'Inter',sans-serif}
.locker-sheet .app-lock-title{margin:0 0 9px;font:750 25px/1.15 'Manrope',sans-serif;letter-spacing:-.035em;color:#271D25}.locker-sheet .app-lock-copy{font:500 13px/1.6 'Inter',sans-serif;color:#75666D;margin-bottom:18px}.locker-sheet .app-lock-field{margin:13px 0}.locker-sheet .app-lock-field span{margin-bottom:7px;color:#57464E;font:700 11px/1.2 'Inter',sans-serif;letter-spacing:.025em}.locker-sheet .app-lock-field input{height:50px;border-color:#DDCFD5;border-radius:15px;padding:0 15px;background:#fff;color:#271D25;font:600 16px 'Inter',sans-serif;transition:border-color .15s,box-shadow .15s}.locker-sheet .app-lock-field input:focus{border-color:#A85D76;box-shadow:0 0 0 4px rgba(168,93,118,.12)}.locker-sheet .app-lock-actions{margin-top:21px}.locker-sheet .app-lock-actions button{min-height:46px;border-color:#DDCFD5;border-radius:14px;color:#682C43;padding:0 18px;font:750 13px 'Manrope',sans-serif}.locker-sheet .app-lock-actions .primary{background:#682C43;border-color:#682C43;color:#fff;box-shadow:0 8px 20px rgba(104,44,67,.2)}
#locker-setup-overlay,#locker-unlock-overlay,#locker-vault-overlay{background:rgba(31,18,25,.66);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.locker-sheet::before{content:'';position:absolute;width:180px;height:180px;border-radius:50%;right:-86px;top:-92px;background:rgba(200,117,136,.12);pointer-events:none}
.locker-brand{display:flex;align-items:center;gap:13px;margin-bottom:20px;position:relative}
.locker-brand-mark{width:48px;height:48px;border-radius:16px;background:#682C43;color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(104,44,67,.22)}
.locker-brand-mark svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.locker-kicker{color:#A85D76;font:800 10px/1 'Inter',sans-serif;letter-spacing:.15em;text-transform:uppercase;margin-bottom:5px}
.locker-vault-head{display:flex;align-items:center;gap:13px;margin-bottom:18px}.locker-vault-head .app-lock-title{flex:1;margin:0}.locker-vault-head button{min-height:40px;border:1px solid #E0D3D8;border-radius:12px;background:#fff;color:#682C43;padding:0 14px;font:750 12px 'Manrope',sans-serif}.locker-item-list{overflow:hidden;border:1px solid #EADFE3;border-radius:18px;background:#fff}.locker-item-list:empty{display:none}.locker-actions{justify-content:flex-start!important;flex-wrap:wrap}.locker-actions .primary-action{background:#682C43!important;color:#fff!important;border-color:#682C43!important}.locker-actions .close-action{margin-left:auto}
.locker-item-list .settings-row{padding:14px 15px;border-bottom:1px solid #F0E7EA;transition:background .15s}.locker-item-list .settings-row:last-child{border-bottom:0}.locker-item-list .settings-row:active{background:#FBF4F6}.locker-item-list .settings-row-icon{width:42px;height:42px;border-radius:13px}.locker-item-list .settings-row-title{font:750 14px 'Manrope',sans-serif;color:#34272E}.locker-item-list .settings-row-sub{font:550 11px 'Inter',sans-serif;color:#9A858E;margin-top:3px}
.locker-fullscreen{position:fixed;inset:0;z-index:10046;background:#FBF7F8;display:none;flex-direction:column;color:#271D25}
.locker-fullscreen.open{display:flex}
.locker-fullscreen-head{display:flex;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;flex:none;background:#fff;border-bottom:1px solid #EEE4E7;box-shadow:0 2px 12px rgba(72,42,54,.05)}
.locker-fullscreen-back{display:flex;align-items:center;gap:5px;border:0;background:transparent;color:#682C43;font:750 14px 'Manrope',sans-serif;padding:9px 8px;border-radius:11px}
.locker-fullscreen-back:active{background:#F4E9ED}
.locker-fullscreen-back svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.locker-fullscreen-delete{width:40px;height:40px;border:0;border-radius:12px;background:#FFF1F3;color:#9B2945;padding:0;display:grid;place-items:center}
.locker-fullscreen-delete svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.locker-fullscreen-body{flex:1;min-height:0;overflow-y:auto;width:min(100%,760px);margin:0 auto;padding:22px 18px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;box-sizing:border-box}
.locker-note-heading-input{border:0;border-bottom:1px solid #EADFE3;outline:none;background:#fff;width:100%;font:750 25px/1.25 'Manrope',sans-serif;letter-spacing:-.025em;color:#271D25;padding:21px 20px 14px;border-radius:20px 20px 0 0;box-sizing:border-box}
.locker-note-meta{color:#9B7E89;background:#fff;font:650 10px 'Inter',sans-serif;padding:0 20px 13px;letter-spacing:.02em}
.locker-note-body-input{flex:1;min-height:280px;border:0;outline:none;resize:none;background:#fff;width:100%;font:500 16px/1.65 'Inter',sans-serif;color:#3A2E34;padding:18px 20px;border-radius:0 0 20px 20px;box-sizing:border-box;box-shadow:0 12px 34px rgba(73,42,54,.07)}
.locker-note-heading-input::placeholder,.locker-note-body-input::placeholder{color:#B7A7AE}
.locker-fullscreen-dark{background:#0A0908}
.locker-fullscreen-dark .locker-fullscreen-head{background:#121012;border-bottom-color:#2A2528;box-shadow:none}.locker-fullscreen-dark .locker-fullscreen-back{color:#F5EDF0}.locker-fullscreen-dark .locker-fullscreen-delete{background:#2A171D;color:#E7A8B8}
.locker-fullscreen-photo-stage{flex:1;min-height:0;display:grid;place-items:center;overflow:hidden;padding:0 20px calc(20px + env(safe-area-inset-bottom))}
.locker-fullscreen-photo-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
/* iOS-only nudge: -webkit-touch-callout is a WebKit/iOS Safari-specific
property, unsupported anywhere else, so @supports on it is a reliable way
to target iOS specifically without a JS user-agent check. Android was
already reported as fine at the previous sizes — this only touches iOS. */
@supports (-webkit-touch-callout: none) {
.bubble{font-size:16px}
.msg.them .msg-name{font-size:12px}
.msg-time{font-size:12px}
.e2e-bar{font-size:12px}
.sys-msg{font-size:13px}
}
/* ── ENCRYPTION PULSE ─────────────────────────────────────────────── */
@keyframes e2e-pulse {
0% { background-color:#FFFBF0; border-color:#F0E8CC; color:#682C43; }
40% { background-color:rgba(104,44,67,0.15); border-color:rgba(104,44,67,0.6); color:#682C43; box-shadow:0 0 12px rgba(104,44,67,0.2); }
100% { background-color:#FFFBF0; border-color:#F0E8CC; color:#682C43; box-shadow:none; }
}
.e2e-bar.pulse { animation:e2e-pulse 0.8s ease-in-out forwards; }
.e2e-bar.pending { background:#F3F1EC; border-color:#E4DED3; color:#8A7F72; }
/* ── CONNECTION MOMENT ────────────────────────────────────────────── */
/* V-entrance — the same V mark that closes a conversation (.vanish-v below)
now also opens one, so the mark bookends the whole experience: this V
for "you're in, it's encrypted," that V for "it's gone, no trace." Kept
the same size/font/color as .vanish-v on purpose — a different size here
would break the bookend read. */
#connect-overlay{position:fixed;inset:0;background:#0A0908;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9998;opacity:0;transition:opacity .4s ease;}
#connect-overlay.visible{opacity:1}
#connect-overlay.hiding{opacity:0;transform:translateY(-20px);transition:opacity .4s ease,transform .4s ease}
/* ── CONNECTION ACHIEVEMENTS ──────────────────────────────────── */
/* Achievement celebration — a poised, badge-first moment rather than a
confetti burst. The medallion is the hero (same gradient as an "earned"
.achievement-badge-icon, so this is literally the badge you'll find in
the collection, not a disconnected graphic); text only confirms what it
is, staggered in after the badge settles, never competing for attention
at the same instant. One spring-in, one soft glow bloom, one shine sweep
— each earns its place; nothing is decorative for its own sake. */
.achievement-celebration{position:fixed;inset:0;z-index:602;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;pointer-events:none;opacity:0;visibility:hidden;text-align:center;background:rgba(20,15,18,.34);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);transition:opacity .35s cubic-bezier(.22,1,.36,1),visibility 0s linear .35s}
.achievement-celebration.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .35s cubic-bezier(.22,1,.36,1)}
.achievement-badge-medal{position:relative;width:92px;height:92px;border-radius:27px;display:grid;place-items:center;background:linear-gradient(145deg,#8A3A58,#682C43);box-shadow:0 18px 46px rgba(104,44,67,.4),0 0 0 1px rgba(255,255,255,.14) inset;transform:scale(.6);opacity:0;overflow:hidden}
.achievement-celebration.open .achievement-badge-medal{animation:achievement-medal-in .62s cubic-bezier(.34,1.56,.64,1) forwards}
.achievement-badge-glow{position:absolute;inset:-35%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(200,117,136,.55),transparent 70%);transform:scale(.4);opacity:0;filter:blur(1px)}
.achievement-celebration.open .achievement-badge-glow{animation:achievement-glow 1.15s cubic-bezier(.22,1,.36,1) forwards}
.achievement-badge-shine{position:absolute;inset:-45% -65%;background:linear-gradient(75deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);transform:translateX(-130%)}
.achievement-celebration.open .achievement-badge-shine{animation:achievement-shine .85s .48s cubic-bezier(.4,0,.2,1) forwards}
.achievement-icon{color:#FFF8F1;font:750 30px/1 Manrope,Inter,sans-serif}
.achievement-kicker{margin-top:20px;color:rgba(255,255,255,.7);font:750 10.5px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;transform:translateY(8px);opacity:0}
.achievement-title{max-width:300px;margin-top:7px;color:#fff;font:650 21px/1.3 Manrope,Inter,sans-serif;letter-spacing:-.01em;text-shadow:0 1px 4px rgba(0,0,0,.22);transform:translateY(8px);opacity:0}
.achievement-celebration.open .achievement-kicker{animation:achievement-rise .5s .3s cubic-bezier(.22,1,.36,1) forwards}
.achievement-celebration.open .achievement-title{animation:achievement-rise .5s .38s cubic-bezier(.22,1,.36,1) forwards}
@keyframes achievement-rise{to{transform:translateY(0);opacity:1}}
@keyframes achievement-medal-in{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.07);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes achievement-glow{0%{transform:scale(.4);opacity:0}40%{opacity:.9}100%{transform:scale(1.7);opacity:0}}
@keyframes achievement-shine{to{transform:translateX(130%)}}
.connection-spark{display:inline-flex;align-items:center;gap:3px;padding:3px 7px;border-radius:999px;background:#F4E4EA;color:#682C43;font:750 10px/1 Inter,sans-serif;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(104,44,67,.12)}
.achievements-overlay{position:fixed;inset:0;z-index:625;display:none;background:#F8F4F5;color:#30242A;overflow:hidden}
.achievements-overlay.open{display:flex;flex-direction:column}
.achievements-head{flex:none;display:grid;grid-template-columns:46px minmax(0,1fr) 46px;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 14px 12px;background:#fff;border-bottom:1px solid #E9DDE1}
.achievements-close{width:44px;height:44px;border-radius:14px;background:#F4E9ED;color:#682C43;font-size:28px;line-height:1;display:grid;place-items:center}
.achievements-heading{text-align:center;min-width:0}.achievements-heading strong{display:block;font:750 18px/1.2 Manrope,Inter,sans-serif}.achievements-heading span{display:block;margin-top:3px;color:#8A7880;font:550 11px/1.2 Inter,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.achievements-body{flex:1;overflow:auto;padding:18px 16px calc(28px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.achievements-intro{max-width:620px;margin:0 auto 18px;color:#725F67;font:550 13px/1.55 Inter,sans-serif;text-align:center}
.achievement-group{max-width:620px;margin:0 auto 22px}.achievement-group-title{margin:0 0 10px;color:#6B2C43;font:800 12px/1.2 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.achievement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.achievement-badge-card{min-height:142px;padding:15px 13px 13px;border:1px solid #E6DADF;border-radius:18px;background:#fff;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 5px 18px rgba(67,37,49,.045)}
.achievement-badge-card.earned{border-color:#CDAEBA;background:linear-gradient(155deg,#FFF6F9,#FFF 62%);box-shadow:0 8px 24px rgba(104,44,67,.12)}
.achievement-badge-icon{width:47px;height:47px;border-radius:16px;display:grid;place-items:center;background:#EEE8EA;color:#9A8D92;font:750 22px/1 Inter,sans-serif}.achievement-badge-card.earned .achievement-badge-icon{background:linear-gradient(145deg,#8A3A58,#682C43);color:#FFF8F1;box-shadow:0 6px 16px rgba(104,44,67,.24)}
.achievement-badge-name{margin-top:10px;color:#392C32;font:750 12.5px/1.25 Manrope,Inter,sans-serif}.achievement-badge-state{margin-top:5px;color:#95878D;font:600 10.5px/1.25 Inter,sans-serif}.achievement-badge-card.earned .achievement-badge-state{color:#682C43}
.achievement-progress{width:100%;height:4px;margin-top:auto;border-radius:999px;background:#EEE8EA;overflow:hidden}.achievement-progress i{display:block;height:100%;border-radius:inherit;background:#C9BBC0}.achievement-badge-card.earned .achievement-progress i{background:#8A3A58}
@media (min-width:620px){.achievement-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.achievement-celebration{transition:opacity .15s ease}.achievement-celebration.open .achievement-kicker,.achievement-celebration.open .achievement-title,.achievement-celebration.open .achievement-badge-medal{animation:none;transform:none;opacity:1}.achievement-badge-glow,.achievement-badge-shine{display:none}}
.number-card-overlay{position:fixed;inset:0;background:rgba(20,7,13,.76);z-index:620;display:none;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.number-card-overlay.open{display:flex}.number-card-modal{width:min(390px,92vw);background:#2D0C18;border:1px solid rgba(255,255,255,.15);border-radius:24px;padding:14px;box-shadow:0 28px 80px rgba(0,0,0,.5)}
#number-card-canvas{display:block;width:100%;height:auto;border-radius:16px;background:#6B1F3A}.number-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.number-card-actions button{border-radius:14px;padding:13px;border:1px solid rgba(255,255,255,.2);font:700 14px Inter,sans-serif}.number-card-share{background:#F8EDF1;color:#6B1F3A}.number-card-close{background:transparent;color:#F8EDF1}.number-card-invite{grid-column:1/-1;background:#682C43;color:#fff}.number-card-invite-copy{margin:12px 8px 0;color:#DCC7CF;font:500 12px/1.45 Inter,sans-serif;text-align:center}
.number-card-modal.preparing #number-card-canvas{opacity:.5}.number-card-progress{display:none;text-align:center;color:#F8EDF1;font:650 12px/1.4 Inter,sans-serif;padding:10px 0 0}.number-card-modal.preparing .number-card-progress{display:block}
.pdf-preview-overlay{position:fixed;inset:0;z-index:950;display:none;flex-direction:column;background:#F4EFF1;color:#281F23;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}.pdf-preview-overlay.open{display:flex}.pdf-preview-head{height:62px;flex:0 0 62px;display:flex;align-items:center;gap:12px;padding:9px 14px;background:#fff;border-bottom:1px solid #E4D9DE}.pdf-preview-close{width:42px;height:42px;border-radius:13px;background:#F4E9ED;color:#682C43;font-size:25px}.pdf-preview-title{min-width:0;flex:1}.pdf-preview-name{font:700 15px/1.25 Manrope,Inter,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pdf-preview-meta{margin-top:3px;color:#83757C;font:550 11px Inter,sans-serif}.pdf-preview-stage{min-height:0;flex:1;overflow:auto;display:block;padding:18px;touch-action:pan-x pan-y}.pdf-preview-paper{position:relative;width:min(720px,100%);min-height:240px;margin:0 auto;display:grid;place-items:center;background:#fff;border-radius:10px;box-shadow:0 8px 30px rgba(62,33,45,.14);overflow:hidden;transform-origin:top left}.pdf-preview-paper canvas{display:block;width:100%;height:auto}.pdf-preview-placeholder{width:100%;height:auto;display:block}.pdf-preview-loading{position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,255,255,.84);color:#755D68;font:650 13px Inter,sans-serif}.pdf-preview-controls{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 14px;background:#fff;border-top:1px solid #E4D9DE}.pdf-preview-controls button{width:42px;height:38px;border-radius:12px;background:#F4E9ED;color:#682C43;font-size:19px}.pdf-preview-controls button:disabled{opacity:.35}.pdf-preview-page{min-width:76px;text-align:center;font:650 12px Inter,sans-serif;color:#6E5B64}.pdf-preview-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:0 14px 12px;background:#fff}.pdf-preview-actions button{min-height:44px;border-radius:13px;font:700 13px Inter,sans-serif}.pdf-preview-dismiss{min-width:96px;margin-right:auto;background:#F4E9ED;color:#682C43}.pdf-preview-icon-action{width:48px;display:grid;place-items:center;background:#682C43;color:#fff}.pdf-preview-icon-action svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.first-connection-icon{width:70px;height:70px;margin:2px 0 20px;display:grid;place-items:center;border-radius:23px;background:linear-gradient(145deg,#73314B,#512033);color:#fff;box-shadow:0 16px 34px rgba(104,44,67,.22)}.first-connection-icon svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.first-connection-privacy{display:flex;align-items:flex-start;gap:9px;margin:13px 0 2px;padding:12px 13px;border-radius:13px;background:#F7F1F3;color:#75656D;font:550 11.5px/1.45 Inter,sans-serif}.first-connection-privacy svg{width:16px;height:16px;flex:none;margin-top:1px;fill:none;stroke:#682C43;stroke-width:1.8}
.connect-v-mark{font-family:'Cormorant Garamond',serif;font-size:72px;font-weight:300;color:#682C43;letter-spacing:.1em;line-height:1;transform:scale(0.6);opacity:0;transition:transform .5s cubic-bezier(0.34,1.56,0.64,1),opacity .5s cubic-bezier(0.34,1.56,0.64,1)}
#connect-overlay.visible .connect-v-mark{transform:scale(1);opacity:1}
.connect-v-mark.pulse{animation:vanish-pulse .5s ease-in-out}
.connect-rule{width:0;height:1px;background:#682C43;margin:18px 0 16px;transition:width .35s ease-out .55s}
#connect-overlay.visible .connect-rule{width:60px}
.connect-wordmark{font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:300;letter-spacing:.16em;color:rgba(255,255,255,.7);opacity:0;transform:translateY(8px);transition:opacity .35s ease .9s,transform .35s ease .9s}
#connect-overlay.visible .connect-wordmark{opacity:1;transform:translateY(0)}
.connect-context{margin-top:16px;font-family:'Inter',sans-serif;font-size:12px;color:rgba(255,255,255,.5);letter-spacing:.04em;opacity:0;transition:opacity .35s ease 1.2s}
#connect-overlay.visible .connect-context{opacity:1}
.connect-status{margin-top:10px;font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.4);opacity:0;transition:opacity .35s ease 1.5s}
.connect-status svg{width:13px;height:13px;margin-right:5px;vertical-align:-2px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#connect-overlay.visible .connect-status{opacity:1}
/* ── VANISH MOMENT ────────────────────────────────────────────────── */
#vanish-overlay{position:fixed;inset:0;background:#0A0908;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;opacity:0;transition:opacity .4s ease;}
#vanish-overlay.visible{opacity:1}
#vanish-overlay.hiding{opacity:0;transition:opacity .6s ease}
.vanish-rule{width:40px;height:1px;background:#682C43;margin-bottom:20px;opacity:0;transition:opacity .4s ease .2s}
#vanish-overlay.visible .vanish-rule{opacity:1}
.vanish-v{font-family:'Cormorant Garamond',serif;font-size:72px;font-weight:300;color:#682C43;letter-spacing:.1em;transform:scale(0.8);opacity:0;transition:transform .4s ease-out,opacity .4s ease-out;line-height:1}
#vanish-overlay.visible .vanish-v{transform:scale(1);opacity:1}
.vanish-v.pulse{animation:vanish-pulse .5s ease-in-out}
@keyframes vanish-pulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
.vanish-text{margin-top:24px;text-align:center;opacity:0;transition:opacity .4s ease .8s}
#vanish-overlay.visible .vanish-text{opacity:1}
.vanish-line1{font-family:'Inter',sans-serif;font-size:13px;color:rgba(255,255,255,0.7);letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.vanish-line2{font-family:'Inter',sans-serif;font-size:11px;color:rgba(255,255,255,0.35);letter-spacing:.1em;text-transform:uppercase}
/* ── CALL SCREENS (outgoing / incoming / active) ─────────────────────── */
.call-overlay{position:fixed;inset:0;background:var(--surface2);display:flex;flex-direction:column;align-items:center;justify-content:space-between;z-index:9997;opacity:0;transition:opacity .3s ease,background .3s ease;padding:calc(84px + env(safe-area-inset-top)) 32px 72px;box-sizing:border-box}
.call-overlay.visible{opacity:1}
.call-data-rain{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:.72}
.call-overlay.has-video .call-data-rain{display:none}
.call-ui{display:contents}
.call-overlay>.call-hdr-block,.call-overlay>.call-identity,.call-overlay>.call-actions,.call-overlay>.call-reaction-picker,.call-overlay>.call-ui>.call-hdr-block,.call-overlay>.call-ui>.call-identity,.call-overlay>.call-ui>.call-actions,.call-overlay>.call-ui>.call-reaction-picker{position:relative;z-index:1}
.call-data-column{position:absolute;top:-55%;display:flex;flex-direction:column;gap:7px;color:rgba(250,246,247,.34);font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-shadow:0 0 7px rgba(250,246,247,.18);animation:call-data-fall linear infinite;will-change:transform}
.call-data-column.rose{color:rgba(229,137,160,.52);text-shadow:0 0 9px rgba(229,137,160,.28)}
html.vaultlix-native-ios .call-data-column{font-size:11px}
@keyframes call-data-fall{from{transform:translateY(-12vh)}to{transform:translateY(170vh)}}
/* Lets the full-bleed #call-remote-video (sitting just behind, at a lower
z-index) show through the overlay's own chrome once a remote video track
is actually active — see renderCallOverlay's has-video toggle. Bottom
edge fade only now (still needed for the button row) — the top one was
backing the wordmark/name, both of which are dropped entirely once the
peer's video is actually visible (see videoMode in renderCallOverlay):
with nothing left up there, there's nothing left to scrim. */
.call-overlay.has-video{background:transparent}
.call-overlay.has-video::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0) 180px);pointer-events:none}
html.vaultlix-native-ios.vaultlix-native-video-active,
html.vaultlix-native-ios.vaultlix-native-video-active body,
html.vaultlix-native-ios.vaultlix-native-video-active #s-chat,
html.vaultlix-native-ios.vaultlix-native-video-active .call-overlay{background:transparent!important}
/* Native iOS video owns an always-available UIKit control bar. Avoid drawing
a second web control row underneath it when WebKit receives the video-state
event; background/lock-screen resumes may skip that event entirely. */
html.vaultlix-native-ios.vaultlix-native-video-active .call-actions{visibility:hidden;pointer-events:none}
.call-hdr-block{text-align:center}
.call-hdr-rule{width:50px;height:1px;background:#682C43;margin:0 auto 14px}
.call-hdr-name{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;letter-spacing:.12em;color:rgba(255,255,255,.9);text-shadow:0 1px 4px rgba(0,0,0,.2)}
.call-identity{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;min-height:0}
.call-peer-avatar-stage{position:relative;width:132px;height:132px;display:grid;place-items:center;margin-bottom:10px}
.call-peer-avatar-stage .ring-wave{width:104px;height:104px;background:rgba(200,117,136,.24)}
.call-peer-avatar-stage .ring-wave:nth-child(2){animation-delay:.6s}
.call-peer-avatar-stage .ring-wave:nth-child(3){animation-delay:1.2s}
.call-peer-avatar-photo{position:relative;z-index:2;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:#FAF6F7;color:#682C43;font:600 42px/1 'Inter',sans-serif;box-shadow:0 0 0 8px rgba(255,255,255,.055),0 20px 50px rgba(0,0,0,.34)}
.call-peer-avatar-photo img{width:100%;height:100%;display:block;object-fit:cover}
.call-peer-avatar-stage.compact{width:94px;height:94px;margin-bottom:8px}
.call-peer-avatar-stage.compact .call-peer-avatar-photo{width:82px;height:82px;font-size:32px;box-shadow:0 0 0 6px rgba(255,255,255,.05),0 14px 34px rgba(0,0,0,.3)}
.call-peer-name{max-width:min(86vw,520px);display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere;font-family:'Inter',sans-serif;font-size:clamp(27px,8vw,36px);font-weight:600;line-height:1.12;color:#fff;letter-spacing:-.035em}
.call-status{font-family:'Inter',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.74);text-shadow:0 1px 3px rgba(0,0,0,.2)}
.call-status.call-security{color:rgba(255,255,255,.9);font-weight:500;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.call-status.pulsing{animation:call-status-pulse 1.5s ease-in-out infinite}
@keyframes call-status-pulse{0%,100%{opacity:1}50%{opacity:.5}}
.call-timer-display{font-family:'Inter',sans-serif;font-size:34px;font-weight:300;color:rgba(255,255,255,.97);letter-spacing:.06em;font-variant-numeric:tabular-nums;margin-top:4px;text-shadow:0 1px 4px rgba(0,0,0,.2)}
.call-tagline{font-family:'Inter',sans-serif;font-size:13px;color:rgba(255,255,255,.68);letter-spacing:.1em;margin-top:8px;text-shadow:0 1px 3px rgba(0,0,0,.2)}
/* Video mode: the peer's own video already confirms who you're talking to
and fills the frame, so the wordmark/status/tagline are dropped entirely
(not just shrunk) rather than repositioned. The name comes back here,
though — small and light, stacked with the timer right below it,
top-center, no background box, just enough text-shadow to stay legible
over whatever's in the video. Reuses .call-identity's own flex:1 box (so
call-actions stays pinned to the bottom exactly as always) but
re-anchors it to the top instead of the vertical center. */
.call-identity.video-top{justify-content:flex-start;gap:2px;padding-top:6px}
.call-peer-name-compact{display:block;max-width:min(72vw,420px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'Inter',sans-serif;font-size:17px;font-weight:600;color:#fff;letter-spacing:-.015em;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.call-timer-compact{font-family:'Inter',sans-serif;font-size:13px;font-weight:400;color:rgba(255,255,255,.9);font-variant-numeric:tabular-nums;letter-spacing:.03em;text-shadow:0 1px 4px rgba(0,0,0,.6)}
/* Incoming — three concentric gold rings pulsing outward from a center dot */
.ring-container{position:relative;width:60px;height:60px;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.ring-dot{width:12px;height:12px;border-radius:50%;background:#682C43;position:relative;z-index:2}
.ring-wave{position:absolute;width:12px;height:12px;border-radius:50%;background:#682C43;animation:ring-expand 2s ease-out infinite}
.ring-wave:nth-child(2){animation-delay:.6s}
.ring-wave:nth-child(3){animation-delay:1.2s}
@keyframes ring-expand{0%{transform:scale(1);opacity:.6}100%{transform:scale(5);opacity:0}}
/* Outgoing — hollow gold dot, slow pulse */
.call-hollow-dot{width:12px;height:12px;border-radius:50%;border:1.5px solid #682C43;background:transparent;box-sizing:border-box;margin-bottom:6px;animation:hollow-pulse 1.8s ease-in-out infinite}
@keyframes hollow-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.3)}}
/* Active — filled gold dot, slow breathing rhythm; goes static grey when muted */
.call-live-dot{width:10px;height:10px;border-radius:50%;background:#682C43;display:inline-block;vertical-align:middle;margin-right:10px;animation:live-breathe 2s ease-in-out infinite}
.call-live-dot.muted{animation:none;background:rgba(255,255,255,.2)}
@keyframes live-breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}
/* Float & Fade — call-end dissolve. Applied via JS in staggered order (see
dissolveCallScreen); transform+opacity only, transition-driven rather
than keyframed so the JS can control per-element timing. display:inline-
block is forced because a couple of the targeted elements (call-peer-
name) are plain inline spans, and CSS transforms on inline boxes are
inconsistent across engines. */
.call-float-fade{display:inline-block;transition:transform .6s ease-out,opacity .6s ease-out;transform:translateY(-24px);opacity:0}
.call-sink-fade{display:inline-block;transition:transform .5s ease-out,opacity .5s ease-out;transform:translateY(24px);opacity:0}
/* Plain opacity fade, no transform/display change — used on .call-identity/
.call-actions/.call-reaction-picker themselves (see dissolveCallScreen),
which are flex CONTAINERS, unlike everything else Float & Fade targets.
Reusing .call-float-fade/.call-sink-fade there would force
display:inline-block on a flex box mid-transition, breaking its own
children's layout right as it's fading — this just fades opacity and
leaves layout alone. */
.call-dissolve-hide{opacity:0;transition:opacity .4s ease}
/* Higher specificity than .call-live-dot so animation:none actually wins
and stops the infinite live-breathe keyframe — otherwise the running
animation would keep overriding the transform this transition needs. */
.call-live-dot.call-dot-expand{animation:none;transition:transform .5s ease-out,opacity .5s ease-out;transform:scale(3);opacity:0}
.call-overlay.dissolving{background:transparent;transition:background .6s ease;pointer-events:none}
/* This mark appears AFTER the call screen's own dark background has
already faded to transparent (see dissolveCallScreen), so it's sitting
directly on the room's white/cream chat background, not the #0A0908 the
original vanish-overlay text colors were tuned for. White-on-white would
have been unreadable right when it matters most. Just the V here — the
call duration isn't shown on this transient screen at all (it still
lands in the room afterward via the "Encrypted call · MM:SS" system
message), so there's nothing to stage before it. */
.call-vanish-mark{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .5s ease,transform .8s ease-out}
.call-vanish-mark.visible{opacity:1}
.call-vanish-mark .v-glyph{font-family:'Cormorant Garamond',serif;font-size:64px;font-weight:300;color:#682C43;letter-spacing:.1em;line-height:1;transform:scale(.8);transition:transform .4s ease-out}
.call-vanish-mark.visible .v-glyph{transform:scale(1)}
.call-vanish-mark .v-glyph.pulse{animation:vanish-pulse .5s ease-in-out}
.call-actions{display:flex;gap:36px;align-items:flex-start;justify-content:center}
/* At 4+ buttons (camera toggle is always present now, speaker/flip are each
conditional on top of that) the default 64px buttons + 36px gaps overflow
a narrow phone's viewport and clip at both edges — shrink to fit instead,
same reasoning as the timer-bar's "call button wrapping" fix. See the
actionsButtonCount computation in renderCallOverlay for when this applies. */
.call-actions.compact{gap:clamp(8px,3vw,14px)}
.call-actions.compact .call-mute-btn,.call-actions.compact .call-speaker-btn,.call-actions.compact .call-camera-btn,.call-actions.compact .call-reaction-btn,.call-actions.compact .call-end-btn{width:56px;height:56px}
.call-actions.compact .call-mute-btn svg,.call-actions.compact .call-speaker-btn svg,.call-actions.compact .call-camera-btn svg,.call-actions.compact .call-reaction-btn svg{width:24px;height:24px}
.call-actions.compact .call-end-btn svg{width:26px;height:26px}
.call-actions.compact .call-btn-label{font-size:12px;max-width:60px}
/* Video mode: buttons group into one frosted pill capsule instead of
scattered bordered circles (matches WhatsApp's/FaceTime's bottom-bar
convention) — icon-only, no text labels, since the pill itself now
carries the visual grouping the individual borders used to provide.
Rules placed after .compact on purpose: equal specificity, so this wins
sizing when both classes are present together (video calls with 4+
buttons are the common case). End keeps its red fill deliberately —
same "the destructive action stays visually distinct" reasoning as
everywhere else in the call UI, just smaller to match. */
.call-actions.video-bar{background:rgba(50,50,50,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:999px;padding:10px 16px;gap:16px}
.call-actions.video-bar .call-btn-label{display:none}
.call-actions.video-bar .call-btn-wrap{gap:0}
.call-actions.video-bar .call-mute-btn,.call-actions.video-bar .call-speaker-btn,.call-actions.video-bar .call-camera-btn,.call-actions.video-bar .call-reaction-btn{width:46px;height:46px;border:none;background:transparent}
.call-actions.video-bar .call-mute-btn svg,.call-actions.video-bar .call-speaker-btn svg,.call-actions.video-bar .call-camera-btn svg,.call-actions.video-bar .call-reaction-btn svg{width:20px;height:20px}
.call-actions.video-bar .call-mute-btn.muted,.call-actions.video-bar .call-speaker-btn.active,.call-actions.video-bar .call-camera-btn.active,.call-actions.video-bar .call-reaction-btn.active{background:rgba(255,255,255,.18)}
.call-actions.video-bar .call-end-btn{width:46px;height:46px}
.call-actions.video-bar .call-end-btn svg{width:20px;height:20px}
/* Tap-to-toggle chrome (see renderCallOverlay's click listener, attached
once when the overlay is first created): only meaningful — and only
ever toggled — while has-video is set, so this can't affect the
audio-only layout even if the class somehow lingered from a prior
video segment of the same call (cleared explicitly whenever has-video
goes false, precisely to prevent that). pointer-events:none while
hidden so a re-tap lands on the video underneath, not on an invisible
button. #call-local-video (PiP) is a sibling of .call-overlay, not a
descendant, so it's structurally unreachable from these selectors —
"stays visible regardless" falls out for free. call-reaction-picker is
included here too so it can never be left open and reachable while
the rest of the chrome is hidden — see renderCallOverlay's click
listener, which also explicitly closes it the moment chrome hides. */
.call-overlay.has-video .call-identity,.call-overlay.has-video .call-actions,.call-overlay.has-video .call-reaction-picker{transition:opacity .22s ease}
.call-overlay.has-video.chrome-hidden .call-identity,.call-overlay.has-video.chrome-hidden .call-actions,.call-overlay.has-video.chrome-hidden .call-reaction-picker{opacity:0;pointer-events:none}
.call-btn-wrap{display:flex;flex-direction:column;align-items:center;gap:9px}
.call-btn-label{font-family:'Inter',sans-serif;font-size:10px;color:rgba(255,255,255,.74);letter-spacing:.08em;text-align:center;max-width:90px;text-shadow:0 1px 3px rgba(0,0,0,.22)}
/* Reaction picker — same frosted-pill language as the video-mode button
bar, but shown in EITHER call mode (audio or video), unlike video-bar
itself. Sits as a normal-flow sibling directly above .call-actions
(see renderCallOverlay) rather than being absolutely positioned, so it
naturally pushes into place without needing to know the button row's
own height/position. */
.call-reaction-picker{display:none;gap:10px;align-items:center;justify-content:center;background:rgba(50,50,50,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:999px;padding:8px 14px;margin-bottom:14px}
.call-reaction-picker.open{display:flex}
.call-reaction-emoji-btn{background:none;border:none;font-size:26px;line-height:1;padding:4px;cursor:pointer;transition:transform .15s}
.call-reaction-emoji-btn:active{transform:scale(1.3)}
/* One floating reaction — position:fixed, appended straight to (not
inside .call-overlay) so it's unaffected by chrome-hidden and by
overlay.innerHTML replacing the overlay's children on every render;
removed via the animationend listener in playCallReactionAnimation once
it's actually finished, not a parallel setTimeout guess. */
.call-reaction-emoji{position:fixed;left:50%;bottom:190px;font-size:44px;line-height:1;transform:translateX(-50%);animation:call-reaction-float 1.8s ease-out forwards;pointer-events:none;z-index:9999}
@keyframes call-reaction-float{0%{opacity:0;transform:translateX(-50%) translateY(0) scale(.5)}15%{opacity:1;transform:translateX(-50%) translateY(-20px) scale(1.15)}30%{transform:translateX(-50%) translateY(-40px) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-190px) scale(1)}}
/* Heart shower — a bucket of hearts tipped out over the whole screen (see playHeartShower).
Hearts start along the entire top edge and fall to the bottom with gravity (the timing curve
speeds up as each one drops), swaying slightly. Per-heart size, delay, duration, start position,
sideways drift and spin are set as inline custom properties in JS. opacity:0 in the base rule
keeps each heart invisible for its own delay period. */
.heart-shower{position:fixed;top:0;left:var(--x);line-height:1;opacity:0;pointer-events:none;z-index:9999;will-change:transform,opacity;animation:heart-shower-fall var(--dur) cubic-bezier(.42,0,.9,.6) var(--delay) forwards}
@keyframes heart-shower-fall{
0%{opacity:0;transform:translate(0,-14vh) rotate(0deg) scale(.7)}
6%{opacity:1}
88%{opacity:1}
100%{opacity:0;transform:translate(var(--drift),108vh) rotate(var(--spin)) scale(1)}
}
/* Punch — a single fist, centered, flying toward the viewer. Deliberately
fast/blunt (ease-out scale-up, brief overshoot-then-settle bounce, quick
fade) rather than the drifting float everything else uses — meant to
read as an impact, not a moment lingering in the air. font-size:70px is
the pre-scale base; at the 3x peak that's ~210px on screen. */
.call-reaction-punch{position:fixed;top:50%;left:50%;font-size:70px;line-height:1;opacity:0;transform:translate(-50%,-50%) scale(.2);animation:call-reaction-punch .8s ease-out forwards;pointer-events:none;z-index:9999}
@keyframes call-reaction-punch{
0%{opacity:.5;transform:translate(-50%,-50%) scale(.2)}
50%{opacity:1;transform:translate(-50%,-50%) scale(3)}
65%{transform:translate(-50%,-50%) scale(2.6)}
78%{opacity:1;transform:translate(-50%,-50%) scale(2.85)}
100%{opacity:0;transform:translate(-50%,-50%) scale(2.85)}
}
.call-accept-btn,.call-decline-btn,.call-end-btn{border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;position:relative;box-sizing:border-box}
/* Accept — green, pulsing glow, phone icon nudges upward */
.call-accept-btn{width:72px;height:72px;background:#27AE60;box-shadow:0 0 0 0 rgba(39,174,96,.4),0 4px 24px rgba(39,174,96,.4);animation:accept-pulse 1.5s ease-out infinite}
@keyframes accept-pulse{0%{box-shadow:0 0 0 0 rgba(39,174,96,.5),0 4px 24px rgba(39,174,96,.3)}50%{box-shadow:0 0 0 16px rgba(39,174,96,0),0 4px 32px rgba(39,174,96,.5)}100%{box-shadow:0 0 0 0 rgba(39,174,96,0),0 4px 24px rgba(39,174,96,.3)}}
.call-accept-btn svg{width:28px;height:28px;fill:#fff;stroke:none;animation:phone-up 1.2s ease-in-out infinite}
@keyframes phone-up{0%,100%{transform:translateY(2px) rotate(-15deg)}40%{transform:translateY(-4px) rotate(-15deg)}60%{transform:translateY(-2px) rotate(-15deg)}}
/* Decline — red, pulsing glow offset from accept, phone icon nudges downward */
.call-decline-btn{width:72px;height:72px;background:#C87588;box-shadow:0 0 0 0 rgba(192,57,43,.4),0 4px 24px rgba(192,57,43,.3);animation:decline-pulse 1.5s ease-out infinite;animation-delay:.75s}
@keyframes decline-pulse{0%{box-shadow:0 0 0 0 rgba(192,57,43,.5),0 4px 24px rgba(192,57,43,.3)}50%{box-shadow:0 0 0 16px rgba(192,57,43,0),0 4px 32px rgba(192,57,43,.5)}100%{box-shadow:0 0 0 0 rgba(192,57,43,0),0 4px 24px rgba(192,57,43,.3)}}
.call-decline-btn svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transform:rotate(135deg);animation:phone-down 1.2s ease-in-out infinite;animation-delay:.3s}
@keyframes phone-down{0%,100%{transform:translateY(-2px) rotate(135deg)}40%{transform:translateY(4px) rotate(135deg)}60%{transform:translateY(2px) rotate(135deg)}}
/* End / Cancel — red, steady glow pulse, no icon animation */
.call-end-btn{width:64px;height:64px;background:#C87588;box-shadow:0 4px 20px rgba(192,57,43,.4);animation:end-glow 2s ease-in-out infinite;transition:transform .15s,box-shadow .15s}
@keyframes end-glow{0%,100%{box-shadow:0 4px 20px rgba(192,57,43,.3)}50%{box-shadow:0 4px 32px rgba(192,57,43,.6)}}
.call-end-btn svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transform:rotate(135deg)}
.call-end-btn:active{transform:scale(.92);box-shadow:0 2px 10px rgba(192,57,43,.3)}
/* Mute / Speaker — same outlined ghost button, fills gold when active.
Speaker is only ever shown when the browser/device combo actually
supports switching output devices (see detectSpeakerToggle) — an
always-visible button that silently does nothing on unsupported
platforms (iOS Safari has no equivalent API at all) is worse than no
button. */
.call-mute-btn,.call-speaker-btn,.call-camera-btn,.call-reaction-btn{width:64px;height:64px;border-radius:50%;background:transparent;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-sizing:border-box;transition:transform .15s,background .2s ease,border-color .2s ease}
.call-mute-btn.muted,.call-speaker-btn.active,.call-camera-btn.active,.call-reaction-btn.active{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.call-mute-btn:active,.call-speaker-btn:active,.call-camera-btn:active,.call-reaction-btn:active{transform:scale(.92)}
.call-mute-btn svg,.call-speaker-btn svg,.call-camera-btn svg,.call-reaction-btn svg{width:22px;height:22px;fill:none;stroke:rgba(255,255,255,.85);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s ease}
.call-speaker-btn svg{fill:rgba(255,255,255,.85);stroke:rgba(255,255,255,.85)}
/* Full-bleed, sitting just behind .call-overlay (z-index one lower) so the
overlay's own transparent-when-has-video background (above) lets it show
through, with the mute/speaker/camera/end chrome rendered on top of it. */
#call-remote-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:9996;display:none}
#call-remote-video.show{display:block}
/* Local self-view PiP — portrait-only placement (calls lock portrait, see
startCall/acceptCall), tucked under the top wordmark and clear of the
call-btn-wrap row at the bottom. Above the overlay (higher z-index) since
this is the one thing that should always stay visible regardless of
whether the remote side has video on. */
#call-local-video{position:fixed;top:calc(64px + env(safe-area-inset-top));right:16px;width:90px;height:128px;border-radius:12px;object-fit:cover;background:#111;z-index:9999;display:none;border:1px solid rgba(255,255,255,.15);box-shadow:0 6px 18px rgba(0,0,0,.5)}
#call-local-video.show{display:block}
/* ── SETTINGS PANEL + GEAR ICON ──────────────────────────────────────── */
.settings-btn{width:34px;height:34px;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#9A8C7E;border-radius:50%;transition:all .2s ease;flex-shrink:0;padding:0;margin-left:4px}
.settings-btn:hover{color:#682C43;background:rgba(104,44,67,0.08)}
.settings-btn svg{width:18px;height:18px;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.settings-btn:hover svg{transform:rotate(45deg)}
.settings-btn.active svg{transform:rotate(90deg);color:#682C43}
.settings-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:400;opacity:0;transition:opacity .25s ease;pointer-events:none;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.settings-overlay.open{opacity:1;pointer-events:all}
.settings-panel{position:fixed;top:0;right:0;bottom:0;width:min(360px,100vw);background:#FFFFFF;z-index:401;transform:translateX(100%);transition:transform .3s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column;overflow-y:auto;box-shadow:-4px 0 32px rgba(0,0,0,0.15)}
.settings-panel.open{transform:translateX(0)}
.settings-header{display:flex;align-items:center;gap:12px;padding:calc(20px + env(safe-area-inset-top)) 20px 16px;border-bottom:0.5px solid #F0EBE3;flex-shrink:0}
.settings-back{width:32px;height:32px;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#9A8C7E;border-radius:50%;transition:all .15s;padding:0;flex-shrink:0}
.settings-back:hover{background:#F7F4F0;color:#4A3F35}
.settings-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.settings-header-title{font-family:'Inter',sans-serif;font-size:22px;font-weight:700;color:#1A1510;letter-spacing:-.025em;flex:1}
.settings-body{flex:1;padding:8px 0 40px;overflow-y:auto}
.settings-section-label{font-family:'Inter',sans-serif;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#B0A498;padding:20px 20px 8px}
.settings-row{display:flex;align-items:center;padding:14px 20px;gap:12px;transition:background .15s}
.settings-row:active{background:#F7F4F0}
.settings-row-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.settings-row-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.settings-row-text{flex:1;min-width:0}
.settings-row-title{font-family:'Inter',sans-serif;font-size:14px;font-weight:500;color:#1A1510;margin-bottom:2px}
.settings-row-sub{font-family:'Inter',sans-serif;font-size:11px;color:#9A8C7E;line-height:1.4}
.toggle-switch{position:relative;width:44px;height:26px;flex-shrink:0;display:block}
.toggle-switch input{opacity:0;width:0;height:0;position:absolute}
.toggle-track{position:absolute;inset:0;border-radius:13px;background:#E0D9D0;transition:background .25s ease;cursor:pointer}
.toggle-switch input:checked + .toggle-track{background:#682C43}
.toggle-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#FFFFFF;transition:transform .25s cubic-bezier(.34,1.56,.64,1);box-shadow:0 1px 4px rgba(0,0,0,0.15);pointer-events:none}
.toggle-switch input:checked ~ .toggle-thumb{transform:translateX(18px)}
/* Push notifications is status-only, not a toggle — the OS/browser
permission it reflects can't actually be revoked from this page once
granted, so a toggle that appeared to turn it "off" would be lying.
Notification permission is asked once, during account creation/login
onboarding; this row just reports the true state and, when there's
something the user can still do (grant it / add to home screen), lets
them do that from here too. */
.settings-status{flex-shrink:0;font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.02em;text-align:right;white-space:nowrap}
.settings-status-on{color:#71947C}
.settings-status-off{color:#B0A498}
.settings-status-action{color:#682C43;cursor:pointer}
.settings-status-action:hover{text-decoration:underline}
.settings-divider{height:0.5px;background:#F0EBE3;margin:4px 20px}
.settings-link-row{display:flex;align-items:center;padding:14px 20px;gap:12px;cursor:pointer;transition:background .15s;text-decoration:none}
.settings-link-row:active{background:#F7F4F0}
.settings-link-chevron{color:#C4B8AC;flex-shrink:0}
.settings-link-chevron svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.settings-version{padding:20px 20px 0;font-family:'Inter',sans-serif;font-size:11px;color:#C4B8AC;text-align:center}
.settings-about-badge{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 20px;margin:8px 20px;background:#F7F4F0;border-radius:8px;border:0.5px solid #E8E2DA}
.settings-about-rule{width:30px;height:1px;background:#682C43}
.settings-about-name{font-family:'Inter',sans-serif;font-size:16px;font-weight:700;letter-spacing:-.01em;color:#1A1510}
.settings-menu{padding:10px 10px 28px}
.settings-menu .settings-link-row{background:#fff;border:1px solid #EEE5E8;box-shadow:0 6px 18px rgba(70,38,49,.045);margin:8px 0;padding:15px 14px;border-radius:15px}
.settings-menu .settings-row-icon{width:42px;height:42px;border-radius:13px}
.settings-menu .settings-row-title{font-size:15px;font-weight:650}
.settings-menu .settings-row-sub{font-size:11.5px}
.settings-category-page{display:none}
.day-sep{display:flex;justify-content:center;flex:none;margin:12px 0 6px}.day-sep span{padding:4px 12px;border-radius:999px;background:#F3EDEF;color:#6F6169;font:600 11.5px/1.3 Inter,sans-serif;letter-spacing:.01em}
.load-earlier{display:flex;justify-content:center;padding:6px 0 12px}.load-earlier-btn{padding:9px 18px;border-radius:18px;border:1px solid #DDCFD5;background:#fff;color:#682C43;font:650 13px Inter,sans-serif}.load-earlier-btn:disabled{opacity:.6}
.vault-call-clear-row{display:flex;justify-content:flex-end;padding:2px 4px 8px}
.vault-call-clear-btn{background:none;border:none;color:#A84964;font:650 12.5px Inter,sans-serif;padding:6px 4px;cursor:pointer}
.storage-block{padding:0 20px 14px}
.storage-total{font:700 26px Manrope,sans-serif;color:#271D25}.storage-caption{font:500 12.5px/1.45 Inter,sans-serif;color:#7A6A72;margin-top:4px}
.storage-bar{height:8px;border-radius:99px;background:#EFE6EA;overflow:hidden;margin:12px 0 4px}.storage-bar>span{display:block;height:100%;border-radius:99px;background:#682C43}
.storage-seg{display:flex;gap:8px;flex-wrap:wrap}.storage-seg button{flex:1 1 70px;padding:11px 8px;border-radius:12px;border:1px solid #DDCFD5;background:#fff;color:#4A3A44;font:650 13px Inter,sans-serif}.storage-seg button.on{background:#682C43;border-color:#682C43;color:#fff}
.storage-room{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #F1E9EB}.storage-room:last-child{border-bottom:0}.storage-room-name{flex:1;min-width:0}.storage-room-name strong{display:block;font:650 14px Inter,sans-serif;color:#271D25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.storage-room-name small{color:#8A7A82;font:500 12px Inter,sans-serif}.storage-room button{padding:8px 12px;border-radius:10px;background:#F6E9ED;color:#8B2949;font:700 12px Inter,sans-serif}.storage-room button:disabled{opacity:.4}
.settings-category-page.active{display:block}
.settings-empty-note{margin:16px 20px;padding:16px;border:1px solid #EEE5E8;border-radius:14px;background:#FAF7F8;color:#81747A;font-size:12px;line-height:1.55}
.settings-chats-intro{margin:14px 20px 18px;padding:20px;border:1px solid #E8DDE1;border-radius:20px;background:linear-gradient(145deg,#FFFDFE,#F8F0F3);box-shadow:0 10px 28px rgba(72,42,54,.06)}
.settings-chats-intro-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#682C43;color:#fff;box-shadow:0 9px 22px rgba(104,44,67,.18)}.settings-chats-intro-mark svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.settings-chats-intro h2{margin:15px 0 7px;color:#271D25;font:750 20px/1.2 'Manrope',sans-serif;letter-spacing:-.025em}.settings-chats-intro p{margin:0;color:#77686F;font:500 12px/1.6 'Inter',sans-serif}
.settings-chats-guide{margin:0 10px;overflow:hidden;border:1px solid #EEE5E8;border-radius:17px;background:#fff;box-shadow:0 8px 24px rgba(70,38,49,.04)}.settings-chats-guide .settings-row{margin:0;border-radius:0;align-items:flex-start;padding:15px 14px}.settings-chats-guide .settings-divider{margin:0 14px}.settings-chats-guide .settings-row-icon{width:40px;height:40px;border-radius:12px}.settings-chats-guide .settings-row-title{font-weight:650}.settings-chats-guide .settings-row-sub{font-size:11.5px;line-height:1.5}
/* Emergency Exit is intentionally unlike an ordinary settings tap. The
entry control must be held long enough to make an accidental activation
implausible; the destructive scope and irreversible warning then live in
a separate modal with a second explicit confirmation. */
.emergency-hold{margin:10px 20px 4px;width:calc(100% - 40px);border:1px solid #D8A2AE;background:#FFF7F8;color:#9B2945;border-radius:14px;padding:14px 16px;font:600 13px 'Inter',sans-serif;letter-spacing:.02em;cursor:pointer;position:relative;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}
.emergency-hold::before{content:'';position:absolute;inset:0;background:#9B2945;transform:scaleX(0);transform-origin:left;transition:transform 1.5s linear;opacity:.12}
.emergency-hold.holding::before{transform:scaleX(1)}
.emergency-hold span{position:relative;z-index:1}
.emergency-overlay{position:fixed;inset:0;z-index:10020;box-sizing:border-box;background:rgba(14,8,11,.72);display:none;align-items:flex-end;justify-content:center;padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.emergency-overlay.open{display:flex}
.emergency-sheet{width:min(520px,100%);max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;background:#FFF;border-radius:22px;padding:22px;box-shadow:0 24px 80px rgba(0,0,0,.35)}
.emergency-title{font:700 26px/1.15 'Inter',sans-serif;letter-spacing:-.035em;color:#351522;margin:0 0 6px}
.emergency-warning{font:500 12px/1.55 'Inter',sans-serif;color:#8F344C;background:#FFF2F4;border:1px solid #F0CCD5;border-radius:12px;padding:11px 12px;margin:10px 0 14px}
.emergency-choice{display:flex;align-items:center;gap:8px;margin:5px 0;padding:7px 9px;border:1px solid transparent;border-radius:14px;font:500 13px/1.35 'Inter',sans-serif;color:#2C2226;cursor:pointer;transition:background .16s ease,border-color .16s ease}
.emergency-choice:has(input[type="radio"]:checked){background:#FBF1F4;border-color:#D9B7C2}
.emergency-choice:has(input[type="radio"][value="device"]:checked),.emergency-choice:has(input[type="radio"][value="account"]:checked){background:#FFF1F2;border-color:#E2AEB7}
.emergency-choice input[type="radio"]{-webkit-appearance:none;appearance:none;width:44px;height:44px;flex:0 0 44px;margin:0;border:0;border-radius:50%;background:radial-gradient(circle,#fff 0 9px,#B98697 9.5px 11px,transparent 11.5px);cursor:pointer}
.emergency-choice input[type="radio"]:checked{background:radial-gradient(circle,#fff 0 4px,#682C43 4.5px 11px,transparent 11.5px)}
.emergency-choice input[type="radio"][value="device"]:checked,.emergency-choice input[type="radio"][value="account"]:checked{background:radial-gradient(circle,#fff 0 4px,#B9483F 4.5px 11px,transparent 11.5px)}
.emergency-choice input[type="radio"]:focus-visible{outline:3px solid rgba(104,44,67,.28);outline-offset:-7px}
.emergency-choice small{display:block;color:#8D7E84;font-weight:400;margin-top:2px}
.emergency-vaults{display:none;margin:4px 0 8px 28px;padding:8px 10px;background:#F8F6F7;border-radius:10px;max-height:150px;overflow:auto}
.emergency-vaults.open{display:block}
.emergency-confirm{display:flex;gap:9px;align-items:flex-start;margin:14px 0;font:500 12px/1.45 'Inter',sans-serif;color:#5E4D54}
.emergency-actions{display:flex;gap:10px}
.emergency-actions button{flex:1;border-radius:12px;padding:12px;border:1px solid #DED6D9;background:#FFF;font:600 13px 'Inter',sans-serif}
.emergency-actions .danger{background:#9B2945;border-color:#9B2945;color:#FFF}
.emergency-actions .danger:disabled{opacity:.4}
.safety-overlay{position:fixed;inset:0;z-index:10015;background:rgba(14,8,11,.66);display:none;align-items:flex-end;justify-content:center;padding:16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.safety-overlay.open{display:flex}.safety-sheet{width:min(520px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:#FFF;border-radius:22px;padding:22px;box-shadow:0 24px 80px rgba(0,0,0,.35)}
.safety-title{font:700 26px/1.15 'Inter',sans-serif;letter-spacing:-.035em;color:#351522;margin:0 0 6px}.safety-copy{font:400 12px/1.55 'Inter',sans-serif;color:#766870;margin:0 0 14px}
.safety-reason{display:block;margin:10px 0 6px;font:600 12px 'Inter',sans-serif;color:#4B3D46}.safety-select,.safety-details{width:100%;box-sizing:border-box;border:1px solid #E2D4DA;border-radius:12px;background:#FFF;color:#271D25;padding:12px;font:500 14px 'Inter',sans-serif}
.safety-details{min-height:78px;resize:vertical;margin-top:10px}.safety-consent{display:flex;gap:9px;align-items:flex-start;margin:13px 0;font:500 12px/1.45 'Inter',sans-serif;color:#5E4D54}
.safety-actions{display:flex;gap:10px;margin-top:14px}.safety-actions button{flex:1;border-radius:12px;padding:12px;border:1px solid #DED6D9;background:#FFF;font:600 13px 'Inter',sans-serif}.safety-actions .danger{background:#9B2945;border-color:#9B2945;color:#FFF}.safety-actions .danger:disabled{opacity:.4}
/* ── VAULTLIX 2026 UI SYSTEM ──────────────────────────────────────────
One visual language across onboarding, rooms, calls and settings. */
:root{
--vx-ink:#141821;--vx-ink-2:#252B36;--vx-ivory:#F7F5F0;
--vx-paper:#FFFFFF;--vx-soft:#F0ECE4;--vx-line:#E5DED3;
--vx-gold:#682C43;--vx-gold-2:#C87588;--vx-sage:#34815A;
--vx-blue:#4169A8;--vx-danger:#B9483F;--vx-muted:#746F68;
--vx-shadow:0 18px 50px rgba(26,24,20,.10);
--vx-shadow-sm:0 8px 24px rgba(26,24,20,.08);
}
body{background:var(--vx-ivory);color:var(--vx-ink)}
button,input,textarea,select{font:inherit}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,
[tabindex]:focus-visible{outline:3px solid rgba(104,44,67,.24);outline-offset:2px}
/* Landing */
#s-landing{
overflow:hidden;background:
radial-gradient(circle at 8% 12%,rgba(212,182,106,.20),transparent 25%),
radial-gradient(circle at 92% 80%,rgba(65,105,168,.10),transparent 28%),
linear-gradient(145deg,#FBFAF7 0%,#F4F0E8 100%);
}
#s-landing::before{content:'';position:absolute;inset:18px;border:1px solid rgba(104,44,67,.16);border-radius:28px;pointer-events:none}
.landing-glow{background:radial-gradient(ellipse 42% 34% at 50% 28%,rgba(212,182,106,.16),transparent 72%)}
.logo{position:relative;margin-bottom:28px}
.logo-rule{height:3px;width:48px!important;border-radius:4px;background:linear-gradient(90deg,var(--vx-gold),var(--vx-gold-2));margin-bottom:16px!important}
.logo-name{color:var(--vx-ink);font-size:clamp(54px,9vw,82px);font-weight:400;letter-spacing:.09em;text-shadow:0 1px 0 #fff}
.logo-sub{color:var(--vx-gold);font-weight:600;letter-spacing:.16em;font-size:9px}
.tagline{color:var(--vx-ink-2);font-size:clamp(20px,3.5vw,28px);line-height:1.45;max-width:560px;margin-bottom:32px!important}
.cards{max-width:720px!important;gap:12px!important}
.card{position:relative;overflow:hidden;background:rgba(255,255,255,.82);border:1px solid rgba(229,222,211,.92);border-radius:18px!important;padding:18px!important;box-shadow:var(--vx-shadow-sm);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.card::after{display:none}
.card:hover{background:#fff;border-color:rgba(104,44,67,.48);box-shadow:0 14px 36px rgba(26,24,20,.12);transform:translateY(-3px)}
.card-icon{border-radius:12px!important;width:42px!important;height:42px!important}
.card-title{color:var(--vx-ink);font-size:14px;font-weight:650;margin-bottom:3px}
.card-desc{color:var(--vx-muted);font-size:11.5px;font-style:normal;line-height:1.45}
.landing-footer{background:linear-gradient(transparent,rgba(247,245,240,.96) 42%);color:#968E82;font-weight:600;padding-bottom:calc(15px + env(safe-area-inset-bottom))}
.landing-footer a{color:#756B5D!important}
.install-btn{border-radius:999px!important;box-shadow:0 8px 22px rgba(104,44,67,.22)}
.landing-back-btn{width:42px;height:42px;border:1px solid var(--vx-line);box-shadow:var(--vx-shadow-sm)}
/* Setup, waiting, completion */
#s-setup,#s-waiting,#s-closed{background:
radial-gradient(circle at 50% 0,rgba(212,182,106,.16),transparent 36%),var(--vx-ivory)}
.setup-card,.waiting-card,.closed-card{background:rgba(255,255,255,.92);border:1px solid var(--vx-line);border-radius:24px!important;box-shadow:var(--vx-shadow);padding:34px!important;position:relative;overflow:hidden}
.setup-card::before,.waiting-card::before,.closed-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--vx-gold),var(--vx-gold-2),#A8DDF4)}
.setup-logo .rule,.w-logo .rule{height:2px;border-radius:3px;background:var(--vx-gold)}
.setup-logo span,.w-logo span,.w-title,.closed-title{color:var(--vx-ink)}
.setup-title{font-family:'Cormorant Garamond',serif;color:var(--vx-ink);font-size:25px;font-weight:500}
.setup-back{color:var(--vx-muted);margin-bottom:18px;border-radius:10px;padding:6px 8px;margin-left:-8px}
.setup-back:hover{background:var(--vx-soft);color:var(--vx-ink)}
.field label{color:#766E62;font-size:10px;font-weight:700;letter-spacing:.1em}
.field input,.timer-select{background:#FBFAF7!important;border:1px solid var(--vx-line)!important;border-radius:12px!important;color:var(--vx-ink)!important;padding:13px 14px!important}
.field input:focus,.timer-select:focus{border-color:var(--vx-gold)!important;box-shadow:0 0 0 4px rgba(104,44,67,.11)!important}
.field-note{color:#8A837A}
.btn-gold{background:linear-gradient(135deg,var(--vx-gold),#542237);color:#fff;border-radius:12px;padding:14px;box-shadow:0 8px 20px rgba(104,44,67,.22);font-weight:650}
.btn-gold:hover{background:linear-gradient(135deg,#542237,var(--vx-gold));transform:translateY(-1px)}
.code-box{background:linear-gradient(145deg,#FBF7EC,#F7F1E3);border:1px solid rgba(104,44,67,.36);border-radius:16px;padding:18px}
.code-label{color:#887A61;font-weight:700}.code-value{color:#8E6724;font-weight:500}
.copy-btn,.share-btn,.close-btn{border-radius:12px!important;padding:10px 15px}
.share-btn{background:var(--vx-ink);border-color:var(--vx-ink);color:#fff}
.w-sub,.w-note,.closed-sub{color:var(--vx-muted)}
.closed-note{background:#F5F2EC!important;border-radius:14px!important;border-color:var(--vx-line)!important}
/* Chat shell */
#s-chat{background:#F4F2ED}
.chat-hdr{height:calc(64px + env(safe-area-inset-top));background:rgba(255,255,255,.94);border-bottom:1px solid var(--vx-line);box-shadow:0 5px 18px rgba(31,28,23,.05);padding-left:16px;padding-right:12px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.chat-hdr-logo{width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,var(--vx-ink),#303747);color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 6px 14px rgba(20,24,33,.18)}
.chat-hdr-room{font-family:'Inter',sans-serif;font-size:13px;font-weight:650;color:var(--vx-ink);max-width:145px;letter-spacing:0}
.status-dot{width:8px;height:8px;box-shadow:0 0 0 3px rgba(52,129,90,.12)}
.settings-btn,.call-btn{width:40px;height:40px;background:#F7F5F0;border:1px solid var(--vx-line)}
.leave-btn{border-color:var(--vx-line);background:#fff;color:#645F58;padding:7px 12px}
.destroy-btn{background:#FFF8F7;border-color:#E6B5B1;padding:7px 12px}
.room-tabs{background:#FBFAF7;border-color:var(--vx-line);padding:8px 12px}
.room-tab{background:#F0ECE5;border-radius:12px;padding:8px 12px;color:#69635B}
.room-tab.active{background:var(--vx-ink);border-color:var(--vx-ink);color:#fff;box-shadow:0 6px 14px rgba(20,24,33,.16)}
.e2e-bar{background:#F8F5EA;border-color:#E9DFC1;color:#826422;padding:7px 14px}
.timer-bar{background:#FBFAF7!important;border-color:var(--vx-line)!important}
.timer-bar-label{color:#716A61!important}.timer-bar select{border-radius:9px!important}
.chat-body{background:
linear-gradient(rgba(255,255,255,.90),rgba(255,255,255,.90)),
radial-gradient(circle at 1px 1px,#C9BFAF 1px,transparent 1px);background-size:auto,22px 22px;padding:18px 14px 22px;gap:6px}
.sys-msg{background:#F2EEE6!important;color:#7D756A!important;border-radius:999px!important;padding:7px 12px!important;align-self:center;box-shadow:none!important}
.msg-bubble{box-shadow:0 4px 14px rgba(22,25,32,.06)}
.msg-bubble.me,.bubble.me{background:linear-gradient(145deg,#202633,#141821)!important;color:#fff!important;border-radius:18px 18px 5px 18px!important}
.msg-bubble.them,.bubble.them{background:#fff!important;color:var(--vx-ink)!important;border:1px solid #E8E2D9!important;border-radius:18px 18px 18px 5px!important}
.chat-ftr{background:rgba(255,255,255,.96)!important;border-top:1px solid var(--vx-line)!important;padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important;gap:8px!important;box-shadow:0 -8px 24px rgba(20,24,33,.05);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
#msg-input{background:#F4F1EB!important;border:1px solid transparent!important;border-radius:18px!important;padding:11px 15px!important;color:var(--vx-ink)!important}
#msg-input:focus{background:#fff!important;border-color:rgba(104,44,67,.5)!important;box-shadow:0 0 0 4px rgba(104,44,67,.09)}
.attach-btn,.mic-btn{width:42px!important;height:42px!important;border-radius:14px!important;background:#F4F1EB!important;color:#716A61!important}
.send-btn{width:42px!important;height:42px!important;border-radius:14px!important;background:linear-gradient(145deg,var(--vx-gold),#542237)!important;box-shadow:0 6px 14px rgba(104,44,67,.25)}
.daily-nudge{background:#F7F2E4!important;border-color:#E9DFC1!important}
/* Vault list, settings and informational pages */
#s-vault-list{background:var(--vx-ivory)}
.vault-list-hdr{background:rgba(255,255,255,.94)!important;border-color:var(--vx-line)!important;box-shadow:0 5px 18px rgba(31,28,23,.05)}
.vault-list-title{font-size:20px!important;color:var(--vx-ink)!important}
.vault-search-input{background:#F7EFF2!important;color:var(--vx-ink)!important;border:1px solid #E6D4DA!important}
.vault-search-input::placeholder{color:#9A8891!important}
.vault-list-settings{color:#682C43!important;background:#F7EFF2!important;border:1px solid #E6D4DA!important}
.vault-list-settings:active{background:#EEDFE4!important}
.vault-list-body{padding:16px!important;gap:10px!important}#status-rail+#vault-list-body{padding-top:6px!important}
.vault-list-item,.vault-item{background:#fff!important;border:1px solid var(--vx-line)!important;border-radius:16px!important;box-shadow:var(--vx-shadow-sm)}
.settings-overlay{background:rgba(14,17,23,.48);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.settings-panel{background:#FBFAF7;border-left:1px solid var(--vx-line);box-shadow:-18px 0 60px rgba(20,24,33,.18)}
.settings-header{background:#fff;border-color:var(--vx-line)}
.settings-header-title{color:var(--vx-ink);font-size:26px}
.settings-section-label{color:#8A7A62;font-weight:700}
.settings-row,.settings-link-row{margin:3px 10px;padding:13px 12px;border-radius:13px}
.settings-row:active,.settings-link-row:active{background:#F0ECE4}
.settings-divider{background:var(--vx-line)}
.settings-about-badge{background:linear-gradient(145deg,#F2EEE5,#FAF8F3);border-color:var(--vx-line);border-radius:14px}
#s-privacy,#s-terms,#s-faq{background:var(--vx-ivory);padding:24px 16px}
.legal-card{background:#fff!important;border:1px solid var(--vx-line)!important;border-radius:24px!important;box-shadow:var(--vx-shadow);max-width:760px!important}
.legal-title{color:var(--vx-ink)!important;font-size:34px!important}.legal-date{color:#8A837A!important}
.legal-highlight{background:#F8F3E5!important;border-color:#E4D3A4!important;border-radius:14px!important;color:#655020!important}
.legal-section h2,.legal-section h3{color:var(--vx-ink)!important}.legal-section p,.legal-section li{color:#5F5B55!important;line-height:1.75!important}
/* Calls */
.call-overlay{background:radial-gradient(circle at 50% 28%,#273044 0%,#121722 55%,#090C12 100%)}
.call-avatar{box-shadow:0 0 0 8px rgba(255,255,255,.04),0 20px 50px rgba(0,0,0,.35)!important}
.call-mute-btn,.call-speaker-btn,.call-camera-btn,.call-reaction-btn{background:rgba(255,255,255,.07);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@media(max-width:640px){
#s-landing{justify-content:flex-start;padding:calc(66px + env(safe-area-inset-top)) 18px calc(98px + env(safe-area-inset-bottom))}
#s-landing::before{inset:10px;border-radius:22px}
.logo{margin-bottom:20px}.tagline{margin-bottom:22px!important}
.cards{gap:9px!important}.card{min-height:74px;padding:13px 14px!important}
.card-icon{width:38px!important;height:38px!important}.card-desc{font-size:10.5px}
.setup-card,.waiting-card,.closed-card{padding:28px 22px!important;border-radius:20px!important}
.destroy-btn{width:38px;height:38px;border-radius:12px;padding:0;font-size:0;margin-left:5px}
.destroy-btn::before{content:'×';font-size:22px;line-height:1}
.leave-btn{padding:7px 9px;margin-left:5px}.chat-hdr-room{max-width:96px}
.legal-card{border-radius:18px!important;padding:24px 20px!important}
}
@media(max-height:650px) and (max-width:640px){
#s-landing{padding-top:34px}.logo-name{font-size:46px}.logo-sub{margin-top:5px}.tagline{font-size:17px;margin-bottom:14px!important}.card{min-height:64px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
/* ── COOL BLUE PALETTE ────────────────────────────────────────────────
Telegram-inspired clarity without copying Telegram's branding. */
:root{
--vx-ink:#271D25;--vx-ink-2:#2E3A46;--vx-ivory:#FBF7F8;
--vx-paper:#FFFFFF;--vx-soft:#FBF7F8;--vx-line:#D9E5ED;
--vx-gold:#682C43;--vx-gold-2:#C87588;--vx-sage:#71947C;
--vx-blue:#682C43;--vx-danger:#C87588;--vx-muted:#70808E;
--vx-shadow:0 18px 50px rgba(36,83,112,.12);
--vx-shadow-sm:0 8px 24px rgba(36,83,112,.09);
}
#s-landing{background:radial-gradient(circle at 8% 12%,rgba(104,44,67,.16),transparent 26%),radial-gradient(circle at 92% 82%,rgba(100,189,232,.18),transparent 30%),linear-gradient(145deg,#F8FCFF,#E7F2F9)}
#s-landing::before{border-color:rgba(104,44,67,.18)}
.landing-glow{background:radial-gradient(ellipse 42% 34% at 50% 28%,rgba(104,44,67,.14),transparent 72%)}
.logo-rule,.setup-logo .rule,.w-logo .rule,.wrap::before{background:linear-gradient(90deg,#542237,#C87588)!important}
.logo-sub{color:#542237}.card:hover{border-color:rgba(104,44,67,.45)}
.card-icon{background:#F1EEFF!important;border-color:#CDEAF7!important}.card-icon svg{stroke:#682C43!important}
.cards .card:nth-child(2) .card-icon{background:#EAF8F1!important;border-color:#CFEBDD!important}.cards .card:nth-child(2) .card-icon svg{stroke:#71947C!important}
.cards .card:nth-child(3) .card-icon{background:#EEF1FC!important;border-color:#DCE2F7!important}.cards .card:nth-child(3) .card-icon svg{stroke:#5878C6!important}
.landing-footer{background:linear-gradient(transparent,rgba(234,242,248,.97) 42%)}
.install-btn,.btn-gold,.send-btn{background:linear-gradient(135deg,#682C43,#542237)!important;box-shadow:0 8px 22px rgba(104,44,67,.25)!important}
.btn-gold:hover{background:linear-gradient(135deg,#542237,#1179AC)!important}
#s-setup,#s-waiting,#s-closed{background:radial-gradient(circle at 50% 0,rgba(104,44,67,.15),transparent 38%),#FBF7F8}
.setup-card::before,.waiting-card::before,.closed-card::before{background:linear-gradient(90deg,#542237,#C87588,#A8DDF4)}
.field input:focus,.timer-select:focus{border-color:#682C43!important;box-shadow:0 0 0 4px rgba(104,44,67,.12)!important}
.name-shuffle-btn{color:#682C43}.code-box{background:linear-gradient(145deg,#F1F9FD,#E6F4FB);border-color:#B9DFF1}.code-label,.code-value,.code-value .code-char.code-char-suffix{color:#682C43}
.share-btn{background:#682C43;border-color:#682C43}.copy-btn:hover,.share-btn:hover{border-color:#682C43;color:#542237}
#s-chat{background:#DDEAF2}.chat-hdr-logo{background:linear-gradient(145deg,#682C43,#147EAF);color:#fff;box-shadow:0 6px 14px rgba(104,44,67,.25)}
.settings-btn,.call-btn{background:#EFF7FB;border-color:#D5E8F2}.settings-btn:hover,.call-btn:hover{background:#E1F2FA;color:#542237}
.call-btn svg{stroke:#682C43}.room-tab.active{background:#682C43;border-color:#682C43;box-shadow:0 6px 14px rgba(104,44,67,.23)}
.e2e-bar{background:#EBF7FD;border-color:#D0EAF6;color:#682C43}.timer-bar{background:#F6FAFC!important}
.chat-body{background:linear-gradient(rgba(239,246,250,.90),rgba(239,246,250,.90)),radial-gradient(circle at 1px 1px,#B8CDDA 1px,transparent 1px);background-size:auto,22px 22px}
.msg-bubble.me,.bubble.me{background:linear-gradient(145deg,#D9F1FF,#C8E9FB)!important;color:#271D25!important;border:1px solid #BCE0F3!important;box-shadow:0 4px 14px rgba(34,126,174,.10)}
.msg-bubble.them,.bubble.them{border-color:#D8E5EC!important;box-shadow:0 4px 14px rgba(36,83,112,.07)}
#msg-input{background:#EFF5F8!important}.attach-btn,.mic-btn{background:#EAF3F8!important;color:#4C758B!important}
.daily-nudge{background:#F1EEFF!important;border-color:#CDEAF7!important}
.toggle-switch input:checked + .toggle-track{background:#682C43}.settings-status-action{color:#542237}
.settings-about-rule{background:#682C43}.legal-highlight{background:#F1EEFF!important;border-color:#C9E6F4!important;color:#285F78!important}
.call-overlay{background:radial-gradient(circle at 50% 28%,#22516A 0%,#172C39 52%,#101C24 100%)}
.logo>div>div:first-child{border-color:#BBDFF0!important;background:#EFF9FD}.logo>div>div:first-child span{color:#682C43!important}
.msg-viewonce-badge,.settings-btn:hover,.settings-btn.active svg{color:#682C43!important}
.msg.me .msg-progress-wrap{background:rgba(104,44,67,.15)}
.msg.me .msg-reply-quote{background:rgba(104,44,67,.10)}
.connect-v-mark,.vanish-v,.call-vanish-mark .v-glyph{color:#682C43}
.connect-rule,.vanish-rule,.call-hdr-rule,.ring-dot,.ring-wave,.call-live-dot{background:#682C43}
.call-hollow-dot{border-color:#682C43}
.settings-row-icon[style*="#682C43"]{background:#F1EEFF!important;color:#682C43!important}
.settings-row button[style*="#682C43"]{background:#682C43!important}
.ios-install-banner svg{stroke:#682C43!important}
/* Pure-white surface pass: no ivory or beige UI elements. */
:root{--vx-ivory:#FFFFFF;--vx-paper:#FFFFFF;--vx-soft:#F3F8FC;--vx-line:#DCE8F0}
body{background:#FFFFFF}
#s-landing{background:radial-gradient(circle at 8% 12%,rgba(104,44,67,.10),transparent 27%),radial-gradient(circle at 92% 82%,rgba(100,189,232,.11),transparent 30%),#FFFFFF}
.landing-footer{background:linear-gradient(transparent,rgba(255,255,255,.98) 42%)}
.card,.setup-card,.waiting-card,.closed-card,.legal-card{background:#FFFFFF!important}
#s-setup,#s-waiting,#s-closed,#s-vault-list,#s-privacy,#s-terms,#s-faq{background:#FFFFFF}
.field input,.timer-select{background:#FFFFFF!important}
.code-box{background:#F1F9FD}.closed-note{background:#F4F9FC!important}
#s-chat{background:#FAF5F7}.room-tabs,.timer-bar,.chat-hdr,.chat-ftr{background:#FFFFFF!important}
.room-tab{background:#FBF7F8}.sys-msg{background:#FAF5F7!important}
#msg-input,.attach-btn,.mic-btn{background:#FBF7F8!important}
.settings-panel,.settings-header{background:#FFFFFF}.settings-about-badge{background:#F3F8FC}
.vault-list-item,.vault-item{background:#FFFFFF!important}
/* Chat contrast pass — keep secondary and disabled controls legible. */
.settings-btn{color:#542237!important;background:#F7EFF2!important;border-color:#BFDDEA!important}
.settings-btn svg{stroke:currentColor!important}
.leave-btn{color:#416477!important;border-color:#BED4E0!important;background:#FFFFFF!important;font-weight:550}
.destroy-btn{color:#C83F3F!important;border-color:#E4A6A6!important;background:#FFF7F7!important}
.room-tab-add{width:38px;height:38px;border:1px solid #B9D4E2;background:#FFFFFF;color:#317FA5;border-radius:12px;box-shadow:0 2px 8px rgba(36,83,112,.06)}
.room-tab-add:hover{background:#EDF8FD;border-color:#682C43;color:#542237}
.room-tab-add:disabled{opacity:.55;background:#F3F7F9;color:#7893A1;border-style:solid}
.room-tab-add svg{width:17px;height:17px;stroke-width:2}
.timer-bar-label{color:#4D6877!important;font-weight:500}
#timer-bar-select{color:#294859!important;border-color:#C9DDE8!important;background:#FFFFFF!important;min-width:92px;padding:6px 12px;font-size:12px}
.call-btn:disabled{opacity:.58;background:#F1EEFF!important;border-color:#BBDDEA!important}
.call-btn:disabled svg{stroke:#682C43!important}
.sys-msg{color:#536875!important;background:rgba(255,255,255,.74)!important;border:1px solid #D8E7EF!important;font-style:normal!important;line-height:1.5}
.sys-msg-link{color:#542237!important;font-weight:650}
.daily-nudge{color:#294859!important;background:#F1F9FD!important;border-left:4px solid #C87588!important}
.daily-nudge-close{color:#527487!important;font-size:20px!important}
.attach-btn,.mic-btn{opacity:1!important;border:1px solid #D5E6EF!important;background:#F1F8FC!important}
.attach-btn svg,.mic-btn svg{stroke:#682C43!important}
.attach-btn:disabled,.mic-btn:disabled{opacity:.56!important;background:#F3F7FA!important;border-color:#DFE9EF!important}
.attach-btn:disabled svg,.mic-btn:disabled svg{stroke:#64899C!important}
#msg-input:disabled{opacity:1!important;color:#6F8490!important;background:#F4F8FA!important;border-color:#DCE8EE!important}
#msg-input:disabled::placeholder{color:#8DA0AA!important}
/* Midnight + Violet + Coral + Mint — final functional colour roles. */
:root{
--vx-ink:#271D25;--vx-ink-2:#30344A;--vx-ivory:#FFFFFF;
--vx-paper:#FFFFFF;--vx-soft:#F7EFF2;--vx-line:#E2DDF2;
--vx-gold:#682C43;--vx-gold-2:#C87588;--vx-sage:#71947C;
--vx-blue:#682C43;--vx-danger:#C87588;--vx-muted:#667085;
--gold:#682C43;--gold-dim:rgba(104,44,67,.10);--gold-border:rgba(104,44,67,.24);
--green:#71947C;--green-dim:rgba(113,148,124,.11);
--red:#C87588;--red-dim:rgba(240,100,106,.11);
}
#s-landing{background:radial-gradient(circle at 9% 10%,rgba(104,44,67,.13),transparent 28%),radial-gradient(circle at 92% 82%,rgba(113,148,124,.10),transparent 31%),#FFFFFF}
.logo-rule,.setup-logo .rule,.w-logo .rule{background:linear-gradient(90deg,#682C43,#C87588)!important}
.logo-sub{color:#682C43}.card:hover{border-color:rgba(104,44,67,.42)}
.cards .card:first-child .card-icon{background:#F1EEFF!important;border-color:#DFD7FF!important}.cards .card:first-child .card-icon svg{stroke:#682C43!important}
.cards .card:nth-child(2) .card-icon{background:#EAF9F4!important;border-color:#CDEFE3!important}.cards .card:nth-child(2) .card-icon svg{stroke:#71947C!important}
.cards .card:nth-child(3) .card-icon{background:#FFF0F1!important;border-color:#F8D6D8!important}.cards .card:nth-child(3) .card-icon svg{stroke:#C87588!important}
.setup-card::before,.waiting-card::before,.closed-card::before{background:linear-gradient(90deg,#682C43,#C87588,#71947C)}
.btn-gold,.send-btn,.install-btn{background:linear-gradient(135deg,#7658E7,#5C3DCA)!important;box-shadow:0 8px 22px rgba(104,44,67,.25)!important}
.chat-hdr-logo{background:linear-gradient(145deg,#682C43,#4F35B0);box-shadow:0 6px 15px rgba(104,44,67,.25)}
.room-tab.active{background:#682C43;border-color:#682C43;box-shadow:0 6px 14px rgba(104,44,67,.22)}
.status-dot{background:#71947C;box-shadow:0 0 0 3px rgba(113,148,124,.14)}
.e2e-bar{background:#EAF9F4;border-color:#CDEFE3;color:#18795A}
.settings-btn,.call-btn{color:#682C43!important;background:#F7EFF2!important;border-color:#DCD4FA!important}
.settings-btn:hover,.call-btn:hover{background:#ECE7FF!important;color:#542237!important}
.room-tab-add{color:#682C43;border-color:#D4CCF3;background:#FFFFFF}
.room-tab-add:hover{color:#542237;border-color:#682C43;background:#F7EFF2}
.attach-btn,.mic-btn{background:#F7EFF2!important;border-color:#E1DBF7!important}.attach-btn svg,.mic-btn svg{stroke:#682C43!important}
#msg-input{background:#F7F5FC!important}.daily-nudge{background:#EAF9F4!important;border-color:#CDEFE3!important;border-left-color:#71947C!important;color:#225E4B!important}
.destroy-btn{color:#D94E54!important;border-color:#F3BFC2!important;background:#FFF3F4!important}
.call-btn svg{stroke:#682C43}.call-accept-btn{background:#71947C}.call-decline-btn,.call-end-btn{background:#C87588}
.call-overlay{background:radial-gradient(circle at 50% 25%,#34304F 0%,#1E2035 54%,#11131F 100%)}
.legal-highlight{background:#EAF9F4!important;border-color:#CDEFE3!important;color:#225E4B!important}
.toggle-switch input:checked + .toggle-track{background:#682C43}.settings-status-on{color:#71947C}.settings-status-action{color:#682C43}
/* Burgundy + Rose + Sage — definitive palette and message treatment. */
:root{
--vx-ink:#271D25;--vx-ink-2:#45343F;--vx-ivory:#FBF7F8;
--vx-paper:#FFFFFF;--vx-soft:#F7EFF2;--vx-line:#E8D9DF;
--vx-gold:#682C43;--vx-gold-2:#C87588;--vx-sage:#71947C;
--vx-blue:#682C43;--vx-danger:#B94F63;--vx-muted:#74666E;
--gold:#682C43;--gold-dim:rgba(104,44,67,.10);--gold-border:rgba(104,44,67,.23);
--green:#71947C;--green-dim:rgba(113,148,124,.12);
--red:#B94F63;--red-dim:rgba(185,79,99,.11);
}
body{color:#271D25;background:#FBF7F8}
#s-landing{background:radial-gradient(circle at 8% 11%,rgba(200,117,136,.17),transparent 28%),radial-gradient(circle at 92% 83%,rgba(113,148,124,.13),transparent 31%),#FBF7F8}
.landing-footer{background:linear-gradient(transparent,rgba(251,247,248,.98) 42%)}
.logo-rule,.setup-logo .rule,.w-logo .rule{background:linear-gradient(90deg,#682C43,#C87588)!important}
.logo-sub{color:#682C43}.card:hover{border-color:rgba(104,44,67,.40)}
.cards .card:first-child .card-icon{background:#F7EDEF!important;border-color:#EDD5DB!important}.cards .card:first-child .card-icon svg{stroke:#682C43!important}
.cards .card:nth-child(2) .card-icon{background:#EEF3EF!important;border-color:#D9E5DC!important}.cards .card:nth-child(2) .card-icon svg{stroke:#71947C!important}
.cards .card:nth-child(3) .card-icon{background:#FAEEF1!important;border-color:#F0D9DE!important}.cards .card:nth-child(3) .card-icon svg{stroke:#C87588!important}
#s-setup,#s-waiting,#s-closed,#s-vault-list,#s-privacy,#s-terms,#s-faq{background:#FBF7F8}
.setup-card::before,.waiting-card::before,.closed-card::before{background:linear-gradient(90deg,#682C43,#C87588,#71947C)}
.btn-gold,.send-btn,.install-btn{background:linear-gradient(135deg,#7A3650,#5A2339)!important;box-shadow:0 8px 22px rgba(104,44,67,.24)!important}
.chat-hdr-logo{background:linear-gradient(145deg,#682C43,#4B1F31);box-shadow:0 6px 15px rgba(104,44,67,.24)}
.room-tab.active{background:#682C43;border-color:#682C43;box-shadow:0 6px 14px rgba(104,44,67,.22)}
.status-dot{background:#71947C;box-shadow:0 0 0 3px rgba(113,148,124,.16)}
.e2e-bar{background:#EEF3EF;border-color:#D8E4DB;color:#4E7058}
.settings-btn,.call-btn{color:#682C43!important;background:#F7EFF2!important;border-color:#E6D4DA!important}
.settings-btn:hover,.call-btn:hover{background:#F1E3E8!important;color:#542237!important}
.room-tab-add{color:#682C43;border-color:#DEC9D1;background:#FFFFFF}.room-tab-add:hover{color:#542237;border-color:#682C43;background:#F7EFF2}
.attach-btn,.mic-btn{background:#F7EFF2!important;border-color:#E7D7DD!important}.attach-btn svg,.mic-btn svg{stroke:#682C43!important}
#msg-input{background:#FBF7F8!important;border-color:#E8DDE1!important}.daily-nudge{background:#EEF3EF!important;border-color:#D8E4DB!important;border-left-color:#71947C!important;color:#486451!important}
.destroy-btn{color:#A94257!important;border-color:#E6B9C2!important;background:#FFF4F6!important}
.call-btn svg{stroke:#682C43}.call-accept-btn{background:#71947C}.call-decline-btn,.call-end-btn{background:#B94F63}
.call-overlay{background:radial-gradient(circle at 50% 25%,#503544 0%,#30232D 54%,#1D161C 100%)}
/* Android's keyguard-safe call host must never expose the vault or chat UI.
Only the dedicated call surfaces survive in this mode. */
body.native-call-only > *:not(#call-overlay):not(#call-remote-video):not(#call-local-video):not(#call-reaction-burst){display:none!important}
body.native-call-only{background:#271D25!important;overflow:hidden!important}
.legal-highlight{background:#EEF3EF!important;border-color:#D8E4DB!important;color:#486451!important}
.toggle-switch input:checked + .toggle-track{background:#682C43}.settings-status-on{color:#71947C}.settings-status-action{color:#682C43}
/* Actual rendered chat message selectors (fixes the legacy gold bubble). */
.msg.me .bubble{background:#F0D8DE!important;color:#271D25!important;border:1px solid #E5C1CA!important;border-bottom-right-radius:5px!important;box-shadow:0 4px 14px rgba(104,44,67,.09)}
.msg.them .bubble{background:#FFFFFF!important;color:#271D25!important;border:1px solid #E8DDE1!important;border-bottom-left-radius:5px!important;box-shadow:0 4px 14px rgba(39,29,37,.06)}
.msg.them .msg-name{color:#682C43;font-weight:600}.msg-time{color:#81727A}.msg-ticks{color:#71947C}
.sys-msg{color:#685C63!important;background:rgba(255,255,255,.86)!important;border-color:#E6DADF!important}
.sys-msg-link{color:#682C43!important}
.msg-action-btn{background:#FBF7F8;border-color:#E5D3DA;color:#57464F}.msg-action-icon{background:#F1E3E8}.msg-action-icon svg{stroke:#682C43}
/* Screenshot QA fixes: visible waiting wordmark and pure-white chat canvas. */
.waiting-card .w-logo span{color:#682C43!important;opacity:1!important;text-shadow:none!important}
.waiting-card .w-logo .rule{background:#682C43!important;opacity:1!important}
.chat-body{background:#FFFFFF!important;background-image:none!important;color:#271D25!important}
#s-chat{background:#FFFFFF!important}
#msg-input{background:#FFFFFF!important;color:#271D25!important;border-color:#DCCAD1!important}
#msg-input::placeholder{color:#95868E!important}
#msg-input:disabled{background:#FFFFFF!important;color:#74666E!important;border-color:#E5D9DE!important}
.sys-msg{color:#5F535A!important;background:#FFFFFF!important;border-color:#E3D7DC!important}
.sys-msg-link{color:#682C43!important}
.msg-time{color:#7D7077!important}.msg.them .msg-name{color:#682C43!important}
.msg-receipt{color:#A0949A!important}
.msg-receipt.delivered{color:#8A7C84!important;font-weight:600!important}
.msg-receipt.read{color:#682C43!important;font-weight:700!important;font-size:12px!important}
.install-btn,.install-btn:hover,.install-btn:active,
#s-setup .btn-gold,#s-setup .btn-gold:hover,#s-setup .btn-gold:active{color:#FFFFFF!important}
.install-btn svg{stroke:#FFFFFF!important}
#s-landing .landing-wordmark,#s-landing .landing-mark span,#s-landing .tagline{font-family:'Bodoni Moda',serif!important}
#s-landing .logo-sub,#s-landing .landing-guide,#s-landing .card-title,#s-landing .card-desc,#s-landing .landing-footer,#s-landing .install-btn{font-family:'Manrope',sans-serif!important}
#s-landing .landing-wordmark{letter-spacing:.055em!important}
#s-landing .tagline{font-style:normal!important;font-weight:500!important;letter-spacing:-.015em!important}
#s-landing .logo-sub{letter-spacing:.15em!important}
/* Mobile landing redesign: readable hierarchy and generous tap targets. */
@media (max-width:640px){
#s-landing{
justify-content:flex-start;
overflow-y:auto;
padding:calc(50px + env(safe-area-inset-top)) 16px calc(116px + env(safe-area-inset-bottom));
}
#s-landing::before{inset:10px;border-radius:24px}
.landing-content{max-width:520px!important;padding:0 12px!important}
.logo{margin-bottom:24px!important}
.landing-lockup{gap:13px!important;margin-bottom:16px!important}
.landing-mark{
width:46px!important;height:46px!important;border-radius:14px!important;
background:linear-gradient(145deg,#7A3650,#542237)!important;
border:1px solid rgba(104,44,67,.22)!important;
box-shadow:0 8px 20px rgba(104,44,67,.20)
}
.landing-mark span{font-size:23px!important;color:#FFFFFF!important}
.landing-wordmark{
position:relative;font-size:38px!important;font-weight:400!important;
line-height:1!important;letter-spacing:.09em!important;color:#271D25!important
}
.logo-rule{width:58px!important;height:3px!important;margin-bottom:16px!important}
.logo-sub{
max-width:390px;margin:0 auto;font-size:11.5px!important;line-height:1.5!important;
letter-spacing:.115em!important;font-weight:600!important
}
.tagline{
max-width:440px;margin:0 auto 18px!important;font-size:23px!important;
line-height:1.38!important;letter-spacing:.01em!important;color:#45343F!important
}
.landing-guide{
max-width:420px!important;margin:0 auto 28px!important;font-size:16px!important;
line-height:1.5!important;letter-spacing:0!important;color:#665A61!important
}
.cards{max-width:440px!important;gap:14px!important}
.card{
min-height:100px;padding:18px!important;gap:16px!important;
border-radius:20px!important;border-color:#E7DADF!important;
box-shadow:0 9px 24px rgba(39,29,37,.08)!important
}
.card-icon{width:48px!important;height:48px!important;border-radius:14px!important}
.card-icon svg{width:22px!important;height:22px!important}
.card-title{font-size:18px!important;line-height:1.25!important;margin-bottom:5px!important;color:#271D25!important}
.card-desc{font-size:14px!important;line-height:1.42!important;color:#665A61!important}
.card > svg:last-child{width:18px!important;height:18px!important;stroke:#9B8B93!important}
.landing-footer{
padding:30px 20px calc(14px + env(safe-area-inset-bottom))!important;
font-size:11.5px!important;line-height:1.55!important;letter-spacing:.055em!important
}
}
@media (max-width:380px){
#s-landing{padding-top:calc(42px + env(safe-area-inset-top))}
.landing-wordmark{font-size:34px!important}
.tagline{font-size:21px!important}
.landing-guide{font-size:15px!important}
.card-title{font-size:17px!important}
.card-desc{font-size:13.5px!important}
}
@media (max-width:640px) and (max-height:740px){
#s-landing{padding-top:calc(28px + env(safe-area-inset-top));padding-bottom:92px}
.logo{margin-bottom:16px!important}
.landing-lockup{margin-bottom:10px!important}
.landing-mark{width:40px!important;height:40px!important}
.landing-wordmark{font-size:33px!important}
.logo-rule{margin-bottom:10px!important}
.logo-sub{font-size:10.5px!important}
.tagline{font-size:20px!important;margin-bottom:12px!important}
.landing-guide{font-size:14.5px!important;margin-bottom:18px!important}
.cards{gap:9px!important}
.card{min-height:82px;padding:13px 15px!important}
.card-icon{width:42px!important;height:42px!important}
.card-title{font-size:16.5px!important;margin-bottom:2px!important}
.card-desc{font-size:13px!important;line-height:1.32!important}
}
/* ── VAULTLIX HOME — QUIET, TRUSTWORTHY PRODUCT ENTRY ─────────────── */
#s-landing{
justify-content:flex-start;align-items:center;overflow-y:auto;
padding:calc(22px + env(safe-area-inset-top)) 18px calc(26px + env(safe-area-inset-bottom));
background:#FBF7F8;
}
#s-landing::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 92% 4%,rgba(200,117,136,.13),transparent 28%),radial-gradient(circle at 4% 88%,rgba(113,148,124,.11),transparent 26%)}
#s-landing .landing-glow{display:none}
#s-landing .landing-content{position:relative;z-index:1;width:100%;max-width:560px;padding:0!important;text-align:left!important}
#s-landing .landing-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:52px}
#s-landing .landing-menu{position:relative}
#s-landing .landing-menu summary{height:38px;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 12px;border:1px solid #DFD2D7;border-radius:999px;background:rgba(255,255,255,.86);color:#54474E;cursor:pointer;list-style:none;font:750 10px/1 'Manrope',sans-serif;box-shadow:0 6px 18px rgba(39,29,37,.05)}
#s-landing .landing-menu summary::-webkit-details-marker{display:none}
#s-landing .landing-menu summary svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
#s-landing .landing-menu[open] summary{border-color:#CDB9C1;color:#682C43;background:#fff}
#s-landing .landing-menu-panel{position:absolute;z-index:20;top:46px;right:0;width:230px;padding:8px;border:1px solid #E2D5DA;border-radius:18px;background:rgba(255,255,255,.98);box-shadow:0 20px 46px rgba(39,29,37,.18);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
#s-landing .landing-menu-panel a{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border-radius:11px;color:#46383F;text-decoration:none;font:700 11px/1.2 'Manrope',sans-serif}
#s-landing .landing-menu-panel a:hover,#s-landing .landing-menu-panel a:focus-visible{background:#F5E9ED;color:#682C43;outline:none}
#s-landing .landing-menu-panel a::after{content:'›';font-size:17px;font-weight:500;color:#A17D8A}
#s-landing .landing-lockup{display:flex!important;align-items:center;gap:12px;margin:0!important}
#s-landing .landing-mark{width:48px!important;height:48px!important;display:grid!important;place-items:center;border:0!important;border-radius:15px!important;background:#682C43!important;box-shadow:0 10px 26px rgba(104,44,67,.20)!important}
#s-landing .landing-mark svg{width:23px;height:23px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#s-landing .landing-wordmark{position:static!important;font-family:'Manrope',sans-serif!important;font-size:22px!important;font-weight:700!important;line-height:1.05!important;letter-spacing:-.025em!important;color:#271D25!important}
#s-landing .landing-brand-note{font:600 9px/1.4 'Manrope',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8B7A83;margin-top:5px}
#s-landing .landing-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-shrink:0}
#s-landing .landing-account-btn{height:38px;max-width:150px;border:1px solid #682C43;border-radius:999px;background:#682C43;color:#fff;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 13px;cursor:pointer;box-shadow:0 8px 20px rgba(104,44,67,.18);font:750 11px/1 'Manrope',sans-serif}
#s-landing .landing-account-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
#s-landing .landing-account-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#s-landing .landing-account-btn.signed-in{background:#fff;color:#682C43;border-color:#DCCDD2;box-shadow:0 6px 18px rgba(39,29,37,.07)}
#s-landing .landing-hero{max-width:510px;margin-bottom:42px}
#s-landing .logo-rule{width:42px!important;height:4px!important;margin:0 0 16px!important;border-radius:5px;background:#C87588!important}
#s-landing .logo-sub{margin:0 0 13px!important;font:700 10px/1.4 'Manrope',sans-serif!important;letter-spacing:.17em!important;text-transform:uppercase;color:#682C43!important}
#s-landing .landing-title{font-family:'Manrope',sans-serif;font-size:clamp(35px,7vw,50px);font-weight:750;letter-spacing:-.048em;line-height:1.04;color:#271D25;margin:0 0 17px;max-width:530px}
#s-landing .landing-title.landing-reveal{display:block;min-height:2.08em;overflow:visible}
#s-landing .landing-reveal-line{display:flex;flex-wrap:wrap;gap:.22em;overflow:hidden;padding:.05em 0}
#s-landing .landing-reveal-word{display:inline-block;opacity:0;transform:translateY(105%) rotate(2deg);filter:blur(7px);will-change:transform,opacity,filter}
#s-landing .landing-reveal-run .landing-reveal-word{animation:landing-word-build .82s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(var(--word-index) * .14s)}
#s-landing .landing-reveal-accent{position:relative;width:max-content;max-width:100%;color:#682C43}
#s-landing .landing-reveal-accent::after{content:'';position:absolute;left:0;right:0;bottom:.02em;height:.11em;border-radius:99px;background:#C87588;transform:scaleX(0);transform-origin:left}
#s-landing .landing-reveal-run .landing-reveal-accent::after{animation:landing-accent-wipe .7s cubic-bezier(.16,1,.3,1) 1.02s forwards}
@keyframes landing-word-build{to{opacity:1;transform:translateY(0) rotate(0);filter:blur(0)}}
@keyframes landing-accent-wipe{to{transform:scaleX(1)}}
#s-landing .tagline{font-family:'Manrope',sans-serif!important;font-size:16px!important;font-weight:450!important;font-style:normal!important;letter-spacing:-.01em!important;line-height:1.55!important;color:#6E6067!important;text-align:left!important;max-width:460px!important;margin:0!important}
#s-landing .messenger-capabilities{display:flex;flex-wrap:wrap;gap:8px;margin-top:17px}
#s-landing .messenger-capabilities span{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border-radius:11px;background:#F2E7EB;color:#5B3544;font:750 10px/1 'Manrope',sans-serif}
#s-landing .messenger-capabilities span::before{content:'';width:6px;height:6px;border-radius:50%;background:#C87588;box-shadow:0 0 0 3px rgba(200,117,136,.14)}
#s-landing .landing-store-badges{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:15px}
.official-store-badge{display:inline-flex;align-items:center;justify-content:center;line-height:0;text-decoration:none;border-radius:8px}
.official-store-badge:focus-visible{outline:3px solid rgba(104,44,67,.32);outline-offset:4px}
.official-store-badge img{display:block;width:auto;max-width:none}
.official-store-badge.apple img{height:40px}
.official-store-badge.google img{height:60px;margin:-10px 0}
html.vaultlix-native #s-landing .landing-store-badges{display:none}
#s-landing .identity-proof{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
#s-landing .identity-proof span{display:flex;align-items:center;gap:7px;padding:9px 11px;border:1px solid #DECED4;border-radius:999px;background:rgba(255,255,255,.82);color:#682C43;font:750 10px/1 'Manrope',sans-serif;box-shadow:0 5px 15px rgba(39,29,37,.045)}
#s-landing .identity-proof span::before{content:'✓';width:16px;height:16px;display:grid;place-items:center;border-radius:50%;background:#EAF1EC;color:#557660;font-size:10px}
@keyframes identity-state-breathe{50%{transform:scale(.72);opacity:.55}}
#s-landing .landing-actions{margin-bottom:18px}
#s-landing .landing-section-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:16px}
#s-landing .landing-section-heading span{display:block;font:750 9px/1 'Manrope',sans-serif;letter-spacing:.17em;color:#9B7784;margin-bottom:8px}
#s-landing .landing-section-heading h2{font:750 24px/1.1 'Manrope',sans-serif;letter-spacing:-.035em;color:#34272F}
#s-landing .cards{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;max-width:none!important;margin:0!important}
#s-landing .card{min-width:0;min-height:154px;display:flex!important;flex-direction:column;align-items:flex-start!important;gap:0!important;padding:18px!important;border:1px solid #E4DADF!important;border-radius:22px!important;background:#FFFFFF!important;text-align:left;box-shadow:0 9px 26px rgba(39,29,37,.065)!important;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important}
#s-landing .card:hover{transform:translateY(-2px);border-color:#CFBAC2!important;box-shadow:0 14px 30px rgba(39,29,37,.10)!important}
#s-landing .card:active{transform:scale(.975)}
#s-landing .card-primary{background:#682C43!important;border-color:#682C43!important;box-shadow:0 13px 28px rgba(104,44,67,.22)!important}
#s-landing .card-permanent{grid-column:1/-1;min-height:102px;display:grid!important;grid-template-columns:50px 1fr 42px;align-items:center!important;column-gap:14px!important}
#s-landing .card-icon{width:44px!important;height:44px!important;display:grid!important;place-items:center;flex:none;margin:0 0 20px!important;border:0!important;border-radius:14px!important;background:#F5E9ED!important}
#s-landing .card-primary .card-icon{background:rgba(255,255,255,.15)!important}
#s-landing .card-join .card-icon{background:#EEF3EF!important}
#s-landing .card-permanent .card-icon{margin:0!important;background:#F5E9ED!important}
#s-landing .card-icon svg{width:21px!important;height:21px!important;fill:none;stroke:#682C43!important;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#s-landing .card-primary .card-icon svg{stroke:#fff!important}
#s-landing .card-join .card-icon svg{stroke:#71947C!important}
#s-landing .card-copy{display:block;min-width:0}
#s-landing .card-title{display:block;font:750 17px/1.25 'Manrope',sans-serif!important;color:#34272F!important;margin:0 0 7px!important}
#s-landing .card-desc{display:block;font:450 12px/1.45 'Manrope',sans-serif!important;color:#766970!important;font-style:normal!important}
#s-landing .card-primary .card-title{color:#fff!important}
#s-landing .card-primary .card-desc{color:rgba(255,255,255,.74)!important}
#s-landing .card-arrow{width:34px;height:34px;display:grid;place-items:center;align-self:flex-end;margin-top:auto;border-radius:50%;background:#F8F3F5}
#s-landing .card-primary .card-arrow{background:#fff}
#s-landing .card-permanent .card-arrow{align-self:center;margin:0}
#s-landing .card-arrow svg{width:16px;height:16px;fill:none;stroke:#682C43;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#s-landing .landing-assurance{display:flex;align-items:center;gap:13px;padding:17px 18px;border-radius:19px;background:#2F232B;color:#fff;box-shadow:0 12px 28px rgba(39,29,37,.14);margin:18px 0 0}
#s-landing .assurance-icon{width:38px;height:38px;display:grid;place-items:center;flex:none;border-radius:12px;background:rgba(200,117,136,.18)}
#s-landing .assurance-icon svg{width:20px;height:20px;fill:none;stroke:#E6A4B3;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#s-landing .landing-assurance strong{display:block;font:700 13px/1.3 'Manrope',sans-serif;margin-bottom:3px}
#s-landing .landing-assurance span{display:block;font:450 11px/1.45 'Manrope',sans-serif;color:#D7CBD1}
#s-landing .install-btn{margin:18px auto 0!important;border:0!important;border-radius:15px!important;padding:11px 18px!important;background:#F1E4E8!important;box-shadow:none!important;color:#682C43!important;text-transform:none;font:700 12px/1 'Manrope',sans-serif!important;letter-spacing:0!important}
#s-landing .install-btn svg{stroke:#682C43!important}
#s-landing .landing-footer{position:relative!important;z-index:1;margin-top:22px;padding:10px 12px!important;background:none!important;font:600 10px/1.5 'Manrope',sans-serif!important;letter-spacing:.08em!important;color:#897B82!important}
@media(max-width:420px){
#s-landing{padding-left:15px;padding-right:15px}
#s-landing .landing-header{margin-bottom:39px}
#s-landing .landing-mark{width:44px!important;height:44px!important;border-radius:14px!important}
#s-landing .landing-account-btn{height:40px;max-width:118px;padding:0 11px;font-size:10px}
/* App Store/Google Play badges already appear a few lines into the hero;
the header's own "Get the app" button is the item most easily spared
when three actions plus the logo lockup don't fit a narrow header row. */
#s-landing .landing-account-btn-app{display:none}
#s-landing .landing-menu summary{width:40px;height:40px;padding:0}
#s-landing .landing-menu-label{display:none}
#s-landing .landing-menu-panel{position:fixed;top:calc(74px + env(safe-area-inset-top));left:15px;right:15px;width:auto}
#s-landing .landing-hero{margin-bottom:34px}
#s-landing .landing-title{font-size:36px;line-height:1.06}
#s-landing .tagline{font-size:15px!important}
#s-landing .messenger-capabilities{gap:6px}
#s-landing .messenger-capabilities span{font-size:9px;padding:8px 9px}
#s-landing .landing-section-heading h2{font-size:22px}
#s-landing .cards{gap:10px!important}
#s-landing .card{min-height:150px;padding:15px!important;border-radius:19px!important}
#s-landing .card-icon{width:40px!important;height:40px!important;margin-bottom:17px!important;border-radius:12px!important}
#s-landing .card-title{font-size:15px!important}
#s-landing .card-desc{font-size:11px!important}
#s-landing .card-permanent{min-height:98px;padding:14px 15px!important;grid-template-columns:42px 1fr 34px;column-gap:11px!important}
#s-landing .card-permanent .card-icon{margin:0!important}
#s-landing .landing-assurance{padding:15px}
}
@media(max-width:350px){
#s-landing .landing-title{font-size:32px}
#s-landing .cards{grid-template-columns:1fr!important}
#s-landing .card{min-height:112px}
#s-landing .card-permanent{grid-column:auto;display:flex!important;min-height:112px}
#s-landing .card-permanent .card-icon{margin-bottom:14px!important}
#s-landing .card-permanent .card-arrow{align-self:flex-end;margin-top:auto}
}
@media(prefers-reduced-motion:reduce){
#s-landing .landing-reveal-word{opacity:1;transform:none;filter:none;animation:none!important}
#s-landing .landing-reveal-accent::after{transform:scaleX(1);animation:none!important}
}
/* Desktop landing — a purpose-built wide-screen composition. */
@media(min-width:900px){
#s-landing{
min-height:100dvh;padding:32px 52px 48px;overflow-y:auto;
background:
radial-gradient(circle at 8% 12%,rgba(200,117,136,.18),transparent 27%),
radial-gradient(circle at 91% 88%,rgba(113,148,124,.13),transparent 28%),
linear-gradient(118deg,#FBF7F8 0 49.8%,#F6EEF1 50% 100%);
}
#s-landing::before{background:linear-gradient(90deg,transparent calc(50% - .5px),rgba(104,44,67,.08) 50%,transparent calc(50% + .5px))}
#s-landing .landing-content{
max-width:1240px;min-height:calc(100dvh - 112px);display:grid;
grid-template-columns:minmax(0,.95fr) minmax(470px,.82fr);
grid-template-rows:auto minmax(0,1fr) auto;column-gap:88px;row-gap:26px;
align-items:center;
}
#s-landing .landing-header{grid-column:1/-1;margin:0;align-self:start}
#s-landing .landing-mark{width:54px!important;height:54px!important;border-radius:17px!important}
#s-landing .landing-mark svg{width:25px;height:25px}
#s-landing .landing-wordmark{font-size:25px!important}
#s-landing .landing-brand-note{font-size:9.5px;margin-top:6px}
#s-landing .landing-hero{grid-column:1;grid-row:2;max-width:610px;margin:0;padding-right:20px;align-self:center}
#s-landing .logo-rule{width:52px!important;margin-bottom:22px!important}
#s-landing .logo-sub{font-size:11px!important;margin-bottom:18px!important}
#s-landing .landing-title{font-size:clamp(52px,5.2vw,72px);line-height:1.01;letter-spacing:-.055em;margin-bottom:24px;max-width:650px}
#s-landing .tagline{font-size:18px!important;line-height:1.65!important;max-width:520px!important}
#s-landing .landing-actions{
grid-column:2;grid-row:2/4;align-self:center;margin:0;padding:28px;
border:1px solid rgba(104,44,67,.13);border-radius:30px;
background:rgba(255,255,255,.9);box-shadow:0 28px 70px rgba(65,35,48,.12);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
#s-landing .landing-section-heading{margin-bottom:22px;padding:0 2px}
#s-landing .landing-section-heading span{font-size:10px;margin-bottom:10px}
#s-landing .landing-section-heading h2{font-size:29px}
#s-landing .cards{grid-template-columns:1fr!important;gap:12px!important}
#s-landing .card,#s-landing .card-permanent{
grid-column:auto;min-height:104px;display:grid!important;
grid-template-columns:52px minmax(0,1fr) 38px;align-items:center!important;
column-gap:16px!important;padding:17px 18px!important;border-radius:20px!important;
}
#s-landing .card-icon,#s-landing .card-permanent .card-icon{width:48px!important;height:48px!important;margin:0!important;border-radius:14px!important}
#s-landing .card-title{font-size:17px!important;margin-bottom:5px!important}
#s-landing .card-desc{font-size:12.5px!important;line-height:1.45!important}
#s-landing .card-arrow,#s-landing .card-permanent .card-arrow{align-self:center;margin:0;width:36px;height:36px}
#s-landing .card-primary{background:linear-gradient(140deg,#75314B,#5A2339)!important}
#s-landing .card-primary:hover{border-color:#682C43!important;box-shadow:0 16px 34px rgba(104,44,67,.23)!important}
#s-landing .landing-assurance{
grid-column:1;grid-row:3;max-width:540px;margin:0;padding:19px 20px;
border:1px solid rgba(255,255,255,.08);border-radius:21px;
}
#s-landing .landing-assurance{display:none}
#s-landing .assurance-icon{width:42px;height:42px}
#s-landing .landing-assurance strong{font-size:14px}
#s-landing .landing-assurance span{font-size:11.5px}
#s-landing .install-btn{position:absolute;right:0;top:74px;margin:0!important}
#s-landing .install-note{position:absolute;right:0;top:78px}
#s-landing .landing-footer{position:absolute!important;right:52px;bottom:18px;margin:0!important;text-align:right}
#s-landing .ios-install-banner{max-width:520px;left:auto;right:28px}
}
@media(min-width:900px) and (max-height:760px){
#s-landing{padding-top:24px;padding-bottom:34px}
#s-landing .landing-content{min-height:calc(100dvh - 76px);row-gap:18px}
#s-landing .landing-title{font-size:50px;margin-bottom:16px}
#s-landing .tagline{font-size:16px!important}
#s-landing .landing-actions{padding:22px}
#s-landing .card,#s-landing .card-permanent{min-height:88px;padding:13px 16px!important}
#s-landing .landing-assurance{padding:15px 18px}
}
/* Browser homepage — product education below the working vault launcher. */
#s-landing .landing-marketing{width:100%;margin-top:24px;font-family:'Manrope',sans-serif;color:#34272F}
#s-landing .marketing-section{padding:48px 0;border-top:1px solid rgba(104,44,67,.12)}
#s-landing .marketing-section{scroll-margin-top:22px}
#s-landing .marketing-eyebrow{display:block;margin-bottom:13px;font:750 10px/1 'Manrope',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#9B7784}
#s-landing .marketing-title{max-width:760px;margin:0 0 18px;font:750 clamp(31px,5vw,52px)/1.06 'Manrope',sans-serif;letter-spacing:-.05em;color:#271D25}
#s-landing .marketing-lede{max-width:720px;margin:0;font:450 16px/1.7 'Manrope',sans-serif;color:#6E6067}
#s-landing .everyday-privacy{position:relative;overflow:hidden;padding:46px;border:0;border-radius:32px;background:linear-gradient(138deg,#713049 0%,#4A1D30 100%);color:#fff;box-shadow:0 24px 58px rgba(75,29,48,.19)}
#s-landing .everyday-privacy::after{content:'';position:absolute;right:-120px;top:-150px;width:360px;height:360px;border:1px solid rgba(255,255,255,.13);border-radius:50%;box-shadow:0 0 0 54px rgba(255,255,255,.025),0 0 0 108px rgba(255,255,255,.02);pointer-events:none}
#s-landing .everyday-privacy-head{position:relative;z-index:1;max-width:820px}
#s-landing .everyday-privacy .marketing-eyebrow{color:#EAB6C2}
#s-landing .everyday-privacy .marketing-title{max-width:900px;color:#fff}
#s-landing .everyday-privacy .marketing-lede{max-width:800px;color:#E7D8DE}
#s-landing .use-case-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:30px}
#s-landing .use-case-card{min-height:188px;padding:23px;border:1px solid rgba(255,255,255,.13);border-radius:21px;background:rgba(255,255,255,.09);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#s-landing .use-case-icon{width:43px;height:43px;display:grid;place-items:center;margin-bottom:27px;border-radius:14px;background:rgba(255,255,255,.13);color:#F5D7DF}
#s-landing .use-case-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#s-landing .use-case-card h3{margin:0 0 8px;font:750 17px/1.25 'Manrope',sans-serif;letter-spacing:-.025em;color:#fff}
#s-landing .use-case-card p{margin:0;font:450 12.5px/1.58 'Manrope',sans-serif;color:#DDCDD3}
#s-landing .invitation-promise{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;margin-top:14px;padding:20px 21px;border-radius:20px;background:#FFF8FA;color:#34272F}
#s-landing .invitation-promise p{margin:0;font:650 13px/1.6 'Manrope',sans-serif}
#s-landing .invitation-promise button{min-height:44px;padding:0 18px;border:0;border-radius:999px;background:#682C43;color:#fff;cursor:pointer;font:750 12px/1 'Manrope',sans-serif;white-space:nowrap}
#s-landing .privacy-hook{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px;align-items:stretch}
#s-landing .privacy-hook-copy{padding:30px;border-radius:26px;background:linear-gradient(145deg,#3A2934,#251B22);color:#fff;box-shadow:0 18px 42px rgba(39,29,37,.13)}
#s-landing .privacy-hook-copy .marketing-eyebrow{color:#E6A4B3}
#s-landing .privacy-hook-copy .marketing-title{font-size:clamp(29px,4vw,45px);color:#fff}
#s-landing .privacy-hook-copy .marketing-lede{color:#DDD1D6}
#s-landing .privacy-hook-copy p+ p{margin-top:16px}
#s-landing .privacy-compare{display:grid;grid-template-rows:auto repeat(6,minmax(0,1fr));overflow:hidden;border:1px solid #E1D4D9;border-radius:24px;background:rgba(255,255,255,.86);box-shadow:0 12px 32px rgba(39,29,37,.055)}
#s-landing .privacy-compare-row{display:grid;grid-template-columns:minmax(120px,.8fr) minmax(150px,1fr) minmax(170px,1.15fr);align-items:stretch;border-top:1px solid #E9DFE3}
#s-landing .privacy-compare-row:first-child{border-top:0;background:#F3E9EC;color:#682C43}
#s-landing .privacy-compare-row>span{display:flex;align-items:center;padding:17px 18px;font:500 12px/1.45 'Manrope',sans-serif;color:#6E6067}
#s-landing .privacy-compare-row>span:first-child{font-weight:750;color:#34272F}
#s-landing .privacy-compare-row:first-child>span{font-size:10px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:#682C43}
#s-landing .privacy-compare-row>span:last-child{background:rgba(238,243,239,.72);color:#4C6B55;font-weight:650}
#s-landing .marketing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:26px}
#s-landing .marketing-card{padding:25px;border:1px solid #E4DADF;border-radius:22px;background:rgba(255,255,255,.82);box-shadow:0 10px 28px rgba(39,29,37,.055)}
#s-landing .marketing-number{width:38px;height:38px;display:grid;place-items:center;margin-bottom:34px;border-radius:50%;background:#682C43;color:#fff;font:750 12px/1 'Manrope',sans-serif}
#s-landing .marketing-card h3{margin:0 0 9px;font:750 18px/1.25 'Manrope',sans-serif;letter-spacing:-.025em}
#s-landing .marketing-card p{margin:0;font:450 13px/1.6 'Manrope',sans-serif;color:#766970}
#s-landing .motion-showcase{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:28px}
#s-landing .motion-story-scroll{position:relative;margin-top:30px}
#s-landing .motion-story{display:block;margin:0}
#s-landing .motion-story-copy{max-width:760px;margin:0 0 30px;padding:0 4px}
#s-landing .motion-story-copy .motion-panel-label{color:#9B7784}
#s-landing .motion-story-copy h3{max-width:690px;margin:12px 0 14px;font:750 clamp(30px,4.5vw,49px)/1.02 'Manrope',sans-serif;letter-spacing:-.055em;color:#271D25}
#s-landing .motion-story-copy p{max-width:650px;margin:0;font:450 14px/1.7 'Manrope',sans-serif;color:#766970}
#s-landing .motion-story-status{display:flex;align-items:center;gap:8px;margin-top:20px;font:700 10px/1 'Manrope',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#682C43}
#s-landing .motion-story-status::before{content:'';width:8px;height:8px;border-radius:50%;background:#73B18A;box-shadow:0 0 0 5px rgba(115,177,138,.12);animation:identity-state-breathe 2.4s ease-in-out infinite}
#s-landing .motion-deck{position:relative;height:calc(100dvh - 36px);min-height:620px;max-height:820px;overflow:hidden;border-radius:34px;isolation:isolate}
#s-landing .motion-deck-card{position:absolute;inset:0;display:flex;flex-direction:column;width:100%;height:100%;padding:clamp(30px,5vw,64px);overflow:hidden;border:1px solid #E1D4D9;border-radius:32px;background:#FFF9FB;color:#34272F;box-shadow:0 28px 70px rgba(55,30,41,.14);transform-origin:50% 8%;isolation:isolate}
#s-landing.motion-enhanced .motion-deck-card{opacity:0;transform:translate3d(0,105%,0) scale(.97);will-change:transform,opacity,filter}
#s-landing .motion-deck-card::before{content:'';position:absolute;z-index:-1;width:520px;height:520px;right:-170px;top:-210px;border-radius:50%;border:1px solid rgba(104,44,67,.12);box-shadow:0 0 0 72px rgba(104,44,67,.025),0 0 0 144px rgba(104,44,67,.018)}
#s-landing .motion-deck-card:nth-child(1){z-index:1;background:linear-gradient(145deg,#F3E8EC,#FFF9FB)}
#s-landing .motion-deck-card:nth-child(2){z-index:2;background:linear-gradient(145deg,#EAF1EC,#FFFDFB)}
#s-landing .motion-deck-card:nth-child(3){z-index:3;background:linear-gradient(145deg,#EFE8ED,#FFF9FB)}
#s-landing.motion-enhanced .motion-deck.is-playing .motion-deck-card:nth-child(1){animation:homepage-deck-card-one 10.5s cubic-bezier(.22,1,.36,1) infinite}
#s-landing.motion-enhanced .motion-deck.is-playing .motion-deck-card:nth-child(2){animation:homepage-deck-card-two 10.5s cubic-bezier(.22,1,.36,1) infinite}
#s-landing.motion-enhanced .motion-deck.is-playing .motion-deck-card:nth-child(3){animation:homepage-deck-card-three 10.5s cubic-bezier(.22,1,.36,1) infinite}
#s-landing .motion-deck-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:auto}
#s-landing .motion-deck-kicker{font:750 9px/1 'Manrope',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#9B7784}
#s-landing .motion-deck-step{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#682C43;color:#fff;font:750 11px/1 'Manrope',sans-serif}
#s-landing .motion-deck-card h4{max-width:720px;margin:clamp(52px,10vh,110px) 0 16px;font:750 clamp(38px,6vw,68px)/1.02 'Manrope',sans-serif;letter-spacing:-.055em;color:#34272F}
#s-landing .motion-deck-card p{max-width:590px;margin:0;font:500 clamp(14px,1.8vw,18px)/1.65 'Manrope',sans-serif;color:#766970}
#s-landing .motion-deck-visual{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding:17px 18px;border:1px solid #E5D8DD;border-radius:19px;background:rgba(255,255,255,.86);box-shadow:0 12px 30px rgba(55,30,41,.06)}
#s-landing .motion-deck-avatar{width:44px;height:44px;display:grid;place-items:center;flex:none;border-radius:14px;background:#682C43;color:#fff;font:750 14px/1 'Manrope',sans-serif}
#s-landing .motion-deck-line{min-width:0;flex:1}
#s-landing .motion-deck-line strong,#s-landing .motion-deck-line span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#s-landing .motion-deck-line strong{font:750 11px/1.2 'Manrope',sans-serif;color:#34272F}
#s-landing .motion-deck-line span{margin-top:4px;font:500 9px/1.2 'Manrope',sans-serif;color:#94868D}
#s-landing .motion-deck-action{padding:8px 10px;border-radius:999px;background:#EEF3EF;color:#557660;font:750 9px/1 'Manrope',sans-serif;white-space:nowrap}
@keyframes homepage-deck-card-one{0%{opacity:1;transform:translate3d(0,92%,0) scale(.97);filter:brightness(1)}13%,28%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:brightness(1)}38%,91%{opacity:1;transform:translate3d(0,-24px,0) scale(.94);filter:brightness(.93)}96%,100%{opacity:0;transform:translate3d(0,-24px,0) scale(.94);filter:brightness(.93)}}
@keyframes homepage-deck-card-two{0%,28%{opacity:0;transform:translate3d(0,105%,0) scale(.97);filter:brightness(1)}32%{opacity:1}41%,55%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:brightness(1)}65%,91%{opacity:1;transform:translate3d(0,-12px,0) scale(.97);filter:brightness(.96)}96%,100%{opacity:0;transform:translate3d(0,-12px,0) scale(.97);filter:brightness(.96)}}
@keyframes homepage-deck-card-three{0%,55%{opacity:0;transform:translate3d(0,105%,0) scale(.97)}59%{opacity:1}68%,91%{opacity:1;transform:translate3d(0,0,0) scale(1)}96%,100%{opacity:0;transform:translate3d(0,0,0) scale(1)}}
/* Scroll entrances add rhythm across the long-form page. JavaScript adds
.motion-enhanced only after observers are ready, so content remains fully
visible when scripting is unavailable. */
#s-landing.motion-enhanced .marketing-section>.marketing-eyebrow,#s-landing.motion-enhanced .marketing-section>.marketing-title,#s-landing.motion-enhanced .marketing-section>.marketing-lede,#s-landing.motion-enhanced .motion-reveal{opacity:0;transform:translateY(34px);filter:blur(7px);transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1),filter .75s ease}
#s-landing.motion-enhanced .marketing-section.is-visible>.marketing-eyebrow,#s-landing.motion-enhanced .marketing-section.is-visible>.marketing-title,#s-landing.motion-enhanced .marketing-section.is-visible>.marketing-lede,#s-landing.motion-enhanced .marketing-section.is-visible .motion-reveal{opacity:1;transform:translateY(0);filter:blur(0)}
#s-landing.motion-enhanced .marketing-section.is-visible>.marketing-title{transition-delay:.07s}
#s-landing.motion-enhanced .marketing-section.is-visible>.marketing-lede{transition-delay:.14s}
#s-landing.motion-enhanced .motion-reveal:nth-child(2){transition-delay:.08s}
#s-landing.motion-enhanced .motion-reveal:nth-child(3){transition-delay:.16s}
#s-landing.motion-enhanced .motion-reveal:nth-child(4){transition-delay:.24s}
#s-landing .motion-interactive{transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease}
#s-landing .motion-interactive:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(55,30,41,.12)}
#s-landing .motion-panel{position:relative;min-height:430px;overflow:hidden;padding:28px;border-radius:26px;background:#2F232B;color:#fff;box-shadow:0 18px 42px rgba(39,29,37,.14)}
#s-landing .motion-panel-label{font:750 9px/1 'Manrope',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#DDA4B1}
#s-landing .motion-panel h3{margin:10px 0 0;font:750 23px/1.18 'Manrope',sans-serif;letter-spacing:-.035em}
#s-landing .message-demo{display:flex;flex-direction:column;justify-content:flex-end;gap:9px;min-height:292px;margin-top:21px;padding:20px 16px;border:1px solid rgba(255,255,255,.11);border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.025))}
#s-landing .message-demo-head{display:flex;align-items:center;gap:9px;margin-bottom:auto;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.08);font:650 11px/1 'Manrope',sans-serif;color:#D8CBD1}
#s-landing .message-demo-head span{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#682C43;color:#fff;font-size:10px}
#s-landing .message-demo-bubble{max-width:84%;padding:10px 12px;border-radius:15px 15px 15px 4px;background:#fff;color:#34272F;font:600 11px/1.45 'Manrope',sans-serif;opacity:0;transform:translateY(18px) scale(.96);filter:blur(5px)}
#s-landing .message-demo-bubble.me{align-self:flex-end;border-radius:15px 15px 4px 15px;background:#7A3650;color:#fff}
#s-landing .motion-panel.is-playing .message-demo-bubble{animation:homepage-message-in .58s cubic-bezier(.22,1,.36,1) forwards}
#s-landing .motion-panel.is-playing .message-demo-bubble:nth-of-type(2){animation-delay:.18s}
#s-landing .motion-panel.is-playing .message-demo-bubble:nth-of-type(3){animation-delay:.72s}
#s-landing .motion-panel.is-playing .message-demo-bubble:nth-of-type(4){animation-delay:1.26s}
#s-landing .motion-panel.is-playing .message-demo-bubble:nth-of-type(5){animation-delay:1.8s}
#s-landing .privacy-scroll-stage{position:relative;display:grid;place-items:center;min-height:292px;margin-top:21px;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:radial-gradient(circle at 50% 50%,rgba(200,117,136,.19),transparent 44%),#271D25;text-align:center}
#s-landing .privacy-scroll-line{grid-area:1/1;padding:20px;font:700 clamp(24px,4vw,37px)/1.08 'Manrope',sans-serif;letter-spacing:-.045em;color:#FFF7FA;opacity:0;transform:translateY(100%);filter:blur(10px)}
#s-landing .motion-panel.is-playing .privacy-scroll-one{animation:privacy-scroll-through 1.25s cubic-bezier(.22,1,.36,1) forwards}
#s-landing .motion-panel.is-playing .privacy-scroll-two{animation:privacy-scroll-through 1.25s cubic-bezier(.22,1,.36,1) .85s forwards}
#s-landing .motion-panel.is-playing .privacy-scroll-three{animation:privacy-scroll-through 1.25s cubic-bezier(.22,1,.36,1) 1.7s forwards}
#s-landing .motion-panel.is-playing .privacy-scroll-final{color:#E6A4B3;animation:privacy-scroll-finish 1.15s cubic-bezier(.22,1,.36,1) 2.55s forwards}
@keyframes homepage-message-in{to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes privacy-scroll-through{0%{opacity:0;transform:translateY(100%);filter:blur(10px)}30%,62%{opacity:1;transform:translateY(0);filter:blur(0)}100%{opacity:0;transform:translateY(-100%);filter:blur(10px)}}
@keyframes privacy-scroll-finish{0%{opacity:0;transform:translateY(100%);filter:blur(10px)}48%,100%{opacity:1;transform:translateY(0);filter:blur(0)}}
#s-landing .walkthrough-shell{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:30px;align-items:center;margin-top:26px;padding:30px;border-radius:28px;background:#2F232B;color:#fff;box-shadow:0 22px 50px rgba(39,29,37,.16)}
#s-landing .walkthrough-preview{position:relative;display:grid;place-items:center;overflow:hidden;padding:22px;border:1px solid rgba(255,255,255,.13);border-radius:22px;background:radial-gradient(circle at 50% 15%,rgba(200,117,136,.34),transparent 38%),linear-gradient(145deg,#4A3040,#21181E)}
#s-landing .walkthrough-video{display:block;width:min(100%,320px);aspect-ratio:9/16;object-fit:cover;border-radius:18px;background:#2F232B;box-shadow:0 20px 42px rgba(0,0,0,.28)}
#s-landing #get-started-video .walkthrough-video{height:auto;object-fit:contain}
#s-landing .walkthrough-toggle{margin-top:16px;min-height:44px;padding:10px 22px;border:1px solid #b97e97;border-radius:24px;background:#66334b;color:#fff;font:inherit;font-weight:600;cursor:pointer}
#s-landing .walkthrough-toggle[hidden]{display:none}
#s-landing .walkthrough-toggle:focus-visible{outline:3px solid #efc9d9;outline-offset:3px}
#s-landing .walkthrough-playback-status{color:#fff;font-size:13px;text-align:center}
#s-landing .walkthrough-transcript{margin-top:24px;font:450 13px/1.6 "Manrope",sans-serif;color:#D7CBD1}
#s-landing .walkthrough-transcript summary{cursor:pointer;color:#fff;padding:8px 0}
#s-landing .walkthrough-transcript p{margin:10px 0 0}
#s-landing .walkthrough-copy h3{margin:0 0 12px;font:750 27px/1.15 'Manrope',sans-serif;letter-spacing:-.035em}
#s-landing .walkthrough-copy p{margin:0 0 22px;font:450 13px/1.65 'Manrope',sans-serif;color:#D7CBD1}
#s-landing .walkthrough-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
#s-landing .walkthrough-list li{display:flex;align-items:center;gap:10px;font:650 12px/1.4 'Manrope',sans-serif;color:#F4EDF0}
#s-landing .walkthrough-list span{width:22px;height:22px;display:grid;place-items:center;flex:none;border-radius:50%;background:rgba(200,117,136,.2);color:#E6A4B3;font-size:10px}
#s-landing .privacy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:26px}
#s-landing .privacy-card{padding:24px;border-radius:20px;background:#fff;border:1px solid #E4DADF}
#s-landing .privacy-card strong{display:block;margin-bottom:8px;font:750 16px/1.3 'Manrope',sans-serif}
#s-landing .privacy-card span{display:block;font:450 12.5px/1.6 'Manrope',sans-serif;color:#766970}
#s-landing .vault-comparison{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
#s-landing .vault-type{padding:28px;border-radius:24px;border:1px solid #E0D2D7;background:#fff}
#s-landing .vault-type:first-child{background:#682C43;border-color:#682C43;color:#fff}
#s-landing .vault-type h3{margin:0 0 8px;font:750 22px/1.2 'Manrope',sans-serif}
#s-landing .vault-type p{margin:0 0 22px;font:450 13px/1.6 'Manrope',sans-serif;color:#766970}
#s-landing .vault-type:first-child p{color:rgba(255,255,255,.74)}
#s-landing .vault-type ul{display:grid;gap:10px;margin:0;padding:0;list-style:none;font:600 12px/1.45 'Manrope',sans-serif}
#s-landing .vault-type li::before{content:'✓';margin-right:9px;color:#71947C;font-weight:800}
#s-landing .vault-type:first-child li::before{color:#E6A4B3}
#s-landing .safety-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:26px}
#s-landing .safety-item{padding:20px 18px;border-radius:18px;background:#F4EAED}
#s-landing .safety-item strong{display:block;margin-bottom:7px;font:750 14px/1.3 'Manrope',sans-serif}
#s-landing .safety-item span{font:450 11.5px/1.55 'Manrope',sans-serif;color:#766970}
#s-landing .faq-list{display:grid;gap:10px;margin-top:26px}
#s-landing .faq-item{overflow:hidden;border:1px solid #E1D4D9;border-radius:18px;background:rgba(255,255,255,.86)}
#s-landing .faq-item summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 54px 20px 22px;cursor:pointer;list-style:none;font:750 15px/1.35 'Manrope',sans-serif;color:#34272F}
#s-landing .faq-item summary::-webkit-details-marker{display:none}
#s-landing .faq-item summary::after{content:'+';position:absolute;right:21px;top:50%;transform:translateY(-50%);font:500 25px/1 'Manrope',sans-serif;color:#682C43}
#s-landing .faq-item[open] summary::after{content:'−'}
#s-landing .faq-item p{margin:0;padding:0 22px 21px;max-width:850px;font:450 13px/1.65 'Manrope',sans-serif;color:#6E6067}
#s-landing .faq-item[open] summary{color:#682C43}
#s-landing .marketing-note{margin-top:24px;padding:22px 24px;border-left:4px solid #71947C;border-radius:0 18px 18px 0;background:#EEF3EF;font:500 12.5px/1.65 'Manrope',sans-serif;color:#4C6B55}
#s-landing .marketing-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:38px;border:0;border-radius:28px;background:linear-gradient(135deg,#75314B,#4E2033);color:#fff}
#s-landing .marketing-cta h2{margin:0 0 8px;font:750 30px/1.12 'Manrope',sans-serif;letter-spacing:-.04em}
#s-landing .marketing-cta p{margin:0;font:450 13px/1.55 'Manrope',sans-serif;color:#E1D4D9}
#s-landing .marketing-cta button{flex:none;border:0;border-radius:999px;background:#fff;color:#682C43;padding:14px 20px;cursor:pointer;font:750 12px/1 'Manrope',sans-serif}
html.vaultlix-native .landing-marketing{display:none!important}
@media(max-width:760px){
#s-landing .landing-marketing{margin-top:24px}
#s-landing .marketing-section{padding:42px 0}
#s-landing .marketing-grid,#s-landing .privacy-grid,#s-landing .vault-comparison{grid-template-columns:1fr}
#s-landing .privacy-hook{grid-template-columns:1fr}
#s-landing .walkthrough-shell{grid-template-columns:1fr;padding:18px}
#s-landing .walkthrough-preview{padding:16px}
#s-landing .safety-strip{grid-template-columns:1fr 1fr}
#s-landing .marketing-cta{align-items:flex-start;flex-direction:column;padding:28px 24px}
#s-landing .motion-showcase{grid-template-columns:1fr}
#s-landing .motion-story-scroll{min-height:0}
#s-landing .motion-story{min-height:0}
#s-landing .motion-story-copy h3{font-size:36px}
#s-landing .motion-deck{height:calc(100dvh - 24px);min-height:600px;border-radius:28px}
#s-landing .motion-deck-card{padding:28px 22px;border-radius:27px}
#s-landing .motion-deck-card h4{margin:54px 0 14px;font-size:42px}
#s-landing .motion-panel{min-height:400px;padding:22px}
#s-landing .everyday-privacy{padding:34px 25px;border-radius:27px}
#s-landing .use-case-grid{grid-template-columns:1fr}
#s-landing .use-case-card{min-height:0;display:grid;grid-template-columns:45px minmax(0,1fr);column-gap:14px;padding:18px}
#s-landing .use-case-icon{grid-row:1/3;margin:0}
#s-landing .invitation-promise{grid-template-columns:1fr;gap:15px}
#s-landing .invitation-promise button{width:100%}
}
@media(max-width:430px){
#s-landing .marketing-title{font-size:32px}
#s-landing .marketing-lede{font-size:14px}
#s-landing .safety-strip{grid-template-columns:1fr}
#s-landing .privacy-hook-copy{padding:25px 22px}
#s-landing .privacy-compare{display:block}
#s-landing .privacy-compare-row{grid-template-columns:1fr 1fr}
#s-landing .privacy-compare-row:first-child{display:none}
#s-landing .privacy-compare-row>span{padding:13px 14px}
#s-landing .privacy-compare-row>span:first-child{grid-column:1/-1;padding-bottom:5px;background:#fff;color:#34272F}
#s-landing .privacy-compare-row>span:nth-child(2),#s-landing .privacy-compare-row>span:nth-child(3){display:block}
#s-landing .privacy-compare-row>span:nth-child(2)::before,#s-landing .privacy-compare-row>span:nth-child(3)::before{display:block;margin-bottom:5px;font-size:8px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:#9B7784}
#s-landing .privacy-compare-row>span:nth-child(2)::before{content:'Conventional messaging'}
#s-landing .privacy-compare-row>span:nth-child(3)::before{content:'Vaultlix'}
}
@media(prefers-reduced-motion:reduce){
#s-landing .message-demo-bubble{opacity:1;transform:none;filter:none;animation:none!important}
#s-landing .privacy-scroll-one,#s-landing .privacy-scroll-two,#s-landing .privacy-scroll-three{display:none}
#s-landing .privacy-scroll-final{opacity:1;transform:none;filter:none;animation:none!important}
#s-landing .motion-story-status::before{animation:none!important}
#s-landing .motion-story-scroll{min-height:0}
#s-landing .motion-story{position:relative;top:auto}
#s-landing .motion-deck-card{opacity:1!important;animation:none!important;transition:none!important;filter:none!important}
#s-landing .motion-deck-card:nth-child(1){transform:translate3d(0,-20px,0) scale(.94)!important}
#s-landing .motion-deck-card:nth-child(2){transform:translate3d(0,-10px,0) scale(.97)!important}
#s-landing .motion-deck-card:nth-child(3){transform:none!important}
#s-landing.motion-enhanced .marketing-section>.marketing-eyebrow,#s-landing.motion-enhanced .marketing-section>.marketing-title,#s-landing.motion-enhanced .marketing-section>.marketing-lede,#s-landing.motion-enhanced .motion-reveal{opacity:1;transform:none;filter:none;transition:none}
}
@media(min-width:900px){
#s-landing .landing-content{min-height:calc(100dvh - 80px)}
#s-landing .landing-marketing{grid-column:1/-1;grid-row:4;margin-top:24px}
#s-landing .marketing-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
#s-landing .landing-footer{position:relative!important;right:auto;bottom:auto;width:100%;margin-top:18px!important;text-align:center}
}
/* ── PUBLIC WEBSITE — APP STORE CAMPAIGN SYSTEM ─────────────────── */
html:not(.vaultlix-native) #s-landing{
--campaign-ink:#21171e;--campaign-ink-soft:#2c1d26;--campaign-paper:#fbf7f8;
--campaign-cream:#fffafb;--campaign-pink:#efa0ba;--campaign-wine:#772c4a;
padding:0 0 34px;background:var(--campaign-ink);color:var(--campaign-cream);
}
html:not(.vaultlix-native) #s-landing::before{
position:fixed;background:radial-gradient(circle at 86% 8%,rgba(119,44,74,.32),transparent 26%),radial-gradient(circle at 12% 72%,rgba(119,44,74,.18),transparent 28%);
}
html:not(.vaultlix-native) #s-landing .landing-content{max-width:1240px;padding:24px 32px 0!important}
html:not(.vaultlix-native) #s-landing .landing-header{margin:0 0 38px;padding:0 2px}
html:not(.vaultlix-native) #s-landing .landing-mark{display:none!important}
html:not(.vaultlix-native) #s-landing .landing-wordmark{font-family:Georgia,'Times New Roman',serif!important;font-size:42px!important;font-weight:400!important;letter-spacing:-.04em!important;color:#fff!important}
html:not(.vaultlix-native) #s-landing .landing-brand-note{color:rgba(255,250,251,.55);letter-spacing:.2em}
html:not(.vaultlix-native) #s-landing .landing-menu summary,
html:not(.vaultlix-native) #s-landing .landing-account-btn.signed-in{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:#fff;box-shadow:none}
html:not(.vaultlix-native) #s-landing .landing-account-btn{border-color:#fff;background:#fff;color:var(--campaign-ink);box-shadow:none}
html:not(.vaultlix-native) #s-landing .landing-hero{position:relative;max-width:none;margin:0;padding:48px 0 62px}
html:not(.vaultlix-native) #s-landing .landing-hero>:not(.landing-hero-art){position:relative;z-index:1}
html:not(.vaultlix-native) #s-landing .logo-rule{display:none}
html:not(.vaultlix-native) #s-landing .logo-sub{margin-bottom:18px!important;color:var(--campaign-pink)!important}
html:not(.vaultlix-native) #s-landing .landing-title{max-width:750px;margin-bottom:24px;color:#fff;font-size:clamp(54px,7.4vw,102px);line-height:.94;letter-spacing:-.065em}
html:not(.vaultlix-native) #s-landing .landing-title.landing-reveal{min-height:0}
html:not(.vaultlix-native) #s-landing .landing-reveal-line{gap:.18em;overflow:visible}
html:not(.vaultlix-native) #s-landing .landing-reveal-accent{color:var(--campaign-pink)}
html:not(.vaultlix-native) #s-landing .landing-reveal-accent::after{background:var(--campaign-pink);bottom:-.01em}
html:not(.vaultlix-native) #s-landing .tagline{max-width:570px!important;color:rgba(255,250,251,.74)!important;font-size:19px!important;line-height:1.55!important}
html:not(.vaultlix-native) #s-landing .messenger-capabilities{margin-top:25px}
html:not(.vaultlix-native) #s-landing .messenger-capabilities span{padding:9px 12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff}
html:not(.vaultlix-native) #s-landing .messenger-capabilities span::before{background:var(--campaign-pink)}
html:not(.vaultlix-native) #s-landing .landing-invite-link{color:#f4cad7}
html:not(.vaultlix-native) #s-landing .identity-proof{margin-top:19px}
html:not(.vaultlix-native) #s-landing .identity-proof span{border-color:rgba(255,255,255,.2);background:transparent;color:#fff;box-shadow:none}
html:not(.vaultlix-native) #s-landing .identity-proof span::before{background:rgba(239,160,186,.17);color:var(--campaign-pink)}
html:not(.vaultlix-native) #s-landing .landing-hero-art{position:absolute;z-index:0;right:0;top:0;width:min(39%,430px);height:100%;margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:38px;background:#2b1c25;box-shadow:0 38px 90px rgba(0,0,0,.34);transform:rotate(1.3deg)}
html:not(.vaultlix-native) #s-landing .landing-hero-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 72%}
html:not(.vaultlix-native) #s-landing .landing-actions{margin:0 0 30px;padding:28px;border-radius:28px;background:var(--campaign-paper);color:var(--campaign-ink)}
html:not(.vaultlix-native) #s-landing .landing-section-heading{margin-bottom:18px}
html:not(.vaultlix-native) #s-landing .landing-section-heading h2{color:var(--campaign-ink)}
html:not(.vaultlix-native) #s-landing .cards{grid-template-columns:1.1fr .9fr!important}
html:not(.vaultlix-native) #s-landing .card{min-height:116px;display:grid!important;grid-template-columns:48px minmax(0,1fr) 36px;align-items:center!important;column-gap:15px!important;padding:18px!important}
html:not(.vaultlix-native) #s-landing .card-icon{margin:0!important}
html:not(.vaultlix-native) #s-landing .card-arrow{align-self:center;margin:0}
html:not(.vaultlix-native) #s-landing .landing-assurance{display:none}
html:not(.vaultlix-native) #s-landing .landing-marketing{margin-top:0;color:var(--campaign-ink)}
html:not(.vaultlix-native) #s-landing .store-story{padding:78px 0 82px;border-radius:36px 36px 0 0;background:var(--campaign-paper)}
html:not(.vaultlix-native) #s-landing .store-story-intro{max-width:880px;padding:0 48px 42px}
html:not(.vaultlix-native) #s-landing .store-story .marketing-title{font-size:clamp(43px,6vw,76px);max-width:960px}
html:not(.vaultlix-native) #s-landing .store-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 16px}
html:not(.vaultlix-native) #s-landing .store-story-card{position:relative;min-height:0;aspect-ratio:660/1434;overflow:hidden;border-radius:30px;background:var(--campaign-ink-soft);color:#fff}
html:not(.vaultlix-native) #s-landing .store-story-card-wide{grid-column:auto;min-height:0}
html:not(.vaultlix-native) #s-landing .store-story-copy{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html:not(.vaultlix-native) #s-landing .store-story-copy>span{display:block;margin-bottom:12px;color:var(--campaign-pink);font:750 10px/1 'Manrope',sans-serif;letter-spacing:.18em}
html:not(.vaultlix-native) #s-landing .store-story-copy h3{margin:0 0 10px;color:#fff;font:750 clamp(29px,3.3vw,48px)/1.02 'Manrope',sans-serif;letter-spacing:-.05em}
html:not(.vaultlix-native) #s-landing .store-story-copy p{max-width:520px;margin:0;color:rgba(255,255,255,.68);font:500 14px/1.55 'Manrope',sans-serif}
html:not(.vaultlix-native) #s-landing .store-story-card img,
html:not(.vaultlix-native) #s-landing .store-story-card-wide img{position:static;display:block;width:100%;height:100%;object-fit:cover;transform:none;filter:none}
html:not(.vaultlix-native) #s-landing #get-started-video,
html:not(.vaultlix-native) #s-landing #messenger-features,
html:not(.vaultlix-native) #s-landing #privacy-difference,
html:not(.vaultlix-native) #s-landing #how-it-works,
html:not(.vaultlix-native) #s-landing #private-conversation-demo{display:none}
html:not(.vaultlix-native) #s-landing #privacy-architecture{padding:82px 48px;background:#fff}
html:not(.vaultlix-native) #s-landing #safety-controls{padding:82px 48px;background:#f2e7eb}
html:not(.vaultlix-native) #s-landing #frequently-asked-questions{padding:82px 48px;background:#fff}
html:not(.vaultlix-native) #s-landing .marketing-cta{margin:0;padding:46px 48px;border-radius:0 0 36px 36px;background:linear-gradient(135deg,#7d2f4f,#4c1c31)}
html:not(.vaultlix-native) #s-landing .landing-footer{color:rgba(255,255,255,.56)!important}
@media(min-width:900px){
html:not(.vaultlix-native) #s-landing .landing-content{display:block;min-height:0}
html:not(.vaultlix-native) #s-landing .landing-header{min-height:56px}
html:not(.vaultlix-native) #s-landing .landing-hero{padding-right:42%}
html:not(.vaultlix-native) #s-landing .landing-actions{max-width:760px}
html:not(.vaultlix-native) #s-landing .landing-marketing{margin-top:34px}
html:not(.vaultlix-native) #s-landing .landing-footer{position:relative!important;right:auto;bottom:auto}
}
@media(max-width:899px){
html:not(.vaultlix-native) #s-landing .landing-content{padding:18px 15px 0!important}
html:not(.vaultlix-native) #s-landing .landing-header{margin-bottom:18px}
html:not(.vaultlix-native) #s-landing .landing-wordmark{font-size:34px!important}
html:not(.vaultlix-native) #s-landing .landing-hero{display:flex;flex-direction:column;padding:30px 0 34px}
html:not(.vaultlix-native) #s-landing .landing-title{font-size:clamp(46px,15vw,68px);line-height:.95}
html:not(.vaultlix-native) #s-landing .tagline{font-size:16px!important}
html:not(.vaultlix-native) #s-landing .landing-hero-art{position:relative;z-index:0;order:20;right:auto;top:auto;width:100%;height:auto;aspect-ratio:1/1.08;margin:28px 0 0;border-radius:28px;transform:none}
html:not(.vaultlix-native) #s-landing .landing-hero-art img{object-position:center 68%}
html:not(.vaultlix-native) #s-landing .landing-actions{padding:20px;border-radius:24px}
html:not(.vaultlix-native) #s-landing .cards{grid-template-columns:1fr!important}
html:not(.vaultlix-native) #s-landing .card{min-height:104px}
html:not(.vaultlix-native) #s-landing .store-story{padding-top:56px;border-radius:28px 28px 0 0}
html:not(.vaultlix-native) #s-landing .store-story-intro{padding:0 22px 30px}
html:not(.vaultlix-native) #s-landing .store-story .marketing-title{font-size:39px}
html:not(.vaultlix-native) #s-landing .store-story-grid{grid-template-columns:1fr;padding:0 10px;gap:10px}
html:not(.vaultlix-native) #s-landing .store-story-card,
html:not(.vaultlix-native) #s-landing .store-story-card-wide{grid-column:auto;min-height:0;border-radius:24px}
html:not(.vaultlix-native) #s-landing #privacy-architecture,
html:not(.vaultlix-native) #s-landing #safety-controls,
html:not(.vaultlix-native) #s-landing #frequently-asked-questions{padding:56px 22px}
html:not(.vaultlix-native) #s-landing .marketing-cta{padding:34px 24px;border-radius:0 0 28px 28px}
}
/* ── VAULT CONVERSATION — CALM, PRIVATE, PURPOSEFUL ──────────────── */
#s-chat{position:relative;background:#fff!important;font-family:'Manrope',sans-serif!important}
#s-chat .chat-hdr{
position:relative;z-index:41;
min-height:calc(72px + env(safe-area-inset-top));height:auto!important;
padding:calc(10px + env(safe-area-inset-top)) 14px 10px!important;
background:rgba(255,255,255,.97)!important;border:0!important;
box-shadow:0 1px 0 #EDE4E7!important;gap:12px!important;
}
.chat-home-btn{position:relative;width:42px;height:42px;border:1px solid #E7D6DC;border-radius:13px;background:#F6EEF1;color:#682C43;display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;padding:0;transition:background .15s,border-color .15s}
.chat-home-btn:hover,.chat-home-btn:active{background:#EEDFE4}
.chat-home-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chat-vault-unread{position:absolute;right:-7px;top:-7px;min-width:19px;height:19px;padding:0 5px;border:2px solid #fff;border-radius:999px;background:#C87588;color:#fff;display:none;align-items:center;justify-content:center;font:800 9px/1 'Manrope',sans-serif;box-shadow:0 4px 10px rgba(104,44,67,.24)}
.chat-vault-unread.show{display:flex}
.cross-vault-banner{display:none;flex:none;align-items:center;gap:10px;width:calc(100% - 24px);margin:9px 12px 0;padding:10px 12px;border:1px solid #E4D7DC;border-radius:14px;background:#fff;color:#34272F;box-shadow:0 10px 26px rgba(39,29,37,.12);cursor:pointer;text-align:left;font-family:'Manrope',sans-serif;z-index:8}
.cross-vault-banner.show{display:flex;animation:vaultNoticeIn .18s ease-out}
.cross-vault-banner-icon{width:32px;height:32px;border-radius:10px;background:#682C43;color:#fff;display:grid;place-items:center;flex:none}
.cross-vault-banner-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cross-vault-banner-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.cross-vault-banner-copy strong{font-size:12px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cross-vault-banner-copy span{font-size:9px;line-height:1.2;color:#887880;text-transform:uppercase;letter-spacing:.08em}
.cross-vault-banner-arrow{font-size:18px;color:#682C43;flex:none}
@keyframes vaultNoticeIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
#s-chat .chat-hdr-identity{gap:11px!important;overflow:visible!important}
#s-chat .chat-hdr-logo{width:42px;height:42px;padding:0;border:0;border-radius:14px!important;background:#682C43!important;color:#fff!important;box-shadow:0 8px 20px rgba(104,44,67,.18)!important;cursor:pointer}
#s-chat .chat-hdr-logo svg{width:21px;height:21px;stroke:#fff}
#s-chat .chat-peer-avatar{--avatar-bg:#F1E4E9;--avatar-fg:#682C43;position:relative;width:42px;height:42px;flex:0 0 42px;padding:0;border:1px solid rgba(104,44,67,.12);border-radius:14px;background:var(--avatar-bg);color:var(--avatar-fg);display:grid;place-items:center;overflow:hidden;box-shadow:0 8px 20px rgba(104,44,67,.13);font:800 16px/1 'Manrope',sans-serif;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
#s-chat .chat-peer-avatar:hover{box-shadow:0 10px 24px rgba(104,44,67,.19)}
#s-chat .chat-peer-avatar:active{transform:scale(.95)}
#s-chat .chat-peer-avatar:focus-visible{outline:3px solid rgba(104,44,67,.22);outline-offset:2px}
#s-chat .chat-peer-avatar img{width:100%;height:100%;display:block;object-fit:cover}
#s-chat .chat-hdr-meta{min-width:0;display:flex;flex-direction:column;gap:3px}
#s-chat .chat-hdr-room{max-width:230px!important;font:750 17px/1.1 'Manrope',sans-serif!important;letter-spacing:-.02em!important;color:#271D25!important}
#s-chat .chat-hdr-presence{display:flex;align-items:center;gap:6px;font:650 11px/1.15 'Manrope',sans-serif;color:#83757C;letter-spacing:.01em}
#s-chat .chat-hdr-presence[hidden]{display:none!important}
#s-chat .status-dot{width:9px;height:9px;flex:none;background:#469263;box-shadow:0 0 0 3px rgba(70,146,99,.17)}
#s-chat .status-dot.away{background:#AAA2A6;box-shadow:0 0 0 2px rgba(122,112,117,.14)}
#s-chat .chat-hdr-actions{position:relative;margin-left:auto;gap:5px!important}
#s-chat .chat-call-btn,#s-chat .conversation-menu-btn{width:42px;height:42px;padding:0;border:1px solid #E7D6DC;border-radius:13px;background:#F6EEF1;color:#682C43;display:grid;place-items:center;cursor:pointer;transition:background .15s,border-color .15s,transform .12s}
#s-chat .chat-call-btn:hover,#s-chat .chat-call-btn:active,#s-chat .conversation-menu-btn:hover,#s-chat .conversation-menu-btn[aria-expanded="true"]{background:#EEDFE4;border-color:#DABFC8}
#s-chat .chat-call-btn:active{transform:scale(.94)}
#s-chat .chat-call-btn:disabled{opacity:.42;cursor:default;transform:none}
#s-chat .chat-call-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#s-chat .conversation-menu-btn:hover,#s-chat .conversation-menu-btn[aria-expanded="true"]{background:#EEDFE4;border-color:#DABFC8}
#s-chat .conversation-menu-btn svg{width:21px;height:21px;fill:currentColor}
#s-chat .conversation-menu{position:absolute;z-index:40;top:calc(72px + env(safe-area-inset-top));left:12px;right:12px;width:auto;margin:8px 0 0;display:none;padding:8px;border:1px solid #E6D9DE;border-radius:17px;background:#fff;box-shadow:0 10px 28px rgba(45,25,35,.13)}
#s-chat .conversation-menu.open{display:grid;gap:3px;animation:vaultNoticeIn .16s ease-out}
#s-chat .conversation-menu-item{width:100%;min-height:54px;padding:7px 9px;border:0;border-radius:12px;background:transparent;color:#30242A;display:grid;grid-template-columns:39px minmax(0,1fr);align-items:center;gap:10px;text-align:left;cursor:pointer;font:700 13px/1.25 'Manrope',sans-serif}
#s-chat .conversation-menu-item:hover,#s-chat .conversation-menu-item:focus-visible{background:#F8F2F4;outline:none}
#s-chat .conversation-menu-item:focus-visible{box-shadow:0 0 0 3px rgba(104,44,67,.2)}
#s-chat .conversation-menu-badge{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#F4E9ED;color:#682C43}
#s-chat .conversation-menu-badge svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#s-chat .conversation-menu-item.leave .conversation-menu-badge{background:#F6F2EC;color:#74604D}
#s-chat .conversation-menu-item.destructive{color:#A23E51}
#s-chat .conversation-menu-item.destructive .conversation-menu-badge{background:#FFF0F2;color:#A94257}
#s-chat .settings-btn,#s-chat .leave-btn,#s-chat .destroy-btn{width:40px!important;height:40px!important;padding:0!important;margin:0!important;display:grid!important;place-items:center;border-radius:13px!important;font-size:0!important;box-shadow:none!important}
#s-chat .settings-btn{background:#F6EEF1!important;border:1px solid #E7D6DC!important;color:#682C43!important}
#s-chat .leave-btn{background:#fff!important;border:1px solid #E5DADF!important;color:#66575F!important}
#s-chat .destroy-btn{background:#FFF5F6!important;border:1px solid #EDCBD2!important;color:#A94257!important}
#s-chat .settings-btn svg,#s-chat .leave-btn svg,#s-chat .destroy-btn svg{width:19px!important;height:19px!important;stroke:currentColor!important}
#s-chat .destroy-btn::before{content:none!important;display:none!important}
#s-chat .settings-btn:hover,#s-chat .leave-btn:hover{background:#F1E5E9!important}
#s-chat .destroy-btn:hover{background:#FBE8EC!important}
#s-chat .room-tabs{display:none!important}
#s-chat .room-tab{min-height:38px;padding:9px 13px!important;border:1px solid transparent!important;border-radius:12px!important;background:#F8F3F5!important;color:#75666E!important;font:650 12px/1 'Manrope',sans-serif!important}
#s-chat .room-tab.active{background:#682C43!important;border-color:#682C43!important;color:#fff!important;box-shadow:0 6px 14px rgba(104,44,67,.16)!important}
#s-chat .room-tab-add{width:38px;height:38px;border-radius:12px!important;border:1px solid #E3D6DB!important;color:#682C43!important;background:#fff!important}
#s-chat .chat-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:8px;padding:8px 14px;background:#FBF8F9;border-bottom:1px solid #EFE6E9}
#s-chat .e2e-bar{min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #D8E4DB!important;border-radius:12px!important;padding:8px 11px!important;background:#EEF3EF!important;color:#4C6B55!important;font:650 10.5px/1.3 'Manrope',sans-serif!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#s-chat .e2e-bar svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#s-chat .timer-bar{min-width:0;height:auto!important;padding:0!important;border:0!important;background:transparent!important;gap:8px!important}
#s-chat .timer-bar-controls{height:100%;display:flex!important;align-items:center!important;border:1px solid #E5DADF;border-radius:12px;background:#fff;padding:3px 5px 3px 10px;gap:6px}
#s-chat .timer-bar-label{font-size:0!important;color:#75666E!important}
#s-chat .timer-bar-label::before{content:'Timer';font:650 10.5px/1 'Manrope',sans-serif!important}
#s-chat #timer-bar-select{-webkit-appearance:none!important;appearance:none!important;min-width:60px!important;width:auto!important;border:0!important;outline:0!important;box-shadow:none!important;padding:5px 22px 5px 4px!important;background-color:transparent!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23682C43' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 4px center!important;color:#4D3D46!important;font:700 10.5px/1 'Manrope',sans-serif!important}
#s-chat .timer-bar-controls:focus-within{border-color:#C99AA9;box-shadow:0 0 0 3px rgba(104,44,67,.08)}
#s-chat .call-btn{width:40px!important;height:40px!important;flex:none;border-radius:12px!important;border:0!important;background:#682C43!important;color:#fff!important;box-shadow:0 6px 14px rgba(104,44,67,.18)!important}
#s-chat .call-btn svg{width:18px;height:18px;stroke:#fff!important}
#s-chat .call-btn:disabled{background:#ECE4E7!important;color:#9C8B92!important;box-shadow:none!important;opacity:1!important}
#s-chat .call-btn:disabled svg{stroke:#9C8B92!important}
#s-chat .chat-body{padding:22px 14px 18px!important;gap:7px!important;background:#fff!important;background-image:none!important;scrollbar-width:thin;scrollbar-color:#DCCFD4 transparent}
#s-chat .sys-msg{max-width:88%;padding:7px 12px!important;border:0!important;border-radius:999px!important;background:#F8F4F5!important;color:#766970!important;box-shadow:none!important;font:550 11px/1.45 'Manrope',sans-serif!important}
#s-chat .msg{margin-bottom:3px!important}
#s-chat .msg .bubble{max-width:min(78vw,540px)!important;padding:10px 13px!important;font:450 14px/1.48 'Manrope',sans-serif!important;box-shadow:none!important}
#s-chat .msg.me .bubble{background:#F2DDE3!important;border:1px solid #E8C9D1!important;color:#30242B!important;border-radius:17px 17px 5px 17px!important}
#s-chat .msg.them .bubble{background:#fff!important;border:1px solid #E7DDE1!important;color:#30242B!important;border-radius:17px 17px 17px 5px!important;box-shadow:0 5px 16px rgba(39,29,37,.055)!important}
.call-card{display:flex;align-items:center;gap:10px;padding:9px 14px;min-width:168px;cursor:pointer}
#s-chat .msg.me .call-card{background:#F2DDE3!important;border:1px solid #E8C9D1!important;border-radius:17px 17px 5px 17px!important}
#s-chat .msg.them .call-card{background:#fff!important;border:1px solid #E7DDE1!important;border-radius:17px 17px 17px 5px!important;box-shadow:0 5px 16px rgba(39,29,37,.055)!important}
.call-card-icon{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(48,36,43,.08)}
.call-card-icon svg{width:17px;height:17px;fill:#30242B}
.call-card.missed .call-card-icon{background:rgba(168,73,100,.14)}
.call-card.missed .call-card-icon svg{fill:#A84964}
.call-card-title{font:650 13.5px/1.3 Inter,sans-serif;color:#30242B}
.call-card.missed .call-card-title{color:#A84964}
.call-card-subtitle{font:500 12px/1.3 Inter,sans-serif;color:#867B81;margin-top:2px}
.call-card-meta{padding:0 4px}
/* Sender identity stays in the message record for a future group renderer,
but a one-to-one chat does not repeat it above every incoming bubble. */
#s-chat .msg-name{display:none!important}
#s-chat .msg-time{font:550 9.5px/1 'Manrope',sans-serif!important;color:#8C7D84!important}
#s-chat .typing-indicator{background:#F8F3F5!important;border:1px solid #E8DDE1!important;box-shadow:none!important}
#s-chat .typing-indicator.peer-typing{background:transparent!important;border:0!important}
/* Original empty-conversation motion: two private identities establish a
protected line. It is intentionally code-native (SVG + transforms), so it
remains sharp on every screen density and adds no animation dependency to
the chat-loading path. */
.private-line-welcome{width:min(330px,88vw);margin:auto auto 22px;align-self:center;text-align:center;color:#33262C;animation:private-line-arrive .65s cubic-bezier(.2,.8,.2,1) both}
.private-line-scene{position:relative;width:100%;aspect-ratio:2/1;overflow:hidden;border-radius:28px;background:radial-gradient(circle at 50% 48%,rgba(107,31,58,.1),transparent 35%),linear-gradient(145deg,#FFF9FB,#F7EDF1);border:1px solid #EADCE1;box-shadow:0 20px 50px rgba(78,30,47,.1)}
.private-line-scene svg{display:block;width:100%;height:100%;overflow:visible}
.private-line-thread{fill:none;stroke:#6B1F3A;stroke-width:2;stroke-linecap:round;stroke-dasharray:285;stroke-dashoffset:285;animation:private-line-draw 4.8s cubic-bezier(.45,0,.2,1) infinite}
.private-line-thread-glow{fill:none;stroke:rgba(186,93,125,.2);stroke-width:10;stroke-linecap:round;filter:url(#private-line-blur);opacity:0;animation:private-line-glow 4.8s ease infinite}
.private-line-orbit{fill:none;stroke:rgba(107,31,58,.2);stroke-width:1;stroke-dasharray:3 7;transform-origin:center;animation:private-line-orbit 9s linear infinite}
.private-line-node-halo{fill:rgba(107,31,58,.08);transform-box:fill-box;transform-origin:center;animation:private-line-breathe 3.1s ease-in-out infinite}
.private-line-node-halo.right{animation-delay:-1.55s}
.private-line-node{fill:#FFFDFE;stroke:#6B1F3A;stroke-width:1.5;filter:url(#private-line-shadow)}
.private-line-node-mark{fill:none;stroke:#6B1F3A;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.private-line-core-backdrop{fill:#6B1F3A;opacity:.88;filter:url(#private-line-shadow)}
.private-line-core{fill:#6B1F3A;filter:url(#private-line-shadow);transform-box:fill-box;transform-origin:center;animation:private-line-core 4.8s cubic-bezier(.34,1.56,.64,1) infinite}
.private-line-v{fill:#FFF9FB;font:400 28px 'Cormorant Garamond',serif;text-anchor:middle;dominant-baseline:middle}
.private-line-particle{fill:#D88BA4;filter:url(#private-line-particle-glow);offset-path:path('M 69 83 C 112 28 207 28 251 83');offset-rotate:0deg;opacity:0;animation:private-line-travel 4.8s ease-in-out infinite}
.private-line-particle.p2{animation-delay:.42s;fill:#6B1F3A}.private-line-particle.p3{animation-delay:.84s;fill:#F0B7C9}
.private-line-spark{fill:#9A4563;transform-box:fill-box;transform-origin:center;opacity:0;animation:private-line-spark 4.8s ease infinite}
.private-line-spark.s2{animation-delay:.18s}.private-line-spark.s3{animation-delay:.36s}.private-line-spark.s4{animation-delay:.54s}
.private-line-welcome-title{margin-top:16px;font:700 17px/1.25 'Manrope','Inter',sans-serif;letter-spacing:-.02em}
.private-line-welcome-copy{margin:5px auto 0;max-width:270px;font:500 12px/1.5 'Inter',sans-serif;color:#88747C}
@keyframes private-line-arrive{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes private-line-draw{0%,10%{stroke-dashoffset:285;opacity:0}30%,76%{stroke-dashoffset:0;opacity:1}92%,100%{stroke-dashoffset:-285;opacity:0}}
@keyframes private-line-glow{0%,18%,90%,100%{opacity:0}36%,72%{opacity:1}}
@keyframes private-line-orbit{to{transform:rotate(360deg)}}
@keyframes private-line-breathe{0%,100%{transform:scale(.92);opacity:.55}50%{transform:scale(1.12);opacity:1}}
@keyframes private-line-core{0%,25%{transform:scale(.65);opacity:0}38%,76%{transform:scale(1);opacity:1}92%,100%{transform:scale(.72);opacity:0}}
@keyframes private-line-travel{0%,22%{offset-distance:0%;opacity:0;transform:scale(.55)}32%{opacity:1}68%{opacity:1}79%,100%{offset-distance:100%;opacity:0;transform:scale(1)}}
@keyframes private-line-spark{0%,32%,78%,100%{opacity:0;transform:scale(.2) rotate(0)}43%,65%{opacity:.8;transform:scale(1) rotate(90deg)}}
@media(prefers-reduced-motion:reduce){.private-line-welcome{animation:none}.private-line-thread{animation:none;stroke-dashoffset:0}.private-line-thread-glow{animation:none;opacity:.6}.private-line-orbit,.private-line-node-halo,.private-line-core,.private-line-particle,.private-line-spark{animation:none}.private-line-core{opacity:1}.private-line-particle{display:none}}
#s-chat>div[style="position:relative"]{background:#fff;border-top:1px solid #EEE5E8;box-shadow:0 -8px 24px rgba(39,29,37,.045)}
#s-chat .daily-nudge{margin:0!important;padding:11px 14px!important;border:0!important;border-left:4px solid #71947C!important;background:#EFF4F0!important;color:#4A6552!important;font:550 11px/1.35 'Manrope',sans-serif!important}
#s-chat .reply-preview{background:#FBF7F8!important;border-color:#E8DCE1!important}
#s-chat .chat-ftr{min-height:66px;padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important;gap:8px!important;background:#fff!important;border:0!important;box-shadow:none!important}
#s-chat #msg-input{min-height:44px!important;max-height:112px!important;padding:11px 14px!important;border:1px solid #E3D6DB!important;border-radius:15px!important;background:#FBF8F9!important;color:#30242B!important;font:450 14px/1.45 'Manrope',sans-serif!important;box-shadow:none!important}
#s-chat #msg-input:focus{background:#fff!important;border-color:#C99AA9!important;box-shadow:0 0 0 3px rgba(104,44,67,.08)!important}
#s-chat #msg-input::placeholder{color:#A09198!important}
#s-chat .attach-btn,#s-chat .mic-btn,#s-chat .send-btn{width:44px!important;height:44px!important;flex:none;border-radius:14px!important}
#s-chat .attach-btn,#s-chat .mic-btn{background:#F6EEF1!important;border:1px solid #E7D6DC!important;color:#682C43!important}
#s-chat .attach-btn svg,#s-chat .mic-btn svg{width:20px!important;height:20px!important;stroke:#682C43!important}
#s-chat .send-btn{border:0!important;background:#682C43!important;box-shadow:0 6px 14px rgba(104,44,67,.20)!important}
#s-chat .send-btn svg{width:19px!important;height:19px!important;stroke:#fff!important}
#s-chat .voice-record-bar{background:#fff!important;border-top:1px solid #EEE5E8!important}
#s-chat .select-bar{background:#682C43!important;color:#fff!important}
@media(max-width:430px){
#s-chat .chat-hdr{padding-left:12px!important;padding-right:12px!important}
#s-chat .chat-home-btn{width:42px;height:42px;border-radius:12px}
#s-chat .chat-home-btn svg{width:20px;height:20px}
#s-chat .chat-hdr-logo{width:40px;height:40px;border-radius:13px!important}
#s-chat .chat-peer-avatar{width:40px;height:40px;flex-basis:40px;border-radius:13px}
#s-chat .chat-hdr-room{max-width:190px!important;font-size:16px!important}
#s-chat .chat-call-btn,#s-chat .conversation-menu-btn{width:40px;height:40px;border-radius:12px}
#s-chat .settings-btn,#s-chat .leave-btn,#s-chat .destroy-btn{width:38px!important;height:38px!important;border-radius:12px!important}
#s-chat .chat-tools{grid-template-columns:minmax(0,1fr) auto;padding:7px 12px;gap:6px}
#s-chat .e2e-bar{justify-content:flex-start;padding:8px 9px!important;font-size:9.8px!important}
#s-chat .timer-bar-controls{padding-left:8px}
#s-chat .timer-bar-label::before{content:'Timer'}
#s-chat .chat-body{padding-left:12px!important;padding-right:12px!important}
#s-chat .msg .bubble{max-width:82vw!important}
}
@media(max-width:360px){
#s-chat .chat-hdr-logo{display:none!important}
#s-chat .chat-peer-avatar{display:grid!important;width:38px;height:38px;flex-basis:38px}
#s-chat .chat-hdr-room{max-width:185px!important}
#s-chat .chat-hdr-actions{gap:3px!important}
#s-chat .chat-call-btn,#s-chat .conversation-menu-btn{width:37px;height:38px}
#s-chat .e2e-bar{font-size:10px!important}
}
/* WKWebView-only legibility pass. Use the native wrapper's explicit platform
class rather than a WebKit feature query: current OnePlus WebViews also
expose -webkit-touch-callout, which incorrectly gave Android the larger
iPhone type scale and made the composer placeholder wrap. */
@media(max-width:430px){
html.vaultlix-native-ios #s-chat .chat-tools{grid-template-columns:max-content minmax(0,1fr)!important}
html.vaultlix-native-ios #s-chat .e2e-bar{width:auto!important;min-width:0!important;justify-self:start!important;justify-content:flex-start!important;padding:8px 10px!important;font-size:13px!important;line-height:1.2!important}
html.vaultlix-native-ios #s-chat .e2e-bar span{font-size:13px!important}
html.vaultlix-native-ios #s-chat .timer-bar-label::before,html.vaultlix-native-ios #s-chat #timer-bar-select{font-size:13px!important}
html.vaultlix-native-ios #s-chat .sys-msg{font-size:14px!important;line-height:1.45!important}
html.vaultlix-native-ios #s-chat .msg .bubble{font-size:18.5px!important;line-height:1.55!important}
/* Keep group and direct-chat message copy on the same iPhone scale. */
html.vaultlix-native-ios .group-message-text{font-size:18.5px!important;line-height:1.55!important}
html.vaultlix-native-ios #s-chat .msg-name{font-size:13px!important}
html.vaultlix-native-ios #s-chat .msg-time{font-size:12px!important}
html.vaultlix-native-ios #s-chat .daily-nudge{font-size:14px!important;line-height:1.4!important}
html.vaultlix-native-ios #s-chat #msg-input{font-size:17px!important}
}
/* Android 15+ draws target-SDK 35+ apps edge-to-edge. Some OEM WebViews,
notably ColorOS, still report env(safe-area-inset-*) as zero. The native
bridge supplies the real system-bar insets so the header and composer do
not sit underneath Android controls. */
html.vaultlix-native-android #s-chat .chat-hdr{
min-height:calc(72px + var(--android-safe-area-top,0px))!important;
padding-top:calc(10px + var(--android-safe-area-top,0px))!important;
}
html.vaultlix-native-android #s-chat .chat-ftr{
padding-bottom:calc(10px + var(--android-safe-area-bottom,0px))!important;
}
html.vaultlix-native-android .group-chat-footer{
padding-bottom:calc(10px + var(--android-safe-area-bottom,0px))!important;
}
/* Pressing Android's keyboard Back button can leave the textarea focused.
On Vivo that stale focus used to activate the generic rule below and strip
away the navigation inset, placing the three system buttons over the
composer. Only remove the inset while Android confirms the IME is visible. */
html.vaultlix-native-android:not(.android-keyboard-visible) #s-chat.composer-focused .chat-ftr,
html.vaultlix-native-android:not(.android-keyboard-visible) #s-chat.composer-focused #chat-ftr{
padding-bottom:calc(10px + var(--android-safe-area-bottom,0px))!important;
}
html.vaultlix-native-android:not(.android-keyboard-visible) .group-chat.composer-focused .group-chat-footer{
padding-bottom:calc(10px + var(--android-safe-area-bottom,0px))!important;
}
/* Keep the Android composer balanced under OEM font metrics and display
scaling. The visible badges are compact, while their transparent pseudo
hit areas retain a comfortable touch target. */
html.vaultlix-native-android #s-chat #msg-input:placeholder-shown{
white-space:nowrap;
overflow-x:hidden;
}
html.vaultlix-native-android #s-chat .mic-btn,
html.vaultlix-native-android #s-chat .speech-to-text-btn{
position:relative;
flex:0 0 38px!important;
width:38px!important;
height:38px!important;
margin-bottom:3px;
border-radius:12px!important;
}
html.vaultlix-native-android #s-chat .mic-btn::after,
html.vaultlix-native-android #s-chat .speech-to-text-btn::after{
content:'';
position:absolute;
inset:-4px;
}
html.vaultlix-native-android #s-chat .mic-btn svg,
html.vaultlix-native-android #s-chat .speech-to-text-btn svg{
width:18px!important;
height:18px!important;
}
html.vaultlix-native-android #s-landing{
padding-top:calc(22px + var(--android-safe-area-top,0px))!important;
}
html.vaultlix-native-android #s-landing .landing-back-btn{
top:calc(16px + var(--android-safe-area-top,0px))!important;
}
html.vaultlix-native-android #s-vault-list .vault-list-hdr{
padding-top:calc(14px + var(--android-safe-area-top,0px))!important;
}
html.vaultlix-native-android #s-vault-list .vault-list-actions{
bottom:calc(10px + var(--android-safe-area-bottom,0px))!important;
}
html.vaultlix-native-android .emergency-overlay{
padding-top:calc(16px + var(--android-safe-area-top,0px));
padding-bottom:calc(16px + var(--android-safe-area-bottom,0px));
}
html.vaultlix-native-android .emergency-sheet{
max-height:calc(100dvh - 32px - var(--android-safe-area-top,0px) - var(--android-safe-area-bottom,0px));
}
/* The shared 8–11px compact labels become physically undersized on 320-dpi
WebViews. Restrict this pass by resolution so high-density OnePlus and
Samsung layouts retain their existing proportions. */
@media(max-resolution:2.25dppx) and (max-width:430px){
html.vaultlix-native-android #s-chat .chat-home-btn{font-size:10px}
html.vaultlix-native-android #s-chat .chat-hdr-presence{font-size:12px}
html.vaultlix-native-android #s-chat .e2e-bar,
html.vaultlix-native-android #s-chat .timer-bar-label::before,
html.vaultlix-native-android #s-chat #timer-bar-select{font-size:12.5px!important}
html.vaultlix-native-android #s-chat .sys-msg{font-size:13px!important}
html.vaultlix-native-android #s-chat .msg-time{font-size:11px!important}
}
#photo-send-progress{position:fixed;left:50%;bottom:calc(100px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(340px,calc(100% - 32px));z-index:998;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.photo-send-status{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:16px;background:#1A1916;color:#fff;font-size:14px;box-shadow:0 4px 20px #0003;pointer-events:auto}
.photo-send-status>span:nth-of-type(2){flex:1;min-width:0}
.photo-send-thumb{width:52px;height:52px;flex:none;border-radius:11px;object-fit:cover;background:#332a2e;border:1px solid #ffffff24}
.photo-send-spinner{width:18px;height:18px;flex-shrink:0;border:2px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:photo-send-spin .8s linear infinite}
.photo-send-cancel{flex:none;border:1px solid #ffffff3d;border-radius:11px;padding:6px 12px;background:#ffffff14;color:#fff;font:700 12px 'Manrope',sans-serif;cursor:pointer}
.photo-send-cancel:active{background:#ffffff24}
.photo-send-cancel:disabled{opacity:.5;cursor:default}
@keyframes photo-send-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.photo-send-spinner{animation:none}}
.account-overlay{position:fixed;inset:0;z-index:12000;background:rgba(39,29,37,.48);backdrop-filter:blur(5px);display:none;align-items:flex-end;justify-content:center;padding:0}
.account-overlay.open{display:flex}
.account-card{position:relative;width:min(100%,520px);max-height:92vh;overflow:auto;background:#FBF7F8;border-radius:26px 26px 0 0;padding:25px 22px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -20px 70px rgba(39,29,37,.2)}
.account-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}.account-kicker{font:700 11px/1.2 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#C87588}.account-title{font:600 28px/1.1 Inter,sans-serif;color:#271D25;margin-top:7px}.account-copy{font:400 14px/1.55 Inter,sans-serif;color:#756A72;margin:8px 0 20px}.account-close{border:0;background:#F2E8EC;color:#682C43;width:38px;height:38px;border-radius:13px;font-size:22px}.account-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;background:#F2E8EC;padding:5px;border-radius:14px;margin-bottom:18px}.account-tab{border:0;border-radius:10px;padding:10px 5px;background:transparent;color:#806F78;font:600 12px Inter,sans-serif}.account-tab.active{background:#fff;color:#682C43;box-shadow:0 3px 12px rgba(104,44,67,.09)}.account-form{display:none}.account-form.active{display:block}.account-field{display:block;margin:13px 0}.account-field span{display:block;font:600 12px Inter,sans-serif;color:#4B3D46;margin:0 0 7px}.account-field input{width:100%;box-sizing:border-box;border:1px solid #E2D4DA;border-radius:13px;padding:14px;background:#fff;color:#271D25;font:500 16px Inter,sans-serif;outline:none}.account-field input:focus{border-color:#C87588;box-shadow:0 0 0 3px rgba(200,117,136,.13)}.password-policy{margin:-3px 0 13px;padding:11px 13px;border-radius:12px;background:#F7F0F3;color:#75656D;font:500 11px/1.5 Inter,sans-serif}.password-policy strong{color:#682C43}.account-primary{width:100%;border:0;border-radius:14px;padding:14px;background:#682C43;color:#fff;font:700 14px Inter,sans-serif;margin-top:8px}.account-primary:disabled{opacity:.62;cursor:wait}.account-note{font:400 11px/1.5 Inter,sans-serif;color:#94868E;margin-top:12px}.account-error{margin-top:12px;padding:11px 12px;border:1px solid #E2B8C3;border-radius:12px;background:#FFF3F5;color:#8C2943;font:600 12px/1.45 Inter,sans-serif}.recovery-box{background:#F2E8EC;border:1px solid #DFC9D1;border-radius:16px;padding:17px;margin:15px 0}.recovery-code{font:700 16px/1.55 ui-monospace,SFMono-Regular,monospace;color:#682C43;word-break:break-all;letter-spacing:.04em}.account-signed{display:none}.account-signed.open{display:block}.account-status-card{background:#F2E8EC;border-radius:16px;padding:17px;margin:12px 0 18px}.account-status-name{font:700 16px Inter,sans-serif;color:#271D25}.account-status-sub{font:400 12px/1.5 Inter,sans-serif;color:#756A72;margin-top:5px}.account-secondary{width:100%;border:1px solid #D8C5CD;border-radius:14px;padding:13px;background:#fff;color:#682C43;font:700 14px Inter,sans-serif;margin-top:8px}
.ios-app-share{margin-top:20px;padding-top:20px;border-top:1px solid #E5D8DD}.ios-app-share-title{font:750 16px/1.25 'Manrope',Inter,sans-serif;color:#34272F}.ios-app-share-copy{margin:6px 0 13px;font:500 12px/1.5 'Manrope',Inter,sans-serif;color:#7A6971}.ios-app-share-preview{display:block;width:min(100%,230px);margin:0 auto 13px;border-radius:15px;box-shadow:0 12px 30px rgba(53,16,31,.18)}
.account-terms-consent{display:flex;align-items:flex-start;gap:10px;margin:14px 0 4px;padding:12px;border:1px solid #D8C5CD;border-radius:12px;background:#FBF7F8;color:#4B3D46;font:600 12px/1.5 Inter,sans-serif}.account-terms-consent input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:#682C43}.account-terms-link{border:0;background:none;color:#682C43;text-decoration:underline;text-underline-offset:2px;font:600 12px Inter,sans-serif;padding:6px 0 9px;text-align:left}
.recovery-reminder-card{padding-top:32px!important;text-align:left}.recovery-reminder-icon{width:58px;height:58px;display:grid;place-items:center;margin-bottom:22px;border-radius:19px;background:#F0F7F3;color:#557660}.recovery-reminder-icon svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.onboarding-progress{display:flex;align-items:center;gap:7px;margin:0 0 15px}.onboarding-progress span{height:5px;flex:1;border-radius:99px;background:#E7DCE0}.onboarding-progress span.active{background:#682C43}.private-number-card{margin:14px 0;padding:18px;border:1px solid #DFCDD4;border-radius:18px;background:linear-gradient(145deg,#F8F0F3,#fff);text-align:center}.private-number-label{font:700 11px Inter,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#936174}.private-number-value{margin:8px 0 5px;font:700 28px ui-monospace,SFMono-Regular,monospace;letter-spacing:.05em;color:#682C43}.private-number-caption{font:500 12px/1.5 Inter,sans-serif;color:#75656D}.private-number-preference{display:flex;gap:8px;align-items:center;margin:14px 0 3px}.private-number-preference input{min-width:0;flex:1;border:1px solid #DDCDD3;border-radius:12px;background:#fff;color:#281F23;padding:11px 12px;text-align:center;letter-spacing:.18em;font:700 16px ui-monospace,SFMono-Regular,monospace;outline:none}.private-number-preference input:focus{border-color:#682C43;box-shadow:0 0 0 3px rgba(104,44,67,.1)}.private-number-preference button{min-height:43px;border:0;border-radius:12px;background:#682C43;color:#fff;padding:9px 13px;font:700 12px Inter,sans-serif}.private-number-refresh{margin-top:12px;border:1px solid #D7C6CD;border-radius:12px;background:#fff;color:#682C43;padding:10px 14px;font:700 12px Inter,sans-serif}.vaultlix-identity-line{display:flex;align-items:center;gap:7px;min-width:0}.vaultlix-identity-badge{width:19px;height:19px;flex:0 0 19px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;background:linear-gradient(145deg,#8A3655,#5A1F36);color:#fff;box-shadow:0 2px 7px rgba(104,44,67,.22);font:800 10px/1 Inter,sans-serif;transform:rotate(45deg)}.vaultlix-identity-badge>span{transform:rotate(-45deg)}.profile-identity-summary{margin:0 0 15px;padding:12px 13px;border-radius:13px;background:#F7F0F3;color:#281F23;font:700 15px Inter,sans-serif}.account-step{display:none}.account-step.active{display:block}
.profile-photo-editor{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:14px;margin:0 0 16px;padding:14px;border:1px solid #E5D8DD;border-radius:17px;background:#FCF9FA}.profile-photo-preview{width:72px;height:72px;border-radius:24px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#F1E4E9,#FAF5F7);color:#682C43;font:800 25px/1 'Manrope',sans-serif;box-shadow:inset 0 0 0 1px rgba(104,44,67,.08)}.profile-photo-preview img{width:100%;height:100%;display:block;object-fit:cover}.profile-photo-copy{min-width:0}.profile-photo-title{font:750 14px/1.25 'Manrope',sans-serif;color:#2A2025}.profile-photo-note{margin-top:4px;font:500 11px/1.45 'Manrope',sans-serif;color:#83757C}.profile-photo-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:8px}.profile-photo-action{min-height:40px;border:1px solid #D7C6CD;border-radius:11px;background:#fff;color:#682C43;padding:9px 13px;font:700 12px/1.2 'Manrope',sans-serif}.profile-photo-action.remove{color:#A33B50}.profile-photo-action[hidden]{display:none}.profile-photo-menu{position:relative;width:100%}.profile-photo-menu>summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border:1px solid #D7C6CD;border-radius:11px;background:#fff;color:#682C43;padding:9px 13px;cursor:pointer;font:700 12px/1.2 'Manrope',sans-serif}.profile-photo-menu>summary::-webkit-details-marker{display:none}.profile-photo-menu>summary::after{content:'›';font-size:18px;line-height:10px;transform:rotate(90deg);transition:transform .16s ease}.profile-photo-menu[open]>summary::after{transform:rotate(-90deg)}.profile-photo-submenu{position:absolute;z-index:12;right:0;top:calc(100% + 7px);width:min(230px,calc(100vw - 72px));padding:7px;border:1px solid #E5D8DD;border-radius:14px;background:#fff;box-shadow:0 16px 38px rgba(52,31,39,.18)}.profile-photo-submenu-label{padding:7px 10px 5px;color:#98878E;font:800 9px/1.2 'Manrope',sans-serif;letter-spacing:.08em;text-transform:uppercase}.profile-photo-submenu .profile-photo-action{display:block;width:100%;min-height:40px;border:0;border-radius:9px;padding:9px 10px;text-align:left;background:transparent;font-size:12px}.profile-photo-submenu .profile-photo-action:active{background:#F7EFF2}.profile-photo-submenu .profile-photo-action.remove{border-top:1px solid #F0E5E9;border-radius:0 0 9px 9px}.profile-photo-submenu .profile-photo-action[hidden]{display:none}.profile-image-avatar{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit}.public-profile-photo{width:80px;height:80px;margin:0 0 16px;border-radius:26px;display:none;object-fit:cover;box-shadow:0 12px 28px rgba(73,31,48,.18)}
.profile-pixel-card{z-index:2;text-align:center}.profile-pixel-stage{position:relative;width:min(68vw,270px);aspect-ratio:1;margin:22px auto 18px;overflow:hidden;border-radius:50%;background:linear-gradient(145deg,#F2E5EA,#FBF7F8);box-shadow:0 22px 55px rgba(71,29,46,.24),inset 0 0 0 1px rgba(104,44,67,.1);isolation:isolate}.profile-pixel-stage:after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:inset 0 0 0 4px rgba(255,255,255,.72);pointer-events:none}.profile-pixel-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s ease}.profile-pixel-grid{position:fixed;inset:0;z-index:3;overflow:visible;pointer-events:none}.profile-pixel-tile{position:absolute;left:0;top:0;background-image:var(--pixel-image);background-repeat:no-repeat;opacity:.03;filter:blur(1.2px);transform:translate3d(var(--pixel-start-x),var(--pixel-start-y),0) scale(.28) rotate(var(--pixel-r));transition-property:transform,opacity,filter;transition-timing-function:cubic-bezier(.18,.76,.18,1),ease,ease;will-change:transform,opacity}#profile-pixel-preview-overlay.assembling .profile-pixel-tile{opacity:1;filter:none;transform:translate3d(var(--pixel-end-x),var(--pixel-end-y),0) scale(1) rotate(0)}#profile-pixel-preview-overlay.settled .profile-pixel-image{opacity:1}#profile-pixel-preview-overlay.settled .profile-pixel-grid{opacity:0;transition:opacity .2s ease}.profile-pixel-note{max-width:300px;margin:0 auto 18px;color:#76666E;font:500 12px/1.55 'Manrope',sans-serif}.profile-pixel-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.profile-pixel-download{grid-column:1/-1;margin-top:0}.profile-pixel-export-status{min-height:16px;margin:9px 0 0;color:#76666E;font:600 11px/1.4 'Manrope',sans-serif}@media(prefers-reduced-motion:reduce){.profile-pixel-tile,.profile-pixel-image,.profile-pixel-grid{transition:none!important}}
.daily-look-trigger{background:linear-gradient(135deg,#762A48,#4B172C)!important;border-color:#682C43!important;color:#fff!important}.daily-look-card{background:linear-gradient(180deg,#FFF,#FBF4F7)}.daily-look-hero{position:relative;overflow:hidden;margin:8px 0 18px;padding:23px;border-radius:22px;background:radial-gradient(circle at 82% 12%,rgba(235,155,180,.32),transparent 38%),linear-gradient(145deg,#6B1F3A,#35101F);color:#fff}.daily-look-hero:after{content:'V';position:absolute;right:17px;bottom:-28px;font:800 115px/1 'Manrope',sans-serif;color:rgba(255,255,255,.06)}.daily-look-hero strong{position:relative;z-index:1;display:block;font:750 25px/1.1 'Manrope',sans-serif}.daily-look-hero span{position:relative;z-index:1;display:block;max-width:310px;margin-top:8px;font:500 12px/1.55 'Manrope',sans-serif;color:#F1DDE5}.daily-look-preview{position:relative;width:min(100%,360px);aspect-ratio:var(--daily-look-aspect,1);display:grid;place-items:center;overflow:hidden;margin:0 auto 15px;border:1px dashed #D7BEC8;border-radius:22px;background:#F5ECEF;color:#816D76;text-align:center}.daily-look-preview img{width:100%;height:100%;object-fit:contain}.daily-look-preview.zoomable{touch-action:none;cursor:zoom-in;-webkit-user-select:none;user-select:none}.daily-look-preview.zoomable img{transform:translate3d(var(--daily-look-pan-x,0px),var(--daily-look-pan-y,0px),0) scale(var(--daily-look-scale,1));transform-origin:center;transition:transform .16s ease;will-change:transform}.daily-look-preview.zoomable.is-gesturing img{transition:none}.daily-look-preview.zoomable.is-zoomed{cursor:grab}.daily-look-preview.zoomable.is-dragging{cursor:grabbing}.daily-look-zoom-hint{position:absolute;left:50%;bottom:12px;z-index:2;transform:translateX(-50%);padding:6px 10px;border-radius:999px;background:rgba(31,20,26,.72);color:#fff;font:650 10px/1 'Manrope',sans-serif;white-space:nowrap;pointer-events:none;transition:opacity .18s ease}.daily-look-preview.is-zoomed .daily-look-zoom-hint{opacity:0}.daily-look-preview-copy{max-width:250px;padding:24px;font:650 13px/1.5 'Manrope',sans-serif}.daily-look-styles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}.daily-look-style{position:relative;min-height:80px;padding:12px 9px;border:1px solid #DDCFD5;border-radius:15px;background:#fff;color:#34262D;text-align:left}.daily-look-style.selected{border:2px solid #6B1F3A;background:#F8EEF2;padding:11px 8px}.daily-look-style strong{display:block;font:720 12px/1.25 'Manrope',sans-serif}.daily-look-style span{display:block;margin-top:5px;font:500 9px/1.35 'Manrope',sans-serif;color:#84727A}.daily-look-style em{position:absolute;right:7px;top:6px;padding:3px 5px;border-radius:10px;background:#6B1F3A;color:#fff;font:700 7px/1 'Manrope',sans-serif;letter-spacing:.05em;text-transform:uppercase}.daily-look-consent{display:flex;gap:9px;align-items:flex-start;margin:13px 0;color:#6F6067;font:500 11px/1.45 'Manrope',sans-serif}.daily-look-consent input{margin-top:2px;accent-color:#6B1F3A}.daily-look-status{min-height:18px;margin:8px 0;color:#7A6870;font:600 11px/1.4 'Manrope',sans-serif}.daily-look-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.daily-look-result-actions[hidden]{display:none}
.daily-look-photo-actions{display:grid;grid-template-columns:1fr;gap:9px}.daily-look-camera-button{display:none}.vaultlix-native-android .daily-look-photo-actions{grid-template-columns:1fr 1fr}.vaultlix-native-android .daily-look-camera-button{display:block}.daily-look-another{grid-column:1/-1}
.account-creation-transition{position:absolute;z-index:8;inset:0;min-height:100%;display:grid;place-items:center;overflow:hidden;padding:30px;background:radial-gradient(circle at 50% 38%,rgba(200,117,136,.21),transparent 34%),#271D25;color:#fff;text-align:center;border-radius:inherit}
.account-creation-transition[hidden]{display:none}
.account-creation-transition::before,.account-creation-transition::after{content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(200,117,136,.18);border-radius:50%;animation:account-identity-pulse 2.4s ease-out infinite}
.account-creation-transition::after{animation-delay:1.2s}
.account-creation-inner{position:relative;z-index:1;width:100%;max-width:430px}
.account-creation-mark{width:58px;height:58px;margin:0 auto 27px;display:grid;place-items:center;border-radius:19px;background:#682C43;box-shadow:0 14px 38px rgba(0,0,0,.22)}
.account-creation-mark svg{width:27px;height:27px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.account-scramble-text{min-height:2.8em;display:grid;place-items:center;font:600 clamp(22px,6vw,29px)/1.25 Inter,sans-serif;letter-spacing:-.025em;color:#FFF7FA}
.account-creation-caption{margin-top:13px;font:600 10px/1.4 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#D49AA8}
.account-creation-progress{width:min(220px,70%);height:3px;margin:25px auto 0;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.12)}
.account-creation-progress span{display:block;width:42%;height:100%;border-radius:inherit;background:#D98CA0;animation:account-identity-progress 1.35s ease-in-out infinite}
.account-creation-success{position:relative;z-index:1;width:100%;max-width:440px}
.account-creation-success[hidden],.account-creation-inner[hidden]{display:none}
.account-dot-word{display:block;width:min(100%,380px);height:112px;margin:0 auto;transition:opacity .3s ease}
.account-dot-word.is-complete{opacity:0}
.account-dot-wordmark{margin-top:-70px;opacity:0;transform:scale(.94);filter:blur(7px);font:600 clamp(35px,10vw,48px)/1 Inter,sans-serif;letter-spacing:.08em;color:#FFF7FA;transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1),filter .45s ease}
.account-dot-wordmark.is-visible{opacity:1;transform:scale(1);filter:blur(0)}
.account-dot-success-caption{margin-top:29px;font:600 11px/1.4 Inter,sans-serif;letter-spacing:.15em;text-transform:uppercase;color:#D49AA8;opacity:0;transform:translateY(8px);transition:opacity .4s ease .12s,transform .4s ease .12s}
.account-dot-success-caption.is-visible{opacity:1;transform:translateY(0)}
@keyframes account-identity-progress{0%{transform:translateX(-120%)}100%{transform:translateX(340%)}}
@keyframes account-identity-pulse{0%{opacity:.55;transform:scale(.4)}100%{opacity:0;transform:scale(1.45)}}
@media(prefers-reduced-motion:reduce){.account-creation-transition::before,.account-creation-transition::after,.account-creation-progress span{animation:none}.account-creation-progress span{width:100%;opacity:.65}.account-dot-word{display:none}.account-dot-wordmark,.account-dot-success-caption{opacity:1;transform:none;filter:none}}
/* Installed apps use a focused first-run journey instead of the public,
scrollable marketing homepage. */
#s-native-onboarding{overflow:hidden;background:radial-gradient(circle at 86% 10%,rgba(200,117,136,.22),transparent 30%),radial-gradient(circle at 5% 88%,rgba(113,148,124,.17),transparent 28%),#FBF7F8;color:#271D25}
.native-onboarding-shell{width:100%;height:100%;min-height:100dvh;display:flex;flex-direction:column;padding:calc(28px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));box-sizing:border-box}
.native-onboarding-brand{display:flex;align-items:center;gap:11px;font:750 20px/1 Inter,sans-serif;letter-spacing:-.025em}.native-onboarding-brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:#682C43;color:#fff;box-shadow:0 10px 24px rgba(104,44,67,.22)}.native-onboarding-brand-mark svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.native-onboarding-progress{display:flex;gap:7px;margin-top:25px}.native-onboarding-progress span{height:4px;flex:1;border-radius:99px;background:#E5D8DD}.native-onboarding-progress span.active{background:#682C43}
.native-onboarding-page{display:none;flex:1;flex-direction:column;justify-content:center;padding:24px 0}.native-onboarding-page.active{display:flex}.native-onboarding-art{width:128px;height:128px;display:grid;place-items:center;margin:0 auto 38px;border-radius:42px;background:linear-gradient(145deg,#73314B,#512033);color:#fff;box-shadow:0 24px 54px rgba(104,44,67,.25)}.native-onboarding-art svg{width:58px;height:58px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.native-onboarding-kicker{font:750 10px/1.2 Inter,sans-serif;letter-spacing:.17em;text-transform:uppercase;color:#A15F76;margin-bottom:13px}.native-onboarding-title{max-width:440px;margin:0;font:750 clamp(34px,10vw,46px)/1.04 Inter,sans-serif;letter-spacing:-.05em}.native-onboarding-copy{max-width:430px;margin:17px 0 0;font:450 15px/1.6 Inter,sans-serif;color:#71636B}.native-onboarding-points{display:grid;gap:10px;margin:26px 0 0}.native-onboarding-point{display:flex;align-items:center;gap:11px;padding:13px 14px;border:1px solid #E3D7DC;border-radius:15px;background:rgba(255,255,255,.76);font:650 12px/1.35 Inter,sans-serif;color:#51434B}.native-onboarding-point::before{content:'✓';width:22px;height:22px;display:grid;place-items:center;flex:none;border-radius:50%;background:#E8F0EA;color:#557660;font-size:11px}
.native-onboarding-actions{display:grid;gap:10px}.native-onboarding-primary,.native-onboarding-secondary{width:100%;min-height:54px;border-radius:17px;font:750 14px/1 Inter,sans-serif}.native-onboarding-primary{border:0;background:#682C43;color:#fff;box-shadow:0 12px 28px rgba(104,44,67,.20)}.native-onboarding-secondary{border:1px solid #D9C9CF;background:rgba(255,255,255,.82);color:#682C43}.native-onboarding-note{text-align:center;margin-top:12px;font:500 10.5px/1.45 Inter,sans-serif;color:#93868D}
.account-overlay.native-onboarding-account{align-items:stretch;background:#FBF7F8;backdrop-filter:none;padding:0}.account-overlay.native-onboarding-account .account-card{width:100%;max-width:none;max-height:none;height:100dvh;border-radius:0;box-shadow:none;padding:calc(28px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom))}.account-overlay.native-onboarding-account .account-close{display:none}.account-overlay.native-onboarding-account .account-card>div{max-width:520px;margin-left:auto;margin-right:auto}
html.vaultlix-native-android .native-onboarding-shell{padding-top:calc(28px + var(--android-safe-area-top,0px));padding-bottom:calc(24px + var(--android-safe-area-bottom,0px))}html.vaultlix-native-android .account-overlay.native-onboarding-account .account-card{padding-top:calc(28px + var(--android-safe-area-top,0px));padding-bottom:calc(24px + var(--android-safe-area-bottom,0px))}
/* Large Android system text could push the number field below the initially
visible part of this bottom sheet. Put the action first and keep the sheet
inside the native safe area; the explanatory copy remains available below. */
#new-connection-overlay .account-card{display:flex;flex-direction:column}
#new-connection-overlay .account-head{order:1}
#new-connection-overlay .account-form{order:2}
#new-connection-overlay .account-copy{order:3;margin:14px 0 0}
html.vaultlix-native-android #new-connection-overlay .account-card{max-height:calc(100dvh - var(--android-safe-area-top,0px) - 12px);padding-bottom:calc(24px + var(--android-safe-area-bottom,0px))}
html.vaultlix-native-android #new-connection-overlay .account-head{margin-bottom:12px}
html.vaultlix-native-android #new-connection-overlay .account-title{font-size:26px}
.private-number-scan{display:flex;align-items:center;justify-content:center;gap:9px}.private-number-scan svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.qr-scanner-overlay{position:fixed;inset:0;z-index:12030;display:none;flex-direction:column;background:#130e12;color:#fff}.qr-scanner-overlay.open{display:flex}.qr-scanner-head{display:flex;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top)) 16px 14px}.qr-scanner-head button{width:42px;height:42px;border:1px solid #ffffff2e;border-radius:14px;background:#ffffff16;color:#fff;font-size:25px}.qr-scanner-title{font:750 18px Manrope,sans-serif}.qr-scanner-stage{position:relative;flex:1;min-height:0;overflow:hidden;background:radial-gradient(circle at center,#5b293d 0,#27141d 42%,#090708 100%)}.qr-scanner-stage:before{content:'Opening camera…';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:0;color:#eadfe4;font:650 13px Inter,sans-serif}.qr-scanner-stage:has(video.ready):before{display:none}.qr-scanner-stage video{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}.qr-scanner-stage video.ready{opacity:1}.qr-scanner-shade{position:absolute;z-index:2;inset:0;background:linear-gradient(#0008,#0000 24%,#0000 76%,#0008);pointer-events:none}.qr-scanner-frame{position:absolute;z-index:3;left:50%;top:50%;width:min(68vw,320px);aspect-ratio:1;transform:translate(-50%,-50%);border:3px solid #fff;border-radius:26px;box-shadow:0 0 0 9999px #0004}.qr-scanner-frame:before{content:'';position:absolute;left:12%;right:12%;top:14%;height:2px;background:#ef98b3;box-shadow:0 0 12px #ef98b3;animation:qr-scan-line 2.1s ease-in-out infinite}@keyframes qr-scan-line{0%,100%{transform:translateY(0)}50%{transform:translateY(min(48vw,220px))}}.qr-scanner-help{padding:17px 20px calc(19px + env(safe-area-inset-bottom));text-align:center;font:600 13px/1.5 Inter,sans-serif;color:#eadfe4;background:#1d141a}.qr-scanner-error{color:#ffb8c7}
.website-get-app{position:fixed;inset:0;z-index:12020;display:none;align-items:center;justify-content:center;padding:20px;background:#24191f99;backdrop-filter:blur(8px)}.website-get-app.open{display:flex}.website-get-app-card{position:relative;width:min(420px,100%);max-height:calc(100dvh - 40px);overflow:auto;padding:30px 26px 24px;border-radius:28px;background:#fff;text-align:center;box-shadow:0 28px 90px #1d0d1645}.website-get-app-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border:0;border-radius:13px;background:#f3e8ec;color:#682c43;font-size:22px}.website-get-app-card h2{margin:5px 36px 8px;font:750 30px/1.12 Manrope,sans-serif;color:#271d25}.website-get-app-card p{margin:0 0 18px;font:500 13px/1.55 Inter,sans-serif;color:#756a72}.website-get-app-qr{display:block;width:min(270px,76vw);height:auto;margin:0 auto 18px}.website-store-links{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px}.website-store-links .official-store-badge.apple img{height:44px}.website-store-links .official-store-badge.google img{height:64px;margin:-10px 0}
@media(min-width:700px){.account-overlay{align-items:center;padding:24px}.account-card{border-radius:26px;padding-bottom:25px}}
/* Mobile reading scale
Phone screens need a comfortable minimum reading size. Keep the desktop
composition untouched while using the same accessible scale in Safari,
Android browsers, and the shared iOS/Android settings interface. */
@media(max-width:760px){
#s-landing .landing-wordmark{font-size:24px!important}
#s-landing .landing-brand-note{font-size:10.5px}
#s-landing .landing-menu-panel a{font-size:13px;padding:13px 12px}
#s-landing .landing-account-btn{font-size:12px}
#s-landing .logo-sub{font-size:11.5px!important;line-height:1.45!important}
#s-landing .tagline{font-size:17px!important;line-height:1.6!important;font-weight:500!important}
#s-landing .identity-proof span{font-size:12px;padding:10px 12px}
#s-landing .landing-section-heading span{font-size:11px}
#s-landing .landing-section-heading h2{font-size:24px}
#s-landing .card-title{font-size:17px!important}
#s-landing .card-desc{font-size:13.5px!important;line-height:1.5!important;font-weight:500!important}
#s-landing .landing-assurance strong{font-size:15px}
#s-landing .landing-assurance span{font-size:13px;line-height:1.55;font-weight:500}
#s-landing .marketing-eyebrow{font-size:11.5px}
#s-landing .marketing-title{font-size:34px}
#s-landing .marketing-lede{font-size:16px;line-height:1.65;font-weight:500}
#s-landing .privacy-compare-row>span{font-size:13.5px;line-height:1.5;font-weight:500}
#s-landing .marketing-card h3{font-size:20px}
#s-landing .marketing-card p,
#s-landing .walkthrough-copy p,
#s-landing .vault-type p{font-size:15px;font-weight:500}
#s-landing .walkthrough-list li,
#s-landing .vault-type ul{font-size:14px}
#s-landing .privacy-card strong{font-size:18px}
#s-landing .privacy-card span{font-size:14.5px;font-weight:500}
#s-landing .safety-item strong{font-size:16px}
#s-landing .safety-item span{font-size:14px;font-weight:500}
#s-landing .faq-item summary{font-size:17px}
#s-landing .faq-item p{font-size:15px;line-height:1.7;font-weight:500}
#s-landing .marketing-note{font-size:14.5px;font-weight:550}
#s-landing .marketing-cta h2{font-size:31px}
#s-landing .marketing-cta p{font-size:15px;font-weight:500}
#s-landing .marketing-cta button{font-size:14px;padding:15px 21px}
#s-landing .landing-footer{font-size:12.5px!important}
}
@media(max-width:640px){
.settings-header-title{font-family:'Inter',sans-serif;font-size:28px;font-weight:700;letter-spacing:-.035em}
.settings-section-label{font-size:12px;line-height:1.35;padding-top:22px}
.settings-row,.settings-link-row{padding-top:15px;padding-bottom:15px;gap:13px}
.settings-row-title{font-size:16px;line-height:1.35;font-weight:600}
.settings-row-sub{font-size:13.5px;line-height:1.5;font-weight:500;color:#756970}
.settings-status{font-size:13px;line-height:1.3}
#settings-request-policy-row{
display:grid;
grid-template-columns:36px minmax(0,1fr);
align-items:start;
column-gap:13px;
row-gap:0;
}
#settings-request-policy-row .settings-row-icon{
grid-column:1;
grid-row:1 / span 2;
margin-top:2px;
}
#settings-request-policy-row .settings-row-text{
grid-column:2;
min-width:0;
}
#settings-request-policy-row .settings-status{
grid-column:2;
justify-self:start;
max-width:100%;
margin-top:8px;
padding:6px 10px;
border-radius:999px;
background:#F7EFF2;
text-align:left;
white-space:normal;
}
.settings-menu .settings-row-title{font-size:17px;font-weight:700}
.settings-menu .settings-row-sub{font-size:14px;line-height:1.45;font-weight:500;color:#756970}
.settings-empty-note{font-size:14px;line-height:1.6;font-weight:500}
.settings-version{font-size:13px}
.settings-about-name{font-family:'Inter',sans-serif;font-size:18px;font-weight:700;letter-spacing:-.015em}
#settings-profile-controls .account-field span{font-size:14px}
#settings-profile-controls .account-field input{font-size:17px}
#settings-profile-controls .account-copy{font-size:15px;line-height:1.6;font-weight:500;color:#655860}
#settings-profile-controls .account-note{font-size:13px;line-height:1.55;font-weight:500;color:#7C6E76}
#settings-profile-controls .account-primary,
#settings-profile-controls .account-secondary{font-size:15px}
#settings-profile-controls .recovery-code{font-size:17px}
.safety-copy,.emergency-choice small{font-weight:500}
}
/* iOS inbox reading scale. Conversation names and previews are the primary
navigation content, so keep them comfortably legible without enlarging
Android layouts that already match their devices' display scaling. */
@media(max-width:640px){
html.vaultlix-native-ios .vault-list-title{font-size:24px!important}
html.vaultlix-native-ios .vault-list-row{grid-template-columns:52px minmax(0,1fr) auto;column-gap:13px;padding:17px 16px}
html.vaultlix-native-ios .vault-list-avatar{width:52px;height:52px;font-size:20px}
html.vaultlix-native-ios .vault-list-row-name{font-size:18px;line-height:1.3}
html.vaultlix-native-ios .vault-list-row-preview{font-size:15px;line-height:1.4;margin-top:4px;font-weight:500}
html.vaultlix-native-ios .vault-list-row-time{font-size:12.5px;font-weight:500}
html.vaultlix-native-ios .vault-list-row-unread{min-width:22px;height:22px;font-size:11.5px}
html.vaultlix-native-ios .vault-list-request-name{font-size:18px}
html.vaultlix-native-ios .vault-list-request-number,
html.vaultlix-native-ios .vault-list-request-copy{font-size:14px;line-height:1.45}
html.vaultlix-native-ios .vault-list-request-actions button{min-height:42px;font-size:14px}
html.vaultlix-native-ios .vault-list-empty{font-size:16px;line-height:1.6}
html.vaultlix-native-ios .vault-list-empty strong{font-size:21px}
}
/* The message box is not ringed when it is tapped: the page-wide focus outline
(button/input/textarea :focus-visible) and the chat's own focus border and glow
are turned off for both composers, on every platform. */
#msg-input:focus,#msg-input:focus-visible,#s-chat #msg-input:focus,#s-chat #msg-input:focus-visible,
#group-message-input:focus,#group-message-input:focus-visible,.group-chat-footer textarea:focus,.group-chat-footer textarea:focus-visible{
outline:none!important;box-shadow:none!important;-webkit-tap-highlight-color:transparent}
#s-chat #msg-input:focus,#s-chat #msg-input:focus-visible{background:#FBF8F9!important;border-color:#E3D6DB!important}
.group-chat-footer textarea:focus,.group-chat-footer textarea:focus-visible{border-color:#dfd2d7!important;background:#fff}
/* While the keyboard slides, the chat shrinks with it (see createChatKeyboardLayout). */
.group-chat.kb-animating,#s-chat.kb-animating{transition:height .28s cubic-bezier(.2,.8,.2,1),min-height .28s cubic-bezier(.2,.8,.2,1)}
/* ── Compact chat header ─────────────────────────────────────────────────
The "Encrypted" and "Timer" bars used to take a full row above the messages.
They now share the line under the contact's name, so the conversation gets that
height back. */
#s-chat .chat-hdr-sub{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:nowrap;white-space:nowrap}
#s-chat .chat-hdr-sub .chat-hdr-presence{flex:0 1 auto;min-width:0}
#s-chat .chat-hdr-sub .e2e-bar{flex:0 1 auto;min-width:0;display:inline-flex!important;align-items:center;gap:4px;width:auto!important;margin:0!important;padding:2px 0!important;border:0!important;border-radius:0!important;background:transparent!important;color:#4C6B55!important;font:650 11px/1.2 'Manrope',sans-serif!important;text-align:left;overflow:hidden;text-overflow:ellipsis}
#s-chat .chat-hdr-sub .e2e-bar svg{width:13px;height:13px}
#s-chat .chat-hdr-sub .e2e-bar:not(.pending) span{display:none}
#s-chat .chat-hdr-sub .e2e-bar.pending{color:#8A6A2E!important;overflow:hidden}
#s-chat .chat-hdr-sub .timer-bar{flex:0 0 auto;display:inline-flex!important;align-items:center;margin:0!important;padding:0!important;border:0!important;background:transparent!important;height:auto!important;width:auto!important}
#s-chat .chat-hdr-sub .timer-bar-controls{display:inline-flex!important;align-items:center;gap:3px;height:auto;padding:2px 0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;position:relative;color:#786A72}
#s-chat .chat-hdr-sub .timer-bar-controls::before{content:'';flex:none;width:13px;height:13px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23786A72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2 2M9 2h6'/%3E%3C/svg%3E") center/contain no-repeat}
#s-chat .chat-hdr-sub .timer-bar-controls::after{content:attr(data-short);font:650 11px/1.2 'Manrope',sans-serif;color:#786A72}
#s-chat .chat-hdr-sub .timer-bar-label{display:none!important}
/* The real select covers the chip, invisible, so a tap opens the native picker. */
#s-chat .chat-hdr-sub #timer-bar-select{position:absolute!important;inset:-8px -6px!important;width:calc(100% + 12px)!important;height:calc(100% + 16px)!important;min-width:0!important;margin:0!important;padding:0!important;opacity:0!important;border:0!important;background:none!important;font-size:16px!important;cursor:pointer}
#s-chat .chat-hdr-sub .timer-bar-controls:focus-within{border:0!important;box-shadow:none!important}
/* Typing: the keyboard is right under the composer, so drop the bottom room kept for the home bar. */
#s-chat.composer-focused .chat-ftr,#s-chat.composer-focused #chat-ftr{padding-bottom:10px!important}
.group-chat.composer-focused .group-chat-footer{padding-bottom:10px}
html{background:#fff}
/* Capacitor resizes the WKWebView itself for the iOS keyboard. Keep the active
direct-chat shell attached to that resized view so WebKit cannot pan the
whole document to reveal the composer and leave the header off-screen. */
html.vaultlix-native-ios #s-chat.active{position:fixed!important;inset:0!important;width:100%!important;max-width:100%!important;transform:none!important}
/* The line under the name is only about 80px wide on a phone, so it can never hold the word
"Online" as well as the lock and the timer: they used to be drawn over each other.
The green dot alone says online; the word comes back where there is room. Nothing on
the line may spill over its neighbours. */
#s-chat .chat-hdr-sub{overflow:hidden}
#s-chat .chat-hdr-sub .chat-hdr-presence{flex:0 0 auto;gap:0}
#s-chat .chat-hdr-sub #chat-presence-label{display:none}
#s-chat .chat-hdr-sub .e2e-bar,#s-chat .chat-hdr-sub .timer-bar{flex:0 0 auto}
#s-chat .chat-hdr-sub .e2e-bar.pending{flex:0 1 auto;min-width:0}
@media(min-width:560px){#s-chat .chat-hdr-sub #chat-presence-label{display:inline;margin-left:6px}}
/* Narrow phones (or a large display-size setting) leave the contact's name a few
letters. Slimmer buttons, back arrow and photo hand that width to the name. */
@media(max-width:400px){
#s-chat .chat-hdr{padding-left:8px!important;padding-right:8px!important;gap:6px!important}
#s-chat .chat-hdr-actions{gap:3px!important}
#s-chat .chat-call-btn,#s-chat .conversation-menu-btn{width:34px!important;height:36px!important;border-radius:11px!important}
#s-chat .chat-call-btn svg{width:18px!important;height:18px!important}
#s-chat .chat-home-btn{width:34px!important;height:36px!important;border-radius:11px!important}
#s-chat .chat-home-btn svg{width:18px!important;height:18px!important}
#s-chat .chat-peer-avatar{width:36px!important;height:36px!important;flex-basis:36px!important;border-radius:12px!important}
#s-chat .chat-hdr-identity{gap:8px!important}
/* Slimmer to look at, not to tap: the touch area stays about 44px tall. */
#s-chat .chat-call-btn,#s-chat .conversation-menu-btn,#s-chat .chat-home-btn{position:relative}
#s-chat .chat-call-btn::after,#s-chat .conversation-menu-btn::after,#s-chat .chat-home-btn::after{content:'';position:absolute;inset:-4px -1px}
}
@media(max-width:340px){
#s-chat .chat-hdr{padding-left:6px!important;padding-right:6px!important;gap:4px!important}
#s-chat .chat-hdr-actions{gap:2px!important}
#s-chat .chat-call-btn,#s-chat .conversation-menu-btn{width:31px!important;height:34px!important;border-radius:10px!important}
#s-chat .chat-call-btn svg{width:17px!important;height:17px!important}
#s-chat .chat-home-btn{width:31px!important;height:34px!important}
#s-chat .chat-peer-avatar{width:34px!important;height:34px!important;flex-basis:34px!important}
#s-chat .chat-hdr-identity{gap:6px!important}
}
/* ── Message selection (WhatsApp style) ─────────────────────────────────────
Long-press a message: a bar over the header (back, count, reply, delete,
forward, more), an emoji bar above the message, and the message tinted
across the whole row. Replaces the old inline action row. */
.msg-selection-bar{position:fixed;left:0;right:0;top:0;z-index:10040;box-sizing:border-box;display:flex;align-items:center;gap:2px;padding:env(safe-area-inset-top) 6px 0;min-height:56px;background:#fff;color:#682C43;border-bottom:1px solid #EFE6E9;box-shadow:0 2px 10px rgba(39,29,37,.06)}
.msg-selection-bar[hidden]{display:none}
.msg-selection-bar button{width:44px;height:44px;flex:none;padding:0;border:0;border-radius:50%;background:transparent;color:#682C43;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.msg-selection-bar button[hidden]{display:none}
.msg-selection-bar button:active{background:#F3E6EA}
.msg-selection-bar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.msg-selection-bar [data-sel="more"] svg{fill:currentColor;stroke:none}
.msg-selection-count{flex:1;padding-left:6px;font:650 19px/1 'Manrope',Inter,sans-serif;color:#271D25}
.msg-reaction-bar{position:fixed;z-index:10041;display:flex;gap:1px;padding:5px 7px;border-radius:999px;background:#fff;box-shadow:0 6px 24px rgba(39,29,37,.24),0 0 0 1px rgba(104,44,67,.06)}
.msg-reaction-bar[hidden]{display:none}
.msg-reaction-bar button{width:40px;height:40px;padding:0;border:0;border-radius:50%;background:none;font-size:25px;line-height:1;display:grid;place-items:center;transition:transform .12s;-webkit-tap-highlight-color:transparent}
.msg-reaction-bar button:active{transform:scale(1.28)}
.msg-reaction-bar button.mine{background:#F3E6EA}
.msg-more-menu{position:fixed;right:8px;z-index:10042;min-width:176px;padding:6px 0;border-radius:14px;background:#fff;box-shadow:0 10px 32px rgba(39,29,37,.26),0 0 0 1px rgba(104,44,67,.06)}
.msg-more-menu[hidden]{display:none}
.msg-more-menu button{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;border:0;background:none;color:#271D25;font:550 15px Inter,sans-serif;text-align:left}
.msg-more-menu button:active{background:#F8F2F4}
.msg-more-menu svg{width:18px;height:18px;flex:none;fill:none;stroke:#682C43;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.msg.msg-selected,.group-msg.msg-selected{position:relative;isolation:isolate}
.msg.msg-selected::before,.group-msg.msg-selected::before{content:'';position:absolute;z-index:-1;top:-3px;bottom:-3px;left:var(--tint-left,0);width:var(--tint-width,100%);background:rgba(104,44,67,.14);pointer-events:none}
/* Photo viewer bars (WhatsApp style). */
.viewer-top{position:absolute;top:0;left:0;right:0;z-index:3;box-sizing:border-box;display:flex;align-items:center;gap:2px;padding:calc(8px + env(safe-area-inset-top)) 8px 22px;background:linear-gradient(rgba(0,0,0,.68),rgba(0,0,0,0));color:#fff}
.viewer-top button{width:44px;height:44px;flex:none;padding:0;border:0;border-radius:50%;background:transparent;color:#fff;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.viewer-top button:active{background:rgba(255,255,255,.18)}
.viewer-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-left:2px}
.viewer-title strong{font:650 16px/1.2 'Manrope',Inter,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewer-title span{font:500 12px/1.2 Inter,sans-serif;opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewer-bottom{position:absolute;bottom:0;left:0;right:0;z-index:3;box-sizing:border-box;display:flex;align-items:center;gap:6px;padding:22px 12px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.68))}
.viewer-reply{flex:1;height:44px;padding:0 18px;border:0;border-radius:22px;background:rgba(255,255,255,.18);color:rgba(255,255,255,.88);font:500 15px Inter,sans-serif;text-align:left;-webkit-tap-highlight-color:transparent}
.viewer-react{width:44px;height:44px;flex:none;padding:0;border:0;border-radius:50%;background:none;font-size:26px;line-height:1;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.viewer-react.mine{background:rgba(255,255,255,.22)}
/* Invitations: the "Have an invite code?" link and the store button on a friend's page. */
.landing-invite-link{display:block;margin:12px 0 0;padding:6px 2px;border:0;background:none;color:#682C43;font:650 13px/1.3 'Manrope',sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.public-profile-get-app .account-copy{margin-top:-4px;font-size:12.5px}
/* Match WhatsApp's platform-native typography throughout the application:
SF Pro on Apple platforms, Roboto on Android, and the native UI face on
desktop. This replaces older screen-level families while retaining their
existing size, weight, line-height and spacing. */
:root{--vaultlix-system-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
:root:not(#vaultlix-font-override-a):not(#vaultlix-font-override-b) body,
:root:not(#vaultlix-font-override-a):not(#vaultlix-font-override-b) body *,
:root:not(#vaultlix-font-override-a):not(#vaultlix-font-override-b) body *::before,
:root:not(#vaultlix-font-override-a):not(#vaultlix-font-override-b) body *::after{font-family:var(--vaultlix-system-font)!important}