/* Shared theme, typography, layout and navigation. Loaded after page styles. */
body[data-app-ui] .points-total {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
    border-radius: 999px; background: var(--ui-accent-soft); color: var(--ui-accent);
    font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums;
}
body[data-app-ui] .points-total svg { flex: 0 0 16px; }
:root {
    --ui-mobile-page-gutter: 10px;
    --ui-content-max-width: 1020px;
    --ui-content-gutter: clamp(20px, 4vw, 64px);
    --ui-accent: #2e855d;
    --ui-accent-rgb: 46, 133, 93;
    --ui-accent-fill: #2e855d;
    --ui-accent-hover: #287851;
    --ui-accent-soft: rgba(var(--ui-accent-rgb), .10);
    --secondary-color: var(--ui-accent);
    --ui-menu-radius: 16px;
    --ui-mobile-nav-shadow: 0 8px 24px rgb(0 0 0 / 8%), 0 2px 6px rgb(0 0 0 / 4%);
    --ui-danger: #c53d46;
    --ui-sidebar-width: 0px;
    --ui-main-bg-rgb: 255, 255, 255;
    --ui-scrollbar-thumb: #9ca3af;
    --ui-scrollbar-hover: #6b7280;
    --primary-color: #000;
    --main-bg: #fff;
    --main-text: #111827;
    --secondary-bg: #f9fafb;
    --border-color: #e5e7eb;
    --muted-text: #6b7280;
    --card-hover: #f3f4f6;
    --accent-bg: var(--ui-accent-fill);
    --accent-text: #fff;
    --search-bg: #f3f4f6;
    --icon-bg: #fff;
    --nav-active-bg: #f3f4f6;
    --comm-card-bg: #fff;
    --comm-card-text: #111827;
    --comm-card-muted: #6b7280;
    --comm-card-hover: #f9fafb;
    --comm-card-border: #e5e7eb;
    --comm-card-hover-border: #d1d5db;
    --badge-bg: rgb(0 0 0 / 5%);
    --badge-text: #4b5563;
    --offer-badge-bg: #ecfdf5;
    --offer-badge-text: #065f46;
    --request-badge-bg: var(--ui-accent-soft);
    --request-badge-text: var(--ui-accent);
}
:root.dark, body.dark {
    --ui-mobile-nav-shadow: 0 8px 28px rgb(0 0 0 / 28%), 0 2px 8px rgb(0 0 0 / 16%);
    --ui-accent: #7ace9f;
    --ui-danger: #e7767d;
    --ui-accent-rgb: 122, 206, 159;
    --ui-accent-soft: rgba(var(--ui-accent-rgb), .12);
    --ui-main-bg-rgb: 10, 10, 10;
    --ui-scrollbar-thumb: #606772;
    --ui-scrollbar-hover: #9ca3af;
    --primary-color: #fff;
    --main-bg: #0a0a0a;
    --main-text: #f3f4f6;
    --secondary-bg: #141414;
    --border-color: #303030;
    --muted-text: #9ca3af;
    --card-hover: #202020;
    --accent-bg: var(--ui-accent-fill);
    --accent-text: #fff;
    --search-bg: #1a1a1a;
    --icon-bg: #141414;
    --nav-active-bg: #202020;
    --comm-card-bg: #121212;
    --comm-card-text: #f3f4f6;
    --comm-card-muted: #9ca3af;
    --comm-card-hover: #1a1a1a;
    --comm-card-border: #303030;
    --comm-card-hover-border: #4b5563;
    --badge-bg: rgb(255 255 255 / 10%);
    --badge-text: #d1d5db;
    --offer-badge-bg: #064e3b;
    --offer-badge-text: #a7f3d0;
    --request-badge-bg: var(--ui-accent-soft);
    --request-badge-text: var(--ui-accent);
}
html { scrollbar-gutter: stable; }
/* Apply the same scroll controls to pages, sidebars, chats and lists. */
html, body[data-app-ui], body[data-app-ui] * {
    scrollbar-width: thin;
    scrollbar-color: var(--ui-scrollbar-thumb) var(--secondary-bg);
}
@media (forced-colors: none) {
    @supports selector(::-webkit-scrollbar) {
        html, body[data-app-ui], body[data-app-ui] * { scrollbar-width: auto; scrollbar-color: auto; }
        html::-webkit-scrollbar, body[data-app-ui]::-webkit-scrollbar, body[data-app-ui] *::-webkit-scrollbar {
            display: block; width: 10px; height: 10px;
        }
        html::-webkit-scrollbar-track, body[data-app-ui]::-webkit-scrollbar-track, body[data-app-ui] *::-webkit-scrollbar-track {
            background: var(--secondary-bg); border-radius: 999px;
        }
        html::-webkit-scrollbar-thumb, body[data-app-ui]::-webkit-scrollbar-thumb, body[data-app-ui] *::-webkit-scrollbar-thumb {
            background: var(--ui-scrollbar-thumb); background-clip: padding-box;
            border: 2px solid var(--secondary-bg); border-radius: 999px; min-height: 32px;
        }
        html::-webkit-scrollbar-thumb:hover, body[data-app-ui]::-webkit-scrollbar-thumb:hover, body[data-app-ui] *::-webkit-scrollbar-thumb:hover {
            background-color: var(--ui-scrollbar-hover);
        }
        html::-webkit-scrollbar-corner, body[data-app-ui]::-webkit-scrollbar-corner, body[data-app-ui] *::-webkit-scrollbar-corner {
            background: var(--secondary-bg);
        }
    }
}
@media (forced-colors: active) {
    html, body[data-app-ui], body[data-app-ui] * { scrollbar-width: auto; scrollbar-color: auto; }
}
body[data-app-ui] {
    font-family: var(--ui-font) !important;
    font-weight: 400;
    --main-bg-rgb: var(--ui-main-bg-rgb);
    -webkit-font-smoothing: antialiased;
}
body[data-app-shell] { background: var(--main-bg); color: var(--main-text); }
body[data-app-ui].ui-error-page { width: auto; background: var(--main-bg); color: var(--main-text); overflow-wrap: anywhere; }
body[data-app-ui] :where(input, textarea, select, button) { font-family: var(--ui-font) !important; }
body[data-app-ui] :where(input, textarea, select) { font-size: 16px; }
body[data-app-ui] main { min-width: 0; }
body[data-app-ui] main :where(p, h1, h2, h3, a, label) { overflow-wrap: anywhere; }
body[data-app-shell] main { margin-left: 0 !important; margin-right: 0 !important; margin-inline-start: var(--ui-sidebar-width) !important; }
/* Navigation animates only the new main element; the shared bars stay in place. */
html[data-app-managed='true'] body[data-app-shell] main:focus { outline: none; }
html[data-app-loading='true'] { cursor: progress; }
html[data-app-loading='true'] body[data-app-shell] :is(main, .ui-compose-fab, .reply-footer-container, .feed-detail-composer) { pointer-events: none; }
html[data-app-loading='true'] #navbar-container { pointer-events: auto; }
.ui-navigation-error { position: fixed; z-index: 70; inset-inline: max(16px, var(--ui-sidebar-width)); bottom: calc(88px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border: 1px solid var(--border-color); border-radius: 16px; background: var(--secondary-bg); color: var(--main-text); box-shadow: 0 8px 28px rgb(0 0 0 / 12%); }
.ui-navigation-error button { flex-shrink: 0; color: var(--ui-accent); font-weight: 700; }
/* While a page is requested, the chosen tab is selected at once. A thin progress bar appears only when the wait is long
   enough to notice (250 ms), so pages shown from memory never flash it, and never over a skeleton screen. */
html[data-app-loading='true'] #navbar-container :is(.sidebar-item, .bottom-nav a) { transition: none; }
html[data-app-loading='true']::before {
    content: ''; position: fixed; top: env(safe-area-inset-top, 0px); inset-inline: 0; z-index: 2147483647; height: 3px;
    background: var(--ui-accent-fill); transform-origin: left center; pointer-events: none;
    opacity: 0;
    animation: ui-page-progress-reveal .2s ease 250ms forwards, ui-page-progress 10s cubic-bezier(.1, .85, .2, 1) 250ms forwards;
}
html[data-app-instant][data-app-loading='true']::before { display: none; }
@keyframes ui-page-progress-reveal { to { opacity: 1; } }
html[data-app-loading='true'][dir='rtl']::before { transform-origin: right center; }
@keyframes ui-page-progress { from { transform: scaleX(.15); } to { transform: scaleX(.95); } }
@media (prefers-reduced-motion: reduce) { html[data-app-loading='true']::before { animation: ui-page-progress-reveal 0s linear 250ms forwards; transform: scaleX(.6); } }
/* Bottom bar visits on phones: the page content slides toward the tapped item while the top and bottom bars stay still. */
@media (max-width: 767px) {
    html[data-ui-nav-slide] #navbar-container .bottom-nav { view-transition-name: ui-bottom-nav; }
    html[data-ui-nav-slide] #navbar-container .app-mobile-header { view-transition-name: ui-mobile-header; }
}
html[data-ui-nav-slide='forward'] { --ui-nav-slide-in: 100%; --ui-nav-slide-out: -30%; }
html[data-ui-nav-slide='back'] { --ui-nav-slide-in: -100%; --ui-nav-slide-out: 30%; }
html[data-ui-nav-slide]::view-transition-old(root) { animation: ui-nav-slide-out .22s cubic-bezier(.22,1,.36,1) both; }
html[data-ui-nav-slide]::view-transition-new(root) { animation: ui-nav-slide-in .22s cubic-bezier(.22,1,.36,1) both; }
html[data-ui-nav-slide]::view-transition-group(ui-bottom-nav), html[data-ui-nav-slide]::view-transition-group(ui-mobile-header),
html[data-ui-nav-slide]::view-transition-new(ui-bottom-nav), html[data-ui-nav-slide]::view-transition-new(ui-mobile-header) { animation: none; }
html[data-ui-nav-slide]::view-transition-old(ui-bottom-nav), html[data-ui-nav-slide]::view-transition-old(ui-mobile-header) { display: none; }
@keyframes ui-nav-slide-in { from { transform: translateX(var(--ui-nav-slide-in)); } }
@keyframes ui-nav-slide-out { to { transform: translateX(var(--ui-nav-slide-out)); opacity: .5; } }
/* Unloaded page skeletons cover content while shared navigation stays usable. */
.app-shell { display: none; }
@media (min-width: 0px) {
    html[data-app-instant] #navbar-container :is(.bottom-nav, .app-mobile-header, .nav-sidebar) { z-index: 52; }
    .app-shell { display: block; position: fixed; inset: 0; z-index: 51; overflow: hidden; background: var(--main-bg); pointer-events: auto; touch-action: none; }
    .app-shell > span { position: absolute; display: block; background: var(--border-color); animation: app-shell-pulse 1.2s ease-in-out infinite; }
    .app-shell-profile .app-shell-banner { inset: 0 0 auto; height: 184px; border-radius: 0 0 18px 18px; }
    .app-shell-profile .app-shell-sheet { inset: 162px 0 0; border-radius: 22px 22px 0 0; background: var(--main-bg); animation: none; }
    .app-shell-profile .app-shell-round { top: 10px; width: 44px; height: 44px; border-radius: 50%; background: rgba(var(--ui-main-bg-rgb), .78); animation: none; }
    .app-shell-profile .app-shell-back { left: 18px; }
    .app-shell-profile .app-shell-options { right: 18px; }
    .app-shell-profile .app-shell-avatar { top: 115px; inset-inline-start: 10px; width: 94px; height: 94px; box-sizing: border-box; border: 4px solid var(--main-bg); border-radius: 50%; }
    .app-shell-profile .app-shell-stats { top: 177px; inset-inline-end: 10px; display: flex; gap: 2px; width: min(253px, calc(100% - 122px)); height: 46px; background: none; animation: none; }
    .app-shell-profile .app-shell-stats > span { flex: 1; border-radius: 12px; background: var(--border-color); animation: app-shell-pulse 1.2s ease-in-out infinite; }
    .app-shell-profile .app-shell-block { inset-inline-start: 14px; border-radius: 8px; }
    .app-shell-profile .app-shell-name { top: 254px; width: 136px; height: 22px; }
    .app-shell-profile .app-shell-handle { top: 289px; width: 84px; height: 16px; }
    .app-shell-profile .app-shell-points { top: 309px; width: 82px; height: 32px; border-radius: 999px; }
    .app-shell-profile .app-shell-bio { top: 363px; width: 58%; height: 16px; }
    .app-shell-profile .app-shell-meta { top: 405px; width: 46%; height: 20px; }
    .app-shell-profile .app-shell-action { top: 453px; inset-inline: 10px; height: 46px; border-radius: 14px; }
}
@keyframes app-shell-pulse { 50% { opacity: .55; } }
/* Page skeletons (touch layouts): they sit under the top bar, which stays in place, and fade in only after 90 ms so a quick
   page never flashes one. Shapes follow the page type: list with tabs, feed, cards, thread, settings rows, plain page. */
@media (min-width: 0px) {
    .app-shell.app-shell-page { top: calc(64px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; gap: 16px; padding: 22px var(--ui-mobile-page-gutter, 16px); opacity: 0; animation: app-shell-reveal .18s ease 90ms forwards; }
    html[data-app-instant] body[data-mobile-nav-hidden] #navbar-container .bottom-nav { display: none; }
}
@media (min-width: 768px) {
    .app-shell { inset-inline-start: var(--ui-sidebar-width); }
    .app-shell.app-shell-page { top: 0; }
}
[data-skeleton-rows] { display: flex; flex-direction: column; gap: 18px; padding-block: 14px; opacity: 0; animation: app-shell-reveal .18s ease 0s forwards; }
:is(.app-shell-page, [data-skeleton-rows]) :is(.sk-title, .sk-line, .sk-avatar, .sk-card, .sk-pill, .sk-tabs > div, .sk-icon) { background: var(--border-color); animation: app-shell-pulse 1.2s ease-in-out infinite; }
.app-shell-page .sk-title { width: 52%; height: 28px; border-radius: 10px; }
.app-shell-page .sk-tabs { display: flex; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-color); }
.app-shell-page .sk-tabs > div { flex: 1; height: 30px; border-radius: 10px; }
.app-shell-page .sk-segment { display: flex; gap: 4px; height: 48px; padding: 4px; border-radius: 16px; background: var(--secondary-bg); }
.app-shell-page .sk-segment > div { flex: 1; border-radius: 12px; }
.app-shell-page .sk-segment > div:first-child { background: var(--main-bg); box-shadow: 0 1px 3px rgb(0 0 0 / 8%); }
:is(.app-shell-page, [data-skeleton-rows]) .sk-row { display: flex; align-items: flex-start; gap: 12px; }
:is(.app-shell-page, [data-skeleton-rows]) .sk-avatar { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; }
:is(.app-shell-page, [data-skeleton-rows]) .sk-lines { display: flex; flex: 1; flex-direction: column; gap: 10px; padding-top: 4px; }
:is(.app-shell-page, [data-skeleton-rows]) .sk-line { height: 12px; border-radius: 6px; width: 100%; }
:is(.app-shell-page, [data-skeleton-rows]) .sk-short { width: 36%; }
.app-shell-page .sk-medium { width: 72%; }
.app-shell-page .sk-card { height: 140px; border-radius: 22px; }
.app-shell-page .sk-card-tall { height: 220px; }
.app-shell-page .sk-pill { height: 64px; border-radius: 22px; }
.app-shell-page .sk-pill-soft { height: 52px; opacity: .7; }
.app-shell-page .sk-divider { height: 1px; background: var(--border-color); }
.app-shell-page .sk-setting { display: flex; align-items: center; gap: 16px; padding-block: 10px; }
.app-shell-page .sk-icon { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; }
@keyframes app-shell-reveal { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .app-shell > span, .app-shell-profile .app-shell-stats > span, :is(.app-shell-page, [data-skeleton-rows]) :is(.sk-title, .sk-line, .sk-avatar, .sk-card, .sk-pill, .sk-tabs > div, .sk-icon) { animation: none; } }
body[data-app-shell] .reply-footer-container { left: 0; right: 0; inset-inline-start: var(--ui-sidebar-width); }
body[data-app-shell] .reply-input { min-width: 0; }
body[data-app-shell] .reply-bar { background: rgba(var(--ui-main-bg-rgb), .95); }
.text-main { color: var(--main-text); }
.text-muted { color: var(--muted-text); }
.border-main { border-color: var(--border-color); }
.bg-main { background-color: var(--main-bg); }
.bg-secondary { background-color: var(--secondary-bg); }
#navbar-container { direction: inherit; font-family: var(--ui-font); }
#navbar-container, #navbar-container * { box-sizing: border-box; }
#navbar-container :where(a, button, span, h2, div) { font-family: var(--ui-font) !important; letter-spacing: normal !important; }
#navbar-container :where(a, button) { text-decoration: none; }
#navbar-container .nav-sidebar {
    position: fixed; top: 0; bottom: 0; left: auto; right: auto;
    inset-inline-start: 0; width: var(--ui-sidebar-width); padding: 16px;
    display: none; flex-direction: column; z-index: 50;
    background: var(--main-bg); border: 0; border-inline-end: 1px solid var(--border-color);
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    transition: background-color .2s, border-color .2s;
}
#navbar-container .nav-brand {
    display: flex; align-items: center; justify-content: center; min-height: 40px;
    flex: 0 0 auto; padding: 0; margin: 0 0 28px;
}
#navbar-container .nav-brand img { width: 48px; height: 12px; max-width: 100%; flex: 0 1 auto; object-fit: cover; object-position: center; filter: invert(1); mix-blend-mode: multiply; }
:root.dark #navbar-container .nav-brand img { filter: none; mix-blend-mode: screen; }
#navbar-container .nav-brand span { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; white-space: nowrap; }
#navbar-container .sidebar-item {
    display: flex; flex-direction: row; align-items: center; gap: 16px;
    padding: 12px; min-height: 48px; width: 100%; margin: 0;
    border: 0; border-radius: 16px; background: transparent;
    color: var(--muted-text); font-size: 14px; font-weight: 500; line-height: 24px;
    text-align: start; cursor: pointer; flex-shrink: 0;
    transition: color .2s, background-color .2s;
}
#navbar-container .sidebar-item svg { width: 24px; height: 24px; flex: 0 0 24px; }
#navbar-container .sidebar-item > span:not(.nav-notification-icon) { margin: 0; font-size: 14px; font-weight: 500; line-height: 24px; white-space: nowrap; }
#navbar-container .sidebar-item:hover, #navbar-container .sidebar-item.active { background: var(--nav-active-bg); color: var(--main-text); }
#navbar-container .nav-sidebar > nav { display: flex; flex-direction: column; gap: 4px; flex: 1 0 auto; }
#navbar-container .nav-controls { flex-shrink: 0; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-color); }
#navbar-container .app-mobile-header {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; inset-inline: 0; top: 0; height: 64px;
    padding: 0 24px; z-index: 50; background: var(--main-bg);
    border-bottom: 1px solid var(--border-color);
}
#navbar-container #mobile-page-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 28px; text-align: center; }
.ai-assistant-logo { display: block; flex-shrink: 0; aspect-ratio: 1; object-fit: cover; object-position: center 20%; border-radius: 50%; }
#navbar-container #mobile-page-title:has(.ai-mobile-title-icon) { display: inline-flex; align-items: center; gap: 8px; text-transform: none; }
#navbar-container .ai-mobile-title-icon { width: 20px; height: 20px; }
#navbar-container .bottom-nav {
    display: flex; align-items: center; justify-content: space-around;
    position: fixed; inset-inline: 0; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 12px); height: 64px; margin-inline: auto; padding: 8px 10px; z-index: 50;
    background: rgba(var(--ui-main-bg-rgb), .97); opacity: 1; border: 1px solid var(--border-color); border-radius: 999px;
    box-shadow: var(--ui-mobile-nav-shadow);
    /* No backdrop blur: page transitions capture the bar as an image and drop the blur's rounded clip, which flashed a
       rectangular blurred box; a near-opaque fill looks the same and keeps the pill shape in every frame. */
    transition: background-color .2s, border-color .2s, box-shadow .2s;
}
#navbar-container .bottom-nav :where(a, button) {
    display: flex; align-items: center; justify-content: center; flex: 0 0 44px;
    width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 10px; border-radius: 50%;
    color: var(--muted-text); transition: background-color .18s, color .18s, transform .18s;
}
#navbar-container .nav-logout-form { margin: 0; }
#navbar-container .bottom-nav button { border: 0; background: transparent; cursor: pointer; }
#navbar-container .bottom-nav :where(a, button):hover { background: var(--card-hover); color: var(--main-text); }
#navbar-container .bottom-nav a.active { background: var(--ui-accent-soft); color: var(--ui-accent); }
#navbar-container .bottom-nav :where(a, button):active { transform: scale(.96); }
#navbar-container .bottom-nav svg { width: 24px; height: 24px; flex: 0 0 24px; }
#navbar-container .nav-notification-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 24px; }
#navbar-container .nav-notification-icon > svg { width: 24px; height: 24px; }
#navbar-container .nav-notification-badge {
    position: absolute; top: -8px; inset-inline-end: -9px;
    display: grid; place-items: center; box-sizing: border-box;
    width: 22px; height: 22px; margin: 0; padding: 0;
    border: 2px solid var(--main-bg); border-radius: 50%;
    background: var(--ui-accent-fill); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0;
    font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
}
@media (max-width: 767px) { #navbar-container .bottom-nav > a { flex: 1 1 0; width: auto; min-width: 0; max-width: 44px; } }
/* The bar keeps one left-to-right order in both languages; each item keeps the page direction, so badges stay on their usual side. */
html[dir='rtl'] #navbar-container .bottom-nav > a { direction: rtl; }
#navbar-container .sun-icon { display: block !important; }
#navbar-container .moon-icon { display: none !important; }
:root.dark #navbar-container .sun-icon { display: none !important; }
:root.dark #navbar-container .moon-icon { display: block !important; }
#navbar-container .nav-sidebar :where(.nav-brand span, .sidebar-item > span:not(.nav-notification-icon)) { display: none; }
#navbar-container :where(a, button):focus-visible, [data-theme-toggle]:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
html[dir='rtl'] [data-app-ui] .input-icon { left: auto; right: 16px; }
html[dir='rtl'] [data-app-ui] .search-wrapper :where(.absolute.left-4) { left: auto; right: 16px; }
html[dir='rtl'] [data-app-ui] .search-wrapper :where(.pl-12) { padding-left: 16px; padding-right: 48px; }
html[dir='rtl'] [data-app-ui] .message.user { margin-left: 0; margin-right: auto; }
@media (max-width: 767px) {
    body[data-app-ui] [data-mobile-page-content] { box-sizing: border-box; width: 100%; padding-inline: var(--ui-mobile-page-gutter) !important; }
    body[data-app-ui] [data-mobile-edge-card] { width: calc(100% - 2 * var(--ui-mobile-page-gutter)); margin-inline: var(--ui-mobile-page-gutter) !important; }
    body[data-app-ui] .ai-main :is(.messages-area, .input-container) { padding-inline: var(--ui-mobile-page-gutter); }
    #navbar-container .app-mobile-header { padding-inline: 18px; }
    #navbar-container .app-mobile-header > .ui-mobile-back,
    #navbar-container .app-mobile-header > .ui-mobile-menu,
    body[data-menu-ui] .menu-mobile-header > .ui-mobile-back,
    body[data-post-detail] .feed-mobile-post-header > .ui-mobile-back,
    body[data-app-ui] .back-link.ui-mobile-back {
        box-sizing: border-box; display: grid; place-items: center; flex: 0 0 44px;
        width: 44px; height: 44px; min-height: 44px; padding: 0;
        border: 1px solid var(--border-color); border-radius: 50%;
        background: var(--secondary-bg); color: var(--main-text);
        text-decoration: none; cursor: pointer;
    }
    body[data-app-ui] :is(.ui-mobile-back, .ui-mobile-menu) > .ui-icon { width: 20px; height: 20px; }
    body[data-app-ui] .back-link.ui-mobile-back { margin-left: 0; margin-right: auto; }
    body[data-app-ui] .back-link.ui-mobile-back > span { display: none; }
    body[data-app-ui] main [data-mobile-page-title] { display: none !important; }
    body[data-app-shell] { padding-top: 64px !important; }
    body[data-app-shell] main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
    body[data-app-shell] .reply-footer-container { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
    /* Focused pages (editing, AI chat, question threads) give the phone screen to their content. */
    body[data-mobile-nav-hidden] #navbar-container .bottom-nav { display: none; }
    body[data-mobile-nav-hidden][data-app-shell] .reply-footer-container { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
    /* iOS Safari: with the keyboard up, a docked reply bar sits on the keyboard (ui.js measures it). */
    html[data-keyboard-open] body[data-app-shell] .reply-footer-container { bottom: calc(var(--ui-keyboard-inset, 0px) + 8px); }
}
@media (min-width: 768px) {
    :root { --ui-sidebar-width: 80px; }
    #navbar-container .nav-sidebar { display: flex; }
    #navbar-container .app-mobile-header, #navbar-container .bottom-nav { display: none; }
    #navbar-container .sidebar-item { gap: 0; }
}
@media (min-width: 1024px) {
    :root { --ui-sidebar-width: 256px; }
    #navbar-container .sidebar-item { gap: 16px; }
    #navbar-container .nav-brand { padding-inline: 16px; }
    #navbar-container .nav-brand img { width: 160px; height: 36px; }
    #navbar-container .nav-sidebar :where(.nav-brand span, .sidebar-item > span:not(.nav-notification-icon)) { display: block; }
}
@media (prefers-reduced-motion: reduce) {
    body[data-app-ui], body[data-app-ui] *, body[data-app-ui] *::before, body[data-app-ui] *::after { transition-duration: 0s !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

body[data-app-ui] .settings-item:is(button) { width: 100%; background: transparent; color: var(--main-text); text-align: start; border-inline: 0; border-top: 0; }
body[data-app-ui] [data-theme-system]:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -3px; }
body[data-admin-ui] {
    --bg-body: var(--main-bg); --bg-card: var(--secondary-bg); --bg-input: var(--main-bg); --bg-hover: var(--card-hover);
    --text-primary: var(--main-text); --text-secondary: var(--muted-text); --text-muted: var(--muted-text);
}
#navbar-container .app-mobile-header > button { flex: 0 0 40px; min-height: 40px; padding: 8px; border: 0; background: transparent; }
#navbar-container .app-mobile-header > a { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; }
#navbar-container #mobile-page-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; padding-inline: 8px; }

body[data-app-ui] .font-sans { font-family: var(--ui-font); }
body[data-app-ui][data-maintenance-ui] { background: var(--main-bg); color: var(--main-text); }

/* Keep the page on its device-width viewport; nested carousels still own their scroll. */
html { max-width: 100%; overflow-x: clip; }
body[data-app-ui] { box-sizing: border-box; width: 100%; max-width: 100%; overflow-x: clip; }
@media (max-width: 767px), (max-width: 1023px) and (pointer: coarse) {
    html { scrollbar-gutter: auto; overscroll-behavior-x: none; }
    body[data-app-ui] { touch-action: pan-x pan-y; overscroll-behavior-x: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body[data-app-ui] :where(input, textarea, select) { font-size: 16px !important; max-width: 100%; }
    body[data-app-ui] :where(img, video, canvas, iframe) { max-width: 100%; }
    body[data-app-ui] .overflow-x-auto { touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
}

/* Shared text and control geometry, including nested page styles. */
body[data-app-ui] :where(*):not([class*='fa-']):not(.fa):not(.fas):not(.far):not(.fab):not(.feed-emoji) { font-family: var(--ui-font) !important; }
body[data-app-ui] ::placeholder { font-family: var(--ui-font); }
.ui-icon { display: inline-block; flex: 0 0 20px; width: 20px; height: 20px; stroke-width: 1.8; vertical-align: middle; }
.ui-icon[hidden] { display: none !important; }
body[data-app-ui] .ui-icon--send { width: 20px !important; height: 20px !important; transform: none !important; stroke-width: 1.8 !important; }
html[dir='rtl'] .ui-icon--back { transform: scaleX(-1); }

body[data-app-ui] :where(input[type='checkbox'], input[type='radio']) { accent-color: var(--ui-accent-fill); }
body[data-app-ui] select { border-radius: 12px; color: var(--main-text); background-color: var(--secondary-bg); }
body[data-app-ui] select option { color: var(--main-text); background: var(--secondary-bg); font-family: var(--ui-font); }
body[data-app-ui] :where(button, summary, a):focus-visible { outline-color: var(--ui-accent) !important; }
body[data-app-ui] .sidebar-item.active, body[data-app-ui] .mobile-nav-item.active { color: var(--ui-accent) !important; }
/* A single menu surface shared by desktop and mobile post actions. */
body[data-app-ui] [data-ui-menu] {
    box-sizing: border-box; min-width: 200px; max-width: min(300px, calc(100vw - 24px)); padding: 7px;
    border: 1px solid var(--border-color); border-radius: var(--ui-menu-radius);
    background: var(--secondary-bg); color: var(--main-text); box-shadow: 0 10px 32px rgb(0 0 0 / 16%);
    animation: none; opacity: 0; transform: translateY(-5px) scale(.98); transform-origin: top center;
    transition: opacity .15s ease, transform .15s cubic-bezier(.22,1,.36,1); pointer-events: none;
}
body[data-app-ui] [data-ui-menu][data-menu-visible='true'] { opacity: 1; transform: none; pointer-events: auto; }
body[data-app-ui] [data-ui-menu] :where(button, a) {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 10px;
    margin: 0; border: 0; border-radius: 10px; background: transparent; color: var(--main-text);
    text-align: start; font-size: 14px; font-weight: 500; line-height: 20px; text-decoration: none;
    cursor: pointer; transition: background-color .15s, color .15s;
}
body[data-app-ui] [data-ui-menu] :where(button, a):hover { background: var(--ui-accent-soft); color: var(--ui-accent); }
body[data-app-ui] [data-ui-menu] :where(.ui-option-danger, .feed-menu-delete) { color: var(--ui-danger); }
body[data-app-ui] [data-ui-menu] :where(.ui-option-danger, .feed-menu-delete):hover { color: var(--ui-danger); background: rgb(220 85 85 / 10%); }
body[data-app-ui] [data-ui-menu] form { margin: 0; }
body[data-app-ui] [data-ui-menu] .ui-icon { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { body[data-app-ui] [data-ui-menu] { transition: none; } }

/* Existing utility accents resolve to theme tokens rather than independent palettes. */
body[data-app-ui] [class~="bg-blue-500"],
body[data-app-ui] [class~="bg-blue-600"],
body[data-app-ui] [class~="hover:bg-blue-700"]:hover,
body[data-app-ui] [class~="selection:bg-blue-500"]::selection { background-color: var(--ui-accent-fill) !important; }
body[data-app-ui] [class~="bg-blue-500/10"] { background-color: rgba(var(--ui-accent-rgb), 0.1) !important; }
body[data-app-ui] [class~="bg-blue-500/20"],
body[data-app-ui] [class~="bg-blue-600/20"] { background-color: rgba(var(--ui-accent-rgb), 0.2) !important; }
body[data-app-ui] [class~="bg-blue-500/30"],
body[data-app-ui] [class~="bg-purple-500/30"] { background-color: rgba(var(--ui-accent-rgb), 0.3) !important; }
body[data-app-ui] [class~="bg-blue-600/5"] { background-color: rgba(var(--ui-accent-rgb), 0.05) !important; }
body[data-app-ui] [class~="border-blue-500/30"],
body[data-app-ui] [class~="hover:border-blue-500/30"]:hover { border-color: rgba(var(--ui-accent-rgb), 0.3) !important; }
body[data-app-ui] [class~="from-blue-200"],
body[data-app-ui] [class~="from-blue-600"] { --tw-gradient-from: var(--ui-accent) var(--tw-gradient-from-position) !important; }
body[data-app-ui] [class~="from-blue-900/10"] { --tw-gradient-from: rgba(var(--ui-accent-rgb), 0.1) var(--tw-gradient-from-position) !important; }
body[data-app-ui] .group:hover [class~="group-hover:text-blue-400"],
body[data-app-ui] [class~="hover:text-blue-300"]:hover,
body[data-app-ui] [class~="text-blue-200"],
body[data-app-ui] [class~="text-blue-300"],
body[data-app-ui] [class~="text-blue-400"],
body[data-app-ui] [class~="text-blue-500"],
body[data-app-ui] [class~="text-purple-400"],
body[data-app-ui] [class~="text-purple-500"] { color: var(--ui-accent) !important; }
body[data-app-ui] [class~="shadow-blue-500/50"] { --tw-shadow-color: rgba(var(--ui-accent-rgb), 0.5) !important; }
body[data-app-ui] [class~="to-indigo-200"],
body[data-app-ui] [class~="to-indigo-600"],
body[data-app-ui] [class~="to-indigo-700"] { --tw-gradient-to: var(--ui-accent) var(--tw-gradient-to-position) !important; }

/* Focus never adds a border or ring to editable controls. */
body[data-app-ui] :where(input, textarea, select):is(:focus, :focus-visible),
body[data-app-ui] .input-wrapper:focus-within {
    border-color: transparent !important; outline: none !important; box-shadow: none !important;
    --tw-ring-color: transparent !important; --tw-ring-shadow: 0 0 transparent !important;
}
/* Phones and tablets: no tap flash or focus ring after touch or mouse use; keyboard navigation keeps its focus ring. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    body[data-app-ui], body[data-app-ui] * { -webkit-tap-highlight-color: transparent; }
    html:not([data-input-modality='keyboard']) body[data-app-ui] :is(:focus, :focus-visible, :focus-within) { outline: none !important; }
}
/* Keep long text editable without an internal scrollbar becoming visible. */
body[data-app-ui] textarea { scrollbar-width: none !important; }
body[data-app-ui] textarea::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
@media (max-width: 767px), (max-width: 1023px) and (pointer: coarse) {
    #navbar-container .app-mobile-header, body[data-app-ui] .feed-mobile-post-header {
        /* Solid rather than blurred, for the same reason as the bottom bar: transitions never show a blurred band. */
        background: rgba(var(--ui-main-bg-rgb), .97);
        transition: transform .24s cubic-bezier(.22,1,.36,1);
    }
    #navbar-container .app-mobile-header[data-scroll-hidden='true'], body[data-app-ui] .feed-mobile-post-header[data-scroll-hidden='true'] { transform: translateY(-110%); }
}
@media (prefers-reduced-motion: reduce) {
    #navbar-container .app-mobile-header, body[data-app-ui] .feed-mobile-post-header { transition: none; }
}

/* Shared, compact selection controls retain the native form field. */
body[data-app-ui] select { min-height: 44px; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 10px; }
body[data-app-ui] .ui-select { position: relative; display: inline-grid; vertical-align: middle; width: 100%; min-width: 0; max-width: 100%; gap: 6px; }
body[data-app-ui] .ui-select--audience, body[data-app-ui] .ui-select--compact { width: auto; }
body[data-app-ui] select.ui-select-native {
    position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important;
    padding: 0 !important; margin: 0 !important; border: 0 !important; opacity: 0;
    clip-path: inset(50%); overflow: hidden; pointer-events: none;
}
body[data-app-ui] .ui-select-trigger {
    box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 44px;
    margin: 0; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 10px;
    background: var(--secondary-bg); color: var(--main-text); text-align: start; font-size: 16px; font-weight: 450; line-height: 22px;
    cursor: pointer; transition: background-color .15s, color .15s;
}
body[data-app-ui] .ui-select-trigger:hover, body[data-app-ui] .ui-select-trigger:focus-visible, body[data-app-ui] .ui-select-trigger[aria-expanded='true'] { background: var(--card-hover); }
body[data-app-ui] .ui-select-trigger:focus { border-color: transparent; outline: none !important; box-shadow: none !important; }
body[data-app-ui] .ui-select-trigger:disabled { opacity: .5; cursor: default; }
body[data-app-ui] .ui-select-value { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body[data-app-ui] .ui-select-leading { display: grid; place-items: center; flex: 0 0 20px; }
body[data-app-ui] .ui-select-leading[hidden] { display: none; }
body[data-app-ui] .ui-select-chevron { margin-inline-start: auto; color: var(--muted-text); transition: transform .16s; }
body[data-app-ui] .ui-select-trigger[aria-expanded='true'] .ui-select-chevron { transform: rotate(180deg); }
body[data-app-ui] .ui-select--audience .ui-select-trigger { width: auto; min-height: 36px; padding: 6px 10px; border: 0; background: transparent; color: var(--muted-text); font-size: 14px; font-weight: 500; }
body[data-app-ui] .ui-select--audience .ui-select-trigger:hover, body[data-app-ui] .ui-select--audience .ui-select-trigger:focus-visible, body[data-app-ui] .ui-select--audience .ui-select-trigger[aria-expanded='true'] { background: var(--card-hover); color: var(--main-text); }
body[data-app-ui] .ui-select :is(.ui-select-leading, .ui-select-option-icon, .ui-select-chevron, .ui-select-check) .ui-icon,
body[data-app-ui] .ui-select :is(.ui-select-chevron, .ui-select-check) { width: 16px; height: 16px; }
body[data-app-ui] .ui-select-panel[data-ui-menu] {
    position: fixed; inset: auto; margin: 0; min-width: 0; max-width: calc(100vw - 24px); overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain; font-family: var(--ui-font); transform-origin: top center;
    padding: 4px; border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}
body[data-app-ui] .ui-select-panel::backdrop { background: transparent; }
body[data-app-ui] .ui-select-option {
    box-sizing: border-box; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 10px; border-radius: 6px;
    color: var(--main-text); text-align: start; cursor: pointer; transition: background-color .15s;
}
body[data-app-ui] .ui-select-option[data-highlighted='true'] { background: var(--card-hover); }
body[data-app-ui] .ui-select-option[aria-disabled='true'] { opacity: .45; cursor: default; }
body[data-app-ui] .ui-select-option-icon { display: grid; place-items: center; flex: 0 0 16px; width: 16px; height: 16px; color: var(--muted-text); }
body[data-app-ui] .ui-select-option-copy { min-width: 0; flex: 1; }
body[data-app-ui] .ui-select-option-title { font-size: 14px; font-weight: 450; line-height: 20px; overflow-wrap: anywhere; }
body[data-app-ui] .ui-select-check { flex: 0 0 16px; color: var(--ui-accent); visibility: hidden; }
body[data-app-ui] .ui-select-option[aria-selected='true'] .ui-select-check { visibility: visible; }
body[data-app-ui] .ui-select-group { padding: 10px 10px 5px; color: var(--muted-text); font-size: 12px; font-weight: 600; }
body[data-app-ui] .ui-select-error { display: block; color: var(--ui-danger); font-size: 13px; line-height: 20px; }
body[data-app-ui] .ui-select-error[hidden] { display: none; }
@media (max-width: 767px), (max-width: 1023px) and (pointer: coarse) {
    body[data-app-ui] .ui-select--audience .ui-select-trigger { min-height: 42px; font-size: 16px; }
    body[data-app-ui] .ui-select-option { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    body[data-app-ui] .ui-select-trigger, body[data-app-ui] .ui-select-chevron, body[data-app-ui] .ui-select-option { transition: none; }
}

.feed-compose-fab { display:none; }
[data-pagination-scroll], .question-card, .question-answer, .ask-inbox-card, .notification-row { scroll-margin-block-start:84px; }
.ui-menu-exit { position:fixed; inset:0; z-index:51; overflow:hidden; pointer-events:none; }
body:has(> .ui-menu-exit) #navbar-container .bottom-nav { z-index:52; }
@media (max-width:767px) {
    html:not([data-keyboard-open]) body[data-app-ui][data-app-shell]:has(.ui-compose-fab) main { padding-bottom:calc(180px + env(safe-area-inset-bottom,0px)) !important; }
    body[data-app-ui] .ui-compose-fab { display:inline-flex; align-items:center; justify-content:center; position:fixed; left:auto; right:max(18px,env(safe-area-inset-right,0px)); bottom:calc(94px + env(safe-area-inset-bottom,0px)); z-index:45; width:58px; height:58px; min-height:58px; padding:0; border:0; border-radius:50%; background:var(--ui-accent-fill); color:#fff; cursor:pointer; box-shadow:0 5px 18px rgb(0 0 0 / 18%); transition:opacity .2s,visibility .2s,transform .2s,background-color .2s; }
    body[data-app-ui] .ui-compose-fab .ui-icon { width:28px; height:28px; stroke-width:2; }
    body[data-app-ui] .ui-compose-fab:hover { background:var(--ui-accent-hover); }
    body[data-app-ui] .ui-compose-fab:active { transform:scale(.95); }
    body[data-app-ui] .feed-compose-fab { opacity:0; visibility:hidden; pointer-events:none; transform:translateY(12px) scale(.94); }
    body[data-app-ui] .feed-compose-fab[data-visible=true] { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
    body:has(.feed-compose-dialog[open]) .feed-compose-fab, body.ask-composer-open .ui-compose-fab { opacity:0; visibility:hidden; pointer-events:none; }
}
@media (prefers-reduced-motion:reduce) { body[data-app-ui] .ui-compose-fab { transition:none; } }

/* Community and chat use the same desktop content measure as Quiz. */
@media (min-width: 768px) {
    body[data-app-shell] main:is(.community-main, .ai-main) {
        box-sizing: border-box;
        width: calc(100% - var(--ui-sidebar-width));
        padding-inline: var(--ui-content-gutter);
    }
    body[data-community-ui] .community-page-content {
        width: 100%;
        max-width: var(--ui-content-max-width);
        padding-inline: 0;
    }
    body[data-app-shell] .ai-main .chat-container {
        width: 100%;
        max-width: var(--ui-content-max-width);
    }
    body[data-app-shell] .ai-main .desktop-header { margin-inline: 0; }
    body[data-app-shell] .ai-main :is(.messages-area, .input-container) { padding-inline: 0; }
}

/* While any popup is open as a modal (Add Post, questions, Ask, replies, announcements, reports), the page behind it
   cannot scroll, and scrolling inside the popup never carries over to the page. */
html:has(dialog:modal) { overflow: hidden; }
html:has(dialog:modal) body { overscroll-behavior: none; }
dialog:modal, dialog:modal * { overscroll-behavior: contain; }

/* Post visibility labels are always shown in full, whatever the screen width or the phone's text size setting. */
body[data-app-ui] .ui-select--audience .ui-select-trigger { max-width: 100%; }
body[data-app-ui] .ui-select--audience .ui-select-value { flex: 0 1 auto; overflow: visible; text-overflow: clip; white-space: nowrap; }
@media (max-width: 360px) {
    body[data-app-ui] .ui-select--audience .ui-select-trigger { gap: 6px; padding-inline: 8px; font-size: 13px; }
    body[data-app-ui] .ui-select-option-title { font-size: 13px; }
}

@media (max-width: 767px), (max-width: 1023px) and (pointer: coarse) {
    body[data-app-ui] dialog:is([data-report-dialog], [data-profile-report-dialog], [data-ask-report-dialog]) {
        box-sizing: border-box;
        position: fixed;
        inset-block-start: calc(var(--ui-report-viewport-top, 0px) + 12px);
        inset-block-end: calc(var(--ui-report-viewport-bottom, 0px) + 12px);
        inset-inline: 0;
        width: min(460px, calc(100% - 24px));
        height: fit-content;
        max-height: calc(var(--ui-report-viewport-height, 100dvh) - 24px);
        margin: auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        scroll-padding-block: 12px;
        -webkit-overflow-scrolling: touch;
    }
    body[data-app-ui] dialog:is([data-report-dialog], [data-profile-report-dialog], [data-ask-report-dialog]) textarea { font-size: 16px; }
}

/* Inside the Android app the page behaves like native UI: no long-press link or image callouts, no selectable
   controls or bars, and no web scrollbars. Text fields and written content remain selectable for copy and paste. */
html[data-native-app] { -webkit-touch-callout: none; scrollbar-width: none; }
html[data-native-app] ::-webkit-scrollbar { width: 0; height: 0; display: none; }
html[data-native-app] :is(a, button, img, summary, label, nav, [role="button"], [role="tab"], [data-app-href], #navbar-container, .ui-select-trigger) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html[data-native-app] :is(input, textarea, select, [contenteditable="true"]) { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* Touch screens: small icon controls keep their size and look but accept taps across at least 48 x 48 around them,
   so a tap slightly beside the icon still counts. */
@media (pointer: coarse) {
    body[data-app-ui] :is(details[data-post-menu] > summary, .feed-author-avatar, .feed-latest-avatar, .question-avatar, .ask-thread-avatar,
        .feed-primary, .feed-comments-link, .feed-reaction-trigger, .ui-mobile-back, .profile-activity-comments,
        #navbar-container .bottom-nav a, #navbar-container .app-mobile-header :is(a, button)) { position: relative; }
    body[data-app-ui] :is(details[data-post-menu] > summary, .feed-author-avatar, .feed-latest-avatar, .question-avatar, .ask-thread-avatar,
        .feed-primary, .feed-comments-link, .feed-reaction-trigger, .ui-mobile-back, .profile-activity-comments,
        #navbar-container .bottom-nav a, #navbar-container .app-mobile-header :is(a, button))::after {
        content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, 48px); height: max(100%, 48px); transform: translate(-50%, -50%);
    }
}
/* iPhone keyboard lock (ui.js): while a docked comment field is focused, the page stands still and only main scrolls,
   between the top bar and the docked box, so Safari never pans the view and the box cannot shake. */
html[data-keyboard-lock] { overflow: hidden; overscroll-behavior: none; }
html[data-keyboard-lock] body { overflow: hidden; overscroll-behavior: none; }
html[data-keyboard-lock] main[data-keyboard-scroller] { position: fixed !important; inset-inline: 0; top: var(--ui-lock-top, 0px); height: var(--ui-lock-height, 50vh); box-sizing: border-box; overflow-y: auto; overscroll-behavior: none; overflow-anchor: none; -webkit-overflow-scrolling: touch; z-index: 1; }
html[data-keyboard-lock] main[data-keyboard-scroller] { padding-bottom: 24px !important; }
/* A closing iPhone keyboard: docked boxes glide down with it instead of waiting for Safari's late resize report. */
@media (max-width: 767px) {
    html[data-keyboard-closing] body[data-post-detail] .feed-detail-composer,
    html[data-keyboard-closing] body[data-app-shell] .reply-footer-container { transition: bottom .26s cubic-bezier(.2, .8, .2, 1); }
}
@media (prefers-reduced-motion: reduce) {
    html[data-keyboard-closing] body[data-post-detail] .feed-detail-composer,
    html[data-keyboard-closing] body[data-app-shell] .reply-footer-container { transition: none; }
}