/* General Styles */
body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'VT323', monospace;
    background-image: url('images/bliss_Website_Background.svg');
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    font-size: 40px; /* Increased base font size */
}

/* Desktop Icons Section - Single Column Layout */
/* Main icons stack vertically, with a couple positioned to the side */
#desktop-icons {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 10px;
    position: fixed;
    top: 50px;
    left: 20px;
    /* Allow height to grow but leave room for taskbar */
    max-height: calc(100vh - 150px);
}

/* Icon Button Styles */
.icon-btn {
    text-align: center;
    cursor: pointer;
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s ease-in-out;
    width: 100px;
    font-family: 'VT323', monospace;
    font-size: 24px; /* Text size for icon labels */
}

.icon-btn img, .icon-btn svg {
    width: 80px; /* Set the size of the SVG or image */
    height: 80px; /* Set consistent height for the icon */
    margin-bottom: 5px; /* Space between the icon and the text label */
}

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

/* Dragging state for icons */
.icon-btn.dragging {
    opacity: 0.8;
    cursor: grabbing !important;
    z-index: 1000;
    transform: scale(1.05);
}

/* When an icon has been dragged, it gets fixed positioning */
.icon-btn[style*="position: fixed"] {
    /* Remove from normal flow once dragged */
    margin: 0 !important;
}

/* Second column - default position for Color Social */
/* Will be overridden if user drags it somewhere else */
.icon-btn.second-column {
    position: fixed;
    left: 140px;
    top: 50px;
}


/* Taskbar Section */
#taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #0049d1;
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

#startButton {
    text-align: center;
    height: 54px;
    width: 150px;
    background-color: #60A75C;
    border: 3px solid #568E51;
    border-radius: 15px;
    margin: 0 10px;
    color: white;
    font-size: 20px;
    font-family: 'VT323', monospace;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

#taskbar-windows {
    display: flex;
    gap: 10px;
    flex-grow: 1;
    margin-left: 10px;
}

.taskbar-window-button {
    background-color: #60A75C;
    color: white;
    border: 2px solid #568E51;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 16px;
    cursor: pointer;
    font-family: 'VT323', monospace;
}

#taskbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0044c2;
    z-index: -1;
    border-radius: 5px;
}

#startButton:hover {
    background-color: #4e8e4d;
    transform: scale(1.05);
}

/* Time and Date Styles */
#time-date {
    margin-right: 20px;
    text-align: right;
    color: white;
    font-size: 18px;
    line-height: 1.4;
    font-family: 'VT323', monospace;
}

/* Modal Styles */
.modal {
    position: fixed;
    left: 15%;
    top: 10%;
    z-index: 2;
    width: 70%;
    height: 80%;
    background-color: #f0f0f0;
    border: 2px solid #0049d1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none;
    overflow: hidden;
    font-family: 'VT323', monospace;
    cursor: grab;
}

/* Window Controls Container */



/* Iframe Styling */
.modal-iframe {
    width: 100%;
    height: calc(100% - 40px);
    border: none;
}


/* AIM Modal Styles */
#ModalSocial {
    position: fixed;
    left: 5%;
    top: 5%;
    z-index: 2;
    width: 300px;
    height: 600px;
    background-color: #dcdcdc; /* Light grey background for classic AIM look */
    border: 2px solid #0049d1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none;
    overflow: hidden;
    font-family: Arial, sans-serif;
    cursor: grab;
    font-size: 12px; /* Reduced font size for text inside AIM modal */
}

/* AIM Window Controls */
#modalHeaderSocial {
    display: flex;
    justify-content: flex-end;
    background-color: #c0c0c0; /* Classic Windows-style header */
    padding: 5px;
    border-bottom: 2px solid #808080; /* Darker grey border */
    gap: 10px;
}



.window-btn:hover {
    background-color: #a0a0a0; /* Darker grey when hovered */
}

/* AIM Layout Elements */
.aim-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    font-size: 12px; /* Reduced font size for AIM layout text */
}

/* AIM Logo */
.aim-logo {
    margin-bottom: 10px;
}

/* AIM Tabs */
.aim-tabs {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
}

.aim-tab-button {
    background-color: #e0e0e0;
    border: 1px solid #808080;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 14px; /* Slightly smaller text size for tabs */
}

.aim-tab-button:hover {
    background-color: #d0d0d0;
}

/* AIM Buddy List Styling */
.aim-buddy-list {
    width: 100%;
    background-color: #ffffff; /* White background for the buddy list */
    padding: 10px;
    border: 2px solid #cccccc;
    max-height: 400px; /* Set maximum height for the buddy list to make it scrollable */
    overflow-y: auto; /* Add vertical scrolling when content exceeds max-height */
}

