/* ══════════════════════════════════════════════════════
   FEEDORAX — Design System (Timeline)
   Scoped to #feedorax-timeline-container.feedorax-timeline-container
══════════════════════════════════════════════════════ */

#feedorax-timeline-container.feedorax-timeline-container {
    position: relative;
    --mtfy-tl-brand: #6366f1;
    --mtfy-tl-brand-dark: #4f46e5;
    --mtfy-tl-brand-light: #eef2ff;
    --mtfy-tl-brand-glow: rgba(var(--mtfy-tl-brand-rgb), 0.18);
    --mtfy-tl-brand-rgb: 99, 102, 241;
    --mtfy-tl-brand-pale: #a5b4fc;
    --mtfy-tl-brand-pale2: #c4b5fd;
    --mtfy-tl-bg: #f1f5f9;
    --mtfy-tl-bg-card: #ffffff;
    --mtfy-tl-bg-input: #f1f5f9;
    --mtfy-tl-bg-sidebar: #ffffff;
    /* Search field: hover/focus (avoid hardcoded #fff in dark mode) */
    --mtfy-tl-search-hover-bg: #e2e8f0;
    --mtfy-tl-search-hover-border: #cbd5e1;
    --mtfy-tl-search-focus-bg: #ffffff;
    --mtfy-tl-text: #0f172a;
    --mtfy-tl-text-2: #334155;
    --mtfy-tl-text-muted: #64748b;
    --mtfy-tl-border: #e2e8f0;
    --mtfy-tl-radius-sm: 8px;
    --mtfy-tl-radius: 14px;
    /* Logo mark: slight rounding only (not pill / circle) */
    --mtfy-tl-brand-icon-radius: 6px;
    --mtfy-tl-radius-lg: 20px;
    --mtfy-tl-radius-pill: 999px;
    --mtfy-tl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --mtfy-tl-shadow: 0 4px 16px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04);
    --mtfy-tl-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    --mtfy-tl-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --mtfy-tl-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --mtfy-tl-t: all 0.18s var(--mtfy-tl-ease);
    --mtfy-tl-topbar-h: 60px;
    /* Mobile bottom nav content height (not including safe-area; see .mobile-bottom-nav padding). */
    --mtfy-tl-mbn-h: 72px;
    --mtfy-tl-sidebar-w: 230px;

    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    background: var(--mtfy-tl-bg);
    color: var(--mtfy-tl-text);
    line-height: 1.5;
    font-size: 15px;
    color-scheme: light;
}

/* Dark mode – overrides when .feedorax-dark is on container or body */
#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container {
    color-scheme: dark;
    --mtfy-tl-bg: #0f172a;
    --mtfy-tl-bg-card: #1e293b;
    --mtfy-tl-bg-input: #334155;
    --mtfy-tl-bg-sidebar: #1e293b;
    --mtfy-tl-text: #f1f5f9;
    --mtfy-tl-text-2: #e2e8f0;
    --mtfy-tl-text-muted: #94a3b8;
    --mtfy-tl-border: #334155;
    --mtfy-tl-brand-light: #312e81;
    --mtfy-tl-search-hover-bg: #475569;
    --mtfy-tl-search-hover-border: #64748b;
    --mtfy-tl-search-focus-bg: #1e293b;
    --mtfy-tl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --mtfy-tl-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.2);
    --mtfy-tl-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.25);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container {
    scrollbar-color: #475569 var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark ::-webkit-scrollbar-track,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container ::-webkit-scrollbar-track {
    background: #1e293b;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark ::-webkit-scrollbar-thumb,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container ::-webkit-scrollbar-thumb {
    background: #475569;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark ::-webkit-scrollbar-thumb:hover,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark ::-webkit-scrollbar-corner,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container ::-webkit-scrollbar-corner {
    background: #1e293b;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .feedorax-timeline-preloader,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .feedorax-timeline-preloader {
    background: #0f172a;
}

/* Scrollbar design – slim, rounded, theme-matched */
#feedorax-timeline-container.feedorax-timeline-container {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container * {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #e2e8f0;
}

#feedorax-timeline-container.feedorax-timeline-container ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#feedorax-timeline-container.feedorax-timeline-container ::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

#feedorax-timeline-container.feedorax-timeline-container ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

#feedorax-timeline-container.feedorax-timeline-container ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

#feedorax-timeline-container.feedorax-timeline-container ::-webkit-scrollbar-thumb:active {
    background: #64748b;
}

#feedorax-timeline-container.feedorax-timeline-container ::-webkit-scrollbar-corner {
    background: #f1f5f9;
    border-radius: 4px;
}

/* Timeline preloader – shows on page load, hides when timeline ready */
#feedorax-timeline-container.feedorax-timeline-container .feedorax-timeline-preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e2e8f0;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-timeline-preloader.feedorax-preloader--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-preloader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 24px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-preloader-spinner {
    width: 56px;
    height: 56px;
    border: 4px solid #cbd5e1;
    border-top-color: var(--mtfy-tl-brand);
    border-radius: 50%;
    animation: feedorax-preloader-spin 0.75s linear infinite;
}

@keyframes feedorax-preloader-spin {
    to {
        transform: rotate(360deg);
    }
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-preloader-text {
    font-size: 1rem;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.02em;
}

#feedorax-timeline-container.feedorax-timeline-container * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#feedorax-timeline-container.feedorax-timeline-container a {
    text-decoration: none;
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container button {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    cursor: pointer;
    border: none;
    background: transparent;
}

#feedorax-timeline-container.feedorax-timeline-container img {
    display: block;
    max-width: 100%;
}

#feedorax-timeline-container.feedorax-timeline-container input,
#feedorax-timeline-container.feedorax-timeline-container textarea,
#feedorax-timeline-container.feedorax-timeline-container select {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
}

/* ══════════════════════════════════════════
   TOP BAR
══════════════════════════════════════════ */
#feedorax-timeline-container.feedorax-timeline-container .topbar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: var(--mtfy-tl-topbar-h);
    background: var(--mtfy-tl-bg-card);
    border-bottom: 1px solid var(--mtfy-tl-border);
    z-index: 200;
    overflow: visible;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 16px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Notif + account panels live here so mobile MBN can open them while .topbar-actions is display:none. */
#feedorax-timeline-container.feedorax-timeline-container .feedorax-topbar-dropdown-layer {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 50;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-topbar-dropdown-layer .tb-account-dropdown {
    pointer-events: auto;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-topbar-dropdown-layer .tb-account-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 12px;
    left: auto;
}

/* Notification panel root: outside #app so fixed positioning isn’t trapped by header/stacking. */
#feedorax-timeline-container.feedorax-timeline-container .feedorax-notif-panel-root {
    position: static;
    pointer-events: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-notif-panel-root .notif-dropdown {
    pointer-events: auto;
}

/* Desktop/tablet: panel anchors to timeline container (notif root lives outside #app). */
@media (min-width: 768px) {
    #feedorax-timeline-container.feedorax-timeline-container .feedorax-notif-panel-root .notif-dropdown.notif-panel {
        position: absolute;
        top: calc(var(--mtfy-tl-topbar-h) + 10px);
        right: 16px;
        left: auto;
        width: 360px;
        max-width: calc(100vw - 32px);
        max-height: min(78vh, 560px);
        z-index: 250;
        transform: none;
    }
}

/* Only action icons (no brand/search): align to the end */
#feedorax-timeline-container.feedorax-timeline-container .topbar-inner.topbar-inner--actions-only {
    justify-content: flex-end;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-brand {
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .brand-mark-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    max-width: 100%;
}

#feedorax-timeline-container.feedorax-timeline-container .brand-mark-link:focus-visible {
    outline: 2px solid var(--mtfy-tl-brand);
    outline-offset: 2px;
    border-radius: 10px;
}

#feedorax-timeline-container.feedorax-timeline-container .brand-mark {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Bundled Feedorax logo (feedorax_print_brand_icon) — subtle corners */
#feedorax-timeline-container.feedorax-timeline-container img.feedorax-brand-icon {
    border-radius: var(--mtfy-tl-brand-icon-radius);
    object-fit: contain;
    object-position: center;
}

#feedorax-timeline-container.feedorax-timeline-container .brand-logo-img {
    display: block;
    height: auto;
    width: auto;
    max-height: 56px;
    max-width: min(220px, 42vw);
    object-fit: contain;
    border-radius: var(--mtfy-tl-brand-icon-radius);
}

/* Optional separate logo from General → Mobile logo (shown at tablet width and below). */
#feedorax-timeline-container.feedorax-timeline-container .brand-logo-img--mobile-only {
    display: none;
}

@media (max-width: 767px) {
    #feedorax-timeline-container.feedorax-timeline-container .brand-logo-img--desktop-only {
        display: none;
    }

    #feedorax-timeline-container.feedorax-timeline-container .brand-logo-img--mobile-only {
        display: block;
    }
}

#feedorax-timeline-container.feedorax-timeline-container .brand-name {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--mtfy-tl-brand) 0%, var(--mtfy-tl-brand-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Topbar Search ── */
#feedorax-timeline-container.feedorax-timeline-container .topbar-search-wrap {
    position: relative;
    overflow: visible;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-search {
    flex: 1;
    min-width: 0;
    max-width: 380px;
    height: 40px;
    margin: 0 8px;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-search-label {
    display: flex;
    align-items: center;
    cursor: text;
    width: 100%;
    height: 100%;
    min-width: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-search-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    min-width: 0;
    background: var(--mtfy-tl-bg-input);
    border: 1.5px solid var(--mtfy-tl-border);
    border-radius: var(--mtfy-tl-radius-pill);
    padding: 0 14px 0 16px;
    transition: border-color 0.2s var(--mtfy-tl-ease), background 0.2s var(--mtfy-tl-ease), box-shadow 0.2s var(--mtfy-tl-ease);
}

#feedorax-timeline-container.feedorax-timeline-container .search-wrap:hover {
    background: var(--mtfy-tl-search-hover-bg);
    border-color: var(--mtfy-tl-search-hover-border);
}

#feedorax-timeline-container.feedorax-timeline-container .search-wrap:focus-within {
    background: var(--mtfy-tl-search-focus-bg);
    border-color: var(--mtfy-tl-brand);
    box-shadow: 0 0 0 2px var(--mtfy-tl-brand-glow);
}

#feedorax-timeline-container.feedorax-timeline-container .search-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--mtfy-tl-text-muted);
    transition: color 0.2s var(--mtfy-tl-ease);
}

#feedorax-timeline-container.feedorax-timeline-container .search-wrap:focus-within .search-icon-wrap {
    color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .search-ico {
    display: block;
    width: 18px;
    height: 18px;
}

#feedorax-timeline-container.feedorax-timeline-container .search-input {
    flex: 1;
    min-width: 0;
    width: 0;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--mtfy-tl-text);
    padding: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .search-input::placeholder {
    color: var(--mtfy-tl-text-muted);
}

/* Native controls / autofill: stay on-theme in dark mode */
#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .search-input:-webkit-autofill,
#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .search-input:-webkit-autofill:hover,
#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .search-input:-webkit-autofill:focus,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .search-input:-webkit-autofill,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .search-input:-webkit-autofill:hover,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .search-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--mtfy-tl-text);
    caret-color: var(--mtfy-tl-text);
    box-shadow: 0 0 0 1000px var(--mtfy-tl-bg-input) inset;
    transition: background-color 99999s ease-out 0s;
}

#feedorax-timeline-container.feedorax-timeline-container .search-input::-webkit-search-cancel-button,
#feedorax-timeline-container.feedorax-timeline-container .search-input::-webkit-search-decoration {
    appearance: none;
}

