/* WaveBlue mobile baseline, 2026-05-28.
   Loaded after page-specific CSS to normalize mobile behavior across public HTML pages. */

:root {
  --wb-safe-top: env(safe-area-inset-top, 0px);
  --wb-safe-right: env(safe-area-inset-right, 0px);
  --wb-safe-bottom: env(safe-area-inset-bottom, 0px);
  --wb-safe-left: env(safe-area-inset-left, 0px);
  --wb-touch-target: 44px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-width: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow-x: clip;
  overscroll-behavior-x: none;
  -webkit-tap-highlight-color: transparent;
}

img,
video,
canvas,
svg,
iframe {
  max-width: 100%;
}

img,
video,
canvas {
  height: auto;
}

button,
a,
input,
select,
textarea,
[role="button"],
[tabindex]:not([tabindex="-1"]) {
  touch-action: manipulation;
}

button,
.bw-btn,
.bw-btn-icon,
.hdr-btn,
.feed-action-btn,
.mob-action-btn,
.btn,
.button,
input[type="button"],
input[type="submit"] {
  min-height: var(--wb-touch-target);
}

input,
select,
textarea {
  max-width: 100%;
  font-size: 16px;
}

table {
  max-width: 100%;
}

pre,
code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

[hidden] {
  display: none !important;
}

@supports (height: 100dvh) {
  .wb-mobile-vh,
  .bw-app,
  .app-shell,
  main {
    min-height: 100dvh;
  }
}

@media (max-width: 900px) {
  body {
    overflow-x: hidden;
  }

  main,
  section,
  article,
  header,
  footer,
  nav,
  aside,
  form,
  .container,
  .wrapper,
  .content,
  .page,
  .page-shell,
  .bw-container,
  .bw-page,
  .bw-card,
  .card,
  .panel,
  .modal,
  .bw-modal {
    max-width: 100%;
  }

  .grid,
  .cards,
  .card-grid,
  .feature-grid,
  .stats-grid,
  .dashboard-grid,
  .profile-grid,
  .shop-grid,
  .streams-grid,
  .feed-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .table-wrap,
  .table-responsive,
  .overflow-x,
  .admin-table,
  .data-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .bw-modal-overlay,
  .modal-overlay,
  .dialog-overlay {
    padding:
      calc(12px + var(--wb-safe-top))
      calc(12px + var(--wb-safe-right))
      calc(12px + var(--wb-safe-bottom))
      calc(12px + var(--wb-safe-left));
  }

  .bw-modal,
  .modal,
  dialog {
    width: min(94vw, 560px) !important;
    max-width: min(94vw, 560px) !important;
    max-height: calc(100dvh - var(--wb-safe-top) - var(--wb-safe-bottom) - 24px) !important;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .bw-modal-body,
  .modal-body,
  .sheet-body,
  .panel-body {
    overflow-wrap: anywhere;
  }

  .hide-mobile {
    display: none !important;
  }
}

@media (max-width: 768px) {
  body.app-page {
    min-height: 100dvh;
    padding: 0;
  }

  body.app-page .bw-app {
    min-height: 100dvh;
    padding-bottom: calc(64px + var(--wb-safe-bottom)) !important;
    overflow-x: hidden;
  }

  body.app-page .bw-workspace-rail,
  body.app-page .bw-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding-top: var(--wb-safe-top) !important;
    padding-bottom: calc(12px + var(--wb-safe-bottom)) !important;
    z-index: 7000 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    transition: transform 180ms ease;
  }

  body.app-page .bw-workspace-rail {
    left: 0 !important;
    transform: translateX(-104%) !important;
  }

  body.app-page .bw-workspace-rail.open {
    transform: translateX(0) !important;
  }

  body.app-page .bw-sidebar {
    left: 0 !important;
    width: min(86vw, 320px) !important;
    transform: translateX(-104%) !important;
  }

  body.app-page .bw-sidebar.open {
    transform: translateX(0) !important;
  }

  body.app-page .bw-mobile-backdrop,
  body.app-page #mobile-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 6800 !important;
    background: rgba(6, 12, 26, 0.46) !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  body.app-page .bw-mobile-backdrop.active,
  body.app-page #mobile-backdrop.active {
    opacity: 1;
    pointer-events: auto;
  }

  body.app-page .bw-chat-main {
    width: 100% !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding-top: var(--wb-safe-top) !important;
    padding-bottom: calc(64px + var(--wb-safe-bottom)) !important;
    overflow: hidden !important;
  }

  body.app-page .bw-mobile-top {
    padding-top: var(--wb-safe-top) !important;
  }

  body.app-page .bw-mobile-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 6500 !important;
    height: calc(64px + var(--wb-safe-bottom)) !important;
    padding:
      6px
      max(8px, var(--wb-safe-right))
      calc(6px + var(--wb-safe-bottom))
      max(8px, var(--wb-safe-left)) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 2px !important;
  }

  body.app-page .bw-mbn-item {
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 4px 2px !important;
    overflow: hidden !important;
  }

  body.app-page .bw-mbn-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.app-page .bw-messages-container,
  body.app-page #chat-messages {
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.app-page .bw-message-input-area {
    padding-bottom: calc(10px + var(--wb-safe-bottom)) !important;
  }

  body.app-page #attach-preview {
    max-width: calc(100vw - 24px) !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(76px + var(--wb-safe-bottom)) !important;
  }

  body.app-page .bw-settings-inner,
  body.app-page .bw-dm-panel,
  body.app-page .bw-popout,
  body.app-page .profile-popup {
    max-width: min(94vw, 560px) !important;
    max-height: calc(100dvh - var(--wb-safe-top) - var(--wb-safe-bottom) - 24px) !important;
    overflow: auto !important;
  }
}

@media (max-width: 380px) {
  body.app-page .bw-mobile-bottom-nav {
    height: calc(58px + var(--wb-safe-bottom)) !important;
  }

  body.app-page .bw-mbn-item {
    min-height: 44px !important;
    font-size: 9px !important;
  }

  body.app-page .bw-mbn-item svg {
    width: 19px !important;
    height: 19px !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  body.app-page .bw-mobile-bottom-nav {
    height: calc(52px + var(--wb-safe-bottom)) !important;
  }

  body.app-page .bw-mbn-item {
    min-height: 40px !important;
  }

  body.app-page .bw-mbn-item span {
    display: none !important;
  }
}