/* In style.css, add this at or near the top */

/* Universal Box Sizing & Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --- THE FIX for the "Zoomed-In" Issue --- */

/* 1. Prevent the body from ever scrolling horizontally */

html, body {
    width: 100%;
    overflow-x: hidden;
}

/* 2. Ensure all main page containers respect the screen width */
main, .page-container {
    width: 100%;
    max-width: 100%; /* This is the key property */
}
/* In style.css */

/* Prevent body from scrolling horizontally 
body {
    overflow-x: hidden;
}*/

/* Ensure images and videos are responsive */
img, video {
    max-width: 100%;
    height: auto;
}

/* :root defines the default (Light Theme) variables */
:root {
    --primary-color: #0000FF;
    --background-color: #f9f9f9;
    --content-bg-color: #ffffff;
    --text-color-primary: #1c1e21;
    --text-color-secondary: #65676B;
    --border-color: #dbdbdb;
    --hover-bg-color: #f0f2f5;
    --primary-color-dark: #0011cc;   /* ADD THIS: For button hovers */
    --primary-text-color: #ffffff;  /* ADD THIS: For text on primary buttons */
    --input-bg-color: #f7f9fc;                           /* ADD THIS */
    --primary-color-focus: rgba(0, 0, 255, 0.2);        /* ADD THIS */
    --primary-color-shadow: rgba(0, 0, 255, 0.1);       /* ADD THIS */
    
    --secondary-button-bg: #e4e6eb;      /* ADD THIS */
    --secondary-button-text: #050505;    /* ADD THIS */
    --primary-color-bg-light: #e6f2ff; /* ADD THIS LINE */
    --overlay-bg-color: rgba(255, 255, 255, 0.8); /* A semi-transparent WHITE for the light theme */
    --shadow-color: rgba(0, 0, 0, 0.1); /* ADD THIS */
    --danger-color: #d93025; /* ADD THIS */
    --dark-overlay-bg: rgba(0, 0, 0, 0.85); /* ADD THIS LINE */
}

/* When the body has the .dark-theme class, we override the variables */
body.dark-theme {
    --primary-color: #4d94ff; /* A slightly brighter blue for better contrast */
    --background-color: #121212;
    --content-bg-color: #1e1e1e;
    --text-color-primary: #e4e6eb;
    --text-color-secondary: #b0b3b8;
    --border-color: #3e4042;
    --hover-bg-color: #3a3b3c;
    --primary-color-dark: #66aaff;       /* ADD THIS: A lighter hover for dark mode */
    --primary-text-color: #ffffff;      /* ADD THIS: Text color remains white */
    --input-bg-color: #2c2c2e;                           /* ADD THIS */
    --primary-color-focus: rgba(77, 148, 255, 0.3);     /* ADD THIS */
    --primary-color-shadow: rgba(77, 148, 255, 0.15);    /* ADD THIS */
    --secondary-button-bg: #3a3b3c;      /* ADD THIS */
    --secondary-button-text: #e4e6eb;    /* ADD THIS */
    --primary-color-bg-light: rgba(77, 148, 255, 0.15); /* ADD THIS LINE */
    --overlay-bg-color: rgba(0, 0, 0, 0.6); /* ADD THIS */
    --shadow-color: rgba(0, 0, 0, 0.3); /* ADD THIS */
    --danger-color: #e54e42; /* ADD THIS (a slightly brighter red for dark backgrounds) */
}

/* This makes the theme change smoothly */
body {
    background-color: var(--background-color);
    color: var(--text-color-primary);
    transition: background-color 0.3s, color 0.3s;
} 

/* Hides the right rail on mobile */
#desktop-right-rail {
    display: none;
}

/* Add this to your main <style> block in index.html */

/* ================================= */
/* --- NEW Profile Dropdown Styles --- */
/* ================================= */

/* Style for the profile button in the header */

.profile-btn {
    background: none;
    border: 1px solid var(--border-color); /* CHANGED */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
}
.profile-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Main container for the dropdown menu */
.profile-dropdown-menu {
    position: absolute;
    top: 58px;
    right: 10px;
    
    /* --- The Improvement --- */
    width: max-content; /* Let the content decide the width */
    min-width: 190px;   /* But ensure it's at least 190px wide */

    /* Use theme variables for colors and borders */
    background-color: var(--content-bg-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    border: 2px solid var(--primary-color);

    z-index: 2100;
    transition: opacity 0.2s, transform 0.2s;
    transform-origin: top right;
}

/* Utility class to hide the menu */
.profile-dropdown-menu.hidden {
    display: none;
    opacity: 0;
    transform: scale(0.95);
}

/* --- Dropdown Internals --- */
.profile-menu-header {
    padding: 15px;
    border-bottom: 1px solid var(--border-color); /* CHANGED */
}


.profile-menu-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.profile-menu-user:hover {
    background-color: var(--hover-bg-color); /* CHANGED */
}

.profile-menu-user img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}
.profile-menu-user span {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-color-primary); /* ADDED */
}
.view-profile-link {
    color: var(--primary-color); /* Your brand color */
    font-size: 14px;
    text-decoration: none;
    padding: 8px 8px 0 56px; /* Aligns with the username */
    display: block;
}

.menu-separator {
    border: none;
    border-top: 1px solid var(--border-color); /* CHANGED */
    margin: 8px 0;
}

.profile-menu-list {
    list-style: none;
    padding: 0 8px 8px 8px;
    margin: 0;
}

.profile-menu-list li a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-color-primary); /* CHANGED */
    font-weight: 500;
    border: 1px solid transparent;
}
.profile-menu-list li a:hover {
    background-color: var(--hover-bg-color); /* CHANGED */
}
.profile-menu-list .menu-icon {
    width: 30px;
    height: 30px;
    color: var(--primary-color);
}



/* ================================================== */
/* --- FINAL & COMPLETE AUTH MODAL CSS (Themed V4) --- */
/* ================================================== */

/* --- Main Header Login Button --- */
.header-action-btn {
    background-color: var(--primary-color); /* UPDATED */
    color: var(--primary-text-color);       /* UPDATED */
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-left: 10px;
}
.header-action-btn:hover {
    background-color: var(--primary-color-dark); /* UPDATED */
}

/* --- Main Modal & Overlay --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2300;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}
.modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}
.auth-modal-content {
    background: var(--content-bg-color); /* UPDATED */
    width: 90%;
    max-width: 420px; 
    border-radius: 12px;
    padding: 20px 25px;
    position: relative;
    border: 2px solid var(--primary-color); /* UPDATED */
    transform: scale(1);
    transition: transform 0.3s ease-in-out;
}
.modal-overlay.hidden .auth-modal-content {
    transform: scale(0.9);
}


#info-modal-overlay {
    z-index: 2500; /* This value is higher than the upload sheet's z-index of 2000 */
}
/* ========================================= */
/* == CUSTOM LOGOUT MODAL STYLES          == */
/* ========================================= */

.logout-modal-text {
    font-size: 16px;
    color: var(--text-color-secondary);
    margin-bottom: 25px;
}

/* ========================================= */
/* == PAGE LOGIN PROMPT STYLES            == */
/* ========================================= */

.login-prompt-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: calc(100vh - 200px); /* Full height minus header/nav */
    padding: 20px;
}

.login-prompt-container h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: var(--text-color-primary);
}

.login-prompt-container p {
    font-size: 1.1rem;
    color: var(--text-color-secondary);
    margin-bottom: 25px;
    max-width: 400px;
}

/* --- Login UX Improvements --- */

/* MODIFIED: This selector now targets BOTH error containers */
#login-network-error,
#phone-login-network-error {
    text-align: center;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid var(--danger-color);
    background-color: rgba(217, 48, 37, 0.1);
    border-radius: 8px;
}
/* This now targets both message paragraphs */
#login-network-error p,
#phone-login-network-error p {
    color: var(--danger-color);
    font-weight: 500;
    margin: 0 0 10px 0;
}
/* This now targets both "Try Again" buttons */
#login-network-error .action-btn,
#phone-login-network-error .action-btn {
    padding: 8px 16px;
}
/* This now targets both containers to hide them */
#login-network-error.hidden,
#phone-login-network-error.hidden {
    display: none;
}

/* The disabled button style will work for both buttons automatically, no changes needed */
.auth-modal-content button[type="submit"]:disabled {
    background-color: var(--secondary-button-bg);
    color: var(--text-color-secondary);
    cursor: wait;
    opacity: 0.7;
}

/* =======================================================
   == Z-INDEX FIX: Ensure Auth Modal Is Always On Top   ==
   ======================================================= */
#auth-modal-overlay {
    z-index: 2600;
}

/* --- Header, Footer & Close Buttons --- */
.auth-modal-header {
    text-align: center;
    padding: 5px 0 20px 0;
}
.auth-modal-header h2 {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-color-primary); /* UPDATED */
}
.auth-modal-footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color); /* UPDATED */
    font-size: 15px;
}
.auth-modal-footer a {
    color: var(--primary-color); /* UPDATED */
    font-weight: 600;
    text-decoration: none;
}
.close-modal-btn, .back-to-main-login-btn {
    position: absolute;
    top: 10px;
    background: none;
    border: none;
    font-size: 28px;
    color: var(--text-color-secondary); /* UPDATED */
    cursor: pointer;
}
.close-modal-btn { right: 15px; }
.back-to-main-login-btn { left: 15px; }
.close-modal-btn:hover, .back-to-main-login-btn:hover { 
    color: var(--text-color-primary); /* UPDATED */
}

/* ========================================= */
/* == LOGGED-OUT THEME SWITCHER STYLES    == */
/* ========================================= */

.theme-switcher-container {
    position: relative;
}

/* Style for the dropdown panel */
.theme-dropdown-menu {
    position: absolute;
    top: 50px;
    right: 0;
    width: 180px;
    background-color: var(--content-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px var(--shadow-color);
    z-index: 2100;
    padding: 10px;
    transform-origin: top right;
}

.theme-dropdown-menu.hidden {
    display: none;
}

.theme-dropdown-menu h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color-secondary);
    margin: 0 5px 10px 5px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.theme-dropdown-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.theme-dropdown-menu button {
    width: 100%;
    background: none;
    border: none;
    padding: 10px;
    border-radius: 6px;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-color-primary);
    cursor: pointer;
    transition: background-color 0.2s;
}

.theme-dropdown-menu button:hover {
    background-color: var(--hover-bg-color);
}

.theme-dropdown-menu button.active {
    background-color: var(--primary-color-bg-light);
    color: var(--primary-color);
    font-weight: 600;
}


/* --- Tabs (View Switcher) --- */
.auth-view-switcher {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color); /* UPDATED */
}
.auth-view-switcher .switcher-link {
    color: var(--text-color-secondary); /* UPDATED */
    text-decoration: none;
    padding-bottom: 10px;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    flex-grow: 1;
    text-align: center;
    cursor: pointer;
}
.auth-view-switcher .switcher-link.active {
    color: var(--primary-color); /* UPDATED */
    border-bottom-color: var(--primary-color); /* UPDATED */
}


/* Reusable style for ALL icons in the header */
.header-icon-btn {
    background: transparent;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    transition: all 0.2s ease;
}

.header-icon-btn:hover,
.header-icon-btn.active {
    background-color: var(--primary-color);
    color: var(--primary-text-color);
}

.header-icon-btn svg {
    width: 22px;
    height: 22px;
}

/* --- Form Elements (Inputs, Labels, etc.) --- */
.input-group {
    margin-bottom: 15px;
    position: relative;
}
.input-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color-secondary); /* UPDATED */
}
.input-group input, .phone-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--primary-color); /* UPDATED */
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
    background-color: var(--input-bg-color); /* UPDATED */
    color: var(--text-color-primary); /* ADDED: Ensures text is readable in dark mode */
}
.input-group input:focus, .phone-group select:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-color-focus); /* UPDATED */
}
.input-group input[type="password"] {
    padding-right: 45px;
}
.password-toggle-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-color-secondary); /* UPDATED */
}
.phone-group {
    display: flex;
}
.phone-group select {
    flex: 0 0 100px;
    margin-right: 10px;
}
.phone-group input {
    flex: 1 1 auto;
}
.form-links {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}
.form-link {
    color: var(--primary-color); /* UPDATED */
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}
.form-link:hover {
    text-decoration: underline;
}

/* --- Primary Action Buttons (Covers ALL forms) --- */
.auth-modal-content button[type="submit"] {
    width: 100%;
    padding: 12px;
    margin-top: 5px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    background-color: var(--primary-color); /* UPDATED */
    color: var(--primary-text-color); /* UPDATED */
    transition: background-color 0.2s;
}
.auth-modal-content button[type="submit"]:hover {
    background-color: var(--primary-color-dark); /* UPDATED */
}

/* --- Social Login & Initial Options --- */
.auth-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-color-secondary); /* UPDATED */
    margin: 18px 0;
}
.separator::before, .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-color); /* UPDATED */
}
.separator:not(:empty)::before { margin-right: .5em; }
.separator:not(:empty)::after { margin-left: .5em; }

.social-login {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.auth-option {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    border: 1px solid var(--primary-color); /* UPDATED */
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color-primary); /* UPDATED */
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}
.auth-option:hover {
    background-color: var(--hover-bg-color); /* UPDATED */
    border-color: var(--primary-color-dark); /* UPDATED */
    transform: translateY(-3px);
    box-shadow: 0 4px 15px var(--primary-color-shadow); /* UPDATED */
}
.auth-option img, .auth-option svg {
    width: 22px;
    height: 22px;
}

/* --- Specific View Styles (e.g., Code Entry) --- */
#code-entry-view .code-entry-text {
    text-align: center; 
    margin: -15px 0 20px; 
    color: var(--text-color-secondary); /* UPDATED */
}
#code-entry-view #login-code {
    text-align:center; 
    font-size: 1.2em; 
    letter-spacing: 0.5em;
}


/* --- Final Auth Modal Text --- */
.auth-terms {
    font-size: 12px;
    color: var(--text-color-secondary); /* UPDATED */
    line-height: 1.5;
    text-align: center;
    margin: 15px 0;
}
.auth-terms a {
    color: var(--primary-color); /* UPDATED */
    font-weight: 600;
    text-decoration: none;
}
.auth-terms a:hover {
    text-decoration: underline;
}

.auth-modal-subtitle {
    font-size: 15px;
    color: var(--text-color-secondary); /* UPDATED */
    margin-top: 5px;
    font-weight: 400;
}

/* =========================================
   == DESKTOP SIDEBAR STYLES (Corrected V3) ==
   ========================================= */

/* In style.css, find and REPLACE your existing .sidebar rule with this */

.sidebar {
    width: 240px;
    height: calc(100vh - 60px); /* Match new desktop header height */
    padding: 20px 16px;

    /* --- THE FIX --- */
    position: sticky; /* Changed from 'fixed' */
    top: 60px;        /* Tells it to stick to the top, right below the 60px header */

    background: var(--content-bg-color);
    border-right: 1px solid var(--border-color);
    transform: translateX(0);
    transition: transform 0.3s ease-in-out;
}

/* State for when the sidebar is hidden */
.sidebar.collapsed {
    transform: translateX(-100%);
}

.toggle-button {
    background: var(--content-bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color-primary);
    font-size: 24px;
    cursor: pointer;
    position: fixed;
    top: 4px; /* UPDATED: Vertically centered in the 56px header */
    left: 10px;
    z-index: 101;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.toggle-button:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* --- Menu Item & Icon Styles --- */
.menu-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-color-secondary);
  transition: all 0.2s ease;
  font-size: 16px;
  font-weight: 500;
}

.menu-item:hover {
  background: var(--hover-bg-color);
  color: var(--text-color-primary);
}

.menu-item .icon {
    width: 28px;
    height: 28px;
    color: var(--primary-color);
    transition: all 0.2s ease;
}

/* Hover effect logic */
.menu-item .icon-hover { display: none; }
.menu-item .icon-normal { display: block; }

.menu-item:hover .icon-hover { display: block; }
.menu-item:hover .icon-normal { display: none; }

/* --- Responsive Cleanup --- */
/* ADDED: Hide the desktop toggle button on mobile screens */
@media (max-width: 768px) {
    .toggle-button {
        display: none;
    }
}
/* --- End of Sidebar Styles --- */


/* ================================================
   == SEARCH COMPONENT STYLES (Fully Responsive V3) ==
   ================================================ */

.search-container {
    display: flex;
    background: var(--content-bg-color);
    border-radius: 50px;
    overflow: hidden;
    flex: 1;
    max-width: 600px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-color);
}

.search-container input {
    flex: 1;
    min-width: 0; /* Important for allowing the input to shrink properly */
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    outline: none;
    background: transparent;
    color: var(--text-color-primary);
}

.search-container input::placeholder {
    color: var(--text-color-secondary);
    opacity: 1;
}

.search-container button {
    background: var(--primary-color);
    color: var(--primary-text-color);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0; /* THIS IS THE CORE LAYOUT FIX: The button will never shrink */
}

