@charset "utf-8";

html {
    height: 100%;
    height: 100dvh;
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

:root {
    --theme-lightness-offset: 0%;
    --theme-primary: color-mix(in srgb, #ff9933, white var(--theme-lightness-offset));
    /* LCARS Orange */
    --theme-secondary: color-mix(in srgb, #cc99cc, white var(--theme-lightness-offset));
    /* LCARS Purple */
    --theme-accent: color-mix(in srgb, #99ccff, white var(--theme-lightness-offset));
    /* LCARS Blue */
    --theme-danger: color-mix(in srgb, #ff3333, white var(--theme-lightness-offset));
    /* Brightened LCARS Red for better contrast */
    --theme-highlight: color-mix(in srgb, #ffcc00, white var(--theme-lightness-offset));
    /* LCARS Gold */
    --theme-success: color-mix(in srgb, #99cc66, white var(--theme-lightness-offset));
    /* LCARS Green */
    --theme-bg: #000000;
    --theme-text: #ddeeff;
    --theme-font: 'Antonio', 'Inter', sans-serif;
    --theme-chat-font: 'Antonio', 'Inter', sans-serif;
    --theme-border-radius: var(--theme-border-radius);
    --connected-users-width: 220px;
    --tooltip-bg: rgba(0, 0, 0, 0.9);
    --tooltip-border: var(--theme-primary);
    --tooltip-text: var(--theme-text);
    --global-brightness: 1.0;
}

body {
    filter: brightness(var(--global-brightness));
    transition: filter 0.3s ease;
}

/* Custom LCARS Tooltip with Anchor Positioning */
#lcars-tooltip {
    position: fixed;

    top: anchor(bottom);
    left: anchor(center);
    translate: -50% 5px;
    background: var(--tooltip-bg);
    color: var(--tooltip-text);
    padding: 6px 12px;
    border-left: 6px solid var(--tooltip-border);
    border-radius: 4px;
    font-family: var(--theme-font);
    font-size: 0.9em;
    pointer-events: none;
    z-index: 10001;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease, translate 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

#lcars-tooltip.visible {
    opacity: 1;
    translate: -50% 10px;
}

#lcars-tooltip::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    translate: -50% 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--tooltip-border);
}

/* Splash Screen */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 1s ease-out;
}

#splash-screen.fade-out {
    opacity: 0;
}

.splash-content {
    text-align: center;
    width: 100%;
    max-width: 1200px;
    padding: 20px;
}

.splash-img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    margin-bottom: 20px;
    border-top: 4px solid var(--theme-primary);
    border-bottom: 4px solid var(--theme-primary);
    padding: 10px 0;
}

.splash-text {
    font-family: 'Antonio', sans-serif;
    color: var(--theme-primary);
    font-size: 2em;
    letter-spacing: 4px;
    margin-bottom: 20px;
    animation: splash-pulse 2s infinite ease-in-out;
}

.splash-bar-row {
    display: flex;
    width: 100%;
    height: 20px;
    gap: 10px;
    align-items: center;
}

.splash-bar {
    flex: 1;
    height: 100%;
    background: var(--theme-accent);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.splash-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: splash-progress 1.5s infinite linear;
}

.splash-bar-side {
    width: 80px;
    height: 100%;
    background: var(--theme-secondary);
    border-radius: 10px;
}

@keyframes splash-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes splash-progress {
    from {
        left: -100%;
    }

    to {
        left: 100%;
    }
}


body.theme-borg {
    --theme-primary: #00ff00;
    /* Borg Green */
    --theme-secondary: #008800;
    /* Borg Mid Green */
    --theme-accent: #004400;
    /* Borg Dark Green */
    --theme-danger: #ff0000;
    --theme-highlight: #00ff00;
    --theme-font: 'Courier New', Courier, monospace;
    --theme-chat-font: 'Courier New', Courier, monospace;
    --theme-border-radius: 0px;
    /* Sharp Borg tech */
}

body.theme-shuffled {
    /* Keep original LCARS colors when shuffled as requested */
    --theme-primary: #ff9933;
    --theme-secondary: #cc99cc;
    --theme-accent: #99ccff;
    --theme-danger: #cc0000;
    --theme-highlight: #ffcc00;
}

body.theme-win9 {
    --theme-bg: #008080;
    /* Classic Win95 Teal */
    --theme-primary: #000080;
    /* Navy Blue */
    --theme-secondary: #808080;
    /* Gray */
    --theme-accent: #ffffff;
    --theme-danger: #ff0000;
    --theme-highlight: #000080;
    --theme-surface: #c0c0c0;
    /* Silver / Gray Surface */
    --theme-text: #000000;
    --theme-font: 'MS Sans Serif', 'Tahoma', 'Segoe UI', sans-serif;
    --theme-chat-font: 'Lucida Console', 'Courier New', monospace;
    --theme-border-radius: 0px;
    background: var(--theme-bg);
    color: var(--theme-text);
    text-transform: none;
    letter-spacing: normal;
}

body.theme-win9 ::selection {
    background: #000080;
    color: #ffffff;
}

/* Win95 Scrollbars */
body.theme-win9 ::-webkit-scrollbar {
    width: 16px;
    height: 16px;
    background: #dfdfdf;
}

body.theme-win9 ::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080;
}

body.theme-win9 ::-webkit-scrollbar-button {
    background: #c0c0c0;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    width: 16px;
    height: 16px;
}

body.theme-win9 .header-container {
    background: var(--theme-surface);
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    margin: 4px;
    padding: 2px;
}

body.theme-win9 h1 {
    font-size: 1.1em;
    padding: 3px 6px;
    background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
    color: #ffffff;
    margin: 2px;
    text-shadow: none;
    font-weight: bold;
}

body.theme-win9 .nav-btn {
    background: var(--theme-surface);
    color: #000;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    border-radius: 0;
    height: 28px;
    font-size: 0.9em;
    box-shadow: none;
    margin: 2px;
    padding: 2px 8px;
}

body.theme-win9 .nav-btn.active {
    background: var(--theme-surface);
    border-color: #808080 #ffffff #ffffff #808080;
    font-weight: bold;
    padding: 3px 7px 1px 9px;
    /* Shift on click */
}

body.theme-win9 .lcars-button,
body.theme-win9 button {
    background: var(--theme-surface);
    color: #000;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    border-radius: 0;
    font-family: var(--theme-font);
    text-transform: none;
}

body.theme-win9 .lcars-button:active,
body.theme-win9 button:active {
    border-color: #808080 #ffffff #ffffff #808080;
}

body.theme-win9 #main-quad-container {
    background: var(--theme-bg);
    padding: 2px;
}

body.theme-win9 .quad-panel-slot {
    background: var(--theme-surface);
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    margin: 2px;
    border-radius: 0 !important;
}

body.theme-win9 [id$="-panel"],
body.theme-win9 #chat-area,
body.theme-win9 .panel-content {
    border-radius: 0 !important;
}

body.theme-win9 .window-title-bar {
    background: #808080;
    /* Inactive by default */
    color: #dfdfdf;
    padding: 2px 4px;
    border-bottom: none;
    margin-bottom: 2px;
}

body.theme-win9 .active-panel .window-title-bar {
    background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
    color: #ffffff;
}

/* UI Animations and View Transitions */
[id$="-panel"],
#chat-area {
    view-transition-name: var(--vt-name);
}

#chat-area {
    --vt-name: panel-chat;
}

#servers-panel {
    --vt-name: panel-servers;
}

#station-panel {
    --vt-name: panel-station;
}

#graphs-panel {
    --vt-name: panel-graphs;
}

#comms-panel {
    --vt-name: panel-comms;
}

#sensors-panel {
    --vt-name: panel-sensors;
}

#settings-panel {
    --vt-name: panel-settings;
}

#intel-panel {
    --vt-name: panel-intel;
}

#weather-panel {
    --vt-name: panel-weather;
}

body.ui-animations-enabled .quad-panel-slot {
    transition: flex 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
        width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
        height 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
        opacity 0.2s ease;
}

body.ui-animations-enabled .section-panel {
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
        opacity 0.2s ease;
}

/* Win95 Zoom Effect Override for View Transitions or Manual Animations */
body.theme-win9.ui-animations-enabled .quad-panel-slot.maximized {
    animation: win95-zoom-in 0.25s ease-out;
}

body.theme-win9.ui-animations-enabled .quad-panel-slot.mini-mode {
    animation: win95-zoom-out 0.25s ease-in;
}

/* Ensure View Transitions don't look weird on Win95 (which expects sharp snaps) */
body.theme-win9 ::view-transition-group(*) {
    animation-duration: 0s !important;
}

@keyframes win95-zoom-in {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
        border: 1px solid #000;
    }

    100% {
        transform: scale(1);
        opacity: 1;
        border: 2px solid;
    }
}

@keyframes win95-zoom-out {
    0% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

body.theme-win9 #sticky-log-container {
    background: var(--theme-surface);
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #808080;
    color: #000;
}

body.theme-win9 .bottom-status-bar {
    background: var(--theme-surface);
    border-top: 1px solid #ffffff;
}

body.theme-win9 .chat-view {
    background: #ffffff;
    color: #000;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    font-family: var(--theme-chat-font);
}

body.theme-win9 input[type="text"],
body.theme-win9 input[type="password"],
body.theme-win9 input[type="number"],
body.theme-win9 textarea,
body.theme-win9 select {
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    background: #ffffff;
    color: #000;
    padding: 2px 4px;
    border-radius: 0;
}

body.theme-win9 .bottom-status-bar {
    background: var(--theme-surface);
    border-top: 1px solid #ffffff;
    box-shadow: inset 0 1px #dfdfdf;
    padding: 2px 4px;
    display: flex;
    align-items: center;
}

body.theme-win9 #status-nav-container .nav-btn {
    font-weight: normal;
    font-size: 0.85em;
    min-width: 100px;
    justify-content: flex-start;
    padding-left: 5px;
}

/* Win95 'Start' button equivalent for the first nav item */
body.theme-win9 .nav-btn:first-child {
    font-weight: bold;
}

body.theme-win9 .federation-logo {
    filter: invert(1) brightness(0.2);
}

body.theme-tron {
    --theme-primary: #00ffff;
    /* Neon Cyan */
    --theme-secondary: #ff9a00;
    /* Neon Orange */
    --theme-accent: #ffffff;
    /* White highlights */
    --theme-danger: #ff00ff;
    /* Neon Magenta */
    --theme-highlight: #00ffff;
    --theme-bg: #00050a;
    /* Very dark blue */
    --theme-font: 'Antonio', 'Inter', sans-serif;
    --theme-border-radius: 0px;
    background: var(--theme-bg);
}

/* Perspective Grid Background */
body.theme-tron::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 200%;
    /* Wider for animation */
    height: 200%;
    /* Taller for animation */
    background-image:
        linear-gradient(rgba(0, 255, 255, 0.2) 2px, transparent 2px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.2) 2px, transparent 2px);
    background-size: 60px 60px;
    background-position: center bottom;
    transform: perspective(500px) rotateX(65deg) translateY(0);
    transform-origin: center center;
    z-index: -2;
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 70%);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 70%);
    animation: grid-move 4s linear infinite;
}

@keyframes grid-move {
    from {
        background-position: center 0;
    }

    to {
        background-position: center 60px;
    }
}

/* Scanlines Overlay */
body.theme-tron::after {
    content: " ";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    background-size: 100% 3px, 4px 100%;
    pointer-events: none;
    z-index: 2000;
    opacity: 0.8;
    animation: scanline 10s linear infinite;
}

@keyframes scanline {
    0% {
        background-position: 0 0;
    }

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

body.theme-tron .main-flex {
    border: 2px solid var(--theme-primary);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.4), inset 0 0 30px rgba(0, 255, 255, 0.2);
    background: rgba(0, 5, 10, 0.85);
    backdrop-filter: blur(5px);
    border-left-width: 5px;
    border-bottom-width: 5px;
}

body.theme-tron #connected-users {
    border: 1px solid var(--theme-secondary);
    box-shadow: 0 0 15px rgba(255, 154, 0, 0.2);
    border-top: 10px solid var(--theme-secondary);
}

body.theme-tron .chat-area {
    border: 1px solid var(--theme-primary);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
    border-top: 10px solid var(--theme-primary);
}

body.theme-tron .chat-view {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
}

body.theme-tron ::-webkit-scrollbar-thumb {
    background: var(--theme-primary);
    box-shadow: 0 0 10px var(--theme-primary);
}

.status-badge.error {
    background-color: var(--theme-danger);
    box-shadow: 0 0 10px var(--theme-danger);
    animation: pulse-red 1s infinite;
}

body.theme-tron .lcars-button,
body.theme-tron #submitBtn,
body.theme-tron .room-btn,
body.theme-tron .tab-btn {
    border: 1px solid var(--theme-primary);
    background: rgba(0, 255, 255, 0.05);
    color: var(--theme-primary);
    border-radius: 4px;
    text-shadow: 0 0 10px var(--theme-primary);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
    transition: all 0.3s ease;
    animation: neon-pulse 2s infinite alternate;
}

@keyframes neon-pulse {
    from {
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
    }

    to {
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
    }
}

body.theme-tron .lcars-button:hover,
body.theme-tron #submitBtn:hover,
body.theme-tron .room-btn:hover {
    background: var(--theme-primary);
    color: #000;
    box-shadow: 0 0 30px var(--theme-primary);
    text-shadow: none;
}

body.theme-tron .ac-toggle,
body.theme-tron .e2e-toggle-container {
    background: rgba(0, 5, 10, 0.8);
    border: 1px solid var(--theme-secondary);
    color: var(--theme-secondary);
    box-shadow: 0 0 10px rgba(255, 154, 0, 0.2);
}

