:root {
    --bg: #000000;
    --text: #FFFFFF;
    --border: #FFFFFF;
    --link: #80bdff;
    --link-visited: #e6d6ff;
    --secondary-text: #999;
    --box-bg: #000000;
    --hr-color: #FFFFFF;
}

[data-theme="light"] {
    --bg: #FFFFFF;
    --text: #000000;
    --border: #000000;
    --link: #0000EE;
    --link-visited: #551A8B;
    --secondary-text: #666;
    --box-bg: #FFFFFF;
    --hr-color: #000000;
}

/* ... existing body ... */

.admin-panel-container {
    border: 2px solid #ff3333;
    padding: 10px;
    margin-top: 10px;
    background: #330000;
    color: #fff;
}

.admin-panel-container h3 {
    color: #ff6666 !important;
}

[data-theme="light"] .admin-panel-container {
    background: #ffeeee;
    border-color: red;
    color: #000;
}

[data-theme="light"] .admin-panel-container h3 {
    color: red !important;
}

body {
    background-color: var(--bg);
    color: var(--text);
}

a {
    color: var(--link);
}

a:visited {
    color: var(--link-visited);
}

/* Apply variable to elements commonly found in the project */
.container,
.sidebar-box,
.comment,
.news-item,
.nav,
.meta,
.content,
.status-table,
.status-table th,
.status-table td,
.admin-controls,
.user-info,
.sidebar-title,
.post-box,
.comment-form,
.info,
.draft-item,
.form-group input,
.form-group textarea,
.form-group select,
.cat-filter,
.reply-block,
.marquee-container {
    background-color: var(--bg);
    color: var(--text);
    border-color: var(--border);
}

h1,
h2,
h3,
h4 {
    color: var(--text) !important;
    border-color: var(--border) !important;
}

hr {
    border-top-color: var(--hr-color) !important;
}

.date,
.comment-count,
.comment small {
    color: var(--secondary-text) !important;
}

/* Specific fixes for items that have hardcoded white or black backgrounds */
input,
textarea,
select,
button {
    background-color: var(--bg) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

.pinned {
    background-color: #333300 !important;
    /* Darker yellow for pinned */
}

[data-theme="light"] .pinned {
    background-color: #FFFFCC !important;
}

/* Vote highlighting */
.voted-up {
    color: #ff4500 !important;
    /* Reddit orange-red */
    font-weight: bold;
}

.voted-down {
    color: #7193ff !important;
    /* Reddit blue-ish */
    font-weight: bold;
}

/* Attachments */
.attachment-img {
    max-width: 100%;
    max-height: 150px;
    /* Limit height by default so gifs aren't huge */
    /* border: 1px solid var(--border); REMOVED */
    margin: 10px 0;
    cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    object-fit: contain;
    /* Ensure ratio is kept */
}

/* User wants option to resize? For now let's just make default reasonable.
   Or we can add "small", "medium", "large" classes if we parse markdown differently.
   But user asked for "window to choose size". Doing that for *pasted* link is hard without complex UI.
   BEST APPROACH: Make default display "Medium" (max-height 300px) and click expands to Lightbox (Full).
   This is what "look how others do it" usually implies (Twitter/Discord style previews).
*/

.attachment-img.small {
    max-height: 150px;
}

.attachment-img.large {
    max-height: 600px;
}

.attachment-file {
    display: block;
    padding: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    margin: 5px 0;
    text-decoration: none;
    color: var(--text);
}

.attachment-file:hover {
    background: #333;
}

[data-theme="light"] .attachment-file:hover {
    background: #eee;
}

/* Lightbox */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90vh;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 30px;
    cursor: pointer;
    user-select: none;
}

/* Info Box */
.info-box {
    background: #000033;
    border: 1px solid #6666ff;
    color: #fff;
    padding: 5px;
    font-size: 0.9em;
    margin-bottom: 10px;
}

[data-theme="light"] .info-box {
    background: #eef;
    border: 1px solid #99f;
    color: #000;
}

/* Mobile Responsiveness */
@media screen and (max-width: 768px) {

    .main-wrapper,
    .container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        padding: 10px !important;
        border-right: none !important;
        border-left: none !important;
        margin: 0 !important;
    }

    .columns-wrapper {
        flex-direction: column;
    }

    /* Mobile Sidebar Panel */
    .sidebar {
        position: fixed;
        top: 0;
        left: -280px;
        /* Hide off-screen */
        width: 250px;
        height: 100%;
        background: var(--bg);
        border-right: 2px solid var(--border);
        /* Right border instead of top */
        border-top: none;
        padding: 20px;
        z-index: 999;
        transition: left 0.3s ease;
        overflow-y: auto;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
    }

    .sidebar.active {
        left: 0;
    }

    .sidebar-box {
        border: 1px solid var(--border);
        margin-bottom: 20px;
    }

    .content {
        border-right: none !important;
        padding: 10px 0;
    }

    body {
        padding: 0 !important;
        overflow-x: hidden;
    }

    img {
        max-width: 100% !important;
        height: auto;
    }

    textarea,
    input[type="text"] {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .comment-form textarea {
        width: 100% !important;
    }

    h1 {
        font-size: 1.5em;
    }

    .status-table {
        font-size: 0.8em;
    }

    /* Mobile Menu Button */
    .mobile-menu-btn {
        display: block !important;
        font-size: 24px;
        cursor: pointer;
        background: none;
        border: none;
        color: var(--text);
        padding: 10px;
        float: left;
    }

    /* Adjust Header for button */
    .header h1 {
        display: inline-block;
        border: none;
        margin: 0;
        padding: 10px 0;
        font-size: 1.2em;
    }

    .header {
        display: none !important;
    }
}

.mobile-menu-btn {
    display: none;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1001;
}

.ascii-container {
    display: flex;
    justify-content: center;
    padding: 5px 20px 20px 20px;
    text-align: center;
}

.ascii-logo {
    font-family: 'Courier New', Courier, monospace;
    font-size: clamp(8px, 1.8vw, 15px);
    line-height: 1.1;
    margin: 0;
    white-space: pre;
    font-weight: bold;
    display: inline-block;
    color: #FFFFFF !important;
}

@keyframes pink-shimmer {
    0% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }

    100% {
        background-position: 0% center;
    }
}