/* We will add an icon using CSS for the mobile view */
.search-container button .search-icon-svg {
    display: none; /* Hide the icon by default on desktop */
    width: 20px;
    height: 20px;
}

.search-container button:hover {
    background: var(--primary-color-dark);
}

/* SPELL CHECK MESSAGE STYLES */

#spell-check-container {
    padding: 0 15px 15px 15px;
    font-size: 15px;
}
.spell-check-message a {
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 600;
}
.search-instead-message {
    margin-top: 5px;
    font-size: 14px;
    color: var(--text-color-secondary);
}
.search-instead-message a {
    color: var(--text-color-secondary);
    text-decoration: underline;
}

/* --- Responsive adjustments for MOBILE screens --- */
@media (max-width: 768px) {
    .search-container input {
        font-size: 14px;
        padding: 8px 15px;
    }

    .search-container button {
        padding: 8px;
        width: 44px; /* Give the button a fixed square-like size */
        height: 44px;
        justify-content: center; /* Center the icon inside */
    }

    /* Hide the "Search" text on mobile */
    .search-container button span {
        display: none;
    }
    
    /* Show the search icon on mobile */
    .search-container button .search-icon-svg {
        display: block;
    }
}

/* =========================================
   == HEADER & MAIN LAYOUT (Themed V2)    ==
   ========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', Arial, sans-serif;
}

/* --- Main Header --- */

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 16px;
    height: 56px;
    background-color: var(--content-bg-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
    /* This is the line to change */
    border-bottom: 3px solid var(--primary-color); /* UPDATED */
}

.header-left, .header-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.header-right {
    gap: 12px;
}
.header-center {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
}

/* --- Logo --- */
.logo-container {
    display: flex;
    align-items: center;
}
.logo-link {
    display: flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
    transition: transform 0.2s ease;
}
.logo-link:hover {
    transform: scale(1.03);
}
.logo-link:active {
    transform: scale(0.98);
}
/* ADDED: Hide the dark mode logo by default */
.logo.dark-logo {
    display: none;
}
/* ADDED: Show the dark mode logo ONLY when dark theme is active */
.dark-theme .logo.dark-logo {
    display: block;
}
/* ADDED: Hide the light mode logo ONLY when dark theme is active */
.dark-theme .logo.light-logo {
    display: none;
}


/* --- Main Content Area --- */
main {
    padding: 20px;
    min-width: 0;
}

.content-placeholder {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-color-secondary); /* UPDATED */
    font-size: 18px;
}

/* REMOVED: .content-area and its media query, as they are unused */

        /* Styles from upload.html CSS block go here. Ensure they are present! */
        .hidden-input-trigger {
            position: absolute;
            width: 0.1px;
            height: 0.1px;
            opacity: 0;
            overflow: hidden;
            z-index: -1;
        }

        #upload-trigger-container {
            z-index: 1000;
        }

        .upload-trigger-button {
            background: white;
            border: 2px solid #0000FF;
            border-radius: 8px;
            cursor: pointer;
            padding: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            width: 56px;
            height: 56px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            position: relative; /* NEW: Needed for the animation pseudo-element */
            overflow: hidden;   /* NEW: Needed to contain the animation */
            z-index: 1; /* NEW: Ensure button content is above the animation */
        }

        .upload-trigger-button:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 8px rgba(0, 0, 255, 0.2);
        }

        .upload-trigger-button svg {
            width: 32px;
            height: 32px;
            position: relative; /* NEW: Ensure SVG is above the liquid fill */
            z-index: 2;         /* NEW: Ensure SVG is above the liquid fill */
        }

        /* */
        .upload-trigger-button.uploading::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: var(--progress-percent, 0%); /* Controlled by JS */
            background-color: #0000FF;
            opacity: 0.8;
            transition: height 0.3s ease-in-out;
            z-index: 1;
            /* Creates a subtle wave effect */
            border-top-left-radius: 150% 20px;
            border-top-right-radius: 150% 20px;
            animation: wave 2s infinite linear;
        }
        
        @keyframes wave {
            0% {
                border-top-left-radius: 150% 20px;
                border-top-right-radius: 150% 30px;
            }
            50% {
                border-top-left-radius: 150% 30px;
                border-top-right-radius: 150% 20px;
            }
            100% {
                border-top-left-radius: 150% 20px;
                border-top-right-radius: 150% 30px;
            }
        }
        /* */

        /* Modal Overlay (initial state hidden) */
        .upload-popup-container {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .upload-popup-content {
            background: white;
            border: 2px solid #0000FF;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            width: 100%;
            max-width: 250px;
            padding: 20px;
            animation: popupFadeIn 0.3s ease;
        }

        /* Initial state for these should be hidden by CSS rules */
        .text-editor-container {
            display: none;
            width: 100%;
        }

        .upload-details-form {
            display: none;
            width: 100%;
        }

        #celebration-container {
            display: none;
        }

        #exit-confirm-modal {
            display: none;
        }


        .upload-options-column {
            display: flex;
            flex-direction: column;
            gap: 15px;
            width: 100%;
        }

        .upload-option-button {
            width: 100%;
            padding: 18px 20px;
            border: 2px solid #0000FF;
            border-radius: 8px;
            background: white;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
        }

        .upload-option-button:hover {
            background: #f0f5ff;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 255, 0.1);
        }

        .upload-icon {
            width: 1px;
            height: 1px;
            min-width: 1px;
            margin-right: 12px;
            object-fit: contain;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            transform: scale(250);
            transform-origin: left left;
            position: relative;
            left: 0;
            top: 0;
        }

        .upload-option-label {
            font-size: 17px;
            font-weight: 600;
            color: #333;
            white-space: nowrap;
            margin-left: 20px;
        }

        #post-editor {
            width: 100%;
            height: 200px;
            border: 2px solid #0000FF;
            /* Blue border */
            border-radius: 8px;
            padding: 15px;
            font-family: Arial, sans-serif;
            font-size: 15px;
            resize: vertical;
            margin-bottom: 15px;
        }

        .editor-actions {
            display: flex;
            justify-content: space-between;
            gap: 15px;
        }

        .editor-action-button {
            padding: 10px 18px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 15px;
            font-weight: 500;
            transition: all 0.2s ease;
            border: 2px solid #0000FF;
        }

        .editor-action-button.cancel {
            background: white;
            color: #0000FF;
        }

        .editor-action-button.publish {
            background: #0000FF;
            color: white;
        }

        .editor-action-button:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        .upload-details-form h3 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
            font-size: 18px;
        }

        .upload-details-form input,
        .upload-details-form textarea {
            width: 100%;
            padding: 12px;
            margin-bottom: 15px;
            border: 2px solid #0000FF;
            /* Blue border */
            border-radius: 6px;
            font-size: 15px;
        }

        .upload-details-form textarea {
            min-height: 100px;
        }

        .upload-error {
            color: red;
            font-size: 14px;
            margin-bottom: 15px;
            min-height: 20px;
        }
        
        /* NOTE: The progress bar inside the modal is no longer needed */
        .upload-progress {
           display: none; /* CHANGED: Hide this as we are using the main button now */
        }

        .form-actions {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

        .form-action-button {
            flex: 1;
            padding: 12px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 15px;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .form-action-button.back {
            background: white;
            color: #0000FF;
            border: 2px solid #0000FF;
        }

        .form-action-button.submit {
            background: #0000FF;
            color: white;
            border: 2px solid #0000FF;
        }

        .form-action-button:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        @keyframes popupFadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fall {
            to {
                transform: translateY(100vh) rotate(360deg);
            }
        }

        .confetti-message {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #0000FF;
            color: white;
            padding: 18px 32px;
            border-radius: 8px;
            z-index: 1001;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            font-size: 16px;
            font-weight: 500;
        }

        @media (max-width: 600px) {
            .upload-popup-content {
                max-width: 90%;
                padding: 15px;
            }

            .upload-option-button {
                padding: 16px;
            }

            .upload-icon {
                transform: scale(20);
            }

            .upload-option-label {
                font-size: 16px;
                margin-left: 40px;
            }

            #upload-trigger-container {
                right: 20px;
                top: 20px;
            }
        }

        @media (max-width: 400px) {
            .upload-icon {
                transform: scale(18);
            }

            .upload-option-label {
                font-size: 15px;
                margin-left: 36px;
            }

            .editor-action-button,
            .form-action-button {
                padding: 8px 12px;
                font-size: 14px;
            }
        }

        /* NEW: Styles for the Exit Confirmation Modal */
        .confirm-modal-content {
            max-width: 300px;
            /* Adjust width as needed */
            text-align: center;
        }

        .confirm-modal-content h4 {
            margin-bottom: 10px;
            color: #333;
        }

        .confirm-modal-content p {
            font-size: 14px;
            color: #666;
            margin-bottom: 20px;
        }
       
/* =======================================================
   == PROFILE PAGE STYLES (V6 - Recommended Layout)     ==
   ======================================================= */

/* --- General Page Structure --- */
.profile-page {
    max-width: 950px;
    margin: 0 auto;
}
.profile-header-container {
    background-color: var(--content-bg-color);
    position: relative;
    z-index: 10;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* --- Cover Photo --- */

.profile-cover-photo {
    height: 140px;
    background-size: cover;
    background-position: center;
    background-color: var(--hover-bg-color);
    border-radius: 12px;
}

/* --- Main Details Bar (Container for everything below cover) --- */
.profile-details-bar {
    padding: 0 15px 15px 15px;
}

/* This container just holds the avatar */
.profile-avatar-container {
    margin-top: -50px; /* Pulls the avatar up */
    position: relative;
    z-index: 5;
}
.profile-page-picture {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid var(--content-bg-color);
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.profile-picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* This container holds all text and buttons */
.profile-info-container {
    padding-top: 10px;
}
.profile-name-and-stats {
    /* No special positioning needed */
}
.profile-name h1 {
    margin: 0;
    font-size: 24px;
    font-weight: bold;
    color: var(--text-color-primary);
}
.profile-name p {
    margin: 0;
    font-size: 15px;
    color: var(--text-color-secondary);
    margin-bottom: 10px;
}
.profile-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}
.stat a { text-decoration: none; }
.stat .count {
    font-weight: bold;
    font-size: 15px;
    color: var(--text-color-primary);
}
.stat .label {
    font-size: 13px;
    color: var(--text-color-secondary);
}

/* Action Buttons Bar */
.profile-action-bar {
    display: flex;
}
.action-buttons-left {
    display: flex;
    flex-grow: 1;
    gap: 10px;
}

.action-btn {
    background-color: var(--primary-color);
    color: var(--primary-text-color);
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
}
.action-btn.secondary {
    flex-grow: 0; /* Let secondary buttons size to their content */
    background-color: var(--secondary-button-bg);
    color: var(--secondary-button-text);
}
.action-btn:hover {
    filter: brightness(1.1);
}
.action-menu-container {
    position: relative;
    flex-shrink: 0;
    margin-left: auto;
}
.action-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: var(--secondary-button-bg);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}
#more-actions-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 200px;
    background-color: var(--content-bg-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    border: 1px solid var(--border-color);
    z-index: 100;
    padding: 8px;
}
#more-actions-dropdown.hidden { display: none; }
#more-actions-dropdown a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-color-primary);
    font-weight: 500;
}
#more-actions-dropdown a:hover {
    background-color: var(--hover-bg-color);
}

/* --- Nav Tabs --- */
.profile-nav-tabs {
    border-bottom: 1px solid var(--border-color);
    display: flex;
    margin-top: 15px; /* Space above the tabs */
    padding: 0 15px;
}
.profile-tab-link {
    padding: 15px 10px;
    font-weight: 600;
    color: var(--text-color-secondary);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    margin-bottom: -1px;
    flex: 1;
    text-align: center;
}
.profile-tab-link:hover {
    background-color: var(--hover-bg-color);
    color: var(--text-color-primary);
}
.profile-tab-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* --- Profile Content Feed --- */
.profile-content-area { padding: 20px 15px; }


/* Hide homepage content area on profile pages */
.profile-page-body #content-display-area {
    display: none !important;
}


/* Desktop-only overrides */
@media (min-width: 769px) {
    .profile-cover-photo { height: 250px; }
    .profile-details-bar { padding: 0 24px 20px 24px; }
    .profile-main-details { transform: translateY(-50px); margin-bottom: -40px; }
    .profile-page-picture { width: 140px; height: 140px; }
    .profile-user-info, .profile-action-bar, .profile-nav-tabs { padding: 0 24px; }
    .profile-content-area { padding: 20px 24px; }
    .profile-tab-link { flex: 0; padding: 15px 20px; }
}

/* --- Profile Page Bio Preview --- */
.profile-bio-preview {
    position: relative;
    max-height: 60px; /* Approx 3 lines of text */
    overflow: hidden;
    margin-bottom: 15px;
    cursor: pointer;
}
.profile-bio-preview p {
    color: var(--text-color-secondary);
    font-size: 15px;
    line-height: 1.4;
    margin: 0;
}
.bio-fade {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--content-bg-color);
    color: var(--primary-color);
    font-weight: 600;
    padding-left: 5px;
}

/* --- Profile Info Modal --- */
.profile-info-modal-content {
    max-width: 500px;
}
.profile-info-modal-body {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 10px; /* Space for scrollbar */
}
#profile-info-modal-header-content {
    display: flex;
    align-items: center;
    gap: 15px;
}
.profile-info-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
#profile-info-modal-name {
    margin: 0;
    font-size: 1.2rem;
}
#profile-info-modal-username {
    font-size: 0.9rem;
    color: var(--text-color-secondary);
}
.profile-info-section {
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
}
.profile-info-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.profile-info-section h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-color-primary);
}
.profile-info-section p {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-color-primary);
    white-space: pre-wrap; /* Respects line breaks in bio */
}
.profile-info-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.profile-info-links-list a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    word-break: break-all; /* Prevents long links from overflowing */
}
.profile-info-links-list a:hover {
    text-decoration: underline;
}

/* ========================================= */
/* == PROFILE PAGE ICON TAB STYLES        == */
/* ========================================= */

.profile-tab-link-icon {
    flex: 0 1 60px; /* Give icon tabs a smaller, fixed width */
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-tab-link-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--text-color-secondary);
    transition: stroke 0.2s ease-in-out;
}

.profile-tab-link-icon:hover svg {
    stroke: var(--text-color-primary);
}

.profile-tab-link-icon.active svg {
    stroke: var(--primary-color);
}


/* =======================================================
   == SETTINGS PAGE LAYOUT & NAV (Themed & Responsive)  ==
   ======================================================= */

/* --- Main Page Layout --- */
.settings-page {
    display: flex; /* Side-by-side on desktop */
    gap: 30px;
    max-width: 980px;
    margin: 0 auto;
}
.settings-nav {
    flex: 0 0 240px; /* Sidebar width on desktop */
    border-right: 1px solid var(--border-color); /* UPDATED */
    padding-right: 20px;
}
.settings-content {
    flex-grow: 1;
    padding: 10px;
}
.settings-pane h2,
#pane-title { /* Also target the title in the pane view */
    font-size: 22px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color); /* UPDATED */
    color: var(--text-color-primary); /* UPDATED */
}

/* --- Vertical Menu List --- */
.settings-nav-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 5px;
}
.settings-nav-header h2 {
    font-size: 24px;
    padding: 0;
    color: var(--text-color-primary); /* UPDATED */
}
.back-to-profile-btn {
    color: var(--text-color-primary); /* UPDATED */
}
.settings-menu-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.settings-nav-link {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    text-decoration: none;
    color: var(--text-color-primary); /* UPDATED */
    font-size: 16px;
    border-radius: 8px;
    font-weight: 500;
    border: 2px solid transparent;
}
.settings-nav-link:hover {
    background-color: var(--hover-bg-color); /* UPDATED */
}
.settings-nav-link.active {
    color: var(--primary-color); /* UPDATED */
    font-weight: 700;
    background-color: var(--primary-color-bg-light); /* UPDATED */
    border-color: var(--primary-color); /* UPDATED */
}
.settings-nav-link .nav-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--text-color-secondary); /* UPDATED */
}
.settings-nav-link.active .nav-icon,
.settings-nav-link:hover .nav-icon {
    color: var(--primary-color); /* UPDATED */
}

/* --- NEW: Responsive Styles for Mobile --- */
@media (max-width: 768px) {
    .settings-page {
        flex-direction: column; /* Stack the nav and content vertically */
        gap: 0;
    }
    .settings-nav {
        flex: 1 1 auto; /* Allow the nav to be full-width */
        width: 100%;
        border-right: none; /* Remove the side border on mobile */
        padding-right: 0;
    }
}



/* =========================== */
/* NEW Form Styles for Settings Page */
/* =========================== */

.settings-form .form-group {
    margin-bottom: 25px;
}

.settings-form .form-group-row {
    display: flex;
    flex-direction: column; /* Stack on mobile by default */
    gap: 20px;
}