/* Group Title Button Styling */
.group-title {
    background: #e6e6e6; /* Light grey for group title background */
    border: none;
    width: 100%;
    text-align: left;
    padding: 5px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.group-title:hover {
    background-color: #d0d0d0; /* Slightly darker on hover */
}

.arrow {
    font-size: 14px;
}

/* Buddy Group List */
.buddy-group {
    margin-bottom: 10px;
}

.buddies {
    list-style: none;
    padding: 0;
    margin: 5px 0;
    display: block;
}

.buddies li {
    padding: 5px;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.buddies li img {
    margin-right: 10px;
}

.buddies.offline {
    color: #808080; /* Grey color for offline users */
}

/* Social Media List Styling */
.social-list {
    list-style: none;
    padding: 0;
    margin-top: 5px;
}

.social-list li {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.social-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.social-list a {
    color: #0000EE; /* Standard hyperlink blue */
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
}

.social-list a:hover {
    color: #FF4500; /* Change to orange on hover to make it pop */
}


/* Login Modal Styles */
#ModalLogin {
    position: fixed;
    left: 35%;
    top: 15%;
    z-index: 2;
    width: 300px; /* Tall and skinny style */
    height: 500px; /* Increase height to fit all fields */
    background-color: #dcdcdc; /* Light grey background for classic AIM look */
    border: 2px solid #0049d1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none;
    overflow: hidden;
    font-family: Arial, sans-serif;
    cursor: grab;
}

/* Login Layout */
.login-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    height: 100%;
    justify-content: space-between;
}

/* AIM Logo */
.login-logo img {
    width: 100%; /* Adjust the logo image to fit */
    height: auto;
    margin-bottom: 10px;
}

/* Login Fields */
.login-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 10px;
}

.login-body label {
    align-self: flex-start;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: bold;
    color: #000080; /* Dark blue text to match classic AIM style */
}

.login-body input {
    margin-bottom: 10px;
    padding: 5px;
    font-size: 14px;
    width: calc(100% - 20px);
}

/* Options (Save password, Auto-login) */
.login-options {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
}

.login-options div {
    display: flex;
    align-items: center;
}

.login-options label {
    font-size: 12px;
    margin-left: 5px;
}

/* Buttons Section */
.login-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}

.extra-btn {
    background: none;
    border: none;
    cursor: pointer;
}

.extra-btn img {
    width: 24px;
    height: 24px;
}

.sign-on-btn {
    background-color: #60A75C;
    border: 2px solid #568E51;
    padding: 5px 10px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.3s;
    font-size: 16px;
}

.sign-on-btn img {
    width: 24px;
    height: 24px;
    margin-right: 5px;
}

.sign-on-btn:hover {
    background-color: #4e8e4d;
}

/* Version Information */
.login-version {
    font-size: 10px;
    color: #808080;
    margin-top: 10px;
}

/* Incorrect Password Modal Styles */
#ModalError {
    position: fixed;
    left: 40%; /* Adjusted slightly more to the right */
    top: 30%;
    z-index: 3;
    width: 300px;
    height: 180px;
    background-color: #e6e6e6; /* Light grey for classic Windows background */
    border: 2px solid #000080; /* Dark blue border for Windows-style error box */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none;
    overflow: hidden;
    font-family: 'Tahoma', sans-serif; /* Classic Windows font */
}

/* Error Modal Header */
#modalHeaderError {
    background-color: #0044c2; /* Same blue as the other modals */
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
    cursor: grab;
}



.window-btn:hover {
    color: #ff0000;
}

/* Error Layout */
.error-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    justify-content: space-between;
    height: calc(100% - 40px); /* Adjust height to account for header */
}

/* Error Icon */
.error-icon img {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
}

/* Error Message */
.error-message {
    color: #000000;
    font-size: 14px;
    text-align: center;
    margin-bottom: 10px;
}

/* Error Button */
.error-button {
    margin-top: 10px;
}

.fix-button {
    padding: 5px 15px;
    background-color: #e6e6e6;
    border: 1px solid #000000;
    color: black;
    cursor: pointer;
    font-size: 14px;
    font-family: 'Tahoma', sans-serif;
}

.fix-button:hover {
    background-color: #d0d0d0; /* Slightly darker grey on hover */
}

/* Trash Icon Positioning */
.trash-icon {
    position: fixed;
    bottom: 100px; /* Moved up to ensure it is above the taskbar */
    right: 20px;
}