/* Topbar search dropdown (AJAX results) – above content */
#feedorax-timeline-container.feedorax-timeline-container .topbar-search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--mtfy-tl-bg-card);
    border: 1px solid var(--mtfy-tl-border);
    border-radius: var(--mtfy-tl-radius);
    box-shadow: var(--mtfy-tl-shadow-lg);
    z-index: 9999;
    padding: 6px 0;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-search-dropdown[hidden] {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-search-dropdown:not([hidden]) {
    display: block;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-search-section {
    padding: 4px 0;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-search-section:not(:first-child) {
    border-top: 1px solid var(--mtfy-tl-border);
    margin-top: 4px;
    padding-top: 8px;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-search-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mtfy-tl-text-muted);
    padding: 4px 14px 6px;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-search-item--post .topbar-search-item-info {
    gap: 3px;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-search-item--post .topbar-search-item-status {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-search-item--post .topbar-search-item-status::before {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-search-item-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--mtfy-tl-brand);
    background: var(--mtfy-tl-brand-light);
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: var(--mtfy-tl-text);
    text-decoration: none;
    transition: background 0.15s var(--mtfy-tl-ease);
    cursor: pointer;
    border: none;
    width: 100%;
    font-family: inherit;
    font-size: 0.9rem;
    text-align: left;
    background: none;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-search-item:hover,
#feedorax-timeline-container.feedorax-timeline-container .topbar-search-item:focus {
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-search-item-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-search-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    align-items: flex-start;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-search-item-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--mtfy-tl-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    line-height: 1.3;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-search-item-status {
    font-size: 0.8rem;
    color: var(--mtfy-tl-text-muted);
    line-height: 1.35;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* User row: status with dot (offline/online) */
#feedorax-timeline-container.feedorax-timeline-container .topbar-search-item--user .topbar-search-item-status {
    text-transform: capitalize;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-search-item--user .topbar-search-item-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-search-item--user .topbar-search-item-status.online::before {
    background: #22c55e;
    opacity: 1;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-search-empty,
#feedorax-timeline-container.feedorax-timeline-container .topbar-search-login {
    padding: 14px 16px;
    font-size: 0.9rem;
    color: var(--mtfy-tl-text-muted);
    text-align: center;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 16px;
    font-size: 0.9rem;
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-search-loader {
    width: 22px;
    height: 22px;
    border: 2px solid var(--mtfy-tl-border);
    border-top-color: var(--mtfy-tl-brand);
    border-radius: 50%;
    animation: feedorax-search-spin 0.7s linear infinite;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-search-loading-text {
    font-size: 0.9rem;
    color: var(--mtfy-tl-text-muted);
}

@keyframes feedorax-search-spin {
    to {
        transform: rotate(360deg);
    }
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-search-login a {
    color: var(--mtfy-tl-brand);
    text-decoration: underline;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

/* Dark mode toggle – rounded square with crescent moon (light: gray + purple moon; dark: black + white moon) */
#feedorax-timeline-container.feedorax-timeline-container .feedorax-dark-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-dark-toggle-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-dark-toggle-slider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #e2e8f0;
    border: 1px solid var(--mtfy-tl-border);
    color: var(--mtfy-tl-brand);
    transition: background 0.2s var(--mtfy-tl-ease), border-color 0.2s var(--mtfy-tl-ease), color 0.2s var(--mtfy-tl-ease);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-dark-toggle-moon {
    flex-shrink: 0;
    transform: rotate(-15deg);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-dark-toggle-input:checked+.feedorax-dark-toggle-slider {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-dark-toggle:hover .feedorax-dark-toggle-slider {
    border-color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-dark-toggle-input:checked+.feedorax-dark-toggle-slider:hover {
    background: #1e293b;
    border-color: #1e293b;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--mtfy-tl-bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mtfy-tl-text-2);
    transition: var(--mtfy-tl-t);
    position: relative;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-btn:hover {
    background: var(--mtfy-tl-brand-light);
    color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .notif-wrap {
    position: relative;
}

#feedorax-timeline-container.feedorax-timeline-container .chat-wrap {
    position: relative;
}

#feedorax-timeline-container.feedorax-timeline-container .chat-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 380px;
    max-width: calc(100vw - 24px);
    max-height: min(78vh, 620px);
    background: var(--mtfy-tl-bg-card);
    border: 1px solid var(--mtfy-tl-border);
    border-radius: 16px;
    box-shadow: var(--mtfy-tl-shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10000;
}

#feedorax-timeline-container.feedorax-timeline-container .chat-dropdown[hidden] {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .chat-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 10px;
}

#feedorax-timeline-container.feedorax-timeline-container .chat-dropdown-title {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 700;
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .chat-dropdown-icons {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#feedorax-timeline-container.feedorax-timeline-container .chat-head-btn {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text-2);
}

#feedorax-timeline-container.feedorax-timeline-container .chat-head-btn:hover {
    background: var(--mtfy-tl-brand-light);
    color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .chat-dropdown-search-wrap {
    padding: 0 12px 10px;
}

#feedorax-timeline-container.feedorax-timeline-container .chat-dropdown-search {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text);
    padding: 10px 13px;
    font-size: 0.94rem;
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container .chat-dropdown-search:focus {
    outline: none;
    border-color: var(--mtfy-tl-brand);
    background: var(--mtfy-tl-bg-card);
}

#feedorax-timeline-container.feedorax-timeline-container .chat-tabs {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

#feedorax-timeline-container.feedorax-timeline-container .chat-tabs::-webkit-scrollbar {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .chat-tab {
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--mtfy-tl-text-2);
    font-weight: 600;
    font-size: 0.86rem;
    padding: 6px 11px;
    white-space: nowrap;
}

#feedorax-timeline-container.feedorax-timeline-container .chat-tab.active {
    background: var(--mtfy-tl-brand-light);
    color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .chat-dropdown-list {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 50vh;
    padding: 4px 0;
}

#feedorax-timeline-container.feedorax-timeline-container .chat-loading,
#feedorax-timeline-container.feedorax-timeline-container .chat-empty {
    display: block;
    text-align: center;
    color: var(--mtfy-tl-text-muted);
    padding: 18px 14px;
}

#feedorax-timeline-container.feedorax-timeline-container .chat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    padding: 10px 12px;
    position: relative;
}

#feedorax-timeline-container.feedorax-timeline-container .chat-item:hover {
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container .chat-item.chat-item-unread .chat-item-name {
    font-weight: 800;
}

#feedorax-timeline-container.feedorax-timeline-container .chat-item-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container .chat-item-avatar-online {
    overflow: visible;
    position: relative;
}

#feedorax-timeline-container.feedorax-timeline-container .chat-item-online-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid var(--mtfy-tl-bg-card);
}

#feedorax-timeline-container.feedorax-timeline-container .chat-item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#feedorax-timeline-container.feedorax-timeline-container .chat-item-avatar-initial {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .chat-item-main {
    min-width: 0;
    flex: 1;
}

#feedorax-timeline-container.feedorax-timeline-container .chat-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#feedorax-timeline-container.feedorax-timeline-container .chat-item-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mtfy-tl-text);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#feedorax-timeline-container.feedorax-timeline-container .chat-item-time {
    color: var(--mtfy-tl-text-muted);
    font-size: 0.75rem;
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .chat-item-snippet {
    margin-top: 2px;
    font-size: 0.82rem;
    color: var(--mtfy-tl-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#feedorax-timeline-container.feedorax-timeline-container .chat-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1877f2;
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .chat-item-unread-count {
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #1877f2;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .chat-dropdown-footer {
    border-top: 1px solid var(--mtfy-tl-border);
    text-align: center;
    color: #1877f2;
    text-decoration: none;
    font-weight: 700;
    padding: 11px 14px;
    background: var(--mtfy-tl-bg-card);
    font-size: 0.9rem;
}

#feedorax-timeline-container.feedorax-timeline-container .chat-dropdown-footer:hover {
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox {
    position: fixed;
    right: 22px;
    bottom: 16px;
    width: 338px;
    max-width: calc(100vw - 20px);
    height: 470px;
    max-height: calc(100dvh - 90px);
    border-radius: 14px 14px 10px 10px;
    background: var(--mtfy-tl-bg-card);
    border: 1px solid var(--mtfy-tl-border);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.24);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10010;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox-header {
    height: 58px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox-user {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: visible;
    background: var(--mtfy-tl-bg-input);
    flex-shrink: 0;
    position: relative;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox-online-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid var(--mtfy-tl-bg-card);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox-avatar-initial {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox-name {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--mtfy-tl-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox-status {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox-btn {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #a21caf;
    font-size: 1.45rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox-btn:hover {
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox-body {
    flex: 1;
    overflow-y: auto;
    background: var(--mtfy-tl-bg-page);
    padding: 14px 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox-date {
    align-self: center;
    font-size: 0.78rem;
    color: var(--mtfy-tl-text-muted);
    margin: 6px 0;
    font-weight: 600;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-msg {
    max-width: 78%;
    padding: 9px 12px;
    border-radius: 16px;
    font-size: 0.95rem;
    line-height: 1.35;
    word-break: break-word;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-msg-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-msg-wrap.out {
    align-items: flex-end;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-msg-wrap.in {
    align-items: flex-start;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-msg.in {
    align-self: flex-start;
    background: #e5e7eb;
    color: #111827;
    border-bottom-left-radius: 8px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-msg.out {
    align-self: flex-end;
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color: #fff;
    border-bottom-right-radius: 8px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-msg-text {
    display: block;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-msg-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--mtfy-tl-text-muted);
    padding: 0 3px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-msg-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-seen-avatar {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    object-fit: cover;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-seen-avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.56rem;
    font-weight: 700;
    color: #fff;
    background: #64748b;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-reply-quote {
    display: block;
    font-size: 0.73rem;
    line-height: 1.25;
    opacity: 0.9;
    margin-bottom: 5px;
    padding-left: 8px;
    border-left: 2px solid rgba(255, 255, 255, 0.6);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-msg.in .feedorax-chat-reply-quote {
    border-left-color: rgba(17, 24, 39, 0.35);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-story-preview {
    display: block;
    margin-bottom: 8px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.12);
    max-width: 240px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-msg.out .feedorax-chat-story-preview {
    background: rgba(255, 255, 255, 0.15);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-story-preview-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 10px 2px;
    opacity: 0.9;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-msg.out .feedorax-chat-story-preview-label {
    color: rgba(255, 255, 255, 0.92);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-story-preview-media {
    display: block;
    line-height: 0;
    max-height: 128px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-story-preview-img,
#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-story-preview-video {
    width: 100%;
    max-height: 128px;
    object-fit: cover;
    display: block;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-story-preview-caption {
    display: block;
    font-size: 0.72rem;
    line-height: 1.35;
    padding: 6px 10px 8px;
    opacity: 0.95;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-reply-btn {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--mtfy-tl-brand);
    font-size: 0.7rem;
    font-weight: 600;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox-inputbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 8px;
    padding: 8px 10px 10px;
    border-top: 1px solid var(--mtfy-tl-border);
    background: var(--mtfy-tl-bg-card);
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-reply-preview {
    grid-column: 1 / -1;
    width: 100%;
    border: 1px solid var(--mtfy-tl-border);
    border-radius: 10px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-media-preview {
    grid-column: 1 / -1;
    width: 100%;
    border: 1px solid var(--mtfy-tl-border);
    border-radius: 10px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-media-name {
    font-size: 0.78rem;
    color: var(--mtfy-tl-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-media-clear {
    border: 0;
    background: transparent;
    color: var(--mtfy-tl-text-muted);
    font-size: 1.1rem;
    line-height: 1;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox-media-btn {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox-media-btn:hover {
    background: var(--mtfy-tl-brand-light);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-reply-label {
    font-size: 0.68rem;
    color: var(--mtfy-tl-text-muted);
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-reply-text {
    font-size: 0.78rem;
    color: var(--mtfy-tl-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-reply-clear {
    border: 0;
    background: transparent;
    color: var(--mtfy-tl-text-muted);
    font-size: 1.1rem;
    line-height: 1;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox-input {
    width: 100%;
    min-width: 0;
    height: 36px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text);
    padding: 0 14px;
    font-size: 0.98rem;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox-input:focus {
    outline: none;
    border-color: var(--mtfy-tl-brand);
    background: var(--mtfy-tl-bg-card);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox-send {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2563eb;
    color: #fff;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox-send:hover {
    background: #1d4ed8;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-attachment {
    display: block;
    margin-bottom: 6px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-attachment-img {
    max-width: 220px;
    max-height: 220px;
    border-radius: 10px;
    display: block;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-attachment-video {
    width: 220px;
    max-width: 100%;
    border-radius: 10px;
    display: block;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-attachment-file {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 0.8rem;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.15);
    color: inherit;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chat-msg.in .feedorax-chat-attachment-file {
    background: rgba(17, 24, 39, 0.08);
    color: #111827;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox.feedorax-chatbox-minimized {
    height: 58px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox.feedorax-chatbox-minimized .feedorax-chatbox-body,
#feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox.feedorax-chatbox-minimized .feedorax-chatbox-inputbar {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-dot:empty,
#feedorax-timeline-container.feedorax-timeline-container .notif-dot[aria-live][data-count="0"] {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-width: calc(100vw - 24px);
    max-height: 420px;
    background: var(--mtfy-tl-bg-card);
    border-radius: var(--mtfy-tl-radius);
    box-shadow: var(--mtfy-tl-shadow-lg);
    border: 1px solid var(--mtfy-tl-border);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overflow-x: hidden;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-dropdown[hidden] {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mtfy-tl-border);
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-dropdown-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--mtfy-tl-text-1);
    flex: 1;
    min-width: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-mark-all-read {
    flex-shrink: 0;
    margin: 0;
    padding: 6px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mtfy-tl-brand);
    background: transparent;
    border: none;
    border-radius: var(--mtfy-tl-radius-sm, 8px);
    cursor: pointer;
    transition: background 0.15s;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-mark-all-read:hover {
    background: var(--mtfy-tl-brand-light);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-scope .notif-mark-all-read[hidden] {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-dropdown-list {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 340px;
    padding: 4px 0;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-loading,
#feedorax-timeline-container.feedorax-timeline-container .notif-dropdown-empty {
    padding: 20px 16px;
    text-align: center;
    color: var(--mtfy-tl-text-muted);
    font-size: 0.9rem;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-hide {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
    border: none;
    width: 100%;
    text-align: left;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-item:hover {
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container .notif-item:has(.notif-item__main):hover {
    background: transparent;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-item.unread {
    background: var(--mtfy-tl-brand-light);
}

#feedorax-timeline-container.feedorax-timeline-container .notif-item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-item-body {
    flex: 1;
    min-width: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-item-text {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--mtfy-tl-text-1);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-item-time {
    font-size: 0.75rem;
    color: var(--mtfy-tl-text-muted);
    margin-top: 2px;
}

/* ── Notification panel (Facebook-style shell; mobile full-height above bottom nav) ── */
#feedorax-timeline-container.feedorax-timeline-container .notif-panel {
    --notif-unread-row: #e7f3ff;
    --notif-unread-row-dark: rgba(59, 130, 246, 0.14);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .notif-panel,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .notif-panel {
    --notif-unread-row: var(--notif-unread-row-dark);
}

#feedorax-timeline-container.feedorax-timeline-container .notif-panel__toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--mtfy-tl-border);
    flex-shrink: 0;
    background: var(--mtfy-tl-bg-card);
}

#feedorax-timeline-container.feedorax-timeline-container .notif-panel__title {
    margin: 0;
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--mtfy-tl-text-1);
}

#feedorax-timeline-container.feedorax-timeline-container .notif-panel__toolbar-end {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-width: 88px;
    justify-content: flex-end;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-panel__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--mtfy-tl-text-2);
    cursor: pointer;
    transition: background 0.15s var(--mtfy-tl-ease, ease), color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-panel__icon-btn:hover {
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text-1);
}

#feedorax-timeline-container.feedorax-timeline-container .notif-panel__text-btn {
    margin: 0;
    padding: 6px 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mtfy-tl-brand);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-panel__text-btn:hover {
    background: var(--mtfy-tl-brand-light);
}

#feedorax-timeline-container.feedorax-timeline-container .notif-panel__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--mtfy-tl-bg-card);
}

#feedorax-timeline-container.feedorax-timeline-container .notif-panel__list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: none;
    padding: 0 0 12px;
    -webkit-overflow-scrolling: touch;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-panel .notif-loading,
#feedorax-timeline-container.feedorax-timeline-container .notif-panel .notif-dropdown-empty {
    padding: 28px 16px;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-section {
    margin-top: 4px;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-section__title {
    margin: 0;
    padding: 10px 16px 6px;
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--mtfy-tl-text-1);
    letter-spacing: -0.01em;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px 6px;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-section__head .notif-section__title {
    padding: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-section__see-all {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mtfy-tl-brand);
    text-decoration: none;
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-section__see-all:hover {
    text-decoration: underline;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-section__items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-item {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    text-align: left;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-item__main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 8px 12px 16px;
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
    border-radius: 0;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-item__main:hover {
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container .notif-item--unread .notif-item__main {
    background: var(--notif-unread-row);
}

#feedorax-timeline-container.feedorax-timeline-container .notif-item--unread .notif-item__main:hover {
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container .notif-item-more {
    flex-shrink: 0;
    width: 44px;
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--mtfy-tl-text-muted);
    cursor: pointer;
    border-radius: 0;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-item-more:hover {
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text-1);
}

#feedorax-timeline-container.feedorax-timeline-container .notif-item__avatar-wrap {
    flex-shrink: 0;
    position: relative;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-item__middle {
    flex: 1;
    min-width: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-panel .notif-item-text {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--mtfy-tl-text-1);
}

#feedorax-timeline-container.feedorax-timeline-container .notif-panel .notif-item-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-item-avatar--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--mtfy-tl-bg-input);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--mtfy-tl-text-2);
}

#feedorax-timeline-container.feedorax-timeline-container .notif-fr-card {
    padding: 12px 8px 12px 16px;
    background: var(--mtfy-tl-bg-card);
    border-bottom: 1px solid var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container .notif-fr-card--unread {
    background: var(--notif-unread-row);
}

#feedorax-timeline-container.feedorax-timeline-container .notif-fr-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-fr-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    margin-left: 68px;
    padding-right: 8px;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-fr-confirm {
    flex: 1;
    padding: 10px 12px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    background: var(--mtfy-tl-brand);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-fr-confirm:hover {
    filter: brightness(1.05);
}

#feedorax-timeline-container.feedorax-timeline-container .notif-fr-delete {
    flex: 1;
    padding: 10px 12px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--mtfy-tl-text-1);
    background: var(--mtfy-tl-bg-input);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

#feedorax-timeline-container.feedorax-timeline-container .notif-fr-delete:hover {
    background: var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-notif-panel-open .mbn-item--notif {
    color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-notif-panel-open .mbn-item--notif .mbn-icon {
    background: var(--mtfy-tl-brand-light);
    box-shadow: 0 0 0 1px rgba(var(--mtfy-tl-brand-rgb), 0.2);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-notif-panel-open .mbn-item--notif::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 40px;
    height: 3px;
    margin-left: -20px;
    background: var(--mtfy-tl-brand);
    border-radius: 0 0 3px 3px;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 2.5px solid var(--mtfy-tl-brand);
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container .tb-avatar:hover {
    transform: scale(1.08);
}

#feedorax-timeline-container.feedorax-timeline-container .tb-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-avatar--menu-trigger {
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-avatar--menu-trigger:focus {
    outline: none;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-avatar--menu-trigger:focus-visible {
    outline: 2px solid var(--mtfy-tl-brand);
    outline-offset: 2px;
    border-radius: 50%;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-wrap {
    position: relative;
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-width: calc(100vw - 20px);
    max-height: min(85vh, 640px);
    background: #fff;
    color: #050505;
    border: 1px solid #e4e6eb;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 10001;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .tb-account-dropdown,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .tb-account-dropdown {
    background: var(--mtfy-tl-bg-card);
    color: var(--mtfy-tl-text);
    border-color: var(--mtfy-tl-border);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.25);
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-dropdown[hidden] {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-dropdown-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: min(85vh, 640px);
    padding: 12px 10px 10px;
    scrollbar-width: thin;
    scrollbar-color: #bcc0c4 transparent;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-profile-card {
    background: #f0f2f5;
    border-radius: 10px;
    padding: 10px 10px 12px;
    margin-bottom: 10px;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .tb-account-profile-card,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .tb-account-profile-card {
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-profile-main {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    padding: 4px 4px 10px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-profile-main:hover {
    background: rgba(0, 0, 0, 0.04);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .tb-account-profile-main:hover,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .tb-account-profile-main:hover {
    background: rgba(255, 255, 255, 0.06);
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-profile-main--static {
    pointer-events: none;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-profile-avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .tb-account-profile-avatar,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .tb-account-profile-avatar {
    border-color: var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-profile-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-profile-name {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    color: #050505;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .tb-account-profile-name,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .tb-account-profile-name {
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-profile-handle {
    font-size: 0.85rem;
    color: #65676b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .tb-account-profile-handle,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .tb-account-profile-handle {
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-see-profile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
    padding: 10px 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #050505;
    text-decoration: none;
    background: #e4e6eb;
    border-radius: 8px;
    transition: filter 0.15s ease, background 0.15s ease;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-see-profile:hover {
    filter: brightness(0.97);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .tb-account-see-profile,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .tb-account-see-profile {
    background: var(--mtfy-tl-border);
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-see-profile-icon {
    flex-shrink: 0;
    opacity: 0.85;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0 8px;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 10px;
    margin: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: #050505;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .tb-account-menu-item,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .tb-account-menu-item {
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-menu-item:hover {
    background: #f2f2f2;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .tb-account-menu-item:hover,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .tb-account-menu-item:hover {
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-menu-item:focus {
    outline: none;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-menu-item:focus-visible {
    outline: 2px solid var(--mtfy-tl-brand);
    outline-offset: -2px;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-menu-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e4e6eb;
    color: #050505;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .tb-account-menu-icon,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .tb-account-menu-icon {
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-menu-icon svg {
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-menu-label {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-menu-title {
    font-weight: 600;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-menu-suffix {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #65676b;
    opacity: 0.9;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .tb-account-menu-suffix,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .tb-account-menu-suffix {
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-menu-item--logout .tb-account-menu-icon {
    background: transparent;
    border: 1px solid #e4e6eb;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-dropdown-footer {
    border-top: 1px solid #e4e6eb;
    margin: 4px 2px 0;
    padding: 12px 8px 6px;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .tb-account-dropdown-footer,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .tb-account-dropdown-footer {
    border-top-color: var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px 0;
    font-size: 0.72rem;
    line-height: 1.5;
    margin-bottom: 8px;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-footer-link {
    background: none;
    border: 0;
    padding: 2px 4px;
    margin: 0;
    font: inherit;
    font-size: inherit;
    color: #65676b;
    cursor: pointer;
    text-decoration: none;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-footer-link:hover {
    text-decoration: underline;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .tb-account-footer-link,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .tb-account-footer-link {
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-footer-link--a {
    display: inline;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-footer-sep {
    color: #bcc0c4;
    user-select: none;
    padding: 0 1px;
}

#feedorax-timeline-container.feedorax-timeline-container .tb-account-footer-copy {
    margin: 0;
    font-size: 0.72rem;
    color: #65676b;
    text-align: center;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .tb-account-footer-copy,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .tb-account-footer-copy {
    color: var(--mtfy-tl-text-muted);
}

/* ══════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════ */
#feedorax-timeline-container.feedorax-timeline-container .layout {
    display: grid;
    grid-template-columns: var(--mtfy-tl-sidebar-w) 1fr 280px;
    gap: 20px;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 16px 40px;
}

/* ══════════════════════════════════════════
   FEED COLUMN
══════════════════════════════════════════ */
#feedorax-timeline-container.feedorax-timeline-container .feed-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    max-width: 680px;
    margin: 0 auto;
    width: 100%;
}

#feedorax-timeline-container.feedorax-timeline-container .feed-col .feedorax-main-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* When switching from a scrolled feed, scrollIntoView lands below fixed topbar */
    scroll-margin-top: calc(var(--mtfy-tl-topbar-h) + 16px);
}

/* Ensure All friends / Saved views are hidden on home feed (overrides .feedorax-main-view display) */
#feedorax-timeline-container.feedorax-timeline-container .feed-col .feedorax-main-view.feedorax-hide {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feed-col #feedorax-feed-view {
    min-width: 0;
}

/* ══════════════════════════════════════════
   MOMENTS (STORIES)
══════════════════════════════════════════ */
#feedorax-timeline-container.feedorax-timeline-container .moments-section {
    background: var(--mtfy-tl-bg-card);
    border-radius: var(--mtfy-tl-radius);
    border: 1px solid var(--mtfy-tl-border);
    box-shadow: var(--mtfy-tl-shadow-sm);
    padding: 16px;
}

#feedorax-timeline-container.feedorax-timeline-container .moments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

#feedorax-timeline-container.feedorax-timeline-container .moments-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .moments-see-all {
    font-size: 0.82rem;
    color: var(--mtfy-tl-brand);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--mtfy-tl-radius-pill);
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container .moments-see-all:hover {
    background: var(--mtfy-tl-brand-light);
}

#feedorax-timeline-container.feedorax-timeline-container .moments-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

#feedorax-timeline-container.feedorax-timeline-container .moments-row::-webkit-scrollbar {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-story-file-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

#feedorax-timeline-container.feedorax-timeline-container #feedorax-my-story-wrap {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container #feedorax-moments-list {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .moment-img--story {
    position: absolute;
    inset: 0;
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container .moment-img--story .moment-story-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#feedorax-timeline-container.feedorax-timeline-container .moment--peer-story .moment-ring {
    z-index: 2;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
}

#feedorax-timeline-container.feedorax-timeline-container .moment.moment-uploading {
    pointer-events: none;
}

#feedorax-timeline-container.feedorax-timeline-container .moment.moment-uploading .moment-add-icon {
    animation: feedorax-moment-spin 0.8s linear infinite;
}

@keyframes feedorax-moment-spin {
    to {
        transform: rotate(360deg);
    }
}

#feedorax-timeline-container.feedorax-timeline-container .moment {
    flex-shrink: 0;
    width: 100px;
    height: 156px;
    border-radius: var(--mtfy-tl-radius);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s var(--mtfy-tl-spring);
}

#feedorax-timeline-container.feedorax-timeline-container .moment:hover {
    transform: scale(1.04);
}

#feedorax-timeline-container.feedorax-timeline-container .moment-img {
    position: absolute;
    inset: 0;
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container .moment-ring {
    position: absolute;
    top: 8px;
    right: 8px;
    left: auto;
    transform: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    padding: 2.5px;
    background: linear-gradient(135deg, var(--mtfy-tl-brand), var(--mtfy-tl-brand-dark));
    overflow: hidden;
}

#feedorax-timeline-container.feedorax-timeline-container .moment-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
}

#feedorax-timeline-container.feedorax-timeline-container .moment-ring .moment-initial {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--mtfy-tl-brand-light);
    color: var(--mtfy-tl-brand);
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#feedorax-timeline-container.feedorax-timeline-container .moment {
    color: inherit;
    text-decoration: none;
}

#feedorax-timeline-container.feedorax-timeline-container .moment-name {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    padding: 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Moment backgrounds */
#feedorax-timeline-container.feedorax-timeline-container .moment-add-bg {
    background: linear-gradient(160deg, var(--mtfy-tl-brand-light) 0%, var(--mtfy-tl-brand-pale) 100%);
}

#feedorax-timeline-container.feedorax-timeline-container .moment-bg--violet {
    background: linear-gradient(160deg, var(--mtfy-tl-brand-dark) 0%, var(--mtfy-tl-brand) 100%);
}

#feedorax-timeline-container.feedorax-timeline-container .moment-bg--ocean {
    background: linear-gradient(160deg, #0284c7 0%, #06b6d4 100%);
}

#feedorax-timeline-container.feedorax-timeline-container .moment-bg--sunset {
    background: linear-gradient(160deg, #f97316 0%, #eab308 100%);
}

#feedorax-timeline-container.feedorax-timeline-container .moment-bg--forest {
    background: linear-gradient(160deg, #16a34a 0%, #65a30d 100%);
}

#feedorax-timeline-container.feedorax-timeline-container .moment-bg--rose {
    background: linear-gradient(160deg, #e11d48 0%, #f97316 100%);
}

#feedorax-timeline-container.feedorax-timeline-container .add-moment .moment-add-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 36px;
    height: 36px;
    background: var(--mtfy-tl-brand);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--mtfy-tl-brand-rgb), 0.45);
}

#feedorax-timeline-container.feedorax-timeline-container .add-moment .moment-name {
    color: var(--mtfy-tl-brand);
    font-weight: 700;
    text-shadow: none;
}

/* ══════════════════════════════════════════
   COMPOSE CARD
══════════════════════════════════════════ */
#feedorax-timeline-container.feedorax-timeline-container .compose-card {
    background: var(--mtfy-tl-bg-card);
    border-radius: var(--mtfy-tl-radius);
    border: 1px solid var(--mtfy-tl-border);
    box-shadow: var(--mtfy-tl-shadow-sm);
    padding: 16px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

#feedorax-timeline-container.feedorax-timeline-container .compose-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

#feedorax-timeline-container.feedorax-timeline-container .compose-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--mtfy-tl-brand-light);
}

#feedorax-timeline-container.feedorax-timeline-container .compose-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#feedorax-timeline-container.feedorax-timeline-container .compose-trigger {
    flex: 1;
    background: var(--mtfy-tl-bg-input);
    border: 1.5px solid var(--mtfy-tl-border);
    border-radius: var(--mtfy-tl-radius-pill);
    padding: 10px 18px;
    text-align: left;
    color: var(--mtfy-tl-text-muted);
    font-size: 0.9rem;
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container .compose-trigger:hover {
    border-color: var(--mtfy-tl-brand);
    background: var(--mtfy-tl-bg-card);
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .compose-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 4px;
    border-top: 1px solid var(--mtfy-tl-border);
    padding-top: 12px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

#feedorax-timeline-container.feedorax-timeline-container .compose-action {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 4px;
    min-width: 0;
    max-width: 100%;
    border-radius: var(--mtfy-tl-radius-sm);
    color: var(--mtfy-tl-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    transition: var(--mtfy-tl-t);
    box-sizing: border-box;
}

#feedorax-timeline-container.feedorax-timeline-container .compose-action svg {
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .compose-action span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#feedorax-timeline-container.feedorax-timeline-container .compose-action:hover {
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text);
}

/* Feed composer: 2×2 only below 390px (~320px phones); from 390px up, one row. */
@media (max-width: 389px) {
    #feedorax-timeline-container.feedorax-timeline-container .compose-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 10px;
    }

    #feedorax-timeline-container.feedorax-timeline-container .compose-action {
        flex: unset;
        width: 100%;
        padding: 10px 8px;
        font-size: 0.78rem;
        gap: 5px;
    }
}

@media (min-width: 390px) {
    #feedorax-timeline-container.feedorax-timeline-container .compose-actions {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
    }

    #feedorax-timeline-container.feedorax-timeline-container .compose-action {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        flex-direction: row;
    }
}

@media (max-width: 360px) {
    #feedorax-timeline-container.feedorax-timeline-container .compose-action {
        font-size: 0.72rem;
        padding: 9px 4px;
        flex-direction: column;
        gap: 4px;
    }

    #feedorax-timeline-container.feedorax-timeline-container .compose-action span {
        max-width: 100%;
    }
}

/* ══════════════════════════════════════════
   POST CARD
══════════════════════════════════════════ */
#feedorax-timeline-container.feedorax-timeline-container .post-card {
    background: var(--mtfy-tl-bg-card);
    border-radius: var(--mtfy-tl-radius);
    border: 1px solid var(--mtfy-tl-border);
    box-shadow: var(--mtfy-tl-shadow-sm);
    overflow: hidden;
    animation: slideUp 0.3s var(--mtfy-tl-ease) both;
    transition: box-shadow 0.2s var(--mtfy-tl-ease);
    margin-bottom: 16px;
}

#feedorax-timeline-container.feedorax-timeline-container .post-card:hover {
    box-shadow: var(--mtfy-tl-shadow);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Reshare: embedded original post (likes/comments are on the wrapper card only) */
#feedorax-timeline-container.feedorax-timeline-container .post-shared-embed {
    margin-top: 10px;
    border: 1px solid var(--mtfy-tl-border);
    border-radius: var(--mtfy-tl-radius-sm);
    overflow: hidden;
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container .post-shared-embed-header {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--mtfy-tl-text-muted);
    padding: 8px 12px 0;
}

#feedorax-timeline-container.feedorax-timeline-container .post-shared-embed-body {
    padding: 8px 12px 12px;
}

#feedorax-timeline-container.feedorax-timeline-container .post-shared-embed-author {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .post-shared-embed-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container .post-shared-embed-avatar--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mtfy-tl-brand-light);
    color: var(--mtfy-tl-brand);
    font-weight: 700;
    font-size: 13px;
}

#feedorax-timeline-container.feedorax-timeline-container .post-shared-embed-author-text {
    min-width: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .post-shared-embed-text {
    margin-top: 8px;
    font-size: 0.95rem;
    color: var(--mtfy-tl-text);
    word-break: break-word;
}

#feedorax-timeline-container.feedorax-timeline-container .post-shared-embed .post-image {
    margin-top: 10px;
    border-radius: var(--mtfy-tl-radius-sm);
    max-width: 100%;
}

#feedorax-timeline-container.feedorax-timeline-container .post-shared-embed--unavailable {
    padding: 12px 14px;
}

#feedorax-timeline-container.feedorax-timeline-container .post-shared-unavailable-msg {
    margin: 0;
    font-size: 0.9rem;
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .post-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
}

#feedorax-timeline-container.feedorax-timeline-container .post-user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--mtfy-tl-brand-light);
    border: 2px solid var(--mtfy-tl-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .post-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#feedorax-timeline-container.feedorax-timeline-container .post-user-info {
    flex: 1;
    min-width: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .post-user-name {
    display: block;
    font-weight: 700;
    font-size: 0.93rem;
    color: var(--mtfy-tl-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#feedorax-timeline-container.feedorax-timeline-container .post-time-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
}

#feedorax-timeline-container.feedorax-timeline-container .post-time {
    font-size: 0.76rem;
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .post-options {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--mtfy-tl-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--mtfy-tl-t);
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .post-options:hover {
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .post-options-wrap {
    position: relative;
}

#feedorax-timeline-container.feedorax-timeline-container .post-options-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    min-width: 180px;
    background: var(--mtfy-tl-bg-card);
    border-radius: var(--mtfy-tl-radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--mtfy-tl-border, rgba(0, 0, 0, 0.08));
    padding: 6px 0;
    z-index: 100;
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .post-options-menu.is-open {
    display: block;
}

#feedorax-timeline-container.feedorax-timeline-container .post-options-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    font-size: 0.9rem;
    color: var(--mtfy-tl-text-2);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

#feedorax-timeline-container.feedorax-timeline-container .post-options-item:hover {
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container .post-options-item svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

#feedorax-timeline-container.feedorax-timeline-container .post-options-danger {
    color: #b91c1c;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-options-danger,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-options-danger {
    color: #f87171;
}

#feedorax-timeline-container.feedorax-timeline-container .post-options-delete:hover {
    color: #c0392b;
}

#feedorax-timeline-container.feedorax-timeline-container .post-content {
    padding: 0 16px 12px;
}

#feedorax-timeline-container.feedorax-timeline-container .post-text {
    font-size: 0.93rem;
    line-height: 1.6;
    color: var(--mtfy-tl-text-2);
    margin-bottom: 12px;
}

#feedorax-timeline-container.feedorax-timeline-container .post-image,
#feedorax-timeline-container.feedorax-timeline-container .post-video {
    width: 100%;
    border-radius: var(--mtfy-tl-radius-sm);
    object-fit: cover;
    max-height: 480px;
}

#feedorax-timeline-container.feedorax-timeline-container .post-video {
    display: block;
    background: #000;
}

/* Custom video controller */
#feedorax-timeline-container.feedorax-timeline-container .feedorax-video-wrap {
    position: relative;
    width: 100%;
    border-radius: var(--mtfy-tl-radius-sm);
    overflow: hidden;
    background: #000;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-video-wrap .post-video {
    width: 100%;
    max-height: 480px;
    display: block;
    vertical-align: top;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-video-center {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-video-wrap:hover .feedorax-video-center {
    opacity: 1;
    pointer-events: auto;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-video-center .mtfy-video-play {
    width: 56px;
    height: 56px;
    font-size: 1.2rem;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-video-center .mtfy-video-play .mtfy-video-icon-pause {
    width: 14px;
    height: 16px;
    border-left-width: 4px;
    border-right-width: 4px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-video-center .mtfy-video-play .mtfy-video-icon-play {
    width: 0;
    height: 0;
    border-left-width: 14px;
    border-top-width: 8px;
    border-bottom-width: 8px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-video-center .mtfy-video-back10,
#feedorax-timeline-container.feedorax-timeline-container .feedorax-video-center .mtfy-video-fwd10 {
    width: 44px;
    height: 44px;
    min-width: 44px;
    font-size: 0.9rem;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    color: #fff;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-video-wrap:hover .feedorax-video-controls {
    opacity: 1;
    pointer-events: auto;
}

#feedorax-timeline-container.feedorax-timeline-container .mtfy-video-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.15s;
}

#feedorax-timeline-container.feedorax-timeline-container .mtfy-video-btn:hover {
    background: rgba(255, 255, 255, 0.35);
}

#feedorax-timeline-container.feedorax-timeline-container .mtfy-video-play {
    position: relative;
    overflow: visible;
}

#feedorax-timeline-container.feedorax-timeline-container .mtfy-video-icon-play,
#feedorax-timeline-container.feedorax-timeline-container .mtfy-video-icon-pause {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#feedorax-timeline-container.feedorax-timeline-container .mtfy-video-icon-play {
    width: 0;
    height: 0;
    border-left: 10px solid currentColor;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    margin-left: 0;
    background: none;
}

#feedorax-timeline-container.feedorax-timeline-container .mtfy-video-icon-pause {
    width: 10px;
    height: 12px;
    border-left: 3px solid currentColor;
    border-right: 3px solid currentColor;
    background: none;
    box-sizing: border-box;
}

#feedorax-timeline-container.feedorax-timeline-container .mtfy-video-playing .mtfy-video-icon-play {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-video-wrap:not(.mtfy-video-playing) .mtfy-video-icon-pause {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .mtfy-video-progress-wrap {
    flex: 1;
    min-width: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .mtfy-video-progress-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    position: relative;
}

#feedorax-timeline-container.feedorax-timeline-container .mtfy-video-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--mtfy-tl-brand, #1877f2);
    width: 0%;
    transition: width 0.1s;
}

#feedorax-timeline-container.feedorax-timeline-container .mtfy-video-back10,
#feedorax-timeline-container.feedorax-timeline-container .mtfy-video-fwd10 {
    width: auto;
    min-width: 36px;
    padding: 0 8px;
}

#feedorax-timeline-container.feedorax-timeline-container .mtfy-video-time {
    flex-shrink: 0;
    font-size: 0.75rem;
    opacity: 0.95;
}

/* Post stats bar */
#feedorax-timeline-container.feedorax-timeline-container .post-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-top: 1px solid var(--mtfy-tl-border);
    border-bottom: 1px solid var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container .post-stats-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

#feedorax-timeline-container.feedorax-timeline-container .post-stats-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

#feedorax-timeline-container.feedorax-timeline-container .reaction-bubbles {
    display: flex;
    align-items: center;
}

#feedorax-timeline-container.feedorax-timeline-container .reaction-bubbles:empty {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .reaction-bubble {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-left: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 14px;
    line-height: 1;
}

#feedorax-timeline-container.feedorax-timeline-container .reaction-bubble:first-child {
    margin-left: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .reaction-bubble img,
#feedorax-timeline-container.feedorax-timeline-container .reaction-bubble .reaction-emoji-icon {
    width: 15px;
    height: 15px;
    object-fit: contain;
}

#feedorax-timeline-container.feedorax-timeline-container .post-stats-count {
    font-size: 0.82rem;
    color: var(--mtfy-tl-text-muted);
    font-weight: 500;
}

#feedorax-timeline-container.feedorax-timeline-container .post-stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    color: var(--mtfy-tl-text-muted);
    font-weight: 500;
    cursor: pointer;
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container .post-stat-item:hover {
    color: var(--mtfy-tl-brand);
}

/* ── Post Action Buttons ── */
#feedorax-timeline-container.feedorax-timeline-container .post-actions {
    display: flex;
    padding: 4px 8px;
    gap: 2px;
}

#feedorax-timeline-container.feedorax-timeline-container .post-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 8px;
    border-radius: var(--mtfy-tl-radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mtfy-tl-text-muted);
    transition: var(--mtfy-tl-t);
    position: relative;
}

#feedorax-timeline-container.feedorax-timeline-container .post-action-btn:hover {
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .post-action-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .post-action-icon svg {
    display: block;
}

#feedorax-timeline-container.feedorax-timeline-container .post-action-icon .reaction-active-img {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: contain;
    font-size: 18px;
    line-height: 1;
}

/* Reaction states on like button */
#feedorax-timeline-container.feedorax-timeline-container .like-btn.liked {
    color: #1a56db;
}

#feedorax-timeline-container.feedorax-timeline-container .like-btn.liked:hover {
    background: #eff6ff;
}

#feedorax-timeline-container.feedorax-timeline-container .like-btn.reacted-love {
    color: #e0345e;
}

#feedorax-timeline-container.feedorax-timeline-container .like-btn.reacted-haha {
    color: #d97706;
}

#feedorax-timeline-container.feedorax-timeline-container .like-btn.reacted-wow {
    color: #b45309;
}

#feedorax-timeline-container.feedorax-timeline-container .like-btn.reacted-sad {
    color: #2563eb;
}

#feedorax-timeline-container.feedorax-timeline-container .like-btn.reacted-angry {
    color: #c2410c;
}

/* ── Reaction Picker ── */
#feedorax-timeline-container.feedorax-timeline-container .reaction-picker {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    transform: translateY(8px) scale(0.88);
    transform-origin: bottom left;
    background: var(--mtfy-tl-bg-card);
    border-radius: var(--mtfy-tl-radius);
    padding: 6px 8px;
    display: flex;
    gap: 2px;
    box-shadow: var(--mtfy-tl-shadow-lg);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s var(--mtfy-tl-ease), transform 0.2s var(--mtfy-tl-spring);
    z-index: 100;
    border: 1px solid var(--mtfy-tl-border);
    white-space: nowrap;
}

/* JS-controlled only — opens via .visible class (click on desktop, press & hold on mobile) */
#feedorax-timeline-container.feedorax-timeline-container .reaction-picker.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

#feedorax-timeline-container.feedorax-timeline-container .reaction-picker.picker-hide {
    opacity: 0;
    transform: translateY(6px) scale(0.9);
    pointer-events: none;
    transition: opacity 0.18s var(--mtfy-tl-ease), transform 0.18s var(--mtfy-tl-ease);
}

#feedorax-timeline-container.feedorax-timeline-container .reaction {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative;
    padding: 2px 2px 0;
}

#feedorax-timeline-container.feedorax-timeline-container .reaction img,
#feedorax-timeline-container.feedorax-timeline-container .reaction .reaction-emoji-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
    object-fit: contain;
    font-size: 30px;
    line-height: 1;
    transition: transform 0.2s var(--mtfy-tl-spring), box-shadow 0.15s;
    position: relative;
    z-index: 1;
}

#feedorax-timeline-container.feedorax-timeline-container .reaction::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.2s var(--mtfy-tl-spring);
    z-index: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .reaction[data-reaction="like"] ::before {
    background: #e8f0fe;
}

#feedorax-timeline-container.feedorax-timeline-container .reaction[data-reaction="love"] ::before {
    background: #fde8ee;
}

#feedorax-timeline-container.feedorax-timeline-container .reaction[data-reaction="haha"] ::before {
    background: #fef9e0;
}

#feedorax-timeline-container.feedorax-timeline-container .reaction[data-reaction="wow"] ::before {
    background: #fff3cd;
}

#feedorax-timeline-container.feedorax-timeline-container .reaction[data-reaction="sad"] ::before {
    background: #e0f0ff;
}

#feedorax-timeline-container.feedorax-timeline-container .reaction[data-reaction="angry"] ::before {
    background: #fde8df;
}

#feedorax-timeline-container.feedorax-timeline-container .reaction:hover::before {
    transform: translate(-50%, -50%) scale(1.25);
}

#feedorax-timeline-container.feedorax-timeline-container .reaction:hover img,
#feedorax-timeline-container.feedorax-timeline-container .reaction:hover .reaction-emoji-icon {
    transform: scale(1.3) translateY(-4px);
    box-shadow: none;
}

#feedorax-timeline-container.feedorax-timeline-container .reaction:active img,
#feedorax-timeline-container.feedorax-timeline-container .reaction:active .reaction-emoji-icon {
    transform: scale(1.05);
}

#feedorax-timeline-container.feedorax-timeline-container .reaction-label {
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    border-radius: 6px;
    padding: 2px 5px;
    color: #fff;
    line-height: 1;
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 0.12s, transform 0.12s;
    z-index: 2;
}

#feedorax-timeline-container.feedorax-timeline-container .reaction[data-reaction="like"] .reaction-label {
    background: #1a56db;
}

#feedorax-timeline-container.feedorax-timeline-container .reaction[data-reaction="love"] .reaction-label {
    background: #e0345e;
}

#feedorax-timeline-container.feedorax-timeline-container .reaction[data-reaction="haha"] .reaction-label {
    background: #d97706;
}

#feedorax-timeline-container.feedorax-timeline-container .reaction[data-reaction="wow"] .reaction-label {
    background: #b45309;
}

#feedorax-timeline-container.feedorax-timeline-container .reaction[data-reaction="sad"] .reaction-label {
    background: #2563eb;
}

#feedorax-timeline-container.feedorax-timeline-container .reaction[data-reaction="angry"] .reaction-label {
    background: #c2410c;
}

