/* css/menubar.css */
#menu-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 32px; /* Increased from 28px */
    background-color: #e9e4e1; /* Changed from #ffffff */
    /* backdrop-filter: blur(20px); macOS Sonoma style has more prominent blur, but for classic look, solid white is also common */
    /* -webkit-backdrop-filter: blur(20px); */
    border-bottom: 1px solid #dddddd; /* Subtle border like macOS */
    display: flex;
    justify-content: space-between; /* Creates elastic space between left and right */
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
    z-index: 10000; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 13px;
    font-weight: 500; /* Slightly bolder default text */
    color: #000000; /* Black text */
    min-width: 320px; /* Minimum viable width */
    
    /* Touch device optimizations from old website */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on touch devices */
    -webkit-font-smoothing: antialiased;
    text-size-adjust: none; /* Prevent text scaling on mobile */
    user-select: none;
    -webkit-user-select: none;
}

.menu-bar-left,
.menu-bar-right {
    display: flex;
    align-items: center;
    height: 100%;
    flex-shrink: 0; /* Prevent shrinking */
}

/* Ensure all menu text stays on single line */
.menu-item,
.menu-item-text,
.menu-item strong,
#date-time {
    white-space: nowrap; /* Never allow text wrapping */
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-item {
    padding: 2px 8px; /* Default padding, will be overridden for icon items */
    cursor: default;
    color: #000000;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 10ms ease-in-out;
    box-sizing: border-box; /* Ensure consistent box model */
    display: inline-flex; /* Make all menu items behave similarly for alignment */
    align-items: center; /* Vertically center content within each item */
    justify-content: center; /* Horizontally center content (for icons) */
    flex-shrink: 0; /* Prevent individual items from shrinking */
    font-weight: 500; /* Slightly bolder text for menu items */
    
    /* Touch optimizations */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation; /* Improve touch responsiveness */
    min-height: 24px; /* Minimum touch target size for mobile */
}

.menu-item:hover:not(.apple-logo):not(.system-icon):not(#youssefkarim-menu-item):not(#date-time) {
    background-color: #cfcac7;
    color: #000000;
}

/* Enable hover effect specifically for globe icon */
/* #menubar-globe-item-container:hover {
    background-color: #cfcac7;
    border-radius: 4px;
    transition: background-color 10ms ease-in-out;
} */

/* Enable hover effect and rotation for atom icon */
#atom-menu-toggle:hover {
    background-color: #cfcac7;
    border-radius: 4px;
    transition: background-color 10ms ease-in-out;
}

#menubar-atom-icon {
    transition: transform 0.3s ease;
}

#atom-menu-toggle.active #menubar-atom-icon {
    transform: rotate(-90deg);
}

/* Atom dropdown specific styles */
#atom-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 10001;
    min-width: 300px;
    max-width: 400px;
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    padding: 12px;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 8px);
}

.search-bar-container {
    display: flex;
    align-items: center;
    background-color: rgba(80, 80, 80, 0.8);
    border-radius: 16px;
    padding: 6px 10px;
    gap: 8px;
    min-height: 30px;
}

.atom-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    resize: none;
    min-height: 20px;
    max-height: 120px;
    overflow-y: auto;
    line-height: 1.5;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.atom-search-input::-webkit-scrollbar {
    display: none; /* WebKit */
}

.atom-search-input:disabled {
    color: rgba(255, 255, 255, 0.8);
    cursor: default;
}

.atom-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.atom-search-input::selection {
    background-color: rgba(200, 200, 200, 0.3);
    color: #ffffff;
}

.atom-search-input::-moz-selection {
    background-color: rgba(200, 200, 200, 0.3);
    color: #ffffff;
}

.search-arrow-icon {
    width: 24px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: background-color 0.15s ease;
    flex-shrink: 0;
}

.search-arrow-icon:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.menu-item.apple-logo {
    height: 22px; /* Target container height */
    padding: 2px 5px; /* Vertical padding 2px. Horizontal padding reduced to 5px */
}

.menu-item.apple-logo img {
    height: 18px;
    min-height: 18px;
    max-height: 18px;
    width: auto;
    /* vertical-align: middle; /* No longer needed due to flex on parent */
}

.menu-item.system-icon { /* Default for Kickboxing, Globe, Atom - also a container */
    height: 20px; /* Target container height */
    padding: 2px 10px; /* Vertical padding (20-16)/2=2px. Horizontal padding increased to 10px */
}

