/* General Styling */
@font-face {
    font-weight: bold;
    font-style: normal;
}
body {
    background-color: #000;
    color: #fff;
    font-family: 'League Spartan Bold', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #000; /* Black background for the entire page */
    color: #fff; /* White text color for contrast */
    min-height: 100vh; /* Ensure the body takes at least full viewport height */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    overflow-x: hidden; /* Prevent horizontal overflow */
    max-width: 100vw;
    scrollbar-width: thin; /* Width of the scrollbar (Firefox) */
    scrollbar-color: purple #000; /* Thumb and track color */
}

    /* Scrollbar styles for WebKit browsers */
    body::-webkit-scrollbar {
        width: 12px; /* Width of the scrollbar */
    }

    body::-webkit-scrollbar-track {
        background: #000; /* Track color (black) */
    }

    body::-webkit-scrollbar-thumb {
        background-color: purple; /* Scrollbar color */
        border-radius: 10px; /* Rounded corners for the scrollbar */
        border: 3px solid #000; /* Space between the scrollbar and the track */
    }

.top-strip {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: #000; /* Black background for the sticky top strip */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    padding: 10px; /* Increase padding to make the top strip taller */
    border-bottom: 3px solid #4b0082; /* Purple sliver */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space between title and buttons */
}
    .top-strip h1 {
        margin: 0; /* Remove default margin */
        text-align: left; /* Align title to the left */
        font-size: 60px;
    }

        .top-strip h1 a {
            text-decoration: none; /* Remove underline from link */
            color: #4b0082; /* Purple text color for the site name */
        }

            .top-strip h1 a:hover {
                color: purple; /* Slightly lighter purple on hover */
            }

.nav-buttons {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-left: auto;
    padding-right: 10px;
}

.nav-button {
    background-color: #4b0082;
    color: white;
    padding: 15px 50px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
    white-space: nowrap;
    box-sizing: border-box;
    border: 5px solid #4b0082;
}

    .nav-button:hover {
        background-color: black;
        color: #4b0082;
        border: 5px solid #4b0082;
    }

/* Forum Container */
#forum {
    width: 90%;
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background: black;
    border: 2px solid #4b0082;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* User Section */
#user-section {
    text-align: center;
    margin-bottom: 20px;
    padding: 15px;
    background: black;
    border-radius: 8px;
    border: 1px solid #4b0082;
}

#welcome {
    font-size: 1.2em;
    margin-bottom: 10px;
}

#usernameDisplay {
    color: #4b0082;
    font-weight: bold;
    font-size: 30px;
}

#usernameInput {
    padding: 10px;
    border: 2px solid #4b0082;
    border-radius: 5px;
    background: #000;
    color: #fff;
    width: 200px;
    margin: 10px 0;
    font-size: 1em;
}

/* Buttons */
.btn {
    background-color: black;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid #4b0082;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin: 5px;
}

    .btn:hover {
        background-color: #000;
        color: #4b0082;
    }

/* Forum Header */
.forum-header {
    background: black;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 20px;
    border: 1px solid #4b0082;
}

    .forum-header h2 {
        font-size: 1.8em;
        color: #4b0082;
        margin: 0;
    }

    .forum-header p {
        font-size: 1em;
        color: #ccc;
        margin: 5px 0 0;
    }

