/**
 * Custom mobile-friendly CSS for Element Web
 * Fixes 3-column layout on mobile devices
 *
 * Target: Element Web v1.12.13
 * Project: Parahub Chat
 */

/* ============================
   MOBILE LAYOUT FIXES
   ============================ */

@media screen and (max-width: 768px) {
  /* AGGRESSIVE: Force single-column layout */
  body,
  #matrixchat,
  .mx_MatrixChat,
  html {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Ensure iframe and its container take full width */
  body > iframe,
  #matrixchat > iframe {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ALWAYS hide panels on mobile (no FOUC) */
  /* JS will show them when hamburger is clicked */
  .mx_SpacePanel {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
  }

  /* ALWAYS position left panel off-screen on mobile */
  .mx_LeftPanel_outerWrapper {
    position: fixed !important;
    left: -100vw !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 90vw !important;
    max-width: 360px !important;
    z-index: 1950 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: white !important;
    transition: left 0.3s ease, box-shadow 0.3s ease !important;
    overflow-y: auto !important;
  }

  /* When opened by hamburger, slide IN from left */
  .mx_LeftPanel_outerWrapper[data-parahub-open="true"] {
    left: 0 !important;
    box-shadow: 2px 0 8px rgba(0,0,0,0.3) !important;
  }

  /* Fix header elements in drawer */
  .mx_LeftPanel_outerWrapper .mx_LeftPanel_userHeader {
    padding: 8px 12px !important;
  }

  .mx_LeftPanel_outerWrapper .mx_RoomSearch {
    padding: 8px 12px !important;
  }

  .mx_LeftPanel_outerWrapper .mx_RoomSearch_input {
    font-size: 16px !important;
  }

  /* Fix tabs overflow */
  .mx_LeftPanel_outerWrapper .mx_LeftPanel_filterContainer {
    padding: 4px 8px !important;
    overflow-x: auto !important;
  }

  /* Room list items spacing */
  .mx_LeftPanel_outerWrapper .mx_RoomTile {
    padding: 8px 12px !important;
  }

  /* Hide Element's internal hamburger when loaded in Parahub iframe */
  /* Parahub provides its own hamburger button */
  #parahub-hamburger-btn {
    display: none !important;
  }

  /* Alternative: if you want to keep it but hide off-screen */
  /*
  .mx_LeftPanel_outerWrapper {
    position: fixed !important;
    left: -100% !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 80% !important;
    max-width: 320px !important;
    z-index: 1000 !important;
    transition: left 0.3s ease !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3) !important;
  }
  */

  /* Show left panel when menu is opened (you'll need to add toggle logic) */
  .mx_LeftPanel_outerWrapper.mx_LeftPanel--opened {
    left: 0 !important;
    display: block !important;
    box-shadow: 2px 0 8px rgba(0,0,0,0.3) !important;
  }

  /* HIDE RIGHT PANEL always */
  .mx_RightPanel,
  .mx_RightPanel_ResizeWrapper,
  aside.mx_RightPanel,
  .mx_RightPanel_wrapper {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Hide any resize handles that might create visual artifacts */
  .mx_ResizeHandle,
  .mx_RightPanel_ResizeWrapper > .mx_ResizeHandle,
  div[class*="ResizeHandle"] {
    display: none !important;
    width: 0 !important;
    opacity: 0 !important;
  }

  /* MAKE CENTER TIMELINE FULL-WIDTH always */
  .mx_RoomView,
  .mx_RoomView_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    flex: 1 1 100% !important;
  }

  .mx_RoomView_body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .mx_MainSplit {
    width: 100% !important;
    max-width: 100vw !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Ensure no gap between columns in MainSplit */
  .mx_MainSplit > * {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Force RoomView to take all available space */
  .mx_MainSplit > .mx_RoomView,
  .mx_MainSplit > main {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Remove any fixed widths from main container */
  .mx_MatrixChat_wrapper,
  .mx_MatrixChat,
  main.mx_RoomView {
    width: 100% !important;
    max-width: 100vw !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  /* Welcome/Login screens: Keep default responsive behavior */
  .mx_Welcome_wrapper,
  .mx_AuthPage,
  .mx_Login,
  .mx_Register {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px !important;
    overflow-y: auto !important;
  }

  /* TIMELINE ADJUSTMENTS */
  .mx_TimelinePanel,
  .mx_RoomView_timeline,
  .mx_RoomView_messagePanel,
  .mx_RoomView_messageListWrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  .mx_EventTile {
    padding: 8px 12px !important;
    max-width: 100% !important;
  }

  /* Increase message font size for readability */
  .mx_EventTile_content {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  /* MESSAGE COMPOSER FIXES */
  .mx_MessageComposer {
    padding: 4px !important;
  }

  .mx_MessageComposer_wrapper {
    padding: 4px !important;
  }

  /* Compact send button for mobile */
  .mx_MessageComposer_sendMessage {
    min-width: 40px !important;
    min-height: 40px !important;
  }

  /* Compact composer action buttons (emoji, attach, etc.) */
  .mx_MessageComposer_button,
  .mx_MessageComposer_actions .mx_AccessibleButton,
  .mx_MessageComposer_buttonMenu {
    padding: 4px !important;
    margin: 2px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  /* ROOM HEADER ADJUSTMENTS */
  .mx_RoomHeader {
    padding: 8px 12px !important;
  }

  /* Header buttons — use generic selector (mx_RoomHeader_button removed in v1.12.13) */
  .mx_RoomHeader .mx_AccessibleButton {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* TOUCH TARGET IMPROVEMENTS */
  .mx_AccessibleButton {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 8px !important;
  }

  /* Increase avatar size slightly */
  .mx_BaseAvatar {
    min-width: 36px !important;
    min-height: 36px !important;
  }

  /* SPACING FIXES */
  .mx_RoomView_timeline {
    padding: 0 8px !important;
  }

  /* Fix scrollbar on mobile */
  .mx_ScrollPanel {
    -webkit-overflow-scrolling: touch !important;
  }

  /* SEARCH/FILTER FIXES */
  .mx_RoomSearch {
    padding: 8px !important;
  }

  .mx_RoomSearch_input {
    font-size: 16px !important; /* Prevent zoom on iOS */
  }

  /* MESSAGE ACTIONS (reply, react, etc.) */
  .mx_MessageActionBar {
    padding: 4px !important;
  }

  .mx_MessageActionBar_iconButton {
    min-width: 36px !important;
    min-height: 36px !important;
  }

  /* CONTEXT MENUS */
  .mx_ContextualMenu {
    max-width: 90vw !important;
  }

  /* MODALS/DIALOGS */
  .mx_Dialog {
    max-width: 95vw !important;
    max-height: 90vh !important;
    margin: 16px !important;
  }

  .mx_Dialog_content {
    max-height: calc(90vh - 120px) !important;
    overflow-y: auto !important;
  }

  /* USER MENU */
  .mx_UserMenu {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* ROOM LIST (when visible) */
  .mx_LeftPanel_roomListWrapper,
  .mx_LeftPanel_roomListContainer,
  .mx_LeftPanel_actualRoomListContainer {
    width: 100% !important;
  }

  .mx_RoomTile {
    padding: 8px 12px !important;
    min-height: 52px !important;
  }

  .mx_RoomTile_title {
    font-size: 16px !important;
  }

  /* FILE UPLOAD PREVIEW */
  .mx_FileDropTarget {
    font-size: 16px !important;
  }

  /* IMAGE VIEWER */
  .mx_ImageView {
    padding: 8px !important;
  }

  /* VOICE MESSAGES */
  .mx_VoiceMessagePrimaryContainer {
    padding: 8px !important;
  }
}

/* ============================
   TABLET ADJUSTMENTS (768px - 1024px)
   ============================ */

@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* On tablets, keep left panel but hide right panel */
  .mx_LeftPanel {
    width: 280px !important;
  }

  .mx_RightPanel {
    display: none !important;
  }

  .mx_RoomView {
    width: calc(100% - 280px) !important;
  }
}

/* ============================
   DARK MODE SUPPORT
   ============================ */

@media screen and (max-width: 768px) {
  .mx_LeftPanel.mx_LeftPanel--opened {
    background: var(--cpd-color-bg-canvas-default) !important;
  }
}

/* ============================
   ACCESSIBILITY
   ============================ */

/* Ensure focus indicators are visible on mobile */
@media screen and (max-width: 768px) {
  *:focus-visible {
    outline: 2px solid var(--cpd-color-border-focused) !important;
    outline-offset: 2px !important;
  }
}