.menu-item.system-icon img { /* Default for Kickboxing, Globe, Atom IMGs */
    height: 16px;
    min-height: 16px;
    max-height: 16px;
    width: auto;
    /* vertical-align: middle; */
}

/* Specific smaller icons IMG tags */
.menu-item.system-icon img[alt="Speaker"],
.menu-item.system-icon img[alt="Moon"],
/* .menu-item.system-icon img[alt="Wifi"], Removed from this group */
.menu-item.system-icon img[alt="Switch"] {
    height: 13px; /* User specified 12px */
    min-height: 13px;
    max-height: 13px;
}

/* Specific rule for Wifi icon to make it slightly larger */
.menu-item.system-icon img[alt="Wifi"] {
    height: 17px; /* Increased from 13px */
    min-height: 17px;
    max-height: 17px;
    /* width: auto; is inherited or can be explicitly set if needed */
}

.menu-item.system-icon img[alt="Battery"] {
    height: 12px; /* User specified 10px */
    min-height: 12px;
    max-height: 12px;
}

/* Container for the 12px icons (Speaker, Moon, Wifi, Switch) */
.menu-item-small-icon-container { 
    height: 18px; /* Container height for 12px icons */
    padding: 3px 10px; /* Vertical padding (18-12)/2=3px. Horizontal padding increased to 10px */
    /* display: inline-flex, align-items, justify-content inherited or set by .menu-item */
}

/* Specific container for Battery item (10px icon + text) */
#battery-item-wrapper {
    height: 18px; /* Match other small icon containers or adjust as needed */
    padding: 3px 10px; /* Vertical padding (18-10-text_height_impact)/2 approx 3-4px. Horizontal 10px */
    /* display: inline-flex; align-items: center; inherited from .menu-item */
}

#battery-item-wrapper span {
    font-size: 11px;
    color: #000000;
    margin-right: 3px;
    font-weight: 500; /* Slightly bolder battery percentage text */
}

.menu-item strong {
    font-weight: 600; /* Standard bold for active app name like Finder */
}

#date-time {
    text-align: right;
    color: #000000;
    font-variant-numeric: tabular-nums;
    font-weight: 500; /* Slightly bolder date/time text */
    white-space: nowrap; /* Prevent wrapping to multiple lines */
}

/* Dropdown styles remain, but ensure they fit a light theme if activated later */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(245, 245, 245, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.15);
    z-index: 1;
    border-radius: 5px;
    margin-top: 1px; 
    border: 1px solid rgba(0,0,0,0.1);
}

.dropdown-content a {
    color: #000000;
    padding: 6px 15px;
    text-decoration: none;
    display: block;
    font-size: 13px;
}

.dropdown-content a:hover {
    background-color: #007aff; 
    color: white;
}

/* Styles for the new dropdown menu */
.menu-item-dropdown-toggle {
    position: relative; /* For positioning the dropdown */
    padding: 2px 5px; /* Changed to match Globe's original padding for consistent hover capsules */
    cursor: default;
    color: #000000;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 10ms ease-in-out;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500; /* Slightly bolder text for dropdown toggles */
}

.menu-item-dropdown-toggle:hover {
    background-color: #cfcac7; /* Match .menu-item:hover */
}

.dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    min-width: 220px; /* USER: Increased width slightly */
    box-shadow: 0px 0px 0px 0.5px rgba(0, 0, 0, 0.2),
                0px 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 10001;
    border-radius: 10px;
    padding: 6px; /* USER: Padding all around for item spacing */
}

.dropdown-menu.active {
    display: inline-flex; /* Maintained for shrink-wrapping (if min-width not exceeded) */
    flex-direction: column;
    gap: 4px; /* USER: Vertical spacing between items */
    /* align-items: flex-start; /* Maintained commented out */
}

.dropdown-item {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    color: #000000;
    padding: 4px 8px; /* Maintained for internal capsule padding */
    /* margin: 2px 6px; /* USER: Removed, spacing handled by parent padding & gap */
    min-height: 24px;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Item fills parent's (padded) width */
    border-radius: 6px;
    transition: background-color 0.08s ease-in-out;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    gap: 8px; /* Re-instating gap for label-shortcut spacing as per last accepted state */
}

.dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #000000;
}

.dropdown-item-label {
    max-width: 150px; /* Reasonable max width for dropdown labels */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-item-shortcut-text {
    display: inline-block;
    text-align: right;
    width: 30px;
    color: rgb(160, 156, 154);
    font-size: 12px;
    white-space: nowrap; /* Prevent wrapping */
    flex-shrink: 0; /* Don't let shortcuts shrink */
}

/* Specific styling for youssefkarim menu item hover effect */
#youssefkarim-menu-item .hover-name {
    display: none; /* Hidden by default */
}

#youssefkarim-menu-item:hover .original-name {
    display: none; /* Hide original on hover */
}

#youssefkarim-menu-item:hover .hover-name {
    display: inline; /* Show hover name */
}

/* Ensure no background capsule for youssefkarim-menu-item on hover */
#youssefkarim-menu-item:hover {
    background-color: transparent;
}

/* Apple Logo Dropdown Specific Styles */
#apple-logo-menu-toggle {
    /* Removed custom padding to inherit base 2px 8px */
}

#apple-logo-menu-toggle .menu-item.apple-logo:hover {
    /* Ensure the Apple logo itself doesn't get a background highlight if parent toggle gets one */
    background-color: transparent;
}

#apple-logo-dropdown {
    /* Adjustments for Apple logo dropdown if needed, e.g., width */
    min-width: auto; /* Allow content to define width */
    width: 230px; /* Or a specific width if preferred */
    padding: 0; /* Remove parent padding if child has its own */
}

#apple-logo-dropdown .apple-dropdown-content {
    text-align: center;
    padding: 12px;
}

#apple-logo-dropdown .apple-dropdown-content img {
    width: 72px;
    height: auto;
    margin-bottom: 10px;
    display: block; /* For centering with margin auto */
    margin-left: auto;
    margin-right: auto;
}

#apple-logo-dropdown .apple-dropdown-content p {
    margin: 0; /* Reset paragraph margins */
}

#apple-logo-dropdown .apple-dropdown-content p.portfolio-title {
    margin-bottom: 3px; /* Space between title and credit */
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

#apple-logo-dropdown .apple-dropdown-content p.credit-text {
    font-size: 10px;
    font-weight: 500;
    color: #666;
}

/* System Info Grid in Apple Logo Dropdown */
#apple-logo-dropdown .system-info-grid {
    display: grid;
    grid-template-columns: max-content auto;
    gap: 3px 10px; /* Row gap, Column gap */
    margin-top: 12px; /* Space above the grid */
    font-size: 10px; /* Smaller font for system info */
    color: #343434; /* Slightly darker than credit text for readability */
    width: fit-content; /* Shrink-wrap the grid */
    margin-left: auto; /* Center the grid block */
    margin-right: auto; /* Center the grid block */
    margin-bottom: 10px; /* Added space below the grid */
}

#apple-logo-dropdown .system-info-label {
    text-align: right;
    font-weight: 500; /* Slightly bolder labels */
}

#apple-logo-dropdown .system-info-value {
    text-align: left;
}

#apple-logo-dropdown .rights-reserved-text {
    font-size: 9px;
    color: #666 !important; /* Added !important for diagnostics */
    text-align: center;
    margin-top: 2px; /* Reset to a smaller default, space is now primarily above this */
    padding-bottom: 2px; /* Ensure some padding at the very bottom of the dropdown */
}

/* Control Center Dropdown Styles */
#control-center-menu-toggle {
    /* Minor adjustments if needed, but should largely inherit from .menu-item-dropdown-toggle */
    /* Example: if icon needs different padding as a toggle */
    /* Removed custom padding to inherit base 2px 8px */
}

#control-center-dropdown {
    min-width: 280px; /* Wider than standard dropdowns */
    max-width: 320px;
    background-color: rgba(240, 240, 240, 0.75); /* Slightly more opaque or different blur */
    backdrop-filter: blur(25px) saturate(190%);
    -webkit-backdrop-filter: blur(25px) saturate(190%);
    border-radius: 12px; /* Larger radius for panel look */
    padding: 12px; /* Overall padding for the panel content */
    /* Override specific properties from .dropdown-menu if necessary */
    left: 50%; /* Position the left edge of the dropdown at the center of the toggle */
    transform: translateX(-50%); /* Shift the dropdown left by half its own width to center it */
    /* right: 0; Removed for centering */
    /* Add top offset if needed, e.g. top: calc(100% + 5px); */
    max-height: 70vh; /* USER: Added max-height */
    overflow-y: auto; /* USER: Added vertical scroll if content overflows */
}