#feedorax-timeline-container.feedorax-timeline-container .reaction:hover .reaction-label {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ══════════════════════════════════════════
   COMMENTS
══════════════════════════════════════════ */
#feedorax-timeline-container.feedorax-timeline-container .comments-section {
    padding: 0 16px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s var(--mtfy-tl-ease), padding 0.25s var(--mtfy-tl-ease);
}

#feedorax-timeline-container.feedorax-timeline-container .post-card.is-comments-open .comments-section {
    max-height: 1000px;
    padding: 12px 16px 14px;
}

#feedorax-timeline-container.feedorax-timeline-container .comment {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    animation: slideUp 0.25s var(--mtfy-tl-ease);
}

#feedorax-timeline-container.feedorax-timeline-container .comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--mtfy-tl-brand-light);
}

#feedorax-timeline-container.feedorax-timeline-container .comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

#feedorax-timeline-container.feedorax-timeline-container .comment-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .comment-content {
    flex: 1;
    min-width: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .comment-bubble {
    background: var(--mtfy-tl-bg-input);
    border-radius: 14px;
    padding: 8px 14px;
    display: inline-block;
    max-width: 100%;
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container .comment:hover .comment-bubble {
    background: var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container .comment-author {
    font-weight: 700;
    font-size: 0.82rem;
    margin-bottom: 2px;
}

#feedorax-timeline-container.feedorax-timeline-container .comment-reply-to {
    color: var(--mtfy-tl-brand);
    font-weight: 600;
}

#feedorax-timeline-container.feedorax-timeline-container .comment-text {
    font-size: 0.88rem;
    line-height: 1.45;
}

#feedorax-timeline-container.feedorax-timeline-container .comment-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding-left: 12px;
    margin-top: 4px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .comment-action {
    cursor: pointer;
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container .comment-action:hover {
    color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .comment-react-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

#feedorax-timeline-container.feedorax-timeline-container .comment-react-bubbles {
    display: inline-flex;
    align-items: center;
}

#feedorax-timeline-container.feedorax-timeline-container .comment-react-bubbles .reaction-bubble {
    display: inline-flex;
}

#feedorax-timeline-container.feedorax-timeline-container .comment-react-bubbles .reaction-bubble img,
#feedorax-timeline-container.feedorax-timeline-container .comment-react-bubbles .reaction-bubble .reaction-emoji-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#feedorax-timeline-container.feedorax-timeline-container .comment-react--reacted {
    color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .comment-reaction-picker {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    transform: translateY(6px) scale(0.9);
    transform-origin: bottom left;
    background: var(--mtfy-tl-bg-card);
    border-radius: var(--mtfy-tl-radius);
    padding: 6px 8px;
    display: flex;
    gap: 2px;
    min-width: 240px;
    justify-content: space-between;
    box-shadow: var(--mtfy-tl-shadow-lg);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s var(--mtfy-tl-ease), transform 0.18s var(--mtfy-tl-ease);
    z-index: 100;
    border: 1px solid var(--mtfy-tl-border);
    white-space: nowrap;
}

#feedorax-timeline-container.feedorax-timeline-container .comment-reaction-picker.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

#feedorax-timeline-container.feedorax-timeline-container .comment-reaction-picker.picker-hide {
    opacity: 0;
    transform: translateY(4px) scale(0.92);
    pointer-events: none;
}

#feedorax-timeline-container.feedorax-timeline-container .comment-reaction-picker .reaction {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 2px 2px 0;
}

#feedorax-timeline-container.feedorax-timeline-container .comment-reaction-picker .reaction img,
#feedorax-timeline-container.feedorax-timeline-container .comment-reaction-picker .reaction .reaction-emoji-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: contain;
    font-size: 30px;
    line-height: 1;
    transition: transform 0.2s var(--mtfy-tl-spring);
}

#feedorax-timeline-container.feedorax-timeline-container .comment-reaction-picker .reaction:hover img,
#feedorax-timeline-container.feedorax-timeline-container .comment-reaction-picker .reaction:hover .reaction-emoji-icon {
    transform: scale(1.15);
}

#feedorax-timeline-container.feedorax-timeline-container .comment-reaction-picker .reaction-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--mtfy-tl-text-muted);
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .comment-like-count {
    cursor: default;
}

#feedorax-timeline-container.feedorax-timeline-container .comment-delete:hover {
    color: #c0392b;
}

#feedorax-timeline-container.feedorax-timeline-container .comment-time {
    cursor: default;
    font-weight: 500;
}

#feedorax-timeline-container.feedorax-timeline-container .comment-input-container {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
}

#feedorax-timeline-container.feedorax-timeline-container .comment-input {
    flex: 1;
    padding: 9px 14px;
    border-radius: var(--mtfy-tl-radius-pill);
    background: var(--mtfy-tl-bg-input);
    border: 1.5px solid transparent;
    outline: none;
    font-size: 0.88rem;
    color: var(--mtfy-tl-text);
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container .comment-input:focus {
    border-color: var(--mtfy-tl-brand);
    background: #fff;
    box-shadow: 0 0 0 3px var(--mtfy-tl-brand-glow);
}

#feedorax-timeline-container.feedorax-timeline-container .comment-input::placeholder {
    color: var(--mtfy-tl-text-muted);
}

/* ══════════════════════════════════════════
   RIGHT SIDEBAR
══════════════════════════════════════════ */
#feedorax-timeline-container.feedorax-timeline-container .sidebar-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: calc(var(--mtfy-tl-topbar-h) + 16px);
    height: fit-content;
    min-width: 0;
}