/* Trash Modal Styles */
#ModalTrash, #ModalPasswords, #ModalPasswordsTxt {
    position: fixed;
    z-index: 3;
    width: 400px; /* Wider style to match Windows look */
    height: 300px; /* Adjust as needed */
    background-color: #dcdcdc; /* Light grey background */
    border: 2px solid #0044c2; /* Blue border to match the other modals */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none;
    overflow: hidden;
    font-family: 'Tahoma', sans-serif;
    cursor: grab;
}

/* Positioning for Trash, Passwords, and Passwords.txt modals */
#ModalTrash {
    left: 30%;
    top: 20%;
}

#ModalPasswords {
    left: 35%; /* Slightly to the right of the Trash modal */
    top: 25%; /* Slightly down from the Trash modal */
}

#ModalPasswordsTxt {
    left: 40%; /* Slightly to the right of the Passwords modal */
    top: 30%; /* Slightly down from the Passwords modal */
}

/* Modal Headers */
/* Modal Headers for Passwords.txt */
.window-controls {
    background-color: #0044c2; /* Same blue as other windows */
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
}

.window-controls .title {
    margin-right: auto;
}

/* Trash Layout */
.trash-layout, .passwords-layout {
    height: calc(100% - 40px); /* Account for header */
}

/* Folder Icon Positioning */
.top-left-folder, .top-left-txt {
    position: absolute;
    top: 40px;
    left: 10px;
}

.folder-btn, .txt-btn {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    margin-top: 20px;
}

.folder-btn img, .txt-btn img {
    width: 60px; /* Icon size */
    height: 60px;
    margin-bottom: 5px;
}

.folder-btn span, .txt-btn span {
    font-size: 14px;
    color: #000000;
    font-family: 'Tahoma', sans-serif;
}

/* Password Text File Modal - Larger Size */
#ModalPasswordsTxt.large-modal {
    position: fixed;
    left: 35%;
    top: 20%;
    z-index: 3;
    width: 600px;  /* Increased width */
    height: 500px; /* Increased height */
    background-color: #ffffff; /* Ensure the entire background is white */
    border: 2px solid #0044c2; /* Blue border to match the other modals */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    font-family: 'Tahoma', sans-serif;
    cursor: grab;
}

/* Passwords.txt Content - Textarea */
.txt-content {
    padding: 0;
    margin: 0;
    width: 100%;
    height: calc(100% - 80px); /* Account for header and file menu height */
    background-color: #ffffff; /* Full white background */
    box-sizing: border-box;
}

#passwordTextArea {
    width: 100%;
    height: 100%;
    border: none;
    background-color: #ffffff; /* Ensure the entire background is white */
    resize: none; /* Disable resizing */
    font-family: 'Courier New', Courier, monospace; /* Classic notepad font */
    font-size: 14px;
    color: #000000;
    padding: 10px;
    box-sizing: border-box;
    outline: none; /* Remove outline on focus */
}

/* File Menu for Passwords.txt Modal */
.file-menu-bar {
    background-color: #d3d3d3; /* Light grey background */
    color: black;
    display: flex;
    padding: 5px;
    font-family: 'Tahoma', sans-serif;
    height: 30px; /* Consistent height for file menu */
}

.menu-tab {
    position: relative;
    padding: 5px 15px;
    font-size: 14px;
    cursor: pointer;
    margin-right: 10px;
    background-color: #d3d3d3; /* All grey tabs */
}

.menu-tab:hover {
    background-color: #c0c0c0; /* Slightly darker grey when hovered */
}

/* Dropdown Content Styling */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    border: 1px solid #ddd;
    min-width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.menu-tab:hover .dropdown-content {
    display: block;
}

.dropdown-item {
    background: none;
    border: none;
    text-align: left;
    padding: 8px 10px;
    font-size: 14px;
    cursor: pointer;
    width: 100%;
    font-family: 'Tahoma', sans-serif;
}

.dropdown-item:hover {
    background-color: #e6e6e6;
}

/* AIM Chat Modal */
.aim-chat-window {
    position: fixed;
    left: 20%;
    top: 15%;
    width: 350px;
    height: 500px;
    background-color: #f0f0f0;
    border: 2px solid #0049d1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

/* AIM Chat Header */
.aim-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0044c2;
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    cursor: grab;
}



.window-btn:hover {
    background: #ddd;
}

/* AIM Chat History */
.aim-chat-history {
    padding: 10px;
    height: 300px;
    overflow-y: auto;
    background-color: white;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
}

