/* otto-mobile.css — phone-friendly overrides for Element-Web fork
 * Activates only below 900px. Hands off on tablets/desktop. */

@media (max-width: 900px) {

    /* === GLOBAL BIGGER TAP TARGETS === */
    /* Apple/Google guideline: minimum 44x44px (iOS) / 48x48dp (Material) */
    .mx_AccessibleButton,
    button,
    .mx_RoomTile_iconContainer,
    .mx_BasicMessageComposer_input + *,
    [role="button"] {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* === COMPOSER (the bottom message bar) — biggest fix for william === */
    .mx_MessageComposer {
        padding: 8px 6px !important;
        min-height: 64px !important;
    }

    /* The icon row: attach, emoji, voice, etc */
    .mx_MessageComposer_button,
    .mx_MessageComposer_buttonsMenuButton,
    .mx_MessageComposer_uploadButton,
    .mx_MessageComposer_emoji,
    .mx_MessageComposer_stickers,
    .mx_MessageComposer_voiceMessage,
    .mx_MessageComposer_poll,
    .mx_MessageComposer_location,
    .mx_MessageComposer_sendMessage {
        width: 48px !important;
        height: 48px !important;
        padding: 12px !important;
        margin: 2px !important;
        background-size: 24px 24px !important;
    }

    /* Inner SVG icons */
    .mx_MessageComposer_button svg,
    .mx_MessageComposer_buttonsMenuButton svg {
        width: 24px !important;
        height: 24px !important;
    }

    /* Send button - extra prominent */
    .mx_MessageComposer_sendMessage {
        width: 52px !important;
        height: 52px !important;
        background-size: 28px 28px !important;
    }

    /* Composer text input - bigger font, more breathing room */
    .mx_BasicMessageComposer_input,
    .mx_WysiwygComposer_Editor_content,
    [contenteditable="true"] {
        font-size: 16px !important;  /* prevents iOS auto-zoom on focus */
        min-height: 40px !important;
        padding: 10px 12px !important;
        line-height: 1.4 !important;
    }

    /* === ROOM LIST (left sidebar) === */
    /* Hide it by default on mobile - room view takes full screen */
    .mx_LeftPanel {
        position: fixed !important;
        left: 0;
        top: 0;
        bottom: 0;
        width: 85vw !important;
        max-width: 320px !important;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 4px 0 16px rgba(0,0,0,0.4);
    }

    /* When room list is "active" (no specific room selected), show it full-width */
    .mx_MatrixChat--without-panel .mx_LeftPanel,
    body:not(.mx_RoomView_visible) .mx_LeftPanel {
        position: relative !important;
        width: 100vw !important;
        max-width: none !important;
        transform: none !important;
        box-shadow: none !important;
    }

    /* Room tiles - bigger, finger-friendly */
    .mx_RoomTile {
        min-height: 64px !important;
        padding: 10px 12px !important;
    }
    .mx_RoomTile_avatarContainer {
        width: 40px !important;
        height: 40px !important;
    }
    .mx_RoomTile_title {
        font-size: 16px !important;
    }
    .mx_RoomTile_subtitle {
        font-size: 14px !important;
    }

    /* === RIGHT PANEL (member list, settings) === */
    /* Always overlay on mobile, never split-pane */
    .mx_RightPanel {
        position: fixed !important;
        right: 0;
        top: 0;
        bottom: 0;
        width: 90vw !important;
        max-width: 380px !important;
        z-index: 1001;
        box-shadow: -4px 0 16px rgba(0,0,0,0.4);
    }

    /* === ROOM HEADER === */
    .mx_RoomHeader,
    .mx_LegacyRoomHeader {
        min-height: 56px !important;
        padding: 6px 8px !important;
    }
    .mx_RoomHeader_button,
    .mx_LegacyRoomHeader_button {
        width: 40px !important;
        height: 40px !important;
    }
    .mx_RoomHeader_name,
    .mx_LegacyRoomHeader_name {
        font-size: 17px !important;
    }

    /* === MESSAGES === */
    /* More readable line spacing on small screens */
    .mx_EventTile_line,
    .mx_EventTile_body {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }
    /* Bigger avatars in timeline */
    .mx_EventTile_avatar {
        width: 32px !important;
        height: 32px !important;
    }

    /* === DIALOGS / MODALS === */
    /* Full-screen modals on phone */
    .mx_Dialog_wrapper > .mx_Dialog {
        max-width: 96vw !important;
        max-height: 92vh !important;
        padding: 16px !important;
    }
    .mx_Dialog_buttons button,
    .mx_Dialog_primary,
    .mx_Dialog_cancelButton {
        min-height: 48px !important;
        padding: 0 20px !important;
        font-size: 16px !important;
    }

    /* === SCROLLBARS - hide on mobile (touch scrolling) === */
    ::-webkit-scrollbar {
        width: 0 !important;
        background: transparent !important;
    }

    /* === SETTINGS / DROPDOWNS === */
    .mx_Field input,
    .mx_Field select,
    .mx_Field textarea {
        font-size: 16px !important;  /* prevent iOS zoom */
        min-height: 44px !important;
        padding: 10px 12px !important;
    }

    /* === PILL / TAGS === */
    .mx_Pill,
    .mx_BaseAvatar {
        font-size: inherit !important;
    }

    /* === SAFE AREA insets (notched phones) === */
    body {
        padding-left: env(safe-area-inset-left, 0) !important;
        padding-right: env(safe-area-inset-right, 0) !important;
    }
    .mx_MessageComposer {
        padding-bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
    }
}

/* === Even smaller phones === */
@media (max-width: 480px) {
    /* Tighten paddings to claim more horizontal space */
    .mx_RoomView_messageListWrapper {
        padding: 0 !important;
    }
    .mx_EventTile {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}