.settings-form .form-group-avatar {
    flex-shrink: 0;
}
.settings-form .form-group-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #f0f2f5;
}

.settings-form .form-group-inputs {
    flex-grow: 1;
}

.settings-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 16px;
    color: var(--text-color-primary);
}


.settings-form input[type="text"],
.settings-form input[type="url"],
.settings-form input[type="email"],
.settings-form input[type="number"],
.settings-form input[type="password"],
.settings-form textarea,
.settings-form-select { /* ADDED */
    width: 100%;
    padding: 12px 15px; /* Increased padding */
    border: 1px solid var(--border-color); /* UPDATED */
    border-radius: 8px; /* Softer radius */
    font-size: 15px;
    background-color: var(--input-bg-color); /* UPDATED */
    color: var(--text-color-primary); /* UPDATED */
    transition: box-shadow 0.2s, border-color 0.2s;
}


.settings-form input[type="file"] {
    font-size: 14px;
}

.settings-form textarea {
    resize: vertical;
    min-height: 100px;
}


.settings-form small {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-color-secondary); /* UPDATED */
}


.settings-form .form-separator {
    border: none;
    border-top: 1px solid var(--border-color); /* UPDATED */
    margin: 30px 0;
}


.settings-form .form-actions {
    display: flex;
    justify-content: flex-start;
}



/* --- Profile Header Editor Styles --- */

.profile-header-editor {
    position: relative;
    margin-bottom: 80px; /* Provides space below the cover photo for the profile photo */
}

/* Container for the cover photo */
.cover-photo-container {
    position: relative;
    width: 100%;
    height: 220px;
    background-color: var(--hover-bg-color); /* UPDATED */
    border-radius: 12px; /* Increased radius */
    overflow: hidden;
}


.cover-photo-preview {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This makes the image cover the container without stretching */
}

/* "Change Cover" button styling */
.cover-photo-edit-button {
    position: absolute;
    bottom: 15px; /* Increased spacing */
    right: 15px;  /* Increased spacing */
    padding: 8px 12px;
    background-color: var(--overlay-bg-color); /* UPDATED */ 
    color: var(--primary-text-color); /* UPDATED */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500; /* Bolder text */
    transition: background-color 0.2s;
}


/* Add this new rule for the dark theme text color */
.dark-theme .cover-photo-edit-button {
    color: var(--primary-text-color);
    border: none;
}
.cover-photo-edit-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Container for the profile picture */

.profile-picture-container {
    position: absolute;
    bottom: -60px;
    left: 24px;
    width: 120px;
    height: 120px;
    cursor: pointer;
    border-radius: 50%;
    border: 4px solid var(--content-bg-color); /* UPDATED */
    background-color: var(--background-color); /* UPDATED */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
}


/* Styling for the preview image itself */
.profile-picture-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Add a little camera icon overlay on hover */
.profile-picture-container::after {
    content: '📷'; /* You can use a camera emoji or an SVG icon */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 24px;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.profile-picture-container:hover::after {
    opacity: 1;
}

/* --- NEW: Responsive Adjustments for Settings Page --- */
@media (min-width: 600px) {
    .settings-form .form-group-row {
        flex-direction: row; /* Side-by-side on larger screens */
    }
}

@media (max-width: 768px) {
    .cover-photo-container {
        height: 160px; /* Shorter cover photo on mobile */
    }
    .profile-picture-container {
        width: 100px; /* Smaller avatar on mobile */
        height: 100px;
        bottom: -50px;
        left: 15px;
    }
    .profile-header-editor {
        margin-bottom: 60px; /* Adjust space below */
    }
}




/* --- Profile Page Layout Fix --- */

/* This is the main container for the picture and the text */
.profile-main-details {
    display: flex; /* This is the key! It arranges children side-by-side. */
    align-items: center; /* This vertically aligns the picture and the text beautifully. */
    gap: 20px;       /* This adds a nice space between the picture and the text. */
}

/* This prevents the profile picture from getting squished on smaller screens */
.profile-picture-container {
    flex-shrink: 0; 
}


/* --- Settings Page Back Button Styles --- */

/* This new container will align the back button and "Settings" title */
.settings-nav-header {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between the button and the title */
    padding: 10px 10px 10px 5px; /* Adjust padding as needed */
}

/* This styles the back button itself */
.back-to-profile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%; /* Makes it a circle */
    color: var(--text-color-primary); /* UPDATED */
    transition: background-color 0.2s ease;
    background: transparent; /* ADDED for consistency */
    border: none; /* ADDED for consistency */
    cursor: pointer; /* ADDED for consistency */
}

.back-to-profile-btn:hover {
    background-color: var(--hover-bg-color); /* UPDATED */ /* A nice hover effect */
}

.back-to-profile-btn svg {
    width: 30px;
    height: 30px;
}

/* We can remove some padding from the main h2 since it's now in a container */
.settings-nav h2 {
    padding: 0;
}




/* Add these new rules to style.css */

/* This removes the default padding but ONLY on the settings page */
main.settings-main {
    padding: 0;
}

/* This adds back a bit of space around your settings content */
.settings-page {
    padding: 0 15px 80px 15px; /* TOP, RIGHT, BOTTOM, LEFT */
}



/* Add this to style.css */
.settings-pane {
    /* This ensures even empty panes can be swiped */
    min-height: 300px; 
}




/* ========================================= */
/* == SETTINGS PAGE TAB ANIMATION         == */
/* ========================================= */

/* 1. First, define the animation */
@keyframes fadeInPane {
  from {
    opacity: 0;
    transform: translateY(15px); /* Start slightly lower */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. Then, find your existing rule for .settings-pane.active */
.settings-pane.active {
    display: block;
    /* Add this line to apply the animation */
    animation: fadeInPane 0.3s ease-out forwards;
}











.settings-form-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);      /* UPDATED */
    border-radius: 6px;
    font-size: 15px;    
    background-color: var(--input-bg-color);  /* UPDATED */
    color: var(--text-color-primary);           /* ADDED */
    height: 41px; /* Match height of other inputs */
}



/* ========================================= */
/* == RESPONSIVE SETTINGS PAGE STYLES   == */
/* ========================================= */

/* This code only applies to screens 768px or narrower (phones) */
@media (max-width: 768px) {

    /* 1. Stack the main layout vertically */
    .settings-page {
        flex-direction: column;
        gap: 0; /* Remove the gap for a tighter mobile layout */
    }

    /* 2. Style the navigation area */
    .settings-nav {
        flex: none; /* Remove the fixed width */
        width: 100%;
        border-right: none; /* Remove the side border */
        padding-right: 0;
        border-bottom: 1px solid var(--border-color); /* UPDATED */
    }
    
    .settings-nav-header {
    padding: 0 15px 5px 15px; /* Top, Right, Bottom, Left */
    }

    /* 5. Adjust the content area */
    .settings-content {
        padding: 15px;
    }
    
    .creator-hub-nav, .analytics-sub-nav {
        padding: 0 15px; /* Add padding to align with the rest of the mobile layout */
    }
}



/* =======================================================
   == SETTINGS DYNAMIC INPUTS (Themed)                  ==
   ======================================================= */

.username-group {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color); /* UPDATED */
    border-radius: 8px; /* Matched to other inputs */
    background-color: var(--input-bg-color); /* UPDATED */
    transition: box-shadow 0.2s, border-color 0.2s;
}
/* ADDED: Add focus state for the whole group */
.username-group:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-focus);
}
.username-handle-prefix {
    padding: 10px 0 10px 12px;
    color: var(--text-color-secondary); /* UPDATED */
    font-size: 15px;
}
.username-group input {
    border: none;
    background-color: transparent;
    padding: 12px; /* Matched to other inputs */
}
.dynamic-input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.dynamic-input-group input {
    flex-grow: 1;
}
.remove-input-btn {
    flex-shrink: 0;
    width: 42px; /* Matched to input height */
    height: 42px; /* Matched to input height */
    border: 1px solid var(--border-color); /* UPDATED */
    background-color: var(--hover-bg-color); /* UPDATED */
    color: var(--text-color-secondary); /* UPDATED */
    border-radius: 8px; /* Matched to other inputs */
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    transition: background-color 0.2s, border-color 0.2s;
}
.remove-input-btn:hover {
    background-color: var(--secondary-button-bg);
    border-color: var(--text-color-secondary);
}
.add-more-btn {
    background: none;
    border: 1px dashed var(--primary-color); /* UPDATED */
    color: var(--primary-color); /* UPDATED */
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    margin-top: 10px;
}

/* --- Dynamic Input UX Improvement --- */
.dynamic-input-group:only-child .remove-input-btn {
    display: none;
}

/* --- Settings Pane Visibility Rules --- */
.settings-pane {
    display: none;
}
.settings-pane.active {
    display: block;
}


/* =======================================================
   == DASHBOARD & ANALYTICS (Themed & Responsive)       ==
   ======================================================= */

/* --- Main Dashboard Styles --- */
.settings-subtitle {
    font-size: 18px;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color); /* UPDATED */
    color: var(--text-color-primary); /* ADDED */
}
.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}
.stat-card {
    background-color: var(--content-bg-color); /* UPDATED */
    border: 1px solid var(--border-color); /* UPDATED */
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px var(--shadow-color); /* UPDATED */
}
.stat-card.active {
    border-color: var(--primary-color); /* UPDATED */
    box-shadow: 0 0 0 3px var(--primary-color-focus); /* UPDATED */
    transform: translateY(-3px);
}
.stat-card .stat-value {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-color); /* UPDATED */
}
.stat-card .stat-label {
    display: block;
    font-size: 14px;
    color: var(--text-color-secondary); /* UPDATED */
    margin-top: 5px;
}

.stat-card .stat-change {
    font-size: 13px;
    font-weight: 500;
}
.stat-change.positive { color: #2a9d8f; } /* Unchanged */
.stat-change.negative { color: #e76f51; } /* Unchanged */

/* --- Tab Navigation --- */
.creator-hub-nav, .analytics-sub-nav {
    display: flex;
    border-bottom: 1px solid var(--border-color); /* UPDATED */
    margin-bottom: 20px;
}
.hub-nav-link, .sub-nav-link {
    padding: 10px 20px;
    text-decoration: none;
    color: var(--text-color-secondary); /* UPDATED */
    font-weight: 600;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap; /* NEW: Prevents text from wrapping */
}
.hub-nav-link.active, .sub-nav-link.active {
    color: var(--primary-color); /* UPDATED */
    border-bottom-color: var(--primary-color); /* UPDATED */
}
.hub-pane, .analytics-pane {
    display: none;
}
.hub-pane.active, .analytics-pane.active {
    display: block;
}

/* --- Chart & Date Picker --- */
.chart-container {
    margin-top: 30px;
    padding: 20px;
    border: 1px solid var(--border-color); /* UPDATED */
    border-radius: 8px;
    background-color: var(--content-bg-color); /* UPDATED */
}
.analytics-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}
.date-range-picker {
    position: relative;
}
.date-range-button {
    background-color: var(--content-bg-color); /* UPDATED */
    border: 1px solid var(--border-color); /* UPDATED */
    color: var(--text-color-primary); /* ADDED */
    border-radius: 6px;
    padding: 8px 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.date-range-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 5px;
    background-color: var(--content-bg-color); /* UPDATED */
    border: 1px solid var(--border-color); /* UPDATED */
    border-radius: 6px;
    box-shadow: 0 4px 12px var(--shadow-color); /* UPDATED */
    width: 200px;
    z-index: 10;
    padding: 5px;
}
.date-range-dropdown.hidden { display: none; }
.date-range-option {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--text-color-primary); /* UPDATED */
    border-radius: 4px;
}
.date-range-option:hover {
    background-color: var(--hover-bg-color); /* UPDATED */
}
.date-range-option.active {
    background-color: var(--primary-color-bg-light); /* UPDATED */
    color: var(--primary-color); /* UPDATED */
    font-weight: 700;
}
.flatpickr-input-hidden {
    position: absolute;
    opacity: 0; 
    pointer-events: none;
    width: 0; height: 0;
}

/* --- Analytics Table --- */
.content-table-container {
    border: 1px solid var(--border-color); /* UPDATED */
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--content-bg-color); /* UPDATED */
}
.analytics-table {
    width: 100%;
    border-collapse: collapse;
}
.analytics-table th,
.analytics-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color); /* UPDATED */
    color: var(--text-color-primary); /* ADDED */
}
.analytics-table th {
    background-color: var(--background-color); /* UPDATED */
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-color-secondary); /* UPDATED */
}
.analytics-table tbody tr:last-child td {
    border-bottom: none;
}
.analytics-table tbody tr:hover {
    background-color: var(--hover-bg-color); /* UPDATED */
}
.content-table-info {
    display: flex;
    align-items: center;
    gap: 15px;
}
.content-table-thumb {
    width: 80px;
    height: 45px;
    object-fit: cover;
    border-radius: 4px;
    background-color: var(--hover-bg-color); /* UPDATED */
}
.content-table-title {
    font-weight: 600;
}

/* --- NEW: Responsive Nav Bars for Mobile --- */
@media (max-width: 768px) {
    .creator-hub-nav, .analytics-sub-nav {
        overflow-x: auto; /* This makes the bar horizontally scrollable */
        /* These rules hide the scrollbar itself for a cleaner look */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .creator-hub-nav::-webkit-scrollbar,
    .analytics-sub-nav::-webkit-scrollbar {
        display: none;
    }
}



/* =======================================================
   == ACTION BUTTONS (Themed & Polished)                ==
   ======================================================= */

/* --- Base style for ALL action buttons --- */
.action-button {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px; /* A little more space */
    color: var(--primary-color); /* UPDATED */
    font-weight: 600;
    padding: 6px; /* Increased padding for easier tapping */
    border-radius: 6px; /* Softer rounding */
    transition: background-color 0.2s ease; 
}

/* Base hover for ALL action buttons */
.action-button:hover {
    background-color: var(--hover-bg-color); /* UPDATED */
}

/* Base style for ALL icons inside the buttons */
.action-button svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}


/* --- Special styles ONLY for the Like button --- */

/* Add the "pop" animation */
button.like-btn {
    transition: transform 0.1s ease;
}
button.like-btn:active {
    transform: scale(0.9);
}

/* When the button has the 'liked' class... */
button.like-btn.liked {
    color: var(--primary-color); /* Keeps the color blue */
}
/* ...fill the heart icon with color. */
button.like-btn.liked svg {
    fill: currentColor;
}


/* In style.css */

/* --- Responsive Action Buttons for Small Screens --- */
@media (max-width: 400px) {
    /* On screens 400px or narrower, hide the text labels */
    .content-card-actions .action-button span {
        display: none;
    }

    /* Adjust spacing to make the icons fit better */
    .content-card-actions {
        /* Reduce the gap between the icons */
        gap: 8px;
        /* Evenly distribute the icons across the available space */
        justify-content: space-around;
    }
    
    .action-button {
        padding: 8px; /* Make the tap area a little bigger for the icons */
    }
}

/* =============================================== */
/* == DANGER & DELETE BUTTONS                   == */
/* =============================================== */

.action-btn-delete {
    padding: 6px 12px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    color: var(--primary-text-color); /* UPDATED */
    background-color: var(--danger-color); /* UPDATED */
    border: none; /* ADDED */
    cursor: pointer; /* ADDED */
    transition: filter 0.2s;
}

.action-btn-delete:hover {
    filter: brightness(1.1); /* UPDATED */
}


/* KEEP THIS RULE */
.modal-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}



/* --- Mobile: Full-Bleed Card Style --- */
/* On mobile, this removes the card's side borders for a modern look */
@media (max-width: 768px) {
    .scrollet-card-new {
        border-left: none;
        border-right: none;
        border-radius: 0;
    }
}

/* --- Right Sidebar Theming (for Desktop) --- */
.right-sidebar-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.sidebar-module {
    background-color: var(--content-bg-color); /* UPDATED */
    border: 1px solid var(--border-color); /* UPDATED */
    border-radius: 8px;
    padding: 15px;
}
.module-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color); /* UPDATED */
    color: var(--text-color-primary); /* ADDED */
}


/* =======================================================
== FINAL APP SHELL & DESKTOP LAYOUT ENGINE         ==
======================================================= */

