/* Politics For All Social Network */
/* Using Politics For All Color Schema */

:root {
    --fb-primary: #1a365d;
    --fb-primary-hover: #2c5282;
    --fb-accent: #ed8936;
    --fb-bg: #f0f2f5;
    --fb-card: #ffffff;
    --fb-text: #050505;
    --fb-text-secondary: #65676b;
    --fb-text-light: #8a8d91;
    --fb-border: #dadde1;
    --fb-hover: #f2f2f2;
    --fb-success: #42b72a;
    --fb-danger: #fa3e3e;
    --fb-blue: #1a365d;
    /* Primary action buttons (Post, Post Reply, submit, etc.): a navy in the
       brand family but a step LIGHTER than the header/topic navy (--fb-primary
       #1a365d) so buttons read as "raised"/pressable against those darker bars.
       Hover/pressed steps darker, toward the header navy. Adjust these two
       values (mirrored in styles.css :root) to retune every primary button. */
    --fb-btn-primary: #2c5282;
    --fb-btn-primary-hover: #213f66;
}

* {
    box-sizing: border-box;
}

body.social-page {
    background: var(--fb-bg);
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    min-height: 100vh;
    padding-bottom: 60px;
}

/* Social Network Header */
.fb-header {
    background: var(--fb-card);
    height: 90px;
    position: relative;
    z-index: 100;
    display: flex;
    align-items: center;
    padding: 0 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.fb-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 400px;
    flex-shrink: 0;
}

.header-icon-btn {
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.header-icon-btn:hover {
    transform: scale(1.1);
    filter: brightness(1.1);
    z-index: 11;
}

.header-banner {
    width: 100%;
    overflow: hidden;
}

.header-banner picture {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.header-banner img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.fb-logo {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    background: var(--fb-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 24px;
    text-decoration: none;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
}

.fb-search {
    flex: 1;
    position: relative;
    max-width: 340px;
    min-width: 280px;
}

.search-hint {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    padding: 12px 16px;
    z-index: 1000;
}

.search-hint-title {
    font-size: 13px;
    font-weight: 600;
    color: #65676b;
    margin-bottom: 8px;
}

.search-hint-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.search-hint-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #f0f2f5;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.search-hint-option:hover {
    background: #e4e6e9;
}

.search-hint-option svg {
    position: static;
    transform: none;
    width: 18px;
    height: 18px;
    color: #1877f2;
}

.search-hint-option span {
    font-size: 14px;
    color: #050505;
}

.fb-search input {
    width: 100%;
    height: 40px;
    background: var(--fb-bg);
    border: none;
    border-radius: 50px;
    padding: 0 16px 0 40px;
    font-size: 15px;
    outline: none;
    transition: none;
}

.fb-search input:focus {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.fb-search svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--fb-text-secondary);
}

.fb-header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.fb-nav-btn {
    width: 110px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--fb-text-secondary);
    text-decoration: none;
    transition: background 0.2s;
    position: relative;
}

.fb-nav-btn:hover {
    background: var(--fb-hover);
}

.fb-nav-btn.active {
    color: var(--fb-primary);
}

.fb-nav-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--fb-primary);
    border-radius: 3px 3px 0 0;
}

.fb-nav-btn svg {
    width: 26px;
    height: 26px;
}

.fb-header-right {
    width: 280px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.fb-icon-btn {
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fb-text);
    text-decoration: none;
    transition: background 0.2s;
}

.fb-icon-btn:hover {
    transform: scale(1.05);
}

.fb-icon-btn svg {
    width: 20px;
    height: 20px;
}

.fb-profile-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: visible;
    cursor: pointer;
}

.fb-profile-btn .positioned-avatar {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50%;
    overflow: hidden;
}

/* Three Column Layout - Page scrolls naturally */
body.social-page {
    min-width: 1240px;
    overflow-x: auto;
}

/* Fixed Header */
.fb-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.fb-layout {
    display: flex;
    justify-content: center;
    min-width: 1240px;
    width: 100%;
    margin-top: 175px;
}

.fb-sidebar-left {
    flex: 0 0 340px;
    width: 340px;
    padding: 4px;
    height: fit-content;
}

/* Center feed - fixed in place, only scrolls on hover */
.fb-main {
    flex: 0 0 560px;
    width: 560px;
    padding: 4px 8px 24px 8px;
    position: fixed;
    top: 175px;
    left: 50%;
    transform: translateX(-50%);
    height: calc(100vh - 175px);
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 1000;
    background: #f0f2f5;
}

.fb-main::-webkit-scrollbar {
    display: none;
}

.fb-main:hover {
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Spacer to reserve space for fixed center feed */
.fb-main-spacer {
    flex: 0 0 560px;
    width: 560px;
    visibility: hidden;
}

.fb-sidebar-right {
    flex: 0 0 340px;
    width: 340px;
    padding: 4px;
    height: fit-content;
}

/* Home page specific - spacing between banner and content */
body.home-page .fb-layout {
    margin-top: 175px;
}

body.home-page .fb-main {
    top: 175px;
    height: calc(100vh - 175px);
}

body.home-page .fb-main,
body.home-page .fb-sidebar-left,
body.home-page .fb-sidebar-right {
    padding-top: 0;
}

/* Left Sidebar Menu */
.fb-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--fb-text);
    font-weight: 500;
    font-size: 15px;
    transition: background 0.2s;
}

.fb-menu-item:hover {
    background: var(--fb-hover);
}

.fb-menu-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fb-primary);
    color: white;
}

.fb-menu-icon img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.fb-menu-icon svg {
    width: 20px;
    height: 20px;
}

.fb-menu-divider {
    height: 1px;
    background: var(--fb-border);
    margin: 8px 0;
}

/* Stories Section */
.fb-stories {
    background: var(--fb-card);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.fb-stories-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.fb-stories-scroll::-webkit-scrollbar {
    display: none;
}

.fb-story-card {
    flex-shrink: 0;
    width: 112px;
    height: 200px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
    background-size: cover;
    background-position: center;
}

.fb-story-card:hover {
    transform: scale(1.02);
}

.fb-story-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}

.fb-story-avatar {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 4px solid var(--fb-primary);
}