#feedorax-timeline-container.feedorax-timeline-container #feedorax-connection-requests-widget {
    min-width: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .widget {
    background: var(--mtfy-tl-bg-card);
    border-radius: var(--mtfy-tl-radius);
    border: 1px solid var(--mtfy-tl-border);
    box-shadow: var(--mtfy-tl-shadow-sm);
    padding: 16px;
}

#feedorax-timeline-container.feedorax-timeline-container .widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

#feedorax-timeline-container.feedorax-timeline-container .widget-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container #feedorax-feed-view .feedorax-sidebar-bio-widget {
    margin-bottom: 16px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sidebar-bio-hint {
    margin: -6px 0 12px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sidebar-bio-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 88px;
    padding: 10px 12px;
    border-radius: var(--mtfy-tl-radius-sm);
    border: 1px solid var(--mtfy-tl-border);
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text);
    font-size: 0.88rem;
    line-height: 1.45;
    resize: vertical;
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sidebar-bio-input:focus {
    outline: none;
    border-color: var(--mtfy-tl-brand);
    box-shadow: 0 0 0 3px var(--mtfy-tl-brand-glow);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sidebar-bio-input::placeholder {
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sidebar-bio-actions {
    margin-top: 10px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sidebar-bio-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: var(--mtfy-tl-radius-sm);
    border: none;
    background: var(--mtfy-tl-brand);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sidebar-bio-save:hover:not(:disabled) {
    filter: brightness(1.05);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sidebar-bio-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sidebar-bio-msg {
    margin: 10px 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #047857;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sidebar-bio-msg.feedorax-sidebar-bio-msg--err {
    color: #b91c1c;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .feedorax-sidebar-bio-msg,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .feedorax-sidebar-bio-msg {
    color: #6ee7b7;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .feedorax-sidebar-bio-msg.feedorax-sidebar-bio-msg--err,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .feedorax-sidebar-bio-msg.feedorax-sidebar-bio-msg--err {
    color: #fca5a5;
}

#feedorax-timeline-container.feedorax-timeline-container .widget-action {
    font-size: 0.78rem;
    color: var(--mtfy-tl-brand);
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--mtfy-tl-radius-pill);
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container .widget-action:hover {
    background: var(--mtfy-tl-brand-light);
}

/* Suggestions */
#feedorax-timeline-container.feedorax-timeline-container .suggest-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#feedorax-timeline-container.feedorax-timeline-container .suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

#feedorax-timeline-container.feedorax-timeline-container .suggest-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container .suggest-info {
    flex: 1;
    min-width: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .suggest-name {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--mtfy-tl-text);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#feedorax-timeline-container.feedorax-timeline-container a.suggest-name--profile {
    text-decoration: none;
    color: inherit;
}

#feedorax-timeline-container.feedorax-timeline-container a.suggest-name--profile:hover {
    text-decoration: underline;
    color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .suggest-meta {
    font-size: 0.74rem;
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .btn-connect {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: var(--mtfy-tl-radius-pill);
    background: var(--mtfy-tl-brand-light);
    color: var(--mtfy-tl-brand);
    font-size: 0.76rem;
    font-weight: 700;
    transition: var(--mtfy-tl-t);
    white-space: nowrap;
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .btn-connect:hover {
    background: var(--mtfy-tl-brand);
    color: #fff;
}

#feedorax-timeline-container.feedorax-timeline-container .btn-connect.is-connected,
#feedorax-timeline-container.feedorax-timeline-container .btn-connect:disabled {
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text-muted);
    cursor: default;
}

#feedorax-timeline-container.feedorax-timeline-container .suggest-list-loading,
#feedorax-timeline-container.feedorax-timeline-container .suggest-list-empty {
    display: block;
    padding: 12px 0;
    font-size: 0.85rem;
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .suggest-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mtfy-tl-brand-light);
    color: var(--mtfy-tl-brand);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Friend requests */
#feedorax-timeline-container.feedorax-timeline-container .request-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .request-list-hide {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .request-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--mtfy-tl-border);
    transition: opacity 0.2s;
    min-width: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .request-item:last-child {
    border-bottom: none;
}

#feedorax-timeline-container.feedorax-timeline-container .request-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container .request-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

#feedorax-timeline-container.feedorax-timeline-container .request-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#feedorax-timeline-container.feedorax-timeline-container .request-name {
    font-size: clamp(0.75rem, 2vw, 0.83rem);
    font-weight: 600;
    color: var(--mtfy-tl-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#feedorax-timeline-container.feedorax-timeline-container .request-time {
    font-size: clamp(0.65rem, 1.8vw, 0.72rem);
    color: var(--mtfy-tl-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#feedorax-timeline-container.feedorax-timeline-container .request-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .request-accept {
    padding: 5px 10px;
    border-radius: var(--mtfy-tl-radius-pill);
    background: var(--mtfy-tl-brand);
    color: #fff;
    font-size: clamp(0.68rem, 1.6vw, 0.74rem);
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: var(--mtfy-tl-t);
    white-space: nowrap;
}

#feedorax-timeline-container.feedorax-timeline-container .request-accept:hover {
    background: var(--mtfy-tl-brand-dark, #4338ca);
    color: #fff;
}

#feedorax-timeline-container.feedorax-timeline-container .request-decline {
    padding: 5px 10px;
    border-radius: var(--mtfy-tl-radius-pill);
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text-muted);
    font-size: clamp(0.68rem, 1.6vw, 0.74rem);
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: var(--mtfy-tl-t);
    white-space: nowrap;
}

#feedorax-timeline-container.feedorax-timeline-container .request-decline:hover {
    background: var(--mtfy-tl-border);
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .request-list-loading,
#feedorax-timeline-container.feedorax-timeline-container .request-list-empty {
    display: block;
    padding: 12px 0;
    font-size: clamp(0.8rem, 2vw, 0.85rem);
    color: var(--mtfy-tl-text-muted);
}

/* Friend requests: narrow sidebar / small screens */
@media (max-width: 1200px) {
    #feedorax-timeline-container.feedorax-timeline-container .request-item {
        flex-wrap: wrap;
        gap: 8px;
    }

    #feedorax-timeline-container.feedorax-timeline-container .request-actions {
        width: 100%;
        justify-content: flex-end;
        padding-left: 50px;
    }
}

@media (max-width: 480px) {
    #feedorax-timeline-container.feedorax-timeline-container .request-item {
        padding: 10px 0;
    }

    #feedorax-timeline-container.feedorax-timeline-container .request-avatar {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    #feedorax-timeline-container.feedorax-timeline-container .request-actions {
        padding-left: 0;
        gap: 8px;
    }

    #feedorax-timeline-container.feedorax-timeline-container .request-accept,
    #feedorax-timeline-container.feedorax-timeline-container .request-decline {
        padding: 6px 12px;
    }
}

/* Online now */
#feedorax-timeline-container.feedorax-timeline-container .online-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#feedorax-timeline-container.feedorax-timeline-container .online-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

#feedorax-timeline-container.feedorax-timeline-container .online-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: visible;
    flex-shrink: 0;
    position: relative;
    border: 2px solid var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container .online-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

#feedorax-timeline-container.feedorax-timeline-container .online-dot {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 9px;
    height: 9px;
    background: #22c55e;
    border-radius: 50%;
    border: 2px solid #fff;
    box-sizing: content-box;
}

#feedorax-timeline-container.feedorax-timeline-container .online-name {
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--mtfy-tl-text-2);
}

#feedorax-timeline-container.feedorax-timeline-container a.online-name--profile {
    text-decoration: none;
    color: inherit;
}

#feedorax-timeline-container.feedorax-timeline-container a.online-name--profile:hover {
    text-decoration: underline;
    color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .online-list-loading,
#feedorax-timeline-container.feedorax-timeline-container .online-list-empty {
    display: block;
    padding: 12px 0;
    font-size: 0.85rem;
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .online-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--mtfy-tl-brand-light);
    color: var(--mtfy-tl-brand);
    font-size: 0.7rem;
    font-weight: 600;
}

/* Trending */
#feedorax-timeline-container.feedorax-timeline-container .trend-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#feedorax-timeline-container.feedorax-timeline-container .trend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: var(--mtfy-tl-radius-sm);
    cursor: pointer;
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container .trend-item:hover {
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container .trend-tag {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .trend-count {
    font-size: 0.75rem;
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .trend-list-loading,
#feedorax-timeline-container.feedorax-timeline-container .trend-list-empty {
    display: block;
    padding: 12px 0;
    font-size: 0.85rem;
    color: var(--mtfy-tl-text-muted);
}

/* ══════════════════════════════════════════
   STORY COMPOSER MODAL (story-style: big preview, text on media)
══════════════════════════════════════════ */
#feedorax-timeline-container.feedorax-timeline-container .story-composer-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

#feedorax-timeline-container.feedorax-timeline-container .story-composer-overlay:not([hidden]) {
    opacity: 1;
    pointer-events: all;
}

#feedorax-timeline-container.feedorax-timeline-container .story-composer-box {
    position: relative;
    width: 100%;
    max-width: 360px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    background: #000;
}

#feedorax-timeline-container.feedorax-timeline-container .story-composer-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    max-height: min(75vh, 640px);
    background: #111;
    overflow: hidden;
}

#feedorax-timeline-container.feedorax-timeline-container .story-composer-media-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

#feedorax-timeline-container.feedorax-timeline-container .story-composer-media-stage {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    will-change: transform;
}

#feedorax-timeline-container.feedorax-timeline-container .story-composer-media-stage .story-composer-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    vertical-align: top;
    pointer-events: none;
}

/* Video: direct child of preview. Image uses .story-composer-media-viewport inner structure. */
#feedorax-timeline-container.feedorax-timeline-container .story-composer-preview > .story-composer-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#feedorax-timeline-container.feedorax-timeline-container .story-composer-text-overlay {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 70px;
    top: 44px;
    padding: 12px;
    pointer-events: none;
    z-index: 1;
}

#feedorax-timeline-container.feedorax-timeline-container .story-composer-text-overlay[aria-hidden="true"] {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .story-composer-text-draggable {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(1rem, 4vw, 1.5rem);
    font-weight: 600;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.5);
    word-break: break-word;
    line-height: 1.35;
    cursor: move;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    max-width: 100%;
    pointer-events: auto;
}

#feedorax-timeline-container.feedorax-timeline-container .story-composer-text-icon {
    position: absolute;
    top: 12px;
    right: 52px;
    z-index: 3;
    height: 36px;
    padding: 0 12px;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

#feedorax-timeline-container.feedorax-timeline-container .story-composer-text-icon:hover {
    background: rgba(0, 0, 0, 0.75);
}

#feedorax-timeline-container.feedorax-timeline-container .story-composer-text-icon-label {
    font-size: 0.8125rem;
    font-weight: 600;
}

#feedorax-timeline-container.feedorax-timeline-container .story-composer-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

#feedorax-timeline-container.feedorax-timeline-container .story-composer-close:hover {
    background: rgba(0, 0, 0, 0.75);
}

#feedorax-timeline-container.feedorax-timeline-container .story-composer-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 14px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
}

#feedorax-timeline-container.feedorax-timeline-container .story-composer-input-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
}

#feedorax-timeline-container.feedorax-timeline-container .story-composer-input-wrap[hidden] {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .story-composer-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 24px;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    color: #1e293b;
    font-size: 0.9375rem;
    transition: background 0.2s;
}

#feedorax-timeline-container.feedorax-timeline-container .story-composer-input::placeholder {
    color: #64748b;
}

#feedorax-timeline-container.feedorax-timeline-container .story-composer-input:focus {
    outline: none;
    background: #fff;
}

#feedorax-timeline-container.feedorax-timeline-container .story-composer-bar .story-composer-share {
    flex-shrink: 0;
    padding: 10px 18px;
    border-radius: 24px;
    font-weight: 600;
    font-size: 0.9375rem;
    white-space: nowrap;
}