/* Remove generic .dropdown-item styling if panel content is custom */
#control-center-dropdown .dropdown-item {
    /* display: none; or override completely */
}

/* Control Center Content Styling */
#control-center-dropdown .control-center-content {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Space between sections */
}

.control-center-grid-section {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 8px; /* Gap between columns and tiles vertically */
}

.grid-column-left,
.grid-column-right {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Gap between tiles/groups within a column */
}

/* General Tile Styling */
.control-tile, .control-tile-stacked {
    background-color: rgba(255, 255, 255, 0.35); /* USER: Reduced transparency (increased opacity) */
    backdrop-filter: blur(20px) saturate(180%); /* USER: Slightly increased blur for depth */
    -webkit-backdrop-filter: blur(20px) saturate(180%); /* USER: Slightly increased blur for depth */
    padding: 9.5px; /* Default padding, can be overridden by more specific rules */
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* Shadow and border-radius for standalone tiles */
.control-tile {
    border-radius: 12px; /* Consistent rounded corners */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15), 0 0 0 0.5px rgba(0,0,0,0.15); /* USER: More pronounced shadow */
}

.control-tile:hover, .control-tile-stacked:hover {
    background-color: rgba(255, 255, 255, 0.45); /* USER: Brighter on hover, maintaining reduced transparency */
}

/* Base layout for individual (non-stacked) clickable tiles like DND, Stage Manager, etc. */
.control-tile {
    display: flex; /* Ensures icon and text container are in a row */
    align-items: center; /* Vertically aligns icon and text container */
    gap: 8px; /* Space between icon container and text container */
}

/* For the grouped connectivity tile */
.control-tile-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden; /* Ensures child rounded corners are clipped if group has different radius */
    background-color: transparent; /* USER: Group is transparent */
    backdrop-filter: none; /* USER: No backdrop filter for group */
    -webkit-backdrop-filter: none; /* USER: No backdrop filter for group */
    border-radius: 12px; /* USER: Group provides the rounded corners for the stack */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15), 0 0 0 0.5px rgba(0,0,0,0.15); /* USER: Group provides the outer shadow/border */
    padding: 0; /* Explicitly no padding for the group itself */
}

.control-tile-stacked {
    display: flex;
    align-items: center;
    padding: 9px 12px; /* USER: Reduced vertical padding */
    gap: 8px;
    box-shadow: none; /* USER: No shadow for stacked items */
    border-radius: 0; /* USER: No rounded corners for stacked items */
}

.control-tile-stacked:last-child {
    border-bottom: none;
}

/* Apply specific styling for labels and subtitles within .control-tile-stacked */
.control-tile-stacked .tile-label {
    font-size: 13px;
    font-weight: 500; /* USER: Match DND label boldness (assuming DND is 500) */
    color: #000;
    margin: 0 0 1px 0; /* USER: Reduced space between label and subtitle */
}

.control-tile-stacked .tile-subtitle {
    font-size: 10px;
    color: #555555; /* USER: Dark grey for subtitle */
    margin: 0;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.control-tile-stacked:hover {
    background-color: rgba(0, 0, 0, 0.05); /* Subtle hover for stacked items */
}

/* Horizontal group for Stage Manager & Screen Mirroring */
.control-tile-horizontal-group {
    display: flex;
    gap: 8px;
}

.control-tile.small-horizontal {
    flex: 1;
    padding: 8px;
    min-height: 20px; /* May need adjustment if content is too tall */
    flex-direction: column; /* USER: Stack icon and text vertically */
    align-items: center;   /* USER: Center stack horizontally (already effectively from .control-tile but explicit) */
    justify-content: center; /* USER: Center stack vertically (already set from previous turn) */
    gap: 4px; /* USER: Add gap between icon and text block */
}

/* Hide subtitles specifically for Stage Manager and Screen Mirroring tiles */
#stage-manager-tile .tile-subtitle,
#screen-mirroring-tile .tile-subtitle {
    display: none; /* USER: Hide state text */
}

