/* Calls and Updates: mobile-only authority, after the conversation stylesheet. */
html:root.native-mobile { --page-bg:#fff; --page-ink:#101313; --page-muted:#6d7271; --page-soft:#f5f5f5; --page-search:#e8e8e9; --page-line:#e5e7e6; }
html:root.native-mobile[data-theme="dark"] { --page-bg:#101b22; --page-ink:#f4f6f5; --page-muted:#a5b3bb; --page-soft:#202d35; --page-search:#25333c; --page-line:#2b3941; }
html:root.native-mobile body #overlay:is([data-panel="calls"],[data-panel="status"]) { background:var(--page-bg); }
html:root.native-mobile body #overlay:is([data-panel="calls"],[data-panel="status"]) .panel { background:var(--page-bg); color:var(--page-ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
html:root.native-mobile body #overlay:is([data-panel="calls"],[data-panel="status"]) .panel > header { display:none !important; }
html:root.native-mobile body #overlay:is([data-panel="calls"],[data-panel="status"]) #panel-body { padding:0 !important; overflow-y:auto; }
html:root.native-mobile body #overlay:is([data-panel="calls"],[data-panel="status"]) .panel-content { background:var(--page-bg); color:var(--page-ink); }
html:root.native-mobile body #overlay:is([data-panel="calls"],[data-panel="status"]) button { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
html:root.native-mobile body #overlay:is([data-panel="calls"],[data-panel="status"]) button:focus-visible { outline:2px solid #6d28d9; outline-offset:2px; }
html:root.native-mobile body #overlay[data-panel="calls"] .whatsapp-calls-page { display:block; min-height:100%; padding:0; }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-directory { position:relative; overflow:visible; padding:18px 20px 24px; border:0; background:var(--page-bg); }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-directory-header { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 10px; min-height:0; }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-directory-header h2 { display:block !important; grid-column:1/-1; grid-row:2; font-size:34px; line-height:1.15; font-weight:750; letter-spacing:-1.2px; }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-directory-header-actions { justify-self:end; grid-column:2; grid-row:1; }
html:root.native-mobile body #overlay[data-panel="calls"] #calls-page-more,
html:root.native-mobile body #overlay[data-panel="status"] #status-page-more { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--page-line); border-radius:50%; padding:0; background:var(--page-bg); color:var(--page-ink); }
html:root.native-mobile body #overlay[data-panel="calls"] #new-call-shortcut { display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; padding:0; background:var(--page-ink); color:var(--page-bg); }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-directory-header button svg { width:25px; height:25px; margin:0; }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-search,
html:root.native-mobile body #overlay[data-panel="status"] .mobile-updates-search { display:flex; align-items:center; gap:8px; height:44px; margin:0; padding:0 12px; border:0; border-radius:24px; background:var(--page-search); color:var(--page-ink); }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-search input,
html:root.native-mobile body #overlay[data-panel="status"] .mobile-updates-search input { flex:1; min-width:0; width:100%; height:44px; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; font-size:16px !important; color:var(--page-ink); }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-search input::placeholder,
html:root.native-mobile body #overlay[data-panel="status"] .mobile-updates-search input::placeholder { color:var(--page-muted); opacity:1; }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-search > svg,
html:root.native-mobile body #overlay[data-panel="status"] .mobile-updates-search > svg { width:20px; height:20px; flex-shrink:0; }
html:root.native-mobile body #overlay[data-panel="calls"] .mobile-call-strip { display:flex; gap:16px; overflow-x:auto; margin:20px -20px 14px; padding:0 20px 8px; scrollbar-width:none; }
html:root.native-mobile body #overlay[data-panel="calls"] .mobile-call-shortcuts { display:flex; flex:0 0 auto; gap:16px; margin:0; }
html:root.native-mobile body #overlay[data-panel="calls"] .mobile-favorites-controls { display:none; }
html:root.native-mobile body #overlay[data-panel="calls"] .mobile-call-options { position:absolute; top:70px; left:20px; z-index:10; display:grid; min-width:210px; padding:6px; border:1px solid var(--page-line); border-radius:18px; background:var(--page-bg); box-shadow:0 8px 24px #0002; }
html:root.native-mobile body #overlay[data-panel="calls"] .mobile-call-options button { width:100%; min-height:44px; padding:12px; border-radius:12px; background:transparent; color:var(--page-ink); text-align:left; font-size:15px; }
html:root.native-mobile body #overlay[data-panel="calls"] .mobile-call-shortcuts > button,
html:root.native-mobile body #overlay[data-panel="calls"] .call-add-favorite { display:grid; justify-items:center; align-content:start; gap:8px; flex:0 0 66px; width:66px; padding:0; border:0; background:transparent; color:var(--page-ink); }
html:root.native-mobile body #overlay[data-panel="calls"] .mobile-call-shortcuts > button > span,
html:root.native-mobile body #overlay[data-panel="calls"] .call-add-favorite > svg { display:grid; place-items:center; width:58px; height:58px; padding:17px; border-radius:50%; background:var(--page-soft); }
html:root.native-mobile body #overlay[data-panel="calls"] .mobile-call-shortcuts svg { width:24px; height:24px; }
html:root.native-mobile body #overlay[data-panel="calls"] .mobile-call-shortcuts small,
html:root.native-mobile body #overlay[data-panel="calls"] .call-favorite-shortcut > span:last-child,
html:root.native-mobile body #overlay[data-panel="calls"] .call-add-favorite > span { font-size:12px; line-height:1.2; color:var(--page-muted); }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-section { margin:22px 0 0; }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-section-title { display:flex; justify-content:space-between; align-items:center; min-height:44px; margin:0 0 4px; }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-section-title h3 { color:var(--page-ink); font-size:21px; font-weight:700; letter-spacing:-.45px; margin:0; }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-section-title > button { min-height:44px; padding:0 8px; border:0; border-radius:18px; color:var(--page-muted); background:transparent; font-size:14px; }
html:root.native-mobile body #overlay[data-panel="calls"] #call-favorites { display:flex; flex:0 0 auto; gap:16px; overflow:visible; padding:0; }
html:root.native-mobile body #overlay[data-panel="calls"] #call-favorites .call-contact-row { flex:0 0 66px; width:66px; min-height:0; display:block; padding:0; border:0; background:transparent; }
html:root.native-mobile body #overlay[data-panel="calls"] #call-favorites .call-contact-row > :is(span,strong) { display:none; }
html:root.native-mobile body #overlay[data-panel="calls"] #call-favorites .call-contact-row > div { display:block; }
html:root.native-mobile body #overlay[data-panel="calls"] #call-favorites .call-favorite-shortcut { display:grid; justify-items:center; gap:8px; width:66px; height:auto; border-radius:0; padding:0; background:transparent; }
html:root.native-mobile body #overlay[data-panel="calls"] .call-favorite-shortcut > span:last-child { width:66px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
html:root.native-mobile body #overlay[data-panel="calls"] #call-favorites .call-avatar { width:58px; height:58px; background:#6554b8; color:#fff; }
html:root.native-mobile body #overlay[data-panel="calls"] .call-history-row { display:flex; align-items:center; gap:12px; min-height:64px; padding:8px 0; border:0; border-radius:0 !important; box-shadow:none; background:transparent !important; }
html:root.native-mobile body #overlay[data-panel="calls"] .call-history-row + .call-history-row { border-top:1px solid var(--page-line); }
html:root.native-mobile body #overlay[data-panel="calls"] .call-history-row > .call-avatar { flex:0 0 40px; width:40px; height:40px; font-size:14px; background:#6554b8; color:#fff; }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-history-detail { display:grid; gap:2px; min-width:0; flex:1; }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-history-detail strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--page-ink); font-size:16px; line-height:1.25; font-weight:500; }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-history-detail small { display:flex; gap:3px; align-items:center; font-size:13px; color:var(--page-muted); line-height:1.2; }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-history-detail svg { width:14px; height:14px; }
html:root.native-mobile body #overlay[data-panel="calls"] .call-missed strong { color:#d52346; }
html:root.native-mobile body #overlay[data-panel="calls"] .call-history-row > time { max-width:75px; flex-shrink:0; font-size:12px; color:var(--page-muted); }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-record-actions { display:block; width:36px; flex:0 0 36px; }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-record-actions > button { display:grid; place-items:center; width:44px; height:44px; margin-left:-4px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--page-ink); }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-record-actions svg { width:23px; height:23px; }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-launchpad { min-height:0; padding:0 20px; background:var(--page-bg); }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-launchpad-grid,
html:root.native-mobile body #overlay[data-panel="calls"] .calls-security { display:none; }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-record-detail { position:fixed; inset:0 0 calc(86px + env(safe-area-inset-bottom)); z-index:8; min-height:0; overflow-y:auto; padding:18px 20px; background:var(--page-bg); text-align:center; }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-record-detail header { display:flex; align-items:center; gap:12px; margin-bottom:28px; text-align:left; }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-record-detail header h2 { margin:0; font-size:24px; }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-record-detail header button { display:grid; width:44px; height:44px; padding:0; place-items:center; background:var(--page-soft); color:var(--page-ink); border-radius:50%; }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-record-detail > .call-avatar { width:72px; height:72px; margin:auto; background:#6554b8; color:#fff; }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-record-detail h3 { margin:16px 0 8px; font-size:24px; }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-record-detail :is(p,time) { color:var(--page-muted); }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-record-detail > div { display:grid; gap:12px; margin:28px 0; }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-record-detail > div button { display:flex; align-items:center; gap:12px; padding:14px; border-radius:14px; color:var(--page-ink); background:var(--page-soft); }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-record-detail [data-delete-call] { color:#d52346; }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-schedule-panel { position:fixed; inset:12px 12px calc(86px + env(safe-area-inset-bottom)); width:auto; max-height:none; overflow-y:auto; background:var(--page-bg); color:var(--page-ink); border:1px solid var(--page-line); border-radius:20px; }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-schedule-panel :is(input,textarea,select) { color:var(--page-ink); }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-schedule-panel :is(label,p) { color:var(--page-muted); }
html:root.native-mobile body #overlay[data-panel="status"] .whatsapp-status-page { min-height:100%; padding:0; }
html:root.native-mobile body #overlay[data-panel="status"] .status-home { min-height:100%; padding:18px 20px 30px; }
html:root.native-mobile body #overlay[data-panel="status"] .mobile-updates-heading h2 { margin:18px 0 10px; font-size:34px; line-height:1.15; font-weight:750; letter-spacing:-1.2px; }
html:root.native-mobile body #overlay[data-panel="status"] .mobile-status-title,
html:root.native-mobile body #overlay[data-panel="status"] .mobile-updates-discovery > header { display:flex; align-items:center; justify-content:space-between; margin:20px 0 12px; }
html:root.native-mobile body #overlay[data-panel="status"] :is(.mobile-status-title,.mobile-updates-discovery) h3 { font-size:22px; margin:0; font-weight:700; letter-spacing:-.5px; }
html:root.native-mobile body #overlay[data-panel="status"] .mobile-status-title > div { display:flex; gap:4px; }
html:root.native-mobile body #overlay[data-panel="status"] .mobile-status-title button { display:grid; place-items:center; width:44px; height:44px; padding:0; border-radius:50%; background:var(--page-soft); color:var(--page-ink); }
html:root.native-mobile body #overlay[data-panel="status"] .mobile-status-title svg { width:20px; height:20px; }
html:root.native-mobile body #overlay[data-panel="status"] .status-directory { display:block; min-height:0; border:0; background:transparent; }
html:root.native-mobile body #overlay[data-panel="status"] .status-people { display:flex; gap:8px; overflow-x:auto; overflow-y:visible; margin:0 -20px; padding:0 20px 8px; border:0; background:transparent; scrollbar-width:none; scroll-snap-type:x proximity; }
html:root.native-mobile body #overlay[data-panel="status"] .status-my-slot,
html:root.native-mobile body #overlay[data-panel="status"] .mobile-status-story { position:relative; flex:0 0 116px; width:116px; height:194px; scroll-snap-align:start; }
html:root.native-mobile body #overlay[data-panel="status"] .status-create-anchor { height:100%; }
html:root.native-mobile body #overlay[data-panel="status"] .my-status-row { display:flex; flex-direction:column; align-items:center; justify-content:space-between; width:100%; height:194px; padding:26px 8px 12px; border:1px solid var(--page-line); border-radius:18px; background:var(--page-soft); color:var(--page-ink); }
html:root.native-mobile body #overlay[data-panel="status"] .my-status-avatar { position:relative; display:grid; place-items:center; width:58px; height:58px; margin:0; border-radius:50%; background:#6554b8; color:#fff; font-size:20px; }
html:root.native-mobile body #overlay[data-panel="status"] .my-status-avatar i { position:absolute; right:-3px; bottom:-3px; display:grid; place-items:center; width:24px; height:24px; border:2px solid var(--page-soft); border-radius:50%; background:var(--page-ink); color:var(--page-bg); font-style:normal; }
html:root.native-mobile body #overlay[data-panel="status"] .my-status-row b { font-size:13px; text-align:center; font-weight:600; }
html:root.native-mobile body #overlay[data-panel="status"] .my-status-row :is(small,em) { display:none; }
html:root.native-mobile body #overlay[data-panel="status"] .mobile-status-story { display:block; min-height:0; margin:0; padding:0; overflow:hidden; border:0; border-radius:18px; background:var(--story-bg); color:white; }
html:root.native-mobile body #overlay[data-panel="status"] .status-story-preview { position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(transparent 40%,#0008); }
html:root.native-mobile body #overlay[data-panel="status"] .status-story-preview :is(img,video) { width:100%; height:100%; object-fit:cover; }
html:root.native-mobile body #overlay[data-panel="status"] .status-card-snippet { padding:44px 10px 34px; font-size:14px; line-height:1.3; font-weight:600; overflow-wrap:anywhere; }
html:root.native-mobile body #overlay[data-panel="status"] .mobile-status-story .status-avatar-ring { position:absolute; left:8px; top:8px; display:grid; place-items:center; width:42px; height:42px; padding:2px; border:2px solid #29be7b; border-radius:50%; background:var(--story-bg); }
html:root.native-mobile body #overlay[data-panel="status"] .mobile-status-story .status-avatar-ring i { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#fff; color:#252830; font-size:13px; font-style:normal; }
html:root.native-mobile body #overlay[data-panel="status"] .status-story-name { position:absolute; inset:auto 0 0; display:block; padding:20px 8px 12px; background:linear-gradient(transparent,#0009); text-align:left; }
html:root.native-mobile body #overlay[data-panel="status"] .status-story-name strong { display:block; font-size:13px; line-height:1.2; color:white; }
html:root.native-mobile body #overlay[data-panel="status"] .status-story-name small { display:none; }
html:root.native-mobile body #overlay[data-panel="status"] .status-viewer.empty { display:none; }
html:root.native-mobile body #overlay[data-panel="status"] .status-home:has(.status-viewer.active) > :not(#status-list),
html:root.native-mobile body #overlay[data-panel="status"] .status-home:has(.status-viewer.active) .status-people { display:none; }
html:root.native-mobile body #overlay[data-panel="status"] .status-home:has(.status-viewer.active) { padding:0; }
html:root.native-mobile body #overlay[data-panel="status"] .status-viewer.active { position:relative; display:block; min-height:100dvh; padding:0; }
html:root.native-mobile body #overlay[data-panel="status"] .status-viewer.active .status-card { position:relative; display:grid; align-content:center; min-height:100dvh; width:100%; max-width:none; padding:130px 24px 70px; margin:0; border:0; border-radius:0; background:var(--status) !important; color:var(--status-text-color); }
html:root.native-mobile body #overlay[data-panel="status"] .status-viewer.active .status-card-header { position:absolute; top:76px; left:20px; right:20px; width:auto; padding:0; background:transparent; }
html:root.native-mobile body #overlay[data-panel="status"] .status-viewer.active .status-card p { margin:0; padding:20px; color:var(--status-text-color); text-align:center; font-size:28px; line-height:1.3; overflow-wrap:anywhere; }
html:root.native-mobile body #overlay[data-panel="status"] .status-viewer-controls { position:absolute; top:18px; left:auto; right:76px; transform:none; }
html:root.native-mobile body #overlay[data-panel="status"] .status-view-count { display:none; }
html:root.native-mobile body #overlay[data-panel="status"] .status-home.composing > :not(#status-create-anchor) { display:none; }
html:root.native-mobile body #overlay[data-panel="status"] .status-create-menu { position:fixed; top:auto; bottom:calc(86px + env(safe-area-inset-bottom)); left:20px; right:20px; width:auto; border:1px solid var(--page-line); background:var(--page-bg); box-shadow:0 8px 30px #0002; }
html:root.native-mobile body #overlay[data-panel="status"] .status-create-menu button { color:var(--page-ink); }
html:root.native-mobile body #overlay[data-panel="status"] .mobile-updates-discovery { margin-top:34px; }
html:root.native-mobile body #overlay[data-panel="status"] #status-explore-hub { min-height:44px; padding:0 14px; border-radius:22px; background:var(--page-soft); color:var(--page-ink); font-size:14px; font-weight:600; }
html:root.native-mobile body #overlay[data-panel="status"] #status-open-hub { display:flex; align-items:center; gap:14px; width:100%; min-height:78px; padding:12px 0; border-radius:0; border-bottom:1px solid var(--page-line); background:transparent; color:var(--page-ink); text-align:left; }
html:root.native-mobile body #overlay[data-panel="status"] #status-open-hub > .earth-3d { flex-shrink:0; width:52px; height:52px; }
html:root.native-mobile body #overlay[data-panel="status"] #status-open-hub > span:not(.earth-3d) { display:grid; gap:5px; flex:1; }
html:root.native-mobile body #overlay[data-panel="status"] #status-open-hub strong { font-size:16px; }
html:root.native-mobile body #overlay[data-panel="status"] #status-open-hub small { font-size:14px; line-height:1.4; color:var(--page-muted); }
html:root.native-mobile body #overlay[data-panel="status"] #status-search-empty { color:var(--page-muted); font-size:14px; }
/* Legacy heading reset uses !important; restore the reference hierarchy here. */
html:root.native-mobile body #overlay[data-panel="calls"] .calls-directory-header h2,
html:root.native-mobile body #overlay[data-panel="status"] .mobile-updates-heading h2 { font-weight:750 !important; }
html:root.native-mobile body #overlay[data-panel="calls"] .calls-section-title h3,
html:root.native-mobile body #overlay[data-panel="status"] :is(.mobile-status-title,.mobile-updates-discovery) h3 { font-weight:700 !important; }
html:root.native-mobile body #overlay[data-panel="status"] .status-people { scroll-padding-inline:20px; }
@media(max-width:760px) {
  html:root.native-mobile body:has(#overlay.navigation-view:not(.hidden)) #app:has(#sidebar:not(.open)) #native-mobile-nav { display:grid !important; }
  html:root.native-mobile body #native-mobile-nav { left:16px !important; right:16px !important; bottom:calc(8px + env(safe-area-inset-bottom)) !important; width:auto !important; height:64px !important; min-height:64px !important; padding:4px !important; gap:0; border:1px solid var(--page-line); border-radius:34px; background:var(--page-bg); box-shadow:0 3px 18px #0000000d; }
  html:root.native-mobile body #native-mobile-nav > button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; height:54px; min-height:54px; margin:0; padding:4px 0 !important; border-radius:28px; color:var(--page-ink); background:transparent; }
  html:root.native-mobile body #native-mobile-nav > button.active { color:var(--page-ink); background:var(--page-search); }
  html:root.native-mobile body #native-mobile-nav > button > span { display:grid; place-items:center; width:28px; height:28px; margin:0; }
  html:root.native-mobile body #native-mobile-nav svg { width:24px; height:24px; }
  html:root.native-mobile body #native-mobile-nav small { font-size:10px; line-height:1.2; font-weight:500; }
  html:root.native-mobile body #native-mobile-nav .earth-3d-mobile { width:26px; height:26px; }
  html:root.native-mobile body #overlay:is([data-panel="calls"],[data-panel="status"]) { bottom:0 !important; }
  html:root.native-mobile body #overlay:is([data-panel="calls"],[data-panel="status"]) #panel-body { padding-bottom:calc(86px + env(safe-area-inset-bottom)) !important; }
  html:root.native-mobile body:has(#overlay[data-panel="status"] :is(.status-viewer.active,#status-form:not(.hidden))) #app:has(#sidebar:not(.open)) #native-mobile-nav { display:none !important; }
  html:root.native-mobile body #overlay[data-panel="status"]:has(:is(.status-viewer.active,#status-form:not(.hidden))) #panel-body { padding-bottom:0 !important; }
  html:root.native-mobile body #overlay[data-panel="status"] #status-form:not(.hidden) { min-height:100dvh; height:100dvh; padding-bottom:env(safe-area-inset-bottom); }
}