.fb-story-avatar.positioned-avatar {
    overflow: hidden;
}

.fb-story-name {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    color: white;
    font-size: 13px;
    font-weight: 600;
}

.fb-story-create {
    background: var(--fb-card);
    display: flex;
    flex-direction: column;
}

.fb-story-create-img-wrap {
    height: 140px;
    overflow: hidden;
    position: relative;
}
.fb-story-create-img {
    /* Styles applied inline for positioning */
}

.fb-story-create-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-top: none;
}

.fb-story-plus {
    width: 40px;
    height: 40px;
    background: var(--fb-primary);
    border: 4px solid var(--fb-card);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-top: -20px;
}

.fb-story-plus svg {
    width: 20px;
    height: 20px;
}

.fb-story-create-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--fb-text);
}

/* Create Post Card */
.fb-create-post {
    background: var(--fb-card);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.fb-create-post-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--fb-border);
}

.fb-create-post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* object-fit removed - positioned-avatar uses inline styles */
}

.fb-create-post-input {
    flex: 1;
    height: 40px;
    background: var(--fb-bg);
    border: none;
    border-radius: 20px;
    padding: 0 12px;
    font-size: 17px;
    color: var(--fb-text-secondary);
    cursor: pointer;
    text-align: left;
}

.fb-create-post-input:hover {
    background: #e4e6e9;
}

.fb-create-post-actions {
    display: flex;
    padding-top: 8px;
}

.fb-create-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    border: none;
    background: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--fb-text-secondary);
}

.fb-create-action:hover {
    background: var(--fb-hover);
}

.fb-create-action svg {
    width: 24px;
    height: 24px;
}

.fb-create-action.video svg { color: #f3425f; }
.fb-create-action.photo svg { color: #45bd62; }
.fb-create-action.feeling svg { color: #f7b928; }

/* Post Card */
.fb-post {
    background: var(--fb-card);
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    overflow: visible;
    position: relative;
    z-index: 1;
}

.fb-post.menu-open {
    z-index: 100;
}

.post-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
    min-width: 280px;
    padding: 8px;
    z-index: 1000;
}

.post-menu-dropdown button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 6px;
    font-size: 14px;
    gap: 8px;
    color: #050505;
}

.post-menu-dropdown button:hover {
    background: #f0f2f5;
}

.fb-post-header {
    display: flex;
    align-items: flex-start;
    padding: 12px 16px;
}

.fb-post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
    object-fit: cover;
    object-position: center;
}

.fb-post-avatar.positioned-avatar {
    overflow: hidden;
    position: relative;
}

.fb-post-info {
    flex: 1;
    min-width: 0;
}

.fb-post-author {
    font-weight: 600;
    font-size: 18px;
    color: #000000;
    text-decoration: none;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Long-name handling for "sent a [interaction] to [user]" feed posts.
   These posts are stored as HTML in posts.content with inline styles, so
   the rules below use !important to override the stored inline font-sizes
   for both existing and newly created posts. */
.interaction-post {
    max-width: 100%;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: break-word;
}
.interaction-post > div:first-child {
    flex-wrap: wrap;
    max-width: 100%;
}
.interaction-post > div:first-child > a {
    max-width: 130px;
    min-width: 0;
}
.interaction-post > div:first-child > a > span {
    max-width: 130px;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 15px !important;
    line-height: 1.2;
}
.interaction-post > div:last-child {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 26px !important;
    line-height: 1.2;
}
.interaction-post > div:last-child > a {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

.fb-post-author:hover {
    text-decoration: underline;
}

.fb-post-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    color: #000000;
}

.fb-post-menu {
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fb-text-secondary);
}

.fb-post-menu:hover {
    background: var(--fb-hover);
}

.fb-post-content {
    padding: 4px 16px 12px;
    font-size: 24px;
    line-height: 1.4;
    color: #000 !important;
    font-weight: 500;
}

.poll-vote-post {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 18px;
    color: #1a1a1a;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    border-left: 4px solid #6366f1;
}

.poll-vote-post .vote-action {
    color: #6b7280;
    font-weight: 500;
}

.poll-vote-post .vote-option {
    color: #6366f1;
    font-weight: 700;
    background: rgba(99, 102, 241, 0.1);
    padding: 4px 10px;
    border-radius: 16px;
}

.poll-vote-post .vote-on {
    color: #6b7280;
    font-weight: 500;
}

.poll-vote-post .vote-poll-link {
    color: #3b82f6;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.poll-vote-post .vote-poll-link:hover {
    color: #2563eb;
    text-decoration: underline;
}

.fb-post-image {
    width: 100%;
    max-height: 700px;
    object-fit: contain;
    background: #f0f2f5;
}

.fb-post-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 18px;
    color: #000000;
    font-weight: 600;
}

.fb-post-reactions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fb-reaction-icons {
    display: flex;
    margin-right: 4px;
}

.fb-reaction-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: -6px;
    border: 2px solid white;
    cursor: pointer;
}