.message.owner-message .username {
    color: #ff0000; /* Red for owner */
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

    .message.owner-message .username:hover {
        color: #cc0000; /* Slightly darker red on hover */
    }

.message.moderator-message .username {
    color: #1E90FF; /* Blue for moderators */
    font-weight: bold;
    text-shadow: 0 0 5px rgba(30, 144, 255, 0.5);
}

    .message.moderator-message .username:hover {
        color: #0a74da; /* Slightly darker blue on hover */
    }

.message.member-message {
    background: black; /* Slightly lighter purple background */
    border: 2px solid #C8A000; /* Brighter purple border */
}

    .message.member-message .username {
        color: #ffd700; /* Gold username for members */
        font-weight: bold;
    }

        .message.member-message .username:hover {
            color: #C8A000;
        }

    .message.member-message .profile-pic {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 15px;
        object-fit: cover;
        border: 2px solid #C8A000;
    }

    .message.member-message:hover {
        transform: translateY(-3px); /* Slightly more lift on hover */
        box-shadow: 0 6px 16px #C8A000;
    }

    .message.member-message img:not(.profile-pic) {
        max-width: 300px;
        max-height: 300px;
        width: auto;
        height: auto;
        object-fit: cover;
        border-radius: 5px;
        border: 1px solid #C8A000;
    }

    .message.member-message video {
        max-width: 300px;
        max-height: 300px;
        width: auto;
        height: auto;
        border-radius: 5px;
        border: 1px solid #C8A000;
    }
/* Messages Area */
#messages {
    height: 750px;
    background: black;
    border: 1px solid #4b0082;
    border-radius: 8px;
    padding: 15px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #4b0082 #1a1a1a;
}

    #messages::-webkit-scrollbar {
        width: 15px;
    }

    #messages::-webkit-scrollbar-track {
        background: black;
    }

    #messages::-webkit-scrollbar-thumb {
        background: #4b0082;
        border-radius: 4px;
    }

.message {
    display: flex;
    flex-direction: column;
    padding: 15px;
    margin: 10px 0;
    background: black;
    border: 1px solid #4b0082;
    border-radius: 8px;
    transition: transform 0.2s ease;
    /* Ensure content doesn’t overflow */
    overflow: hidden;
    word-wrap: break-word; /* Break long words to prevent overflow */
}

    .message:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

.message-header {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}

.message .profile-pic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
    border: 2px solid #4b0082;
    flex-shrink: 0; /* Prevent shrinking */
    cursor: pointer;
}

.message .content {
    flex: 1;
    display: flex;
    flex-direction: column; /* Stack username and message text */
    min-width: 0; /* Allow flex item to shrink properly */
}

.message .username {
    font-weight: 600;
    color: #6a00ff;
    cursor: pointer;
    margin-bottom: 5px; /* Space between username and message text */
}

    .message .username:hover {
        color: #6a00ff;
    }

.message .timestamp {
    font-size: 0.85em;
    color: #888;
    margin-top: 10px; /* Space above timestamp */
    align-self: flex-end; /* Align to the right within the content */
    position: relative; /* Remove absolute positioning */
}

.message .media-container {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.message img:not(.profile-pic) {
    max-width: 300px;
    max-height: 300px;
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #4b0082;
}

.message video {
    max-width: 200px;
    max-height: 200px;
    width: auto;
    height: auto;
    border-radius: 5px;
    border: 1px solid #4b0082;
}

.message a {
    color: #00BFFF;
    text-decoration: underline;
}

    .message a:hover {
        color: #1E90FF;
    }

.message .mention {
    color: #6a00ff;
    cursor: pointer;
    font-weight: 600;
}

    .message .mention:hover {
        color: #4b0082;
        text-decoration: underline;
    }

.message .username-check {
    color: #00ff00;
    margin-left: 5px;
    font-size: 1em;
    vertical-align: middle;
}
/* Input Fields */
#messageInput, #dmInput, #dmImage {
    width: 100%;
    height: 80px;
    background: #000;
    color: #fff;
    border: 2px solid #4b0082;
    border-radius: 5px;
    padding: 15px;
    margin: 15px 0;
    resize: none;
    font-size: 1em;
    font-family: 'Inter', Arial, sans-serif;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

    #messageInput:focus, #dmInput:focus {
        border-color: #6a00ff;
        outline: none;
    }