#feedorax-timeline-container.feedorax-timeline-container .story-composer-share:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Story viewer: social-style (progress, profile, nav, reply) */
#feedorax-timeline-container.feedorax-timeline-container .story-viewer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 16px;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-overlay[hidden] {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-overlay:not([hidden]) {
    display: flex;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-box {
    position: relative;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    border-radius: 16px;
    overflow: visible;
    background: #000;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    gap: 4px;
    padding: 10px 12px;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-progress-segment {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.35);
    overflow: hidden;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-progress-segment--active {
    background: rgba(255, 255, 255, 0.35);
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-progress-segment--done .story-viewer-progress-fill {
    width: 100%;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 2px;
    background: #fff;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-progress-segment--running .story-viewer-progress-fill {
    animation: story-viewer-progress-fill linear forwards;
}

@keyframes story-viewer-progress-fill {
    to {
        width: 100%;
    }
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 44px 12px 12px;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-user-meta {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-time {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.8);
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-topbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-topbar-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-dots {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    transition: background 0.2s;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-dots:hover {
    background: rgba(255, 255, 255, 0.4);
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-dots-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    min-width: 168px;
    padding: 6px 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    z-index: 30;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-dots-menu[hidden] {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-dots-menu .story-viewer-dots-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: #0f172a;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
    -webkit-font-smoothing: antialiased;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-dots-menu .story-viewer-dots-item:hover {
    background: #f1f5f9;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-dots-menu .story-viewer-delete {
    color: #b91c1c;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-dots-menu .story-viewer-delete:hover {
    background: #fef2f2;
    color: #991b1b;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-close {
    position: static;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-close:hover {
    background: rgba(255, 255, 255, 0.4);
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-nav:hover {
    background: rgba(255, 255, 255, 0.4);
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-nav--prev {
    left: 8px;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-nav--next {
    right: 8px;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-media-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    max-height: 90vh;
    overflow: hidden;
    border-radius: 16px;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-media-inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(1rem, 4vw, 1.5rem);
    font-weight: 600;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.5);
    word-break: break-word;
    line-height: 1.35;
    padding: 12px;
    pointer-events: none;
    max-width: 90%;
    z-index: 2;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-text[hidden] {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-bottombar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 14px 18px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-bottombar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-react-quick {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 0 2px;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-react-chip {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s ease, background 0.12s ease;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-react-chip:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.06);
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-emoji {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    cursor: pointer;
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-reply {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 16px;
    border-radius: 21px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 0.9375rem;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-reply::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-reply:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.25);
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-send {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #1a73e8;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}

#feedorax-timeline-container.feedorax-timeline-container .story-viewer-send:hover {
    background: #1557b0;
}

/* Moment "Your story" caption when text is present */
#feedorax-timeline-container.feedorax-timeline-container .moment-story-caption {
    display: block;
    position: absolute;
    bottom: 28px;
    left: 6px;
    right: 6px;
    font-size: 0.7rem;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ══════════════════════════════════════════
   MODAL
══════════════════════════════════════════ */
#feedorax-timeline-container.feedorax-timeline-container .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--mtfy-tl-ease);
    padding: 20px;
}

#feedorax-timeline-container.feedorax-timeline-container .modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

#feedorax-timeline-container.feedorax-timeline-container .modal-box {
    background: var(--mtfy-tl-bg-card);
    border-radius: var(--mtfy-tl-radius-lg);
    width: 100%;
    max-width: 520px;
    box-shadow: var(--mtfy-tl-shadow-lg);
    overflow: hidden;
    transform: translateY(20px) scale(0.97);
    transition: transform 0.25s var(--mtfy-tl-spring);
    border: 1px solid var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container .modal-overlay.active .modal-box {
    transform: translateY(0) scale(1);
}

#feedorax-timeline-container.feedorax-timeline-container .modal-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container .modal-hdr h3 {
    font-size: 1.05rem;
    font-weight: 700;
}

#feedorax-timeline-container.feedorax-timeline-container .modal-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--mtfy-tl-bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mtfy-tl-text-muted);
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container .modal-close:hover {
    background: var(--mtfy-tl-border);
    color: var(--mtfy-tl-text);
}

/* Post modal – light card style */
#feedorax-timeline-container.feedorax-timeline-container .post-modal-overlay {
    background: rgba(0, 0, 0, 0.35);
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-card {
    background: #fff;
    border-radius: 12px;
    max-width: 500px;
    border: 1px solid #e4e6eb;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    overflow: visible;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-hdr {
    padding: 16px 20px;
    border-bottom: 1px solid #e4e6eb;
    justify-content: center;
    position: relative;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1c1e21;
    margin: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e4e6eb;
    color: #1c1e21;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-close:hover {
    background: #d8dadf;
    color: #1c1e21;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-body {
    padding: 16px 20px 12px;
    background: #fff;
    overflow: visible;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-user {
    margin-bottom: 12px;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-name {
    font-size: 1rem;
    font-weight: 600;
    color: #1c1e21;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-privacy-wrap {
    position: relative;
    display: inline-block;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-privacy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: none;
    border-radius: 6px;
    background: #e4e6eb;
    color: #1c1e21;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-privacy:hover {
    background: #d8dadf;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-privacy-dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 4px;
    min-width: 120px;
    background: #fff;
    border: 1px solid #e4e6eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    overflow: hidden;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-privacy-dropdown[hidden] {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-privacy-option {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    font-size: 0.9375rem;
    color: #1c1e21;
    text-align: left;
    cursor: pointer;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-privacy-option:hover {
    background: #f0f2f5;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-compose-wrap {
    position: relative;
    margin-bottom: 8px;
    overflow: visible;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-textarea {
    min-height: 88px;
    max-height: 320px;
    padding: 14px 16px 12px;
    color: #1c1e21;
    background: #fff;
    border: none;
    outline: none;
    box-shadow: none;
    width: 100%;
    resize: none;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-textarea:focus {
    border: none;
    outline: none;
    box-shadow: none;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-textarea::placeholder {
    color: #65676b;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-compose-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px 12px;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-format-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #65676b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-format-btn:hover {
    background: #f0f2f5;
    color: #1c1e21;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-emoji-btn.active {
    background: #e4e6eb;
    color: #1c1e21;
}

/* Simple emoji popup – clone of reference: rounded, light grey, header + grid + category bar */
#feedorax-timeline-container.feedorax-timeline-container .post-modal-emoji-picker {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 360px;
    max-height: 90vh;
    z-index: 10001;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-emoji-picker[hidden] {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-emoji-picker-inner {
    background: #f5f6f8;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-height: 90vh;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-emoji-wc {
    width: 100%;
    min-width: 320px;
    max-width: 360px;
    height: 360px;
    max-height: 85vh;
    --background: #fff;
    --border-color: #e0e0e0;
    --border-size: 1px;
    --border-radius: 12px;
    --num-columns: 8;
    --emoji-size: 1.25rem;
    --emoji-padding: 0.45rem;
    --button-hover-background: #e8e8e8;
    --button-active-background: #e8f0fe;
    --category-emoji-size: 1.125rem;
    --category-emoji-padding: 0.5rem;
    --indicator-color: #1b74e4;
    --indicator-height: 3px;
    --category-font-color: #333;
    --category-font-size: 0.9375rem;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-emoji-picker-tail {
    display: none;
}


#feedorax-timeline-container.feedorax-timeline-container .post-modal-attachments {
    display: flex;
    align-items: center;
    gap: 4px;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-attach {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #65676b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-attach:hover {
    background: #f0f2f5;
    color: #1c1e21;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-attach svg {
    width: 20px;
    height: 20px;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-attach-gif {
    width: auto;
    padding: 0 8px;
    border-radius: 6px;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-gif-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #65676b;
}

/* Post modal extras (tagged, feeling, location, gif chips) */
#feedorax-timeline-container.feedorax-timeline-container .post-modal-extras {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 0;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-extra-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 16px;
    background: #e4e6eb;
    font-size: 0.8125rem;
    color: #1c1e21;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-extra-chip img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 4px;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-extra-remove {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0 2px;
    font-size: 1rem;
    line-height: 1;
    color: #65676b;
    margin-left: 2px;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-extra-remove:hover {
    color: #1c1e21;
}

/* Post modal dropdowns (tag people, feeling, location, gif) */
#feedorax-timeline-container.feedorax-timeline-container .post-modal-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
    z-index: 100;
    background: #fff;
    border: 1px solid #e4e6eb;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    max-height: 280px;
    overflow: hidden;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-dropdown[hidden] {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-dropdown-inner {
    padding: 8px;
    max-height: 268px;
    overflow-y: auto;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-dropdown-search,
#feedorax-timeline-container.feedorax-timeline-container .post-modal-location-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e4e6eb;
    border-radius: 8px;
    font-size: 0.9375rem;
    margin-bottom: 8px;
    box-sizing: border-box;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-dropdown-hint {
    margin: 12px 0;
    padding: 0;
    font-size: 0.875rem;
    color: #65676b;
    text-align: center;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-tag-people-list {
    max-height: 220px;
    overflow-y: auto;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-tag-person {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font-size: 0.9375rem;
    color: #1c1e21;
    text-align: left;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-tag-person:hover {
    background: #f0f2f5;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-tag-person img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-tag-initial {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--mtfy-tl-brand-light, #e7f3ff);
    color: var(--mtfy-tl-brand, #1b74e4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-feeling-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-feeling-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font-size: 0.9375rem;
    color: #1c1e21;
    text-align: left;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-feeling-item:hover {
    background: #f0f2f5;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-feeling-emoji {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-feeling-label {
    flex: 1;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-location-current {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid #e4e6eb;
    border-radius: 8px;
    background: #f0f2f5;
    color: #1c1e21;
    font-size: 0.9375rem;
    cursor: pointer;
    text-align: left;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-location-current:hover {
    background: #e4e6eb;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-location-current:disabled {
    opacity: 0.7;
    cursor: wait;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-location-current svg {
    flex-shrink: 0;
    color: var(--mtfy-tl-brand, #1b74e4);
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-location-divider {
    margin: 0 0 8px;
    font-size: 0.8125rem;
    color: #65676b;
    text-align: center;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-location-results {
    max-height: 180px;
    overflow-y: auto;
    margin-bottom: 8px;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-location-result {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 0.875rem;
    color: #1c1e21;
    text-align: left;
    cursor: pointer;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-location-result:hover {
    background: #f0f2f5;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-location-message {
    margin: 8px 0;
    padding: 0;
    font-size: 0.875rem;
    color: #65676b;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-location-error {
    color: #b94a48;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-location-done {
    margin-top: 8px;
    width: 100%;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-gif-dropdown .post-modal-dropdown-inner {
    max-height: 320px;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-gif-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    max-height: 240px;
    overflow-y: auto;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-gif-item {
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 1;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-gif-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-gif-item:hover {
    opacity: 0.9;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-gif-attribution {
    margin: 8px 0 0;
    padding: 0;
    font-size: 0.6875rem;
    color: #65676b;
    text-align: center;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-gif-attribution a {
    color: #65676b;
    text-decoration: none;
}

/* Feed: post meta line (feeling, location, tagged) */
#feedorax-timeline-container.feedorax-timeline-container .post-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-bottom: 6px;
    font-size: 0.875rem;
    color: #65676b;
}

#feedorax-timeline-container.feedorax-timeline-container .post-feeling,
#feedorax-timeline-container.feedorax-timeline-container .post-location,
#feedorax-timeline-container.feedorax-timeline-container .post-tagged {
    display: inline;
}

#feedorax-timeline-container.feedorax-timeline-container .post-feeling-emoji {
    display: inline;
    font-size: 1em;
    line-height: 1;
    margin-right: 2px;
}

#feedorax-timeline-container.feedorax-timeline-container .post-card .post-gif {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: 8px;
    display: block;
    margin-top: 4px;
}

#feedorax-timeline-container.feedorax-timeline-container .post-content .post-text:empty {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-preview {
    margin-top: 8px;
    background: #f0f2f5;
    border-radius: 8px;
    position: relative;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-ftr {
    padding: 12px 20px 20px;
    border-top: 1px solid #e4e6eb;
    background: #fff;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-submit {
    width: 100%;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    background: #1b74e4;
    color: #fff;
    border: none;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-submit:hover:not(:disabled) {
    background: #166fe5;
}

#feedorax-timeline-container.feedorax-timeline-container .post-modal-submit:disabled {
    background: #e4e6eb;
    color: #bcc0c4;
    cursor: not-allowed;
}

/* Dark mode – Post modal & compose (add post area) */
#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-overlay,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-overlay {
    background: rgba(0, 0, 0, 0.7);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-card,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-card {
    background: var(--mtfy-tl-bg-card);
    border-color: var(--mtfy-tl-border);
    box-shadow: var(--mtfy-tl-shadow-lg);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-hdr,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-hdr {
    border-bottom-color: var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-title,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-title {
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-close,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-close {
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-close:hover,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-close:hover {
    background: var(--mtfy-tl-border);
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-body,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-body {
    background: var(--mtfy-tl-bg-card);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-name,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-name {
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-privacy,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-privacy {
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-privacy:hover,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-privacy:hover {
    background: var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-privacy-dropdown,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-privacy-dropdown {
    background: var(--mtfy-tl-bg-card);
    border-color: var(--mtfy-tl-border);
    box-shadow: var(--mtfy-tl-shadow-lg);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-privacy-option,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-privacy-option {
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-privacy-option:hover,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-privacy-option:hover {
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-textarea,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-textarea {
    color: var(--mtfy-tl-text);
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-textarea::placeholder,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-textarea::placeholder {
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-dropdown,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-dropdown {
    background: var(--mtfy-tl-bg-card);
    border-color: var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-dropdown-search,
#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-location-input,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-dropdown-search,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-location-input {
    background: var(--mtfy-tl-bg-input);
    border-color: var(--mtfy-tl-border);
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-dropdown-hint,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-dropdown-hint {
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-tag-person,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-tag-person {
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-tag-person:hover,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-tag-person:hover {
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-feeling-item,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-feeling-item {
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-feeling-item:hover,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-feeling-item:hover {
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-location-current,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-location-current {
    background: var(--mtfy-tl-bg-input);
    border-color: var(--mtfy-tl-border);
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-location-current:hover,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-location-current:hover {
    background: var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-location-divider,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-location-divider {
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-location-result,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-location-result {
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-location-result:hover,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-location-result:hover {
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-location-message,
#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-location-error,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-location-message,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-location-error {
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-gif-attribution,
#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-gif-attribution a,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-gif-attribution,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-gif-attribution a {
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-preview,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-preview {
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-ftr,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-ftr {
    border-top-color: var(--mtfy-tl-border);
    background: var(--mtfy-tl-bg-card);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .post-modal-submit:disabled,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .post-modal-submit:disabled {
    background: var(--mtfy-tl-border);
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .modal-body {
    padding: 20px;
}

#feedorax-timeline-container.feedorax-timeline-container .modal-user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

#feedorax-timeline-container.feedorax-timeline-container .modal-user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#feedorax-timeline-container.feedorax-timeline-container .modal-user-name {
    font-weight: 700;
    font-size: 0.92rem;
}

#feedorax-timeline-container.feedorax-timeline-container .privacy-select {
    border: 1.5px solid var(--mtfy-tl-border);
    border-radius: var(--mtfy-tl-radius-pill);
    padding: 3px 10px;
    font-size: 0.78rem;
    color: var(--mtfy-tl-text-muted);
    outline: none;
    background: var(--mtfy-tl-bg-input);
    cursor: pointer;
    font-weight: 600;
}

#feedorax-timeline-container.feedorax-timeline-container .privacy-select:focus {
    border-color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .modal-textarea {
    width: 100%;
    min-height: 88px;
    max-height: 320px;
    padding: 14px 16px;
    border: none;
    outline: none;
    resize: none;
    overflow-y: auto;
    font-size: 1rem;
    color: var(--mtfy-tl-text);
    line-height: 1.6;
    background: transparent;
    transition: height 0.1s ease;
    box-sizing: border-box;
}

#feedorax-timeline-container.feedorax-timeline-container .modal-textarea::placeholder {
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .post-media-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
}

#feedorax-timeline-container.feedorax-timeline-container .modal-media-preview {
    margin-top: 12px;
    border-radius: var(--mtfy-tl-radius);
    overflow: hidden;
    background: var(--mtfy-tl-bg-input);
    position: relative;
    max-height: 240px;
}

#feedorax-timeline-container.feedorax-timeline-container .modal-media-preview[hidden] {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .modal-media-preview img,
#feedorax-timeline-container.feedorax-timeline-container .modal-media-preview video {
    width: 100%;
    max-height: 240px;
    object-fit: contain;
    display: block;
}

#feedorax-timeline-container.feedorax-timeline-container .modal-media-preview-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
}

#feedorax-timeline-container.feedorax-timeline-container .modal-media-row {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--mtfy-tl-border);
    flex-wrap: wrap;
}

#feedorax-timeline-container.feedorax-timeline-container .modal-media-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--mtfy-tl-radius-pill);
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text-2);
    font-size: 0.8rem;
    font-weight: 600;
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container .modal-media-btn:hover {
    background: var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container .modal-ftr {
    padding: 12px 20px 20px;
    display: flex;
    justify-content: flex-end;
}

#feedorax-timeline-container.feedorax-timeline-container .btn-post {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: var(--mtfy-tl-radius-pill);
    background: var(--mtfy-tl-brand);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(var(--mtfy-tl-brand-rgb), 0.3);
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container .btn-post:hover {
    background: var(--mtfy-tl-brand-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--mtfy-tl-brand-rgb), 0.4);
}

#feedorax-timeline-container.feedorax-timeline-container .btn-post:active {
    transform: translateY(0);
}

/* ══════════════════════════════════════════
   SHARE MODAL
══════════════════════════════════════════ */
#feedorax-timeline-container.feedorax-timeline-container .share-modal-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 10000;
}

#feedorax-timeline-container.feedorax-timeline-container .share-modal-overlay[hidden] {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .share-modal-card {
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--mtfy-tl-bg-card);
    border-radius: var(--mtfy-tl-radius-lg);
    box-shadow: var(--mtfy-tl-shadow-lg);
    border: 1px solid var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container .share-modal-hdr {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container .share-modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .share-modal-close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container .share-modal-close:hover {
    background: var(--mtfy-tl-border);
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .share-modal-body {
    padding: 20px;
}

#feedorax-timeline-container.feedorax-timeline-container .share-to-timeline {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--mtfy-tl-border);
    margin-bottom: 20px;
}

#feedorax-timeline-container.feedorax-timeline-container .share-modal-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

#feedorax-timeline-container.feedorax-timeline-container .share-modal-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .share-modal-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#feedorax-timeline-container.feedorax-timeline-container .share-modal-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .share-modal-privacy-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

#feedorax-timeline-container.feedorax-timeline-container .share-privacy-btn {
    padding: 8px 16px;
    border-radius: var(--mtfy-tl-radius-pill);
    border: 1.5px solid var(--mtfy-tl-border);
    background: transparent;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mtfy-tl-text-muted);
    cursor: pointer;
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container .share-privacy-btn.active {
    border-color: var(--mtfy-tl-brand);
    background: var(--mtfy-tl-brand-light);
    color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .share-modal-compose {
    position: relative;
    margin-bottom: 12px;
}

#feedorax-timeline-container.feedorax-timeline-container .share-modal-textarea {
    width: 100%;
    padding: 12px 44px 12px 14px;
    border: 1.5px solid var(--mtfy-tl-border);
    border-radius: var(--mtfy-tl-radius);
    font-size: 0.95rem;
    color: var(--mtfy-tl-text-2);
    resize: none;
    min-height: 80px;
    box-sizing: border-box;
}

#feedorax-timeline-container.feedorax-timeline-container .share-modal-textarea:focus {
    outline: none;
    border-color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .share-modal-emoji-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--mtfy-tl-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container .share-modal-emoji-btn:hover {
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .share-modal-emoji-wrap {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    z-index: 100;
    background: var(--mtfy-tl-bg-card);
    border-radius: var(--mtfy-tl-radius);
    box-shadow: var(--mtfy-tl-shadow-lg);
    border: 1px solid var(--mtfy-tl-border);
    overflow: hidden;
}

#feedorax-timeline-container.feedorax-timeline-container .share-modal-emoji-wrap[hidden] {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .share-modal-compose {
    position: relative;
}

#feedorax-timeline-container.feedorax-timeline-container .share-modal-share-now {
    width: 100%;
    justify-content: center;
}

#feedorax-timeline-container.feedorax-timeline-container .share-section {
    margin-bottom: 20px;
}

#feedorax-timeline-container.feedorax-timeline-container .share-section:last-child {
    margin-bottom: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .share-section-title {
    margin: 0 0 12px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .share-to-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

#feedorax-timeline-container.feedorax-timeline-container .share-to-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border-radius: var(--mtfy-tl-radius);
    border: 1.5px solid var(--mtfy-tl-border);
    background: transparent;
    cursor: pointer;
    transition: var(--mtfy-tl-t);
    color: var(--mtfy-tl-text-2);
    font-size: 0.75rem;
    font-weight: 600;
}

#feedorax-timeline-container.feedorax-timeline-container .share-to-item:hover {
    background: var(--mtfy-tl-bg-input);
    border-color: var(--mtfy-tl-brand);
    color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .share-to-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .share-to-item:hover .share-to-icon {
    background: var(--mtfy-tl-brand-light);
    color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .share-to-icon svg {
    width: 22px;
    height: 22px;
}

#feedorax-timeline-container.feedorax-timeline-container .share-to-label {
    text-align: center;
    line-height: 1.2;
}

/* ══════════════════════════════════════════
   MOBILE BOTTOM NAV
══════════════════════════════════════════ */
#feedorax-timeline-container.feedorax-timeline-container .mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 300;
    box-sizing: border-box;
    min-height: calc(var(--mtfy-tl-mbn-h) + env(safe-area-inset-bottom, 0px));
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) 10px;
    align-items: center;
    justify-content: space-around;
    gap: 2px;
    background: var(--mtfy-tl-bg-card);
    border-top: 1px solid var(--mtfy-tl-border);
    box-shadow: 0 -6px 28px rgba(15, 23, 42, 0.07), 0 -1px 0 rgba(15, 23, 42, 0.04);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .mobile-bottom-nav,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .mobile-bottom-nav {
    box-shadow: 0 -8px 36px rgba(0, 0, 0, 0.4), 0 -1px 0 rgba(0, 0, 0, 0.2);
}

@media (max-width: 991px) {
    #feedorax-timeline-container.feedorax-timeline-container .layout {
        grid-template-columns: var(--mtfy-tl-sidebar-w) 1fr;
    }

    #feedorax-timeline-container.feedorax-timeline-container .sidebar-right {
        display: none;
    }
}

@media (max-width: 767px) {
    #feedorax-timeline-container.feedorax-timeline-container .layout {
        grid-template-columns: 1fr;
        padding-top: calc(var(--mtfy-tl-topbar-h) + -30px);
        padding-bottom: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    #feedorax-timeline-container.feedorax-timeline-container .feed-col {
        padding-left: 20px;
        padding-right: 20px;
    }

    #feedorax-timeline-container.feedorax-timeline-container .saved-page,
    #feedorax-timeline-container.feedorax-timeline-container .connects-page,
    #feedorax-timeline-container.feedorax-timeline-container .videos-page,
    #feedorax-timeline-container.feedorax-timeline-container .explore-page,
    #feedorax-timeline-container.feedorax-timeline-container .jobs-page,
    #feedorax-timeline-container.feedorax-timeline-container .feedorax-tab-page,
    #feedorax-timeline-container.feedorax-timeline-container .settings-page {
        padding-left: 0;
        padding-right: 0;
    }

    #feedorax-timeline-container.feedorax-timeline-container .topbar-actions {
        gap: 10px;
    }

    /* Logged-in mobile: menu + brand + compact search + chat (notif/account stay in bottom bar). */
    #feedorax-timeline-container.feedorax-timeline-container.feedorax-has-mbn .topbar-actions {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        gap: 4px;
    }

    #feedorax-timeline-container.feedorax-timeline-container.feedorax-has-mbn .topbar-actions > .feedorax-dark-toggle,
    #feedorax-timeline-container.feedorax-timeline-container.feedorax-has-mbn .topbar-actions .notif-wrap,
    #feedorax-timeline-container.feedorax-timeline-container.feedorax-has-mbn .topbar-actions .tb-account-wrap {
        display: none;
    }

    #feedorax-timeline-container.feedorax-timeline-container.feedorax-has-mbn .topbar-actions:not(:has(.chat-wrap)) {
        display: none;
    }

    #feedorax-timeline-container.feedorax-timeline-container.feedorax-has-mbn .topbar-mobile-menu-btn {
        display: inline-flex;
    }

    #feedorax-timeline-container.feedorax-timeline-container.feedorax-has-mbn .topbar-brand {
        flex: 1;
        min-width: 0;
    }

    /* Mobile logged-in: search = icon only; full field opens in animated popup (see .feedorax-topbar-search-popup). */
    #feedorax-timeline-container.feedorax-timeline-container.feedorax-has-mbn .topbar-search--mbn-popup {
        flex: 0 0 auto;
        max-width: none;
        width: auto;
        margin: 0 6px 0 0;
        height: auto;
        display: flex;
        align-items: center;
        gap: 0;
    }

    #feedorax-timeline-container.feedorax-timeline-container.feedorax-has-mbn .topbar-search--mbn-popup .feedorax-topbar-search-popup[hidden] {
        display: none;
    }

    #feedorax-timeline-container.feedorax-timeline-container.feedorax-has-mbn .topbar-search--mbn-popup .topbar-search-mbn-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        flex-shrink: 0;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 12px;
        background: var(--mtfy-tl-bg-input);
        color: var(--mtfy-tl-text-2);
        cursor: pointer;
        transition: background 0.15s var(--mtfy-tl-ease), color 0.15s var(--mtfy-tl-ease);
        -webkit-tap-highlight-color: transparent;
    }

    #feedorax-timeline-container.feedorax-timeline-container.feedorax-has-mbn .topbar-search--mbn-popup .topbar-search-mbn-trigger:hover,
    #feedorax-timeline-container.feedorax-timeline-container.feedorax-has-mbn .topbar-search--mbn-popup .topbar-search-mbn-trigger:focus-visible {
        background: var(--mtfy-tl-brand-light);
        color: var(--mtfy-tl-brand);
        outline: none;
    }

    #feedorax-timeline-container.feedorax-timeline-container.feedorax-has-mbn .topbar-search--mbn-popup .feedorax-topbar-search-popup:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 440;
        padding: calc(var(--mtfy-tl-topbar-h) + 10px) 14px 20px;
        box-sizing: border-box;
        pointer-events: none;
    }

    #feedorax-timeline-container.feedorax-timeline-container.feedorax-has-mbn .topbar-search--mbn-popup .feedorax-topbar-search-popup:not([hidden]).feedorax-topbar-search-popup--visible {
        pointer-events: auto;
    }

    #feedorax-timeline-container.feedorax-timeline-container .feedorax-topbar-search-popup__backdrop {
        position: absolute;
        inset: 0;
        margin: 0;
        padding: 0;
        border: 0;
        background: rgba(15, 23, 42, 0.48);
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.3s var(--mtfy-tl-ease, cubic-bezier(0.4, 0, 0.2, 1));
        pointer-events: auto;
    }

    #feedorax-timeline-container.feedorax-timeline-container .feedorax-topbar-search-popup--visible .feedorax-topbar-search-popup__backdrop {
        opacity: 1;
    }

    #feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .feedorax-topbar-search-popup__backdrop,
    body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .feedorax-topbar-search-popup__backdrop {
        background: rgba(0, 0, 0, 0.68);
    }

    #feedorax-timeline-container.feedorax-timeline-container .feedorax-topbar-search-popup__panel {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
        background: var(--mtfy-tl-bg-card);
        border: 1px solid var(--mtfy-tl-border);
        border-radius: 16px;
        box-shadow: var(--mtfy-tl-shadow-lg);
        padding: 14px 14px 12px;
        pointer-events: auto;
        opacity: 0;
        transform: translateY(-18px) scale(0.97);
        transition: opacity 0.3s var(--mtfy-tl-ease, cubic-bezier(0.4, 0, 0.2, 1)), transform 0.34s var(--mtfy-tl-ease, cubic-bezier(0.34, 1.2, 0.64, 1));
    }

    #feedorax-timeline-container.feedorax-timeline-container .feedorax-topbar-search-popup--visible .feedorax-topbar-search-popup__panel {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    #feedorax-timeline-container.feedorax-timeline-container .feedorax-topbar-search-popup__toolbar {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    #feedorax-timeline-container.feedorax-timeline-container .feedorax-topbar-search-popup__close {
        flex-shrink: 0;
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 12px;
        background: var(--mtfy-tl-bg-input);
        color: var(--mtfy-tl-text-muted);
        cursor: pointer;
        transition: background 0.15s var(--mtfy-tl-ease), color 0.15s var(--mtfy-tl-ease);
    }

    #feedorax-timeline-container.feedorax-timeline-container .feedorax-topbar-search-popup__close:hover,
    #feedorax-timeline-container.feedorax-timeline-container .feedorax-topbar-search-popup__close:focus-visible {
        background: var(--mtfy-tl-brand-light);
        color: var(--mtfy-tl-brand);
        outline: none;
    }

    #feedorax-timeline-container.feedorax-timeline-container .topbar-search-label--mbn-popup {
        flex: 1;
        min-width: 0;
        margin: 0;
    }

    #feedorax-timeline-container.feedorax-timeline-container .topbar-search-label--mbn-popup .search-wrap {
        min-height: 44px;
        border-radius: 14px;
        padding: 0 14px 0 16px;
    }

    #feedorax-timeline-container.feedorax-timeline-container .topbar-search-dropdown--mbn-popup {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        margin-top: 12px;
        max-height: min(52vh, 380px);
        border-radius: 12px;
        border: 1px solid var(--mtfy-tl-border);
        box-shadow: var(--mtfy-tl-shadow-lg);
    }

    #feedorax-timeline-container.feedorax-timeline-container.feedorax-reduce-motion .feedorax-topbar-search-popup__backdrop,
    #feedorax-timeline-container.feedorax-timeline-container.feedorax-reduce-motion .feedorax-topbar-search-popup__panel {
        transition: none;
    }

    #feedorax-timeline-container.feedorax-timeline-container.feedorax-reduce-motion .feedorax-topbar-search-popup--visible .feedorax-topbar-search-popup__panel {
        transform: none;
    }

    #feedorax-timeline-container.feedorax-timeline-container.feedorax-has-mbn .topbar-actions .tb-btn.chat-btn {
        width: 42px;
        height: 42px;
        padding: 0;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #feedorax-timeline-container.feedorax-timeline-container .chat-dropdown {
        position: fixed;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        top: calc(var(--mtfy-tl-topbar-h) + 55px);
        width: calc(100vw - 16px);
        max-width: 420px;
        max-height: calc(100dvh - var(--mtfy-tl-topbar-h) - 70px);
    }

    #feedorax-timeline-container.feedorax-timeline-container .chat-dropdown-title {
        font-size: 1.35rem;
    }

    #feedorax-timeline-container.feedorax-timeline-container .chat-item {
        padding: 9px 11px;
    }

    #feedorax-timeline-container.feedorax-timeline-container .chat-item-avatar {
        width: 44px;
        height: 44px;
    }

    #feedorax-timeline-container.feedorax-timeline-container .feedorax-chatbox {
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        border: 0;
    }

    #feedorax-timeline-container.feedorax-timeline-container.feedorax-chat-open .mobile-bottom-nav {
        display: none;
    }

    /* Notification dropdown – compact card when no bottom nav */
    #feedorax-timeline-container.feedorax-timeline-container .notif-dropdown {
        position: fixed;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        top: calc(var(--mtfy-tl-topbar-h) + 55px);
        width: calc(100vw - 24px);
        max-width: 360px;
    }

    /* Logged-in mobile: full-screen panel above bottom bar (reference: Facebook-style notifications) */
    #feedorax-timeline-container.feedorax-timeline-container.feedorax-has-mbn .notif-dropdown.notif-panel {
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        max-width: none;
        transform: none;
        max-height: none;
        height: calc(100dvh - var(--mtfy-tl-mbn-h) - env(safe-area-inset-bottom, 0px));
        max-height: calc(100dvh - var(--mtfy-tl-mbn-h) - env(safe-area-inset-bottom, 0px));
        min-height: 200px;
        border-radius: 0;
        border: none;
        box-shadow: none;
        z-index: 450;
    }

    #feedorax-timeline-container.feedorax-timeline-container.feedorax-has-mbn .notif-dropdown.notif-panel .notif-panel__list {
        max-height: none;
    }

    #feedorax-timeline-container.feedorax-timeline-container .tb-account-dropdown {
        position: fixed;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        top: calc(var(--mtfy-tl-topbar-h) + 55px);
        width: calc(100vw - 20px);
        max-width: 360px;
        max-height: calc(100dvh - var(--mtfy-tl-topbar-h) - 70px);
    }

    #feedorax-timeline-container.feedorax-timeline-container .tb-account-dropdown-scroll {
        max-height: calc(100dvh - var(--mtfy-tl-topbar-h) - 90px);
    }

    #feedorax-timeline-container.feedorax-timeline-container .mobile-bottom-nav {
        display: flex;
    }

    #feedorax-timeline-container.feedorax-timeline-container:not(.feedorax-has-mbn) .topbar-search {
        display: none;
    }

    #feedorax-timeline-container.feedorax-timeline-container .brand-name {
        font-size: 1.1rem;
    }

    #feedorax-timeline-container.feedorax-timeline-container .reaction-picker.visible {
        min-width: 280px;
        padding: 8px 12px;
        gap: 6px;
    }
}

/* Logged-in timeline: tablet/desktop — same DOM as mobile popup, unwrapped to inline search. */
@media (min-width: 768px) {
    #feedorax-timeline-container.feedorax-timeline-container .topbar-search--mbn-popup .topbar-search-mbn-trigger {
        display: none;
    }

    /* Long chain beats UA [hidden]{display:none} so inline search works while the popup node keeps the hidden attribute. */
    #feedorax-timeline-container.feedorax-timeline-container .topbar-search--mbn-popup .feedorax-topbar-search-popup,
    #feedorax-timeline-container.feedorax-timeline-container .topbar-search--mbn-popup .feedorax-topbar-search-popup[hidden] {
        display: contents;
    }

    #feedorax-timeline-container.feedorax-timeline-container .topbar-search--mbn-popup .feedorax-topbar-search-popup__backdrop,
    #feedorax-timeline-container.feedorax-timeline-container .topbar-search--mbn-popup .feedorax-topbar-search-popup__close {
        display: none;
    }

    #feedorax-timeline-container.feedorax-timeline-container .topbar-search--mbn-popup .feedorax-topbar-search-popup__panel,
    #feedorax-timeline-container.feedorax-timeline-container .topbar-search--mbn-popup .feedorax-topbar-search-popup__inner,
    #feedorax-timeline-container.feedorax-timeline-container .topbar-search--mbn-popup .feedorax-topbar-search-popup__toolbar {
        display: contents;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        margin: 0;
        max-width: none;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    #feedorax-timeline-container.feedorax-timeline-container .topbar-search--mbn-popup .topbar-search-label--mbn-popup .search-wrap {
        min-height: 40px;
        border-radius: var(--mtfy-tl-radius-pill);
    }

    #feedorax-timeline-container.feedorax-timeline-container .topbar-search--mbn-popup .topbar-search-dropdown--mbn-popup {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        margin-top: 0;
        max-height: 320px;
    }
}

body.feedorax-topbar-search-popup-open {
    overflow: hidden;
}

/* Narrow phones (~320–480px): header dark toggle removed from topbar to avoid horizontal overflow.
   Logged-in users: Account menu → Display & accessibility (dark mode switch). */
@media (max-width: 480px) {
    #feedorax-timeline-container.feedorax-timeline-container .topbar-inner {
        padding-left: 10px;
        padding-right: 10px;
        gap: 8px;
    }

    #feedorax-timeline-container.feedorax-timeline-container:not(.feedorax-has-mbn) .topbar-actions {
        gap: 8px;
    }

    #feedorax-timeline-container.feedorax-timeline-container:not(.feedorax-has-mbn) .topbar-actions > .feedorax-dark-toggle {
        display: none;
    }
}

#feedorax-timeline-container.feedorax-timeline-container .mbn-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 4px 3px 2px;
    color: var(--mtfy-tl-text-muted);
    flex: 1;
    text-decoration: none;
    transition: var(--mtfy-tl-t);
    -webkit-tap-highlight-color: transparent;
    border-radius: var(--mtfy-tl-radius-sm);
}

#feedorax-timeline-container.feedorax-timeline-container .mbn-item:focus-visible {
    outline: 2px solid var(--mtfy-tl-brand);
    outline-offset: -2px;
    border-radius: var(--mtfy-tl-radius-sm);
}

