/* 
 * Custom Mobile CSS for Element Web
 * Oshima Chat - Full screen room list/room view on mobile
 * Style like Element Classic mobile app
 */

/* Mobile devices - max width 768px */
@media screen and (max-width: 768px) {

    /* Prevent horizontal scroll */
    html,
    body,
    #matrixchat {
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* Main MatrixChat container */
    .mx_MatrixChat {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Space panel - show on room list, hide only when viewing room */
    .mx_SpacePanel,
    .mx_SpacePanel_wrapper {
        /* Show by default on mobile */
    }

    /* Hide space panel only when room is active */
    .mx_MatrixChat:has(.mx_RoomView) .mx_SpacePanel,
    .mx_MatrixChat:has(.mx_RoomView) .mx_SpacePanel_wrapper {
        display: none !important;
        width: 0 !important;
    }

    /* === HIDE LEFT PANEL WHEN ROOM VIEW IS ACTIVE === */
    .mx_MatrixChat:has(.mx_RoomView) .mx_LeftPanel_outerWrapper {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        flex: 0 0 0 !important;
    }

    /* Left panel outer wrapper - full width when visible */
    .mx_LeftPanel_outerWrapper {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        flex: 0 0 100vw !important;
        position: relative !important;
    }

    /* Left panel itself */
    .mx_LeftPanel {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    /* === ROOM VIEW FULL WIDTH === */
    .mx_RoomView_wrapper,
    .mx_RoomView {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        flex: 1 1 100vw !important;
        position: relative !important;
    }

    /* Main split - ensure proper layout */
    .mx_MainSplit {
        width: 100vw !important;
        max-width: 100vw !important;
        flex: 1 1 100% !important;
    }

    .mx_MainSplit>div {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* Hide right panel on mobile */
    .mx_RightPanel_outerWrapper,
    .mx_RightPanel {
        display: none !important;
        width: 0 !important;
    }

    /* Hide all resize handles */
    .mx_ResizeHandle,
    .mx_ResizeHandle_horizontal {
        display: none !important;
        width: 0 !important;
    }

    /* === ROOM HEADER - STYLE LIKE ELEMENT CLASSIC === */
    .mx_RoomHeader {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        padding-left: 48px !important;
        /* Space for back button */
        position: relative !important;
    }

    /* Hide original back button from Element */
    .mx_RoomHeader_back,
    .mx_RoomHeader .mx_AccessibleButton[aria-label*="Back"],
    .mx_RoomHeader .mx_AccessibleButton[aria-label*="back"],
    .mx_RoomHeader>button:first-child:not(.mobile-back-button),
    .mx_LegacyRoomHeader_cancelButton {
        display: none !important;
    }

    /* Custom back button - added via JS, styled here */
    .mobile-back-button {
        position: absolute !important;
        left: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        border-radius: 50% !important;
        background: transparent !important;
        border: none !important;
        font-size: 20px !important;
        color: #0dbd8b !important;
        /* Element green */
        font-weight: bold !important;
        z-index: 100 !important;
        transition: background 0.2s !important;
    }

    .mobile-back-button:hover,
    .mobile-back-button:active {
        background: rgba(13, 189, 139, 0.1) !important;
    }

    .mobile-back-button::before {
        content: "‹" !important;
        font-size: 28px !important;
        line-height: 1 !important;
    }

    /* Room body full width */
    .mx_RoomView_body {
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* Timeline full width */
    .mx_RoomView_timeline,
    .mx_RoomView_timeline_wrapper {
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* Message tiles - prevent overflow */
    .mx_EventTile {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .mx_EventTile_line,
    .mx_EventTile_content {
        max-width: calc(100vw - 60px) !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Message text body */
    .mx_MTextBody {
        max-width: 100% !important;
        word-wrap: break-word !important;
    }

    /* Message composer - full width */
    .mx_MessageComposer,
    .mx_MessageComposer_wrapper {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* Fix scroll container */
    .mx_ScrollPanel {
        width: 100% !important;
    }

    /* Room sublist and tiles */
    .mx_RoomSublist,
    .mx_RoomTile {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Hide breadcrumbs */
    .mx_RoomBreadcrumbs,
    .mx_RoomBreadcrumbs2 {
        display: none !important;
    }

    /* Fix AutoHideScrollbar */
    .mx_AutoHideScrollbar {
        width: 100% !important;
    }

    /* Room header name - truncate properly */
    .mx_RoomHeader_name,
    .mx_RoomHeader_nametext {
        max-width: calc(100vw - 200px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* Very small screens */
@media screen and (max-width: 480px) {
    .mx_RoomTile {
        padding: 8px 12px !important;
    }

    .mx_EventTile_content {
        max-width: calc(100vw - 50px) !important;
    }

    .mx_RoomHeader_name,
    .mx_RoomHeader_nametext {
        max-width: calc(100vw - 180px) !important;
    }
}