.fb-reaction-icon.like { background: #1877f2; }
.fb-reaction-icon.love { background: #f33e58; }
.fb-reaction-icon.haha { background: #f7b125; }

.fb-post-actions {
    display: flex;
    border-top: 1px solid var(--fb-border);
    padding: 4px;
    margin: 0 12px;
    position: relative;
    overflow: visible;
}

.fb-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px;
    border: none;
    background: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    position: relative;
}

.fb-action-btn:hover {
    background: var(--fb-hover);
}

.fb-action-btn.liked {
    color: var(--fb-primary);
}

/* Reaction type colors */
.fb-action-btn.reaction-like { color: #1877f2; }
.fb-action-btn.reaction-love { color: #f33e58; }
.fb-action-btn.reaction-haha { color: #f7b125; }
.fb-action-btn.reaction-wow { color: #f7b125; }
.fb-action-btn.reaction-sad { color: #f7b125; }
.fb-action-btn.reaction-angry { color: #e9710f; }

.reaction-emoji {
    font-size: 18px;
}

.fb-action-btn svg {
    width: 20px;
    height: 20px;
}

/* Reaction Picker */
.fb-reaction-picker {
    position: absolute;
    bottom: 100%;
    left: 0;
    background: white;
    border-radius: 28px;
    padding: 4px 8px;
    padding-bottom: 16px;
    margin-bottom: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    display: none;
    gap: 2px;
    z-index: 9999;
}

.fb-reaction-picker::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 0;
    right: 0;
    height: 20px;
    background: transparent;
}

.fb-action-btn:hover .fb-reaction-picker,
.fb-reaction-picker.show {
    display: flex;
}

.fb-reaction-picker.hiding {
    display: none !important;
}

.fb-reaction-btn {
    font-size: 32px;
    cursor: pointer;
    transition: transform 0.15s;
    padding: 4px;
    position: relative;
}

.fb-reaction-btn::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1a365d;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    margin-bottom: 6px;
    pointer-events: none;
}

.fb-reaction-btn:hover::after {
    opacity: 1;
    visibility: visible;
}

.fb-reaction-btn:hover {
    transform: scale(1.3) translateY(-4px);
}

/* Sponsored Ads Section */
.fb-sponsored {
    padding: 16px 8px;
}

.fb-sponsored-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--fb-text-secondary);
    padding: 0 8px 12px;
}

.fb-ad {
    display: flex;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 8px;
    text-decoration: none;
    color: inherit;
}

.fb-ad:hover {
    background: var(--fb-hover);
}

.fb-ad-image {
    width: 130px;
    height: 130px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--fb-bg);
    flex-shrink: 0;
}

.fb-ad-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fb-ad-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--fb-text);
    line-height: 1.3;
}

.fb-ad-url {
    font-size: 12px;
    color: var(--fb-text-secondary);
    text-transform: uppercase;
}

/* Right Sidebar */
.fb-sidebar-section {
    padding: 8px;
}

.fb-sidebar-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--fb-text-secondary);
    padding: 8px;
}

.fb-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.fb-contact-item:hover {
    background: var(--fb-hover);
}

.fb-contact-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    position: relative;
}

.fb-contact-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--fb-text);
}

.fb-online-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: #31a24c;
    border: 2px solid white;
    border-radius: 50%;
}

/* Live Room Card in Sidebar */
.fb-live-card {
    background: var(--fb-card);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}

.fb-live-card:hover {
    transform: scale(1.02);
}

.fb-live-thumb {
    height: 100px;
    background: linear-gradient(135deg, var(--fb-primary), #667eea);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fb-live-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #fa3e3e;
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
}

.fb-live-info {
    padding: 12px;
}

.fb-live-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--fb-text);
    margin-bottom: 4px;
}

.fb-live-host {
    font-size: 13px;
    color: var(--fb-text-secondary);
}

/* Modals - uses shared .modal-overlay styles from main styles.css */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-bottom: 1px solid var(--fb-border);
    position: relative;
}

.modal-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--fb-text);
}

.modal-body {
    padding: 16px;
}

.form-textarea {
    width: 100%;
    min-height: 150px;
    border: none;
    font-size: 24px;
    resize: none;
    outline: none;
}

.form-textarea::placeholder {
    color: var(--fb-text-secondary);
}

.btn-primary {
    width: 100%;
    background: var(--fb-btn-primary);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary:hover {
    background: var(--fb-btn-primary-hover);
}

.btn-primary:disabled {
    background: #e4e6e9;
    color: #bcc0c4;
    cursor: not-allowed;
}

/* Empty State */
.fb-empty {
    text-align: center;
    padding: 40px 20px;
}

.fb-empty svg {
    width: 80px;
    height: 80px;
    color: var(--fb-text-light);
    margin-bottom: 16px;
}

.fb-empty h3 {
    font-size: 20px;
    color: var(--fb-text);
    margin-bottom: 8px;
}

.fb-empty p {
    color: var(--fb-text-secondary);
    margin-bottom: 16px;
}

/* Animations */
.fade-in {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Utility Classes */
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }

/* Legacy compatibility */
.social-nav { display: none; }
.social-layout { display: none; }
.stories-container { display: none; }
.create-post-card { display: none; }
.post-card { display: none; }
.social-sidebar { display: none; }

/* Story viewer styles */
.story-viewer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1a1a2e;
    z-index: 2000;
    display: none;
}

.story-viewer.active {
    display: block;
}

/* Comment Reactions */
.comment-reactions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    margin-left: 0;
}

.comment-react-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #dddfe2;
    border-radius: 50%;
    background: #f7f8fa;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.comment-react-btn:hover {
    background: #e4e6e9;
    transform: scale(1.15);
}

.comment-react-btn.active {
    background: #5ba3d0;
    border-color: #5ba3d0;
}

.comment-react-btn .react-icon {
    font-size: 14px;
    line-height: 1;
}

/* Tooltip on hover */
.comment-react-btn::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1a365d;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    margin-bottom: 4px;
    pointer-events: none;
}

.comment-react-btn:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Comment Reaction Summary */
.comment-reaction-summary {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    background: rgba(26, 54, 93, 0.1);
    border-radius: 12px;
    cursor: pointer;
    margin-left: 8px;
    transition: background 0.2s;
}

.comment-reaction-summary:hover {
    background: rgba(26, 54, 93, 0.2);
}

/* Post Reaction Summary */
.post-reaction-summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    position: relative;
    padding: 4px 8px;
    border-radius: 12px;
    transition: background 0.2s;
}

.post-reaction-summary:hover {
    background: rgba(26, 54, 93, 0.1);
}

.reaction-icon-small {
    font-size: 14px;
    margin-right: 1px;
}

.reaction-total {
    font-size: 18px;
    color: #000000;
    font-weight: 600;
    margin-left: 6px;
}

/* Reactor Tooltip */
.reactor-tooltip {
    position: fixed;
    background: rgba(26, 54, 93, 0.95);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    z-index: 10000;
    max-width: 250px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    pointer-events: none;
}

.tooltip-reaction-group {
    margin-bottom: 8px;
}

.tooltip-reaction-group:last-child {
    margin-bottom: 0;
}

.tooltip-reaction-group strong {
    display: block;
    margin-bottom: 4px;
    color: #fff;
}

/* Reactors Modal - uses shared .reactors-modal-overlay from main styles.css */

