/**
 * ResiHub mobile shell — phone widget + dashboard manageability
 * Loaded with floating phone / panel system on all role bases.
 */
:root {
  --rh-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --rh-mobile-safe-top: env(safe-area-inset-top, 0px);
  --rh-mobile-safe-left: env(safe-area-inset-left, 0px);
  --rh-mobile-safe-right: env(safe-area-inset-right, 0px);
}

/* Prevent horizontal “pan the whole dashboard” disaster */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  /* ---- Mini Resi widget (collapsed) ---- */
  #resi-floating-widget.phone-outer,
  #resi-floating-widget {
    bottom: max(16px, var(--rh-mobile-safe-bottom)) !important;
    right: max(12px, var(--rh-mobile-safe-right)) !important;
    left: auto !important;
    width: 58px !important;
    height: 112px !important;
    z-index: 100050 !important;
    /* Stay tappable above iOS home indicator */
    touch-action: manipulation;
  }

  #resi-floating-widget img {
    width: 36px !important;
    height: 36px !important;
  }

  /* ---- Expanded nuclear phone: nearly full-screen sheet ---- */
  #resi-nuclear-phone.phone-outer,
  #resi-nuclear-phone,
  body.rh-mobile-phone-open #resi-nuclear-phone {
    position: fixed !important;
    top: max(8px, var(--rh-mobile-safe-top)) !important;
    left: max(6px, var(--rh-mobile-safe-left)) !important;
    right: max(6px, var(--rh-mobile-safe-right)) !important;
    bottom: max(8px, var(--rh-mobile-safe-bottom)) !important;
    width: auto !important;
    height: auto !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 18px !important;
    z-index: 100200 !important;
    transform: none !important;
  }

  #resi-nuclear-phone .phone-screen,
  #resi-nuclear-phone #phone-chat-live {
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch;
  }

  #resi-nuclear-phone #phone-chat-live {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 8px !important;
  }

  /* Agent row: scroll horizontally instead of crushing */
  #resi-nuclear-phone .phone-agent-row,
  #resi-nuclear-phone [data-phone-agents],
  #resi-nuclear-phone #phone-agent-bar {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
  }

  /* Input row: safe above keyboard area */
  #resi-nuclear-phone #phone-input {
    font-size: 16px !important; /* prevents iOS zoom on focus */
    max-height: 100px !important;
  }

  #resi-nuclear-phone #phone-send,
  #resi-nuclear-phone #phone-upload-btn,
  #resi-nuclear-phone #phone-mute,
  #resi-nuclear-phone #phone-close {
    min-width: 44px !important;
    min-height: 44px !important;
    touch-action: manipulation;
  }

  /* When phone is open, dim background scroll */
  body.rh-mobile-phone-open {
    overflow: hidden !important;
    touch-action: none;
  }
  body.rh-mobile-phone-open > *:not(#resi-nuclear-phone):not(#resi-floating-widget):not(.rh-slide-panel):not(.rh-panel-overlay) {
    /* don't set pointer-events none on everything — breaks panel under phone */
  }

  /* Dashboard chrome: stack, don't squeeze multi-columns */
  .agent-lanes {
    flex-wrap: nowrap !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .dashboard-grid {
    display: grid !important;
    grid-template-columns: 1fr !important; /* critical: never leave desktop 7/3 col on phones */
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
  .left-column,
  .right-column {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
  }

  /* Header menus full width when open */
  #modules-menu.mobile-open,
  #dashboard-menu.mobile-open {
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* Map / lily pad: don't force desktop height */
  #map-container,
  .leaflet-container {
    max-height: 42vh !important;
    min-height: 200px !important;
  }

  /* Cards and tables: allow horizontal scroll inside, not page */
  .table-responsive,
  table.jobs-table,
  .work-orders-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* Keyboard open (visualViewport class toggled by JS) */
body.rh-keyboard-open #resi-nuclear-phone {
  bottom: 4px !important;
  top: max(4px, var(--rh-mobile-safe-top)) !important;
}