/* V309 — Legacy mobile dock copied from the actual V258 mobile account bar. IMPORTANT: every selector is scoped to mobile + data-mobile-dock-position="legacy". Top/Bottom docks and all other V258 behavior are intentionally untouched. */ @media (max-width: 640px) { body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #appSection > .card.account-bar, body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #appSection > .card.account-bar.account-bar-stacked, body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #appSection > .card.account-bar.account-bar-stacked-mobile { display: flex !important; position: relative !important; flex-flow: row nowrap !important; align-items: center !important; justify-content: center !important; grid-template-columns: none !important; grid-template-rows: none !important; column-gap: 0 !important; row-gap: 0 !important; width: 100% !important; min-height: 72px !important; height: auto !important; margin-top: 16px !important; padding: 9px 11px !important; border-radius: 9999px !important; overflow: hidden !important; /* Exact V258 glass-card surface, rather than the V308 recreation. */ background: linear-gradient( 145deg, var(--glass-highlight-soft) 0%, transparent 32%, transparent 70%, rgba(0, 0, 0, 0.025) 100% ), var(--glass-card) !important; border: 1px solid var(--glass-border) !important; box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 var(--glass-border-soft), 0 18px 52px var(--glass-shadow), 0 3px 10px rgba(0, 0, 0, 0.055) !important; -webkit-backdrop-filter: blur(var(--glass-blur)) contrast(1.03) brightness(1.03) !important; backdrop-filter: blur(var(--glass-blur)) contrast(1.03) brightness(1.03) !important; } /* V258 authenticated bar was buttons-only. */ body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #authenticatedAccountIdentity, body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #authenticatedAccountIdentity:not(.hidden):not([hidden]) { display: none !important; visibility: hidden !important; pointer-events: none !important; } body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #authenticatedAccountButtons:not(.hidden):not([hidden]), body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] .card.account-bar #authenticatedAccountButtons:not(.hidden):not([hidden]), body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] .card.account-bar.account-bar-stacked #authenticatedAccountButtons:not(.hidden):not([hidden]), body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] .card.account-bar.account-bar-stacked-mobile #authenticatedAccountButtons:not(.hidden):not([hidden]) { display: flex !important; flex: 1 1 auto !important; flex-flow: row nowrap !important; grid-column: auto !important; grid-row: auto !important; align-items: center !important; align-self: center !important; justify-content: space-between !important; justify-self: stretch !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; overflow: visible !important; visibility: visible !important; pointer-events: auto !important; } body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #authenticatedAccountButtons > button, body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] .card.account-bar #authenticatedAccountButtons > button { display: inline-flex !important; flex: 0 0 52px !important; align-items: center !important; justify-content: center !important; width: 52px !important; min-width: 52px !important; max-width: 52px !important; height: 52px !important; min-height: 52px !important; max-height: 52px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; } /* Exact V258 mobile optical SVG sizing. */ body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #authenticatedAccountButtons #profileButton .account-nav-icon { width: 26px !important; height: 26px !important; flex-basis: 26px !important; stroke-width: 1.75 !important; } body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #authenticatedAccountButtons #searchButton .account-nav-icon { width: 33px !important; height: 33px !important; flex-basis: 33px !important; stroke-width: 1.4 !important; } body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #authenticatedAccountButtons #directMessagesButton .account-nav-icon { width: 32px !important; height: 32px !important; flex-basis: 32px !important; stroke-width: 1.45 !important; } body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #authenticatedAccountButtons #notificationsButton .account-nav-icon { width: 34px !important; height: 34px !important; flex-basis: 34px !important; stroke-width: 1.35 !important; } body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #authenticatedAccountButtons #settingsButton .account-nav-icon { width: 30px !important; height: 30px !important; flex-basis: 30px !important; stroke-width: 1.55 !important; } body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #authenticatedAccountButtons #dmUnreadBadge, body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #authenticatedAccountButtons #notificationUnreadBadge { top: -4px !important; right: -4px !important; left: auto !important; bottom: auto !important; min-width: 16px !important; width: auto !important; height: 16px !important; min-height: 16px !important; padding: 0 4px !important; border-radius: 999px !important; font-size: 8px !important; line-height: 1 !important; } } @media (max-width: 360px) { body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #appSection > .card.account-bar, body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #appSection > .card.account-bar.account-bar-stacked, body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #appSection > .card.account-bar.account-bar-stacked-mobile { min-height: 68px !important; padding-inline: 8px !important; } body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #authenticatedAccountButtons:not(.hidden):not([hidden]), body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] .card.account-bar #authenticatedAccountButtons:not(.hidden):not([hidden]) { gap: 6px !important; } body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #authenticatedAccountButtons > button, body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] .card.account-bar #authenticatedAccountButtons > button { flex-basis: 48px !important; width: 48px !important; min-width: 48px !important; max-width: 48px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; } }