body.theme-tron .chat-text {
    color: #fff;
    text-shadow: 0 0 2px #00ffff;
}

body.theme-tron .chat-name {
    color: var(--theme-secondary);
    text-shadow: 0 0 2px var(--theme-secondary);
}

body.theme-tron .chat-time {
    color: var(--theme-primary);
    opacity: 0.8;
}

body.theme-tron #sticky-log-container {
    border-top: 2px solid var(--theme-primary);
    box-shadow: 0 -10px 30px rgba(0, 255, 255, 0.2);
}

body {
    font-family: var(--theme-font);
    background: var(--theme-bg);
    color: var(--theme-text);
    border-color: var(--theme-danger);
    color: var(--theme-danger);
    padding: 10px 10px 0 10px;
    height: 100%;
    height: 100dvh;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.header-container {
    flex: 0 0 auto;
    z-index: 100;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 15px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 4px solid var(--theme-highlight);
    margin-bottom: 10px;
    position: relative;
    gap: 10px;
    transition: all 0.3s ease;
}

/* Window Controls Overlay (Titlebar) */
#titlebar-area {
    position: fixed;
    top: env(titlebar-area-y, 0);
    left: env(titlebar-area-x, 0);
    width: env(titlebar-area-width, 100%);
    height: env(titlebar-area-height, 0);
    app-region: drag;
    -webkit-app-region: drag;
    z-index: 10002;
    background: transparent;
    pointer-events: none;
}

#titlebar-area * {
    app-region: no-drag;
    -webkit-app-region: no-drag;
    pointer-events: auto;
}

body.nav-minimized .header-container {
    padding: 5px 15px;
}

.header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

body.nav-minimized .header-main {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 20px;
}

body.nav-minimized h1 {
    font-size: 1.8em;
}

/* Shrink Mode logic */
body.shrink-mode .header-container {
    display: none !important;
}

body.shrink-mode .main-flex {
    border-top: 15px solid var(--theme-primary);
    border-radius: 0 0 0 var(--theme-border-radius);
    padding-top: 10px;
}

/* Untabbed Mode logic */
body.untabbed-mode .main-nav {
    display: none !important;
}

body.untabbed-mode .header-container {
    padding-bottom: 5px;
    border-bottom: 2px solid var(--theme-highlight);
    margin-bottom: 5px;
}

/* Nav Actions in Status Bar */
#status-nav-container .nav-btn {
    font-size: 0.9em;
    padding: 2px 10px;
    height: 24px;
    min-width: 60px;
    border-radius: 12px;
}

.nav-settings-btn {
    min-width: 40px !important;
}

@media (max-width: 768px) {
    .header-main {
        flex-direction: column;
        align-items: flex-start;
    }

    .main-nav {
        justify-content: center;
        flex-wrap: wrap;
    }

    .nav-btn {
        height: 40px;
        font-size: 1.1em;
        border-radius: 20px !important;
        margin: 2px !important;
        flex: 1 1 45%;
    }

    #connected-users {
        flex: 0 0 180px;
        width: 180px;
        min-width: 180px;
    }
}

h1 {
    margin: 0;
    line-height: 1;
    font-size: 2.5em;
    color: var(--theme-primary);
    text-shadow: 0 0 10px rgba(255, 153, 51, 0.3);
}

.main-nav {
    display: flex;
    gap: 10px;
    width: 100%;
    transition: all 0.3s ease;
}

body.nav-minimized .main-nav {
    width: auto;
    flex: 1;
    justify-content: center;
    gap: 5px;
}

.nav-btn {
    flex: 1;
    height: 50px;
    background: var(--theme-primary);
    color: #000;
    border: none;
    font-family: var(--theme-font);
    font-size: 1.5em;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 25px 0 0 25px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

body.nav-minimized .nav-btn {
    flex: 0 0 40px;
    height: 36px;
    border-radius: 4px !important;
    margin: 0 !important;
    font-size: 1.2em;
}

body.nav-minimized .nav-btn span {
    display: none;
}

.nav-btn::before {
    display: none;
}

body.nav-minimized .nav-btn::before {
    display: none !important;
}

body.nav-minimized .nav-btn {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80%;
}

body.nav-minimized #nav-comms {
    background-image: url('../assets/img/icon_comms.png');
}

body.nav-minimized #nav-sensors {
    background-image: url('../assets/img/icon_sensors.png');
}

body.nav-minimized #nav-repository {
    background-image: url('../assets/img/icon_repository.png');
}

body.nav-minimized #nav-settings {
    background-image: url('../assets/img/icon_engineering.png');
}

body.nav-minimized #nav-login {
    background-image: url('../assets/img/icon_access.png');
}

.nav-btn:not(:first-child) {
    border-radius: 0;
    margin-left: 2px;
}

.nav-btn:last-of-type:not(.settings-btn) {
    border-radius: 0 25px 25px 0;
}

.nav-btn:hover {
    filter: brightness(1.2);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.5), 0 0 15px var(--theme-primary);
}

.nav-btn:active {
    transform: translateY(1px);
}

@keyframes blink-anim {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
        background-color: #fff;
        color: #000;
    }

    100% {
        opacity: 1;
    }
}

.blink-text {
    animation: blink-anim 1s infinite;
}

.lcars-button:active,
.nav-btn:active,
.room-btn:active,
#submitBtn:active {
    animation: blink-anim 0.1s steps(2, start);
    transform: translateY(1px);
}

.nav-btn.active {
    background: #000;
    color: var(--theme-primary);
    box-shadow: 0 0 20px rgba(255, 153, 51, 0.5), inset 0 0 15px rgba(255, 153, 51, 0.4);
    border: 2px solid var(--theme-highlight);
    text-shadow: 0 0 8px var(--theme-primary);
}

/* Icon Mode Styles */
body.icon-mode-icons .nav-btn span,
body.icon-mode-both .nav-btn span {
    display: none;
}

body.icon-mode-icons .nav-btn::after,
body.icon-mode-both .nav-btn::after {
    content: attr(data-icon);
    display: block;
    font-size: 1.4em;
}

body.icon-mode-both .nav-btn span {
    display: inline;
    /* Show both by default in both mode */
}

body.icon-mode-icons .lcars-button[data-icon]::after,
body.icon-mode-both .lcars-button[data-icon]::after {
    content: attr(data-icon);
    margin-left: 5px;
}

/* Responsive Icon Behavior */
@media (max-width: 600px) {
    .nav-btn span {
        display: none !important;
    }

    .nav-btn::after {
        content: attr(data-icon) !important;
        display: block !important;
        font-size: 1.2em !important;
    }
}

/* Win95 Panel Control Icons */
body.theme-win9 .panel-control-btn {
    font-family: 'Marlett', 'MS Sans Serif', sans-serif;
    padding: 0;
    line-height: normal;
    border-radius: 2px !important;
    background: #c0c0c0 !important;
    color: #000 !important;
    border: 1px solid !important;
    border-color: #fff #808080 #808080 #fff !important;
    /* Raised effect */
    width: 16px;
    height: 14px;
    min-width: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px !important;
    box-shadow: none !important;
    margin: 1px;
}

body.theme-win9 .panel-control-btn:active {
    border-color: #808080 #fff #fff #808080 !important;
    /* Inset effect */
}

body.theme-win9 .btn-minimize::after {
    content: "0";
}

body.theme-win9 .btn-maximize::after {
    content: "1";
}

body.theme-win9 .btn-restore::after {
    content: "2";
}

body.theme-win9 .btn-close::after {
    content: "r";
}

body.theme-win9 .btn-close {
    margin-left: 2px;
}

/* Fallback if Marlett not available */
body.theme-win9 .btn-minimize {
    text-indent: -9999px;
    position: relative;
}

body.theme-win9 .btn-minimize::before {
    content: "_";
    text-indent: 0;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    font-weight: bold;
}

body.theme-win9 .btn-maximize {
    text-indent: -9999px;
    position: relative;
}

body.theme-win9 .btn-maximize::before {
    content: "";
    text-indent: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border: 1px solid #000;
    border-top-width: 2px;
}

body.theme-win9 .btn-close {
    text-indent: -9999px;
    position: relative;
}

body.theme-win9 .btn-close::before {
    content: "✕";
    text-indent: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
}

.nav-btn.settings-btn {
    background: var(--theme-secondary);
    color: #000;
    border-radius: 8px;
    flex: 0 0 60px;
    margin-left: 10px;
    font-size: 1.8em;
}

.nav-btn.settings-btn.active {
    background: #000;
    color: var(--theme-secondary);
    box-shadow: 0 0 20px rgba(204, 119, 0, 0.5), inset 0 0 15px rgba(204, 119, 0, 0.4);
    border: 2px solid var(--theme-secondary);
    text-shadow: 0 0 8px var(--theme-secondary);
}

/* New Engineering Panel Styles */
#settings-panel {
    flex: 1;
    height: 100%;
    /* Removed max-width restriction to fix flex layout issues */
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    box-sizing: border-box;
    border-top: 15px solid var(--theme-secondary);
    border-radius: 20px 0 0 0;
    /* margin-right: 12px; Removed fixed margin */
}

#settings-panel.panel-full-width {
    max-width: none;
    flex: 1 1 100%;
}

#repository-panel.section-hidden,
#weather-panel.section-hidden,
#station-panel.section-hidden,
#piano-panel.section-hidden {
    display: none !important;
}

#graphs-panel,
#cartography-panel,
#personnel-panel,
#repository-panel,
#weather-panel,
#station-panel,
#game-of-life-panel,
#server-vars-panel,
#servers-panel {
    flex: 1;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.2);
    overflow: hidden;
    padding: 12px;
    box-sizing: border-box;
    border-top: 15px solid var(--theme-accent);
    border-radius: 20px 0 0 0;
}

#piano-panel {
    flex: 1;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.2);
    overflow: hidden;
    padding: 6px;
    box-sizing: border-box;
    border-top: 15px solid var(--theme-accent);
    border-radius: 20px 0 0 0;
}

#piano-work-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--theme-primary) transparent;
}

#settings-panel .settings-group {
    display: none;
    width: 100%;
    animation: fadeIn 0.3s ease-out;
    flex-wrap: wrap;
    gap: 20px;
}

#settings-panel .settings-group.active {
    display: flex;
}

/* Keep old subnav styles for Repository if used, but Settings is moved */
#repository-subnav,
.subnav-container {
    display: none;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 3px solid var(--theme-secondary);
    margin-bottom: 10px;
    z-index: 100;
}

#repository-subnav.active,
.subnav-container.active {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    animation: slideDown 0.3s ease-out;
    scrollbar-width: none;
    /* Hide scrollbar for cleaner LCARS look */
}

#repository-subnav.active::-webkit-scrollbar,
.subnav-container.active::-webkit-scrollbar {
    display: none;
}


.nav-btn.forum-btn {
    background: #9966ff;
    /* Special color for Forum */
    color: #fff;
}

.nav-btn.forum-btn:hover {
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.5), 0 0 15px #9966ff;
}

#settings-tabs,
#repository-tabs {
    display: flex;
    gap: 12px;
    width: auto;
    padding: 5px 0;
}

#settings-tabs::-webkit-scrollbar,
#repository-tabs::-webkit-scrollbar {
    display: none;
}

#settings-tabs .lcars-button,
#repository-tabs .lcars-button {
    border-radius: 20px;
    min-width: 90px;
    background: var(--theme-primary);
    color: #000;
    flex-shrink: 0;
    font-family: var(--theme-font);
    font-weight: bold;
    font-size: 1.1em;
    letter-spacing: 1px;
    padding: 6px 18px;
    border: none;
    opacity: 0.6;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

#settings-tabs .lcars-button:hover,
#repository-tabs .lcars-button:hover {
    opacity: 0.85;
    filter: brightness(1.1);
}

#settings-tabs .lcars-button.active,
#repository-tabs .lcars-button.active {
    opacity: 1;
    background: var(--theme-highlight);
    color: #000;
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.3), inset 0 -3px 0 rgba(0, 0, 0, 0.3);
}

.settings-group {
    display: none;
    gap: 30px;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
}

.settings-group.active {
    display: flex;
    animation: slideDown 0.3s ease-out;
}

.settings-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 200px;
    flex: 0 1 auto;
}

.settings-header {
    color: var(--theme-secondary);
    font-size: 0.9em;
    font-weight: bold;
    letter-spacing: 2px;
    border-bottom: 1px solid var(--theme-secondary);
    padding-bottom: 4px;
    margin-bottom: 5px;
    opacity: 0.8;
}

.settings-group .button-row {
    display: flex;
    gap: 8px;
    width: 100%;
}

.settings-group .button-row .lcars-button {
    flex: 1;
}

.settings-group .lcars-button {
    text-align: left;
    padding-left: 20px;
    position: relative;
    white-space: normal;
    height: auto;
    min-height: 40px;
    overflow: visible;
    line-height: 1.2;
    padding-top: 8px;
    padding-bottom: 8px;
}

.settings-group .lcars-button::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: currentColor;
    border-radius: 50%;
    opacity: 0.5;
}

.settings-group .lcars-button.small {
    padding: 6px 10px;
    font-size: 0.85em;
    text-align: center;
}

.settings-group .lcars-button.small::before {
    display: none;
}


.section-hidden {
    display: none !important;
}

.panel-full-width {
    flex: 1 1 auto !important;
    max-width: none !important;
}

.federation-logo {
    height: 80px;
    filter: drop-shadow(0 0 10px rgba(153, 204, 255, 0.5));
    opacity: 0.8;
    transition: all 0.3s ease;
    cursor: pointer;
}

body.nav-minimized .federation-logo {
    height: 40px;
}

