/* ============================================
   style.css
   ============================================ */

/* ---------- BASE ---------- */
* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: hidden;
    background: #18191a;
    color: #e4e6eb;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

body {
    padding-top: 64px !important;
}

@media (max-width: 991px) {
    body {
        padding-top: 116px !important;
    }
}

/* ---------- NAVBAR ---------- */
nav {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background: #252728;
    border-bottom: 1.5px solid #3a3c3d;
}

nav .main-nav {
    height: 64px;
    background-color: #252728;
    border-bottom: 1.5px solid #3a3c3d;
}

nav .left {
    min-width: 0;
}

nav .logo {
    flex-shrink: 0;
}

nav .logo img {
    display: block;
}

/* Search */
nav .left .search-bar {
    width: 240px;
    background-color: #3b3d3d;
    flex-shrink: 1;
}

nav .left .bi-search {
    color: #b0b3b8;
}

nav .left .search-bar input {
    width: 100%;
    min-width: 0;
    color: #b0b3b8;
    font-weight: 500;
    border: none;
    outline: none;
    background: transparent;
}

nav .left .search-bar input::placeholder {
    color: #b0b3b8;
}

/* Center */
nav .center {
    flex: 1;
    max-width: 600px;
    margin: 0 auto;
    gap: 4px;
    display: flex;
    justify-content: center;
}

nav .center .center-icon-hover {
    height: 52px;
    min-width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #b0b3b8;
    font-size: 23px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

nav .center .center-icon-hover:hover {
    background-color: #3b3d3d;
}

/* nav .center .active {
    color: #0866ff;
    border-bottom: 3px solid #0866ff;
    border-radius: 0;
} */

/* Right */
nav .right {
    flex-shrink: 0;
}

nav .right .outer-circle {
    width: 40px;
    height: 40px;
    background-color: #4e5051;
    color: white;
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

nav .right .outer-circle:hover {
    background-color: #606263;
}

nav .right .profile {
    background-color: #e5e7eb;
    color: #7d8084;
    font-size: 28px;
    overflow: hidden;
}

nav .right .profile i {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: 8px;
}

/* ---------- SIDEBAR ---------- */
.sidebar {
    width: 320px;
    height: calc(100vh - 64px);
    padding: 20px 16px;
    background: #18191a;
    border-right: 1px solid #333;
    overflow-y: auto;
    position: sticky;
    top: 64px;
    flex-shrink: 0;
}

.sidebar-item {
    height: 56px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 4px;
    border-radius: 8px;
    cursor: pointer;
}

.sidebar-item:hover {
    background: #303030;
}

.sidebar-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    flex-shrink: 0;
}

.sidebar-text {
    font-size: 16px;
    font-weight: 600;
    color: #e4e6eb;
    white-space: nowrap;
}

.profile-img,
.shortcut-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.see-more {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #303030;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.divider {
    border-top: 1px solid #555;
    margin: 10px 0 16px;
}

.shortcuts-title {
    color: #b0b3b8;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.footer {
    margin-top: 55px;
    font-size: 13px;
    color: #b0b3b8;
    line-height: 18px;
}

.footer span {
    cursor: pointer;
}

.footer span:hover {
    text-decoration: underline;
}

/* Facebook Style Scrollbar */
.sidebar {
    scrollbar-width: thin;
    scrollbar-color: #65676b transparent;
}

.sidebar::-webkit-scrollbar {
    width: 8px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background: #65676b;
    border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: #76787c;
}

/* ---------- LAYOUT ---------- */
.app-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-height: calc(100vh - 64px);
    position: relative;
}

.main-content {
    flex: 1;
    min-width: 0;
    padding: 16px 8px;
    background: #18191a;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 576px) {
    .main-content {
        padding: 20px 16px;
    }
}

/* ---------- RIGHT SIDEBAR (Contacts & Sponsored) ---------- */
.right-sidebar {
    width: 320px;
    height: calc(100vh - 64px);
    padding: 20px 16px;
    background: #18191a;
    border-left: 1px solid #333;
    overflow-y: auto;
    position: sticky;
    top: 64px;
    flex-shrink: 0;
}

.right-sidebar .sidebar-heading {
    font-size: 15px;
    font-weight: 600;
    color: #b0b3b8;
}