/* AIM Chat Input Container */
.aim-chat-input-container {
    display: flex;
    align-items: center;
    padding: 5px;
    background-color: #e8e8e8;
}

/* AIM Chat Input */
.aim-chat-input {
    flex-grow: 1;
    border: 1px solid #ccc;
    padding: 5px;
    font-size: 14px;
    font-family: Arial, sans-serif;
    resize: none;
}

/* AIM Chat Send Button */
.aim-chat-send-button {
    background-color: #60A75C;
    color: white;
    border: 1px solid #568E51;
    padding: 5px 10px;
    margin-left: 5px;
    cursor: pointer;
    font-size: 14px;
}

.aim-chat-send-button:hover {
    background-color: #4e8e4d;
}

/* Apply Roboto Font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* Contact Email Modal */
#ModalContact {
    position: fixed;
    left: 35%;
    top: 15%;
    z-index: 2;
    width: 400px; /* Compact width */
    height: 550px; /* Tall enough to fit all content */
    background-color: #ffffff; /* Full white background */
    border: none; /* No visible border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
    display: none;
    overflow: hidden;
    font-family: 'Roboto', sans-serif; /* Apply Roboto font */
}

/* Header Styling */
#modalHeaderContact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    font-size: 14px; /* Smaller font for "New Message" */
    font-weight: bold;
    color: #333333; /* Dark grey text */
    background-color: #ffffff; /* Matches the rest of the modal */
    border-bottom: 1px solid #e0e0e0; /* Light grey border for separation */
}

/* Minimize and Close Buttons */
.window-btn-container {
    display: flex;
    gap: 5px;
}

.window-btn {
    background: none;
    border: none;
    color: #808080; /* Light grey button text */
    font-size: 14px; /* Smaller size */
    font-weight: bold;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 18px;
    cursor: pointer;
    border-radius: 3px; /* Slightly rounded hover background */
    transition: background-color 0.2s;
}

.window-btn:hover {
    background-color: #f0f0f0; /* Slightly darker grey on hover */
}

/* Email Layout */
.email-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 16px;
    box-sizing: border-box;
}

.email-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    /* Add a single grey line underneath each row */
    border-bottom: 1px solid #e0e0e0;
}

.email-label {
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    color: #333;
    min-width: 50px; /* Fixed width for labels to align them */
}

.email-input, .email-body textarea {
    border: none; /* Remove any border */
    outline: none; /* Remove outline */
    width: 100%;
    padding: 4px 0;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    color: #333;
    box-sizing: border-box;
    border-bottom: none !important; /* Add grey line underneath */
    background-color: transparent; /* Ensure no background color */
}

.email-body {
    flex-grow: 1;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.email-body textarea {
    flex-grow: 1; /* Allow textarea to fill the available space */
    width: 100%;
    border: none; /* Remove border */
    outline: none; /* Remove outline */
    resize: none; /* Disable resizing */
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    color: #333;
    background-color: #fff; /* Ensure background is white */
    padding: 0; /* Remove padding to align with other inputs */
    box-sizing: border-box;
    margin-top: 14px; /* Add margin to shift the textarea down */
}

/* Placeholder Text Styling */
.email-body textarea::placeholder {
    color: #aaa; /* Match the color of the subject box's placeholder */
}

.email-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-top: 1px solid #e0e0e0;
    background: white;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

/* Send Button - Bottom Left */
.send-btn {
    background-color: #1a73e8;
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
    font-family: 'Roboto', sans-serif;
}

.send-btn:hover {
    background-color: #1559c9;
    transform: scale(1.05);
}

.tools-section {
    display: flex;
    gap: 8px;
}

.tool-btn {
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
}

.tool-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    opacity: 0.7;
}

.email-input::placeholder {
    color: #aaa;
}

/* Email Row */
.email-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    /* Add a single grey line underneath each row */
    border-bottom: 1px solid #e0e0e0;
}

/* Email Input */
.email-input {
    border: none; /* Ensure no border */
    outline: none;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    color: #333;
    width: 100%;
    padding: 4px 0;
    /* Remove border-bottom from input itself */
    border-bottom: none;
}



#ModalChooseAccount, #ModalTextBox, #ModalAnalytics {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1001;
    background-color: #202020;
    color: white;
    border: 2px solid #0049d1;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border-radius: 8px;
    overflow: hidden;
}

#modalHeaderChooseAccount {
    background-color: #0049d1;
    color: white;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Account List Styling */
.account-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
}