.control-tile.small-horizontal .tile-icon-container img {
    width: 28px; /* Slightly larger icons for these if they are icon-only */
    height: 28px;
}

.control-tile .tile-icon-container,
.control-tile-stacked .tile-icon-container {
    flex-shrink: 0;
    width: 32px;  /* Define a fixed width for the icon area */
    height: 32px; /* Define a fixed height for the icon area */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Just in case, though max-width/height on img should handle it */
}

.control-tile .tile-icon-container img,
.control-tile-stacked .tile-icon-container img {
    max-width: 100%; /* Ensure image scales down to fit container width */
    max-height: 100%; /* Ensure image scales down to fit container height */
    object-fit: contain; /* Maintain aspect ratio, fit within bounds */
    -webkit-user-drag: none;
    user-select: none;
}

/* Adjust for small-horizontal tiles if their icon size needs to be different or container smaller */
.control-tile.small-horizontal .tile-icon-container {
    width: 32px;  /* USER: Reverted to standard icon container size */
    height: 32px; /* USER: Reverted to standard icon container size */
}

/* Override text container for vertically stacked small-horizontal tiles */
.control-tile.small-horizontal .tile-text-container {
    flex-grow: 0; /* Do not grow, allow natural width */
    text-align: center; /* Center the label text */
    width: auto; /* Or width: 100% if label needs to wrap and stay centered */
}

/* The img inside small-horizontal will still use max-width/height 100% of the above container */

/* Specific icon colors based on user description */
#wifi-tile .tile-icon-container img { /* Assuming a blue Wi-Fi icon */
    /* filter: invert(50%) sepia(100%) saturate(500%) hue-rotate(180deg) brightness(100%) contrast(100%); */ /* Example for blue */
}
#dnd-tile .tile-icon-container img { /* Assuming a purple moon icon */
    /* filter: invert(20%) sepia(80%) saturate(500%) hue-rotate(250deg) brightness(90%) contrast(100%); */ /* Example for purple */
}

.control-tile .tile-text-container {
    flex-grow: 1;
    text-align: left; /* Text within text container is left-aligned */
}

.control-tile .tile-label {
    font-size: 13px;
    font-weight: 500;
    color: #000;
    margin: 0 0 2px 0;
}

.control-tile .tile-subtitle {
    font-size: 11px;
    color: #333; 
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Specific styling for DND tile subtitle */
#dnd-tile .tile-subtitle {
    color: #555555; /* USER: Explicit dark grey for DND state */
}

/* Sliders Section */
.control-center-sliders-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.slider-section-title {
    font-size: 11px;
    font-weight: 600; /* USER: Slightly bolder */
    color: #333; /* USER: Darker for better contrast within tile */
    margin: 0 0 4px 0; /* USER: Adjusted margin for in-tile placement */
    text-transform: uppercase;
    padding-left: 2px; /* USER: Slight padding if inside tile */
}

.slider-group {
    display: flex;
    align-items: stretch; /* USER: Make children (title, content wrapper) take full width */
    gap: 4px; /* USER: Reduced gap for title and content wrapper */
    background-color: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border-radius: 12px; /* Consistent rounded corners */
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.08);
    padding: 8px 10px;
    flex-direction: column;
}

/* USER: New wrapper for slider content (icon-left, track, icon-right) */
.slider-content-wrapper {
    display: flex;
    align-items: center;
    gap: 8px; /* Maintains previous gap for these items */
}

.slider-icon-left img,
.slider-icon-right img {
    width: 16px; /* Smaller icons for sliders */
    height: 16px;
    object-fit: contain;
    opacity: 0.7;
}

.slider-track-wrapper {
    flex-grow: 1;
    position: relative; /* For positioning the fill element */
    height: 18px; /* USER: Changed from 16px to 18px to match thumb */
    display: flex;
    align-items: center;
    background-color: #e0e0e0; /* USER: Moved gray background here */
    border-radius: 9px;       /* USER: Added border-radius for wrapper */
}

.slider-fill {
    position: absolute; /* USER: Ensured absolute positioning */
    left: 0;
    top: 0; /* USER: Changed from top: 50%; transform: translateY(-50%); */
    height: 100%; /* USER: Changed from 18px to 100% of wrapper */
    background: #fff; /* White fill for left part */
    border-radius: 9px; /* USER: Changed from 6px for 18px height */
    pointer-events: none;
    z-index: 1; /* USER: Increased z-index from 0 to 1 */
}