/* --- Mobile-Only App Shell (768px and narrower) --- */
@media (max-width: 768px) {
    /* Prevent the whole page from scrolling on mobile */
    html, body {
        height: 100svh;
        overflow: hidden;
    }

    /* Make our main site container the full-height flexbox shell */
    .site-container {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        position: relative;
    }

    header {
        flex-shrink: 0;
        padding: 0 8px; /* Mobile-specific padding */
    }

    /* Make the main content area the ONLY scrollable part */
    main {
        flex-grow: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 70px; /* Space for the mobile nav */
    }

    /* --- Mobile Nav Styles --- */
    .mobile-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background-color: var(--content-bg-color);
        border-top: 1px solid var(--border-color);
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 1000;
        box-shadow: 0 -2px 10px var(--shadow-color);
        flex-shrink: 0;
    }

    .mobile-nav-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        min-width: 0;
        text-decoration: none;
        color: var(--text-color-secondary);
        font-size: 10px;
        padding: 4px 0;
        gap: 2px;
    }
    .mobile-nav-link.active { color: var(--primary-color); }
    .mobile-nav-link svg { width: 28px; height: 28px; margin-bottom: 2px; flex-shrink: 0; }

    .mobile-upload-btn {
        background-color: var(--primary-color);
        color: var(--primary-text-color);
        border: none; border-radius: 50%; width: 50px; height: 50px;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 12px var(--primary-color-shadow);
        cursor: pointer; margin: 0 5px; transform: translateY(-10px); flex-shrink: 0;
    }
    .mobile-upload-btn svg { width: 28px; height: 28px; }

    #sidebar-container {
        display: none; /* Hide desktop sidebar on mobile */
    }
}



/* In style.css, REPLACE your existing @media (min-width: 769px) block with this */

/* --- Desktop Layout (769px and wider) --- */
@media (min-width: 769px) {
    html, body {
        height: auto;
        overflow: auto;
        background-color: var(--background-color);
    }
    .mobile-nav {
        display: none;
    }

    /* --- FINAL, STABLE HEADER FIX --- */
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        padding: 0 24px;
        height: 60px;
    }
    .header-left, .header-right {
        flex-shrink: 0;
    }
    .header-center {
        flex-grow: 1;
        min-width: 0; /* This is the key part that lets the search bar shrink */
        display: flex;
        justify-content: center;
    }

    /* This rule for the site container is correct and makes it full-width */
    /* * FIND & MODIFY your existing .site-container rule
     */
    .site-container {
        display: grid;
        
        /* OLD: grid-template-columns: 240px 1fr; */
        
        /* NEW 3-COLUMN LAYOUT */
        /* [Sidebar] [Main Content (Flexible)] [Right Rail] */
        grid-template-columns: 240px 1fr 340px;
        gap: 30px; /* Adds space between the columns */
        
        /* This centers the whole 3-column layout on very wide screens */
        max-width: 1700px; 
        margin: 0 auto;
        
        padding-top: 60px;
    }

    /* * FIND & MODIFY your existing #content-display-area rule
     */
    #content-display-area {
        max-width: 680px;
        /* OLD: margin: 0 auto; (This centered it in the middle) */
        /* NEW: Remove margin to align it left in its column */
        margin: 0;
    }
    
    /* * ADD this NEW rule for the right rail
     */
    #desktop-right-rail {
        display: block; /* Show it on desktop */
        position: sticky;
        top: 80px; /* 60px header + 20px padding from <main> */
        height: calc(100vh - 80px); /* Makes it fill the height */
        /* You can add this line to see it clearly: */
        /* border-left: 1px solid var(--border-color); */
    }

}


/* ADD THIS NEW RULE GLOBALLY (right after the media query block above) */

.content-card-actions .action-button {
    flex: 1 1 0;
    justify-content: center;
}



/* ========================================= */
/* == ICON & LOGO SIZING FIX ("Toshea" v2) = */
/* ========================================= */

/* --- 1. Header Logo Fix --- */
/* This makes the main logo in the top header larger and more visible. */
header .logo {
    height: 40px;/* Increased from 36px */
    width: auto;
}



/* =======================================================
   == NOTIFICATION BUTTON (Themed & Responsive)         ==
   ======================================================= */

/* --- Main button style --- */
#notification-trigger-btn {
    background: transparent;
    border: 2px solid var(--primary-color);         /* UPDATED */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);                    /* UPDATED */
    transition: all 0.2s ease;
}

/* --- Hover and Active States --- */
#notification-trigger-btn:hover,
#notification-trigger-btn.active {
    background-color: var(--primary-color);         /* UPDATED */
    color: var(--primary-text-color);               /* UPDATED */
}

/* --- Icon size --- */
#notification-trigger-btn svg {
    width: 22px;
    height: 22px;
}

/* --- Responsive Switching Logic (Unchanged but kept for completeness) --- */

/* On DESKTOP screens (anything wider than 768px)... */
@media (min-width: 769px) {
    #upload-trigger-container {
        display: block;
    }
}

/* On MOBILE screens (anything 768px or narrower)... */
@media (max-width: 768px) {
    #upload-trigger-container {
        display: none;
    }
    #notification-trigger-btn {
        display: flex;
    }
}




/* ========================================= */
/* == NEW: MPESA TIP SHEET STYLES ======== */
/* ========================================= */

/* --- M-PESA TIP SHEET --- */
.tip-sheet-body {
    padding: 15px 20px;
    text-align: center;
}
.tip-sheet-view {
    display: none;
}
.tip-sheet-view.active {
    display: block;
    animation: fadeInPane 0.3s ease-out;
}
.tip-creator-info {
    margin-bottom: 20px;
}
.tip-creator-info img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 10px;
}
.tip-creator-info p {
    font-size: 16px;
    color: var(--text-color-primary);
}
.tip-amounts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}
.tip-amount-btn {
    padding: 12px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    color: var(--text-color-primary);
    transition: all 0.2s ease;
}
.tip-amount-btn:hover {
    border-color: var(--primary-color);
    background-color: var(--primary-color-bg-light);
}
.tip-amount-btn.selected {
    background-color: var(--primary-color);
    color: var(--primary-text-color);
    border-color: var(--primary-color);
}
.tip-custom-amount {
    display: flex;
    gap: 10px;
}
#tip-custom-amount-input, #tip-phone-number-input {
    flex-grow: 1;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 16px;
    background-color: var(--input-bg-color);
    color: var(--text-color-primary);
}
.tip-action-btn {
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    background-color: var(--primary-color);
    color: var(--primary-text-color);
}
#tip-next-btn {
    flex-shrink: 0;
    width: auto;
    padding: 12px 20px;
    margin-top: 0;
}
.tip-action-btn:disabled {
    background-color: var(--secondary-button-bg);
    color: var(--text-color-secondary);
    cursor: not-allowed;
}
.tip-confirm-details {
    margin-bottom: 20px;
    font-size: 16px;
}
.tip-result-icon {
    width: 80px;
    height: 80px;
    margin: 10px auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tip-result-icon.success svg {
    color: #2ecc71;
}
.tip-result-icon.fail svg {
    color: var(--danger-color);
}
#tip-view-result h4 {
    font-size: 22px;
    margin-bottom: 10px;
}
#tip-view-result p {
    color: var(--text-color-secondary);
    margin-bottom: 20px;
}


/* =======================================================
   == COMMENT BOTTOM SHEET (Themed & Responsive)        ==
   ======================================================= */

.sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-bg-color);
    z-index: 2000;
    display: flex;
    align-items: flex-end; /* Aligns sheet to the bottom */
    opacity: 1;
    transition: opacity 0.3s ease-in-out, visibility 0.3s;
}
.sheet-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* In your CSS file */

.comment-sheet {
    background-color: var(--content-bg-color);
    width: 100%;
    max-height: 85vh;
    /* ADD THIS LINE to make the sheet taller when empty */
    min-height: 40vh; 
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -5px 20px var(--shadow-color);
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
}

.sheet-overlay.hidden .comment-sheet {
    transform: translateY(100%); /* Hides the sheet by moving it down */
}

/* --- Sheet Header --- */
.sheet-header {
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    flex-shrink: 0;
}
.sheet-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color-primary);
}
.sheet-drag-handle {
    width: 40px;
    height: 5px;
    background-color: var(--border-color);
    border-radius: 3px;
    margin: 0 auto 8px auto;
}
.close-sheet-btn {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    font-size: 28px;
    background: none;
    border: none;
    color: var(--text-color-secondary);
    cursor: pointer;
}

/* --- New Comment Item Layout --- */
.comments-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    /* ADD THIS LINE to give the form space when the keyboard appears */
    padding-bottom: 50px; 
}

.comment-item {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
}
.comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}
.comment-content {
    flex-grow: 1;
}
.comment-body {
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 8px;
}
.comment-author-link {
    font-weight: 600;
    color: var(--text-color-primary);
    text-decoration: none;
    margin-right: 6px;
}
.comment-author-link:hover {
    text-decoration: underline;
}
.comment-text {
    color: var(--text-color-primary);
}
.comment-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}
.comment-action-btn {
    background: none;
    border: none;
    color: var(--text-color-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.comment-like-action {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto; /* Pushes the like button to the far right */
}
.comment-like-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color-secondary);
}
.comment-like-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color-secondary);
    padding: 0;
}
.comment-like-btn .like-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
}
.comment-like-btn.liked {
    color: var(--primary-color); /* Blue color for liked */
}
.comment-like-btn.liked .like-icon {
    fill: currentColor;
}

/* --- Comment Form --- */
.comment-form-container textarea {
    height: auto;
    max-height: 100px;
}

.comment-form-container {
    padding: 10px 15px;
    border-top: 1px solid var(--border-color);
    background-color: var(--background-color);
    flex-shrink: 0;
}

#comment-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

#comment-input {
    flex-grow: 1;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg-color);
    color: var(--text-color-primary);
    border-radius: 20px;
    padding: 8px 15px;
    font-size: 15px;
    resize: none;
    height: 38px;
    font-family: inherit; /* Ensures it uses the same font as the site */
    transition: all 0.2s ease;
}

#comment-input::placeholder {
    color: var(--text-color-secondary);
}

#comment-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-focus);
}

#post-comment-btn {
    background-color: var(--primary-color);
    color: var(--primary-text-color);
    border: none;
    border-radius: 20px;
    font-weight: 600;
    padding: 0 15px;
    height: 38px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#post-comment-btn:hover {
    background-color: var(--primary-color-dark);
}

/* NEW: Style for when the button is disabled during posting */
#post-comment-btn:disabled {
    background-color: var(--secondary-button-bg);
    cursor: not-allowed;
}

/* --- New Styles for Comment Replies --- */
.reply-form {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    animation: fadeIn 0.3s ease;
}

.reply-form textarea {
    flex-grow: 1;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 8px 15px;
    font-size: 14px;
    resize: none;
    height: 38px;
}

.reply-form button {
    background-color: var(--primary-color);
    color: var(--primary-text-color);
    border: none;
    border-radius: 20px;
    font-weight: 600;
    padding: 0 15px;
    cursor: pointer;
    font-size: 14px;
}


/* --- Styles for Nested Replies & "View Replies" Button --- */
.replies-container {
    margin-top: 15px;
    padding-left: 15px;
    border-left: 2px solid var(--border-color);
}
.replies-container.hidden {
    display: none;
}
.view-replies-btn {
    background: none;
    border: none;
    color: var(--text-color-secondary);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 0;
    font-size: 14px;
}
.view-replies-btn .reply-line {
    width: 20px;
    height: 2px;
    background-color: var(--border-color);
}

/* ========================================= */
/* == NEW: SMART REPLY STYLES ============== */
/* ========================================= */

.smart-reply-container {
    padding: 10px 20px;
    border-top: 1px solid #dbdbdb;
    background-color: #f9f9f9;
    display: flex;
    gap: 10px;
    overflow-x: auto; /* Allows horizontal scrolling if many replies */
    /* Hide scrollbar for a cleaner look */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.smart-reply-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}

.smart-reply-btn {
    background-color: #e4e6eb;
    color: #050505;
    border: none;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0; /* Prevents buttons from shrinking */
    transition: background-color 0.2s ease;
}

.smart-reply-btn:hover {
    background-color: #d8dadf;
}


/* ========================================= */
/* == TIMESTAMP STYLES                    == */
/* ========================================= */

.timestamp {
    font-size: 13px;
    color: var(--text-color-secondary);
    margin: 0 8px; /* Adds a little space around it */
    white-space: nowrap; /* Prevents it from breaking into two lines */
}

/* For comments, we remove the side margins to fit better */
.comment-actions .timestamp {
    margin: 0;
}



.login-prompt-btn {
    width: 100%;
    background-color: var(--primary-color); /* UPDATED */
    color: var(--primary-text-color);       /* UPDATED */
    border: none;
    padding: 10px 15px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.login-prompt-btn:hover {
    background-color: var(--primary-color-dark); /* UPDATED */
}



/* --- Custom Share Sheet --- */
.share-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--content-bg-color);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -5px 20px var(--shadow-color);
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 2400; /* Above other modals */
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

#share-modal-overlay.hidden .share-sheet {
    transform: translateY(100%);
}
#share-modal-overlay:not(.hidden) .share-sheet {
    transform: translateY(0);
}

.share-sheet .sheet-header {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    flex-shrink: 0;
}

.share-sheet .sheet-body {
    padding: 20px;
    overflow-y: auto;
}

.share-preview-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    min-height: 150px;
}
#share-preview-container img {
    max-width: 60%;
    max-height: 250px;
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-color);
}

.share-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
    text-align: center;
}
.share-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-size: 12px;
    color: var(--text-color-primary);
    background: none;
    border: none;
    cursor: pointer;
}
.share-action-btn .icon-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--hover-bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.share-action-btn svg {
    width: 24px;
    height: 24px;
    color: var(--text-color-primary);
}

.share-copy-link-container {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}
#share-link-input {
    flex-grow: 1;
    border: none;
    padding: 10px;
    background-color: var(--background-color);
    color: var(--text-color-secondary);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#copy-share-link-btn {
    flex-shrink: 0;
    border: none;
    background-color: var(--secondary-button-bg);
    color: var(--secondary-button-text);
    padding: 0 20px;
    font-weight: 600;
    cursor: pointer;
}

/* In style.css */

.share-loader-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.share-loader-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color-secondary);
}

/* =======================================================
   == MASTER BLUEPRINT FOR ALL CONTENT CARDS (Themed)   ==
   ======================================================= */

.feed-card {
    background-color: var(--content-bg-color); /* UPDATED */
    border: 1px solid var(--border-color);   /* UPDATED */
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    position: relative; 
    margin-bottom: 12px; /* ADDED: Consistent spacing */
}

.feed-card.is-active-menu {
    z-index: 20;
}

/* --- Card Header --- */

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    position: relative; /* This is crucial for positioning child elements */
    gap: 10px; /* Provides space between elements */
}

.card-header .author-info {
    flex-grow: 1; /* Allows the author info to take up available space */
    display: flex;
    align-items: center;
    gap: 12px;
}

.card-header .author-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.author-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--hover-bg-color); /* UPDATED */
}
.author-name {
    font-weight: 600;
    color: var(--text-color-primary); /* ADDED */
}

/* --- Card Body --- */
.card-body {
    overflow: hidden;
}
.card-media {
    width: 100%;
    height: auto;
    display: block;
    max-height: 600px;
    object-fit: cover;
}

/* --- Card Footer --- */
.card-footer {
    padding: 12px 15px;
}
.content-card-title {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: var(--text-color-primary); /* ADDED */
}
.content-card-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}



/* =======================================================
   == SCROLLET POST TEXT ANIMATIONS (Themed & Corrected)     ==
   ======================================================= */

/* --- Pulse Fade Animation --- */
@keyframes pulseFade {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.animate-fade-in {
  animation: pulseFade 3s ease-in-out infinite;
}

/* --- Looping Typewriter Animation --- */
@keyframes looping-typewriter {
  0%, 10%   { width: 0; }
  45%, 55%  { width: 100%; }
  90%, 100% { width: 0; }
}
@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: var(--primary-text-color); } /* UPDATED */
}
.animate-typewriter {
    /* This ensures the text container behaves correctly */
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: bottom;
    /* The blinking cursor */
    border-right: 3px solid var(--primary-text-color); /* UPDATED */
    /* The animations */
    animation: 
        looping-typewriter 5s steps(40, end) infinite,
        blink-caret .75s step-end infinite;
}

/* --- Continuous Bounce Animation --- */
@keyframes continuousBounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-15px); }
  60% { transform: translateY(-7px); }
}
.animate-bounce {
  animation: continuousBounce 2.5s infinite;
}

/* --- Slide Up and Down Animation --- */
@keyframes slideInUp {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.animate-slide-up {
  animation: slideInUp 2s ease-in-out infinite alternate;
}

/* Disabled animation buttons*/
.animation-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--secondary-button-bg) !important;
    border-color: var(--border-color) !important;
}
/* Fix for animated text containers 
.scrollet-text-wrapper {
    min-height: 3em; /* Minimum height for 2 lines of text 
    overflow: hidden;
    position: relative;
}

.animate-typewriter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    white-space: pre-wrap;
}

/* Typewriter animation 
@keyframes typewriter {
    from { width: 0 }
    to { width: 100% }
}

.animate-typewriter {
    animation: typewriter 3s steps(40) forwards;
    border-right: 2px solid #000; /* Optional cursor effect 
    animation: 
    looping-typewriter 5s steps(40, end) infinite,
    blink-caret .75s step-end infinite;
}*/


/* =======================================================
   == DEFINITIVE "MORE OPTIONS" MENU STYLES (V-FINAL)   ==
   ======================================================= */

/* --- Main container for the button --- */
.card-more-options-container {
    position: relative;
}