.reactors-modal {
    background: white;
    border-radius: 12px;
    width: 95%;
    max-width: 700px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(26, 54, 93, 0.4);
    border-top: 4px solid #1a365d;
    display: flex;
    flex-direction: column;
}

.reactors-modal-header {
    background: #1a365d;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: none;
}

.reactors-tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.reactors-tab {
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    color: rgba(255, 255, 255, 0.8);
    background: transparent;
}

.reactors-tab:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.reactors-tab.active {
    background: white;
    color: #1a365d;
    border-bottom: none;
}

.reactors-close-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    border-radius: 50%;
    font-size: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: background 0.2s;
    line-height: 1;
}

.reactors-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.reactors-modal-body {
    flex: 1;
    max-height: calc(85vh - 80px);
    overflow-y: auto;
    padding: 16px;
    min-height: 200px;
}

.reactor-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    transition: background 0.2s;
    background: #f0f4f8;
    margin-bottom: 12px;
    border-left: 3px solid #5ba3d0;
}

.reactor-item:hover {
    background: #e8eef5;
}

.reactor-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.reactor-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #5ba3d0;
}

.reactor-reaction-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.reactor-info {
    flex: 1;
    min-width: 0;
}

.reactor-name {
    display: block;
    font-weight: 600;
    color: #1a365d;
    text-decoration: none;
    font-size: 18px;
}

.reactor-name:hover {
    text-decoration: underline;
    color: #5ba3d0;
}

.reactor-mutual {
    display: block;
    font-size: 15px;
    color: #65676b;
    margin-top: 4px;
}

.reactor-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    background: #1a365d;
    color: white;
    transition: background 0.2s;
}

.reactor-action-btn:hover {
    background: #2a4a7d;
}

.reactor-action-btn.add-friend {
    background: #5ba3d0;
    color: white;
}

.reactor-action-btn.add-friend:hover {
    background: #4a93c0;
}


/* Share Button Styles */
.share-toggle-btn {
    position: relative;
}

.share-dropdown {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    min-width: 180px;
    z-index: 100;
    padding: 8px 0;
    margin-bottom: 8px;
}

.share-toggle-btn:hover .share-dropdown,
.share-dropdown.active {
    display: block;
}

.share-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    color: #1c1e21;
    text-align: left;
    transition: background 0.2s;
}

.share-dropdown-item:hover {
    background: #f0f2f5;
}

.share-dropdown-divider {
    height: 1px;
    background: #e4e6e9;
    margin: 4px 0;
}

.share-buttons-inline {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.share-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid #dddfe2;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #1c1e21;
    transition: background 0.2s, border-color 0.2s;
}

.share-btn:hover {
    background: #f0f2f5;
    border-color: #ccc;
}

.share-btn.share-facebook:hover { color: #1877f2; }
.share-btn.share-twitter:hover { color: #000; }
.share-btn.share-pinterest:hover { color: #e60023; }
.share-btn.share-copy:hover { color: #1a365d; }

.share-buttons-compact .share-btn span {
    display: none;
}

.share-buttons-compact .share-btn {
    padding: 8px;
    border-radius: 50%;
}

/* Notifications Dropdown */
.notifications-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 360px;
    max-height: 480px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    z-index: 2000;
    overflow: hidden;
}

.notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #e4e6e9;
}

.notifications-header h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.notifications-header button {
    background: none;
    border: none;
    color: #1a365d;
    font-size: 14px;
    cursor: pointer;
}

.notifications-list {
    max-height: 360px;
    overflow-y: auto;
}

.notification-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid #f0f2f5;
}

.notification-item:hover {
    background: #f0f2f5;
}

.notification-item.unread {
    background: #e7f3ff;
}

.notification-item.unread:hover {
    background: #d4e9ff;
}

.notification-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e4e6e9;
    flex-shrink: 0;
    overflow: hidden;
}

.notification-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notification-content {
    flex: 1;
}

.notification-text {
    font-size: 14px;
    line-height: 1.4;
    color: #1c1e21;
}

.notification-time {
    font-size: 12px;
    color: #65676b;
    margin-top: 4px;
}

.notifications-loading, .notifications-empty {
    padding: 40px 20px;
    text-align: center;
    color: #65676b;
}

.notices-messages-list .message-preview-item {
    display: flex;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    color: inherit;
}

.notices-messages-list .message-preview-item:hover {
    background: #f0f2f5;
}

.notices-messages-list .message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e4e6e9;
    flex-shrink: 0;
    overflow: hidden;
}

.notices-messages-list .message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notices-messages-list .message-info {
    flex: 1;
    min-width: 0;
}

.notices-messages-list .message-sender {
    font-size: 14px;
    font-weight: 600;
    color: #1c1e21;
}

.notices-messages-list .message-text {
    font-size: 13px;
    color: #65676b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Menu Dropdown Styling */
.menu-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    text-decoration: none;
    color: #1c1e21;
    border-radius: 8px;
    transition: background 0.2s;
}

.menu-dropdown-item:hover {
    background: #f0f2f5;
}

.menu-dropdown-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.menu-dropdown-text {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.menu-dropdown-title {
    font-size: 15px;
    font-weight: 600;
    color: #1c1e21;
    text-align: left;
}

.menu-dropdown-desc {
    font-size: 13px;
    color: #65676b;
    margin-top: 2px;
    text-align: left;
}

.menu-item-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.menu-item-disabled:hover {
    background: transparent;
}

.coming-soon-badge {
    font-size: 11px;
    font-weight: 400;
    color: #6b7280;
    font-style: italic;
}

/* ===== Search Results Dropdown ===== */
.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.search-result-item:hover {
    background: #f0f2f5;
}

.search-result-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.search-result-info {
    flex: 1;
}

.search-result-name {
    font-weight: 600;
    color: #1c1e21;
}

.search-result-status {
    font-size: 12px;
    color: #65676b;
}

.search-result-btn {
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.search-result-btn.add-friend {
    background: #1a365d;
    color: white;
}

.search-result-btn.add-friend:hover {
    background: #2d4a7c;
}

.search-result-btn.pending {
    background: #e4e6e9;
    color: #65676b;
    cursor: default;
}

.search-result-btn.friends {
    background: #48bb78;
    color: white;
    cursor: default;
}

.search-no-results {
    padding: 20px;
    text-align: center;
    color: #65676b;
}

/* ============================================
   HORIZONTAL FEED CAROUSELS
   Social-style scrollable rows in feed
   ============================================ */

.feed-carousel {
    background: var(--fb-card);
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    z-index: 0;
    isolation: isolate;
}

.feed-carousel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--fb-border);
}

