/**
 * Datcord mobile layout overrides
 * Targets the main app UI (Stoat/Revolt) on narrow viewports.
 * Uses @media queries so desktop is unaffected.
 */

@media (max-width: 768px) {
  /* ── Hide members sidebar on mobile (toggle via header icon) ── */
  #root aside:last-of-type,
  [data-slot="member-sidebar"],
  [data-slot="members"] {
    display: none !important;
  }

  /* ── Tooltip positioning: prevent overlap on mobile ── */
  [role="tooltip"],
  #floating [role="tooltip"] {
    max-width: min(280px, calc(100vw - 24px)) !important;
    z-index: 9999 !important;
  }

  /* ── Floating panels / dropdowns: keep within viewport ── */
  #floating > * {
    max-width: min(320px, calc(100vw - 16px)) !important;
    z-index: 9998 !important;
  }

  /* ── Touch targets: minimum 44px for icon buttons ── */
  [data-slot="icon-button"],
  [data-slot="iconButton"] {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* ── Text overflow: prevent long names from breaking layout ── */
  [data-slot="overflowing-text"] {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  /* ── Main content: fill available width ── */
  #root > div {
    min-width: 0 !important;
  }

  #root > div > div {
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }
}

/* ── Safe area: iPhone notch / home indicator ── */
body {
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-top: env(safe-area-inset-top, 0);
}

/* Ensure fixed/sticky bottom bars respect safe area */
[data-slot="navigation-rail"],
[data-slot="bottom-bar"] {
  padding-bottom: env(safe-area-inset-bottom, 0) !important;
}