#game-label {
    display: inline-block;
    background: var(--theme-secondary);
    color: #000;
    padding: 0 10px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

body.nav-minimized #game-label {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    padding: 10px 2px;
    margin-right: -5px;
    font-size: 0.9em;
}

.federation-logo:hover {
    opacity: 1;
}

.main-flex {
    flex: 1;
    display: flex;
    gap: 15px;
    border-left: 20px solid var(--theme-primary);
    border-bottom: 5px solid var(--theme-primary);
    border-radius: 0 0 0 var(--theme-border-radius);
    padding: 10px;
    padding-bottom: 10px;
    margin-bottom: 0px;
    min-height: 0;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(255, 153, 51, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
    box-sizing: border-box;
}

/* #sticky-log-container definition moved to line ~2160 to avoid duplicates */

#connected-users {
    flex: 0 0 var(--connected-users-width);
    width: var(--connected-users-width);
    min-width: 160px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
    border-right: 2px solid rgba(255, 255, 255, 0.1);
}

.chat-main-container {
    display: flex;
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.chat-view-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: rgba(255, 255, 255, 0.02);
}

#connected-users h4 {
    margin: 0 0 10px 0;
    color: var(--theme-secondary);
}

.rooms-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    padding-right: 10px;
}

.side-toggle-btn {
    width: 100%;
    margin-bottom: 10px;
    font-size: 0.9em;
    padding: 6px;
    background: var(--theme-secondary);
    color: #000;
    border-radius: 10px;
}

#connected-users.minimized-list {
    display: none !important;
}

/* CON Mode Personnel List Simplification */
body.untabbed-mode #users-list li {
    background: none !important;
    border: none !important;
    padding: 2px 0 !important;
    margin: 0 !important;
}

body.untabbed-mode #users-list li .user-dot,
body.untabbed-mode #users-list li img,
body.untabbed-mode #users-list li small,
body.untabbed-mode #users-list li .user-ping,
body.untabbed-mode #users-list li span[style*="font-size:0.75em"] {
    display: none !important;
}

body.untabbed-mode #users-list li.self-user {
    color: var(--theme-highlight) !important;
    font-weight: bold !important;
    border-left: 3px solid var(--theme-highlight) !important;
    padding-left: 8px !important;
}

.room-group-header {
    background: rgba(204, 153, 204, 0.2);
    color: var(--theme-secondary);
    padding: 4px 10px;
    font-size: 0.8em;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 5px;
    border-left: 10px solid var(--theme-secondary);
    letter-spacing: 2px;
}

.me-game-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
    justify-content: flex-start;
}

.me-game-icons img {
    height: 32px !important;
    width: 32px !important;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease;
}

.me-game-icons img:hover {
    transform: scale(1.1);
    border-color: var(--theme-highlight);
}

.room-btn {
    background: #ff9900;
    /* LCARS Orange */
    color: #000;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    font-family: var(--theme-font);
    text-transform: uppercase;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 0 20px 20px 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    position: relative;
    overflow: hidden;
    width: 90%;
}

.room-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: rgba(0, 0, 0, 0.2);
}

.room-btn:nth-child(2) {
    background: #cc99cc;
}

/* LCARS Purple */
.room-btn:nth-child(3) {
    background: #9999ff;
}

/* LCARS Blue */
.room-btn:nth-child(4) {
    background: #ffcc99;
}

/* LCARS Tan */

.room-btn:hover {
    filter: brightness(1.2);
    width: 100%;
    box-shadow: 4px 0 15px rgba(255, 153, 0, 0.4);
}

.room-btn.active {
    background: #fff !important;
    color: #000 !important;
    width: 100%;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    border-left: 8px solid var(--theme-highlight);
}

.panel-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
}

.chat-area {
    flex: 2;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    border-top: 15px solid var(--theme-accent);
    border-radius: 0 var(--theme-border-radius) 0 0;
    background: transparent;
}

.chat-view {
    flex: 1;
    list-style: none;
    padding: 15px;
    margin: 0;
    overflow-y: auto;
    min-height: 0;
    font-family: var(--theme-chat-font);
    font-size: 0.9em;
    text-transform: none;
    display: none;
}

.chat-view.active {
    display: block;
    /* Works as flex item in column */
}

/* User status dots */
.user-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    background: #4caf50;
    /* Online */
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.4);
}

.user-dot.offline {
    background: #ff5252;
    box-shadow: 0 0 5px rgba(255, 82, 82, 0.4);
}

#users-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#users-list li.active-user {
    background: var(--theme-highlight);
    color: #000;
    border-left: 4px solid #fff;
    font-weight: bold;
    box-shadow: 0 0 10px var(--theme-highlight);
    transform: translateX(5px);
    transition: all 0.2s ease;
}

#users-list li.self-user {
    border-left: 10px solid var(--theme-highlight);
    background: rgba(255, 204, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.self-name {
    animation: text-pulse 2s infinite alternate;
}

@keyframes text-pulse {
    from {
        text-shadow: 0 0 2px var(--theme-highlight);
    }

    to {
        text-shadow: 0 0 8px var(--theme-highlight), 0 0 12px var(--theme-highlight);
    }
}

/* Inline pill-style indicator for voice room membership */
.voice-indicator {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--theme-accent);
    font-size: 0.78em;
    vertical-align: middle;
}

.chat-view li {
    margin-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 2px;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Day banner styling */
.chat-view li.day-banner {
    border: none;
    padding: 20px 0;
    margin: 15px 0;
    text-align: center;
    background: none;
}

.day-banner-content {
    display: inline-block;
    position: relative;
    padding: 0 20px;
}

.day-banner-content::before,
.day-banner-content::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 100px;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--theme-accent), transparent);
}

.day-banner-content::before {
    right: 100%;
    margin-right: 10px;
}

.day-banner-content::after {
    left: 100%;
    margin-left: 10px;
}

.day-banner-content span {
    color: var(--theme-accent);
    font-weight: bold;
    font-size: 0.9em;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: rgba(153, 204, 255, 0.1);
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid var(--theme-accent);
    box-shadow: 0 0 10px rgba(153, 204, 255, 0.2);
}


/* Servers panel on the left */
#servers-panel {
    flex: 1;
    /* Allow growing and shrinking to occupy full quad space */
    width: 100%;
    height: 100%;
    /* Use full height of area */
    background: rgba(255, 255, 255, 0.03);
    padding: 15px;
    padding-bottom: 20px;
    /* Reduced padding, as main-flex already handles the log gap */
    min-height: 0;
    /* Critical for flex scrolling */
    resize: vertical;
    /* Allow user resize */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    /* Enable vertical scrolling */
    overflow-x: hidden;
    /* Prevent horizontal scroll */
    border-top: 15px solid var(--theme-highlight);
    border-radius: 20px 0 0 0;
    margin-right: 12px;
}

/* When body has this class, hide the servers panel */
body.hide-servers #servers-panel {
    display: none !important;
}

/* Make content stretch when servers hidden */
body.hide-servers .chat-area {
    flex: 1 1 auto;
}

/* Panels view mode - sections side-by-side */
.main-flex.layout-panels {
    flex-direction: row;
    align-items: stretch;
    gap: 15px;
}

.main-flex.layout-panels>div:not(.section-hidden) {
    flex: 1 1 0;
    min-width: 0;
}

/* Ensure sensors panel doesnt force full width when multiple panels are open */
.main-flex.layout-panels #servers-panel {
    max-width: none;
    margin-right: 0;
}


.main-flex.layout-panels .chat-area {
    flex: 1 1 0;
}

/* Game selector toolbar */
/* Game selector toolbar */
.game-selector-toolbar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 160px;
    flex-direction: column;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 5px;
    background: rgba(0, 0, 0, 0.8);
    border-right: 2px solid var(--theme-accent);
    border-bottom: none;
    z-index: 20;
    overflow-y: auto;
    scrollbar-width: none;
    transition: width 0.3s ease;
}

/* Adjust Buttons for Vertical Layout */
.game-selector-toolbar .lcars-button.small {
    width: 140px !important;
    height: 140px !important;
    padding: 0 !important;
    font-size: 1.1em !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    min-width: 0 !important;
    background: #333;
    color: #fff !important;
    border: 1px solid #444;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

.game-selector-toolbar .lcars-button.small.active {
    background: var(--theme-highlight) !important;
    color: #000 !important;
    border: 1px solid #fff;
    box-shadow: 0 0 10px var(--theme-highlight);
}

.game-selector-toolbar.hidden {
    width: 30px;
    transform: none;
    overflow: hidden;
}

.game-selector-toolbar.hidden .lcars-button.small:not(#toggle-game-toolbar) {
    display: none;
}

.game-selector-toolbar.hidden #toggle-game-toolbar {
    width: 20px !important;
    height: 40px !important;
    padding: 0 !important;
    font-size: 0.7em !important;
}

.game-selector-toolbar.hidden #game-label {
    cursor: pointer;
    font-size: 0.8em;
    margin-right: 0;
}


/* On narrow screens, stack vertically (servers above chat) */
@media (max-width: 800px) {
    .main-flex {
        flex-direction: column;
    }

    #servers-panel {
        width: 100%;
        flex: 0 0 auto;
        margin-right: 0;
        border-radius: 8px;
    }

    h1 {
        font-size: 1.8em;
    }

    /* Dual view on mobile still stacks vertically */
    .main-flex.dual-view-mode {
        flex-direction: column;
    }

    .main-flex.dual-view-mode #servers-panel,
    .main-flex.dual-view-mode .chat-area {
        flex: 1 1 auto;
        max-width: 100%;
    }


    /* Fixed Input Row at bottom */
    .input-row {
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10005;
        padding: 8px;
        gap: 6px;
        background: rgba(0, 0, 0, 0.95);
        border-top: 2px solid var(--theme-primary);
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.7);
        height: auto;
    }

    .chat-area {
        height: 100%;
        flex: 1;
    }

    /* Position sticky log container relative to the bottom flow */
    #sticky-log-container {
        z-index: 10000;
        max-height: 70vh;
        width: 100%;
    }

    #sticky-log-controls {
        opacity: 1;
        /* Always visible on touch devices */
        pointer-events: auto;
    }

}

/* Visual highlight to confirm servers panel placement during debugging */
#servers-panel.debug-highlight {
    box-shadow: 0 0 20px rgba(153, 204, 255, 0.15) inset, 0 0 8px rgba(153, 204, 255, 0.08);
    border-left: 4px solid var(--theme-accent);
}

#voice-controls-panel {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
}

#voice-stats-wrap div {
    color: #fff;
    opacity: 0.95;
}

#voice-sent-line b,
#voice-recv-line b {
    color: #99ccff;
}

.sensor-group {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    /* Prevent shrinking */
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.sensor-group.collapsed .sensor-table {
    display: none;
}

.sensor-summary {
    color: var(--theme-accent);
    background: rgba(153, 204, 255, 0.1);
    font-weight: bold;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-left: 5px solid var(--theme-accent);
    flex-wrap: wrap;
    /* Allow buttons to wrap on small screens */
    gap: 15px;
    min-height: 42px;
}

.sensor-summary>span:first-child {
    font-size: 1.2em;
    letter-spacing: 2px;
}

.sensor-summary>span:nth-child(2) {
    font-size: 0.9em;
    opacity: 0.8;
}

.sensor-summary:hover {
    background: rgba(153, 204, 255, 0.2);
}

.sensor-group-ef2 .sensor-summary {
    color: var(--theme-secondary);
    background: rgba(204, 153, 204, 0.1);
    border-left-color: var(--theme-secondary);
}

.sensor-group-ef2 .sensor-summary:hover {
    background: rgba(204, 153, 204, 0.2);
}

.sensor-group-rtcw .sensor-summary {
    color: #ff9900;
    background: rgba(255, 153, 0, 0.1);
    border-left-color: #ff9900;
}

.sensor-group-rtcw .sensor-summary:hover {
    background: rgba(255, 153, 0, 0.2);
}

.sensor-group-et .sensor-summary {
    color: #00ff00;
    background: rgba(0, 255, 0, 0.1);
    border-left-color: #00ff00;
}

.sensor-group-et .sensor-summary:hover {
    background: rgba(0, 255, 0, 0.2);
}

.sensor-group-deusex .sensor-summary {
    color: #00ffff;
    background: rgba(0, 255, 255, 0.1);
    border-left-color: #00ffff;
}

.sensor-group-deusex .sensor-summary:hover {
    background: rgba(0, 255, 255, 0.2);
}

.sensor-group-heretic2 .sensor-summary {
    color: #ff3333;
    background: rgba(255, 51, 51, 0.1);
    border-left-color: #ff3333;
}

.sensor-group-heretic2 .sensor-summary:hover {
    background: rgba(255, 51, 51, 0.2);
}

.sensor-group-sof2 .sensor-summary {
    color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
    border-left-color: #ffd700;
}

.sensor-group-sof2 .sensor-summary:hover {
    background: rgba(255, 215, 0, 0.2);
}

.sensor-group-jk2 .sensor-summary {
    color: #4488ff;
    background: rgba(68, 136, 255, 0.1);
    border-left-color: #4488ff;
}

.sensor-group-jk2 .sensor-summary:hover {
    background: rgba(68, 136, 255, 0.2);
}

.sensor-group-jk3 .sensor-summary {
    color: #bb00ff;
    background: rgba(187, 0, 255, 0.1);
    border-left-color: #bb00ff;
}

.sensor-group-jk3 .sensor-summary:hover {
    background: rgba(187, 0, 255, 0.2);
}


.sensors-button-row {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.sensor-table {
    flex: 1 1 auto;
    overflow-y: auto;
    /* Enable scrolling for table content */
    overflow-x: hidden;
    /* Prevent horizontal scroll */
    padding: 10px;
    max-height: 2000px;
    /* Limit height to enable scrolling */
    transition: max-height 0.5s ease-out;
}

.sensor-group.collapsed .sensor-table {
    max-height: 0;
    padding: 0;
    overflow: hidden !important;
}


.server-row {
    padding: 8px;
    margin-bottom: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

/* Custom modal styling used by showCustomModal and purge modal */
/* Custom modal styling using native Popover API */
.custom-modal-popover {
    /* Popover API handles positioning (centered by default) */
    background: transparent;
    border: none;
    padding: 0;
    margin: auto;
    overflow: visible;
    color: inherit;
    width: auto;
    height: auto;
    /* Ensure it sits on top if not handled by top-layer */
    z-index: 3000;
}

/* Backdrop for manual popovers */
.custom-modal-popover::backdrop {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(2px);
}

.custom-modal-popover:popover-open {
    /* Style the container itself if needed, but we rely on .custom-modal-content */
    display: flex;
    /* Helps center if using flex approaches, but margin:auto works for popover */
}

/* Flex container behavior inside */
.custom-modal-popover .custom-modal-content {
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.98), rgba(10, 10, 10, 0.98));
}

.custom-modal-content {
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.98), rgba(10, 10, 10, 0.98));
    border: 2px solid rgba(255, 255, 255, 0.06);
    padding: 12px;
    width: 560px;
    max-width: calc(100% - 40px);
    color: #ddd;
    border-radius: 8px;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