/* --- The three-dots button --- */
.more-options-btn {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-color-secondary);
    transition: background-color 0.2s ease;
}
.more-options-btn:hover {
    background-color: var(--hover-bg-color);
}
.more-options-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.footer-more-options {
    margin-left: auto;
}

/* --- The Dropdown Panel --- */
/* This is now positioned relative to the entire window */
.more-options-dropdown {
    position: fixed; /* This is the key change */
    width: 220px;
    background-color: var(--content-bg-color);
    border-radius: 8px;
    box-shadow: 0 5px 15px var(--shadow-color);
    border: 1px solid var(--border-color);
    z-index: 2500; /* A high z-index to appear over everything */
    padding: 8px;
    transition: opacity 0.2s, transform 0.2s;
}

/* We use a class to hide it now, not the .hidden class */
.more-options-dropdown:not(.is-active) {
    display: none;
}

/* --- The Links Inside the Dropdown (styles are unchanged but included for completeness) --- */
.dropdown-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-color-primary);
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
}
.dropdown-option:hover {
    background-color: var(--hover-bg-color);
}
.dropdown-option .dropdown-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--text-color-secondary);
}
.dropdown-option:hover .dropdown-icon,
.dropdown-option.active .dropdown-icon {
    color: var(--primary-color);
}
.dropdown-option.active {
    background-color: var(--primary-color-bg-light);
    color: var(--primary-color);
    font-weight: 600;
}

/* --- NEW: Responsive Adjustments for Mobile --- */

@media (max-width: 768px) {
    .more-options-dropdown {
        width: 220px; /* Make it slightly narrower on mobile */
    }
    .dropdown-option {
        font-size: 14px; /* Slightly smaller font on mobile */
        padding: 9px;
    }
}


/* ========================================= */
/* == SAVE SUB-MENU STYLES                == */
/* ========================================= */

/* This uses the same styles as the main dropdown for consistency */
.save-sub-menu {
    position: fixed; 
    width: 180px;
    background-color: var(--content-bg-color);
    border-radius: 8px;
    box-shadow: 0 5px 15px var(--shadow-color);
    border: 1px solid var(--border-color);
    z-index: 2501; /* Higher than the main dropdown */
    padding: 8px;
    transition: opacity 0.2s, transform 0.2s;
}

.save-sub-menu:not(.is-active) {
    display: none;
}


/* --- Repost Banner Styles --- */
.repost-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color-secondary);
    background-color: var(--background-color);
}

.repost-banner svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.repost-banner a {
    color: inherit;
    text-decoration: none;
}

.repost-banner a:hover {
    text-decoration: underline;
}

/* =======================================================
   == ALL MODALS (Playlist, etc.) - Themed & Responsive ==
   ======================================================= */

/* --- The Main Overlay & Content Box --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-bg-color); /* UPDATED */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
    backdrop-filter: blur(4px); /* ADDED */
    -webkit-backdrop-filter: blur(4px); /* ADDED */
}
.modal-overlay.hidden {
    display: none;
}
.modal-content {
    background-color: var(--content-bg-color); /* UPDATED */
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 5px 15px var(--shadow-color); /* UPDATED */
    width: 100%;
    max-width: 450px; /* Made slightly smaller */
    position: relative;
    animation: slide-down 0.3s ease-out;
}
@keyframes slide-down {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* --- Modal Header --- */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color); /* UPDATED */
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-color-primary); /* ADDED */
}
.close-modal-btn {
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-color-secondary); /* UPDATED */
}

/* --- Playlist Specific Styles --- */
.playlist-list-container {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--border-color); /* UPDATED */
    border-radius: 8px;
}
.playlist-list-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color); /* UPDATED */
    cursor: pointer;
    color: var(--text-color-primary); /* ADDED */
}
.playlist-list-item:last-child {
    border-bottom: none;
}
.playlist-list-item label {
    flex-grow: 1; /* Makes the whole row clickable */
    cursor: pointer;
}
.playlist-list-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 15px;
    flex-shrink: 0;
}
.create-playlist-form {
    display: flex;
    gap: 10px;
}
.create-playlist-form input {
    flex-grow: 1;
    /* Reusing styles from settings form for consistency */
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 15px;
    background-color: var(--input-bg-color);
    color: var(--text-color-primary);
}
.create-playlist-form button {
    /* Reusing primary button styles */
    background-color: var(--primary-color);
    color: var(--primary-text-color);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    padding: 10px 15px;
    cursor: pointer;
}

/* --- Modal Footer --- */
.modal-footer {
    display: flex;
    justify-content: flex-end; /* Aligned to the right */
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--border-color); /* UPDATED */
}
.done-btn {
    background-color: var(--primary-color); /* UPDATED */
    color: var(--primary-text-color);       /* UPDATED */
    font-weight: bold;
    border: none;
    border-radius: 20px;
    padding: 10px 24px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s;
}
.done-btn:hover {
    background-color: var(--primary-color-dark); /* ADDED */
}



/* =======================================================
   == "YOU" PAGE GRIDS (Likes, Playlists, etc.) - THEMED ==
   ======================================================= */

/* --- Main Grid for all content sections --- */
.history-grid {
    display: grid;
    /* On mobile, start with 2 columns */
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* --- The Card Itself --- */
.history-item-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    overflow: hidden;
    position: relative; /* For the overlay */
    aspect-ratio: 2 / 3; /* Tall, vertical card shape */
    background-color: var(--hover-bg-color); /* Fallback color */
    box-shadow: 0 2px 8px var(--shadow-color);
    transition: transform 0.2s ease;
}
.history-item-card:hover {
    transform: scale(1.03);
}
.history-item-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- The Text Overlay on Cards --- */
.playlist-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* UPDATED: Gradient now uses theme variables for a richer look */
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
    color: var(--primary-text-color); /* UPDATED */
    padding: 20px 10px 10px 10px;
    text-align: left;
}
.playlist-card-overlay h4 {
    margin: 0 0 5px 0;
    font-size: 1rem;
    font-weight: 600;
}
.playlist-card-overlay span {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* --- NEW: Responsive Adjustments for Larger Screens --- */
@media (min-width: 600px) {
    .history-grid {
        /* Show 3 columns on small tablets */
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}
@media (min-width: 961px) {
    .history-grid {
        /* Show 4-5 columns on desktops */
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}


/* =======================================================
   == SEARCH PAGE STYLES (Themed & Responsive)          ==
   ======================================================= */

main.search-page-main {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 0 20px 0; /* Adjusted padding */
}
.search-results-header {
    margin: 0 15px 20px 15px; /* Add horizontal padding */
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color); /* UPDATED */
    color: var(--text-color-primary); /* ADDED */
}

/* --- Filter Bar --- */
.filter-bar-container {
    padding: 0 15px 15px 15px; /* Add horizontal padding */
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.filter-bar-container::-webkit-scrollbar {
    display: none;
}
.filter-chip {
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    background-color: var(--secondary-button-bg); /* UPDATED */
    color: var(--secondary-button-text);       /* UPDATED */
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;
}
.filter-chip.active {
    background-color: var(--primary-color);       /* UPDATED */
    color: var(--primary-text-color);           /* UPDATED */
}

/* --- Profile Search Cards --- */
.profile-results-grid {
    padding: 0 15px; /* Add horizontal padding */
}
.profile-search-card {
    background-color: var(--content-bg-color); /* ADDED */
    border: 1px solid var(--border-color); /* ADDED */
    color: var(--text-color-primary); /* ADDED */
}
.profile-search-username {
    color: var(--text-color-secondary); /* ADDED */
}




/* ========================================= */
/* == PRIVACY SETTINGS STYLES             == */
/* ========================================= */


/* =======================================================
   == SETTINGS PANES & TOGGLES (Themed & Responsive)    ==
   ======================================================= */

/* --- General Pane Content --- */
.settings-subtitle {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color); /* UPDATED */
    color: var(--text-color-primary); /* UPDATED */
}
.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color); /* ADDED */
}
.setting-row:last-of-type {
    border-bottom: none; /* remove border on the last item */
}
.setting-info {
    flex: 1;
    padding-right: 20px;
}
/* This is already styled, but we ensure the color is themed */
.setting-info label {
    color: var(--text-color-primary);
}

/* --- Custom Toggle Switch --- */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 51px;
    height: 31px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--secondary-button-bg); /* UPDATED */
    transition: .4s;
    border-radius: 34px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 23px;
    width: 23px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: var(--primary-color); /* UPDATED */
}
input:checked + .slider:before {
    transform: translateX(20px);
}

/* --- Help & Support Pane ---*/

.faq-item {
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0;
}
.faq-item summary {
    font-weight: 600;
    cursor: pointer;
    color: var(--text-color-primary);
}
.faq-item p {
    margin-top: 10px;
    padding-left: 10px;
    color: var(--text-color-secondary);
} 
.faq-item a {
    color: var(--primary-color);
}
.setting-info label {
    font-weight: 600;
    font-size: 16px;
    display: block;
    margin-bottom: 4px;
}
.setting-control {
    flex-shrink: 0;
}

.slider:before {
    position: absolute;
    content: "";
    height: 23px;
    width: 23px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}



/* =======================================================
   == ACCOUNT DELETION STYLES (Themed)                  ==
   ======================================================= */

.deletion-section-wrapper {
    padding: 20px;
    border: 1px solid var(--border-color); /* UPDATED */
    border-radius: 8px;
    background-color: var(--content-bg-color); /* ADDED */
}

/* Styles for the permanent delete "danger zone" section */
.deletion-section-wrapper.danger-zone {
    border-color: var(--danger-color); /* UPDATED */
    /* NEW: A semi-transparent background color for the danger zone */
    background-color: rgba(217, 48, 37, 0.1); 
}

.danger-zone .settings-subtitle {
    color: var(--danger-color); /* UPDATED */
}


/* =======================================================
   == FOLLOW BUTTONS & AUTHOR LINKS (Themed)            ==
   ======================================================= */

/* --- Container for author avatar, name, and follow button --- */
.author-info, .author-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Base Style for Follow Button --- */
.follow-btn {
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* "Follow" state (Primary Action) */
.follow-btn {
    background-color: var(--primary-color);
    color: var(--primary-text-color);
}
.follow-btn:hover {
    filter: brightness(1.1); /* Brighter hover */
}

/* "Following" state (Secondary Action) */
.follow-btn.following {
    background-color: var(--secondary-button-bg);
    color: var(--secondary-button-text);
    border-color: var(--border-color);
}
.follow-btn.following:hover {
    background-color: var(--hover-bg-color);
}

/* --- Consolidated Style for ALL Author Links --- */
.author-name-link,
.comment-author-link {
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 1px dashed transparent; /* Prepare for hover */
    padding-bottom: 1px;
    transition: all 0.2s ease;
}
.author-name-link:hover,
.comment-author-link:hover {
    border-bottom-color: var(--primary-color);
}

/* --- Specifics for comment text --- */
.comment-text {
    color: var(--text-color-primary); /* UPDATED */
    line-height: 1.4;
}


/* =======================================================
   == MOBILE UPLOAD SHEET (Themed & Responsive)         ==
   ======================================================= */

#mobile-upload-sheet {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-bg-color); /* UPDATED */
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
    backdrop-filter: blur(4px); /* ADDED */
    -webkit-backdrop-filter: blur(4px); /* ADDED */
}
#mobile-upload-sheet.is-open {
    opacity: 1;
    pointer-events: auto;
}
.sheet-content {
    background-color: var(--content-bg-color); /* UPDATED */
    width: 100%;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    height: 90vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
}
#mobile-upload-sheet.is-open .sheet-content {
    transform: translateY(0);
}

/* --- Header --- */
.sheet-header {
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid var(--border-color); /* UPDATED */
    position: relative;
    flex-shrink: 0; /* ADDED */
}
.sheet-drag-handle {
    width: 40px;
    height: 5px;
    background-color: var(--border-color); /* UPDATED */
    border-radius: 3px;
    margin: 0 auto;
}
#close-sheet-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Centered vertically */
    right: 10px;
    font-size: 28px;
    background: none;
    border: none;
    color: var(--text-color-secondary); /* UPDATED */
    cursor: pointer; /* ADDED */
}

/* --- Upload Type Tabs --- */
.sheet-upload-options {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    overflow-x: auto;
    flex-shrink: 0; /* ADDED */
}
.sheet-option-tab {
    padding: 8px 16px;
    border-radius: 20px;
    background-color: var(--secondary-button-bg); /* UPDATED */
    color: var(--secondary-button-text);       /* ADDED */
    border: none;
    font-weight: 600;
    cursor: pointer; /* ADDED */
    white-space: nowrap; /* ADDED */
}
.sheet-option-tab.active {
    background-color: var(--primary-color);      /* UPDATED */
    color: var(--primary-text-color);            /* UPDATED */
}

/* --- Main Content Area --- */
.sheet-views-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
}
.sheet-view {
    display: none;
}
.sheet-view.active {
    display: block;
}
.sheet-file-select-btn, .sheet-publish-btn {
    display: inline-block;
    background-color: var(--primary-color);     /* UPDATED */
    color: var(--primary-text-color);          /* UPDATED */
    padding: 12px 24px;
    border-radius: 8px;
    margin-top: 20px;
    font-weight: 600;
    border: none;
    width: 100%;
    font-size: 16px;
    cursor: pointer; /* ADDED */
}
.sheet-scrollet-editor {
    width: 100%;
    height: 30vh;
    border: 1px solid var(--border-color); /* UPDATED */
    background-color: var(--input-bg-color); /* ADDED */
    color: var(--text-color-primary); /* ADDED */
    border-radius: 8px;
    padding: 15px;
    font-size: 16px;
}

/* --- Responsive Toggling (Unchanged) --- */
@media (min-width: 769px) {
    #mobile-upload-sheet {
        display: none;
    }
}
@media (max-width: 768px) {
    .upload-popup-container {
        display: none !important;
    }
}


/* ========================================= */
/* == NEW RICH TEXT SCROLLET EDITOR STYLES FOR DESKTOP    == */
/* ========================================= */

.scrollet-editor-container {
    border: 1px solid var(--border-color); /* UPDATED */
    background-color: var(--content-bg-color); /* ADDED */
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}



/* =======================================================
   == MOBILE UPLOADER: ANIMATION BUTTONS (Themed)       ==
   ======================================================= */

/* --- Base style for the animation buttons --- */
.animation-btn {
    flex: 0 0 auto;
    background: var(--content-bg-color);        /* UPDATED */
    border: 1px solid var(--border-color);      /* UPDATED */
    color: var(--text-color-primary);           /* ADDED */
    border-radius: 12px;
    padding: 8px;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* --- Hover and Active States --- */
.animation-btn:hover {
    border-color: var(--primary-color);         /* UPDATED */
    background-color: var(--hover-bg-color);    /* UPDATED */
}
.animation-btn.active {
    border-color: var(--primary-color);
    background-color: var(--primary-color-bg-light);
}

/* --- Animation Icons (using ::before) --- */
.animation-btn::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 4px; /* ADDED space between icon and text */
}

/* NOTE: The blue color inside these image URLs is hardcoded.
  Changing this dynamically is very complex. However, since it's your
  primary brand color, it looks good in both light and dark themes.
*/
.animation-btn[data-animation="fade-in"]::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%230000FF"><circle cx="12" cy="12" r="10" opacity="0.4"/><circle cx="12" cy="12" r="6"/></svg>');
}
.animation-btn[data-animation="typewriter"]::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%230000FF"><rect x="4" y="4" width="16" height="4"/><rect x="6" y="10" width="12" height="2"/><rect x="8" y="14" width="8" height="2"/><rect x="10" y="18" width="4" height="2"/></svg>');
}

/* Inverts the icon color to white when the button is active */
.animation-btn.active::before {
    filter: brightness(0) invert(1);
}





/* =======================================================
   == MOBILE UPLOADER: SCROLLET EDITOR INPUT STYLES (Themed) ==
   ======================================================= */

/* This rule is for the main text input in the Scrollet editor */
.scrollet-editor-input {
    /* Styles for the text itself are in your mobileUploader object in script.js */
    /* This rule handles the placeholder and focus state */
}

.scrollet-editor-input:focus {
    /* No special background needed, as the text box itself is already themed */
    /* We can remove the old background-color style */
}

.scrollet-editor-input:empty::before {
    content: attr(data-placeholder);
    color: var(--text-color-secondary); /* UPDATED */
    pointer-events: none; /* Corrected typo */
    opacity: 0.6; /* Made the placeholder slightly more subtle */
}



/* =======================================================
   == MOBILE UPLOADER: SCROLLET MEDIA ATTACHMENTS (Themed)   ==
   ======================================================= */

.scrollet-media-attachment-section {
    margin-top: 16px;
    border: 1px solid var(--border-color); /* UPDATED */
    border-radius: 8px;
    padding: 12px;
    background-color: var(--background-color); /* UPDATED */
}

/* --- Container for layout buttons and edit button --- */
.scrollet-media-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

