/* PHOENIX_V4_WEBMGMT_MOBILE_V1
   Mobile presentation layer only. Existing role/auth/API behavior is unchanged. */

@media (max-width: 780px), ((pointer: coarse) and (max-width: 920px)) {
  html,
  body {
    width: 100%;
    min-height: 100%;
    overscroll-behavior-y: none;
  }

  body {
    min-height: var(--phoenix-mobile-vh, 100dvh);
  }

  button,
  .icon-button,
  .nav-button,
  .account-button,
  input,
  select,
  textarea {
    min-height: 44px;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }

  .auth-view {
    min-height: var(--phoenix-mobile-vh, 100dvh);
    padding:
      max(14px, env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      max(14px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
  }

  .login-shell {
    width: 100%;
    min-height: calc(var(--phoenix-mobile-vh, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .login-card {
    padding:
      max(28px, env(safe-area-inset-top))
      20px
      max(28px, env(safe-area-inset-bottom));
  }

  .app-shell,
  .workspace {
    width: 100%;
    min-width: 0;
  }

  .sidebar {
    top: 0;
    width: min(86vw, 320px);
    height: var(--phoenix-mobile-vh, 100dvh);
    padding:
      calc(18px + env(safe-area-inset-top))
      14px
      calc(14px + env(safe-area-inset-bottom))
      calc(14px + env(safe-area-inset-left));
    overscroll-behavior: contain;
  }

  .role-nav {
    -webkit-overflow-scrolling: touch;
  }

  .sidebar-scrim {
    height: var(--phoenix-mobile-vh, 100dvh);
  }

  .topbar {
    height: auto;
    min-height: calc(64px + env(safe-area-inset-top));
    padding:
      env(safe-area-inset-top)
      calc(10px + env(safe-area-inset-right))
      0
      calc(10px + env(safe-area-inset-left));
    gap: 8px;
  }

  .topbar-left {
    min-width: 0;
    flex: 1 1 auto;
  }

  .topbar-left > div {
    min-width: 0;
  }

  #pageTitle {
    max-width: 52vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-actions {
    flex: 0 0 auto;
  }

  .account-menu {
    position: fixed;
    top: calc(68px + env(safe-area-inset-top));
    right: calc(10px + env(safe-area-inset-right));
    width: min(240px, calc(100vw - 20px));
    z-index: 100;
  }

  .main {
    padding:
      12px
      calc(12px + env(safe-area-inset-right))
      calc(16px + env(safe-area-inset-bottom))
      calc(12px + env(safe-area-inset-left));
  }

  .page-head {
    gap: 10px;
    margin-bottom: 14px;
  }

  .head-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }

  .head-actions > button,
  .head-actions > .primary,
  .head-actions > .secondary,
  .head-actions > .danger {
    width: 100%;
    min-width: 0;
  }

  .panel,
  .metric,
  .device-card,
  .contact-list,
  .chat-panel,
  .placeholder {
    border-radius: 14px;
  }

  .device-cards,
  .account-grid,
  .two-col {
    grid-template-columns: 1fr !important;
  }

  .device-meta {
    grid-template-columns: 1fr 1fr;
  }

  .table-wrap {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .table-wrap table {
    min-width: 720px;
  }

  .contact-layout,
  .contact-layout.contact-v1 {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 10px;
  }

  .contact-list {
    max-height: min(36dvh, 320px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .chat-panel {
    min-height: min(62dvh, 640px);
  }

  .message-list {
    min-height: 38dvh;
    max-height: none;
    -webkit-overflow-scrolling: touch;
  }

  .chat-head {
    align-items: flex-start;
    gap: 8px;
  }

  .chat-head-actions {
    justify-content: flex-end;
  }

  .composer {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .composer input {
    min-width: 0;
  }

  .settings-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .settings-row > button,
  .settings-row > select,
  .settings-row > .segmented {
    width: 100%;
  }

  .modal {
    width: 100vw;
    max-width: none;
    height: var(--phoenix-mobile-vh, 100dvh);
    max-height: none;
    margin: 0;
    padding: 0;
  }

  .modal-card {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: none;
    max-height: calc(var(--phoenix-mobile-vh, 100dvh) - env(safe-area-inset-top));
    margin: 0;
    border-radius: 20px 20px 0 0;
    padding:
      16px
      calc(14px + env(safe-area-inset-right))
      calc(16px + env(safe-area-inset-bottom))
      calc(14px + env(safe-area-inset-left));
    -webkit-overflow-scrolling: touch;
  }

  .toast {
    left: calc(12px + env(safe-area-inset-left));
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: auto;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .metrics {
    grid-template-columns: 1fr !important;
  }

  .head-actions {
    grid-template-columns: 1fr;
  }

  .device-meta {
    grid-template-columns: 1fr;
  }

  .bubble {
    max-width: 92%;
  }
}

/* Keep hover-only affordances visible on touch devices. */
@media (hover: none) and (pointer: coarse) {
  .nav-button:active,
  .contact-person:active,
  .secondary:active,
  .ghost:active,
  .primary:active {
    transform: scale(.985);
  }
}