Constant MOBILE_PANEL_STYLES 

pub const MOBILE_PANEL_STYLES: &str = r#"
/* Desktop: show all panels side by side */
.panel-container {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
}

.panel-header {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.panel-content {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .panel-container {
        flex-direction: column;
        position: relative;
    }

    /* On mobile, panels stack and only active one shows */
    .panel {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease;
        min-width: unset;
    }

    .panel.panel-active {
        position: relative;
        flex: 1;
        opacity: 1;
        pointer-events: auto;
    }

    /* Panel headers hidden on mobile (tabs replace them) */
    .panel .panel-header {
        display: none;
    }

    /* But show header for active panel if it has controls */
    .panel.panel-active .panel-header.has-controls {
        display: flex;
        padding: 8px 12px;
        background: rgba(0, 0, 0, 0.2);
    }
}
"#;

Styles for switchable panel content (used with mobile tabs)