/* --- The "Add Sticker" & "Add Media" buttons --- */
.scrollet-tool-btn {
    background: none;
    border: 1px solid var(--border-color);    /* UPDATED */
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    color: var(--text-color-secondary);      /* UPDATED */
}
.scrollet-tool-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}
.scrollet-tool-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* --- The "Edit Media" button --- */
.scrollet-media-edit-btn {
    background-color: transparent;
    border: 1px solid var(--primary-color);    /* UPDATED */
    color: var(--primary-color);               /* UPDATED */
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.scrollet-media-edit-btn:hover {
    background-color: var(--hover-bg-color);
}
.scrollet-media-edit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: transparent; /* Ensure no hover effect when disabled */
}
.scrollet-media-edit-btn svg {
    width: 16px;
    height: 16px;
}

/* --- Badge on top of media previews --- */
.preview-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: var(--overlay-bg-color); /* UPDATED */
    color: var(--primary-text-color);         /* UPDATED */
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
}


/* =======================================================
   == MOBILE UPLOADER: PHOTO LAYOUTS (Themed)           ==
   ======================================================= */

/* --- The container for the layout buttons --- */
.layout-selector {
    display: flex; /* Changed from none to flex */
    padding: 10px 0;
    margin-top: 15px;
    border-top: 1px solid var(--border-color); /* UPDATED */
    justify-content: center;
    gap: 15px;
}

/* --- The individual layout buttons --- */
.layout-btn {
    width: 40px;
    height: 40px;
    border: 2px solid var(--border-color);        /* UPDATED */
    border-radius: 6px;
    background-color: var(--secondary-button-bg); /* UPDATED */
    cursor: pointer;
    padding: 4px;
    display: flex;
    gap: 2px;
}
.layout-btn.active {
    border-color: var(--primary-color);             /* UPDATED */
    background-color: var(--primary-color-bg-light);/* UPDATED */
}

/* --- The little icons inside the buttons --- */
.layout-btn .icon-grid > div,
.layout-btn .icon-trio-left > div,
.layout-btn .icon-duo-vertical > div,
.layout-btn .icon-main-top > div,       /* ADDED */
.layout-btn .icon-overlap-stack > div { /* ADDED */
    background-color: var(--text-color-secondary); /* UPDATED */
}
.layout-btn.active .icon-grid > div,
.layout-btn.active .icon-trio-left > div,
.layout-btn.active .icon-duo-vertical > div,
.layout-btn.active .icon-main-top > div,       /* ADDED */
.layout-btn.active .icon-overlap-stack > div { /* ADDED */
    background-color: var(--primary-color);        /* UPDATED */
}

/* Unchanged icon structure styles */
.layout-btn .icon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 100%; height: 100%;}
.layout-btn .icon-trio-left { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; width: 100%; height: 100%; grid-template-areas: "main side1" "main side2"; }
.layout-btn .icon-trio-left > div:nth-child(1) { grid-area: main; }
.layout-btn .icon-duo-vertical { display: flex; flex-direction: column; gap: 2px; width: 100%; height: 100%; }
.layout-btn .icon-duo-vertical > div { flex-grow: 1; }


/* ========================================= */
/* == CSS GRID LAYOUTS FOR PREVIEWS       == */
/* ========================================= */

/* Default Grid Layout */
.scrollet-media-preview.grid-default {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}
.scrollet-media-preview.grid-default .preview-item {
    padding-top: 100%;
}

/* Trio with Main Image on Left */
.scrollet-media-preview.trio-left {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "main side1" "main side2";
    max-height: 300px;
}
.scrollet-media-preview.trio-left .preview-item:nth-child(1) { grid-area: main; padding-top: 0; }
.scrollet-media-preview.trio-left .preview-item:nth-child(2) { grid-area: side1; padding-top: 100%; }
.scrollet-media-preview.trio-left .preview-item:nth-child(3) { grid-area: side2; padding-top: 100%; }

/* Duo Vertical Split */
.scrollet-media-preview.duo-vertical {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    max-height: 400px;
}
.scrollet-media-preview.duo-vertical .preview-item {
    padding-top: 50%;
}


/* =======================================================
   == MOBILE UPLOADER: AUDIO EDITOR (Themed)            ==
   ======================================================= */

#audio-upload-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: left;
}

/* --- Artwork Uploader --- */
.audio-artwork-uploader {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--hover-bg-color); /* UPDATED */
    flex-shrink: 0;
}
#audio-artwork-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.artwork-edit-btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 32px;
    height: 32px;
    background-color: var(--overlay-bg-color); /* UPDATED */
    color: var(--primary-text-color);         /* UPDATED */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid var(--primary-text-color); /* UPDATED */
}

/* --- Title & Description Fields --- */
.audio-form-fields input,
.audio-form-fields textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color); /* UPDATED */
    border-radius: 8px;
    font-size: 15px;
    margin-bottom: 10px;
    background-color: var(--input-bg-color); /* ADDED */
    color: var(--text-color-primary);        /* ADDED */
}
.audio-form-fields textarea {
    min-height: 80px;
    resize: vertical;
}
#audio-filename-display {
    font-style: italic;
    color: var(--text-color-secondary); /* UPDATED */
    margin-bottom: 8px;
    font-size: 14px;
}

/* --- Disabled Button State --- */
.sheet-publish-btn:disabled {
    background-color: var(--secondary-button-bg); /* UPDATED */
    color: var(--text-color-secondary);      /* ADDED */
    cursor: not-allowed;
}

/* --- Play/Pause Icon Logic --- */
.audio-play-btn .pause-icon { display: none; }
.audio-play-btn .play-icon { display: block; }
.audio-play-btn.playing .pause-icon { display: block; }
.audio-play-btn.playing .play-icon { display: none; }

/* --- Audio Description in Feed Cards --- */
.audio-description {
    font-size: 14px;
    color: var(--text-color-secondary); /* UPDATED */
    margin-top: 4px;
}



/* =======================================================
   == PHOTO GRID & DESCRIPTION STYLES (Themed)          ==
   ======================================================= */

.photo-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.photo-grid-item {
    position: relative;
    padding-top: 100%; /* Square aspect ratio */
}

.photo-grid-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-description {
    font-size: 15px;
    color: var(--text-color-primary); /* UPDATED */
    margin-top: 10px; /* Adjusted spacing */
    margin-bottom: 10px;
    line-height: 1.4;
    padding: 0 15px; /* ADDED: Aligns text with card padding */
}



/* ========================================= */
/* == NEW: SCROLLS UPLOADER STYLES        == */
/* ========================================= */

#sheet-view-scrolls h3 {
    text-align: center;
    font-size: 18px;
    color: #333;
}

.scroll-options-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 25px;
}

.scroll-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f7f9fc;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    color: #0000FF;
    transition: all 0.2s ease;
}

.scroll-type-btn:hover {
    border-color: #0000FF;
    background-color: #e6f2ff;
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.scroll-type-btn svg {
    width: 32px;
    height: 32px;
}

#sheet-view-scroll-editor {
    text-align: left;
}

#scroll-editor-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 18px;
}

.scroll-form-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#scroll-title-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
}

#scroll-content-editor {
    width: 100%;
    min-height: 40vh; /* Provides a large area for writing */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    font-size: 16px;
    line-height: 1.5;
    resize: vertical;
}


/* =======================================================
   == MOBILE UPLOADER: SCROLLS EDITOR (Themed)          ==
   ======================================================= */

#sheet-view-scrolls h3,
#scroll-editor-title {
    text-align: center;
    font-size: 18px;
    color: var(--text-color-primary); /* UPDATED */
    margin-bottom: 20px;
}

/* --- Container for Novel, Script, Play, etc. buttons --- */
.scroll-options-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default for most phones */
    gap: 15px;
    margin-top: 25px;
}
.scroll-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 10px;
    border: 1px solid var(--border-color);           /* UPDATED */
    border-radius: 8px;
    background-color: var(--content-bg-color);     /* UPDATED */
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    color: var(--primary-color);                      /* UPDATED */
    transition: all 0.2s ease;
}
.scroll-type-btn:hover {
    border-color: var(--primary-color);               /* UPDATED */
    background-color: var(--primary-color-bg-light);  /* UPDATED */
    transform: translateY(-3px);
    box-shadow: 0 4px 10px var(--shadow-color);       /* UPDATED */
}
.scroll-type-btn svg {
    width: 32px;
    height: 32px;
    color: var(--text-color-secondary); /* ADDED */
}
.scroll-type-btn:hover svg,
.scroll-type-btn.active svg {
    color: var(--primary-color);
}


/* --- The main editor form --- */
#sheet-view-scroll-editor {
    text-align: left;
}
.scroll-form-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#scroll-title-input,
#scroll-content-editor {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);          /* UPDATED */
    background-color: var(--input-bg-color);      /* ADDED */
    color: var(--text-color-primary);             /* ADDED */
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
}
#scroll-content-editor {
    min-height: 40vh;
    line-height: 1.5;
    resize: vertical;
}

/* --- NEW: Responsive adjustment for smaller phones --- */
@media (max-width: 360px) {
    .scroll-options-container {
        /* Switch to 2 columns on very narrow screens */
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =======================================================
   == SCROLLET MEDIA LAYOUTS & ICONS (Themed & Consolidated) ==
   ======================================================= */

/* --- Base container for media grids in a Scrollet post --- */
.scrollet-media-display {
    display: grid;
    gap: 2px;
    overflow: hidden;
}
.scrollet-media-display .preview-item {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 100%; /* Default to square items */
}
.scrollet-media-display .preview-item img,
.scrollet-media-display .preview-item video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.preview-item video {
    background-color: #000000; /* Video background is always black */
}

/* --- Specific Layout Rules --- */
.scrollet-media-display.grid-default {
    grid-template-columns: 1fr 1fr;
}
.scrollet-media-display.trio-left {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "main side1" "main side2";
    max-height: 400px;
}
.scrollet-media-display.trio-left .preview-item { padding-top: 0; height: 100%; }
.scrollet-media-display.trio-left .preview-item:nth-child(1) { grid-area: main; }
.scrollet-media-display.trio-left .preview-item:nth-child(2) { grid-area: side1; }
.scrollet-media-display.trio-left .preview-item:nth-child(3) { grid-area: side2; }

.scrollet-media-display.duo-vertical {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    max-height: 500px;
}
.scrollet-media-display.duo-vertical .preview-item { padding-top: 50%; }

.scrollet-media-display.main-top {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "main main main" "side1 side2 side3";
}
.scrollet-media-display.main-top .preview-item { padding-top: 0; height: 100%; }
.scrollet-media-display.main-top .preview-item:nth-child(1) { grid-area: main; padding-top: 56.25%; }
.scrollet-media-display.main-top .preview-item:nth-child(2) { grid-area: side1; padding-top: 100%; }
.scrollet-media-display.main-top .preview-item:nth-child(3) { grid-area: side2; padding-top: 100%; }
.scrollet-media-display.main-top .preview-item:nth-child(4) { grid-area: side3; padding-top: 100%; }

.scrollet-media-display.overlap-stack {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
}
.scrollet-media-display.overlap-stack .preview-item {
    position: absolute;
    width: 70%;
    height: 70%;
    padding-top: 0;
    border-radius: 8px;
    border: 3px solid var(--content-bg-color); /* UPDATED */
    box-shadow: 0 4px 15px var(--shadow-color);   /* UPDATED */
    transition: transform 0.3s ease;
}
.scrollet-media-display.overlap-stack .preview-item:hover {
    z-index: 10;
    transform: scale(1.05) !important;
}
.scrollet-media-display.overlap-stack .preview-item:nth-child(1) { top: 0; left: 5%; transform: rotate(-8deg); z-index: 1; }
.scrollet-media-display.overlap-stack .preview-item:nth-child(2) { top: 15%; left: 25%; transform: rotate(6deg); z-index: 2; }
.scrollet-media-display.overlap-stack .preview-item:nth-child(3) { top: 30%; left: 15%; transform: rotate(-2deg); z-index: 3; }


/* --- Structure for Layout Button Icons (Colors are handled elsewhere) --- */
.layout-btn .icon-main-top { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr; gap: 2px; width: 100%; height: 100%; grid-template-areas: "main main" "side1 side2"; }
.layout-btn .icon-main-top > div:nth-child(1) { grid-area: main; }
.layout-btn .icon-overlap-stack { position: relative; width: 100%; height: 100%; }
.layout-btn .icon-overlap-stack > div { position: absolute; width: 60%; height: 60%; border-radius: 2px; }
.layout-btn .icon-overlap-stack > div:nth-child(1) { top: 10%; left: 10%; transform: rotate(-5deg); }
.layout-btn .icon-overlap-stack > div:nth-child(2) { top: 20%; left: 25%; transform: rotate(5deg); }
.layout-btn .icon-overlap-stack > div:nth-child(3) { top: 30%; left: 15%; transform: rotate(-2deg); }

/* =======================================================
   == VIDEO SIZING & UPLOADER PREVIEWS (Themed)         ==
   ======================================================= */

/* --- Video Sizing & Aspect Ratio --- */
.video-container {
    background-color: #000; /* Black is standard for video letterboxing */
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}
.card-media {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}
.scrollet-media-display .preview-item video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    background-color: #000;
}

/* --- Mobile Uploader: Horizontal Media Preview Row --- */
#scrollet-media-preview-container {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 10px 0;
    margin-top: 10px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
#scrollet-media-preview-container::-webkit-scrollbar {
    display: none;
}
.scrollet-media-preview {
    display: flex !important; /* This override is necessary */
}

/* --- Mobile Uploader: Individual Preview Thumbnail --- */
#scrollet-media-preview-container .preview-item {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--hover-bg-color); /* UPDATED */
}

/* --- Mobile Uploader: Overlay Buttons on Previews --- */
.preview-item-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: var(--overlay-bg-color); /* UPDATED */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.preview-item:hover .preview-item-overlay {
    opacity: 1;
}
.preview-action-btn {
    background: rgba(255,255,255,0.8); /* This is okay for both themes */
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
}
.preview-action-btn svg {
    width: 18px;
    height: 18px;
}
/* =======================================================
   == MOBILE UPLOADER: FULL-SCREEN MEDIA EDITOR (Themed) ==
   ======================================================= */

/* --- The full-screen sheet container --- */
.media-editor-sheet {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 2010; /* Higher than the main upload sheet */
    display: none;
}
.media-editor-sheet.is-open {
    display: flex;
}
.media-editor-sheet .sheet-content {
    height: 100vh; /* Make editor take the full screen */
    border-radius: 0;
}

/* --- Main cropper/image area --- */
.editor-cropper-container {
    flex-grow: 1;
    background-color: #222; /* A dark background is best for editing */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#media-editor-image-target {
    display: block;
    max-width: 100%;
}

/* --- Bottom toolbar for actions like rotate, crop, etc. --- */
.editor-toolbar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background-color: var(--background-color); /* UPDATED */
    flex-shrink: 0;
}
.editor-toolbar button {
    background: var(--content-bg-color);       /* UPDATED */
    border: 1px solid var(--border-color);     /* UPDATED */
    color: var(--text-color-primary);          /* ADDED */
    border-radius: 50%;
    width: 44px;
    height: 44px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.editor-toolbar button svg {
    width: 24px;
    height: 24px;
}

/* --- Footer for Done/Cancel buttons --- */
.editor-footer {
    padding: 15px;
    flex-shrink: 0;
    border-top: 1px solid var(--border-color); /* UPDATED */
    background-color: var(--background-color);   /* ADDED */
}

/* --- Old/Unused styles (can be removed if not needed) --- */
.media-editor-fields {
   /* display: none; */ /* Hiding as this is likely replaced by the toolbar */
}



/* =======================================================
   == MOBILE UPLOADER: HORIZONTAL MEDIA PREVIEWS (Themed) ==
   ======================================================= */

#scrollet-media-preview-container {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 10px 0;
    margin-top: 10px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
#scrollet-media-preview-container::-webkit-scrollbar {
    display: none;
}

/* --- Individual Preview Thumbnail Item --- */
#scrollet-media-preview-container .preview-item {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--hover-bg-color); /* UPDATED */
}

/* --- Image and Video Styling --- */
#scrollet-media-preview-container .preview-item img,
#scrollet-media-preview-container .preview-item video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

/* --- The 'Remove' Button --- */
#scrollet-media-preview-container .remove-media-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    background-color: var(--overlay-bg-color); /* UPDATED */
    color: var(--primary-text-color);       /* UPDATED */
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    z-index: 10;
}


/* ========================================= */
/* == STYLES FOR STICKERS IN THE FEED     == */
/* ========================================= */

.scrollet-text .scrollet-sticker {
  height: 1.2em; /* Makes the sticker about the same height as the text */
  width: auto;
  vertical-align: middle; /* Aligns the sticker nicely with the text line */
  margin: 0 0.1em; /* Adds a tiny bit of space around the sticker */
}


