/* SCRIPT FONTS: Arabic and Ethiopic fallbacks (loaded only when those scripts appear) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;700;800&family=Noto+Sans+Ethiopic:wght@400;700;800&display=swap');
/* ngoma light theme: only applies when <html data-theme="light"> */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:#ffffff; --surface:#ffffff; --surface2:#f7f7f9; --surface3:#ececef;
  --border:#e3e3e8; --border2:#d5d5db; --border-focus:rgba(0,0,0,0.35);
  --text:#111114; --muted:#6b6b76; --muted2:#6b6b76;
  --error:#d63031; --success:#2f9e44; --green:#2f9e44;
  --amber:#c2620a; --blue:#2563eb; --pixl:#7c3aed;
  --nav-bg:rgba(255,255,255,0.92);
  --text-2:#3a3a44; --text-3:#55555f; --faint:#9a9aa5;
  --border-strong:#c8c8d0; --link:#1d4ed8; --danger:#c92a2a;
  --tint-hover:rgba(0,0,0,0.03);
}

/* BUTTON FLIP: white pill CTAs become dark pills in light mode */
:root[data-theme="light"] .btn-follow, :root[data-theme="light"] .btn-follow-sm, :root[data-theme="light"] .btn-join, :root[data-theme="light"] .tf-join, :root[data-theme="light"] .btn-submit, :root[data-theme="light"] .btn-save, :root[data-theme="light"] .modal-submit, :root[data-theme="light"] .modal-send, :root[data-theme="light"] .composer-submit, :root[data-theme="light"] .reply-submit, :root[data-theme="light"] .follow-btn-inline, :root[data-theme="light"] .ad-cta, :root[data-theme="light"] .ad-banner-cta, :root[data-theme="light"] #reportModal .modal-submit, :root[data-theme="light"] [style*="background:#fff;color:#000"], :root[data-theme="light"] [style*="background: #fff; color: #000"] {
  background: #111114 !important;
  color: #ffffff !important;
}
:root[data-theme="light"] .btn-follow:hover, :root[data-theme="light"] .btn-follow-sm:hover, :root[data-theme="light"] .btn-join:hover, :root[data-theme="light"] .tf-join:hover, :root[data-theme="light"] .btn-submit:hover, :root[data-theme="light"] .btn-save:hover, :root[data-theme="light"] .modal-submit:hover, :root[data-theme="light"] .modal-send:hover, :root[data-theme="light"] .composer-submit:hover, :root[data-theme="light"] .reply-submit:hover, :root[data-theme="light"] .follow-btn-inline:hover, :root[data-theme="light"] .ad-cta:hover {
  background: #33333a !important;
}

/* TEXT FIX: pale dark-mode greys and links become readable on white */
:root[data-theme="light"] .post-body, :root[data-theme="light"] .notif-text, :root[data-theme="light"] .quote-body, :root[data-theme="light"] .ad-post-body, :root[data-theme="light"] [style*="color:#ccc"], :root[data-theme="light"] [style*="color:#bbb"], :root[data-theme="light"] [style*="color:#ddd"], :root[data-theme="light"] [style*="color:#aaa"] {
  color: #3a3a44 !important;
}
:root[data-theme="light"] .hashtag, :root[data-theme="light"] .mention, :root[data-theme="light"] .mention:hover, :root[data-theme="light"] .post-link, :root[data-theme="light"] [style*="color:#a8c7f6"] {
  color: #1d4ed8 !important;
}