#recoverUsernameInput, #recoverSecretWordInput {
    width: 30%;
    height: 40px; /* Smaller height for single-line inputs */
    background: #000;
    color: #fff;
    border: 2px solid #4b0082;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0;
    font-size: 1em;
    font-family: 'Inter', Arial, sans-serif;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

    #recoverUsernameInput:focus, #recoverSecretWordInput:focus {
        border-color: #6a00ff;
        outline: none;
    }

#mediaInput {
    width: 80%;
    padding: 10px;
    background: #000;
    color: #fff;
    border: 2px solid #4b0082;
    border-radius: 5px;
    margin-bottom: 15px;
    font-size: 1em;
}

/* Popups (Base Styles) */
#forumsPopup, #profilePopup, #profileForm {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    padding: 10px; /* Reduced padding for mobile */
    overflow-y: auto;
    box-sizing: border-box;
}


.forum-item {
    background: black;
    padding: 15px;
    margin: 10px 0;
    border: 1px solid #4b0082;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s, border-color 0.3s;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 1em;
    color: #fff;
}

    .forum-item:hover {
        background: #1a1a1a; /* Slightly lighter black, consistent with other hover effects */
        border-color: #6a00ff; /* Brighter purple border on hover */
        transform: translateY(-2px); /* Matches .message:hover */
    }

    .forum-item.selected {
        background: black;
        border: 2px solid #6a00ff; /* Brighter purple border, consistent with .forum-item.selected */
        color: #fff;
        font-weight: 600; /* Slightly bolder to indicate selection */
    }

.forum-link {
    color: #6a00ff; /* Matches .message .username and .mention for consistency */
    text-decoration: none;
    flex-grow: 1;
    transition: color 0.3s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* Prevents wrapping, consistent with profile stats */
}

    .forum-link:hover {
        color: #4b0082; /* Darker purple, matches .message .mention:hover */
        text-decoration: underline; /* Subtle underline for interactivity */
    }

.forum-time {
    font-size: 0.85em; /* Slightly smaller, matches .message .timestamp */
    color: #888; /* Matches timestamp color */
    flex-shrink: 0; /* Prevents shrinking */
    margin-left: 10px; /* Space between link and timestamp */
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 2em;
    color: #fff;
    cursor: pointer;
    transition: color 0.3s;
}

    .close:hover {
        color: #4b0082;
    }

#forumsList {
    max-height: 500px; /* Adjust this value based on your preference */
    overflow-y: auto; /* Enable vertical scrolling when content overflows */
    scrollbar-width: thin; /* Firefox: thinner scrollbar */
    scrollbar-color: #4b0082 #1a1a1a; /* Firefox: custom scrollbar colors */
}

    /* Webkit (Chrome, Safari, Edge) Scrollbar Styling */
    #forumsList::-webkit-scrollbar {
        width: 10px; /* Width of the scrollbar */
    }

    #forumsList::-webkit-scrollbar-track {
        background: black; /* Background of the scrollbar track */
    }

    #forumsList::-webkit-scrollbar-thumb {
        background: #4b0082; /* Color of the scrollbar thumb */
        border-radius: 5px; /* Rounded edges for the thumb */
    }

        #forumsList::-webkit-scrollbar-thumb:hover {
            background: #6a00ff; /* Slightly lighter purple on hover */
        }
/* Profile Popup */
#profilePopup .popup-content {
    text-align: center;
}

#profilePopup h2 {
    font-size: 1.8em;
    color: #4b0082;
    margin-bottom: 20px;
}

#profilePopup .profile-pic {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 5px solid #4b0082;
    margin: 0 auto 20px;
    display: block;
    object-fit: cover;
}

#profilePopup .profile-stat {
    background: black;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #4b0082;
    border-radius: 5px;
    font-size: 1em;
    display: flex;
    justify-content: space-between;
    /* New properties to handle long text */
    overflow: hidden; /* Prevents overflow */
    white-space: nowrap; /* Keeps text on one line */
    text-overflow: ellipsis; /* Adds ellipsis for truncated text */
}

    /* Ensure the span inside respects the container's truncation */
    #profilePopup .profile-stat span {
        color: #d0d0d0;
        overflow: hidden; /* Ensures span doesn’t overflow */
        text-overflow: ellipsis; /* Truncates with ellipsis */
        max-width: 70%; /* Limits width to prevent overlap with the label */
    }

    #profilePopup .profile-stat strong {
        color: #C8A000;
    }