#feedorax-timeline-container.feedorax-timeline-container .mbn-item.active {
    color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .mbn-item.active .mbn-icon {
    background: var(--mtfy-tl-brand-light);
    box-shadow: 0 0 0 1px rgba(var(--mtfy-tl-brand-rgb), 0.22), 0 2px 8px rgba(var(--mtfy-tl-brand-rgb), 0.12);
}

#feedorax-timeline-container.feedorax-timeline-container .mbn-icon {
    width: 48px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container .mbn-item:active .mbn-icon {
    transform: scale(0.96);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-reduce-motion .mbn-item:active .mbn-icon {
    transform: none;
}

#feedorax-timeline-container.feedorax-timeline-container .mbn-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.15;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#feedorax-timeline-container.feedorax-timeline-container .mbn-item--notif {
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
    width: auto;
    -webkit-appearance: none;
    appearance: none;
}

#feedorax-timeline-container.feedorax-timeline-container .mbn-item.mbn-item--account {
    cursor: default;
}

#feedorax-timeline-container.feedorax-timeline-container .mbn-account-menu-btn {
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
    padding: 0;
    margin: 0;
    width: 100%;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
    display: block;
    text-align: center;
}

#feedorax-timeline-container.feedorax-timeline-container .mbn-avatar-link {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    border-radius: 50%;
}

#feedorax-timeline-container.feedorax-timeline-container .mbn-avatar-link:focus-visible {
    outline: 2px solid var(--mtfy-tl-brand);
    outline-offset: 2px;
}

#feedorax-timeline-container.feedorax-timeline-container .mbn-avatar-link--static {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    pointer-events: none;
}

#feedorax-timeline-container.feedorax-timeline-container .mbn-icon--notif {
    position: relative;
}

#feedorax-timeline-container.feedorax-timeline-container .mbn-notif-dot {
    position: absolute;
    top: 2px;
    right: 4px;
}

#feedorax-timeline-container.feedorax-timeline-container .mbn-avatar-wrap {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--mtfy-tl-border);
    background: var(--mtfy-tl-bg-input);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .mbn-avatar-wrap,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .mbn-avatar-wrap {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

#feedorax-timeline-container.feedorax-timeline-container .mbn-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 380px) {
    #feedorax-timeline-container.feedorax-timeline-container .mbn-label {
        font-size: 0.625rem;
    }

    #feedorax-timeline-container.feedorax-timeline-container .mbn-icon {
        width: 44px;
        height: 32px;
    }

    #feedorax-timeline-container.feedorax-timeline-container .mbn-avatar-wrap {
        width: 32px;
        height: 32px;
    }
}

/* Header: hamburger (mobile timeline only — .feedorax-has-mbn). */
#feedorax-timeline-container.feedorax-timeline-container .topbar-mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--mtfy-tl-text-2);
    cursor: pointer;
    transition: color 0.15s var(--mtfy-tl-ease);
    -webkit-tap-highlight-color: transparent;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-mobile-menu-btn:hover {
    background: transparent;
    color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-mobile-menu-btn:focus-visible {
    background: transparent;
    color: var(--mtfy-tl-brand);
    outline: 2px solid var(--mtfy-tl-brand);
    outline-offset: 3px;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-mobile-menu-btn__bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 20px;
}

#feedorax-timeline-container.feedorax-timeline-container .topbar-mobile-menu-btn__bars span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
}