.account-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.account-item:hover {
    background-color: #404040;
}

.account-content {
    display: flex;
    align-items: center;
    flex-grow: 1;
    padding: 10px;
    cursor: pointer;
}

.account-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px; /* Add margin to create a gap */
}

.account-info {
    flex-grow: 1;
    color: white;
}

.account-info b {
    font-size: 14px;
    display: block;
    margin-bottom: 4px;
}

.account-info p {
    font-size: 12px;
    color: #aaaaaa;
    margin: 0;
}

/* Arrow Button Styling */
.arrow-btn {
    background-color: #0049d1;
    border: none;
    color: white;
    font-size: 18px;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-left: auto;
}

.arrow-btn:hover {
    background-color: #0063e8;
}

/* Videos Modal Specific Styling */
/* Custom modal class for Videos modal */
#ModalVideos {
    position: fixed;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 350px;
    height: auto;
    max-height: 80vh;
    background-color: #303030;
    font-family: 'Roboto', sans-serif;
    z-index: 1000;
    box-shadow: -4px 0 8px rgba(0,0,0,0.2);
    overflow-y: auto;
    margin: 0 !important;
    transform: none !important;
}

#ModalVideos .window-controls {
    background-color: #404040;
    padding: 8px;
    color: white;
    font-size: 14px;
}

#ModalVideos .account-list {
    padding: 10px;
    max-height: calc(80vh - 35px); /* Adjust to fit within the modal */
    overflow-y: auto;
}

#ModalVideos .account-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

/* Analytics Tabs */
.analytics-tabs {
    display: flex;
    background-color: #333;
    border-bottom: 1px solid #444;
}

.analytics-tab {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
}

.analytics-tab.active {
    background-color: #444;
    font-weight: bold;
}

.analytics-tab:hover {
    background-color: #555;
}

/* Tab Panels */
.tab-panel {
    display: none;
    padding: 20px;
}

.tab-panel#overview {
    display: block; /* Show Overview by default */
}

/* Metrics Section */
.overview-metrics {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-top: 20px;
}

.metric {
    background-color: #333;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    flex: 1;
}

.metric h2 {
    margin: 5px 0;
}

.metric .positive {
    color: #4caf50;
}

.metric .neutral {
    color: #ffc107;
}

/* Placeholder for Chart */
.chart-placeholder {
    margin-top: 20px;
    background-color: #333;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}

.ModalYouTubeBorder {
    position: absolute !important; /* Ensure it overrides other styles */
    top: 25px !important; /* Ensure it overrides other styles */
    left: 30px !important; /* Ensure it overrides other styles */
    width: 1200px;
    height: 700px;
    background-color: #181818;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    z-index: 1000;
}

#ModalAnalyticsCamNewton .window-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #181818; /* Match the border color */
    padding: 10px;
    color: white;
    
}

#ModalAnalyticsCamNewton .window-controls .title {
    font-size: 16px;
    font-weight: bold;
}
.window-btn-youtube {
    background: none; /* Remove default button background */
    border: none; /* Remove default button border */
    color: white; /* Set text color */
    font-size: 18px;
    cursor: pointer;
    padding: 5px;
    transition: background-color 0.3s, border-radius 0.3s; /* Smooth transition for hover effect */
}

.window-btn-youtube:hover {
    background-color: white; /* Show white background on hover */
    color: #181818; /* Change text color to match the modal border */
    border-radius: 4px; /* Optional: Add some rounding to the hover effect */
}

.ModalTextBox {
    position: absolute !important; /* Ensure the modal is positioned relative to the viewport */
    top: 60px !important; /* Distance from the bottom of the screen */
    left: 1200px !important; /* Distance from the right of the screen */
    width: 460px; /* Set the width */
    height: 800px; /* Set the height */
    z-index: 1000; /* Ensure it appears above other elements */
}
#ModalTextBoxCamNewton {
    position: absolute !important;
    top: 10% !important; /* Adjusted to 10% for responsive positioning */
    left: 60% !important; /* Adjusted to 80% for responsive positioning */
    width: 460px;
    height: 80vh; /* Changed to viewport height */
    background-color: #fff;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

#ModalTextBoxCamNewton .modal-content {
    flex: 1;
    overflow: hidden;
    padding: 8px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 40px); /* Subtract header height */
}

#ModalTextBoxCamNewton .modal-iframe {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
}