.control-slider {
    width: 100%;
    height: 100%; /* USER: Changed from 18px to 100% of wrapper */
    -webkit-appearance: none;
    appearance: none;
    background: transparent; /* USER: Ensure background is transparent */
    border-radius: 9px; /* USER: Changed from 6px for 18px height */
    outline: none;
    cursor: pointer;
    position: relative; /* Ensure thumb is above fill */
    z-index: 2; /* USER: Increased z-index from 1 to 2 */
}

/* Ensure the runnable track uses the full width and has no interfering styles */
.control-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 18px; /* Match thumb and wrapper height */
    cursor: pointer;
    background: transparent; /* The .slider-track-wrapper provides the gray background */
    border-radius: 9px; /* Match wrapper */
    border: none; /* No border on the track itself */
    padding: 0; /* No padding on the track itself */
}

.control-slider::-moz-range-track {
    width: 100%;
    height: 18px;
    cursor: pointer;
    background: transparent;
    border-radius: 9px;
    border: none;
    padding: 0;
    /* For Firefox, margin might also be needed if there's default spacing */
    margin: 0;
}

.control-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px; /* Slightly larger thumb */
    height: 18px;
    background: #fff;
    border-radius: 50%;
    border: 0.5px solid rgba(0,0,0,0.15); /* Subtle border for thumb */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Subtle shadow */
    /* Consider adding an inner ring if possible with pseudo-elements or border tricks */
}

.control-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    border: 0.5px solid rgba(0,0,0,0.15);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    cursor: pointer;
}

/* Now Playing Section */
.control-center-now-playing-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.25); /* Match tile background */
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border-radius: 12px; /* Consistent rounded corners */
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.08);
    padding: 8px 10px;
}

.now-playing-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.now-playing-left .app-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 6px;
}

.now-playing-left .app-label {
    font-size: 13px;
    font-weight: 500;
    color: #000;
    margin: 0;
    -webkit-user-drag: none;
    user-select: none;
}

.now-playing-right {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between play/pause and forward */
}

.now-playing-right #play-pause-btn.play-pause-button { /* Increased specificity */
    width: 14px; /* USER: Further reduced size to match forward button */
    height: 14px; /* USER: Further reduced size to match forward button */
    object-fit: contain;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.now-playing-right .play-pause-button:hover {
    opacity: 0.7;
}

.now-playing-right .media-control-button {
    width: 18px; /* USER: Proportionally reduced size for other media buttons like forward */
    height: 18px; /* USER: Proportionally reduced size for other media buttons like forward */
    object-fit: contain;
    cursor: pointer;
    transition: opacity 0.15s ease;
    -webkit-user-drag: none;
    user-select: none;
}

.now-playing-right .media-control-button:hover {
    opacity: 0.7;
}

/* Style adjustments for AirPlay tile in slider group */
#sound-slider-group .slider-icon-right.control-tile {
    padding: 0; 
    background-color: transparent;
    cursor: pointer;
    border: none; /* USER: Explicitly remove border */
    box-shadow: none; /* USER: Explicitly remove box-shadow */
}

#sound-slider-group .slider-icon-right.control-tile:hover {
    background-color: transparent; /* No hover background for AirPlay icon itself */
}

#sound-slider-group .slider-icon-right.control-tile img {
    width: 20px; /* Adjust AirPlay icon size if needed */
    height: 20px;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

#sound-slider-group .slider-icon-right.control-tile:hover img {
    opacity: 1;
}

/* Ensure text container in small horizontal tiles behaves like normal tiles - MODIFIED */
.control-tile.small-horizontal .tile-text-container {
    text-align: center; /* USER: Center the label text */
    width: 100%; /* Ensure text container can use available width for centering */
}

.control-tile.small-horizontal .tile-label {
    font-size: 13px;
    font-weight: 500;
    color: #000;
    margin: 0 0 2px 0;
}

.control-tile.small-horizontal .tile-subtitle {
    font-size: 11px;
    color: #333; 
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Globe Dropdown Specific Styles */
#globe-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 10001;
    min-width: 250px;
    width: 270px;
    padding: 12px;
}

