/* The iOS contact page is independent of desktop contact/group panels. */
html:root.native-mobile body #overlay[data-panel="info"]:has(.mobile-contact-profile) { --contact-bg:#f4f4f4; --contact-card:#fff; --contact-ink:#111; --contact-muted:#777; --contact-line:#e2e2e2; background:var(--contact-bg); }
html:root.native-mobile[data-theme="dark"] body #overlay[data-panel="info"]:has(.mobile-contact-profile) { --contact-bg:#0a0a0a; --contact-card:#181818; --contact-ink:#f5f5f5; --contact-muted:#929292; --contact-line:#303030; }
html:root.native-mobile body #overlay[data-panel="info"]:has(.mobile-contact-profile) .panel > header { display:none !important; }
html:root.native-mobile body #overlay[data-panel="info"]:has(.mobile-contact-profile) :is(.panel,#panel-body,.panel-content,.mobile-contact-profile) { background:var(--contact-bg) !important; color:var(--contact-ink); }
html:root.native-mobile body #overlay[data-panel="info"]:has(.mobile-contact-profile) #panel-body { padding:0 0 max(24px,env(safe-area-inset-bottom)) !important; overflow-y:auto; }
html:root.native-mobile body #overlay[data-panel="info"]:has(.mobile-contact-profile) .panel-content { overflow:visible !important; }
html:root.native-mobile body #overlay #panel-body .mobile-contact-profile { padding-bottom:24px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
html:root.native-mobile body #overlay #panel-body .contact-profile-header { display:grid; grid-template-columns:60px minmax(0,1fr) 64px; align-items:center; gap:8px; position:sticky; top:0; z-index:3; padding:10px 16px; background:var(--contact-bg); border:0; }
html:root.native-mobile body #overlay #panel-body .contact-profile-header h1 { margin:0; font-size:17px; font-weight:600; text-align:center; line-height:1.25; }
html:root.native-mobile body #overlay #panel-body .contact-profile-header button { display:grid; place-items:center; min-height:44px; padding:8px 12px; border:1px solid var(--contact-line); border-radius:28px; background:var(--contact-card); color:var(--contact-ink); font-size:17px; }
html:root.native-mobile body #overlay #panel-body .contact-profile-header [data-contact-back] { width:44px; padding:8px; }
html:root.native-mobile body #overlay #panel-body .contact-profile-header svg { width:25px; height:25px; }
html:root.native-mobile body #overlay #panel-body .contact-profile-header button[hidden] { visibility:hidden; display:grid; }
html:root.native-mobile body #overlay #panel-body .contact-identity { padding:40px 16px 4px; background:transparent; }
html:root.native-mobile body #overlay #panel-body .contact-identity > .avatar { display:grid; place-items:center; width:116px; height:116px; margin:0 auto 16px; border-radius:50%; font-size:44px; overflow:hidden; }
html:root.native-mobile body #overlay #panel-body .contact-identity > .avatar img { width:100%; height:100%; object-fit:cover; }
html:root.native-mobile body #overlay #panel-body .contact-identity h2 { font-size:29px; font-weight:650 !important; line-height:1.2; letter-spacing:-.6px; }
html:root.native-mobile body #overlay #panel-body .contact-identity p { margin:6px 0 24px; color:var(--contact-muted); font-size:17px; }
html:root.native-mobile body #overlay #panel-body .contact-about { display:block; width:fit-content; max-width:90%; margin:0 auto 10px; padding:10px 24px; border-radius:24px; background:var(--contact-card); font-size:15px; color:var(--contact-ink); }
html:root.native-mobile body #overlay #panel-body .contact-primary-actions { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
html:root.native-mobile body #overlay #panel-body .contact-primary-actions button { min-height:74px; border-radius:24px; background:var(--contact-card); color:var(--contact-ink); font-size:15px; padding:12px 4px; gap:6px; }
html:root.native-mobile body #overlay #panel-body .contact-primary-actions svg { width:25px; height:25px; }
html:root.native-mobile body #mobile-contact-content { padding:0 16px; }
html:root.native-mobile body #overlay #panel-body .mobile-contact-profile .contact-section { margin-top:18px; padding:0 18px; border-radius:24px; background:var(--contact-card); }
html:root.native-mobile body #overlay #panel-body .mobile-contact-profile .contact-profile-row { min-height:52px; gap:14px; padding:13px 0; border-color:var(--contact-line); color:var(--contact-ink); }
html:root.native-mobile body #overlay #panel-body .mobile-contact-profile .contact-profile-row > svg { width:23px; height:23px; flex-basis:23px; }
html:root.native-mobile body #overlay #panel-body .mobile-contact-profile .contact-profile-row > svg:last-child { width:16px; height:16px; flex-basis:16px; color:var(--contact-muted); }
html:root.native-mobile body #overlay #panel-body .contact-profile-row em { font-style:normal; font-size:15px; color:var(--contact-muted); max-width:35%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html:root.native-mobile body #overlay #panel-body .mobile-contact-profile .contact-profile-row small { color:var(--contact-muted); font-size:13px; }
html:root.native-mobile body #overlay #panel-body .contact-link-section .contact-profile-row { color:#149d54; }
html:root.native-mobile body #overlay #panel-body .contact-link-section .contact-profile-row > svg { display:none; }
html:root.native-mobile body #overlay #panel-body .mobile-contact-profile .contact-destructive { color:#ef455d !important; }
html:root.native-mobile body #overlay #panel-body .contact-call-summary { padding:14px 18px 18px !important; }
html:root.native-mobile body #overlay #panel-body .contact-call-summary h3 { font-size:17px; font-weight:400; margin:0 0 10px; }
html:root.native-mobile body #overlay #panel-body .contact-call-summary > div { display:flex; align-items:flex-start; gap:14px; font-size:14px; }
html:root.native-mobile body #overlay #panel-body .contact-call-summary time { color:var(--contact-muted); flex-shrink:0; padding-top:2px; }
html:root.native-mobile body #overlay #panel-body .contact-call-summary span { display:grid; grid-template-columns:16px minmax(0,1fr); gap:5px 6px; }
html:root.native-mobile body #overlay #panel-body .contact-call-summary svg { width:16px; height:16px; margin-top:2px; }
html:root.native-mobile body #overlay #panel-body .contact-call-summary b { font-weight:400; }
html:root.native-mobile body #overlay #panel-body .contact-call-summary small { grid-column:2; color:var(--contact-muted); font-size:13px; }
html:root.native-mobile body #overlay #panel-body .contact-groups-heading { margin:28px 18px 0; font-size:19px; font-weight:600; }
html:root.native-mobile body #overlay #panel-body .contact-subpage .contact-identity { display:none; }
html:root.native-mobile body #overlay #panel-body .contact-subpage-title { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
html:root.native-mobile body #overlay #panel-body .mobile-contact-profile :is(.contact-edit,.contact-storage) { background:var(--contact-card); color:var(--contact-ink); }
html:root.native-mobile body #overlay #panel-body .mobile-contact-profile :is(input,textarea,select) { font-size:16px; color:var(--contact-ink); background:var(--contact-bg); border-color:var(--contact-line); }
html:root.native-mobile body #overlay #panel-body .contact-storage { padding:16px 18px !important; }
html:root.native-mobile body #overlay #panel-body .contact-storage p { overflow-wrap:anywhere; color:var(--contact-muted); }
html:root.native-mobile body #overlay #panel-body .contact-security { color:var(--contact-muted); }
html:root.native-mobile body #overlay #panel-body .mobile-contact-profile button:focus-visible { outline:2px solid #149d54; outline-offset:2px; }