/* Slide-in menu (Facebook-style) — open/close via .feedorax-mobile-overflow--visible + JS timing */
#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow[hidden] {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 450;
    pointer-events: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow:not([hidden]).feedorax-mobile-overflow--visible {
    pointer-events: auto;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__backdrop {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.4);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.28s var(--mtfy-tl-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow--visible .feedorax-mobile-overflow__backdrop {
    opacity: 1;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__panel {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(100vw - 20px, 420px);
    max-width: 100%;
    background: var(--mtfy-tl-bg-card);
    border-right: 1px solid var(--mtfy-tl-border);
    box-shadow: 8px 0 32px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1;
    transform: translate3d(-105%, 0, 0);
    transition: transform 0.34s var(--mtfy-tl-ease, cubic-bezier(0.32, 0.72, 0, 1));
    will-change: transform;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow--visible .feedorax-mobile-overflow__panel {
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-reduce-motion .feedorax-mobile-overflow__backdrop,
#feedorax-timeline-container.feedorax-timeline-container.feedorax-reduce-motion .feedorax-mobile-overflow__panel {
    transition: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--mtfy-tl-border);
    flex-shrink: 0;
    background: var(--mtfy-tl-bg-card);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__title {
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text-muted);
    cursor: pointer;
    transition: background 0.15s var(--mtfy-tl-ease);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__close:hover,
#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__close:focus-visible {
    background: var(--mtfy-tl-brand-light);
    color: var(--mtfy-tl-brand);
    outline: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 14px 24px;
    -webkit-overflow-scrolling: touch;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0 14px;
    border-bottom: 1px solid var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__profile-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__profile-main--static {
    cursor: default;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__profile-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--mtfy-tl-border);
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__profile-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__profile-name {
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--mtfy-tl-text);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__profile-handle {
    font-size: 0.8125rem;
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__profile-menu-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s var(--mtfy-tl-ease);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__profile-menu-btn:hover,
#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__profile-menu-btn:focus-visible {
    background: var(--mtfy-tl-brand-light);
    color: var(--mtfy-tl-brand);
    outline: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__section-title {
    margin: 18px 0 10px;
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--mtfy-tl-text);
    letter-spacing: -0.02em;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__shortcuts {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__shortcuts::-webkit-scrollbar {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__shortcut {
    flex: 0 0 auto;
    width: 88px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__shortcut:focus-visible {
    outline: 2px solid var(--mtfy-tl-brand);
    outline-offset: 4px;
    border-radius: 12px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__shortcut-media {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--mtfy-tl-brand-light), var(--mtfy-tl-bg-input));
    border: 1px solid var(--mtfy-tl-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__shortcut-media .feedorax-brand-icon,
#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__shortcut-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__shortcut-fallback {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__shortcut-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__shortcut.active .feedorax-mobile-overflow__shortcut-media {
    border-color: rgba(var(--mtfy-tl-brand-rgb), 0.5);
    box-shadow: 0 0 0 2px var(--mtfy-tl-brand-glow);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__shortcut.active .feedorax-mobile-overflow__shortcut-label {
    color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 18px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 12px;
    min-height: 96px;
    border-radius: 12px;
    border: 1px solid var(--mtfy-tl-border);
    background: var(--mtfy-tl-bg-card);
    text-decoration: none;
    color: var(--mtfy-tl-text);
    font-size: 0.9375rem;
    font-weight: 700;
    transition: background 0.15s var(--mtfy-tl-ease), border-color 0.15s var(--mtfy-tl-ease);
    -webkit-tap-highlight-color: transparent;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__tile:hover,
#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__tile:focus-visible {
    background: var(--mtfy-tl-bg-input);
    border-color: rgba(var(--mtfy-tl-brand-rgb), 0.25);
    outline: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__tile.active {
    border-color: rgba(var(--mtfy-tl-brand-rgb), 0.45);
    background: var(--mtfy-tl-brand-light);
    color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__tile.active .feedorax-mobile-overflow__tile-icon {
    color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__tile-label {
    line-height: 1.25;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__accordion {
    margin-top: 22px;
    border-top: 1px solid var(--mtfy-tl-border);
    padding-top: 6px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__accordion-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 4px;
    border: none;
    border-bottom: 1px solid var(--mtfy-tl-border);
    background: transparent;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mtfy-tl-text);
    text-align: left;
    cursor: pointer;
    transition: background 0.12s var(--mtfy-tl-ease);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__accordion-row--link {
    text-decoration: none;
    display: flex;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__accordion-row:last-child {
    border-bottom: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__accordion-row:hover,
#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__accordion-row:focus-visible {
    background: var(--mtfy-tl-bg-input);
    outline: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__accordion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--mtfy-tl-text-muted);
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__accordion-label {
    flex: 1;
    min-width: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__accordion-chevron {
    flex-shrink: 0;
    color: var(--mtfy-tl-text-muted);
    opacity: 0.85;
}

/* Legacy list-style overflow links (if any remain) */
#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--mtfy-tl-text);
    font-size: 0.9375rem;
    font-weight: 600;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s var(--mtfy-tl-ease);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__link:hover,
#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__link:focus-visible {
    background: var(--mtfy-tl-bg-input);
    outline: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-mobile-overflow__link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text-muted);
    flex-shrink: 0;
}

body.feedorax-mobile-overflow-open {
    overflow: hidden;
}

/* ─── Slide notifications (toast when new notification arrives) ─── */
#feedorax-timeline-container.feedorax-timeline-container .feedorax-slide-notifications {
    position: fixed;
    top: calc(var(--mtfy-tl-topbar-h, 60px) + 12px);
    right: 16px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
    width: calc(100vw - 32px);
    pointer-events: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-slide-notif {
    pointer-events: auto;
    animation: feedorax-slide-notif-in 0.35s var(--mtfy-tl-ease, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
    transform-origin: right center;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-slide-notif.feedorax-slide-notif-out {
    animation: feedorax-slide-notif-out 0.35s var(--mtfy-tl-ease) forwards;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-slide-notif.feedorax-slide-notif-clickable {
    cursor: pointer;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-slide-notif.feedorax-slide-notif-clickable .feedorax-slide-notif-inner:hover {
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-slide-notif-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--mtfy-tl-bg-card);
    border-radius: var(--mtfy-tl-radius);
    box-shadow: var(--mtfy-tl-shadow-lg);
    border: 1px solid var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-slide-notif-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-slide-notif-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mtfy-tl-brand-light);
    color: var(--mtfy-tl-brand);
    font-size: 1rem;
    font-weight: 700;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-slide-notif-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-slide-notif-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--mtfy-tl-text);
    line-height: 1.35;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-slide-notif-time {
    font-size: 0.75rem;
    color: var(--mtfy-tl-text-muted);
}

@keyframes feedorax-slide-notif-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes feedorax-slide-notif-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* ─── View switching & All friends page ─── */
#feedorax-timeline-container.feedorax-timeline-container .feedorax-hide {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-main-view {
    width: 100%;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-tab-page {
    padding: 0;
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
    background: var(--mtfy-tl-bg-card);
    border: 1px solid var(--mtfy-tl-border);
    border-radius: var(--mtfy-tl-radius);
    box-shadow: var(--mtfy-tl-shadow-sm);
    overflow: hidden;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-tab-page__header {
    padding: 22px 22px 20px;
    border-bottom: 1px solid var(--mtfy-tl-border);
    background: linear-gradient(180deg, var(--mtfy-tl-bg-card) 0%, var(--mtfy-tl-bg-input) 120%);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-tab-page__title {
    margin: 0 0 8px;
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-tab-page__title::after {
    content: '';
    display: block;
    width: 36px;
    height: 3px;
    margin-top: 12px;
    border-radius: var(--mtfy-tl-radius-pill);
    background: linear-gradient(90deg, var(--mtfy-tl-brand), rgba(var(--mtfy-tl-brand-rgb), 0.35));
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-tab-page__desc {
    margin: 14px 0 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--mtfy-tl-text-muted);
    max-width: 38rem;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-tab-page__body {
    padding: 20px 22px 24px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-tab-page__body:empty {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .connects-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: var(--mtfy-tl-radius-sm);
    background: var(--mtfy-tl-brand-light);
    border: 1px solid rgba(var(--mtfy-tl-brand-rgb), 0.2);
    color: var(--mtfy-tl-text-2);
}

#feedorax-timeline-container.feedorax-timeline-container .connects-toolbar-icon {
    display: flex;
    color: var(--mtfy-tl-brand);
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .connects-toolbar-text {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .connects-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--mtfy-tl-border);
    border-radius: var(--mtfy-tl-radius-sm);
    overflow: hidden;
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container .connects-list .connects-loading {
    border: none;
    margin: 0;
}

/* :not(.feedorax-hide) so display:block does not override .feedorax-hide (same specificity, later rule) */
#feedorax-timeline-container.feedorax-timeline-container .connects-loading:not(.feedorax-hide),
#feedorax-timeline-container.feedorax-timeline-container .saved-loading:not(.feedorax-hide),
#feedorax-timeline-container.feedorax-timeline-container .explore-loading:not(.feedorax-hide),
#feedorax-timeline-container.feedorax-timeline-container .videos-loading:not(.feedorax-hide),
#feedorax-timeline-container.feedorax-timeline-container .jobs-loading:not(.feedorax-hide) {
    display: block;
    padding: 20px 16px;
    font-size: 0.9rem;
    text-align: center;
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .connects-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 14px 14px 16px;
    text-decoration: none;
    color: var(--mtfy-tl-text);
    transition: background 0.18s var(--mtfy-tl-ease), box-shadow 0.18s var(--mtfy-tl-ease);
    border-bottom: 1px solid var(--mtfy-tl-border);
    background: var(--mtfy-tl-bg-card);
}

#feedorax-timeline-container.feedorax-timeline-container .connects-item:last-child {
    border-bottom: none;
}

#feedorax-timeline-container.feedorax-timeline-container .connects-item:hover {
    background: var(--mtfy-tl-bg-input);
}

#feedorax-timeline-container.feedorax-timeline-container .connects-item:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--mtfy-tl-brand);
    position: relative;
    z-index: 1;
}

#feedorax-timeline-container.feedorax-timeline-container .connects-item-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .connects-item-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 0 0 2px var(--mtfy-tl-bg-card), 0 0 0 3px var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container .connects-item-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--mtfy-tl-brand-light);
    color: var(--mtfy-tl-brand);
    font-size: 1.2rem;
    font-weight: 700;
    box-shadow: 0 0 0 2px var(--mtfy-tl-bg-card), 0 0 0 3px var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container .connects-item-presence {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--mtfy-tl-bg-card);
    box-sizing: border-box;
}

#feedorax-timeline-container.feedorax-timeline-container .connects-item-presence--online {
    background: #22c55e;
}

#feedorax-timeline-container.feedorax-timeline-container .connects-item-presence--offline {
    background: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .connects-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#feedorax-timeline-container.feedorax-timeline-container .connects-item-name {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

#feedorax-timeline-container.feedorax-timeline-container .connects-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .connects-item-meta-sep {
    color: var(--mtfy-tl-border);
    font-weight: 600;
    user-select: none;
}

#feedorax-timeline-container.feedorax-timeline-container .connects-item-login {
    font-weight: 600;
    color: var(--mtfy-tl-text-2);
}

#feedorax-timeline-container.feedorax-timeline-container .connects-item-status {
    font-weight: 600;
}

#feedorax-timeline-container.feedorax-timeline-container .connects-item-status--online {
    color: #15803d;
}

#feedorax-timeline-container.feedorax-timeline-container .connects-item-status--offline {
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .connects-item-status--online,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .connects-item-status--online {
    color: #4ade80;
}

#feedorax-timeline-container.feedorax-timeline-container .connects-item-chevron {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mtfy-tl-text-muted);
    opacity: 0.65;
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container .connects-item:hover .connects-item-chevron {
    color: var(--mtfy-tl-brand);
    opacity: 1;
    transform: translateX(2px);
}

#feedorax-timeline-container.feedorax-timeline-container .connects-empty,
#feedorax-timeline-container.feedorax-timeline-container .saved-empty,
#feedorax-timeline-container.feedorax-timeline-container .explore-empty,
#feedorax-timeline-container.feedorax-timeline-container .videos-empty,
#feedorax-timeline-container.feedorax-timeline-container .jobs-empty {
    margin-top: 8px;
    padding: 28px 20px;
    text-align: center;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--mtfy-tl-text-muted);
    background: var(--mtfy-tl-bg-input);
    border-radius: var(--mtfy-tl-radius-sm);
    border: 1px dashed var(--mtfy-tl-border);
}

/* ─── Saved page ─── */
#feedorax-timeline-container.feedorax-timeline-container .saved-page .posts-feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ─── Videos page ─── */
#feedorax-timeline-container.feedorax-timeline-container .videos-page .posts-feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ─── Explore page ─── */
#feedorax-timeline-container.feedorax-timeline-container .explore-page .posts-feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ─── Jobs page ─── */
#feedorax-timeline-container.feedorax-timeline-container .feedorax-jobs-guest-hint {
    margin: 0 0 18px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-jobs-guest-hint--toolbar {
    margin: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-jobs-guest-hint a {
    color: var(--mtfy-tl-brand);
    font-weight: 600;
    text-decoration: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-jobs-guest-hint a:hover {
    text-decoration: underline;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-jobs-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

#feedorax-timeline-container.feedorax-timeline-container button.feedorax-jobs-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    background: var(--mtfy-tl-brand);
    border: none;
    border-radius: var(--mtfy-tl-radius-sm);
    cursor: pointer;
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container button.feedorax-jobs-create-btn:hover,
#feedorax-timeline-container.feedorax-timeline-container button.feedorax-jobs-create-btn:focus,
#feedorax-timeline-container.feedorax-timeline-container button.feedorax-jobs-create-btn:focus-visible {
    background: var(--mtfy-tl-brand-dark);
    color: #fff;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-jobs-create-icon {
    flex-shrink: 0;
    color: inherit;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-job-modal-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 10000;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-job-modal-overlay[hidden] {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-job-modal-overlay:not([hidden]) {
    opacity: 1;
    pointer-events: all;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-job-modal-overlay:not([hidden]) .feedorax-job-modal-box {
    transform: translateY(0) scale(1);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-job-modal-box {
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-job-modal-hdr.modal-hdr {
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-job-modal-body.modal-body {
    overflow-y: auto;
    padding: 18px 20px 22px;
    -webkit-overflow-scrolling: touch;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-jobs-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-jobs-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 520px) {
    #feedorax-timeline-container.feedorax-timeline-container .feedorax-jobs-form-row {
        grid-template-columns: 1fr;
    }
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-jobs-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-jobs-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mtfy-tl-text-2);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-jobs-req {
    color: #dc2626;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-jobs-input,
#feedorax-timeline-container.feedorax-timeline-container .feedorax-jobs-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 0.9375rem;
    border: 1px solid var(--mtfy-tl-border);
    border-radius: var(--mtfy-tl-radius-sm);
    background: var(--mtfy-tl-bg-card);
    color: var(--mtfy-tl-text);
    transition: border-color 0.15s var(--mtfy-tl-ease), box-shadow 0.15s var(--mtfy-tl-ease);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-jobs-input:focus,
#feedorax-timeline-container.feedorax-timeline-container .feedorax-jobs-textarea:focus {
    outline: none;
    border-color: var(--mtfy-tl-brand);
    box-shadow: 0 0 0 3px var(--mtfy-tl-brand-glow);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-jobs-textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.45;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-jobs-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-jobs-cancel {
    padding: 10px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mtfy-tl-text-2);
    background: transparent;
    border: 1px solid var(--mtfy-tl-border);
    border-radius: var(--mtfy-tl-radius-sm);
    cursor: pointer;
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-jobs-cancel:hover {
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container button.feedorax-jobs-submit {
    padding: 10px 18px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    background: var(--mtfy-tl-brand);
    border: none;
    border-radius: var(--mtfy-tl-radius-sm);
    cursor: pointer;
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container button.feedorax-jobs-submit:hover:not(:disabled),
#feedorax-timeline-container.feedorax-timeline-container button.feedorax-jobs-submit:focus:not(:disabled),
#feedorax-timeline-container.feedorax-timeline-container button.feedorax-jobs-submit:focus-visible:not(:disabled) {
    background: var(--mtfy-tl-brand-dark);
    color: #fff;
}

#feedorax-timeline-container.feedorax-timeline-container button.feedorax-jobs-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-jobs-form-msg {
    margin: 0;
    font-size: 0.875rem;
    color: var(--mtfy-tl-brand-dark);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-jobs-form-msg.feedorax-jobs-form-msg--err {
    color: #b91c1c;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .feedorax-jobs-form-msg.feedorax-jobs-form-msg--err,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .feedorax-jobs-form-msg.feedorax-jobs-form-msg--err {
    color: #fca5a5;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-jobs-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-job-card {
    padding: 18px;
    border-radius: var(--mtfy-tl-radius-sm);
    border: 1px solid var(--mtfy-tl-border);
    background: var(--mtfy-tl-bg-input);
    transition: box-shadow 0.18s var(--mtfy-tl-ease);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-job-card:hover {
    box-shadow: var(--mtfy-tl-shadow-sm);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-job-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-job-author {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--mtfy-tl-text);
    min-width: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-job-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-job-avatar--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mtfy-tl-brand-light);
    color: var(--mtfy-tl-brand);
    font-weight: 700;
    font-size: 1rem;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-job-author-name {
    font-size: 0.9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-job-profile-link {
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mtfy-tl-brand);
    text-decoration: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-job-profile-link:hover {
    text-decoration: underline;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-job-heading {
    margin: 0 0 10px;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-job-meta-chip {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: var(--mtfy-tl-radius-pill);
    background: var(--mtfy-tl-bg-card);
    color: var(--mtfy-tl-text-2);
    border: 1px solid var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-job-meta-chip--muted {
    color: var(--mtfy-tl-text-muted);
    font-weight: 500;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-job-desc {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--mtfy-tl-text-2);
    margin-bottom: 14px;
    word-break: break-word;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-job-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-job-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: var(--mtfy-tl-radius-sm);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container a.feedorax-job-btn.feedorax-job-btn--primary,
#feedorax-timeline-container.feedorax-timeline-container a.feedorax-job-btn.feedorax-job-btn--primary:visited {
    background: var(--mtfy-tl-brand);
    color: #fff;
}

#feedorax-timeline-container.feedorax-timeline-container a.feedorax-job-btn.feedorax-job-btn--primary:hover,
#feedorax-timeline-container.feedorax-timeline-container a.feedorax-job-btn.feedorax-job-btn--primary:focus,
#feedorax-timeline-container.feedorax-timeline-container a.feedorax-job-btn.feedorax-job-btn--primary:focus-visible {
    background: var(--mtfy-tl-brand-dark);
    color: #fff;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-job-btn--danger {
    background: transparent;
    color: #b91c1c;
    border: 1px solid rgba(185, 28, 28, 0.35);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-job-btn--danger:hover {
    background: rgba(185, 28, 28, 0.08);
}

/* ─── Settings: notifications icon in toggle ─── */
#feedorax-timeline-container.feedorax-timeline-container .feedorax-notify-email-icon {
    flex-shrink: 0;
}

/* ─── Settings: blocked users ─── */
#feedorax-timeline-container.feedorax-timeline-container .settings-section-hint {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: var(--mtfy-tl-text-muted);
    line-height: 1.4;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-blocked-users-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-blocked-loading,
#feedorax-timeline-container.feedorax-timeline-container .feedorax-blocked-empty {
    padding: 16px;
    font-size: 0.9rem;
    color: var(--mtfy-tl-text-muted);
    text-align: center;
    background: var(--mtfy-tl-bg-card, var(--mtfy-tl-bg-input));
    border: 1px solid var(--mtfy-tl-border);
    border-radius: var(--mtfy-tl-radius);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-blocked-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--mtfy-tl-border);
    border-bottom: none;
    background: var(--mtfy-tl-bg-card, var(--mtfy-tl-bg-input));
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-blocked-row:first-of-type {
    border-radius: var(--mtfy-tl-radius) var(--mtfy-tl-radius) 0 0;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-blocked-row:last-of-type {
    border-bottom: 1px solid var(--mtfy-tl-border);
    border-radius: 0 0 var(--mtfy-tl-radius) var(--mtfy-tl-radius);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-blocked-row:only-of-type {
    border-radius: var(--mtfy-tl-radius);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-blocked-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-blocked-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--mtfy-tl-brand-light);
    color: var(--mtfy-tl-brand);
    font-size: 0.95rem;
    font-weight: 700;
    flex-shrink: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-blocked-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-blocked-unblock {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mtfy-tl-brand);
    background: var(--mtfy-tl-brand-light);
    border: 1px solid transparent;
    border-radius: var(--mtfy-tl-radius-sm, 8px);
    cursor: pointer;
    transition: var(--mtfy-tl-t, 0.2s ease);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-blocked-unblock:hover {
    border-color: var(--mtfy-tl-brand);
}

/* ─── Settings page ─── */
#feedorax-timeline-container.feedorax-timeline-container .settings-page {
    padding: 0;
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
    min-height: 45vh;
}

#feedorax-timeline-container.feedorax-timeline-container .settings-page-title {
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .settings-page-desc {
    margin: 0 0 28px;
    font-size: 0.95rem;
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .settings-section {
    margin-bottom: 28px;
}

#feedorax-timeline-container.feedorax-timeline-container .settings-section-title {
    margin: 0 0 12px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    padding: 12px 16px;
    border-radius: var(--mtfy-tl-radius);
    background: var(--mtfy-tl-bg-card, var(--mtfy-tl-bg-input));
    border: 1px solid var(--mtfy-tl-border);
    margin-bottom: 10px;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container .settings-row--link:hover {
    background: var(--mtfy-tl-bg-input);
    border-color: var(--mtfy-tl-text-muted);
}

#feedorax-timeline-container.feedorax-timeline-container .settings-row-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .settings-row--danger .settings-row-label {
    color: #dc2626;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .settings-row--danger .settings-row-label,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .settings-row--danger .settings-row-label {
    color: #f87171;
}

#feedorax-timeline-container.feedorax-timeline-container .settings-row-chevron {
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--mtfy-tl-text-muted);
    line-height: 1;
}

#feedorax-timeline-container.feedorax-timeline-container .settings-row--toggle {
    cursor: pointer;
    margin-bottom: 10px;
}

#feedorax-timeline-container.feedorax-timeline-container .settings-row--toggle .feedorax-dark-toggle {
    flex-shrink: 0;
}

/* ─── Settings: profile panel & legal modals ─── */
#feedorax-timeline-container.feedorax-timeline-container .settings-row--button {
    width: 100%;
    cursor: pointer;
    font: inherit;
    text-align: left;
    background: var(--mtfy-tl-bg-card, var(--mtfy-tl-bg-input));
    border: 1px solid var(--mtfy-tl-border);
    appearance: none;
    -webkit-appearance: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-legal-modal {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-scope .feedorax-legal-modal.feedorax-hide {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-legal-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    cursor: pointer;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-legal-modal-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    max-height: min(85vh, 640px);
    overflow: auto;
    background: var(--mtfy-tl-bg-card);
    border: 1px solid var(--mtfy-tl-border);
    border-radius: var(--mtfy-tl-radius);
    box-shadow: var(--mtfy-tl-shadow-lg);
    padding: 22px 22px 20px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-legal-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--mtfy-tl-radius-sm);
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--mtfy-tl-t);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-legal-modal-close:hover {
    background: var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-legal-modal-title {
    margin: 0 36px 14px 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-legal-modal-body {
    font-size: 0.92rem;
    color: var(--mtfy-tl-text-2);
    line-height: 1.55;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-legal-modal-body p {
    margin: 0 0 12px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-legal-modal-body a {
    color: var(--mtfy-tl-brand);
    font-weight: 600;
}

/* Settings & privacy modal */
#feedorax-timeline-container.feedorax-timeline-container #feedorax-modal-settings-privacy .feedorax-settings-privacy-modal__box {
    max-width: 560px;
    max-height: min(90vh, 720px);
    padding: 22px 22px 18px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 30px 60px -20px rgba(15, 23, 42, 0.32),
        0 8px 24px rgba(15, 23, 42, 0.12);
}

#feedorax-timeline-container.feedorax-timeline-container #feedorax-modal-settings-privacy .feedorax-settings-privacy-modal__title {
    margin-bottom: 12px;
    font-size: 1.24rem;
    letter-spacing: 0.01em;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-settings-privacy-modal__tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    padding: 4px;
    border-radius: 14px;
    background: var(--mtfy-tl-bg-input);
    border: 1px solid var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-tab {
    flex: 1;
    margin: 0;
    padding: 10px 12px;
    border: none;
    border-radius: 11px;
    background: transparent;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mtfy-tl-text-2);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-tab.is-active {
    background: var(--mtfy-tl-bg-card);
    color: var(--mtfy-tl-text);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
    transform: translateY(-1px);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-tab:focus-visible {
    outline: 2px solid var(--mtfy-tl-brand);
    outline-offset: 2px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-settings-privacy-modal__body {
    padding-right: 2px;
    max-height: calc(90vh - 138px);
    overflow: auto;
    overflow-x: hidden;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-scope .feedorax-sp-panel.feedorax-hide {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-msg:empty {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-msg:not(:empty) {
    display: block;
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.88rem;
    line-height: 1.45;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-msg.feedorax-sp-msg--ok:not(:empty) {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-msg.feedorax-sp-msg--err:not(:empty) {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .feedorax-sp-msg.feedorax-sp-msg--ok:not(:empty),
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-msg.feedorax-sp-msg--ok:not(:empty) {
    background: rgba(34, 197, 94, 0.15);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .feedorax-sp-msg.feedorax-sp-msg--err:not(:empty),
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-msg.feedorax-sp-msg--err:not(:empty) {
    background: rgba(239, 68, 68, 0.14);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-section {
    margin-bottom: 14px;
    padding: 14px 14px 12px;
    border: 1px solid var(--mtfy-tl-border);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(24, 119, 242, 0.04) 0%, rgba(24, 119, 242, 0.01) 100%), var(--mtfy-tl-bg-card);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-section:hover {
    border-color: rgba(24, 119, 242, 0.32);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-section:last-of-type {
    border-bottom: 1px solid var(--mtfy-tl-border);
    margin-bottom: 0;
    padding-bottom: 12px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-section--danger {
    border-color: rgba(220, 38, 38, 0.35);
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.06) 0%, rgba(220, 38, 38, 0.015) 100%), var(--mtfy-tl-bg-card);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-section--danger:hover {
    border-color: rgba(220, 38, 38, 0.5);
    box-shadow: 0 8px 22px rgba(220, 38, 38, 0.12);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-section-title {
    margin: 0 0 9px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-hint {
    margin: 0 0 13px;
    font-size: 0.84rem;
    color: var(--mtfy-tl-text-2);
    line-height: 1.45;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .feedorax-sp-section,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-section {
    background: linear-gradient(180deg, rgba(24, 119, 242, 0.1) 0%, rgba(24, 119, 242, 0.03) 100%), var(--mtfy-tl-bg-card);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .feedorax-sp-section:hover,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-section:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .feedorax-sp-section--danger,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-section--danger {
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.16) 0%, rgba(220, 38, 38, 0.04) 100%), var(--mtfy-tl-bg-card);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 520px) {
    #feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-field-row {
        grid-template-columns: 1fr;
    }
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mtfy-tl-text-2);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-input,
#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--mtfy-tl-border);
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text);
    font: inherit;
    font-size: 0.92rem;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-input:focus,
#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-select:focus {
    outline: none;
    border-color: rgba(24, 119, 242, 0.75);
    box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.16);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-check {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--mtfy-tl-border);
    border-radius: 12px;
    background: var(--mtfy-tl-bg-input);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--mtfy-tl-text);
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-check:hover {
    border-color: rgba(24, 119, 242, 0.42);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-check:focus-within {
    border-color: rgba(24, 119, 242, 0.75);
    box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.16);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-check input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    border: 2px solid #9ca3af;
    border-radius: 6px;
    background: #fff;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-check input::before {
    content: "";
    width: 9px;
    height: 9px;
    transform: scale(0);
    transition: transform 0.12s ease-in-out;
    clip-path: polygon(14% 44%, 0 59%, 45% 100%, 100% 20%, 84% 7%, 43% 62%);
    background: #fff;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-check input:checked {
    border-color: var(--mtfy-tl-brand);
    background: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-check input:checked::before {
    transform: scale(1);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .feedorax-sp-check,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-check {
    background: color-mix(in srgb, var(--mtfy-tl-bg-input) 86%, #ffffff 14%);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .feedorax-sp-check input,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-check input {
    background: var(--mtfy-tl-bg-card);
    border-color: #6b7280;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-footer-actions {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--mtfy-tl-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    position: sticky;
    bottom: 0;
    background: var(--mtfy-tl-bg-card);
    z-index: 2;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 10px;
    border: none;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.12s ease;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-btn--primary {
    background: var(--mtfy-tl-brand);
    color: #fff;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-btn--primary:hover:not(:disabled) {
    filter: brightness(1.05);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-btn--secondary {
    background: var(--mtfy-tl-bg-input);
    color: var(--mtfy-tl-text);
    border: 1px solid var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-btn--danger {
    background: #dc2626;
    color: #fff;
}

#feedorax-timeline-container.feedorax-timeline-container #feedorax-sp-save-main,
#feedorax-timeline-container.feedorax-timeline-container #feedorax-sp-save-main:hover,
#feedorax-timeline-container.feedorax-timeline-container #feedorax-sp-save-main:focus,
#feedorax-timeline-container.feedorax-timeline-container #feedorax-sp-delete-account,
#feedorax-timeline-container.feedorax-timeline-container #feedorax-sp-delete-account:hover,
#feedorax-timeline-container.feedorax-timeline-container #feedorax-sp-delete-account:focus {
    color: #fff;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-sp-btn--danger:hover:not(:disabled) {
    filter: brightness(1.06);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark #feedorax-modal-settings-privacy .feedorax-settings-privacy-modal__box,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container #feedorax-modal-settings-privacy .feedorax-settings-privacy-modal__box {
    box-shadow:
        0 34px 70px -18px rgba(0, 0, 0, 0.68),
        0 8px 28px rgba(0, 0, 0, 0.45);
}

@media (max-width: 640px) {
    #feedorax-timeline-container.feedorax-timeline-container #feedorax-modal-settings-privacy .feedorax-settings-privacy-modal__box {
        max-width: 100%;
        max-height: calc(100vh - 20px);
        border-radius: 16px;
        padding: 18px 14px 14px;
    }

    #feedorax-timeline-container.feedorax-timeline-container .feedorax-settings-privacy-modal__body {
        max-height: calc(100vh - 180px);
    }
}

/* Display & accessibility — text scale + reduced motion */
#feedorax-timeline-container.feedorax-timeline-container.feedorax-font-large {
    font-size: 104%;
}
#feedorax-timeline-container.feedorax-timeline-container.feedorax-font-larger {
    font-size: 112%;
}
#feedorax-timeline-container.feedorax-timeline-container.feedorax-scope.feedorax-reduce-motion,
#feedorax-timeline-container.feedorax-timeline-container.feedorax-scope.feedorax-reduce-motion * {
    scroll-behavior: auto;
}
#feedorax-timeline-container.feedorax-timeline-container.feedorax-scope.feedorax-reduce-motion *,
#feedorax-timeline-container.feedorax-timeline-container.feedorax-scope.feedorax-reduce-motion *::before,
#feedorax-timeline-container.feedorax-timeline-container.feedorax-scope.feedorax-reduce-motion *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
}

/* Display & accessibility modal — scoped + polished (only #feedorax-modal-display-a11y; report modal keeps default box) */
#feedorax-timeline-container.feedorax-timeline-container #feedorax-modal-display-a11y .feedorax-legal-modal-box {
    max-width: 400px;
    padding: 0;
    padding-bottom: 20px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 25px 50px -12px rgba(15, 23, 42, 0.28),
        0 0 0 1px rgba(0, 0, 0, 0.04);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark #feedorax-modal-display-a11y .feedorax-legal-modal-box,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container #feedorax-modal-display-a11y .feedorax-legal-modal-box {
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.06);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-modal-close.feedorax-legal-modal-close {
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.05);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .feedorax-a11y-modal-close.feedorax-legal-modal-close,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-modal-close.feedorax-legal-modal-close {
    background: rgba(255, 255, 255, 0.08);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-modal-close.feedorax-legal-modal-close:hover {
    background: rgba(0, 0, 0, 0.08);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .feedorax-a11y-modal-close.feedorax-legal-modal-close:hover,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-modal-close.feedorax-legal-modal-close:hover {
    background: rgba(255, 255, 255, 0.12);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-modal-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 22px 52px 18px 20px;
    background: linear-gradient(165deg, rgba(24, 119, 242, 0.09) 0%, rgba(24, 119, 242, 0.02) 55%, transparent 100%);
    border-bottom: 1px solid var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .feedorax-a11y-modal-head,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-modal-head {
    background: linear-gradient(165deg, rgba(24, 119, 242, 0.18) 0%, rgba(24, 119, 242, 0.04) 50%, transparent 100%);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-modal-head-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mtfy-tl-bg-card);
    color: var(--mtfy-tl-brand);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 4px 12px rgba(24, 119, 242, 0.15);
    border: 1px solid rgba(24, 119, 242, 0.2);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .feedorax-a11y-modal-head-icon,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-modal-head-icon {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
    border-color: rgba(255, 255, 255, 0.15);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-modal-head-text {
    min-width: 0;
    flex: 1;
    padding-top: 2px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-modal-title {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--mtfy-tl-text);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-tagline {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--mtfy-tl-text-2);
    font-weight: 500;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-modal-body.feedorax-legal-modal-body {
    padding: 16px 18px 0;
    font-size: 0.9rem;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-card {
    background: var(--mtfy-tl-bg-input);
    border-radius: 14px;
    border: 1px solid var(--mtfy-tl-border);
    padding: 4px 14px;
    margin-bottom: 12px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-card--segment {
    padding: 14px;
    margin-bottom: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-section-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mtfy-tl-text-muted);
    margin-bottom: 10px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-row--last {
    border-bottom: none;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-row-text {
    flex: 1;
    min-width: 0;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-label {
    display: block;
    font-weight: 600;
    font-size: 0.94rem;
    color: var(--mtfy-tl-text);
    letter-spacing: -0.01em;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-hint {
    display: block;
    font-size: 0.8rem;
    color: var(--mtfy-tl-text-2);
    margin-top: 3px;
    line-height: 1.35;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 30px;
    flex-shrink: 0;
    cursor: pointer;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-switch-input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-switch-input:focus-visible + .feedorax-a11y-switch-slider {
    outline: 2px solid var(--mtfy-tl-brand);
    outline-offset: 3px;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-switch-slider {
    position: absolute;
    inset: 0;
    background: var(--mtfy-tl-border);
    border-radius: 32px;
    transition: background 0.22s ease, box-shadow 0.22s ease;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-switch-slider::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-switch-input:checked + .feedorax-a11y-switch-slider {
    background: var(--mtfy-tl-brand, #1877f2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-switch-input:checked + .feedorax-a11y-switch-slider::after {
    transform: translateX(20px);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-segment {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    padding: 5px;
    border-radius: 12px;
    background: var(--mtfy-tl-bg-card);
    border: 1px solid var(--mtfy-tl-border);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-segment-btn {
    flex: 1;
    min-width: 0;
    padding: 10px 8px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--mtfy-tl-text-2);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-segment-btn:hover {
    color: var(--mtfy-tl-text);
    background: rgba(0, 0, 0, 0.04);
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .feedorax-a11y-segment-btn:hover,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-segment-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

#feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-segment-btn.is-active {
    color: var(--mtfy-tl-text);
    background: var(--mtfy-tl-bg-input);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    outline: 1px solid var(--mtfy-tl-brand);
    outline-offset: 0;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .feedorax-a11y-segment-btn.is-active,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container .feedorax-a11y-segment-btn.is-active {
    color: var(--mtfy-tl-text);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.feedorax-report-modal-body .feedorax-report-label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 6px;
    color: var(--mtfy-tl-text);
}
.feedorax-report-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 0.92rem;
    line-height: 1.45;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background: var(--mtfy-tl-bg-input, #f0f2f5);
    color: var(--mtfy-tl-text);
    resize: vertical;
    min-height: 100px;
}
#feedorax-timeline-container.feedorax-timeline-container.feedorax-dark .feedorax-report-textarea {
    border-color: rgba(255, 255, 255, 0.12);
}
.feedorax-report-actions {
    margin-top: 14px;
}
.feedorax-report-send-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    background: var(--mtfy-tl-brand, #1877f2);
    color: #fff;
    cursor: pointer;
}
.feedorax-report-fallback {
    margin-top: 10px;
    font-size: 0.88rem;
    color: #c00;
}

/* ══════════════════════════════════════════
   GUEST GATE — Welcome + Sign in / Sign up (timeline shortcode)
══════════════════════════════════════════ */
#feedorax-timeline-container.feedorax-timeline-container.feedorax-scope.feedorax-timeline--guest #app.feedorax-app--guest-hidden {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-scope.feedorax-timeline--guest > .modal-overlay,
#feedorax-timeline-container.feedorax-timeline-container.feedorax-scope.feedorax-timeline--guest > .story-composer-overlay,
#feedorax-timeline-container.feedorax-timeline-container.feedorax-scope.feedorax-timeline--guest > .story-viewer-overlay {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-scope.feedorax-timeline--guest .mobile-bottom-nav {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-scope.feedorax-timeline--guest .feedorax-slide-notifications {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline--guest.feedorax-timeline-container.feedorax-scope {
    min-height: 100vh;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-guest-gate {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
}

/* Auth overlay: scroll the gate so long sign-up forms work (flex center alone clips tall content on mobile). */
#feedorax-timeline-container.feedorax-timeline--guest .feedorax-guest-gate--auth,
#feedorax-timeline-container.feedorax-timeline--guest.feedorax-guest-welcome-seen .feedorax-guest-gate {
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-guest-gate--has-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.78);
    z-index: 0;
    pointer-events: none;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-guest-gate--has-bg .feedorax-welcome-phase,
#feedorax-timeline-container.feedorax-timeline--guest .feedorax-guest-gate--has-bg .feedorax-auth-phase {
    position: relative;
    z-index: 1;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-welcome-phase {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    transition: opacity 0.55s ease, visibility 0.55s ease;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-welcome-phase--done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-welcome-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-welcome-apple {
    text-align: center;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-welcome-lines {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15em;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-welcome-line {
    display: block;
    font-size: clamp(2.25rem, 7vw, 3.5rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #f8fafc;
    opacity: 0;
    transform: translateY(1.1em);
    filter: blur(6px);
    animation: feedorax-welcome-line-in 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-welcome-line--1 {
    animation-delay: 0.15s;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-welcome-line--2 {
    animation-delay: 0.75s;
    font-weight: 500;
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    color: #cbd5e1;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-welcome-line--3 {
    animation-delay: 1.35s;
    background: linear-gradient(135deg, var(--mtfy-tl-brand-pale) 0%, var(--mtfy-tl-brand) 50%, var(--mtfy-tl-brand-pale2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    font-size: clamp(2.5rem, 8vw, 4rem);
}

@keyframes feedorax-welcome-line-in {
    0% {
        opacity: 0;
        transform: translateY(1.1em);
        filter: blur(8px);
    }

    55% {
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-welcome-continue {
    position: absolute;
    bottom: max(32px, env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    padding: 14px 36px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, var(--mtfy-tl-brand), var(--mtfy-tl-brand-dark));
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(var(--mtfy-tl-brand-rgb), 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-welcome-continue:hover {
    transform: translateX(-50%) scale(1.03);
    box-shadow: 0 12px 32px rgba(var(--mtfy-tl-brand-rgb), 0.5);
}

/* Continue + auth primary buttons: white label in light mode (theme button color often overrides). */
#feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest button.feedorax-welcome-continue,
#feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest button.feedorax-welcome-continue:hover,
#feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest button.feedorax-welcome-continue:focus,
#feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest button.feedorax-welcome-continue:focus-visible {
    color: #fff;
    -webkit-text-fill-color: #fff;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-phase {
    width: 100%;
    max-width: none;
    max-height: 100vh;
    overflow-y: auto;
    padding: 0;
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

/* Hide visible scrollbar while keeping scroll behavior */
#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-phase {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-phase::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-guest-gate--auth .feedorax-auth-phase {
    opacity: 1;
    transform: scale(1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    min-height: 0;
    width: 100%;
    max-height: none;
    padding: 0;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}

/* After Continue once: skip welcome before feedorax-timeline.js runs (feedorax-welcome-seen in localStorage). */
#feedorax-timeline-container.feedorax-timeline--guest.feedorax-guest-welcome-seen .feedorax-welcome-phase {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#feedorax-timeline-container.feedorax-timeline--guest.feedorax-guest-welcome-seen .feedorax-welcome-line {
    animation: none;
    opacity: 0;
    transform: none;
    filter: none;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest.feedorax-guest-welcome-seen .feedorax-auth-phase.feedorax-hide {
    display: block;
}

#feedorax-timeline-container.feedorax-timeline--guest.feedorax-guest-welcome-seen .feedorax-auth-phase {
    opacity: 1;
    transform: scale(1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    min-height: 0;
    width: 100%;
    max-height: none;
    padding: 0;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    overflow-x: hidden;
    overflow-y: visible;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-left {
    padding: clamp(24px, 4vw, 48px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
    color: #0f172a;
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-brand-logo-img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: var(--mtfy-tl-brand-icon-radius);
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-brand-name {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-heading {
    font-size: clamp(1.65rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 8px;
    color: #0f172a;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-sub {
    margin: 0 0 24px;
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.5;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-form {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
    margin-top: 3px;
    margin-bottom: 3px;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-input {
    width: 100%;
    height: 32px;
    min-height: 32px;
    padding: 5px 8px;
    border: 1.5px solid #e2e8f0;
    border-radius: 7px;
    font-size: 0.8125rem;
    line-height: 1.2;
    margin-bottom: 0;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-input:focus {
    outline: none;
    border-color: var(--mtfy-tl-brand);
    box-shadow: 0 0 0 3px rgba(var(--mtfy-tl-brand-rgb), 0.2);
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-inline-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: start;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-inline-field {
    min-width: 0;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-inline-field .feedorax-auth-label {
    margin-top: 0;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 4px;
    flex-wrap: wrap;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: #475569;
    cursor: pointer;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--mtfy-tl-brand);
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-link {
    font-size: 0.875rem;
    color: var(--mtfy-tl-brand);
    text-decoration: none;
    font-weight: 600;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-link:hover {
    text-decoration: underline;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-message--error {
    font-size: 0.875rem;
    color: #b91c1c;
    margin: 8px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(239, 68, 68, 0.25);
    background: rgba(254, 226, 226, 0.8);
    line-height: 1.35;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-pass-strength {
    margin: 6px 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-pass-strength--weak {
    color: #dc2626;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-pass-strength--medium {
    color: #d97706;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-pass-strength--strong {
    color: #15803d;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-submit {
    margin-top: 8px;
    width: 100%;
    min-height: 34px;
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--mtfy-tl-brand), var(--mtfy-tl-brand-dark));
    color: #fff;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest button.feedorax-auth-submit,
#feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest button.feedorax-auth-submit:hover,
#feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest button.feedorax-auth-submit:focus,
#feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest button.feedorax-auth-submit:focus-visible,
#feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest button.feedorax-auth-submit:disabled {
    color: #fff;
    -webkit-text-fill-color: #fff;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest button.feedorax-auth-submit .feedorax-auth-btn-label {
    color: #fff;
    -webkit-text-fill-color: #fff;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-submit:hover:not(:disabled) {
    opacity: 0.95;
    transform: translateY(-1px);
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-submit:disabled {
    opacity: 0.6;
    cursor: wait;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-submit.is-loading .feedorax-auth-btn-label {
    opacity: 0.96;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-btn-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-btn-spinner.feedorax-hide {
    display: none;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-spinner-dot {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, 0.38);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: feedorax-auth-spin 0.75s linear infinite;
}

@keyframes feedorax-auth-spin {
    to {
        transform: rotate(360deg);
    }
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-switch {
    margin-top: 20px;
    text-align: center;
    font-size: 0.9rem;
    color: #64748b;
}

#feedorax-timeline-container.feedorax-timeline--guest #feedorax-auth-signin-panel > .feedorax-auth-switch {
    margin-top: 32px;
}

#feedorax-timeline-container.feedorax-timeline--guest #feedorax-auth-signin-panel > .feedorax-auth-heading {
    margin-bottom: 14px;
}

#feedorax-timeline-container.feedorax-timeline--guest #feedorax-auth-signin-panel > .feedorax-auth-sub {
    margin-bottom: 32px;
    line-height: 1.55;
}

#feedorax-timeline-container.feedorax-timeline--guest #feedorax-auth-signin-panel > .feedorax-auth-form {
    gap: 10px;
}

#feedorax-timeline-container.feedorax-timeline--guest #feedorax-auth-signin-panel .feedorax-auth-form > .feedorax-auth-label:first-of-type {
    margin-top: 2px;
    padding-top: 4px;
}

#feedorax-timeline-container.feedorax-timeline--guest #feedorax-forgot-step-request > .feedorax-auth-switch {
    margin-top: 28px;
}

#feedorax-timeline-container.feedorax-timeline--guest #feedorax-signup-step-form > .feedorax-auth-heading {
    margin-bottom: 16px;
}

#feedorax-timeline-container.feedorax-timeline--guest #feedorax-signup-step-form > .feedorax-auth-sub {
    margin-bottom: 28px;
}

#feedorax-timeline-container.feedorax-timeline--guest #feedorax-signup-step-form > .feedorax-auth-switch {
    margin-top: 32px;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-link-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 700;
    color: var(--mtfy-tl-brand);
    cursor: pointer;
    text-decoration: none;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-link-btn:hover {
    text-decoration: underline;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-otp-wrap {
    display: grid;
    grid-template-columns: repeat(6, minmax(36px, 1fr));
    gap: 8px;
    margin-top: 6px;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-otp-box {
    width: 100%;
    height: 34px;
    border: 1.5px solid #e2e8f0;
    border-radius: 7px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    background: #fff;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-reset-otp-box {
    width: 100%;
    height: 34px;
    border: 1.5px solid #e2e8f0;
    border-radius: 7px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    background: #fff;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-otp-box:focus {
    outline: none;
    border-color: var(--mtfy-tl-brand);
    box-shadow: 0 0 0 3px rgba(var(--mtfy-tl-brand-rgb), 0.18);
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-reset-otp-box:focus {
    outline: none;
    border-color: var(--mtfy-tl-brand);
    box-shadow: 0 0 0 3px rgba(var(--mtfy-tl-brand-rgb), 0.18);
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-row--otp {
    justify-content: space-between;
    margin-top: 10px;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-otp-timer {
    margin: 8px 0 0;
    font-size: 0.78rem;
    color: #64748b;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-right {
    position: relative;
    min-height: 280px;
    background: linear-gradient(165deg, var(--mtfy-tl-brand-dark) 0%, var(--mtfy-tl-brand) 42%, var(--mtfy-tl-brand-pale) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-hero-svg {
    width: 100%;
    max-width: 320px;
    position: relative;
    z-index: 1;
}

#feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-hero-illu {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.2));
}

/* Desktop: smaller field labels; no scroll on guest gate (form column scrolls only if needed). */
@media (min-width: 769px) {
    #feedorax-timeline-container.feedorax-timeline--guest .feedorax-guest-gate--auth,
    #feedorax-timeline-container.feedorax-timeline--guest.feedorax-guest-welcome-seen .feedorax-guest-gate {
        overflow: hidden;
    }

    #feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-phase {
        overflow-y: hidden;
    }

    #feedorax-timeline-container.feedorax-timeline--guest .feedorax-guest-gate--auth .feedorax-auth-phase,
    #feedorax-timeline-container.feedorax-timeline--guest.feedorax-guest-welcome-seen .feedorax-auth-phase {
        overflow: hidden;
        max-height: 100vh;
        max-height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
    }

    #feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-split {
        max-height: 100vh;
        max-height: 100dvh;
        overflow: hidden;
    }

    #feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-left {
        min-height: 0;
        max-height: 100vh;
        max-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-left::-webkit-scrollbar {
        width: 6px;
    }

    #feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-left::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.45);
        border-radius: 999px;
    }

    #feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-label {
        font-size: 0.75rem;
        margin-top: 2px;
        margin-bottom: 2px;
    }
}

@media (max-width: 768px) {
    #feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-split {
        grid-template-columns: 1fr;
        min-height: 100vh;
        min-height: 100dvh;
        max-height: none;
        align-content: start;
        align-items: stretch;
        background: #f1f5f9;
        padding-top: env(safe-area-inset-top, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    #feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-right {
        display: none;
    }

    #feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-left {
        max-width: none;
        width: auto;
        margin: 12px max(16px, env(safe-area-inset-right, 0px)) 28px max(16px, env(safe-area-inset-left, 0px));
        padding: 24px 20px 28px;
        background: #fff;
        border-radius: 16px;
        border: 1px solid rgba(226, 232, 240, 0.95);
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.04),
            0 12px 40px rgba(15, 23, 42, 0.08);
        justify-content: flex-start;
    }

    #feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-brand {
        margin-bottom: 16px;
    }

    #feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-form {
        gap: 6px;
    }

    #feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-input {
        min-height: 38px;
        height: 38px;
        border-radius: 8px;
        font-size: 16px;
        padding: 5px 10px;
    }

    #feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-submit {
        min-height: 40px;
        margin-top: 10px;
        border-radius: 8px;
        font-size: 0.875rem;
    }

    #feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-auth-split,
    body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-split {
        background: #0f172a;
    }

    #feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-auth-left,
    body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-left {
        background: #1e293b;
        border-color: rgba(51, 65, 85, 0.9);
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.2),
            0 16px 48px rgba(0, 0, 0, 0.35);
    }

    #feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-inline-fields {
        grid-template-columns: 1fr;
        gap: 0;
    }

    #feedorax-timeline-container.feedorax-timeline--guest .feedorax-otp-wrap {
        grid-template-columns: repeat(6, minmax(32px, 1fr));
        gap: 6px;
    }
}

/* Guest auth when timeline dark mode is on */
#feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-auth-split,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-split {
    background: #1e293b;
}

#feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-auth-left,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-left {
    background: #1e293b;
    color: #f1f5f9;
}

#feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-auth-brand-name,
#feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-auth-heading,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-brand-name,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-heading {
    color: #f1f5f9;
}

#feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-auth-sub,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-sub {
    color: #94a3b8;
}

#feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-auth-label,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-label {
    color: #cbd5e1;
}

#feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-auth-input,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-input {
    background: #334155;
    border-color: #475569;
    color: #f1f5f9;
}

#feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-otp-box,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline--guest .feedorax-otp-box {
    background: #334155;
    border-color: #475569;
    color: #f1f5f9;
}

#feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-reset-otp-box,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline--guest .feedorax-reset-otp-box {
    background: #334155;
    border-color: #475569;
    color: #f1f5f9;
}

#feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-otp-timer,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline--guest .feedorax-otp-timer {
    color: #94a3b8;
}

#feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-auth-spinner-dot,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-spinner-dot {
    border-color: rgba(255, 255, 255, 0.38);
    border-top-color: #ffffff;
}

#feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-auth-message--error,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-message--error {
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.35);
    background: rgba(127, 29, 29, 0.35);
}

#feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-pass-strength--weak,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline--guest .feedorax-pass-strength--weak {
    color: #fca5a5;
}

#feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-pass-strength--medium,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline--guest .feedorax-pass-strength--medium {
    color: #fcd34d;
}

#feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-pass-strength--strong,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline--guest .feedorax-pass-strength--strong {
    color: #86efac;
}

#feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-auth-check,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-check {
    color: #cbd5e1;
}

/* Guest auth dark: links, footer line, OTP email highlight, inputs detail */
#feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-auth-switch,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-switch {
    color: #94a3b8;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-auth-sub strong,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-sub strong {
    color: #e2e8f0;
    font-weight: 700;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-auth-input::placeholder,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-input::placeholder {
    color: #94a3b8;
    opacity: 1;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-auth-input:-webkit-autofill,
#feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-auth-input:-webkit-autofill:hover,
#feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-auth-input:-webkit-autofill:focus,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-input:-webkit-autofill,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-input:-webkit-autofill:hover,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f1f5f9;
    caret-color: #f1f5f9;
    box-shadow: 0 0 0 1000px #334155 inset;
    transition: background-color 99999s ease-out 0s;
}

#feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-auth-left::-webkit-scrollbar-thumb,
body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-left::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
}

@media (max-width: 768px) {
    #feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-auth-split,
    body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-split {
        background: #0f172a;
    }

    #feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest.feedorax-dark .feedorax-auth-left,
    body.feedorax-dark #feedorax-timeline-container.feedorax-timeline-container.feedorax-timeline--guest .feedorax-auth-left {
        background: #1e293b;
        border-color: rgba(51, 65, 85, 0.95);
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.22),
            0 12px 40px rgba(0, 0, 0, 0.35);
        color: #f1f5f9;
    }
}