#ModalTextBoxCamNewton .window-controls {
    height: 20px; /* Explicit height for header */
    background-color: #333;
    color: #fff;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#ModalTextBox4thand1 {
    position: absolute !important;
    top: 10% !important; /* Adjusted to 10% for responsive positioning */
    left: 60% !important; /* Adjusted to 80% for responsive positioning */
    width: 460px;
    height: 80vh;
    background-color: #fff;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

#ModalTextBox4thand1 .modal-content {
    flex: 1;
    overflow: hidden;
    padding: 0; /* Removed padding */
    display: flex;
    flex-direction: column;
    height: calc(100% - 40px);
}

#ModalTextBox4thand1 .modal-iframe {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0; /* Removed padding */
    margin: 0; /* Remove any margins */
}

#ModalTextBox4thand1 .window-controls {
    height: 40px;
    background-color: #333;
    color: #fff;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#ModalTextBoxFunkyFriday {
    position: absolute !important;
    top: 10% !important;
    left: 60% !important;
    width: 460px;
    height: 80vh;
    background-color: #fff;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

#ModalTextBoxFunkyFriday .modal-content {
    flex: 1;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: calc(100% - 40px);
}

#ModalTextBoxFunkyFriday .modal-iframe {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    margin: 0;
}

#ModalTextBoxFunkyFriday .window-controls {
    height: 40px;
    background-color: #333;
    color: #fff;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#ModalAnalyticsFunkyFriday .window-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #181818;
    padding: 10px;
    color: white;
}

#ModalAnalyticsFunkyFriday .window-controls .title {
    font-size: 16px;
    font-weight: bold;
}

/* Jim Gaffigan Modals */
#ModalTextBoxJimGaffigan {
    position: absolute !important;
    top: 10% !important;
    left: 60% !important;
    width: 460px;
    height: 80vh;
    background-color: #fff;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

#ModalTextBoxJimGaffigan .modal-content {
    flex: 1;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: calc(100% - 40px);
}

#ModalTextBoxJimGaffigan .modal-iframe {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    margin: 0;
}

#ModalTextBoxJimGaffigan .window-controls {
    height: 40px;
    background-color: #333;
    color: #fff;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#ModalAnalyticsJimGaffigan .window-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #181818;
    padding: 10px;
    color: white;
}

#ModalAnalyticsJimGaffigan .window-controls .title {
    font-size: 16px;
    font-weight: bold;
}

/* Kent Heckel Modals */
#ModalTextBoxKentHeckel {
    position: absolute !important;
    top: 10% !important;
    left: 60% !important;
    width: 460px;
    height: 80vh;
    background-color: #fff;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

#ModalTextBoxKentHeckel .modal-content {
    flex: 1;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: calc(100% - 40px);
}

#ModalTextBoxKentHeckel .modal-iframe {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    margin: 0;
}

#ModalTextBoxKentHeckel .window-controls {
    height: 40px;
    background-color: #333;
    color: #fff;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#ModalAnalyticsKentHeckel .window-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #181818;
    padding: 10px;
    color: white;
}

#ModalAnalyticsKentHeckel .window-controls .title {
    font-size: 16px;
    font-weight: bold;
}

/* ============================================
   MOBILE WARNING MODAL STYLES
   Styled to match Windows XP error dialogs
   Only displays on mobile devices (<=768px)
   ============================================ */

/* Main mobile warning modal container */
/* Centered on screen with fixed dimensions */
#mobileWarningModal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 320px; /* Compact size for mobile */
    max-width: 90vw; /* Don't exceed 90% of viewport width */
    height: auto; /* Auto height to fit content */
    background-color: #e6e6e6; /* Classic Windows error background */
    border: 2px solid #000080; /* Dark blue border like Windows errors */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    display: none; /* Hidden by default, shown by JavaScript */
    overflow: hidden;
    font-family: 'Tahoma', sans-serif;
}

/* Modal header for mobile warning */
/* Matches the style of other error modals */
#modalHeaderMobileWarning {
    background-color: #0044c2; /* Windows blue header */
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
}

/* X button in the header */
/* Properly styled to sit inside the blue header box */
#mobileWarningClose {
    background-color: transparent;
    border: none;
    color: white;
    font-size: 16px;
    font-weight: bold;
    width: 24px;
    height: 24px;
    cursor: pointer;
    text-align: center;
    line-height: 22px;
    border-radius: 3px;
    transition: background-color 0.2s;
}

#mobileWarningClose:hover {
    background-color: #ff0000; /* Red background on hover */
}

/* Error layout specific to mobile warning modal */
/* Ensures proper spacing and prevents content from being cut off */
#mobileWarningModal .error-layout {
    padding: 15px 20px 20px 20px; /* Extra bottom padding */
    min-height: 180px; /* Minimum height to show all content */
    height: auto; /* Auto height instead of calculated */
}