.feed-carousel-title {
    font-size: 17px;
    font-weight: inherit;
    color: var(--fb-text);
    margin: 0;
}

.feed-carousel-see-all {
    color: var(--fb-primary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}

.feed-carousel-see-all:hover {
    text-decoration: underline;
}

.feed-carousel-container {
    position: relative;
    padding: 12px 0;
}

.feed-carousel-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 4px 16px 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.feed-carousel-scroll::-webkit-scrollbar {
    display: none;
}

.feed-carousel-scroll::after {
    content: '';
    flex: 0 0 12px;
}

.feed-carousel-scroll .carousel-item:last-child {
    margin-right: 0;
}

.feed-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--fb-card);
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.2s, transform 0.2s;
}

.feed-carousel-nav:hover {
    background: var(--fb-hover);
    transform: translateY(-50%) scale(1.05);
}

.feed-carousel-nav.prev {
    left: 8px;
}

.feed-carousel-nav.next {
    right: 8px;
}

.feed-carousel-nav svg {
    width: 20px;
    height: 20px;
    fill: var(--fb-text);
}

/* Carousel Item - Base Card */
.carousel-item {
    flex: 0 0 auto;
    width: 320px;
    background: var(--fb-card);
    border-radius: 8px;
    border: 1px solid var(--fb-border);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.carousel-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Product Carousel Item */
.carousel-item.product-item {
    width: 220px;
}

.carousel-item-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: #f0f2f5;
}

.carousel-item-info {
    padding: 10px;
}

.carousel-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--fb-text);
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.carousel-item-subtitle {
    font-size: 13px;
    color: var(--fb-text-secondary);
    margin: 0;
}

.carousel-item-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--fb-primary);
    margin-top: 4px;
}

/* Friend/Person Carousel Item */
.carousel-item.friend-item {
    width: 140px;
    text-align: center;
    padding-bottom: 12px;
}

.carousel-item.friend-item .carousel-item-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 12px auto 8px;
    border: 3px solid var(--fb-primary);
}

.carousel-item.friend-item .avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    font-weight: 700;
    text-decoration: none;
}

.carousel-item.friend-item .carousel-item-title {
    padding: 0 8px;
}

.carousel-item-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.carousel-item-link:hover .carousel-item-title {
    color: var(--fb-primary);
}