#globe-dropdown .globe-dropdown-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#globe-dropdown .location-map-container {
    width: 100%;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#globe-dropdown .globe-3d-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#globe-dropdown .globe-3d-container pre {
    font-size: 4px;
    line-height: 4px;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.8);
    white-space: pre;
    font-family: monospace;
    transform: scale(0.8);
    user-select: none;
    cursor: grab;
    margin: 0;
}

#globe-dropdown .globe-3d-container pre:active {
    cursor: grabbing;
}

#globe-dropdown .location-text {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    color: #000000;
    margin: 0;
    text-align: center;
    font-weight: 500;
}

/* Globe dropdown toggle specific padding to match atom icon */
#globe-menu-toggle {
    /* Removed custom padding to inherit base 2px 8px */
}

/* Progressive responsive breakpoints - gradual removal with smooth sizing */

/* Level 1: ≤1199px - Remove Atom */
@media (max-width: 1199px) {
    #atom-menu-toggle {
        display: none; /* Remove Atom from right side */
    }
}

/* Level 2: ≤1100px - Remove About, Globe */
@media (max-width: 1100px) {
    #about-menu-item {
        display: none; /* Remove About from left side */
    }
    
    #globe-menu-toggle {
        display: none; /* Remove Globe from right side */
    }
}

/* Level 3: ≤1000px - Remove Contact, Speaker, Moon */
@media (max-width: 1000px) {
    #contact-menu-toggle {
        display: none; /* Remove Contact from left side */
    }
    
    #menubar-speaker-item-container {
        display: none; /* Remove Speaker from right side */
    }
    
    #menubar-moon-item-container {
        display: none; /* Remove Moon from right side */
    }
}

/* Level 4: ≤900px - Remove CV, Battery, Wifi */
@media (max-width: 900px) {
    #cv-menu-toggle {
        display: none; /* Remove CV from left side */
    }
    
    #battery-item-wrapper {
        display: none; /* Remove Battery from right side */
    }
    
    #menubar-wifi-item-container {
        display: none; /* Remove Wifi from right side */
    }
}

/* Level 5: ≤850px - Remove Switch (Control Center) */
@media (max-width: 850px) {
    #control-center-menu-toggle {
        display: none; /* Remove Control Center from right side */
    }
}

/* Mobile touch device optimizations - smooth transitions */
@media (max-width: 600px) {
    #menu-bar {
        height: 32px; /* Keep original height */
        padding: 0 15px; /* Keep original padding */
        /* Remove font-size to keep original 13px from main rule */
    }
    
    .menu-item {
        padding: 2px 5px; /* Match consistent hover padding */
        /* Remove min-height and border-radius to avoid changes */
    }
    
    .menu-item.apple-logo {
        height: 22px; /* Keep original height */
        padding: 2px 5px; /* Keep consistent hover padding */
    }
    
    .menu-item.apple-logo img {
        height: 18px; /* Keep original size */
        min-height: 18px;
        max-height: 18px;
    }
    
    #date-time {
        /* Remove explicit font-size to keep inheriting 13px from #menu-bar */
        padding: 0; /* Keep original padding (no explicit padding set originally) */
        /* Remove min-height and display changes */
    }
}

@media (max-width: 540px) {
    #menu-bar {
        height: 36px; /* Larger height for better touch targets */
        padding: 0 12px; /* Slightly reduced padding */
        /* Remove font-size to keep original 13px */
    }
    
    .menu-item {
        padding: 2px 5px; /* Keep consistent hover padding */
        min-height: 28px; /* Larger minimum touch target */
        border-radius: 6px; /* Slightly larger radius for touch */
    }
    
    .menu-item.apple-logo {
        height: 24px;
        padding: 2px 5px; /* Keep consistent hover padding */
    }
    
    .menu-item.apple-logo img {
        height: 16px;
        min-height: 16px;
        max-height: 16px;
    }
    
    .menu-item.system-icon {
        height: 24px;
        padding: 4px 8px; /* Better touch spacing */
        min-width: 32px; /* Minimum touch width */
    }
    
    .menu-item.system-icon img {
        height: 16px;
        min-height: 16px;
        max-height: 16px;
    }
    
    .menu-item-small-icon-container {
        height: 24px;
        padding: 4px 8px;
        min-width: 32px;
    }
    
    #battery-item-wrapper {
        height: 24px;
        padding: 4px 8px;
        min-width: 40px; /* Wider for text + icon */
    }
    
    #battery-item-wrapper span {
        font-size: 10px;
        margin-right: 2px;
    }
    
    #date-time {
        /* Remove font-size to keep inheriting 13px */
        padding: 4px 6px;
        min-height: 28px;
        display: flex;
        align-items: center;
    }
    
    /* Better touch targets for dropdowns */
    .menu-item-dropdown-toggle {
        min-height: 28px;
        padding: 2px 5px; /* Keep consistent with base rule instead of 4px 8px */
    }
    
    .dropdown-menu {
        min-width: 240px; /* Wider dropdowns for touch */
        padding: 8px; /* More padding for touch */
    }
    
    .dropdown-item {
        padding: 8px 12px; /* Larger touch targets in dropdowns */
        min-height: 32px; /* Better touch height */
        border-radius: 8px; /* Larger radius for touch */
    }
}