/* Error message in mobile warning modal */
/* Adjust text size for better mobile readability */
#mobileWarningModal .error-message {
    font-size: 13px;
    line-height: 1.4;
    padding: 0 5px;
    margin: 10px 0 15px 0; /* More space below message */
}

/* Error icon in mobile warning modal */
#mobileWarningModal .error-icon img {
    width: 36px;
    height: 36px;
}

/* OK button styling */
/* Matches the error modal OK button */
#mobileWarningOkButton {
    padding: 6px 20px;
    background-color: #e6e6e6;
    border: 1px solid #000000;
    color: black;
    cursor: pointer;
    font-size: 14px;
    font-family: 'Tahoma', sans-serif;
    min-width: 80px; /* Ensure button has minimum width */
}

#mobileWarningOkButton:hover {
    background-color: #d0d0d0;
}

/* Legacy mobile warning classes (kept for compatibility) */
.mobile-warning-modal {
    display: none;
}

.mobile-warning-content {
    display: none;
}

.warning-text {
    display: none;
}

/* ============================================
   COLORSOCIAL MODAL STYLES
   Styled as a notepad text file to match the
   website's retro Windows XP aesthetic
   ============================================ */

/* Main modal container for ColorSocial */
#ModalColorSocial {
    position: fixed;
    left: 25%;
    top: 10%;
    z-index: 3;
    width: 500px;
    height: 600px;
    background-color: #ffffff;
    border: 2px solid #0044c2;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none;
    overflow: hidden;
    font-family: 'Tahoma', sans-serif;
    cursor: grab;
}

/* Content area inside ColorSocial modal */
.colorsocial-content {
    padding: 20px;
    overflow-y: auto;
    height: calc(100% - 80px); /* Account for header and menu bar */
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    line-height: 1.6;
    color: #000000;
    background-color: #ffffff;
}

/* Header section with logo and title */
.colorsocial-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px dashed #cccccc;
}

/* Icon image in the modal - same as desktop icon */
.colorsocial-icon {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    min-width: 60px;
    min-height: 60px;
    border-radius: 10px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    flex-shrink: 0; /* Prevent icon from shrinking */
    object-fit: contain;
}