.sponsored-item,
.contact-item {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.sponsored-item:hover,
.contact-item:hover {
    background-color: #303030;
}

.online-badge {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    background-color: #31a24c;
    border: 2px solid #18191a;
    border-radius: 50%;
}

.right-sidebar {
    scrollbar-width: thin;
    scrollbar-color: #65676b transparent;
}

.right-sidebar::-webkit-scrollbar {
    width: 8px;
}

.right-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.right-sidebar::-webkit-scrollbar-thumb {
    background: #65676b;
    border-radius: 10px;
}

/* ---------- FEED & CARDS ---------- */
.feed-card {
    width: 100%;
    max-width: 590px;
    background-color: #252728 !important;
    border: 1px solid #3a3c3d !important;
}

.upload-tab {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    background-color: #3b3d3d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.15s ease;
}

.upload-tab:hover {
    background-color: #4e5051;
}

.post-media {
    width: 100%;
    max-height: 520px;
    min-height: 200px;
    object-fit: cover;
}

/* ---------- CREATE POST MODAL ---------- */
.underlay {
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(2px);
    padding: 12px;
    z-index: 1050;
    overflow-y: auto;
}

.create-post-modal {
    width: 100%;
    max-width: 520px;
    background-color: #252728 !important;
    border: 1px solid #3a3c3d;
    border-radius: 12px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

/* ---------- UNIVERSAL RESPONSIVE MODAL SYSTEM (Facebook Style) ---------- */
.custom-modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.8) !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.custom-modal-backdrop.d-none {
    display: none !important;
}

.custom-modal {
    background: #242526 !important;
    width: 100% !important;
    max-width: 580px !important;
    height: min(88vh, 640px) !important;
    max-height: 88vh !important;
    border-radius: 12px !important;
    border: 1px solid #3e4042 !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    margin: auto !important;
    overflow: hidden !important;
    color: #e4e6eb !important;
}

.modal-header-fb {
    padding: 14px 20px !important;
    border-bottom: 1px solid #393a3b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
    background: #242526 !important;
    z-index: 2 !important;
}

.modal-body-fb {
    padding: 20px !important;
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #555 #242526 !important;
}

.modal-body-fb::-webkit-scrollbar {
    width: 6px;
}
.modal-body-fb::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 4px;
}
.modal-body-fb::-webkit-scrollbar-track {
    background: #242526;
}

.modal-footer-fb {
    padding: 12px 20px !important;
    border-top: 1px solid #393a3b !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
    background: #242526 !important;
    z-index: 2 !important;
}

@media (max-width: 576px) {
    .custom-modal-backdrop {
        padding: 0 !important;
        align-items: flex-end !important;
    }

    .custom-modal {
        width: 100% !important;
        max-width: 100% !important;
        height: 92vh !important;
        max-height: 92vh !important;
        border-radius: 18px 18px 0 0 !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
        margin: 0 !important;
    }

    .modal-header-fb {
        padding: 14px 16px !important;
    }

    .modal-body-fb {
        padding: 16px !important;
    }

    .modal-footer-fb {
        padding: 12px 16px !important;
        gap: 10px !important;
    }

    .modal-footer-fb button,
    .modal-footer-fb .btn {
        flex: 1 !important;
        padding: 12px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
    }
}

.cros-icon {
    background-color: #4e5051;
    cursor: pointer;
    color: #e4e6eb;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}

.cros-icon:hover {
    background-color: #5f5f5f;
}

/* ---------- MOBILE SUBNAV (Facebook Mobile Tabs) ---------- */
.mobile-subnav {
    display: none;
    background-color: #252728;
    border-bottom: 1px solid #3a3c3d;
    height: 48px;
    width: 100%;
}

.mobile-subnav .subnav-item {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #b0b3b8;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

/* .mobile-subnav .subnav-item.active {
    color: #0866ff;
    border-bottom-color: #0866ff;
} */

/* ---------- RESPONSIVE BREAKPOINTS ---------- */

/* Tablet & Mobile: Drawer Sidebar */
@media (max-width: 991.98px) {
    .mobile-subnav {
        display: flex;
    }

    .sidebar {
        position: fixed !important;
        top: 0;
        left: -320px;
        width: 300px !important;
        max-width: 85vw;
        height: 100vh !important;
        z-index: 1070;
        background: #252728 !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.6);
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .sidebar.open {
        left: 0;
    }

    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.65);
        z-index: 1065;
        backdrop-filter: blur(2px);
    }

    .sidebar-backdrop.active {
        display: block;
    }

    .sidebar-close-btn {
        display: flex !important;
    }

    /* Universal Global Mobile Drawer */
    .global-mobile-drawer {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        left: -330px !important;
        width: 300px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        z-index: 99999 !important;
        background: #242526 !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.75) !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        padding: 20px 16px !important;
        overflow-y: auto !important;
    }

    .global-mobile-drawer.open {
        left: 0 !important;
    }

    .global-sidebar-backdrop {
        display: none;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.7) !important;
        z-index: 99998 !important;
        backdrop-filter: blur(2px) !important;
    }

    .global-sidebar-backdrop.active {
        display: block !important;
    }
}

