*{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} .push-banner{display:none;flex-shrink:0;align-items:center;gap:10px;background:#F0EBE3;border-bottom:1px solid #E8E2DA;padding:8px 14px;font-size:12px;color:#4A3F35} .push-banner.show{display:flex} .push-banner span{flex:1} .push-banner button{background:#682C43;color:#fff;border:none;border-radius:14px;padding:5px 12px;font-size:11px;cursor:pointer;white-space:nowrap} .push-banner button.secondary{background:none;color:#7A6E65;border:0.5px solid #D0CAC0} /* -- 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-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} .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 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-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:0;right:0;bottom:0;padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(251,247,248,0),#FBF7F8 18%);display:flex;gap:10px;justify-content:center;z-index:5} .vault-list-action{min-height:50px;border-radius:17px;padding:0 20px;font:700 14px/1 inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;flex:1;max-width:365px} .vault-list-actions .vault-list-action:only-child{max-width:760px} .vault-list-action svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .vault-list-action.primary{background:#682C43;color:#fff;border:1px solid #682C43;box-shadow:0 10px 24px rgba(104,44,67,.2)} .vault-list-action.secondary{background:#fff;color:#682C43;border:1px solid #DCCDD2} @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}.vault-list-actions{padding-left:calc((100vw - 760px)/2 + 18px);padding-right:calc((100vw - 760px)/2 + 18px)} } @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} /* 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%} /* 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} body.select-mode #chat-body .msg{opacity:.55;transition:opacity .15s} body.select-mode #chat-body .msg.msg-selected{opacity:1} body.select-mode .chat-ftr{display:none} .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} .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)}} .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} /* 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;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} .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)} .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} .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} .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-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}} .msg-voice{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,0.04);border:0.5px solid #E0D9D0;border-radius:20px;padding:8px 12px 8px 8px;margin-top:4px;min-width:180px;max-width:220px} .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} /* -- 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-receipt { font-size:11px; color:#B0A898; font-weight:400; } .msg-receipt.delivered { color:#7A6E65; font-weight:500; } .msg-receipt.read { color:#E2703A; 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; } @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:200px; max-height:200px; border-radius:6px; display:block; margin-top:4px; cursor:pointer; } .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(270px,72vw);overflow:hidden;background:#F8F5F3;border:.5px solid #DED6D2;border-radius:12px;margin-top:4px;cursor:pointer;color:#281F23} .msg-pdf-preview{height:150px;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-image-check-placeholder { min-width:160px; min-height:120px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:var(--bg-secondary, #f5f3f4); color:#777; font-size:12px; padding: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:34px; height:34px; object-fit:cover; border-radius:5px; 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:26px; height:26px; object-fit:cover; border-radius:4px; flex-shrink:0; } /* ── 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} /* 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} /* ── MILESTONE CARD ───────────────────────────────────────────── */ .milestone-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:600;opacity:0;pointer-events:none;transition:opacity .25s ease;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)} .milestone-overlay.open{opacity:1;pointer-events:all} .milestone-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.94);width:min(320px,86vw);background:#0A0908;border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,0.5);z-index:601;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s cubic-bezier(.34,1.56,.64,1);padding:16px;display:flex;flex-direction:column;align-items:center} .milestone-modal.open{opacity:1;pointer-events:all;transform:translate(-50%,-50%) scale(1)} #milestone-canvas{width:100%;height:auto;border-radius:10px;display:block} .milestone-actions{display:flex;gap:10px;width:100%;margin-top:14px} .milestone-share-btn{flex:1;background:#682C43;color:#0A0908;border:none;border-radius:24px;padding:11px 0;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer} .milestone-dismiss-btn{flex:1;background:none;color:rgba(255,255,255,0.5);border:0.5px solid rgba(255,255,255,0.2);border-radius:24px;padding:11px 0;font-family:'Inter',sans-serif;font-size:13.5px;cursor:pointer} .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-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} .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 — the one line that's actually meant to reassure the person reading it. Dark, warm-toned text instead. Just the V and "This call never existed." 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 the one line that matters. */ .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-vanish-mark .v-line2{font-family:'Inter',sans-serif;font-size:11px;color:#682C43;font-weight:400;letter-spacing:.1em;text-transform:uppercase;margin-top:20px;opacity:0;transition:opacity .4s ease .55s} .call-vanish-mark.visible .v-line2{opacity:.8} /* Sand-disintegrate — "This call never existed." is the one line built to be believed, so instead of floating off like everything before it, it comes apart letter by letter: each character carries its own randomized drift/rotation/delay (set inline per-char in wrapSandChars) so the line crumbles unevenly, like sand losing its shape, rather than moving as one block. transform+opacity+filter only — no layout properties — so it stays smooth even on older phones. */ .sand-char{display:inline-block} .sand-char.sand-disintegrate{animation:sand-fall .85s ease-in forwards;animation-delay:var(--delay)} @keyframes sand-fall{0%{opacity:1;transform:translate(0,0) rotate(0deg);filter:blur(0)}35%{opacity:.8}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot));filter:blur(2px)}} .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: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:50px;height:50px} .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:18px;height:18px} .call-actions.compact .call-end-btn svg{width:20px;height:20px} .call-actions.compact .call-btn-label{font-size:9px;max-width:56px} /* 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:10px} .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 cascade — several of these spawned at once (see playHeartCascade), each with its own randomized size/duration/delay/--x-offset set as inline styles in JS. The class only supplies the shared shape of the path; -115vh at 100% guarantees clearing the top of the viewport regardless of device height, unlike the generic float's fixed -190px (which was never meant to travel that far). opacity:0 in the base rule, not just the keyframe's 0%, matters here specifically — with several hearts staggered via animation-delay, each one needs to stay invisible for its own delay period rather than briefly flashing at its un-animated (fully opaque) base state before its animation actually starts. */ .call-reaction-heart{position:fixed;left:50%;bottom:190px;line-height:1;opacity:0;transform:translateX(calc(-50% + (var(--x-offset) * .2))) translateY(0) scale(.6);animation-name:call-reaction-heart-float;animation-timing-function:ease-out;animation-fill-mode:forwards;pointer-events:none;z-index:9999} @keyframes call-reaction-heart-float{ 0%{opacity:0;transform:translateX(calc(-50% + (var(--x-offset) * .2))) translateY(0) scale(.6)} 10%{opacity:1} 40%{transform:translateX(calc(-50% + var(--x-offset))) translateY(-45vh) scale(1.05)} 70%{transform:translateX(calc(-50% + (var(--x-offset) * .7))) translateY(-75vh) scale(.95)} 100%{opacity:0;transform:translateX(calc(-50% + (var(--x-offset) * 1.1))) translateY(-115vh) scale(.9)} } /* 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. The automatic per-room banner (showEnableNotificationsBanner) already does the real work of asking; 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} .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} /* 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)} .push-banner{background:#EEF4F0;border-color:#D7E6DC;color:#285C40} .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-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} .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} .push-banner{background:#E9F7F0;border-color:#CDE9DA;color:#246344}.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)} .milestone-share-btn{background:#682C43;color:#fff} .connect-v-mark,.vanish-v,.call-vanish-mark .v-glyph,.call-vanish-mark .v-line2{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,.push-banner{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,.push-banner{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:#71947C!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-trust-pill{display:flex;align-items:center;gap:7px;border:1px solid #DFD2D7;border-radius:999px;background:rgba(255,255,255,.78);padding:8px 11px;font:650 10px/1 'Manrope',sans-serif;letter-spacing:.05em;color:#54474E;box-shadow:0 6px 18px rgba(39,29,37,.05)} #s-landing .landing-trust-pill span{width:7px;height:7px;border-radius:50%;background:#71947C;box-shadow:0 0 0 4px rgba(113,148,124,.13)} #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} .identity-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 34px;max-width:620px} .identity-flow-step{position:relative;padding:15px 16px;border:1px solid rgba(104,44,67,.14);border-radius:18px;background:rgba(255,255,255,.7);box-shadow:0 8px 28px rgba(71,38,51,.05)} .identity-flow-step:not(:last-child)::after{content:'→';position:absolute;right:-10px;top:50%;z-index:2;transform:translate(50%,-50%);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#682C43;color:#fff;font-size:12px} .identity-flow-step strong{display:block;color:#682C43;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px} .identity-flow-step span{display:block;color:#5f5359;font-size:13px;line-height:1.4} #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 .landing-hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:21px} #s-landing .landing-hero-action{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 18px;border:1px solid #682C43;border-radius:999px;background:#682C43;color:#fff;font:750 12px/1 'Manrope',sans-serif;box-shadow:0 10px 24px rgba(104,44,67,.22);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease} #s-landing .landing-hero-action:hover{background:#542237;box-shadow:0 13px 28px rgba(104,44,67,.27);transform:translateY(-2px)} #s-landing .landing-hero-action-secondary{min-width:92px;background:rgba(255,255,255,.75);color:#682C43;border-color:#CDB8C0;box-shadow:none} #s-landing .landing-hero-action-secondary:hover{background:#fff;color:#542237;box-shadow:0 8px 20px rgba(104,44,67,.10)} #s-landing .landing-hero-action svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #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} #s-landing .identity-signal{position:relative;display:flex;align-items:center;gap:12px;max-width:430px;margin-top:16px;padding:12px 14px;overflow:hidden;border:1px solid rgba(104,44,67,.14);border-radius:17px;background:rgba(255,255,255,.74);box-shadow:0 12px 32px rgba(65,35,48,.07);isolation:isolate} #s-landing .identity-signal::before{content:'';position:absolute;z-index:-1;inset:-80% -20%;background:linear-gradient(100deg,transparent 35%,rgba(200,117,136,.18) 49%,transparent 63%);transform:translateX(-55%);animation:identity-signal-scan 5.6s ease-in-out infinite} #s-landing .identity-signal-orbit{position:relative;width:36px;height:36px;display:grid;place-items:center;flex:none;border-radius:12px;background:#682C43;color:#fff;font:700 15px/1 'Manrope',sans-serif;box-shadow:0 7px 17px rgba(104,44,67,.22)} #s-landing .identity-signal-orbit::before,#s-landing .identity-signal-orbit::after{content:'';position:absolute;inset:-4px;border:1px solid rgba(104,44,67,.26);border-radius:15px;animation:identity-orbit-pulse 2.8s ease-out infinite} #s-landing .identity-signal-orbit::after{animation-delay:1.4s} #s-landing .identity-signal-copy{min-width:0;display:grid;gap:3px} #s-landing .identity-signal-copy strong{font:750 11px/1.2 'Manrope',sans-serif;color:#34272F} #s-landing .identity-signal-copy span{font:500 10px/1.35 'Manrope',sans-serif;color:#83757C} #s-landing .identity-signal-state{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none;font:750 9px/1 'Manrope',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#557660} #s-landing .identity-signal-state::before{content:'';width:7px;height:7px;border-radius:50%;background:#71947C;box-shadow:0 0 0 4px rgba(113,148,124,.13);animation:identity-state-breathe 2.4s ease-in-out infinite} @keyframes identity-signal-scan{0%,30%{transform:translateX(-55%)}70%,100%{transform:translateX(65%)}} @keyframes identity-orbit-pulse{0%{opacity:.65;transform:scale(.82)}70%,100%{opacity:0;transform:scale(1.24)}} @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 .landing-count{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#E9D8DE;color:#682C43;font:750 13px/1 'Manrope',sans-serif} #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-trust-pill{display:none} #s-landing .landing-account-btn{height:40px;max-width:118px;padding:0 11px;font-size:10px} #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} .identity-flow{grid-template-columns:1fr;margin-bottom:28px} .identity-flow-step:not(:last-child)::after{content:'↓';right:auto;left:50%;top:auto;bottom:-10px;transform:translate(-50%,50%)} #s-landing .landing-title{font-size:36px;line-height:1.06} #s-landing .tagline{font-size:15px!important} #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-trust-pill{display:none} #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-trust-pill{padding:10px 14px;font-size:11px;background:rgba(255,255,255,.88)} #s-landing .landing-hero{grid-column:1;grid-row:2;max-width:610px;margin:0;padding-right:20px;align-self:center} #s-landing .identity-flow{grid-column:1;grid-row:3;max-width:610px;margin:0;padding-right:20px;align-self:start} #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 .landing-count{width:44px;height:44px;font-size:14px} #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 .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 .identity-signal::before,#s-landing .identity-signal-orbit::before,#s-landing .identity-signal-orbit::after,#s-landing .identity-signal-state::before,#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} } /* ── 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:0!important} #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} #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} /* 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} /* 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 .push-banner{margin:8px 14px 0;border-radius:12px!important;font-size:11px!important} #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 .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 .e2e-bar{font-size:10px!important} } /* WKWebView-only legibility pass. Android's sizing is already balanced; iOS needs a compact encryption chip and a larger reading scale. Keep this after the shared mobile rules so their !important declarations cannot win. */ @supports (-webkit-touch-callout:none){ @media(max-width:430px){ #s-chat .chat-tools{grid-template-columns:max-content minmax(0,1fr)!important} #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} #s-chat .e2e-bar span{font-size:13px!important} #s-chat .timer-bar-label::before,#s-chat #timer-bar-select{font-size:13px!important} #s-chat .sys-msg{font-size:14px!important;line-height:1.45!important} #s-chat .msg .bubble{font-size:16.5px!important;line-height:1.5!important} #s-chat .msg-name{font-size:13px!important} #s-chat .msg-time{font-size:12px!important} #s-chat .daily-nudge{font-size:14px!important;line-height:1.4!important} #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 #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 .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} .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} @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} .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:flex;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;flex:0 0 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;flex:1}.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{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.profile-photo-action{min-height:34px;border:1px solid #D7C6CD;border-radius:10px;background:#fff;color:#682C43;padding:7px 11px;font:700 11px/1 'Manrope',sans-serif}.profile-photo-action.remove{color:#A33B50;border-color:#E5C9D0}.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)} .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{width:min(100%,360px);aspect-ratio: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:cover}.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} @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 .landing-hero-action{font-size:14px;padding:15px 20px} #s-landing .identity-proof span{font-size:12px;padding:10px 12px} #s-landing .identity-flow-step strong{font-size:13px} #s-landing .identity-flow-step span{font-size:15px;line-height:1.5;font-weight:500} #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-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} }