.server-details-row {
    background: rgba(0, 0, 0, 0.3) !important;
}

.server-details {
    padding: 15px !important;
    border-bottom: 2px solid var(--theme-highlight) !important;
    background: rgba(0, 0, 0, 0.4) !important;
}

.server-details-flex {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.server-side-panel {
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding-right: 15px;
}

.server-map-wrapper {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.map-image {
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--theme-secondary);
    background: #000;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.server-vars-container {
    flex: 1 1 200px;
    max-height: 250px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    padding: 5px;
    display: flex;
    gap: 10px;
}

.server-vars-table {
    flex: 1;
    font-size: 0.75em;
    border-collapse: collapse;
    display: table;
    width: 100%;
}

.server-vars-table tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: table-row;
}

.server-vars-table td {
    padding: 4px 6px;
    display: table-cell;
}

.server-vars-table td:first-child {
    color: var(--theme-accent);
    font-weight: bold;
    width: 45%;
}

.server-vars-table td:last-child {
    color: #fff;
    opacity: 0.9;
}

.server-players-side {
    flex: 1;
}

.player-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
}

.player-list li {
    font-size: 0.8em;
    padding: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-left: 2px solid var(--theme-primary);
    border-radius: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
}

.player-list li>span:last-child {
    margin-left: auto;
}


/* Servers panel show animation */
#servers-panel {
    transition: opacity 200ms ease, transform 200ms ease;
}

body.hide-servers #servers-panel {
    opacity: 0;
    transform: translateX(-8px);
}

body:not(.hide-servers) #servers-panel {
    opacity: 1;
    transform: translateX(0);
}

.custom-modal-header h3 {
    margin: 0 0 8px 0;
    color: var(--theme-accent);
}

.custom-modal-body {
    font-size: 0.95em;
    margin-bottom: 8px;
}

.custom-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.modal-btn {
    padding: 8px 12px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

.modal-btn-cancel {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.modal-btn-confirm {
    background: var(--theme-primary);
    color: #000;
    font-weight: bold;
}

/* Sticky control layout: keep buttons in a single row; overflow horizontally on small screens */
#controls-minimal {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
}

#controls-extra {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    overflow-x: visible;
}

#more-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3) inset;
}

#more-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    cursor: pointer;
}

/* Ensure each lcars-button in the sticky controls is inline and compact */
#sticky-log-controls .lcars-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    white-space: nowrap;
}

/* Make conn-controls inline */
.conn-controls {
    display: flex;
    gap: 0;
    align-items: center;
    margin-left: 10px;
}

.conn-controls .lcars-button.small {
    border-radius: 12px 0 0 12px !important;
    min-width: 60px !important;
    height: 24px !important;
    padding: 2px 10px !important;
    font-size: 0.85em !important;
}

.chat-time {
    color: var(--theme-highlight);
    margin-right: 5px;
}

/* Highlight incoming chat messages from others */
.chat-text.chat-incoming {
    color: var(--theme-accent);
}

/* System severity highlights for chat */
.sys-error {
    color: var(--theme-danger);
    background: rgba(204, 0, 0, 0.06);
    border-left: 3px solid var(--theme-danger);
    padding-left: 6px;
}

.sys-warning {
    color: #ff9800;
    background: rgba(255, 152, 0, 0.04);
    border-left: 3px solid #ff9800;
    padding-left: 6px;
}

/* Sticky log severity */
#sticky-log-list li.log-error .json-details {
    color: #fee;
    background: rgba(204, 0, 0, 0.04);
}

#sticky-log-list li.log-warning .json-details {
    color: #fff5e6;
    background: rgba(255, 152, 0, 0.03);
}

/* Header status badge */
.status-badge {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 12px;
    margin-left: 8px;
    vertical-align: middle;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.status-badge.ok {
    background: #4caf50;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
}

.status-badge.warn {
    background: #ff9800;
    box-shadow: 0 0 8px rgba(255, 152, 0, 0.3);
}

.status-badge.error {
    background: #ff5252;
    box-shadow: 0 0 8px rgba(255, 82, 82, 0.4);
}

.header-info {
    font-family: var(--theme-font);
    font-size: 0.45em;
    color: var(--theme-accent);
    margin-left: 15px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.9;
    border-left: 2px solid var(--theme-highlight);
    padding-left: 10px;
    transition: all 0.3s ease;
    display: inline-block;
    max-width: 500px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* Sensors source indicator pill */
.source-pill {
    display: inline-block;
    background: var(--theme-highlight);
    color: #000;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 8px;
    font-weight: bold;
    font-size: 0.8em;
    border: 1px solid rgba(0, 0, 0, 0.35);
}

.chat-name {
    color: var(--theme-secondary);
    /* Purple */
}

.chat-name-self {
    color: var(--theme-highlight);
    /* Gold */
}

.chat-name-lcars {
    color: var(--theme-accent);
    /* Blue */
}

.chat-text {
    color: #eee;
}

/* LCARS-styled audio block for in-chat audio clips */
.chat-audio {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.2));
    border: 2px solid var(--theme-primary);
    padding: 12px 16px;
    border-radius: 18px;
    margin-top: 8px;
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.48);
    width: 100%;
    max-width: none;
    position: relative;
    box-sizing: border-box;
}

.chat-audio::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 34px;
    background: var(--theme-accent);
    border-radius: 8px;
    margin-right: 10px;
    box-shadow: inset 0 -10px rgba(0, 0, 0, 0.25);
}

.chat-audio::after {
    /* small notch for LCARS vibe */
    content: '';
    position: absolute;
    left: 12px;
    bottom: -5px;
    width: 28px;
    height: 9px;
    background: var(--theme-primary);
    border-radius: 0 0 10px 10px;
    opacity: 0.5;
}

.chat-audio.incoming::before {
    background: var(--theme-highlight);
}

.chat-audio.mine::before {
    background: var(--theme-secondary);
}

.chat-audio audio {
    background: transparent;
    color: #fff;
    outline: none;
    width: 100%;
    flex: 1 1 auto;
    filter: saturate(0.95);
}

.chat-audio .audio-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex: 0 0 auto;
}

/* Room chip for audio blocks */
.chat-audio .room-pill {
    background: var(--theme-accent);
    color: #000;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.8em;
    font-weight: bold;
    letter-spacing: 0.4px;
    border: 1px solid rgba(0, 0, 0, 0.25);
}

.chat-audio .room-pill.current {
    background: var(--theme-primary);
}

.chat-audio .room-pill.recent {
    background: var(--theme-highlight);
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.35);
}

/* Hot state when room has recent activity */
.chat-audio.hot {
    border-color: var(--theme-highlight);
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.25), 0 6px 16px rgba(0, 0, 0, 0.48);
}

/* Shimmer pulse for very recent activity */
@keyframes lcarsPulse {
    0% {
        box-shadow: 0 0 6px rgba(255, 204, 0, 0.22);
        opacity: 0.96;
    }

    50% {
        box-shadow: 0 0 14px rgba(255, 204, 0, 0.65);
        opacity: 1;
    }

    100% {
        box-shadow: 0 0 6px rgba(255, 204, 0, 0.22);
        opacity: 0.96;
    }
}

.chat-audio .room-pill.recent-hot,
.chat-audio .room-inline.recent-hot {
    animation: lcarsPulse 1.2s ease-in-out infinite;
}

/* Inline room label for non-tabbed mode */
.chat-audio .room-inline {
    color: var(--theme-primary);
    font-size: 0.82em;
    font-weight: bold;
    margin-right: 8px;
    opacity: 0.9;
}

.chat-audio .room-inline.recent {
    color: var(--theme-highlight);
    text-shadow: 0 0 6px rgba(255, 204, 0, 0.35);
}

.chat-audio .audio-pill {
    background: var(--theme-secondary);
    color: #000;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.78em;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.chat-audio .audio-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--theme-highlight);
    color: #000;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid rgba(0, 0, 0, 0.35);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.chat-audio:hover {
    filter: brightness(1.05);
}

/* Small tweaks for mobile */
@media (max-width: 600px) {
    .chat-audio {
        max-width: 100%;
        padding: 10px 12px;
        border-radius: 14px;
        gap: 10px;
    }

    .chat-audio::before {
        height: 26px;
        width: 12px;
        margin-right: 8px;
    }

    .chat-audio .audio-pill {
        font-size: 0.76em;
        padding: 2px 8px;
    }

    .chat-audio .audio-download {
        width: 24px;
        height: 24px;
    }
}

.delivery-tick {
    color: var(--theme-accent);
    font-size: 0.8em;
    margin-left: 5px;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.delivery-tick.confirmed {
    opacity: 1;
}

.input-row {
    flex: 0 0 auto;
    padding: 15px;
    display: flex;
    gap: 0;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

input[type="text"]#message,
input[type="text"]#my-name-input {
    background: rgba(0, 0, 0, 0.6);
    border: 3px solid var(--theme-primary);
    color: #fff;
    padding: 10px 15px;
    font-family: var(--theme-font);
    text-transform: uppercase;
    outline: none;
    font-size: 1.1em;
    appearance: none;
    -webkit-appearance: none;
}

input[type="text"]#message {
    flex: 1;
    border-right: none;
    border-left: none;
    /* Middle element in chat row */
}

input[type="text"]#my-name-input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;
    border-radius: 10px;
    border: 2px solid var(--theme-secondary);
}

.e2e-toggle-container {
    background: var(--theme-secondary);
    color: #000;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 25px 0 0 25px;
    border: 3px solid var(--theme-secondary);
    font-weight: bold;
    font-family: var(--lcars-font);
    font-size: 0.9em;
}

.e2e-toggle-container input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 40px;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    border: 2px solid #000;
    transition: background 0.3s;
}

.e2e-toggle-container input[type="checkbox"]:checked {
    background: #ffcc00;
    /* Gold when active */
}

.e2e-toggle-container input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
}

.e2e-toggle-container input[type="checkbox"]:checked::after {
    transform: translateX(20px);
    background: #000;
}

#submitBtn {
    background: var(--theme-primary);
    color: #000;
    border: 3px solid var(--theme-primary);
    padding: 10px 25px;
    cursor: pointer;
    font-weight: bold;
    font-family: var(--theme-font);
    text-transform: uppercase;
    border-radius: 0 25px 25px 0;
    transition: filter 0.2s, transform 0.1s;
    font-size: 1.1em;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
}

#sticky-log-controls .lcars-button {
    min-width: 150px;
    white-space: nowrap;
    text-align: center;
}




.ac-toggle {
    background: var(--theme-secondary);
    color: #000;
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 0 12px 12px 0;
    font-weight: bold;
    font-size: 0.75em;
    height: 24px;
    box-sizing: border-box;
}

.ac-toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 12px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    border: 1px solid #000;
}

.ac-toggle input[type="checkbox"]:checked {
    background: var(--theme-highlight);
}

.ac-toggle input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.ac-toggle input[type="checkbox"]:checked::after {
    transform: translateX(12px);
    background: #000;
}

.cb-controls {
    display: flex;
    gap: 0;
    align-items: stretch;
}

.cb-segment-left {
    border-radius: 15px 0 0 15px !important;
    min-width: 40px !important;
    padding: 8px 12px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(0, 0, 0, 0.3) !important;
    background: var(--theme-highlight) !important;
    color: #000 !important;
    font-size: 1.1em !important;
}

.cb-segment-middle {
    border-radius: 0 !important;
    min-width: 80px !important;
    padding: 8px 12px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(0, 0, 0, 0.3) !important;
    border-left: 1px solid rgba(0, 0, 0, 0.3) !important;
}

.cb-segment-middle.purge {
    background: var(--theme-danger) !important;
    color: #fff !important;
}

.cb-segment-right {
    border-radius: 0 15px 15px 0 !important;
    min-width: 40px !important;
    background: var(--theme-secondary) !important;
    padding: 0 10px !important;
    font-size: 1.2em !important;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
    border-left: 1px solid rgba(0, 0, 0, 0.3) !important;
}

.lcars-button {
    background: var(--theme-primary);
    color: #000;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    font-weight: bold;
    font-family: var(--theme-font);
    text-transform: uppercase;
    transition: filter 0.2s, transform 0.1s;
    border-radius: 20px;
    /* Default rounded */
    appearance: none;
    -webkit-appearance: none;
    /* Default LCARS pill shape */
}