/* NAVBAR FIX: white bar in light mode */
:root[data-theme="light"] .navbar { background: var(--nav-bg); }
:root[data-theme="light"] .nav-brand-name { color: #D94E4C; }

/* ADVERTISE FIX: pale blue CTA card colours readable on white */
:root[data-theme="light"] .advertise-cta-link, :root[data-theme="light"] .advertise-cta-link i, :root[data-theme="light"] [style*="color:#a5cffd"] {
  color: #1d4ed8 !important;
}

/* CONTENT FIX: bio, image letterbox, login featured panel */
:root[data-theme="light"] .profile-bio { color: #3a3a44 !important; }
:root[data-theme="light"] img[style*="background:#111"], :root[data-theme="light"] .media-grid .media-item img { background: #f0f0f3 !important; }
:root[data-theme="light"] div[style*="background:#000"]:has(> img), :root[data-theme="light"] div[style*="background: #000"]:has(> img) { background: #f0f0f3 !important; }

/* ACTION SIZE: bigger post action buttons (both themes) */
.post-stats .stat { font-size: 0.85rem; padding: 6px 9px; min-height: 32px; gap: 6px; }
.post-stats .stat i { font-size: 1.15rem; }

/* IMG BG EXTRA: spacing variants and contain-fit images */
:root[data-theme="light"] img[style*="background: #111"], :root[data-theme="light"] img[style*="object-fit:contain"], :root[data-theme="light"] img[style*="object-fit: contain"] { background: #f0f0f3 !important; }

/* LOGIN INPUT FIX: light fields on the sign-in/sign-up form */
:root[data-theme="light"] .right input:not([type=checkbox]):not([type=radio]) { background:#f6f6f8 !important; color:#111114 !important; }
:root[data-theme="light"] .right input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #f6f6f8 inset !important; -webkit-text-fill-color:#111114 !important; }

/* NO IMG BOX: images without a bordered container, both themes */
html:root[data-theme] div[style*="border:1px solid var(--border)"]:has(> img) { border: none !important; background: transparent !important; }
html:root[data-theme] img[style*="background:#111"], html:root[data-theme] img[style*="background: #111"], html:root[data-theme] img[style*="object-fit:contain"], html:root[data-theme] img[style*="object-fit: contain"], html:root[data-theme] .media-grid .media-item img { background: transparent !important; }
html:root[data-theme] div[style*="border:1px solid var(--border)"] > img[style*="max-height:500px"] { width: auto !important; max-width: 100% !important; border-radius: 12px !important; }

/* BODY SIZE: larger post text (both themes), closer to X */
html .post-body { font-size: 1rem; line-height: 1.5; }
html .quote-body { font-size: 0.92rem; }
html .ad-post-body { font-size: 1rem; }

/* IMG SHAPE: single images align with post text, capped shape like X */
html:root[data-theme] div[style*="border:1px solid var(--border)"]:has(> img[style*="max-height:500px"]) { margin-left: 48px !important; max-width: 480px !important; }
html:root[data-theme] div[style*="border:1px solid var(--border)"] > img[style*="max-height:500px"] { width: 100% !important; height: auto !important; max-height: 520px !important; object-fit: cover !important; border-radius: 12px !important; }

/* LINK PREVIEW FIX: light link cards */
:root[data-theme="light"] .lp-video, :root[data-theme="light"] .lp-spotify, :root[data-theme="light"] .lp-card { background: var(--surface2); border-color: var(--border); }
:root[data-theme="light"] .lp-video:hover, :root[data-theme="light"] .lp-card:hover { border-color: var(--border2); }
:root[data-theme="light"] .lp-card-body { border-top-color: var(--border); }
:root[data-theme="light"] .lp-card-title, :root[data-theme="light"] .lp-video-title { color: var(--text); }
:root[data-theme="light"] .lp-card-desc, :root[data-theme="light"] .lp-video-author { color: var(--text-3); }
:root[data-theme="light"] .lp-card-site { color: var(--text-3); }
:root[data-theme="light"] .lp-spotify-art { background-color: var(--border); }

/* CONV ACTIVE: selected conversation row in light mode */
:root[data-theme="light"] .conv-item.active { background: #eceef5; }

/* REPLY PREVIEW: quoted snippet inside received bubbles */
:root[data-theme="light"] .msg-row.theirs .msg-reply-preview { background: rgba(0,0,0,0.06); border-left-color: rgba(0,0,0,0.3); color: var(--text-2); }
:root[data-theme="light"] .msg-row.theirs .msg-reply-preview strong { color: var(--text); }

/* SIGNUP FIX: checkbox tint and pale outline link */
:root[data-theme="light"] .right input[type=checkbox], :root[data-theme="light"] .remember input[type="checkbox"] { accent-color: #111114; }
:root[data-theme="light"] a[href="/login"][style*="border:1px solid #333"] { border-color: var(--border-strong) !important; color: var(--text-2) !important; }

/* STRENGTH FIX: empty strength-bar segments in light mode (low specificity so s1-s4 colours still win) */
:where(:root[data-theme="light"]) .strength-bar span { background: var(--border2); }

/* LEFT PANEL LIGHT: login/signup featured panel follows the theme */
:root[data-theme="light"] .left { background: var(--surface2); }
:root[data-theme="light"] .left::before { background: var(--surface2); }
:root[data-theme="light"] .left .brand-name { color: #D94E4C; }
:root[data-theme="light"] .left::-webkit-scrollbar-thumb { background: var(--border2); }

/* LEFT DIVIDER: post separators in the login/signup featured panel */
:root[data-theme="light"] .left .post { border-bottom-color: var(--border); }

/* LEFT IMG ALIGN: no 48px image indent inside the login/signup featured panel */
html:root[data-theme] .left div[style*="border:1px solid var(--border)"]:has(> img[style*="max-height:500px"]) { margin-left: 0 !important; max-width: 100% !important; }

/* NOTIF FIX: light page header and unread rows */
:root[data-theme="light"] .page-header { background: var(--nav-bg); }
:root[data-theme="light"] .notif-item.unread, :root[data-theme="light"] .mention-item.unread { background: rgba(0,0,0,0.03); }
:root[data-theme="light"] .notif-item.unread::before, :root[data-theme="light"] .mention-item.unread::before { background: rgba(0,0,0,0.25); }

/* NOTIF FLAT: X-style plain preview text, no pill */
html .notif-preview { background: transparent; border-left: none; padding: 2px 0; }

/* NOTIF X STYLE: fuller previews, inline time (both themes) */
html .notif-preview { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.9rem; line-height: 1.4; margin-top: 4px; }
html .notif-body { position: relative; }
html .notif-body > .notif-time { position: absolute; top: 0; right: 0; margin: 0; font-size: 0.78rem; }
html .notif-body > .notif-text { padding-right: 48px; }

/* NOTIF THUMB: small square thumbnail on the right, like X */
html .notif-body > div[style*="max-width:280px"] { position: absolute !important; top: 30px; right: 0; width: 72px; max-width: 72px !important; margin: 0 !important; border-radius: 10px !important; }
html .notif-body > div[style*="max-width:280px"] img { width: 72px !important; height: 72px !important; max-height: 72px !important; object-fit: cover !important; }
html .notif-body:has(> div[style*="max-width:280px"]) { min-height: 104px; }
html .notif-body:has(> div[style*="max-width:280px"]) .notif-preview { padding-right: 88px; }

/* PERSON BIO: readable, two-line bio in search results (both themes) */
html .person-bio { color: var(--text-2, #bbb); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-right: 8px; line-height: 1.35; }

/* FOLLOWS YOU: small tag beside the handle (both themes) */
html .follows-you { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--surface2); color: var(--muted); font-size: 0.68rem; font-weight: 700; vertical-align: middle; }

/* TIKTOK SOFT: no black frame around embeds in light mode */
:root[data-theme="light"] .native-feed-video { border: 1px solid var(--border) !important; background: transparent !important; }
:root[data-theme="light"] .native-feed-video iframe { box-shadow: none !important; }

/* VIDEO PREVIEW: compact composer video card, shrink-wrapped to the video (both themes) */
html #tc-global-video-preview > div:first-child { width: fit-content !important; max-width: 340px !important; margin: 0 0 10px 60px !important; border-radius: 14px !important; background: #000; }
html #tc-global-video-preview > div:first-child video { width: auto !important; max-width: 100% !important; max-height: 360px !important; margin: 0 auto; }
html #tc-global-video-preview > #tc-video-upload-status { padding-left: 60px !important; }

/* VIDEO SPACING: breathing room around the composer video card */
html #tc-global-video-preview { padding-top: 12px; }
html #tc-global-video-preview > div:first-child { margin-bottom: 14px !important; }

/* EMOJI LIGHT: emoji picker follows the light theme */
:root[data-theme="light"] .ep-picker { background: var(--surface) !important; border-color: var(--border) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.18) !important; }
:root[data-theme="light"] .ep-search-row, :root[data-theme="light"] .ep-skin-row, :root[data-theme="light"] .ep-tabs { border-bottom-color: var(--border) !important; }
:root[data-theme="light"] .ep-search { background: var(--surface2) !important; border-color: var(--border) !important; color: var(--text) !important; }
:root[data-theme="light"] .ep-search::placeholder { color: var(--muted) !important; }
:root[data-theme="light"] .ep-close { color: var(--muted) !important; }
:root[data-theme="light"] .ep-close:hover, :root[data-theme="light"] .ep-tab:hover, :root[data-theme="light"] .ep-btn:hover, :root[data-theme="light"] .ep-skin-toggle:hover, :root[data-theme="light"] .ep-skin-btn:hover, :root[data-theme="light"] .ep-skin-btn.active, :root[data-theme="light"] .ep-tab.active { background: var(--surface2) !important; color: var(--text) !important; }
:root[data-theme="light"] .ep-label { color: var(--muted) !important; }
:root[data-theme="light"] .ep-skin-pop { background: var(--surface) !important; border-color: var(--border) !important; }

/* APPLY CARD: PIXLstream creator box in light mode */
:root[data-theme="light"] .apply-card { background: linear-gradient(135deg,#f4f0ff,#eef3ff); border-color: rgba(124,58,237,0.25); }
:root[data-theme="light"] .apply-card h1, :root[data-theme="light"] .apply-card h2, :root[data-theme="light"] .apply-card h3, :root[data-theme="light"] .apply-card strong { color: var(--text); }
:root[data-theme="light"] .apply-card p { color: var(--text-3); }

/* REPLY TEXT: pale reply body text readable in light mode */
:root[data-theme="light"] .reply-body, :root[data-theme="light"] .reply-text, :root[data-theme="light"] .reply-content { color: var(--text-2) !important; }

/* POST PAGE TEXT: remaining pale text on the post page in light mode */
:root[data-theme="light"] .ancestor-body, :root[data-theme="light"] .col-body, :root[data-theme="light"] .quoted-body { color: var(--text-2) !important; }
:root[data-theme="light"] .reply-textarea::placeholder { color: var(--muted) !important; }

/* PALE TEXT SWEEP: remaining pale grey text classes in light mode */
:root[data-theme="light"] .quoted-body, :root[data-theme="light"] .sidebar-about, :root[data-theme="light"] .mention-text, :root[data-theme="light"] .tf-desc { color: var(--text-2) !important; }

/* THREAD GAP: ancestor thread lines reach the next ancestor avatar (both themes) */
html .ancestor-thread-line { margin-bottom: -12px; }

/* ERROR PAGE LIGHT: post-not-found and other error pages in light mode */
:root[data-theme="light"] body:has(.error-wrap) { background: #ffffff !important; color: #111114 !important; }
:root[data-theme="light"] .error-card { background: #f6f6f8 !important; border-color: #e3e3e8 !important; }
:root[data-theme="light"] .error-msg, :root[data-theme="light"] .error-icon { color: #6b6b76 !important; }
:root[data-theme="light"] .error-btn { background: #111114 !important; color: #ffffff !important; }
:root[data-theme="light"] .error-btn:hover { background: #33333a !important; }

/* LANG WRAP: language picker wraps to two rows */
.theme-opts { flex-wrap: wrap; }
.theme-opts .theme-opt { min-width: 30%; }

/* RTL BIDI: keep # and @ on the correct side in Arabic */
html[dir="rtl"] .hashtag, html[dir="rtl"] .mention, html[dir="rtl"] .post-handle, html[dir="rtl"] .person-handle, html[dir="rtl"] .trend-tag, html[dir="rtl"] .tag-name, html[dir="rtl"] .post-body, html[dir="rtl"] .reply-body { unicode-bidi: plaintext; }

/* RTL LAYOUT: flip hardcoded left indents and fix # and @ placement (Arabic only) */
html[dir="rtl"] .post-body, html[dir="rtl"] .ad-footer { padding-left: 0 !important; padding-right: 48px !important; }
html[dir="rtl"] .post-media { margin-left: 0 !important; margin-right: 48px !important; }
html[dir="rtl"] .post-stats { padding-left: 0 !important; padding-right: 40px !important; }
html[dir="rtl"] .column-children { margin-left: 0 !important; margin-right: 67px !important; padding-left: 0 !important; padding-right: 12px !important; border-left: none !important; border-right: 2px solid var(--border) !important; }
html[dir="rtl"] div[style*="border:1px solid var(--border)"]:has(> img[style*="max-height:500px"]) { margin-left: 0 !important; margin-right: 48px !important; }
html[dir="rtl"] .trending-tag, html[dir="rtl"] .follow-handle, html[dir="rtl"] .follow-name { unicode-bidi: plaintext; text-align: right; }

/* RTL HEADER: keep handles and names aligned to the right edge in Arabic */
html[dir="rtl"] .post-handle, html[dir="rtl"] .person-handle, html[dir="rtl"] .post-name-row { text-align: right; justify-content: flex-start; }
html[dir="rtl"] .post-meta { text-align: right; }

/* RTL DROPDOWN: navbar dropdowns open toward the page, not off-screen (Arabic only) */
html[dir="rtl"] .dropdown { right: auto !important; left: 0 !important; text-align: right; }

/* MENTION LIGHT: @mention autocomplete dropdown follows the light theme */
:root[data-theme="light"] div:has(> .mc-item) { background: var(--surface) !important; border-color: var(--border) !important; box-shadow: 0 6px 24px rgba(0,0,0,0.15) !important; }
:root[data-theme="light"] .mc-item { color: var(--text) !important; }
:root[data-theme="light"] .mc-item.active, :root[data-theme="light"] .mc-item:hover { background: var(--surface2) !important; }
:root[data-theme="light"] .mc-item span:last-child { color: var(--muted) !important; }

/* NAV BADGE: red count badge on every page, including error pages */
html .nav-btn { position: relative; }
html .nav-badge-count { position: absolute; top: 4px; right: 0; min-width: 19px; height: 19px; background: #D94E4C; border-radius: 10px; border: 2px solid var(--bg); font-size: 0.65rem; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; padding: 0 4px; line-height: normal; font-family: system-ui, sans-serif; margin-top: 1px; }

/* RTL PAGES: Arabic-only flips for profile, settings and messages */
html[dir="rtl"] .settings-nav { border-right: none !important; border-left: 1px solid var(--border) !important; }
html[dir="rtl"] .profile-view .post-body, html[dir="rtl"] .post-body { padding-left: 0 !important; padding-right: 44px !important; }
html[dir="rtl"] [style*="padding-left:44px"] { padding-left: 0 !important; padding-right: 44px !important; }
html[dir="rtl"] [style*="margin-left:3px"] { margin-left: 0 !important; margin-right: 3px !important; }
html[dir="rtl"] .msg-reply-preview { border-left: none !important; border-right: 3px solid rgba(255,255,255,0.5) !important; }
html[dir="rtl"] .msg-row.mine .msg-reply-preview { border-right-color: rgba(255,255,255,0.7) !important; }
:root[data-theme="light"][dir="rtl"] .msg-row.theirs .msg-reply-preview { border-right-color: rgba(0,0,0,0.3) !important; }
html[dir="rtl"] .mc-item { text-align: right !important; }

/* PROFILE HANDLE: keep @ at the start of the handle in Arabic */
html[dir="rtl"] .profile-handle { unicode-bidi: plaintext; }

/* SCRIPT FONTS: apply the fallbacks, keeping Nunito Sans first for Latin text and skipping icon elements */
html[lang="ar"] body, html[lang="ar"] :not([class^="ph"]):not([class*=" ph"]) { font-family: 'Nunito Sans', 'Noto Sans Arabic', sans-serif; }
html[lang="am"] body, html[lang="am"] :not([class^="ph"]):not([class*=" ph"]) { font-family: 'Nunito Sans', 'Noto Sans Ethiopic', sans-serif; }

/* PROFILE LAYOUT: X-style left-aligned header, actions beside the avatar */
html .avatar-wrap { justify-content: flex-start; padding-inline-start: 20px; margin-top: -44px; }
html .profile-avatar { width: 88px; height: 88px; }
html .profile-info { position: relative; text-align: start; padding: 10px 20px 0; }
html .profile-name-row, html .profile-meta, html .profile-stats { justify-content: flex-start; }
html .profile-handle { margin-bottom: 8px; }
html .profile-bio { margin: 0 0 10px; max-width: none; }
html .profile-meta { gap: 6px 14px; margin-bottom: 10px; }
html .profile-stats { gap: 18px; margin-bottom: 12px; }
html .profile-actions { position: absolute !important; top: -40px; inset-inline-end: 20px; display: flex !important; align-items: center; gap: 8px; margin: 0 !important; }

/* PROFILE ACTIONS FIX: keep the buttons clickable and drop the stray divider */
html .profile-actions { z-index: 5; border: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; }
html .avatar-wrap { pointer-events: none; }
html .avatar-wrap .profile-avatar { pointer-events: auto; }