/* =======================================================
   == MOBILE UPLOADER: SCROLLET EDITOR HEADER (Themed)       ==
   ======================================================= */

/* --- Main header container --- */
.scrollet-editor-header {
    display: flex;
    align-items: flex-end;
    gap: 15px;
    padding: 12px;
    background-color: var(--background-color);   /* UPDATED */
    border-bottom: 1px solid var(--border-color); /* UPDATED */
}

/* --- Left section (title + buttons) --- */
.animation-section {
    flex-grow: 1;
    min-width: 0;
}
.editor-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color-secondary);      /* UPDATED */
    margin-bottom: 10px;
    text-align: left;
}

/* --- Horizontally scrolling animation buttons --- */
.animation-selector-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.animation-selector-scroll::-webkit-scrollbar {
    display: none;
}

/* --- Individual Animation Button --- */
.animation-btn {
    flex: 0 0 auto;
    background: var(--content-bg-color);       /* UPDATED */
    border: 1px solid var(--border-color);     /* UPDATED */
    color: var(--text-color-primary);          /* ADDED */
    border-radius: 12px;
    padding: 8px;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.2s ease;
    cursor: pointer;
}
.animation-btn:hover {
    border-color: var(--primary-color);
    background-color: var(--hover-bg-color);
}
.animation-btn.active {
    border-color: var(--primary-color);
    background-color: var(--primary-color-bg-light);
}

/* --- Preview box inside the animation button --- */
.animation-preview {
    width: 100%;
    height: 35px;
    margin-bottom: 6px;
    border-radius: 6px;
    background-color: var(--background-color); /* UPDATED */
    display: flex;
    align-items: center;
    justify-content: center;
}
.animation-preview-text {
    font-weight: 500;
    font-size: 14px;
    color: var(--primary-color); /* UPDATED */
}

/* --- Toolbar on the right (Sticker/Media) --- */
.scrollet-toolbar {
    display: flex;
    gap: 15px;
    flex-shrink: 0;
}
.tool-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.tool-label {
    font-size: 11px;
    color: var(--text-color-secondary); /* UPDATED */
    font-weight: 500;
    white-space: nowrap;
}






/* =======================================================
   == TOAST NOTIFICATION STYLES (Themed)                ==
   ======================================================= */

.toast-notification {
    position: fixed;
    bottom: 80px; /* Position above the mobile nav */
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--text-color-primary); /* UPDATED */
    color: var(--content-bg-color);              /* UPDATED */
    padding: 12px 24px;
    border-radius: 25px; /* Pill shape */
    box-shadow: 0 4px 15px var(--shadow-color);   /* UPDATED */
    z-index: 3000; /* Highest z-index */
    font-size: 15px;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    animation: slideInUpToast 0.3s ease forwards;
}

.toast-notification.fade-out {
    opacity: 0;
}

@keyframes slideInUpToast {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}




/* =======================================================
   == SKELETON & INFINITE LOADERS (Themed)              ==
   ======================================================= */

/* --- Skeleton Loading Card --- */
.skeleton-card {
    background-color: var(--content-bg-color); /* UPDATED */
    border: 1px solid var(--border-color);   /* UPDATED */
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 12px 15px;
}
.skeleton-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}
.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.skeleton-author-info {
    flex-grow: 1;
}
.skeleton-text {
    height: 12px;
    border-radius: 4px;
    margin-bottom: 8px;
}
.skeleton-text.short {
    width: 90%;
}
.skeleton-content {
    height: 150px;
    border-radius: 6px;
}

/* --- Themed Shimmering Animation --- */
.skeleton-card .skeleton-avatar,
.skeleton-card .skeleton-text,
.skeleton-card .skeleton-content {
    /* UPDATED: Uses theme variables for the gradient */
    background: linear-gradient(
        90deg,
        var(--hover-bg-color) 25%,
        var(--secondary-button-bg) 50%,
        var(--hover-bg-color) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite linear;
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Infinite Scroll Three-Dot Loader --- */
.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
    width: 100%;
}
.loader-container.hidden {
    display: none;
}
.loader-dot {
    width: 12px;
    height: 12px;
    background-color: var(--primary-color); /* UPDATED */
    border-radius: 50%;
    animation: bounce 0.6s infinite alternate;
}
.loader-dot:nth-child(2) {
    animation-delay: 0.1s;
}
.loader-dot:nth-child(3) {
    animation-delay: 0.2s;
}
@keyframes bounce {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-10px);
        opacity: 0.5;
    }
}    



/* =======================================================
   == PROFILE SEARCH RESULTS (Themed & Responsive)      ==
   ======================================================= */

.search-results-header {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 30px 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color); /* UPDATED */
    color: var(--text-color-primary);           /* ADDED */
}

.profile-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
}

.profile-search-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background-color: var(--content-bg-color); /* UPDATED */
    border: 1px solid var(--border-color);   /* UPDATED */
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-color-primary);        /* UPDATED */
    transition: all 0.2s ease-in-out;
}

.profile-search-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px var(--shadow-color); /* UPDATED */
    border-color: var(--primary-color);      /* UPDATED */
}

.profile-search-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.profile-search-info {
    display: flex;
    flex-direction: column;
}

.profile-search-name {
    font-weight: 600;
    font-size: 16px;
}

.profile-search-username {
    font-size: 14px;
    color: var(--text-color-secondary); /* UPDATED */
}


/* =======================================================
   == NOTIFICATIONS PAGE (Themed & Responsive)          ==
   ======================================================= */

/* --- NEW: Page Container & Header Styles --- */
.page-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px 15px; /* Added padding */
}
.page-header h1 {
    font-size: 2rem;
    color: var(--text-color-primary);
    margin-bottom: 10px;
}

/* --- The main list container --- */
.notifications-list {
    background-color: var(--content-bg-color); /* UPDATED */
    border: 1px solid var(--border-color);   /* UPDATED */
    border-radius: 8px;
    overflow: hidden;
}

/* --- Individual notification item --- */
.notification-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px;
    border-bottom: 1px solid var(--border-color); /* UPDATED */
    text-decoration: none;
    color: var(--text-color-secondary);         /* UPDATED */
    position: relative;
    transition: background-color 0.2s ease; /* ADDED */
}
.notification-item:last-child {
    border-bottom: none;
}
.notification-item:hover {
    background-color: var(--hover-bg-color);     /* UPDATED */
}

/* --- "Unread" notification indicator --- */
.notification-item.unread::before {
    content: '';
    position: absolute;
    left: 6px; /* Adjusted position */
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: var(--primary-color);      /* UPDATED */
    border-radius: 50%;
}
.notification-item.unread {
    background-color: var(--primary-color-bg-light); /* UPDATED */
}

/* --- Avatar & Content within the item --- */
.notification-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.notification-content {
    flex-grow: 1;
    font-size: 15px;
    line-height: 1.4;
}
.notification-content strong {
    font-weight: 600;
    color: var(--text-color-primary); /* UPDATED */
}
.notification-content em {
    font-style: normal;
    font-weight: 500;
    color: var(--text-color-primary); /* UPDATED */
}
.notification-timestamp {
    display: block;
    font-size: 13px;
    color: var(--text-color-secondary); /* UPDATED */
    margin-top: 4px;
}
.notification-post-thumb {
    width: 55px;
    height: 55px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    border: 1px solid var(--border-color); /* UPDATED */
}


/* =======================================================
   == MOBILE UPLOAD PROGRESS BANNER (Themed)            ==
   ======================================================= */

.progress-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--primary-color);     /* UPDATED */
    color: var(--primary-text-color);           /* UPDATED */
    padding: 8px 15px;
    z-index: 3000; /* Highest z-index */
    font-size: 14px;
    font-weight: 500;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}

.progress-banner:not(.hidden) {
    transform: translateY(0);
}

.progress-bar-container {
    width: 100%;
    height: 4px;
    /* UPDATED: A semi-transparent version of the main text color */
    background-color: rgba(255, 255, 255, 0.3); 
    border-radius: 2px;
    margin-top: 5px;
}
.dark-theme .progress-bar-container {
    /* ADDED: A specific override for dark theme for better contrast */
    background-color: rgba(0, 0, 0, 0.2);
}


.progress-bar-fill {
    width: 0%;
    height: 100%;
    background-color: var(--primary-text-color); /* UPDATED */
    border-radius: 2px;
    transition: width 0.2s linear;
}


@keyframes indeterminate-progress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* This class will be added by JavaScript during the analysis phase */
.progress-banner.is-analyzing .progress-bar-fill {
    width: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    background-size: 200% 100%;
    animation: indeterminate-progress 1.5s infinite linear;
}

/* --- Upload Banner UX Improvements --- */

/* Use Flexbox on the main banner to align items */
.progress-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.progress-banner-info {
    flex-grow: 1; /* Allow the text/bar to take up available space */
}

/* Container for the new buttons */
.progress-banner-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0; /* Prevent buttons from shrinking */
}
.progress-banner-actions.hidden {
    display: none;
}

/* Style for the individual Retry/Cancel buttons */
.banner-action-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid var(--primary-text-color);
    color: var(--primary-text-color);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
}
.banner-action-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}
.banner-action-btn svg {
    width: 18px;
    height: 18px;
}

/* The new "failed" state for the banner */
.progress-banner.is-failed {
    background-color: var(--danger-color);
}

/* --- Success banner state --- */
.progress-banner.is-success {
    background-color: #2ecc71; /* A nice green color */
    /* We can hide the progress bar in the success state */
    .progress-bar-container {
        display: none;
    }
}
/* =======================================================
   == NOTIFICATION BADGE & FAQ (Themed)                 ==
   ======================================================= */

.notification-container {
    position: relative;
    margin-right: 10px;
}

/* --- The red notification circle --- */
.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--danger-color);      /* UPDATED */
    color: var(--primary-text-color);           /* UPDATED */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    border: 2px solid var(--content-bg-color); /* UPDATED */
}
.notification-badge.hidden {
    display: none;
}

/* --- Active state for the bell icon --- */
/* This rule is already in your notification button styles, 
   but we'll keep it here to ensure it works. It's already themed. */
#notification-trigger-btn.active {
    background-color: var(--primary-color);
    color: var(--primary-text-color);
}


/* --- FAQ items in Help & Support --- */
.faq-item {
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0;
}
.faq-item summary {
    font-weight: 600;
    cursor: pointer;
    color: var(--text-color-primary); /* ADDED */
}
.faq-item p {
    margin-top: 10px;
    padding-left: 10px; 
    color: var(--text-color-secondary);
}


/* ========================================= */
/* == SCROLLS (READER HUB) PAGE STYLES    == */
/* ========================================= */
.scrolls-page .page-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 20px auto;
}
.scrolls-page .filter-bar-container {
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto 30px auto;
}
.scrolls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}
.scroll-cover-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background-color: var(--content-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 4px 12px var(--shadow-color); /* UPDATED */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    aspect-ratio: 2 / 3; /* Classic book cover ratio */
    display: flex;
    flex-direction: column;
    padding: 20px;
    justify-content: center;
    text-align: center;
}
.scroll-cover-card:hover {
    transform: translateY(-5px) scale(1.03);
    /* UPDATED */
    box-shadow: 0 6px 20px var(--shadow-color); 
}
.scroll-cover-card .type-badge {
    font-size: 11px;
    font-weight: bold;
    color: var(--text-color-secondary);
    text-transform: uppercase;
    margin-bottom: 15px;
}
.scroll-cover-card .cover-title {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.2;
    color: var(--text-color-primary);
    margin-bottom: 10px;
}
.scroll-cover-card .cover-author {
    font-size: 0.9rem;
    color: var(--text-color-secondary);
}




/* =======================================================
   == DASHBOARD COMPONENTS (Themed)                     ==
   ======================================================= */

/* --- For "Revenue" Tab: Top Supporters List --- */
.top-supporters-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.supporter-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color); /* UPDATED */
    color: var(--text-color-primary);           /* ADDED */
}
.supporter-item:last-child {
    border-bottom: none;
}
.supporter-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.supporter-item span {
    font-weight: 600;
}
.supporter-amount {
    margin-left: auto;
    font-weight: 500;
    color: var(--text-color-secondary); /* UPDATED */
}

/* --- For "Content Your Audience Likes" Tab --- */
.audience-favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}
.audience-favorite-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: var(--content-bg-color); /* UPDATED */
    border: 1px solid var(--border-color);   /* UPDATED */
    border-radius: 8px;
    padding: 12px;
    text-decoration: none;
    color: var(--text-color-primary);        /* UPDATED */
    transition: all 0.2s ease-in-out;
}
.audience-favorite-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px var(--shadow-color); /* UPDATED */
    border-color: var(--primary-color);      /* UPDATED */
}
.favorite-card-thumb {
    width: 80px;
    height: 45px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background-color: var(--hover-bg-color);
}
.favorite-card-info {
    display: flex;
    flex-direction: column;
}
.favorite-card-title {
    font-weight: 600;
}
.favorite-card-author {
    font-size: 14px;
    color: var(--text-color-secondary); /* UPDATED */
}

/* --- General Loading Placeholder Style --- */
.analytics-pane .loader-container,
.hub-pane .loader-container {
    padding: 40px 0;
}


/* --- Chart Container & Layout Fix --- */
.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}



/* In style.css */

/* ========================================= */
/* == DIM MODE OVERLAY STYLES             == */
/* ========================================= */

#dim-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    z-index: 900; /* High, but below modals and headers */
    
    /* This is the magic part: it lets you click "through" the overlay */
    pointer-events: none; 
    
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    
    transition: opacity 0.3s ease-in-out;
}

/* This class, added to the body, will show the overlay */
body.dim-mode-active #dim-overlay {
    opacity: 1;
    visibility: visible;
}


/* =======================================================
   == MOBILE UPLOADER: SCROLLET BACKGROUND SELECTOR (Themed) ==
   ======================================================= */

/* --- Live Preview Text Editor --- */
#scrollet-editor-input {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-text-color); /* UPDATED */
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    padding: 20px;
    min-height: 200px;
    /* The background is set by JavaScript, so no change needed here */
    transition: background 0.3s ease;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
#scrollet-editor-input:focus {
    outline: 2px solid var(--primary-text-color); /* UPDATED */
    outline-offset: -4px;
}

/* --- Scrollable container for the color swatches --- */
.background-selector-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background-color: var(--background-color);   /* UPDATED */
    border-left: 1px solid var(--border-color);    /* UPDATED */
    border-right: 1px solid var(--border-color);   /* UPDATED */
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.background-selector-container::-webkit-scrollbar {
    display: none;
}

/* --- Individual color swatch button --- */
.background-item {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}
.background-item:hover {
    transform: scale(1.05);
}
.background-item.active {
    border-color: var(--primary-color);        /* UPDATED */
    /* UPDATED: Uses the content background color for the outer ring */
    box-shadow: 0 0 0 2px var(--content-bg-color), 0 0 0 4px var(--primary-color); 
}

/* --- The character counter below the swatches --- */
.scrollet-character-counter {
    border: 1px solid var(--border-color);     /* UPDATED */
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 8px;
    background-color: var(--background-color); /* UPDATED */
}


/* =======================================================
   == "MEME STYLE" SCROLLET CARD STYLES (Themed)             ==
   ======================================================= */

/* --- The main card container --- */
.scrollet-card-new {
    background-color: var(--content-bg-color); /* UPDATED */
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
}
.scrollet-card-new .card-header {
    padding: 12px 8px;
}
.scrollet-card-new .card-footer {
    padding: 8px;
}

/* --- Clickable content area --- */
.scrollet-content-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* --- Container for the text with the colored background --- */
.scrollet-text-container {
    padding: 20px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* --- The text itself --- */
.scrollet-text-container .scrollet-text {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-text-color); /* UPDATED */
    text-align: center;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* --- The media display area --- */
.scrollet-card-new .scrollet-media-display {
    border-radius: 0;
}

/* ========================================= */
/* == SCROLLET CARD WATERMARK STYLES (UPDATED) == */
/* ========================================= */

.scrollet-watermark {
    position: absolute;
    /* MODIFIED: Using your brand's blue with transparency */
    background-color: rgba(0, 0, 255, 0.5);
    /*backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);*/
    color: #ffffff; /* White text looks best on a blue background */
    padding: 5px 10px;
    border-radius: 6px;
    /* MODIFIED: Increased font size */
    font-size: 14px; 
    font-weight: bold;
    font-family: sans-serif;
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.scrollet-watermark.top-right {
    top: 10px;
    right: 10px;
}

.scrollet-watermark.bottom-left {
    bottom: 10px;
    left: 10px;
}

/* ========================================= */
/* == IN-CARD DOWNLOAD PROGRESS STYLES    == */
/* ========================================= */

.card-download-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 255, 0.7);
    backdrop-filter: blur(4px);
    color: white;
    padding: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    z-index: 11;
    transition: opacity 0.3s ease;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}


/* =================================================== */
/* == DEFINITIVE FIX: Force Scrollet Card Media Clickable  == */
/* =================================================== */