.cb-segment-left {
    border-radius: 0 0 0 0 !important;
}

.lcars-button.active-green {
    background: #4caf50 !important;
    color: #fff;
}

input[type="button"]:hover,
.lcars-button:hover {
    filter: brightness(1.2);
}

.lcars-button.tiny {
    padding: 2px 8px;
    font-size: 0.7em;
    border-radius: 10px;
}

input[type="button"]:active,
.lcars-button:active {
    transform: scale(0.95);
}

#servers_table_summary {
    background: var(--theme-highlight);
    color: #000;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    display: flex;
    /* Changed from inline-block */
    align-items: center;
    justify-content: space-between;
    /* Space out title and buttons */
    margin-bottom: 10px;
    width: 100%;
    /* Fill width */
}

.lcars-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.lcars-table th {
    position: sticky;
    top: 0;
    background: var(--theme-accent);
    color: #000;
    padding: 8px;
    text-align: left;
    z-index: 10;
    /* Ensure header stays above table rows */
}

.lcars-table td {
    padding: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#sticky-log-container {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Stack from bottom up */
    width: 100%;
    background: transparent;
    z-index: 10000;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    flex-grow: 0;
    overflow: visible;
}





#sticky-log-wrapper {
    display: flex;
    position: relative;
}

#sticky-log-content {
    background: rgba(0, 0, 0, 0.95);
    border-top: 2px solid var(--theme-primary);
    max-height: 4.5em;
    /* Show approx last 3 lines */
    overflow-y: hidden;
    display: block;
    /* Always visible */
    padding: 10px;
    box-sizing: border-box;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    text-transform: none;
    transition: max-height 0.3s ease;
    flex: 1;
}

#sticky-log-toggle-sliver {
    width: 20px;
    background: linear-gradient(to right, transparent, rgba(255, 153, 0, 0.6));
    border-left: 2px solid var(--theme-primary);
    border-top: 2px solid var(--theme-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0.6;
}

#sticky-log-toggle-sliver:hover {
    background: linear-gradient(to right, transparent, rgba(255, 153, 0, 0.9));
    opacity: 1;
    width: 30px;
}

#sticky-log-toggle-sliver::after {
    content: '⇕';
    color: #fff;
    font-size: 1em;
    font-weight: bold;
}

#sticky-log-container.minimized #sticky-log-wrapper {
    display: none;
}

.sensor-summary.stale {
    background: var(--theme-danger) !important;
    animation: pulse-danger 2s infinite;
}

@keyframes pulse-danger {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

.json-details {
    font-size: 1.1em !important;
}

#sticky-log-content.expanded {
    max-height: 80vh;
    overflow-y: auto;
}



/* If they truly want it to cover the bar: */
#sticky-log-container.fully-expanded {
    bottom: 0;
    left: 0;
    z-index: 100000;
    height: 100%;
    height: 100dvh;
}

#sticky-log-container.fully-hidden {
    border-top: 4px solid var(--theme-danger);
    height: 12px;
    overflow: visible;
    background: rgba(204, 0, 0, 0.2);
    opacity: 0.8;
    cursor: n-resize;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
    animation: alert-pulse 2s infinite;
}

@keyframes alert-pulse {
    0% {
        box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
    }

    100% {
        box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
    }
}

#sticky-log-container.fully-hidden *:not(#sticky-log-controls):not(#sticky-log-controls *) {
    display: none !important;
}


#ws-stats-row {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    /* Sub-rows stack from bottom up */
    justify-content: flex-end;
    font-size: 0.85em;
    color: var(--theme-highlight);
    background: rgba(0, 0, 0, 0.95);
    border-left: 15px solid var(--theme-highlight);
    border-top: 2px solid rgba(255, 255, 255, 0.3);
    box-sizing: border-box;
    z-index: 100;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: auto;
    overflow: visible;
    position: sticky;
    bottom: 0;
    margin-top: auto;
}

#ws-stats-row:hover,
#ws-stats-row.persistent {
    height: auto;
    overflow: visible;
}

.stats-row-top,
.stats-row-middle,
.stats-row-bottom {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 34px;
    height: auto;
    padding: 0 15px;
    box-sizing: border-box;
    gap: 10px;
    position: relative;
}

/* Row 1 (Main Status) - Now at the TOP */
.stats-row-top {
    order: 1;
    z-index: 100;
    background: rgba(0, 0, 0, 0.95);
}

/* Row 2 (Sensors) - Middle */
.stats-row-middle {
    order: 2;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Row 3 (Telemetry / Log) - Now at the BOTTOM */
.stats-row-bottom {
    order: 3;
    background: rgba(255, 255, 255, 0.05);
}

.window-control-btn {
    background: var(--theme-highlight);
    border: none;
    color: #000;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 20px;
    transition: all 0.2s;
    line-height: 1;
    font-family: 'Antonio', sans-serif;
    letter-spacing: 1px;
}

.window-control-btn:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 10px var(--theme-highlight);
}

.panel-minimized-header {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
}

.panel-minimized-header>*:not(.window-title-bar) {
    display: none !important;
}

.layout-display-split .swap-btn {
    display: inline-block;
}

.swap-btn {
    display: none;
}

.status-bar-switches .lcars-button.small {
    padding: 2px 8px;
    font-size: 1.1em;
    min-width: 32px;
    height: 24px;
    border-radius: 4px;
}

.status-bar-switches .lcars-button.small:hover {
    filter: brightness(1.3);
    box-shadow: 0 0 10px var(--theme-primary);
}

#ws-conn-status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff5252;
    margin-right: 5px;
}

/* Service Worker update banner */
#sw-update-banner {
    display: none;
    position: fixed;
    top: 12px;
    right: 12px;
    background: #ffea00;
    color: #000;
    padding: 8px 12px;
    border-radius: 6px;
    z-index: 99999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

#sw-update-banner button {
    background: #000;
    color: #fff;
    border: none;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
}

#typing-indicator {
    height: 20px;
    color: var(--lcars-gold);
    font-size: 0.8em;
    padding-left: 10px;
}

#sticky-log-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#sticky-log-list li {
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #111;
}

::-webkit-scrollbar-thumb {
    background: var(--lcars-orange);
}

/* Tabbed Chat Styles */
.chat-tabs {
    display: flex;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.5);
    border-bottom: 2px solid var(--theme-secondary);
    margin-bottom: 0;
    padding: 2px 2px 0 2px;
}

.tab-btn {
    background: var(--theme-secondary);
    color: #000;
    border: none;
    padding: 5px 15px;
    margin-right: 2px;
    border-radius: 10px 10px 0 0;
    /* Top rounded */
    cursor: pointer;
    font-family: var(--theme-font);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
    opacity: 0.7;
    transition: all 0.2s;
}

.tab-btn:hover {
    opacity: 1.0;
    background: var(--theme-accent);
}

.tab-btn.active {
    opacity: 1.0;
    z-index: 10;
    /* Fallback and shared active styles */
    background: var(--theme-primary);
    color: #000;
    border: 2px solid rgba(255, 255, 255, 0.8);
    transition: background 0.3s, box-shadow 0.3s;
}

/* Distinct Styles for PM vs Room Tabs */
.tab-btn.room-tab {
    background: var(--theme-secondary);
    /* Gold/Orange */
    color: #000;
}

.tab-btn.custom-room-tab {
    background: #cc99cc;
    /* Magenta/Purple */
    color: #000;
}

.tab-btn.pm-tab {
    background: var(--theme-accent);
    /* Blue */
    color: #000;
    display: inline-flex;
    align-items: center;
}

.tab-btn.console-tab {
    background: #444;
    color: #0ff;
    font-family: var(--theme-chat-font);
    border-bottom: 2px solid #0ff;
}

.tab-btn.admin-tab {
    background: var(--theme-danger);
    color: #fff;
}

/* Active State Colors based on type */
.tab-btn.active.room-tab {
    background: var(--theme-secondary);
    filter: brightness(1.3);
    border: 2px solid #fff;
    box-shadow: 0 0 15px var(--theme-secondary);
}

.tab-btn.active.custom-room-tab {
    background: #e6b3e6;
    border: 2px solid #fff;
    box-shadow: 0 0 15px #cc99cc;
}

.tab-btn.active.pm-tab {
    background: #cce6ff;
    border: 2px solid #fff;
    box-shadow: 0 0 15px var(--theme-accent);
}

.tab-btn.active.console-tab {
    background: #222;
    border: 2px solid #0ff;
    box-shadow: 0 0 15px #0ff;
}

.tab-btn.active.admin-tab {
    background: #ff6666;
    border: 2px solid #fff;
    box-shadow: 0 0 15px var(--theme-danger);
}

.close-tab-btn {
    margin-left: 8px;
    font-weight: bold;
    opacity: 0.6;
    cursor: pointer;
    font-size: 1.5em;
    /* Increased from 1.2em */
    line-height: 1;
    padding: 0 4px;
    /* Add hit area */
}

.close-tab-btn:hover {
    opacity: 1.0;
    color: var(--theme-danger);
}

.tab-btn.unread {
    animation: flash-tab 1s infinite alternate;
    color: var(--theme-danger);
}

@keyframes flash-tab {
    from {
        background: var(--theme-secondary);
    }

    to {
        background: var(--theme-highlight);
    }
}

/* .chat-view defined earlier with flex:1 and basic styles */
/* .chat-view.active defined earlier */

/* Ensure list items are styled correctly in new views */
.chat-view li {
    list-style: none;
    padding: 4px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.chat-text::selection {
    background: var(--theme-highlight);
    color: #000;
    text-shadow: none;
}

.own-message {
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid var(--theme-primary) !important;
}

.msg-actions-container {
    display: inline-flex;
    gap: 4px;
    margin-left: 10px;
    opacity: 0;
    transition: opacity 0.2s ease;
    vertical-align: middle;
}

.chat-area li:hover .msg-actions-container,
.chat-area li.active-message .msg-actions-container,
.chat-area li.is-playing .msg-actions-container {
    opacity: 1;
}

.msg-action-btn {
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: var(--theme-accent);
    cursor: pointer;
    font-size: 0.7em;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    font-family: var(--theme-font);
    vertical-align: middle;
    transition: all 0.2s;
    white-space: nowrap;
}

.msg-action-btn:hover {
    background: var(--theme-accent);
    color: #000;
}

.msg-delete-btn:hover {
    background: var(--theme-danger);
    color: #fff;
}

.read-aloud-btn[style*="background: var(--theme-danger)"] {
    animation: blink 1s infinite;
}

.reply-quote {
    background: rgba(255, 153, 0, 0.1);
    border-left: 2px solid var(--theme-highlight);
    padding: 3px 8px;
    margin-bottom: 4px;
    font-size: 0.85em;
    border-radius: 0 4px 4px 0;
    opacity: 0.8;
}

.reply-quote-name {
    color: var(--theme-highlight);
    font-weight: bold;
    margin-right: 5px;
}

.reply-to-me {
    background: rgba(255, 153, 0, 0.15) !important;
    border-left: 4px solid var(--theme-highlight) !important;
}

.visitor-details-container {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--theme-secondary);
    border-radius: 4px;
    margin-top: 8px;
    padding: 8px;
    font-size: 0.8em;
    color: #ccc;
    display: none;
    animation: slideDown 0.2s ease-out;
}

.visitor-details-container.show {
    display: block;
}

.visitor-details-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
}

.visitor-details-label {
    color: var(--theme-secondary);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85em;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

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


/* Custom Modal Styles */
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.custom-modal-content {
    background: #000;
    border: 2px solid var(--theme-primary);
    padding: 20px;
    border-radius: 10px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    font-family: var(--theme-font);
    color: #fff;
    animation: modal-fade-in 0.3s ease;
}

@keyframes modal-fade-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.custom-modal-header {
    border-bottom: 2px solid var(--theme-secondary);
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.custom-modal-header h3 {
    margin: 0;
    color: var(--theme-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.custom-modal-body {
    margin-bottom: 20px;
    line-height: 1.5;
}

.custom-modal-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--theme-accent);
    color: #fff;
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    box-sizing: border-box;
    font-family: inherit;
}

.custom-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modal-btn {
    padding: 8px 16px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 4px;
    transition: filter 0.2s;
}

.modal-btn-confirm {
    background: var(--theme-primary);
    color: #000;
}

.modal-btn-cancel {
    background: #666;
    color: #fff;
}

.modal-btn:hover {
    filter: brightness(1.2);
}

/* Tron Specific Modal Tweaks */
body.theme-tron .custom-modal-content {
    border-color: #00f2ff;
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.3), inset 0 0 10px rgba(0, 242, 255, 0.2);
}

body.theme-tron .custom-modal-header h3 {
    color: #00f2ff;
    text-shadow: 0 0 10px rgba(0, 242, 255, 0.8);
}

/* Hide sidebar rooms when tabbed mode is active */
body.tabbed-mode .rooms-container {
    display: none;
}

/* Aux sockets (Uplink/Downlink) indicators */
#aux-sockets {
    display: flex;
    gap: 12px !important;
    align-items: center;
    margin-left: 20px !important;
    background: rgba(0, 0, 0, 0.4);
    padding: 2px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#downlink-indicator,
#uplink-indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #555;
    transition: background 0.3s, box-shadow 0.3s;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

#downlink-icon,
#uplink-icon {
    font-size: 0.8em;
    font-weight: bold;
    color: #bbb;
    margin-right: 4px;
}

/* Status colors */
.indicator-ok {
    background: #00e676 !important;
    /* Bright green */
    box-shadow: 0 0 6px rgba(0, 230, 118, 0.6);
}