.carousel-item-action {
    display: block;
    width: calc(100% - 16px);
    margin: 8px auto 0;
    padding: 8px;
    border: none;
    border-radius: 6px;
    background: var(--fb-primary);
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.carousel-item-action:hover {
    background: var(--fb-primary-hover);
}

.carousel-item-action.secondary {
    background: #e4e6eb;
    color: var(--fb-text);
}

.carousel-item-action.secondary:hover {
    background: #d8dadf;
}

/* News Carousel Item */
.carousel-item.news-item {
    width: 240px;
}

.carousel-item.news-item .carousel-item-image {
    height: 120px;
    background: linear-gradient(135deg, #1877f2, #1a365d);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 40px;
}

.carousel-item.news-item .carousel-item-info {
    padding: 12px;
}

.carousel-item.news-item .carousel-item-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
}

.carousel-item-date {
    font-size: 12px;
    color: var(--fb-text-light);
    margin-top: 6px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .carousel-item {
        width: 140px;
    }
    
    .carousel-item.product-item {
        width: 160px;
    }
    
    .carousel-item.news-item {
        width: 200px;
    }
    
    .carousel-item-image {
        height: 120px;
    }
    
    .feed-carousel-nav {
        display: none;
    }
}

/* Video Processing Spinner */
.processing-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

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

.processing-video {
    background: linear-gradient(135deg, #1877f2, #0d5bbf);
    min-width: 160px;
}

/* Dark themed pages (polls, contests, contest, bands, etc.) */
body.polls-page,
body.contests-page,
body.contest-page,
body.bands-page {
    background: #0a0a1a;
    min-height: 100vh;
    margin: 0;
    overflow-y: auto;
}

/* Chat page uses custom layout */
body.chat-page {
    background: #1a1a2e;
    min-height: 100vh;
    margin: 0;
}

/* Story page is fullscreen */
body.story-page {
    background: #000;
    min-height: 100vh;
    margin: 0;
}

.confession-link { color: #4299e1; text-decoration: none; font-weight: 500; } .confession-link:hover { text-decoration: underline; }

/* =============================================
   MOBILE RESPONSIVE OVERRIDES
   Added for mobile-friendly layout. Desktop unchanged.
   Targets <=1024px (tablet) and <=768px (phone).
   ============================================= */

/* Tablet: shrink rigid widths so the 3-col layout still fits */
@media (max-width: 1024px) {
    body.social-page {
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .fb-layout {
        min-width: 0 !important;
        width: 100% !important;
        padding: 0 8px;
        box-sizing: border-box;
    }

    .fb-sidebar-left,
    .fb-sidebar-right {
        flex: 0 0 240px;
        width: 240px;
    }

    .fb-main {
        position: static !important;
        transform: none !important;
        left: auto !important;
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: 560px;
        margin: 0 auto;
        height: auto !important;
        overflow-y: visible !important;
    }

    .fb-main-spacer {
        display: none !important;
    }

    .fb-header-left {
        min-width: 0 !important;
    }
}

/* Phone: stack everything single column, hide oversized elements */
@media (max-width: 768px) {
    html, body, body.social-page {
        overflow-x: hidden !important;
        max-width: 100vw;
    }

    /* Header becomes a horizontal scroll strip */
    .fb-header {
        height: auto !important;
        min-height: 64px;
        padding: 6px 8px !important;
        flex-wrap: wrap;
        gap: 6px;
        /* Raise the header above the banner (z-index 99998) so the profile
           avatar + caret can be dropped down to lay OVER the banner. */
        z-index: 99999 !important;
    }

    .fb-header-left {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: 100%;
        gap: 6px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .fb-header-left::-webkit-scrollbar { display: none; }

    /* === Unified small circular icons across the WHOLE header === */
    /* Outer button wrappers: just stack icon + label */
    .fb-header .header-icon-btn,
    .fb-header .fb-icon-btn,
    .fb-header .fb-profile-dropdown > a,
    .fb-header .fb-profile-dropdown > div {
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0;
    }

    /* The visible circle (inner div containing the icon image/svg) */
    .fb-header .header-icon-btn > div,
    .fb-header .fb-icon-btn > div,
    .fb-header .fb-profile-dropdown > a > div,
    .fb-header .fb-profile-dropdown .fb-profile-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 50% !important;
        border-width: 2px !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin-top: 0 !important;
        /* background intentionally NOT forced — inline styles preserve
           white for most icons and the purple gradient for the Login circle */
    }

    /* Images inside the circles: fit snugly with object-fit contain */
    .fb-header .header-icon-btn img,
    .fb-header .fb-icon-btn img,
    .fb-header .fb-profile-dropdown > a img {
        width: 28px !important;
        height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        object-fit: contain !important;
        border-radius: 0 !important;
    }
    .fb-header picture {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: auto !important;
    }

    /* SVGs inside the circles (used in the logged-out Login button) */
    .fb-header .fb-profile-dropdown > a svg {
        width: 22px !important;
        height: 22px !important;
    }

    /* Profile avatar (logged-in circle): make the avatar fill the circle */
    .fb-header .fb-profile-dropdown .fb-profile-btn .positioned-avatar,
    .fb-header .fb-profile-dropdown .fb-profile-btn img {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        border-radius: 50% !important;
    }
    /* Profile avatar (logged-in) — make it noticeably larger than the
       other 40px icons so it stands out as the user's account button.
       Overrides the 40px rule above for just this one circle. */
    .fb-header .fb-profile-dropdown .fb-profile-btn {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
        overflow: visible !important;
    }
    /* Chevron indicator — larger, with white background, shadow, and
       darker stroke so it reads clearly as a "tap to open menu" hint. */
    .fb-header .fb-profile-dropdown .fb-profile-btn > div,
    .fb-header .fb-profile-dropdown .fb-profile-btn > button {
        bottom: -2px !important;
        right: -2px !important;
        width: 22px !important;
        height: 22px !important;
        border-radius: 50% !important;
        background: #ffffff !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
        border: 1.5px solid #1a365d !important;
        z-index: 2;
    }
    .fb-header .fb-profile-dropdown .fb-profile-btn > div svg,
    .fb-header .fb-profile-dropdown .fb-profile-btn > button svg {
        width: 14px !important;
        height: 14px !important;
        stroke-width: 4 !important;
        color: #1a365d !important;
    }

    /* Labels under the icons */
    .fb-header .header-icon-btn span,
    .fb-header .fb-icon-btn span,
    .fb-header .fb-profile-dropdown > a span {
        font-size: 9px !important;
        margin-top: 2px !important;
        line-height: 1.1 !important;
    }

    /* Notification / cart badges: shrink to fit smaller circles */
    .fb-header .fb-icon-btn > span:not(:first-child),
    .fb-header #headerCartBadge,
    .fb-header #notifBadge {
        top: -2px !important;
        right: -2px !important;
        font-size: 9px !important;
        min-width: 14px !important;
        height: 14px !important;
        border-radius: 7px !important;
        padding: 0 3px !important;
    }

    /* Center section (House Home + Invest with Jack): use display:contents
       so its children become direct flex items of .fb-header-left's
       neighboring scroll strip. We pull them up onto the top (left) row
       via flex order so they appear inline with the existing icons
       instead of forming a new row that would push everything else off
       the fixed-height header. */
    .fb-header-center {
        display: contents !important;
    }
    /* Center "Home" (house icon) — match the unified 40px circle theme so
       it blends with the rest of the top-row icons. */
    .fb-header-center .header-icon-btn {
        flex-shrink: 0;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .fb-header-center .header-icon-btn > div {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 50% !important;
        border-width: 2px !important;
        background: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        padding: 0 !important;
    }
    .fb-header-center .header-icon-btn img {
        width: 28px !important;
        height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        object-fit: contain !important;
    }
    .fb-header-center .header-icon-btn span {
        font-size: 9px !important;
        margin-top: 2px !important;
        line-height: 1.1 !important;
        color: #1877f2 !important;
        font-weight: 600 !important;
    }
    /* Invest with Jack button — hidden on phones to keep the header
       compact. It remains visible on full/desktop screens. */
    .fb-header-center .fb-nav-btn {
        display: none !important;
    }
    .fb-header-right {
        width: 100% !important;
        margin-left: 0 !important;
        gap: 6px !important;
        justify-content: flex-start !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .fb-header-right::-webkit-scrollbar { display: none; }

    /* Header: FIXED at top of viewport — always visible while scrolling.
       Force a known height of 120px (room for 2 stacked rows of icons +
       labels + small padding) so we can position the banner right under it.
       Very high z-index so post cards / sticky feed elements can't draw over it. */
    .fb-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 120px !important;
        min-height: 120px !important;
        max-height: 120px !important;
        z-index: 99999 !important;
        align-content: flex-start !important;
        overflow: hidden !important;
        background: #ffffff !important;
    }

    /* Banner: also FIXED, sitting directly below the two-row mobile header.
       This top value is only a pre-JS fallback — applyOffset() anchors the
       banner to the header's real rendered bottom so there is no overlap
       and no blank gap regardless of how the icon rows wrap. */
    .header-banner {
        position: fixed !important;
        top: 130px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 48px !important;
        /* Reserve room on each side for the eagle (40px wide + 8px gap) */
        padding: 0 56px !important;
        /* Two eagle icons (left + right) over a black background */
        background:
            url('/images/eagle-icon.webp') 8px center / auto 36px no-repeat,
            url('/images/eagle-icon.webp') calc(100% - 8px) center / auto 36px no-repeat,
            #0a0a12 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        z-index: 99998 !important;
    }

    /* Profile avatar floats OVER the banner. It must be position:fixed so it
       escapes the header's overflow clipping — both .fb-header (overflow:hidden)
       and the .fb-header-right scroll strip (overflow-x:auto, which also clips
       the y axis) would otherwise cut off the part that dips onto the banner.
       Because it's a DOM child of .fb-header (z-index 99999) it still paints
       above the banner (z-index 99998). applyOffset() sets the exact top; these
       are pre-JS fallbacks. */
    .fb-profile-dropdown {
        position: fixed !important;
        top: 64px !important;
        right: 8px !important;
    }
    /* Reserve room at the right of the scroll strip so the Cart icon can't
       slide underneath the now-floating fixed avatar. */
    .fb-header-right {
        padding-right: 64px !important;
    }

    /* Make sure NO descendants of the page layout can stack above the
       fixed header/banner. Caps any rogue z-index inside feed/sidebar. */
    .fb-layout,
    .fb-layout * {
        z-index: auto;
    }
    .fb-layout {
        position: relative;
        z-index: 1 !important;
    }

    /* The 939x63 banner image scales to ~25px tall on a phone -> unreadable.
       Hide it and show readable text in its place via the wrapper. */
    .header-banner picture,
    .header-banner img {
        display: none !important;
    }
    .header-banner::before {
        content: 'Politics for All';
        color: #ffffff;
        font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
        font-size: 20px;
        font-weight: 700;
        font-style: italic;
        letter-spacing: 0.5px;
        text-shadow: 0 1px 2px rgba(0,0,0,0.4);
        white-space: nowrap;
        line-height: 1;
    }

    /* Layout: single column. Reserve space for the fixed header (120px) +
       fixed banner (48px) + small breathing gap. */
    .fb-layout,
    body.home-page .fb-layout {
        flex-direction: column !important;
        margin-top: 176px !important;
        padding: 0 4px !important;
        gap: 8px;
    }

    .fb-sidebar-left,
    .fb-sidebar-right {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100%;
        padding: 4px !important;
    }

    .fb-main,
    body.home-page .fb-main {
        position: static !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        height: auto !important;
        overflow-y: visible !important;
        padding: 4px !important;
        background: transparent !important;
    }

    .fb-main-spacer { display: none !important; }

    /* Sidebar sections: tighten so they read well on phone */
    .fb-sidebar-section {
        margin-bottom: 8px;
    }

    /* Carousel items already have mobile rules; just make rows scroll */
    .feed-carousel-container,
    .feed-carousel-track {
        max-width: 100%;
    }

    /* Posts: edge-to-edge feel */
    .fb-post,
    .fb-create-post {
        border-radius: 8px;
        margin-left: 0;
        margin-right: 0;
    }

    /* Big media inside posts */
    .fb-post img,
    .fb-post video {
        max-width: 100%;
        height: auto;
    }

    /* Modals should fit screen */
    .fb-modal,
    .modal-content,
    .modal-overlay > * {
        max-width: 96vw !important;
    }

    /* Touch-friendly tap targets */
    .fb-menu-item,
    .fb-nav-btn,
    .fb-icon-btn {
        min-height: 40px;
    }

    /* Profile/cover banners shouldn't lock height */
    .profile-cover,
    .cover-photo {
        height: auto !important;
        min-height: 140px;
    }
}

/* Very small phones */
@media (max-width: 380px) {
    .fb-header .header-icon-btn > div,
    .fb-header .fb-icon-btn > div,
    .fb-header .fb-profile-dropdown > a > div {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
    .fb-header .header-icon-btn img,
    .fb-header .fb-icon-btn img,
    .fb-header .fb-profile-dropdown > a img {
        width: 24px !important;
        height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
    }
    .fb-header .header-icon-btn span,
    .fb-header .fb-icon-btn span,
    .fb-header .fb-profile-dropdown > a span {
        font-size: 8px !important;
    }
}

/* Profile / cover banner mobile adjustments (override inline 350px height) */
@media (max-width: 768px) {
    .profile-banner { height: 200px !important; }
    .profile-banner-img { object-position: center !important; }
    .banner-edit-btn { bottom: 70px !important; right: 8px !important; padding: 6px 10px !important; font-size: 12px !important; }
    .profile-info-row,
    .profile-actions-row { flex-wrap: wrap !important; gap: 8px !important; }
}

@media (max-width: 480px) {
    .profile-banner { height: 160px !important; }
}

/* =============================================
   CHAT WIDGET — Critical inline styles
   The chat-widget.css file is loaded LAZILY by chat-widget.php's
   loadChatWidget() JS function the first time the user clicks the
   chat icon. The CSS is injected as a <link>, but the dropdown
   opens on script.onload which fires before the CSS finishes
   parsing, leaving the dropdown unstyled (white background, black
   text, browser default fonts). On mobile this is far more obvious.

   Inlining the critical theme styles here guarantees the dropdown
   looks right from the very first click. The lazy chat-widget.css
   still loads and provides the rest (panels, message input, etc).
   ============================================= */
#chat-friend-dropdown {
    position: fixed;
    top: 60px;
    right: 180px;
    width: 320px;
    max-height: 400px;
    background: #0a0a0f;
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 4px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    z-index: 10000;
    font-family: 'Courier New', Consolas, monospace;
    color: #00ffff;
}
#chat-friend-dropdown.hidden { display: none; }

#chat-friend-dropdown .chat-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 255, 255, 0.2);
    font-weight: 500;
    font-size: 12px;
    color: #00ffff;
    text-transform: uppercase;
    letter-spacing: 2px;
}
#chat-friend-dropdown .chat-dropdown-header::before {
    content: '> ';
    color: #00ff88;
}
#chat-friend-dropdown .chat-dropdown-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
#chat-friend-dropdown .chat-dropdown-settings,
#chat-friend-dropdown .chat-dropdown-close {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(0, 255, 255, 0.2);
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00ffff;
    font-size: 16px;
    transition: all 0.2s;
}
#chat-friend-dropdown .chat-dropdown-search {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
}
#chat-friend-dropdown .chat-dropdown-search input {
    width: 100%;
    border: 1px solid rgba(0, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 12px;
    font-family: inherit;
    color: #fff;
    outline: none;
    box-sizing: border-box;
}
#chat-friend-dropdown .chat-dropdown-search input::placeholder {
    color: rgba(0, 255, 255, 0.4);
}
#chat-friend-dropdown .chat-dropdown-list {
    flex: 1;
    overflow-y: auto;
    max-height: 300px;
}
#chat-friend-dropdown .chat-loading,
#chat-friend-dropdown .chat-no-friends {
    padding: 20px;
    text-align: center;
    color: rgba(0, 255, 255, 0.5);
    font-size: 12px;
}