/*
  This direct fix targets the wrapper around your clickable
  photo grid and elevates its layer ('z-index') to be higher
  than the header and footer, guaranteeing it is on top
  and can receive clicks.
*/
.scrollet-card-new .card-media-area-wrapper {
    z-index: 4;
}

/* ========================================= */
/* == IN-CARD SEARCH SUGGESTION STYLES    == */
/* ========================================= */

.scrollet-search-suggestion {
    /* Remove absolute positioning */
    position: static;
    
    /* Make it a flex item within the header */
    display: inline-flex;
    align-items: center;
    
    /* Spacing */
    margin-left: auto; /* Pushes it to the right, creating space */
    
    /* Styling remains the same */
    gap: 8px;
    background-color: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background-color 0.2s ease;
}

.scrollet-search-suggestion:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

.scrollet-search-suggestion svg {
    width: 16px;
    height: 16px;
    stroke: #ffffff;
    stroke-width: 2.5;
}



/* ================================================= */
/* == FINAL IN-CARD OVERLAY VIEWER STYLES (FIXED)   == */
/* ================================================= */

/* 1. Ensure the main card is the positioning context 
.feed-card {
    position: relative;
}

/* 2. Layer the header, text, and footer ON TOP of everything.
      Give them a background to hide the viewer scrolling underneath. 
.card-header,
.scrollettext-container,
.card-footer {
    position: relative;
    z-index: 3;
    background-color: var(--content-bg-color);
}

/* 3. The Clickable Media Grid stays at the base layer 
.card-media-area-wrapper {
    position: relative;
    z-index: 1;
}

/* 4. The Viewer Container (The Overlay) 
.inline-media-viewer {
    position: absolute;
    /* These values make the viewer fill the ENTIRE card 
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
    /* z-index: 2 puts it between the media grid and the header/footer 
    z-index: 2;
    
    display: flex;
    flex-direction: column;
    
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 5. The expand animation 
.feed-card.is-media-expanded .inline-media-viewer {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* 6. The Inner Scrolling Content 
.inline-media-viewer .inline-viewer-content { /* We added .inline-media-viewer here 
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 10px;
    padding-top: 56px; 
    padding-bottom: 56px;
}

/* 7. The Images and Videos Inside 
.inline-viewer-content img,
.inline-viewer-content video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    margin-bottom: 10px;
}

/* 8. The Close Button 
.inline-viewer-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4; /* On top of everything 
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}*/

/* In style.css, replace the old in-card viewer CSS with this */

/* --- FINAL IN-CARD EXPANDABLE MEDIA VIEWER (V2) --- */

.card-media-area-wrapper {
    position: relative;
    /* Animate the height of the wrapper for a smooth expand/collapse */
    transition: all 0.4s ease-in-out;
}

/* The viewer is hidden by default */
.in-card-viewer {
    display: none;
    width: 100%;
    /* This allows vertical swiping */
    overflow-y: auto;
    /* This makes the swiping snap to each item */
    scroll-snap-type: y mandatory;
    /* Important: Constrain the height of the scrolling area itself */
    max-height: 80vh;
    border-radius: 8px; /* Give it a slight rounding */
}

/* When the card is expanded, show the viewer... */
.feed-card.is-media-expanded .in-card-viewer {
    display: block;
}

/* ...and hide the original media grid. */
.feed-card.is-media-expanded .scrollet-media-display {
    display: none;
}

/* The close button is positioned relative to the wrapper, so it stays fixed */
/* The new, combined selector */
.in-card-viewer-close-btn,
.inline-viewer-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 22px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}
.inline-text-viewer {
    position: relative;
}

.feed-card.is-media-expanded .in-card-viewer-close-btn {
    opacity: 1;
}

/* Each item in the viewer */
.in-card-viewer .viewer-item {
    width: 100%;
    /* Let the height be determined by the media inside */
    height: auto;
    max-height: 80vh;
    scroll-snap-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

/* The actual image or video tag */
.in-card-viewer .viewer-item img,
.in-card-viewer .viewer-item video {
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
}

/* In style.css, add these two new rules */

.in-card-viewer .viewer-item {
    /* Adds a small gap below each photo/video */
    margin-bottom: 4px;
}

.in-card-viewer .viewer-item:last-child {
    /* Removes the gap from the very last item for a clean finish */
    margin-bottom: 0;
}

/* =======================================================
   == INLINE SCROLLET TEXT VIEWER STYLES (REVISED)           ==
   ======================================================= */

/* 1. The main container for the text in the feed */
.scrollet-text-container {
    position: relative; /* Needed for the fade effect */
    max-height: 300px;  /* You can adjust this value */
    overflow: hidden;
    cursor: pointer;
    /* We removed the height transition as the container no longer grows */
}

/* 2. The fade-out effect at the bottom (No changes here) */
.scrollet-text-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, transparent, var(--content-bg-color));
    pointer-events: none; 
    transition: opacity 0.3s ease;
}

/* 3. The full-text viewer that is hidden by default */
.scrollet-card-new .inline-text-viewer {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: 5; 
    background-color: transparent; /* CHANGED: This lets the colorful background show through! */
    opacity: 0;
    pointer-events: none;
    transform: scale(0.98);
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

/* --- Styles for the EXPANDED State --- */

/* When the card has this class, the viewer becomes visible */
.scrollet-card-new.is-text-expanded .inline-text-viewer {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

/* REMOVED the rule that expanded the container's max-height */
.scrollet-card-new.is-text-expanded .scrollet-text-container {
    cursor: default;
}

/* When expanded, hide the fade effect */
.scrollet-card-new.is-text-expanded .scrollet-text-fade {
    opacity: 0;
}

/* ADDED: When expanded, hide the original truncated text */
.scrollet-card-new.is-text-expanded .scrollet-text-container > .scrollet-text {
    visibility: hidden;
}

/* ADDED: Make the content inside the viewer scrollable */
.scrollet-card-new .inline-text-viewer .inline-viewer-content {
    height: 100%;
    overflow-y: auto;
    /* Add some padding so the scrollbar isn't right at the edge */
    padding-right: 10px;
}

/* ADDED: Ensure the text inside the viewer has the right styling */
.scrollet-card-new .inline-text-viewer .scrollet-text {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-text-color);
    text-align: center;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}


/* =======================================================
   == MOBILE UPLOADER: AUDIO RECORDER (Themed & Final)  ==
   ======================================================= */

/* --- Main container for the Audio tab --- */
#sheet-view-audio {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- Top bar for Search/Record/Select --- */
.audio-source-selector {
    display: flex;
    justify-content: space-around;
    gap: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color); /* UPDATED */
}
.source-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color-secondary); /* UPDATED */
    padding: 8px;
    border-radius: 8px;
    transition: background-color 0.2s;
}
.source-btn:hover {
    background-color: var(--hover-bg-color); /* UPDATED */
}
.source-btn.active {
    color: var(--primary-color); /* UPDATED */
}

/* --- The main form that appears after selecting a source --- */
#audio-upload-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.3s ease, margin-top 0.5s ease;
}
#audio-upload-form.is-active {
    max-height: 1000px;
    opacity: 1;
    margin-top: -10px;
}

/* --- "Recording..." indicator bar --- */
#live-recorder-ui {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-radius: 12px;
    background-color: var(--danger-color); /* UPDATED */
    color: var(--primary-text-color);     /* UPDATED */
    animation: pulse-red 1.5s infinite; /* ADDED animation directly here */
}
#live-recorder-ui.hidden {
    display: none;
}
.recorder-info #recorder-timer {
    font-size: 20px;
    font-weight: 600;
}
.stop-record-button {
    background: var(--primary-text-color);  /* UPDATED */
    color: var(--danger-color);             /* UPDATED */
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* --- Player/Waveform container --- */
#audio-player-container {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#audio-player-container.hidden { display: none; }
#audio-playback, #audio-waveform-canvas { width: 100%; display: none; }
#audio-playback.is-active, #audio-waveform-canvas.is-active { display: block; }
#audio-waveform-canvas { height: 50px; }

/* Pulse animation for the recording bar */
@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

/* =======================================================
   == FINAL AUDIO UPLOADER VISIBILITY (JS Controlled)  ==
   ======================================================= */

/* 1. By default, hide ALL three components inside the audio view. */
#sheet-view-audio .audio-source-selector,
#sheet-view-audio #audio-upload-form,
#sheet-view-audio #live-recorder-ui {
    display: none;
}

/* By default, hide the audio buttons, the form, AND the recorder. */
#sheet-view-audio .audio-source-selector,
#audio-upload-form,
#sheet-view-audio #live-recorder-ui { /* <-- ADD THIS LINE */
    display: none;
}

/* ONLY when the audio tab's view is active, show the audio buttons. */
#sheet-view-audio.active .audio-source-selector {
    display: flex;
}

/* ONLY when the audio form has the 'is-active' class, show the form. */
#audio-upload-form.is-active {
    display: flex;
    flex-direction: column; /* This ensures it stacks vertically */
}


/* =======================================================
   == MULTI-TRACK AUDIO STYLES (Themed & Final)         ==
   ======================================================= */

/* --- Previews in the mobile uploader --- */
#audio-previews-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}
.audio-preview-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--hover-bg-color); /* UPDATED */
    border-radius: 8px;
    padding: 10px;
}
.audio-preview-item audio {
    flex-grow: 1;
    width: 100%;
}
.audio-preview-item .delete-audio-btn {
    background-color: var(--secondary-button-bg); /* UPDATED */
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-color-secondary);          /* UPDATED */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Multi-track audio card in the feed --- */
.audio-post-artwork {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
    background-color: var(--hover-bg-color);     /* UPDATED */
}
.audio-post-description {
    font-size: 15px;
    color: var(--text-color-primary);          /* UPDATED */
    line-height: 1.4;
    margin-bottom: 15px;
    padding: 0 15px; /* ADDED */
}
.audio-playlist-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 8px 8px 8px; /* ADDED */
}
.audio-player-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--background-color);   /* UPDATED */
    border: 1px solid var(--border-color);     /* UPDATED */
    border-radius: 8px;
    padding: 8px;
}
.audio-player-row .audio-play-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    background-color: transparent;
    color: var(--primary-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}
.audio-player-row .audio-play-btn:hover,
.audio-player-row .audio-play-btn.playing {
    background-color: var(--primary-color);
    color: var(--primary-text-color);
}
.audio-track-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.audio-track-title {
    font-weight: 600;
    color: var(--text-color-primary);         /* UPDATED */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.audio-track-number {
    font-size: 12px;
    color: var(--text-color-secondary);       /* UPDATED */
}




/* =======================================================
   == SCROLLS FEATURE (Uploader, Card, Viewer) - THEMED ==
   ======================================================= */

/* --- Styles for the Scrolls Uploader --- */
.sheet-view-title {
    text-align: center;
    font-size: 18px;
    color: var(--text-color-primary); /* UPDATED */
    margin-bottom: 20px;
}
.scroll-type-selector {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}
.scroll-type-selector .scroll-type-btn {
    padding: 8px 16px;
    border-radius: 20px;
    background-color: var(--secondary-button-bg); /* UPDATED */
    border: 1px solid var(--border-color);        /* UPDATED */
    font-weight: 600;
    color: var(--secondary-button-text);        /* UPDATED */
    cursor: pointer;
}
.scroll-type-selector .scroll-type-btn.active {
    background-color: var(--primary-color);         /* UPDATED */
    color: var(--primary-text-color);             /* UPDATED */
    border-color: var(--primary-color);           /* UPDATED */
}

/* --- Styles for the In-Feed Scroll Card --- */
.scroll-paper {
    background-color: var(--content-bg-color);
    padding: 20px;
    max-height: 400px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.scroll-header {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
.scroll-type-badge {
    display: inline-block;
    background-color: var(--hover-bg-color);
    color: var(--text-color-secondary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.scroll-title {
    font-size: 22px;
    margin: 0;
    line-height: 1.2;
    color: var(--text-color-primary);
}
.scroll-content {
    font-family: 'Georgia', serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color-primary);
    white-space: pre-wrap; /* This is the magic line */
}
.scroll-fade {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 100px;
    background: linear-gradient(to bottom, transparent, var(--content-bg-color)); /* UPDATED */
    pointer-events: none;
}

/* --- Styles for the Expandable In-Card Text Viewer --- */
.scroll-full-text {
    white-space: pre-wrap;
    font-family: 'Georgia', serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color-primary); /* UPDATED */
}
.inline-text-viewer {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: 2;
    background-color: var(--content-bg-color);
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}
.scroll-card.is-text-expanded .inline-text-viewer {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.inline-text-viewer .inline-viewer-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
}
.scroll-card .card-header,
.scroll-card .card-footer {
    position: relative;
    z-index: 3;
    background-color: var(--content-bg-color);
}

.scroll-card .card-body {
    position: relative;
}




/* =======================================================
   == UPGRADED REPORT MODAL STYLES                      ==
   ======================================================= */

/* --- The container for the report options --- */
.report-options-list {
    display: flex;
    flex-wrap: wrap; /* Allows options to wrap to the next line */
    gap: 12px;       /* Space between the options */
}

/* --- Hides the default radio button circle --- */
.report-options-list input[type="radio"] {
    display: none;
}

/* --- Styles the label to look like a clickable chip --- */
.report-options-list label {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid var(--border-color);
    border-radius: 25px; /* Pill shape */
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-color-primary);
    background-color: var(--background-color);
    transition: all 0.2s ease-in-out;
}

/* --- Adds a hover effect --- */
.report-options-list label:hover {
    border-color: var(--text-color-secondary);
    background-color: var(--hover-bg-color);
}

/* --- This is the key: Styles the label when its radio button is checked --- */
.report-options-list input[type="radio"]:checked + label {
    background-color: var(--primary-color-bg-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
}

/* --- Themed style for the optional textarea --- */
#report-notes-textarea {
    background-color: var(--input-bg-color);
    color: var(--text-color-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    font-family: inherit;
    font-size: 15px;
}




/* ========================================= */
/* == MENTION SUGGESTION BOX STYLES       == */
/* ========================================= */

.mention-box {
    position: absolute;
    z-index: 1500;
    background-color: var(--content-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-color);
    max-height: 250px;
    overflow-y: auto;
    display: none; /* Hidden by default */
}

.mention-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}

.mention-item:last-child {
    border-bottom: none;
}

.mention-item:hover {
    background-color: var(--hover-bg-color);
}

.mention-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.mention-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mention-name {
    font-weight: 600;
    color: var(--text-color-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mention-username {
    font-size: 13px;
    color: var(--text-color-secondary);
}



/* STYLES FOR ADULT CONTENT */

.adult-content-banner {
    background-color: var(--hover-bg-color);
    color: var(--text-color-secondary);
    padding: 8px 15px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border-color);
}

.adult-content-banner span {
    background-color: var(--text-color-secondary);
    color: var(--content-bg-color);
    font-weight: bold;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
}

.content-blur {
    filter: blur(20px);
    -webkit-filter: blur(20px); /* For Safari */
    pointer-events: none; /* Prevents clicking/interacting with blurred content */
    opacity: 0.6;
}



/* ADD THIS to style.css */

.card-body, 
.scrollet-text-container, 
.card-media-area-wrapper {
    /* This is needed so the overlay can be positioned inside */
    position: relative;
}

.adult-content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-bg-color);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    border-radius: inherit; /* Matches the card's rounded corners */
}

.adult-content-overlay p {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-color-primary);
    margin-bottom: 15px;
    text-shadow: 0 1px 2px var(--shadow-color);
}

.adult-content-overlay .show-content-btn {
    background-color: var(--primary-color);
    color: var(--primary-text-color);
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    box-shadow: 0 2px 5px var(--shadow-color);
}

.adult-content-overlay .show-content-btn:hover {
    background-color: var(--primary-color-dark);
}

/* Let's make the blur a little less intense so the overlay looks better */
.content-blur {
    filter: blur(10px);
    -webkit-filter: blur(10px);
    pointer-events: none;
    opacity: 0.7;
}


/* ADD THIS to style.css */

.card-header {
    /* This makes the header stay on top of the overlay */
    position: relative;
    z-index: 6;
    background-color: var(--content-bg-color);
}

.adult-content-banner {
    /* This makes the "18+" banner stay on top too */
    position: relative;
    z-index: 6;
}

.adult-content-overlay {
    /* This makes the overlay sit *behind* the header but *on top* of the content */
    z-index: 5;
}


/* In style.css */

/* --- Manual M-Pesa Tip Modal Styles --- */
.manual-tip-image {
    max-width: 80%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
}

.manual-tip-message {
    color: var(--text-color-secondary);
    line-height: 1.5;
    margin-bottom: 20px;
}

.manual-tip-number-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--hover-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 15px;
}

#manual-tip-number {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
    color: var(--text-color-primary);
}

#manual-tip-copy-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background-color: var(--content-bg-color);
    color: var(--text-color-primary);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

#manual-tip-copy-btn:hover {
    background-color: var(--secondary-button-bg);
}