@media (min-width: 992px) {
    .sidebar-close-btn {
        display: none !important;
    }

    .sidebar-backdrop {
        display: none !important;
    }

    .global-mobile-drawer,
    .global-sidebar-backdrop {
        display: none !important;
    }
}

/* Tablet Landscape & Small Laptop (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    nav .left {
        width: 260px !important;
        flex: 0 0 260px !important;
    }

    nav .center {
        flex: 1;
        max-width: 500px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }

    nav .center .center-icon-hover {
        min-width: 70px;
    }

    nav .right {
        width: 260px !important;
        flex: 0 0 260px !important;
        justify-content: flex-end !important;
    }

    .sidebar {
        width: 260px !important;
        flex: 0 0 260px !important;
    }

    .right-sidebar {
        width: 260px !important;
        flex: 0 0 260px !important;
        display: block !important;
    }

    .feed-card {
        max-width: 500px;
    }
}

/* Standard Desktop & Large Screens (1200px and up) */
@media (min-width: 1200px) {
    nav .left {
        width: 320px !important;
        flex: 0 0 320px !important;
    }

    nav .center {
        flex: 1;
        max-width: 600px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }

    nav .right {
        width: 320px !important;
        flex: 0 0 320px !important;
        justify-content: flex-end !important;
    }

    .sidebar {
        width: 320px !important;
        flex: 0 0 320px !important;
    }

    .right-sidebar {
        width: 320px !important;
        flex: 0 0 320px !important;
        display: block !important;
    }

    .feed-card {
        max-width: 590px;
    }
}

.friends-card {
    background-color: #252728;
}

/* Mobile navbar */
@media (max-width: 575.98px) {
    nav .main-nav {
        height: 56px;
    }

    nav .left .logo img {
        width: 36px;
        height: 36px;
    }

    nav .right .outer-circle {
        width: 35px;
        height: 35px;
        font-size: 17px;
    }

    nav .right {
        gap: 4px !important;
    }
}

/* Very small mobile (e.g. 320px - 380px) */
@media (max-width: 380px) {
    nav .right .outer-circle {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }

    nav .right {
        gap: 2px !important;
    }

    .feed-card {
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }
}

.post-bottm-bar .like-btn {
    background-color: transparent;
    color: white;
    border: 0;
}

.main-content {
    scrollbar-width: none;
}

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


/* ================================
   Friends Page
================================ */

.friends-page {
    min-height: calc(100vh - 70px);
    background: #18191a;
}


/* Page Header */

.friends-page h2 {
    font-size: 26px;
}

.friends-page p {
    font-size: 15px;
}


/* Friend Card */

.friends-page-card {
    background: #242526;
    border: 1px solid #3a3b3c;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
    transition: 0.2s ease;
}

.friends-page-card:hover {
    border-color: #4e4f50;
    transform: translateY(-2px);
}


/* Profile Image */

.friends-page-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #3a3b3c;
}

.friends-page-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* Card Content */

.friends-page-content {
    padding: 14px;
}

.friends-page-name {
    color: #e4e6eb;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 7px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Mutual Friends */

.friends-mutual {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #b0b3b8;
    font-size: 13px;
}

.friends-mutual i {
    font-size: 14px;
}


/* Button */

.friends-page-card .follow-btn {
    border-radius: 6px;
    font-weight: 600;
    padding: 8px 12px;
}


/* Mobile */

@media (max-width: 575.98px) {

    .friends-page {
        min-height: calc(100vh - 110px);
    }

    .friends-page h2 {
        font-size: 22px;
    }

    .friends-page-content {
        padding: 12px;
    }

}

/* Active Navbar Item */
.subnav-item {
    position: relative;
}

.subnav-item.active i {
    color: #0866ff;
}

.subnav-item.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 15%;
    right: 15%;
    height: 3px;
    background: #0866ff;
    border-radius: 3px 3px 0 0;
}
/* =========================================
   NOTIFICATION CENTER
========================================= */

.notification-wrapper {
    position: relative;
}


/* Notification badge */

