/* V310 — Legacy means the ORIGINAL account bar, not a recreation. The modern mobile dock stylesheet hides the old .card.account-bar on phones. In Legacy only, resurrect that exact existing element and restore the exact V258 account-bar/card cascade, including its rail hover/tap highlight. Top/Bottom are intentionally untouched. */ @media (max-width: 700px) { 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; visibility: visible !important; pointer-events: auto !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: 16px 0 0 !important; padding: 9px 11px !important; box-sizing: border-box !important; border-radius: 9999px !important; overflow: hidden !important; /* Exact original V258 card/account-bar surface. */ background: linear-gradient( 105deg, var(--glass-highlight-soft) 0%, transparent 24%, transparent 72%, var(--glass-highlight-soft) 100% ), var(--glass-card-strong) !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 14px 42px var(--glass-shadow) !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; transition: transform 220ms var(--glass-ease), box-shadow 280ms var(--glass-ease), border-color 220ms ease, background 280ms ease, color 220ms ease !important; } body[data-theme="dark"][data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #appSection > .card.account-bar { -webkit-backdrop-filter: blur(var(--glass-blur)) contrast(1.06) brightness(0.92) !important; backdrop-filter: blur(var(--glass-blur)) contrast(1.06) brightness(0.92) !important; } /* Exact original .card:hover response. On iOS, tapping the empty rail can enter the same hover state; this intentionally mirrors desktop behavior. */ body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #appSection > .card.account-bar:hover { border-color: var(--glass-highlight) !important; box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 var(--glass-border-soft), 0 23px 62px var(--glass-shadow-deep), 0 5px 14px rgba(0, 0, 0, 0.07) !important; } /* V258 authenticated bar: 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: 0 0 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: center !important; justify-self: center !important; width: max-content !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; gap: 8px !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; overflow: hidden !important; line-height: normal !important; } /* Preserve the actual SVG icons already used by the original bar. */ body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #authenticatedAccountButtons > button::before { content: none !important; display: none !important; } body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #authenticatedAccountButtons > button .account-button-label { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } } /* Exact V258 phone distribution and optical SVG sizes. */ @media (max-width: 640px) { 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]) { flex: 1 1 auto !important; justify-content: space-between !important; justify-self: stretch !important; width: 100% !important; max-width: none !important; gap: 0 !important; } 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; } } @media (max-width: 360px) { body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #appSection > .card.account-bar { 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; } } /* v3.25 — Legacy mobile story rail spacing. The story module contributes its own mobile margins, while the original account bar also had a 16px top margin. In Legacy that stacked into a large empty band. Keep modern Top/Bottom dock modes untouched. */ @media (max-width: 700px) { body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #storyRail { margin: 4px 0 4px !important; } body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #storyRail .story-people { padding-top: 4px !important; padding-bottom: 2px !important; } 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 { margin-top: 6px !important; } }