/* Profile Form */
#profileForm input[type="text"], #profileForm input[type="file"] {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 2px solid #4b0082;
    border-radius: 5px;
    background: #000;
    color: #fff;
    font-size: 1em;
    box-sizing: border-box;
}

    #profileForm input[type="text"]:focus, #profileForm input[type="file"]:focus {
        border-color: #6a00ff;
        outline: none;
    }

#forumTitleInput, #forumDescriptionInput {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 2px solid #4b0082;
    border-radius: 5px;
    background: #000;
    color: #fff;
    font-size: 1em;
    box-sizing: border-box;
}

#forumDescriptionInput {
    height: 100px;
    resize: none;
}

/* Lightbox Styling */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    z-index: 2000;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.lightbox-img {
    max-width: 80%;
    max-height: 80%;
    border: 4px solid #4b0082;
    border-radius: 10px;
    box-shadow: 0 0 30px #4b0082;
    margin-top: 60px;
}

.lightbox .close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 2em;
    cursor: pointer;
    transition: color 0.3s;
}

    .lightbox .close:hover {
        color: #4b0082;
    }

.lightbox-info {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px 20px;
    border-radius: 5px;
    width: 80%;
    max-width: 500px;
}

#lightbox-username {
    font-weight: bold;
    color: #6a00ff;
}

#lightbox-timestamp {
    font-size: 0.9em;
    color: #888;
}

#messagesPopup, #secretWordPrompt {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    padding: 10px;
    overflow-y: auto;
    box-sizing: border-box;
}

#conversationsList .conversation-item {
    background: black;
    padding: 15px;
    margin: 10px 0;
    border: 1px solid #4b0082;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

    #conversationsList .conversation-item:hover {
        background: #333;
        transform: translateY(-2px);
    }

#conversationsList .conversation-time {
    font-size: 0.9em;
    color: #888;
}


/* Messages Popup */
#messagesPopup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    padding: 10px;
    overflow-y: auto;
    box-sizing: border-box;
}

.popup-content {
    background: black;
    border: 2px solid #4b0082;
    padding: 20px;
    margin: 20px auto;
    width: 90%;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

#messagesPopup .close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 2em;
    color: #fff;
    cursor: pointer;
    transition: color 0.3s;
}

    #messagesPopup .close:hover {
        color: #4b0082;
    }

#dmMessages {
    max-height: 500px;
    overflow-y: auto;
    padding: 10px;
    background: black;
    border: 1px solid #4b0082;
    border-radius: 5px;
}

    #dmMessages::-webkit-scrollbar {
        width: 8px;
    }

    #dmMessages::-webkit-scrollbar-track {
        background: #000;
    }

    #dmMessages::-webkit-scrollbar-thumb {
        background: #4b0082;
        border-radius: 4px;
    }

        #dmMessages::-webkit-scrollbar-thumb:hover {
            background: #6a00ff;
        }

    #dmMessages .dm-message {
        padding: 10px;
        margin: 5px 0;
        background: black;
        border: 1px solid #4b0082;
        border-radius: 5px;
    }

        #dmMessages .dm-message.sent {
            border-color: #6a00ff;
            text-align: right;
        }

        #dmMessages .dm-message.received {
            border-color: #C8A000;
        }

        #dmMessages .dm-message img {
            max-width: 200px;
            max-height: 200px;
            margin-top: 5px;
            border-radius: 5px;
        }

        #dmMessages .dm-message a {
            color: #00BFFF;
            text-decoration: underline;
        }

            #dmMessages .dm-message a:hover {
                color: #1E90FF;
            }

