/*
 * Legwada Chat - Mobile First CSS
 * Optimise l'experience Element pour mobile (100% mobile-first)
 * Version: 1.0.0
 */

/* ============================================
   VARIABLES MOBILE
   ============================================ */
:root {
  --mobile-header-height: 56px;
  --mobile-composer-height: 60px;
  --mobile-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-safe-area-top: env(safe-area-inset-top, 0px);
}

/* ============================================
   RESET MOBILE - Cacher les elements desktop
   ============================================ */
@media screen and (max-width: 768px) {

  /* === PANNEAU SPACES (gauche) - CACHE === */
  .mx_SpacePanel,
  nav[aria-label="Spaces"] {
    display: none !important;
    width: 0 !important;
  }

  /* === LAYOUT PRINCIPAL === */
  .mx_MatrixChat {
    display: flex !important;
    flex-direction: column !important;
  }

  /* === LEFT PANEL (liste des rooms) === */
  .mx_LeftPanel,
  .mx_LeftPanel_outerWrapper,
  nav[aria-label="Room list"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 100 !important;
    background: var(--cpd-color-bg-canvas-default, #fff) !important;
  }

  /* Quand une room est ouverte, cacher la liste */
  .mx_MatrixChat_wrapper.mx_MatrixChat_roomView .mx_LeftPanel,
  .mx_MatrixChat_wrapper.mx_MatrixChat_roomView .mx_LeftPanel_outerWrapper,
  .mx_MatrixChat_wrapper.mx_MatrixChat_roomView nav[aria-label="Room list"] {
    display: none !important;
  }

  /* === ROOM VIEW (chat) - PLEIN ECRAN === */
  .mx_RoomView,
  .mx_RoomView_wrapper,
  main[role="main"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    z-index: 50 !important;
  }

  /* === HEADER ROOM - Compact === */
  .mx_RoomHeader,
  .mx_LegacyRoomHeader,
  banner {
    height: var(--mobile-header-height) !important;
    min-height: var(--mobile-header-height) !important;
    padding: 8px 12px !important;
    padding-top: calc(8px + var(--mobile-safe-area-top)) !important;
  }

  /* Bouton retour visible */
  .mx_RoomHeader_back,
  .mx_LegacyRoomHeader_back {
    display: flex !important;
    width: 40px !important;
    height: 40px !important;
  }

  /* Titre de la room - pas de troncature */
  .mx_RoomHeader_heading,
  .mx_LegacyRoomHeader_nametext,
  .mx_RoomHeader h1 {
    font-size: 16px !important;
    font-weight: 600 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: calc(100vw - 180px) !important;
  }

  /* === TIMELINE (messages) === */
  .mx_RoomView_timeline,
  .mx_RoomView_MessageList {
    padding: 8px !important;
    padding-bottom: calc(var(--mobile-composer-height) + 20px + var(--mobile-safe-area-bottom)) !important;
  }

  /* Messages - taille de police lisible */
  .mx_EventTile_body,
  .mx_MTextBody {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  /* Avatars plus petits sur mobile */
  .mx_EventTile_avatar .mx_BaseAvatar,
  .mx_EventTile .mx_BaseAvatar {
    width: 32px !important;
    height: 32px !important;
  }

  /* === MESSAGE COMPOSER - Grand et accessible === */
  .mx_MessageComposer,
  region[aria-label="Message composer"] {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    min-height: var(--mobile-composer-height) !important;
    padding: 8px 12px !important;
    padding-bottom: calc(8px + var(--mobile-safe-area-bottom)) !important;
    background: var(--cpd-color-bg-canvas-default, #fff) !important;
    border-top: 1px solid var(--cpd-color-border-interactive-secondary, #e5e5e5) !important;
    z-index: 200 !important;
    box-sizing: border-box !important;
  }

  /* Input de message - plus grand */
  .mx_MessageComposer_input,
  .mx_BasicMessageComposer_input,
  .mx_SendMessageComposer {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 10px 12px !important;
    border-radius: 22px !important;
    background: var(--cpd-color-bg-subtle-secondary, #f5f5f5) !important;
  }

  /* Placeholder visible */
  .mx_BasicMessageComposer_input::placeholder,
  .mx_SendMessageComposer::placeholder {
    font-size: 15px !important;
    color: var(--cpd-color-text-secondary, #737373) !important;
  }

  /* Boutons du composer - plus gros */
  .mx_MessageComposer_button,
  .mx_MessageComposer_actions button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* === RIGHT PANEL (infos room) - Overlay === */
  .mx_RightPanel,
  aside,
  complementary {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 300 !important;
    background: var(--cpd-color-bg-canvas-default, #fff) !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease !important;
  }

  .mx_RightPanel.mx_RightPanel_shown,
  .mx_RightPanel:not(.mx_RightPanel_hidden) {
    transform: translateX(0) !important;
  }

  /* === SEARCH BAR === */
  .mx_RoomSearch,
  .mx_LeftPanel_filterContainer {
    padding: 8px 12px !important;
  }

  .mx_RoomSearch input,
  .mx_SearchBox input {
    height: 44px !important;
    font-size: 16px !important;
    border-radius: 22px !important;
    padding: 0 16px !important;
  }

  /* === ROOM LIST ITEMS - Plus gros pour touch === */
  .mx_RoomTile,
  .mx_RoomSublist_tile {
    min-height: 56px !important;
    padding: 8px 12px !important;
  }

  .mx_RoomTile_title {
    font-size: 15px !important;
    font-weight: 500 !important;
  }

  .mx_RoomTile_subtitle {
    font-size: 13px !important;
  }

  /* Avatar dans la liste */
  .mx_RoomTile .mx_BaseAvatar {
    width: 44px !important;
    height: 44px !important;
  }

  /* === LOGIN PAGE - Mobile friendly === */
  .mx_AuthPage,
  .mx_Login,
  .mx_Register {
    padding: 16px !important;
    padding-top: calc(16px + var(--mobile-safe-area-top)) !important;
  }

  /* Cacher footer inutile */
  .mx_AuthFooter,
  contentinfo {
    display: none !important;
  }

  /* Form inputs plus grands */
  .mx_AuthPage input,
  .mx_Login input,
  .mx_Register input {
    height: 48px !important;
    font-size: 16px !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
  }

  /* Boutons auth plus grands */
  .mx_AuthPage button,
  .mx_Login_submit,
  .mx_Register_submit {
    height: 48px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 24px !important;
  }

  /* === DIALOGS - Plein ecran sur mobile === */
  .mx_Dialog,
  dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* === TOASTS - Position mobile === */
  .mx_ToastContainer {
    top: auto !important;
    bottom: calc(var(--mobile-composer-height) + 20px + var(--mobile-safe-area-bottom)) !important;
    left: 16px !important;
    right: 16px !important;
    max-width: calc(100vw - 32px) !important;
  }

  /* === MENUS CONTEXTUELS === */
  .mx_ContextualMenu,
  [role="menu"] {
    max-width: calc(100vw - 32px) !important;
    max-height: 60vh !important;
  }

  /* === VIDEO ROOMS - Optimise === */
  .mx_VideoRoomView iframe,
  .mx_JitsiMeetWidget iframe {
    width: 100vw !important;
    height: calc(100vh - var(--mobile-header-height) - var(--mobile-composer-height)) !important;
  }

  /* === THREADS PANEL - Plein ecran === */
  .mx_ThreadPanel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 250 !important;
  }

  /* === EMOJIS PICKER - Plus grand === */
  .mx_EmojiPicker {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 50vh !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    border-radius: 16px 16px 0 0 !important;
  }

  /* === REACTIONS - Plus grandes pour touch === */
  .mx_ReactionsRow_showAll,
  .mx_ReactionPicker button {
    min-width: 44px !important;
    min-height: 36px !important;
  }

  /* === SCROLL SMOOTH === */
  .mx_RoomView_timeline,
  .mx_AutoHideScrollbar {
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* === WELCOME PAGE - Simplifie === */
  .mx_Welcome,
  .mx_HomePage {
    padding: 24px 16px !important;
    text-align: center !important;
  }

  .mx_Welcome h1,
  .mx_HomePage h1 {
    font-size: 24px !important;
  }

  .mx_Welcome h2,
  .mx_HomePage h2 {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }

  /* === MEMBER LIST - Touch friendly === */
  .mx_MemberList .mx_EntityTile {
    min-height: 56px !important;
    padding: 8px 12px !important;
  }

  /* === SETTINGS - Mobile layout === */
  .mx_UserSettingsDialog,
  .mx_RoomSettingsDialog {
    width: 100vw !important;
    height: 100vh !important;
  }

  .mx_SettingsTab {
    padding: 16px !important;
  }

  /* === VOICE MESSAGES - Plus grand === */
  .mx_VoiceMessageRecording,
  .mx_AudioPlayer {
    min-height: 48px !important;
  }

  .mx_AudioPlayer_seek {
    height: 32px !important;
  }

  /* === IMAGE ATTACHMENTS - Responsive === */
  .mx_MImageBody img {
    max-width: 100% !important;
    max-height: 300px !important;
    border-radius: 12px !important;
  }

  /* === REPLY PREVIEW - Compact === */
  .mx_ReplyPreview {
    max-height: 60px !important;
    padding: 8px !important;
  }

  /* === TYPING INDICATOR === */
  .mx_WhoIsTypingTile {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  /* === UNREAD INDICATOR === */
  .mx_RoomView_jumpToBottomButton {
    bottom: calc(var(--mobile-composer-height) + 60px + var(--mobile-safe-area-bottom)) !important;
    right: 16px !important;
    width: 48px !important;
    height: 48px !important;
  }

  /* === ENCRYPTION BADGES - Plus visible === */
  .mx_E2EIcon {
    width: 20px !important;
    height: 20px !important;
  }

}

/* ============================================
   SMALL MOBILE (iPhone SE, etc.)
   ============================================ */
@media screen and (max-width: 375px) {

  .mx_RoomHeader h1,
  .mx_RoomHeader_heading {
    font-size: 14px !important;
    max-width: calc(100vw - 160px) !important;
  }

  .mx_EventTile_body {
    font-size: 14px !important;
  }

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

  .mx_RoomTile .mx_BaseAvatar {
    width: 40px !important;
    height: 40px !important;
  }
}

/* ============================================
   LANDSCAPE MOBILE
   ============================================ */
@media screen and (max-width: 768px) and (orientation: landscape) {

  .mx_RoomView_timeline {
    padding-bottom: calc(var(--mobile-composer-height) + 10px) !important;
  }

  .mx_MessageComposer {
    min-height: 50px !important;
  }

  .mx_EmojiPicker {
    height: 40vh !important;
  }
}

/* ============================================
   DARK MODE MOBILE ADJUSTMENTS
   ============================================ */
@media screen and (max-width: 768px) {
  [class*="dark"] .mx_MessageComposer,
  .mx_theme_dark .mx_MessageComposer {
    background: var(--cpd-color-bg-canvas-default, #1a1a1a) !important;
    border-top-color: var(--cpd-color-border-interactive-secondary, #333) !important;
  }

  [class*="dark"] .mx_BasicMessageComposer_input,
  .mx_theme_dark .mx_BasicMessageComposer_input {
    background: var(--cpd-color-bg-subtle-secondary, #262626) !important;
  }
}

/* ============================================
   PWA / STANDALONE MODE
   ============================================ */
@media screen and (display-mode: standalone) {
  :root {
    --mobile-safe-area-top: env(safe-area-inset-top, 20px);
    --mobile-safe-area-bottom: env(safe-area-inset-bottom, 20px);
  }
}

/* ============================================
   TOUCH IMPROVEMENTS
   ============================================ */
@media (hover: none) and (pointer: coarse) {
  /* Tous les elements cliquables = min 44px */
  button,
  [role="button"],
  a,
  .mx_AccessibleButton {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Disable hover states sur touch */
  .mx_RoomTile:hover,
  .mx_EventTile:hover {
    background: transparent !important;
  }

  /* Active state pour feedback tactile */
  .mx_RoomTile:active,
  .mx_EventTile:active,
  button:active {
    opacity: 0.7 !important;
    transform: scale(0.98) !important;
  }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */
@media screen and (max-width: 768px) {
  /* GPU acceleration pour les animations */
  .mx_RoomView,
  .mx_LeftPanel,
  .mx_RightPanel {
    will-change: transform;
    transform: translateZ(0);
  }

  /* Reduce motion si prefere */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
}