.indicator-err {
    background: #ff1744 !important;
    /* Deep red for critical */
    box-shadow: 0 0 8px rgba(255, 23, 68, 0.8);
    animation: pulseError 1s infinite;
}

.indicator-warn {
    background: #ff9100 !important;
    /* Orange */
}

@keyframes pulseError {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* New Message Marker */
.new-message-marker {
    text-align: center;
    border-bottom: 1px solid var(--theme-danger, #ff5252);
    line-height: 0.1em;
    margin: 10px 0 10px;
    list-style: none;
    opacity: 0.8;
}

.new-message-marker span {
    background: var(--bg-color, #111);
    padding: 0 10px;
    color: var(--theme-danger, #ff5252);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Sensors Status Alert Bar - LCARS Refined */
#sensors-status-row {
    background: rgba(0, 0, 0, 0.4);
    border-top: 2px solid var(--theme-highlight);
    border-left: 10px solid var(--theme-highlight);
    border-right: 2px solid var(--theme-highlight);
    border-radius: 10px 10px 0 0;
    padding: 6px 15px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;
    align-items: center;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    white-space: nowrap;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 80px;
    min-height: 34px;
    cursor: pointer;
    scrollbar-width: none;
    position: relative;
    box-sizing: border-box;
    margin-top: 2px;
    flex-shrink: 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

#sensors-status-row.expanded {
    max-height: 400px;
    flex-wrap: wrap;
    justify-content: center;
    background: rgba(255, 153, 0, 0.25);
    overflow-x: hidden;
    padding: 15px;
    border-radius: 20px 20px 0 0;
    border-left: 10px solid var(--theme-highlight);
    border-right: 10px solid var(--theme-highlight);
}

.status-game-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    /* More opaque */
    padding: 3px 12px;
    border-radius: 20px;
    border-left: 5px solid var(--theme-secondary);
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

#sensors-status-row.expanded .status-game-pill {
    padding: 8px 15px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.3);
}

.status-game-pill,
.status-stale-info,
.status-divider {
    display: flex;
    opacity: 1;
    transition: opacity 0.2s ease;
}



.status-game-pill:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.status-stats {
    font-size: 1.1em;
    font-family: var(--theme-font);
    font-weight: bold;
}

.status-unit {
    opacity: 0.4;
    font-size: 0.7em;
    margin-left: 1px;
    font-weight: normal;
}

.status-time {
    opacity: 0.3;
    font-size: 0.7em;
    font-family: 'Courier New', monospace;
    letter-spacing: 0;
}

.status-divider {
    opacity: 0.15;
    color: var(--theme-highlight);
    margin: 0 2px;
    font-weight: bold;
}

#status-alert-bar {
    display: none;
    padding: 10px;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    border-top: 3px solid var(--theme-danger);
    background: rgba(204, 0, 0, 0.9);
    color: #fff;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
    letter-spacing: 2px;
    position: relative;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);
}


#last-messages-bar {
    cursor: pointer;
    background: rgba(0, 50, 100, 0.4);
    border-top: 2px solid var(--lcars-blue, #3366ff);
    border-left: 10px solid var(--lcars-blue, #3366ff);
    color: #fff;
    font-size: 0.85em;
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 80px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

#last-messages-bar:empty {
    display: none !important;
}

#last-messages-bar .msg-line {
    display: flex;
    gap: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-items: center;
}

#last-messages-bar .msg-time {
    color: var(--theme-accent);
    font-family: monospace;
    font-size: 0.9em;
    opacity: 0.7;
}

#last-messages-bar .msg-from {
    font-weight: bold;
    color: var(--theme-highlight);
}

#last-messages-bar .msg-loc {
    color: var(--lcars-blue, #3366ff);
    font-size: 0.85em;
    background: rgba(51, 102, 255, 0.1);
    padding: 0 4px;
    border-radius: 2px;
}

#last-messages-bar .msg-text {
    color: #eee;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Last Messages Bar Wrapper with Minimize Sliver */
.lcars-alert-bar-wrapper {
    display: flex;
    position: relative;
}

#last-messages-controls {
    width: 20px;
    background: linear-gradient(to right, transparent, rgba(51, 102, 255, 0.6));
    border-left: 2px solid var(--lcars-blue, #3366ff);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0.6;
}

#last-messages-controls:hover {
    background: linear-gradient(to right, transparent, rgba(51, 102, 255, 0.9));
    opacity: 1;
    width: 30px;
}

#last-messages-controls::after {
    content: '✕';
    color: #fff;
    font-size: 0.8em;
    font-weight: bold;
}

.lcars-alert-bar-wrapper #last-messages-bar {
    flex: 1;
}

.lcars-alert-bar-wrapper.temp-hidden {
    display: none !important;
}

#repository-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
}

.repo-frame {
    width: 100%;
    height: 100%;
    border: none;
    background: #000;
    flex: 1;
}

/* Repository Content Styles */
.repo-content {
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    color: #fff;
    font-family: 'Antonio', sans-serif;
    height: 100%;
    overflow-y: auto;
}

.repo-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    border-bottom: 4px solid var(--theme-primary);
    padding-bottom: 10px;
}

.repo-header h2 {
    margin: 0;
    font-size: 2.5em;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.repo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    padding: 10px;
}

.repo-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.repo-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--theme-accent);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.repo-card-img {
    width: 100%;
    aspect-ratio: 16/9;
    background: #111;
    object-fit: cover;
    border-bottom: 2px solid rgba(255, 255, 255, 0.05);
}

.repo-card-info {
    padding: 15px;
}

.repo-card-title {
    font-weight: bold;
    font-size: 1.25em;
    margin-bottom: 8px;
    color: var(--theme-highlight);
}

.repo-card-meta {
    font-size: 0.9em;
    opacity: 0.7;
    display: flex;
    justify-content: space-between;
}

.repo-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 2em;
    color: var(--theme-accent);
    text-transform: uppercase;
    letter-spacing: 5px;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

/* List view for reviews/visitors */
.repo-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.repo-list-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 15px;
    border-left: 5px solid var(--theme-secondary);
    border-radius: 0 8px 8px 0;
    transition: background 0.2s;
}

.repo-list-item:hover {
    background: rgba(255, 255, 255, 0.08);
}


/* --- Adaptive Layout Modes --- */

/* Single View Mode (Mobile/Narrow) */
.layout-single .section-hidden {
    display: none !important;
}

.layout-single .panel-full-width {
    width: 100% !important;
}

/* Dual View Mode (Servers + Chat) */
.layout-dual .main-flex {
    display: flex;
    flex-direction: row;
}

.layout-dual #servers-panel {
    display: flex !important;
    width: 50%;
    border-right: 2px solid var(--theme-primary);
}

.layout-dual .chat-area {
    display: flex !important;
    width: 50%;
}

.layout-dual #repository-panel,
.layout-dual #repo-content {
    display: none !important;
    /* Hide repo in standard dual view unless explicitly toggled? No, standard is Servers+Chat */
}

/* Three-Panel Mode (Servers/Chat Left, Repo/Map Right) */
.layout-triple .main-flex {
    display: flex;
    flex-direction: row;
}

.layout-triple .left-column {
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 100%;
    border-right: 2px solid var(--theme-primary);
}

.layout-triple .right-column {
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 100%;
}

.layout-triple #servers-panel {
    display: flex !important;
    flex: 0 0 40%;
    /* Short height as requested */
    overflow-y: auto;
    border-bottom: 2px solid var(--theme-primary);
}

.layout-triple .chat-area {
    display: flex !important;
    flex: 1;
    /* Takes remaining height */
}

.layout-triple #repository-panel {
    display: flex !important;
    width: 100%;
    height: 100%;
}

@media (max-width: 400px) {

    #traffic-graph,
    #aux-sockets,
    #ws-stats {
        display: none !important;
    }
}

/* Mobile override: Force single view on very narrow screens */
@media (max-width: 768px) {

    .layout-dual .main-flex,
    .layout-triple .main-flex {
        flex-direction: column;
    }

    .layout-dual #servers-panel,
    .layout-dual .chat-area,
    .layout-triple .left-column,
    .layout-triple .right-column {
        width: 100%;
        border-right: none;
    }
}

/* Ensure panel handles vertical toolbar */
#servers-panel {
    position: relative;
    /* Context for absolute toolbar */
    padding-left: 175px;
    /* Make room for the toolbar */
    transition: padding-left 0.3s ease;
}

#servers-panel.toolbar-minimized {
    padding-left: 35px;
}

/* Rotate the GAME label or hide it */
#game-label {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--theme-accent);
    margin-bottom: 15px;
    letter-spacing: 2px;
}

/* --- Panel Expansion Logic --- */
.main-flex.has-expanded-panel>div:not(.panel-expanded) {
    display: none !important;
}

.main-flex.has-expanded-panel .panel-expanded {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    flex: 1 1 100% !important;
    grid-column: 1 / span 3 !important;
    grid-row: 1 / span 2 !important;
    border: none !important;
}

/* --- New Layout Display Modes --- */

.main-flex.layout-display-split {
    flex-direction: row !important;
    align-items: stretch !important;
}

.main-flex.layout-display-split .slot-left:not(.section-hidden) {
    display: flex !important;
    flex: 0 0 var(--split-pos, 50%) !important;
    width: var(--split-pos, 50%) !important;
    min-width: 200px;
    border-right: none;
    padding-left: 35px !important;
}

.main-flex.layout-display-split .chat-area:not(.section-hidden) {
    display: flex !important;
    flex: 1 !important;
    min-width: 0;
}

/* Ensure expansion hides everything else INCLUDING IDs */
.main-flex.has-expanded-panel>div:not(.panel-expanded),
.main-flex.has-expanded-panel>#connected-users:not(.panel-expanded),
.main-flex.has-expanded-panel>#servers-panel:not(.panel-expanded),
.main-flex.has-expanded-panel>.chat-area:not(.panel-expanded) {
    display: none !important;
}


/* Toolbar behavior is handled by .hidden class and JS toggle */


/* Resizer Styling */
.main-flex.layout-display-split .split-resizer {
    display: block !important;
    width: 6px;
    background: var(--theme-accent);
    cursor: col-resize;
    z-index: 100;
    transition: background 0.2s;
}

.split-resizer:hover,
.split-resizer.dragging,
#connected-users-resizer:hover,
#connected-users-resizer.dragging {
    opacity: 1;
    background: var(--theme-primary);
    box-shadow: 0 0 10px var(--theme-primary);
}

#connected-users-resizer {
    width: 6px;
    background: var(--theme-secondary);
    opacity: 0.3;
    cursor: col-resize;
    z-index: 1000;
    transition: all 0.2s;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: none;
}

.layout-display-split #connected-users-resizer,
body:not(.layout-display-windowed):not(.layout-display-single) #connected-users-resizer {
    display: block;
}

/* Force hide panels that shouldn't be visible in these modes */
.layout-display-split .main-flex>div:not(.slot-left):not(#connected-users):not(.chat-area):not(.section-hidden):not(.split-resizer) {
    display: none !important;
}

/* Windowed Layout */
.layout-display-windowed .main-flex {
    position: relative !important;
    display: block !important;
    overflow: auto !important;
    height: calc(100dvh - 120px) !important;
}

.layout-display-windowed .main-flex>div {
    position: absolute !important;
    min-width: 300px;
    min-height: 200px;
    background: var(--theme-bg);
    border: 3px solid var(--theme-primary);
    border-radius: 12px 2px 2px 12px;
    outline: 1px solid rgba(255, 255, 255, 0.1);
    /* Subtle highlight */
    display: flex;
    flex-direction: column;
    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.6),
        inset 0 0 10px var(--theme-secondary);
    z-index: 100;
    overflow: hidden;
    /* For resize handle visibility */
    resize: both;
    padding-bottom: 10px;
    /* Make resize handle easier to grab */
    padding-right: 10px;
    /* Make resize handle easier to grab */
}

.layout-display-windowed .main-flex>.section-hidden {
    display: none !important;
}

.layout-display-windowed .main-flex>div:hover {
    border-color: var(--theme-highlight);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.7),
        inset 0 0 15px var(--theme-highlight);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}


.window-title-bar {
    display: none;
    height: 30px;
    background: var(--theme-secondary);
    color: #000;
    font-family: 'Antonio', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0 15px;
    align-items: center;
    cursor: move;
    border-radius: 8px 0 0 0;
    user-select: none;
    flex-shrink: 0;
}

.layout-display-windowed .window-title-bar {
    display: flex;
}

.window-title-bar .window-title {
    flex: 1;
}

.window-title-bar .window-controls {
    display: flex;
    gap: 5px;
}

.window-close-btn {
    cursor: pointer;
    padding: 2px 10px;
    background: var(--theme-danger);
    color: #fff;
    font-weight: bold;
    font-size: 0.8em;
    border-radius: 20px;
    font-family: 'Antonio', sans-serif;
    letter-spacing: 1px;
    transition: all 0.2s;
}

.window-close-btn:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 10px var(--theme-danger);
}

.move-btn {
    display: none;
    background: var(--theme-accent) !important;
    color: #000 !important;
}

.quad-panel-slot .move-btn {
    display: inline-block !important;
}

.layout-display-windowed .move-btn {
    display: inline-block;
}

/* Specific Window Tweaks */
.layout-display-windowed #connected-users {
    width: 250px;
    height: 400px;
}

.layout-display-windowed .chat-area {
    width: 600px;
    height: 500px;
}

.layout-display-windowed #servers-panel {
    width: 800px;
    height: 600px;
}

.layout-display-windowed #settings-panel {
    width: 700px;
    height: 500px;
}