.dm-message .text {
    word-wrap: break-word; /* Ensure long URLs or text wrap properly */
}

.dm-message .dm-message-media {
    max-width: 200px; /* Match existing DM image size */
    max-height: 200px;
    margin-top: 5px; /* Space above image */
    border-radius: 5px;
}

.dm-message.sent .text,
.dm-message.sent .dm-message-media {
    text-align: right; /* Align text and images right for sent messages */
}

.dm-message.received .text,
.dm-message.received .dm-message-media {
    text-align: left; /* Align text and images left for received messages */
}

#dmInput {
    width: 100%;
    height: 60px;
    background: #000;
    color: #fff;
    border: 2px solid #4b0082;
    border-radius: 5px;
    padding: 15px;
    margin: 15px 0;
    resize: none;
    font-size: 1em;
    font-family: 'Inter', Arial, sans-serif;
    box-sizing: border-box;
}

#dmImage {
    width: 100%;
    height: auto;
    background: #000;
    color: #fff;
    border: 2px solid #4b0082;
    border-radius: 5px;
    padding: 10px 15px;
    margin: 15px 0;
    font-size: 1em;
    font-family: 'Inter', Arial, sans-serif;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

    #dmImage::-webkit-file-upload-button {
        background: #4b0082;
        color: white;
        border: none;
        padding: 8px 15px;
        border-radius: 5px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.3s;
    }

        #dmImage::-webkit-file-upload-button:hover {
            background: #6a00ff;
        }

    #dmImage:focus {
        border-color: #6a00ff;
        outline: none;
    }

.active-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #00ff00; /* Bright green */
    border-radius: 50%;
    margin-left: 5px;
    vertical-align: middle;
}
/* Responsive Design */
@media (max-width: 768px) {
    #forum {
        width: 95%;
        padding: 15px;
    }

    .top-strip h1 {
        font-size: 24px; /* Reduce font size for smaller screens */
    }

    .top-strip {
        padding: 10px 5px; /* Adjust padding for mobile */
        width: 105%;
    }

    .nav-buttons {
        display: flex; /* Ensure buttons are aligned in a row */
        gap: 5px; /* Space between buttons */
        align-items: center; /* Vertically center buttons */
        margin-left: auto; /* Push buttons to the right */
        padding-right: 10px; /* Padding to ensure buttons are not touching the end */
    }


    .nav-button {
        padding: 10px 20px; /* Smaller padding */
        font-size: 16px; /* Smaller font */
    }

    #messages {
        height: 700px;
    }

    .message .media-container {
        flex-wrap: nowrap; /* Prevent wrapping on mobile */
        overflow-x: auto; /* Enable horizontal scrolling */
        gap: 10px; /* Reduce gap for tighter spacing */
        padding-bottom: 10px; /* Space for scrollbar visibility */
        scrollbar-width: thin; /* Thin scrollbar for Firefox */
        scrollbar-color: #4b0082 #1a1a1a; /* Custom scrollbar colors */
    }

        .message .media-container::-webkit-scrollbar {
            height: 8px; /* Horizontal scrollbar height */
        }

        .message .media-container::-webkit-scrollbar-track {
            background: black;
        }

        .message .media-container::-webkit-scrollbar-thumb {
            background: #4b0082;
            border-radius: 4px;
        }

    .message img:not(.profile-pic),
    .message video {
        max-width: 150px; /* Smaller width for side-by-side display */
        max-height: 150px; /* Consistent height */
        width: 150px; /* Fixed width to enforce uniformity */
        height: auto;
    }

    .message.member-message img:not(.profile-pic),
    .message.member-message video {
        max-width: 150px;
        max-height: 150px;
        width: 150px;
        height: auto;
    }

    #messageInput {
        height: 60px;
        padding: 10px;
    }

    .btn {
        padding: 8px 15px;
        font-size: 14px;
    }

    #user-section {
        padding: 10px;
    }

    #usernameInput {
        width: 100%;
        max-width: 300px;
    }

    /* Popup Adjustments */
    #forumsPopup, #profilePopup, #profileForm {
        padding: 5px; /* Minimal padding */
    }

    .popup-content {
        width: 95%; /* Almost full width */
        margin: 10px auto; /* Less top margin */
        padding: 15px; /* Reduced padding */
        max-height: 90vh; /* Limit height to viewport */
        overflow-y: auto; /* Scroll if content overflows */
    }

    .forum-item {
        padding: 10px; /* Reduced padding, matches existing mobile adjustments */
        font-size: 0.9em; /* Matches existing .forum-item mobile style */
    }

    .forum-link {
        font-size: 0.9em; /* Consistent with mobile text scaling */
    }

    .forum-time {
        font-size: 0.8em; /* Slightly smaller for mobile */
    }

    #forumTitleInput, #forumDescriptionInput {
        padding: 8px;
        font-size: 0.9em;
    }

    #forumDescriptionInput {
        height: 80px;
    }

    /* Profile Popup */
    #profilePopup .profile-pic {
        width: 100px;
        height: 100px;
    }

    #profilePopup h2 {
        font-size: 1.5em;
    }

    #profilePopup .profile-stat {
        padding: 10px;
        font-size: 0.9em;
    }

    /* Profile Form */
    #profileForm input[type="text"], #profileForm input[type="file"] {
        padding: 8px;
        font-size: 0.9em;
    }

    .lightbox-img {
        max-width: 90%; /* Wider for better visibility */
        max-height: 70%; /* Adjusted height */
    }
}