/* Mobile: take full screen so the small phone fits everything */
@media (max-width: 768px) {
    #chat-friend-dropdown {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
    #chat-friend-dropdown .chat-dropdown-list {
        max-height: none !important;
    }
}

/* =============================================
   MOBILE-ONLY: lift modals above the fixed header
   The mobile fixed header sits at z-index 99999, which can cover
   modal close-buttons / top edges. On mobile only, raise the
   shared modal overlay above the header so it can be closed.
   Desktop is unchanged (modals there keep their original 2000/4000).
   ============================================= */
@media (max-width: 768px) {
    .modal-overlay { z-index: 100000 !important; }
    .modal-overlay.content-modal { z-index: 100001 !important; }
}

/* =============================================
   MOBILE-ONLY: tighten feed cards (less white space)
   The product card image is fixed at 600px tall with object-fit:contain,
   which creates large empty bars above/below the image on phones whenever
   the image's aspect ratio doesn't fill 600px at ~400px wide. Same for
   regular .fb-post-image (max-height 700px). On mobile only, let images
   size naturally so cards hug their content. Also tighten the headline /
   content / details padding so there's less dead space top-and-bottom.
   Desktop is unchanged.
   ============================================= */
@media (max-width: 768px) {
    /* Product cards (marketplace posts) */
    .product-card-image > img:first-child {
        height: auto !important;
        max-height: 60vh;
        display: block;
    }
    .product-post .product-card-content {
        margin: 8px 12px !important;
    }
    .product-card-headline {
        margin: 8px 12px 0 12px !important;
        font-size: 17px !important;
        line-height: 1.3 !important;
    }
    .product-card-details {
        padding: 8px 12px !important;
    }

    /* Regular feed post images */
    .fb-post-image {
        max-height: 60vh !important;
        height: auto;
    }

    /* Tighter post chrome on phones */
    .fb-post {
        margin-bottom: 10px !important;
    }
    .fb-post-header {
        padding: 8px 12px !important;
    }
    .fb-post-content {
        padding: 2px 12px 8px !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
    }
    .fb-post-stats {
        padding: 6px 12px !important;
        font-size: 14px !important;
    }
    .fb-post-actions {
        padding: 2px !important;
        margin: 0 8px !important;
    }
    .fb-action-btn {
        padding: 6px 4px !important;
        font-size: 14px !important;
    }
}