/* End layout modes */

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Welcome Screen Styles */
#disclaimer-overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000000;
    background: rgba(0, 0, 0, 0.95);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.disclaimer-content {
    max-width: 600px;
    width: 90%;
    background: #000;
    border: 3px solid var(--theme-primary);
    border-top: 20px solid var(--theme-primary);
    border-radius: 40px 0 40px 0;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 0 50px rgba(255, 153, 51, 0.2);
}

.disclaimer-header {
    border-bottom: 2px solid var(--theme-secondary);
    padding-bottom: 10px;
}

.disclaimer-title {
    font-size: 2em;
    color: var(--theme-primary);
    font-weight: bold;
    letter-spacing: 2px;
}

.disclaimer-body {
    font-size: 1.1em;
    line-height: 1.4;
    overflow-y: auto;
    max-height: 60vh;
    padding-right: 10px;
}

.disclaimer-body p {
    margin-bottom: 15px;
}

.disclaimer-controls {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.disclaimer-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.disclaimer-toggle-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.disclaimer-warning {
    color: var(--theme-danger);
    font-weight: bold;
}

.small-text {
    font-size: 0.85em;
    opacity: 0.8;
}

.disclaimer-terms {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 15px;
    font-size: 0.9em;
}

.disclaimer-links {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.lcars-link {
    color: var(--theme-accent);
    text-decoration: none;
    font-weight: bold;
}

.lcars-link:hover {
    text-decoration: underline;
    filter: brightness(1.2);
}

.disclaimer-footer {
    display: flex;
    justify-content: center;
    padding-top: 10px;
}

#disclaimer-agree-btn {
    width: 100%;
    height: 50px;
    font-size: 1.5em;
    background: var(--theme-primary);
    color: #000;
}

#welcome-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background: #000;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease-out;
}

#welcome-background-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    opacity: 0.15;
    pointer-events: none;
    font-family: monospace;
    font-size: 0.8em;
    color: var(--theme-highlight);
    text-align: left;
    white-space: pre-wrap;
    padding: 20px;
}

#welcome-content {
    text-align: center;
    transform: scale(0.9);
    opacity: 0;
    transition: all 1s ease-out;
    position: relative;
    z-index: 10;

    /* LCARS Frame */
    border-top: 5px solid var(--theme-secondary);
    border-bottom: 5px solid var(--theme-secondary);
    border-radius: 20px 0 20px 0;
    padding: 40px;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}

#welcome-content::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -20px;
    width: 15px;
    height: 100px;
    background: var(--theme-secondary);
    border-radius: 10px 0 0 0;
}

#welcome-content::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: -20px;
    width: 15px;
    height: 100px;
    background: var(--theme-secondary);
    border-radius: 0 0 10px 0;
}

#welcome-title {
    color: var(--theme-highlight);
    font-family: 'Antonio', sans-serif;
    font-size: 3em;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-shadow: 0 0 10px var(--theme-highlight);
}

#voyager-container {
    width: 90vw;
    height: 60vh;
    max-width: 1000px;
    max-height: 800px;
    margin: 10px auto;
    position: relative;
    overflow: hidden;
}

#voyager-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

#welcome-status {
    color: var(--theme-accent);
    font-family: monospace;
    font-size: 1.2em;
    height: 1.5em;
    margin-top: 20px;
    text-shadow: 0 0 5px var(--theme-accent);
}

#welcome-skip-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 10002;
}

#connected-users.minimized-list {
    display: none !important;
}

/* Horizontal Game Toolbar Styling */
#game-selector-toolbar.horizontal-mode {
    flex-direction: row;
    width: 100%;
    height: auto;
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    border-bottom: 2px solid var(--theme-primary);
    overflow-x: auto;
    white-space: nowrap;
    z-index: 500;
}

#game-selector-toolbar.horizontal-mode .toolbar-title {
    writing-mode: horizontal-tb;
    transform: none;
    margin-right: 20px;
    margin-bottom: 0;
    font-size: 1.2em;
    padding: 5px 10px;
    background: var(--theme-secondary);
    color: #111;
    font-weight: 900;
}

#game-selector-toolbar.horizontal-mode .game-toggle-btn {
    width: auto;
    height: 40px;
    padding: 0 15px;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#last-messages-bar.expanded {
    max-height: 400px;
    height: auto;
    overflow-y: auto;
    background: rgba(0, 50, 100, 0.8);
}

#last-messages-bar.hidden-state {
    display: none !important;
}

/* Intermediate Nav State */
body.nav-intermediate h1 {
    justify-content: flex-end !important;
    gap: 20px;
}

body.nav-intermediate .federation-logo {
    height: 80px;
    /* Ensure full size */
}

/* Also ensure header padding/layout is reasonable */
body.nav-intermediate .header-main {
    justify-content: flex-end;
    /* Align container content to right if needed */
}

/* Hide some header info in intermediate mode if needed? */
body.nav-intermediate .header-info {
    display: none;
    /* Cleaner look if requested text-next-to-icon */
}

/* Federation Logo Wrapper Base Styles */
.federation-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 5px;
    border-radius: 4px;
}

/* Intermediate State Styling (Active Button Look) */
body.nav-intermediate .federation-logo {
    height: 40px !important;
    /* Keep icon sizing consistent, maybe slightly larger if requested but user said 'same size icon' (as normal? or as nav-btn?) assumed same as normal which is 80px usually but inline is 40px. User previously said 'same size icon' next to text. */
    /* Wait, normal in index.html is 40px. The CSS has .federation-logo height 80px but inline overrides? */
    /* Let's strictly follow 'nav-btn active' style */
}

body.nav-intermediate .federation-wrapper {
    background: #000;
    color: var(--theme-primary);
    box-shadow: inset 0 0 20px rgba(255, 153, 51, 0.3), inset 0 -3px 0 rgba(0, 0, 0, 0.5);
    border: 2px solid var(--theme-primary);
    padding: 0 15px;
    /* Add padding like a button */
    height: 50px;
}

.pm-banner {
    background: linear-gradient(90deg, var(--theme-accent) 0%, rgba(0, 0, 0, 0) 100%);
    color: #000;
    padding: 5px 10px;
    font-size: 0.8em;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 0 10px 0;
    margin-bottom: 5px;
    font-family: 'Antonio', 'Arial', sans-serif;
    letter-spacing: 1px;
}

.pm-banner .banner-detail {
    background: rgba(0, 0, 0, 0.4);
    color: var(--theme-accent);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 10px;
    font-family: monospace;
}



/* Minimized State adjustments */
body.nav-minimized .federation-wrapper {
    /* Maybe simple icon style? */
    padding: 2px;
}

body.nav-intermediate .fed-text {
    display: block !important;
    font-size: 1.5em !important;
    /* Match nav-btn font size */
    margin-right: 15px !important;
    color: var(--theme-primary);
}

/* Weather Panel Styles */
#weather-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-top: 15px solid #99ccff;
    /* LCARS Blue */
    border-radius: 20px 0 0 0;
    overflow-y: auto;
}

.weather-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 20px;
    align-items: center;
}

.bottom-status-bar,
.sensors-status-row,
.status-alert-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: rgba(0, 0, 0, 0.9);
    padding: 8px 15px;
    font-size: 0.9em;
    font-weight: bold;
    color: var(--theme-highlight);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.bottom-status-bar {
    z-index: 10001;
}

.weather-current-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.weather-temp-large {
    font-size: 5em;
    font-weight: bold;
    color: var(--theme-highlight);
    text-shadow: 0 0 20px rgba(255, 204, 0, 0.4);
    font-family: 'Antonio', sans-serif;
}

.weather-desc-large {
    font-size: 2em;
    color: var(--theme-accent);
    letter-spacing: 2px;
}

.weather-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    width: 100%;
    max-width: 500px;
}

.weather-detail-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 15px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    border-left: 4px solid var(--theme-secondary);
}

.weather-forecast-row {
    display: flex;
    gap: 15px;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 15px;
}

.weather-forecast-item {
    flex: 0 0 100px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.forecast-day {
    font-weight: bold;
    font-size: 0.9em;
}

.forecast-temp {
    color: var(--theme-highlight);
}

/* Animated Weather Icons (Pure CSS) */
.weather-icon-large {
    width: 100px;
    height: 100px;
    position: relative;
    margin-bottom: 20px;
}

.weather-icon-large::before,
.weather-icon-large::after {
    content: '';
    position: absolute;
    background: currentColor;
    border-radius: 50%;
}

/* Example: Sun Animation */
.weather-sun {
    color: #ffcc00;
    background: radial-gradient(circle, #ffcc00 0%, #ff9900 100%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    left: 20px;
    box-shadow: 0 0 40px #ff9900;
    animation: sun-rotate 10s linear infinite;
}

@keyframes sun-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Cloud Animation */
.weather-cloud {
    color: #fff;
    background: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 40px;
    left: 10px;
    box-shadow: 25px 0 0 0 #fff, 15px -15px 0 0 #fff;
    animation: cloud-float 4s ease-in-out infinite;
}

@keyframes cloud-float {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(10px);
    }
}

/* Help Modal Styles */
.lcars-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    animation: modal-fade-in 0.3s ease-out;
}

@keyframes modal-fade-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

#help-content-markdown h1 {
    font-family: 'Antonio', sans-serif;
    font-size: 2em;
    margin-bottom: 20px;
}

#help-content-markdown h2 {
    font-family: 'Antonio', sans-serif;
    font-size: 1.5em;
    margin-top: 30px;
    margin-bottom: 15px;
}

#help-content-markdown li {
    margin-bottom: 10px;
}

#help-content-markdown strong {
    color: var(--theme-highlight);
}

#help-content-markdown em {
    color: var(--theme-accent);
}

/* RTCW THEME (Stone & Forge) */
body.theme-rtcw {
    --theme-primary: #444444;
    /* Stone Grey */
    --theme-secondary: #222222;
    /* Dark Stone */
    --theme-accent: #cc7a00;
    /* Forge Orange */
    --theme-highlight: #ffcc00;
    /* Torch Light */
    --theme-danger: #990000;
    /* Blood Red */
    --theme-bg: #111111;
    --theme-font: 'Jura', 'Antonio', sans-serif;
}

body.theme-rtcw .pwa-container {
    background: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #0a0a0a 100%);
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.3) 1px, transparent 1px);
    background-size: 50px 50px;
}

body.theme-rtcw .window-container {
    border: 2px solid #555;
    background: rgba(30, 30, 30, 0.95);
    border-radius: 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(255, 102, 0, 0.05);
}

body.theme-rtcw .window-title-bar {
    background: linear-gradient(90deg, #660000 0%, #333 100%);
    border-bottom: 2px solid #222;
    border-radius: 0;
}

body.theme-rtcw .window-title {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 900;
    color: #eee;
}

body.theme-rtcw .nav-btn {
    border-radius: 0 !important;
    border: 1px solid #444 !important;
    background: #222 !important;
    color: #aaa !important;
    clip-path: none !important;
}

body.theme-rtcw .nav-btn:hover {
    background: #444 !important;
    border-color: var(--theme-accent) !important;
    color: #fff !important;
}

body.theme-rtcw .nav-btn.active {
    background: var(--theme-danger) !important;
    color: #fff !important;
    border-color: #ff0000 !important;
}

body.theme-rtcw .lcars-button {
    border-radius: 0 !important;
    clip-path: none !important;
    border: 1px solid #555 !important;
    background: #333 !important;
    color: #ccc !important;
}

body.theme-rtcw .lcars-button:hover {
    background: var(--theme-secondary) !important;
    border-color: var(--theme-accent) !important;
}

body.theme-rtcw #federation-logo {
    filter: sepia(1) saturate(0.5) brightness(0.7) contrast(1.2);
}

body.theme-rtcw .chat-area {
    background: rgba(20, 20, 20, 0.9);
    border: 1px solid #444;
}

body.theme-rtcw #ws-stats-row {
    border-left: 15px solid var(--theme-danger);
    background: rgba(0, 0, 0, 0.9);
}

/* Piano / Sheet Music Enhancements */
.piano-key.next-note {
    background: var(--theme-primary) !important;
    box-shadow: 0 0 15px var(--theme-highlight);
    border-color: var(--theme-highlight) !important;
    color: #000 !important;
}

.sheet-music-container {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    padding: 40px 20px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Align staff to start for scrolling */
    position: relative;
    margin-bottom: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    scrollbar-width: thin;
    scrollbar-color: var(--theme-primary) transparent;
}

.sheet-music-container::-webkit-scrollbar {
    height: 6px;
}

.sheet-music-container::-webkit-scrollbar-thumb {
    background: var(--theme-primary);
    border-radius: 3px;
}

.staff {
    width: min-content;
    min-width: 100%;
    height: 80px;
    position: relative;
    /* 5 lines for the staff */
    background: linear-gradient(to bottom,
            transparent 0%, transparent 19px,
            #555 20px, transparent 21px,
            transparent 31px, #555 32px,
            transparent 33px, transparent 43px,
            #555 44px, transparent 45px,
            transparent 55px, #555 56px,
            transparent 57px, transparent 67px,
            #555 68px, transparent 69%, transparent 100%);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 20px;
}

.sheet-note {
    width: 16px;
    height: 12px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    position: absolute;
    transition: all 0.2s;
    cursor: pointer;
    transform: rotate(-15deg);
}

.sheet-note::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 35px;
    background: rgba(255, 255, 255, 0.3);
    right: -1px;
    bottom: 50%;
    transform: rotate(15deg);
}

.sheet-note.active {
    background: var(--theme-highlight) !important;
    box-shadow: 0 0 12px var(--theme-highlight);
    transform: rotate(-15deg) scale(1.3);
    z-index: 10;
}

.sheet-note.active::after {
    background: var(--theme-highlight) !important;
}

