/* ============================================
   CORE Chat - Embedded/Narrow Viewport Styles
   Mobile-app-like layout for ~400px iframe
   v16 - remove right-side gutter for more chat space
   ============================================ */

@media (max-width: 600px) {

  /* === BASE FONT SIZE === */
  html, body {
    font-size: 13px !important;
  }

  /* === HIDE SPACE PANEL COMPLETELY === */
  .mx_SpacePanel,
  nav.mx_SpacePanel,
  [class*="SpacePanel"] {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    flex: 0 0 0px !important;
    visibility: hidden !important;
  }

  /* === LEFT PANEL: HIDDEN BY DEFAULT, FULL OVERLAY WHEN TOGGLED === */
  .mx_LeftPanel_outerWrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 100 !important;
    background: var(--cpd-color-bg-canvas-default, #15191e) !important;
    transform: translateX(-100%) !important;
    pointer-events: none !important;
    transition: transform 0.2s ease !important;
    overflow: hidden !important;
  }

  html.mx_embedded_showRooms .mx_LeftPanel_outerWrapper {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  /* CRITICAL: Override the flex layout of inner wrappers
     Force everything inside to be 100% width */
  .mx_LeftPanel_outerWrapper > *,
  .mx_LeftPanel_wrapper,
  .mx_LeftPanel_wrapper.mx_LeftPanel_newRoomList {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Force wrapper--user to fill all available space, override inline width */
  .mx_LeftPanel_wrapper--user,
  div.mx_LeftPanel_wrapper--user,
  .mx_LeftPanel_wrapper--user[style] {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }

  .mx_LeftPanel,
  .mx_LeftPanel.mx_LeftPanel_minimized,
  .mx_LeftPanel.mx_LeftPanel_newRoomList {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Ensure room list shows properly even if panel was minimized */
  .mx_LeftPanel_minimized .mx_LeftPanel_filterContainer,
  .mx_LeftPanel_minimized .mx_RoomSearch {
    display: flex !important;
    width: 100% !important;
  }

  .mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer,
  .mx_LeftPanel_minimized .mx_LeftPanel_actualRoomListContainer,
  .mx_LeftPanel_minimized .mx_LeftPanel_roomListWrapper {
    display: block !important;
    width: 100% !important;
  }

  .mx_LeftPanel_minimized .mx_RoomTile { width: 100% !important; }
  .mx_LeftPanel_minimized .mx_RoomTile_titleContainer { display: flex !important; }
  .mx_LeftPanel_minimized .mx_RoomTile_title { display: block !important; }
  .mx_LeftPanel_minimized .mx_UserMenu_name { display: block !important; }

  /* Hide resize handle */
  .mx_ResizeHandle,
  .mx_ResizeHandle--horizontal,
  #lp-resizer {
    display: none !important;
  }

  /* === ROOM VIEW: FULL WIDTH === */
  .mx_RoomView_wrapper {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .mx_RoomView,
  .mx_MainSplit {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .mx_MatrixChat {
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* === HIDE RIGHT PANEL === */
  .mx_RightPanel,
  .mx_RightPanel_ResizeWrapper {
    display: none !important;
  }

  /* === ROOM HEADER: COMPACT === */
  .mx_RoomHeader {
    padding: 0 4px 0 0 !important;
    min-height: 44px !important;
    font-size: 13px !important;
  }

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

  /* === BACK BUTTON === */
  .mx_embedded_backBtn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    color: var(--cpd-color-icon-primary, #c8c8cd) !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    padding: 0 !important;
    margin: 0 2px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    font-family: system-ui, -apple-system, sans-serif !important;
  }

  .mx_embedded_backBtn:hover {
    background: var(--cpd-color-bg-subtle-secondary, rgba(255,255,255,0.1)) !important;
  }

  /* === MESSAGE COMPOSER: COMPACT === */
  .mx_MessageComposer {
    padding: 4px 8px !important;
    font-size: 13px !important;
  }

  .mx_MessageComposer .mx_BasicMessageComposer,
  .mx_MessageComposer .mx_BasicMessageComposer .mx_BasicMessageComposer_input {
    font-size: 13px !important;
  }

  /* === TIMELINE: COMPACT + REMOVE RIGHT GUTTER === */

  /* Remove the large right padding on the message list */
  .mx_RoomView_MessageList {
    padding-right: 4px !important;
    padding-left: 4px !important;
  }

  .mx_EventTile {
    padding-left: 8px !important;
    padding-right: 4px !important;
    font-size: 13px !important;
  }

  /* KEY FIX: Remove the 80px right margin on message lines
     This is what reserves space for the action bar + read receipts */
  .mx_EventTile_line,
  .mx_EventTile_line .mx_EventTile_content {
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  /* Hide read receipt avatars/expand buttons to save space */
  .mx_ReadReceiptGroup {
    display: none !important;
  }

  /* Hide the "expand" toggle on collapsed system event summaries */
  .mx_GenericEventListSummary_toggle {
    display: none !important;
  }

  /* Make collapsed system events more compact */
  .mx_GenericEventListSummary {
    font-size: 11px !important;
    padding-right: 4px !important;
  }

  /* Make the action bar overlay on top of the message instead of taking space */
  .mx_MessageActionBar {
    right: 4px !important;
    top: -16px !important;
  }

  .mx_EventTile .mx_EventTile_body { font-size: 13px !important; }
  .mx_EventTile .mx_DisambiguatedProfile { font-size: 12px !important; }
  .mx_EventTile .mx_MessageTimestamp { font-size: 11px !important; }

  .mx_EventTile .mx_BaseAvatar {
    width: 28px !important;
    height: 28px !important;
  }

  .mx_EventTile_content { margin-right: 0 !important; }

  /* === SCROLLBAR === */
  ::-webkit-scrollbar { width: 4px !important; }

  /* === HOME/AUTH PAGE === */
  .mx_HomePage { padding: 16px !important; font-size: 13px !important; }
  .mx_AuthPage { padding: 16px !important; }
  .mx_AuthPage .mx_AuthPage_modalBlur { max-width: 100% !important; }
}