/* =============================================
   MOBILE-ONLY: keep the Comments "Post" button on-screen
   The comments modal's input row is a flex container with the input
   field set to flex:1. Inputs default to min-width:auto (~20ch), so on
   narrow viewports the input refuses to shrink and pushes the Post
   button past the modal's right edge (the modal uses overflow:hidden
   so the button gets clipped). Allow the input to shrink and prevent
   the submit button from shrinking. Desktop is unchanged.
   ============================================= */
@media (max-width: 768px) {
    #commentsModal .comment-input-area {
        padding: 10px 12px !important;
        gap: 8px !important;
    }
    #commentsModal .comment-input-area img {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0;
    }
    #commentsModal #commentInput,
    #commentsModal .reply-input {
        min-width: 0 !important;
        width: auto !important;
        padding: 10px 14px !important;
        font-size: 15px !important;
    }
    #commentsModal .comment-submit-btn {
        flex-shrink: 0 !important;
        padding: 10px 14px !important;
        font-size: 15px !important;
    }
    /* The modal-content itself can use a touch more of the viewport */
    #commentsModal .modal-content {
        width: 96% !important;
    }
}

/* =============================================
 * Mobile profile dropdown -> bottom sheet
 * The header-attached absolute dropdown gets clipped/hidden on small
 * screens; on mobile we promote it to a slide-up bottom sheet that
 * always sits above the header/banner and is easy to thumb-tap.
 * Desktop (>768px) is unchanged.
 * ============================================= */
@media (max-width: 768px) {
    body.profile-sheet-open {
        overflow: hidden !important;
    }
    body.profile-sheet-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 100015;
        animation: profileSheetFade 0.18s ease-out;
    }
    /* The inline style on the menu sets position:absolute/top:100%/right:0 —
       override with !important to lift it into a fixed bottom sheet. */
    #profileDropdownMenu {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25) !important;
        z-index: 100020 !important;
        padding: 8px 0 calc(env(safe-area-inset-bottom, 0px) + 12px) 0 !important;
        animation: profileSheetSlide 0.22s ease-out;
    }
    /* Drag-handle pill at the top */
    #profileDropdownMenu::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: #cbd5e1;
        border-radius: 999px;
        margin: 6px auto 10px auto;
    }
    #profileDropdownMenu .profile-dropdown-item {
        padding: 16px 20px !important;
        font-size: 16px !important;
    }
    #profileDropdownMenu .profile-dropdown-item svg {
        width: 24px !important;
        height: 24px !important;
    }
}
@keyframes profileSheetSlide {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@keyframes profileSheetFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Screen-reader only utility for accessibility (semantic H1, skip links, etc) */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* =============================================
   Post avatar lock — prevents distortion in JS-rendered cards
   The home.php JS renders posts with <a class="fb-post-avatar-link">
   <img class="fb-post-avatar"> (no inline width/height). Without
   these rules the link wrapper can collapse in flex layouts and
   the image stretches into an oval on narrow viewports.
   ============================================= */
.fb-post-avatar-link {
    display: inline-block;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    line-height: 0;
}
.fb-post-avatar-link .fb-post-avatar {
    display: block;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 1 / 1;
}
@media (max-width: 768px) {
    .fb-post-avatar,
    .fb-post-avatar-link {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        flex-shrink: 0 !important;
        aspect-ratio: 1 / 1 !important;
    }
    .fb-post-avatar {
        border-radius: 50% !important;
        object-fit: cover !important;
        object-position: center !important;
    }
}