/* Level 6a: ≤480px - Start gradual transition toward mobile */
@media (max-width: 480px) {
    #menu-bar {
        height: 30px; /* Start reducing height gradually */
        padding: 0 10px; /* Start reducing padding gradually */
    }
    
    .menu-item {
        padding: 2px 5px; /* Keep consistent hover padding */
    }
    
    .menu-item.apple-logo {
        padding: 2px 5px; /* Keep consistent hover padding */
    }
    
    .menu-item.apple-logo img {
        height: 17px;
        min-height: 17px;
        max-height: 17px;
    }
    
    #date-time {
        /* Remove font-size to keep inheriting 13px */
        padding: 2.5px 3px;
    }
}

/* Level 6b: ≤470px - Continue gradual transition */
@media (max-width: 470px) {
    #youssefkarim-menu-item,
    a[href="https://youssefkarim.com/"] {
        opacity: 0.5; /* Start fading instead of suddenly hiding */
        transition: opacity 0.3s ease;
    }
    
    #menu-bar {
        height: 29px;
        padding: 0 9px;
    }
    
    .menu-item {
        padding: 2px 5px; /* Keep consistent hover padding */
    }
    
    .menu-item.apple-logo {
        padding: 2px 5px; /* Keep consistent hover padding */
    }
    
    #date-time {
        /* Remove font-size to keep inheriting 13px */
        padding: 2.2px 2.5px;
    }
}

/* Level 6c: ≤460px - Complete the transition */
@media (max-width: 460px) {
    #youssefkarim-menu-item,
    a[href="https://youssefkarim.com/"] {
        display: none !important; /* Now hide completely */
    }
    
    #menu-bar {
        height: 28px;
        padding: 0 8px;
    }
    
    .menu-item {
        padding: 2px 5px; /* Keep consistent hover padding */
    }
    
    .menu-item.apple-logo {
        padding: 2px 5px; /* Keep consistent hover padding */
    }
    
    .menu-item.apple-logo img {
        height: 16px;
        min-height: 16px;
        max-height: 16px;
    }
    
    #date-time {
        /* Remove font-size to keep inheriting 13px */
        padding: 2px 2px;
    }
}

/* Extra small mobile devices */
@media (max-width: 380px) {
    #menu-bar {
        height: 40px; /* Even taller for small screens */
        padding: 0 8px;
    }
    
    .menu-item {
        padding: 2px 5px; /* Keep consistent hover padding */
        min-height: 32px;
    }
    
    .menu-item.apple-logo {
        padding: 2px 5px; /* Keep consistent hover padding */
        min-height: 32px;
    }
    
    #date-time {
        padding: 6px 8px;
        min-height: 32px;
        /* Remove font-size to keep inheriting 13px */
    }
}

/* Ensure dropdown text elements don't wrap */
.menu-item-text {
    max-width: 120px; /* Reasonable max width for menu items */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block; /* Ensure proper layout */
}

.dropdown-item-label {
    max-width: 150px; /* Reasonable max width for dropdown labels */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Apple logo link mode styling */
#apple-logo-menu-toggle.link-mode:hover {
    background-color: #cfcac7;
    border-radius: 4px;
    transition: background-color 10ms ease-in-out;
    padding: 2px 4px; /* Reduced vertical padding for tighter capsule */
}

/* Add relative positioning to specific toggle containers for dropdown positioning */
#atom-menu-toggle {
    position: relative;
}

#globe-menu-toggle {
    position: relative;
}

/* Dropdown container for proper positioning */
.dropdown-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}