@media (max-width: 480px) {
    .top-strip h1 {
        font-size: 32px; /* Smaller font for very small screens */
    }

    #forum {
        width: 100%;
        padding: 10px;
        margin: 10px 0;
    }

    #messages {
        height: 650px;
    }

    .message .media-container {
        gap: 8px; /* Even tighter spacing for very small screens */
    }

    .message img:not(.profile-pic),
    .message video {
        max-width: 120px; /* Further reduce size for tiny screens */
        max-height: 120px;
        width: 120px;
        height: auto;
    }

    .message.member-message img:not(.profile-pic),
    .message.member-message video {
        max-width: 120px;
        max-height: 120px;
        width: 120px;
        height: auto;
    }

    .nav-button {
        padding: 8px 15px;
        font-size: 14px;
    }

    /* Popup Adjustments */
    .popup-content {
        width: 98%; /* Nearly full width */
        padding: 10px;
        margin: 5px auto;
    }

    .close {
        top: 5px;
        right: 5px;
        font-size: 1.5em; /* Smaller close button */
    }

    .forum-item {
        padding: 8px; /* Further reduced, matches existing mobile adjustments */
        font-size: 0.85em; /* Matches existing .forum-item mobile style */
    }

    .forum-link {
        font-size: 0.85em; /* Consistent with mobile text scaling */
    }

    .forum-time {
        font-size: 0.75em; /* Even smaller for very small screens */
    }

    #forumTitleInput, #forumDescriptionInput {
        padding: 6px;
        font-size: 0.85em;
    }

    #forumDescriptionInput {
        height: 60px;
    }

    /* Profile Popup */
    #profilePopup .profile-pic {
        width: 80px;
        height: 80px;
    }

    #profilePopup h2 {
        font-size: 1.3em;
        margin-bottom: 15px;
    }

    #profilePopup .profile-stat {
        padding: 8px;
        font-size: 0.85em;
    }

    /* Profile Form */
    #profileForm input[type="text"], #profileForm input[type="file"] {
        padding: 6px;
        font-size: 0.85em;
    }

    .lightbox-img {
        max-width: 95%;
        max-height: 65%;
        margin-top: 40px;
    }

    .lightbox-info {
        padding: 8px 15px;
        font-size: 0.9em;
    }
}