.sheet-note.next-target {
    background: var(--theme-primary);
    opacity: 0.8;
    animation: note-pulse 1.5s infinite;
}

@keyframes note-pulse {
    0% {
        transform: rotate(-15deg) scale(1);
        opacity: 0.6;
    }

    50% {
        transform: rotate(-15deg) scale(1.2);
        opacity: 1;
    }

    100% {
        transform: rotate(-15deg) scale(1);
        opacity: 0.6;
    }
}

.sheet-note-label {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%) rotate(15deg);
    font-size: 0.7em;
    color: #888;
    font-family: var(--theme-font);
}

.piano-keyboard-container {
    display: flex;
    gap: 2px;
    background: #111;
    padding: 10px;
    border-radius: 8px;
    position: relative;
    height: 180px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 2px solid var(--theme-primary);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
    scrollbar-width: thin;
    scrollbar-color: var(--theme-secondary) transparent;
}

.piano-key {
    cursor: pointer;
    user-select: none;
    transition: all 0.1s;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 10px;
    font-family: 'Antonio', sans-serif;
    font-weight: bold;
    font-size: 0.8em;
}

.piano-key.white {
    background: #f0f0f0;
    color: #333;
    border: 1px solid #999;
    border-radius: 0 0 5px 5px;
    height: 100%;
    width: 100%;
}

.piano-key.black {
    background: #222;
    color: #eee;
    border: 1px solid #444;
    border-radius: 0 0 3px 3px;
    height: 60%;
    width: 30px;
    position: absolute;
    top: 0;
    right: -15px;
    z-index: 10;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    font-size: 0.7em;
    padding-bottom: 5px;
}

.piano-key.white:hover {
    background: #fff;
    filter: brightness(1.1);
}

.piano-key.black:hover {
    background: #333;
}

.piano-key.active {
    background: var(--theme-highlight) !important;
    color: #000 !important;
    transform: translateY(2px);
    box-shadow: 0 0 15px var(--theme-highlight);
}

.piano-key.white.next-note {
    background: rgba(255, 153, 51, 0.2);
    border-color: var(--theme-primary);
}

.piano-key.black.next-note {
    border-color: var(--theme-highlight);
    box-shadow: 0 0 10px var(--theme-highlight);
}

/* Quad Layout Mode */
body .main-flex.layout-display-quad {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "left right";
    gap: 10px;
    height: 100%;
    overflow: hidden;
    padding: 0 10px;
}

body .layout-display-quad .section-hidden {
    /* Show everything in quad mode by default, unless minimized logic hides it */
    display: flex !important;
}

/* Override default hidden behavior for panels inside Quad */
body .layout-display-quad>div {
    display: flex;
}

.quad-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    gap: 10px;
    min-width: 0;
}

.quad-column.left {
    grid-area: left;
}

.quad-column.right {
    grid-area: right;
}

.quad-panel-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: flex 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    min-height: 0;
    position: relative;
    border: 1px solid var(--theme-primary);
    border-radius: var(--theme-border-radius);
    background: rgba(0, 0, 0, 0.3);
}

.quad-panel-wrapper>.window-title-bar {
    cursor: default;
    /* No dragging in quad for now */
}

/* Minimize State within Quad */
.quad-panel-wrapper.quad-minimized {
    flex: 0 0 50px;
    /* Header height + small buffer */
    overflow: hidden;
}

.quad-panel-wrapper.quad-minimized .panel-content,
.quad-panel-wrapper.quad-minimized .chat-area,
.quad-panel-wrapper.quad-minimized .chat-main-container,
.quad-panel-wrapper.quad-minimized #settings-panel,
.quad-panel-wrapper.quad-minimized .sensor-group {
    display: none !important;
}

.quad-panel-wrapper.quad-minimized .quad-mini-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    height: 100%;
    color: var(--theme-accent);
}

.quad-panel-wrapper.quad-expanded {
    flex: 100;
}

/* Resizers */
.quad-resizer-vertical {
    width: 10px;
    cursor: col-resize;
    background: rgba(255, 255, 255, 0.1);
    transition: background 0.2s;
}

.quad-resizer-vertical:hover {
    background: var(--theme-highlight);
}

.quad-resizer-horizontal {
    height: 10px;
    cursor: row-resize;
    background: rgba(255, 255, 255, 0.1);
    transition: background 0.2s;
}

.quad-resizer-horizontal:hover {
    background: var(--theme-highlight);
}

/* Adjust visual borders */
.quad-panel-wrapper {
    border-top: 20px solid var(--theme-secondary);
}

.quad-column.right .quad-panel-wrapper {
    border-top-color: var(--theme-primary);
}

/* Mini Mode Summary Styling */
.quad-mini-summary .mini-title {
    font-weight: bold;
    color: var(--theme-text);
}

.quad-mini-summary .mini-stats {
    font-size: 0.8em;
    opacity: 0.8;
}

/* Swap Button special styling */
.window-controls .swap-btn {
    display: none;
    /* Hide default */
}

.layout-display-quad .window-controls .swap-btn {
    display: inline-block;
    /* Show in quad */
}

/* Quad Panel Layout */
#main-quad-container {
    display: flex;
    flex: 1;
    width: 100%;
    min-height: 0;
    /* Important for nested scrolling */
    overflow: hidden;
    gap: 4px;
    /* Space for vertical resizer */
}

.quad-side {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 4px;
    /* Space for horizontal resizer */
    overflow: hidden;
}

.quad-panel-slot {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--theme-primary);
    border-radius: var(--theme-border-radius);
    overflow: hidden;
    min-height: 0;
    position: relative;
    transition: flex 0.3s ease;
}

/* Specific Slot Styling */
/* Top slots get the big header border usually found in LCARS */
.quad-panel-slot.top-slot {
    border-top: 20px solid var(--theme-primary);
    border-radius: 20px 0 0 0;
}

.quad-panel-slot.bottom-slot {
    border-bottom: 20px solid var(--theme-secondary);
    border-radius: 0 0 20px 0;
}

/* Minimized State */
.quad-panel-slot.minimized {
    flex: 0 0 40px !important;
    /* Fixed small height */
    overflow: hidden;
    border-top: none;
    border-bottom: none;
    border-left: 10px solid var(--theme-accent);
}

.quad-panel-slot.minimized .panel-content {
    display: none;
}

.quad-panel-slot.minimized .window-title-bar {
    background: transparent;
    padding: 0 5px;
}

/* Resizers */
.resizer-v {
    width: 8px;
    background: rgba(var(--theme-primary-rgb), 0.2);
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.resizer-v:hover,
.resizer-v.resizing {
    opacity: 1;
    background: var(--theme-highlight);
}

.resizer-h {
    height: 8px;
    background: rgba(var(--theme-secondary-rgb), 0.2);
    cursor: row-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.resizer-h:hover,
.resizer-h.resizing {
    opacity: 1;
    background: var(--theme-highlight);
}

/* Adjustments for existing panels when inside slots */
.quad-panel-slot>div[id$="-panel"] {
    border: none !important;
    border-radius: 0 !important;
    width: 100%;
    height: 100%;
    padding: 5px !important;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Window Title Bar adjustments */
.window-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    background: rgba(var(--theme-primary-rgb), 0.15);
    /* Slightly more visible background */
    margin-bottom: 5px;
    font-size: 0.9em;
    font-weight: bold;
    color: var(--theme-highlight);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 2px solid transparent;
    /* Reserve space for active border */
    transition: all 0.2s ease;
}

/* Active Panel Highlight */
.item-active .window-title-bar,
/* Fallback */
.active-panel .window-title-bar {
    background: rgba(var(--theme-highlight-rgb), 0.3);
    border-top: 2px solid var(--theme-highlight);
    box-shadow: 0 0 15px rgba(var(--theme-highlight-rgb), 0.2);
    text-shadow: 0 0 5px rgba(var(--theme-highlight-rgb), 0.5);
}

.active-panel {
    z-index: 10;
    /* Scanline effect for active panel content? */
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(var(--theme-highlight-rgb), 0.3);
}

.active-panel::before {
    /* Subtle glow corner */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-top: 2px solid var(--theme-highlight);
    border-left: 2px solid var(--theme-highlight);
    pointer-events: none;
    z-index: 11;
}

.active-panel::after {
    /* Subtle glow corner */
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-bottom: 2px solid var(--theme-highlight);
    border-right: 2px solid var(--theme-highlight);
    pointer-events: none;
    z-index: 11;
}


.window-controls {
    display: flex;
    gap: 5px;
}

.window-control-btn {
    background: var(--theme-primary);
    color: #000;
    border: none;
    padding: 2px 6px;
    font-size: 0.8em;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0.8;
}

.window-control-btn:hover {
    filter: brightness(1.2);
    opacity: 1;
}

.window-close-btn {
    background: var(--theme-danger);
    color: #fff;
    padding: 2px 6px;
    font-size: 0.8em;
    cursor: pointer;
    border-radius: 4px;
    margin-left: 5px;
    font-weight: bold;
}

.window-close-btn:hover {
    box-shadow: 0 0 8px var(--theme-danger);
}

/* Fullscreen override for specific panel maximizing */
.quad-panel-slot.maximized {
    position: fixed;
    top: 60px;
    /* Below header */
    left: 10px;
    right: 10px;
    bottom: 80px;
    /* Increased clearance for footer status bars */
    z-index: 1000;
    background: #000;
    border: 2px solid var(--theme-highlight);
    box-shadow: 0 0 50px rgba(0, 0, 0, 1);
}

/* LOCKING LOGIC */
.panel-locked .window-close-btn {
    display: none !important;
}

.quad-panel-slot.slot-locked:not(.maximized):not(.mini-mode) {
    /* If locked, forcefully take up 50% (or whatever the natural split is)
       and ignore sibling's desire to grow/shrink if it respects this.
       Actually, if sibling is mini, it takes 25%. Locked takes 50%.
       This leaves 25% empty space, which is what we want.
    */
    flex: 0 0 50% !important;
}

body {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
    margin: 0;
}

/* Mini Mode Slot Styles */
.quad-panel-slot.mini-mode {
    flex: 0 0 25% !important;
    min-height: 0;
    /* Allow shrinking */
    overflow: hidden;
}

/* Ensure the remaining slot takes up the rest of the space */
.quad-panel-slot.mini-mode+.quad-panel-slot:not(.mini-mode) {
    flex: 1 1 auto !important;
}

.quad-panel-slot:not(.mini-mode)+.quad-panel-slot.mini-mode {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Handle case where both are mini (50% total usage, empty space?) 
   Or user wants them to just stack? 
   Flex column direction on .quad-side handles this naturally if they are 25%.
   The remaining 50% would be empty space? Or should they be 50% each?
   Requirement said "reduces panel to 25% height".
*/

/* Mini View Content Container */
.quad-panel-slot.titlebar-mode {
    flex: 0 0 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: flex 0.4s cubic-bezier(0.25, 1, 0.5, 1), min-height 0.4s ease;
}

.quad-panel-slot {
    transition: flex 0.4s cubic-bezier(0.25, 1, 0.5, 1), min-height 0.4s ease;
    /* Ensure flex-basis change is smooth */
}

.quad-panel-slot.titlebar-mode .panel-content,
.quad-panel-slot.titlebar-mode .mini-view-content,
.quad-panel-slot.titlebar-mode .mini-view {
    display: none !important;
}

.quad-panel-slot.titlebar-mode .window-controls {
    display: flex !important;
    opacity: 0.9;
}

.quad-panel-slot.titlebar-mode .window-close-btn {
    display: inline-block !important;
}

.quad-panel-slot.titlebar-mode .window-title-bar {
    cursor: pointer;
    background: rgba(var(--theme-primary-rgb), 0.15);
    border-bottom: none;
    opacity: 0.85;
    transition: all 0.3s ease;
    padding: 2px 8px;
    height: 32px;
}

.quad-panel-slot.titlebar-mode .window-control-btn {
    padding: 0 4px !important;
    font-size: 0.75em !important;
}

.quad-panel-slot.titlebar-mode:hover .window-title-bar {
    background: var(--theme-highlight);
    color: #000;
    opacity: 1;
}

.quad-panel-slot.titlebar-mode::after {
    display: none;
}


.panel-content.mini-view {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    height: 100%;
}

/* Mini View Content (Generated by JS) */
.mini-view-content {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 10px;
    background: rgba(0, 0, 0, 0.2);
    font-family: 'Antonio', sans-serif;
    color: var(--theme-text);
    overflow: hidden;
    gap: 10px;
}

.mini-view-content .stat-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mini-view-content .stat-label {
    font-size: 0.7em;
    color: var(--theme-secondary);
    text-transform: uppercase;
}

.mini-view-content .stat-value {
    font-size: 1.2em;
    color: var(--theme-highlight);
    font-weight: bold;
}

/* Specific Panel Tweaks in Mini Mode */
.quad-panel-slot.mini-mode .window-title-bar {
    padding: 2px 5px;
    min-height: 24px;
    background: rgba(var(--theme-primary-rgb), 0.2);
}

.quad-panel-slot.mini-mode .window-title {
    font-size: 0.8em;
}

.quad-panel-slot.mini-mode .window-controls button {
    padding: 0 4px;
    font-size: 0.7em;
}

/* Visibility Toggle for Mini Mode */
.quad-panel-slot.mini-mode .panel-content {
    display: none !important;
}

.quad-panel-slot.mini-mode .mini-view-content {
    display: flex !important;
    width: 100%;
    overflow: hidden;
}


/* Specific Mini Mode Styles */

/* Graphs Mini */
.mini-graph-canvas {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

/* Weather Mini */
.mini-weather-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
    padding: 0 10px;
}