.notification-badge {
    position: absolute;

    top: -2px;
    right: -2px;

    min-width: 18px;
    height: 18px;

    padding: 0 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e41e3f;
    color: #fff;

    border-radius: 50px;

    font-size: 10px;
    font-weight: 700;

    border: 2px solid #242526;
}


/* Notification center */

.notification-center {
    position: absolute;

    top: 52px;
    right: 0;

    width: 380px;

    max-height: 500px;

    background: #242526;

    border: 1px solid #3a3b3c;

    border-radius: 12px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);

    overflow: hidden;

    z-index: 2000;

    display: none;
}


/* Open */

.notification-center.show {
    display: block;
}


/* Header */

.notification-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 16px;

    border-bottom: 1px solid #3a3b3c;

    color: #fff;
}


/* Close button */

.notification-close {
    width: 34px;
    height: 34px;

    border: none;

    border-radius: 50%;

    background: #3a3b3c;

    color: #fff;

    display: flex;

    align-items: center;
    justify-content: center;

    cursor: pointer;
}

.notification-close:hover {
    background: #4a4b4c;
}


/* Notification list */

.notification-list {
    max-height: 430px;

    overflow-y: auto;
}


/* Notification */

.notification-item {
    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 14px;

    cursor: pointer;

    transition: background 0.2s ease;
}

.notification-item:hover {
    background: #3a3b3c;
}


/* Avatar */

.notification-avatar {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    border-radius: 50%;

    object-fit: cover;
}


/* Text */

.notification-content {
    min-width: 0;

    padding-right: 25px;
}

.notification-text {
    color: #e4e6eb;

    font-size: 14px;

    line-height: 1.4;
}

.notification-text strong {
    color: #fff;
}

.notification-content small {
    display: block;

    margin-top: 4px;

    color: #b0b3b8;

    font-size: 12px;
}


/* Individual X */

.notification-item-close {
    position: absolute;

    right: 10px;
    top: 50%;

    transform: translateY(-50%);

    width: 28px;
    height: 28px;

    border: none;

    border-radius: 50%;

    background: transparent;

    color: #b0b3b8;

    display: flex;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    opacity: 0;
}

.notification-item:hover .notification-item-close {
    opacity: 1;
}

.notification-item-close:hover {
    background: #4a4b4c;

    color: #fff;
}


/* Scrollbar */

.notification-list::-webkit-scrollbar {
    width: 6px;
}

.notification-list::-webkit-scrollbar-thumb {
    background: #4a4b4c;

    border-radius: 10px;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 576px) {

    .notification-center {
        position: fixed;

        top: 60px;
        left: 10px;
        right: 10px;

        width: auto;

        max-height: calc(100vh - 75px);

        border-radius: 12px;
    }

    .notification-list {
        max-height: calc(100vh - 140px);
    }

}

/* =========================================
   DYNAMIC COMMENTS
========================================= */
.comments-container {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #3e4042;
}

.comment-form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
    margin-bottom: 12px;
}

.comment-input-field {
    flex: 1;
    background: #3a3b3c;
    border: 1px solid #4e5051;
    border-radius: 20px;
    padding: 8px 16px;
    color: #e4e6eb;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}

.comment-input-field:focus {
    border-color: #0866ff;
    background: #333537;
}

.comment-btn-submit {
    background: #0866ff;
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.comment-btn-submit:hover {
    background: #0757d5;
}

.comment-item {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: flex-start;
}

.comment-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-top: 2px;
}

.comment-body-wrapper {
    max-width: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.comment-bubble-box {
    background: #3a3b3c;
    border-radius: 18px;
    padding: 8px 14px;
    max-width: 100%;
    display: inline-block;
    word-break: break-word;
}

.comment-bubble-user {
    font-weight: 700;
    font-size: 13px;
    color: #e4e6eb;
    text-decoration: none;
    display: block;
    line-height: 1.2;
}

.comment-bubble-user:hover {
    text-decoration: underline;
}

.comment-bubble-msg {
    margin: 3px 0 0 0;
    font-size: 13.5px;
    color: #e4e6eb;
    word-break: break-word;
    line-height: 1.35;
}

.comment-actions-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 10px;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: #b0b3b8;
}

.comment-meta-time {
    font-size: 11.5px;
    font-weight: normal;
    color: #b0b3b8;
}

.comment-action-link {
    cursor: pointer;
    transition: color 0.15s;
}

.comment-action-link:hover {
    text-decoration: underline;
    color: #e4e6eb;
}