/* Main title styling */
.colorsocial-title {
    font-family: 'VT323', monospace;
    font-size: 32px;
    color: #FB7F25;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Description text area */
.colorsocial-description {
    margin-bottom: 20px;
}

.colorsocial-description p {
    margin: 10px 0;
}

/* Tagline styling - emphasized text */
.colorsocial-tagline {
    font-weight: bold;
    font-size: 15px;
    color: #FB7F25;
    font-style: italic;
}

/* Call to action text */
.colorsocial-cta {
    font-weight: bold;
    color: #0066cc;
    margin-top: 15px !important;
}

/* Color list showing all 9 color communities */
.color-list {
    list-style: none;
    padding: 0;
    margin: 10px 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.color-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 3px 0;
}

/* Individual color dots representing each community */
.color-dot {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
    border: 1px solid #333;
}

/* Color dot variations for each community */
.color-dot.orange { background-color: #FB7F25; }
.color-dot.red { background-color: #FF4444; }
.color-dot.yellow { background-color: #FFD700; }
.color-dot.green { background-color: #44BB44; }
.color-dot.blue { background-color: #4488FF; }
.color-dot.purple { background-color: #9944FF; }
.color-dot.pink { background-color: #FF66B2; }
.color-dot.white { background-color: #FFFFFF; }
.color-dot.black { background-color: #222222; }

/* Legal links section */
.colorsocial-links {
    background-color: #f5f5f5;
    padding: 15px;
    border-radius: 5px;
    margin: 20px 0;
    border: 1px solid #dddddd;
}

.colorsocial-links p {
    margin: 0 0 10px 0;
    font-weight: bold;
    color: #333;
}

/* Individual legal link styling */
.legal-link {
    display: inline-block;
    margin-right: 20px;
    color: #0066cc;
    text-decoration: none;
    padding: 5px 10px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 3px;
    transition: background-color 0.2s, border-color 0.2s;
}

.legal-link:hover {
    background-color: #e6f0ff;
    border-color: #0066cc;
    text-decoration: underline;
}

/* Footer section with developer credits */
.colorsocial-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 2px dashed #cccccc;
    text-align: center;
    font-size: 11px;
    color: #666666;
}

.colorsocial-footer p {
    margin: 5px 0;
}

/* ============================================
   CHANNELTRACK MODAL STYLES
   Styled with a Notion-inspired theme featuring
   clean, modern design with beige/cream colors
   ============================================ */

/* Main modal container for ChannelTrack */
/* Using Notion's signature warm, neutral color palette */
#ModalChannelTrack {
    position: fixed;
    left: 25%;
    top: 10%;
    z-index: 3;
    width: 600px;
    height: 700px;
    background-color: #FFFFFF;
    border: 1px solid #E5E5E5;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    display: none;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    cursor: grab;
}

/* Window header for ChannelTrack - Notion-themed */
/* Using a subtle beige background like Notion's UI */
#modalHeaderChannelTrack {
    background-color: #FAFAF9;
    color: #37352F;
    border-bottom: 1px solid #E5E5E5;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
}

/* Header content area - contains icon and title */
.channeltrack-header-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Small icon in the header bar */
.channeltrack-header-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

/* Notion-style window control buttons */
/* Using subtle hover states like Notion */
.channeltrack-btn {
    background: transparent;
    border: none;
    color: #6B6B6B;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.channeltrack-btn:hover {
    background-color: #F1F1EF;
    color: #37352F;
}

/* Main content area inside ChannelTrack modal */
/* Styled like a Notion page with clean typography */
.channeltrack-content {
    padding: 32px 40px;
    overflow-y: auto;
    height: calc(100% - 57px); /* Account for header height */
    background-color: #FFFFFF;
    color: #37352F;
    line-height: 1.6;
}

/* Hero section with large icon and title */
/* Centered layout similar to Notion's page headers */
.channeltrack-hero {
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #E5E5E5;
}

/* Large icon in the hero section */
.channeltrack-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* Main title styling - Notion's large heading style */
.channeltrack-title {
    font-size: 40px;
    font-weight: 700;
    color: #37352F;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

/* Domain text below the title */
/* Styled like a Notion link/breadcrumb */
.channeltrack-domain {
    font-size: 14px;
    color: #2383E2;
    margin: 0 0 12px 0;
    font-weight: 500;
    font-family: 'Courier New', monospace;
}

/* Subtitle below the domain */
/* Using Notion's muted text color */
.channeltrack-subtitle {
    font-size: 16px;
    color: #787774;
    margin: 0;
    font-weight: 400;
}

/* Personal story section */
/* Styled like a Notion quote or callout with italics */
.channeltrack-story {
    background-color: #F7F6F3;
    border-left: 3px solid #2383E2;
    padding: 16px 20px;
    border-radius: 4px;
    margin: 0;
}

.channeltrack-story .channeltrack-text {
    font-style: italic;
    font-size: 15px;
    color: #37352F;
    margin: 0;
    line-height: 1.6;
}

/* Section container - adds spacing between content blocks */
.channeltrack-section {
    margin-bottom: 24px;
}

/* Section heading - Notion's heading 2 style */
.channeltrack-heading {
    font-size: 24px;
    font-weight: 600;
    color: #37352F;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

/* Body text - Notion's default text style */
.channeltrack-text {
    font-size: 16px;
    color: #37352F;
    margin: 0 0 12px 0;
    line-height: 1.6;
}

/* Bulleted list - Notion-style with custom bullets */
.channeltrack-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.channeltrack-list li {
    font-size: 16px;
    color: #37352F;
    margin-bottom: 8px;
    padding-left: 24px;
    position: relative;
    line-height: 1.6;
}

/* Custom bullet points - using a subtle dot like Notion */
.channeltrack-list li::before {
    content: '•';
    position: absolute;
    left: 8px;
    color: #787774;
    font-weight: bold;
}

/* Callout box - Notion's colored background block */
/* Using a subtle blue background for the pricing info */
.channeltrack-callout {
    background-color: #F7F6F3;
    border-left: 3px solid #4299E1;
    padding: 16px 20px;
    border-radius: 4px;
    margin: 12px 0;
}

.channeltrack-callout .channeltrack-text {
    margin: 0;
    font-size: 15px;
}

/* Link styling - Notion's blue link color */
.channeltrack-link {
    color: #2383E2;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.2s ease;
}

.channeltrack-link:hover {
    border-bottom-color: #2383E2;
}

/* Footer section at bottom of modal */
.channeltrack-footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #E5E5E5;
    text-align: center;
    font-size: 14px;
    color: #787774;
}

/* Strong emphasis in text */
.channeltrack-text strong {
    font-weight: 600;
    color: #37352F;
}