/* RESPONSIVO — desktop · tablet · celular (retrato e paisagem) */
html, body { height: 100%; }
body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
#canvas-container { height: 100vh; height: 100dvh; touch-action: none; }
canvas { touch-action: none; }

/* ---------- Tablet e celular (até 900px) ---------- */
@media (max-width: 900px) {
  /* navegação ocupa a largura toda, respeita o notch */
  body #nav { left: 8px; right: 8px; top: calc(env(safe-area-inset-top, 0px) + 8px); max-width: none; }
  body #nav .nv-bar { padding: 6px; gap: 6px; flex-wrap: wrap; }
  body #nav .nv-brand span { display: none; }
  body #nav .nv-seg { flex: 1; }
  body #nav .nv-seg button { flex: 1; justify-content: center; padding: 9px 4px; font-size: 12px; min-height: 40px; }
  body #nav .nv-search { order: 5; flex: 1 1 100%; min-width: 0; }
  body #nav .nv-search input { font-size: 16px; min-height: 42px; }   /* 16px evita zoom automático no iOS */
  body #nav .nv-search kbd { display: none; }
  body #nav .nv-more { width: 40px; height: 40px; }
  body #nav .nv-results { min-width: 0; left: 0; right: 0; max-height: 52vh; }
  body #nav .nv-menu { right: 0; left: auto; max-width: calc(100vw - 24px); }
  body #nav .nv-sub { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  body #nav .nv-sub::-webkit-scrollbar { display: none; }
  body #nav .nv-crumbs { flex: none; }
  body #nav .nv-cams { flex: none; }
  body #nav .nv-cams button { padding: 8px 12px; min-height: 36px; }

  /* painéis viram "bottom sheets" */
  body #nv-blockpanel { left: 8px; right: 8px; top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); width: auto; max-height: 46vh; overflow: auto; }
  body #apt-info-card { left: 8px; right: 8px; width: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); max-height: 46vh; }
  .bp-cell { padding: 9px 2px; }

  /* painel lateral do morador: folha inferior recolhível */
  .sidebar-panel {
    position: fixed; top: auto; left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    width: auto; height: 52vh; border-radius: 18px;
  }
  .sidebar-panel.collapsed { transform: translateY(115%); opacity: 0; }
  .sidebar-toggle-tab {
    position: fixed; top: auto; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 52vh + 16px);
    border: 1px solid var(--card-border); border-radius: 12px; padding: 8px 12px; z-index: 16;
  }
  .sidebar-toggle-tab span { display: inline-block; transform: rotate(90deg); }
  .sidebar-panel.collapsed + .sidebar-toggle-tab { right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); }
  .sidebar-panel.collapsed + .sidebar-toggle-tab span { transform: rotate(-90deg); }
  .sidebar-scroll-content { padding: 16px; }

  /* HUD inferior esquerdo some no celular (as infos estão no painel) */
  .bottom-left-hud { display: none !important; }

  /* modais cabem na tela */
  .gallery-modal-content { width: 96vw !important; max-width: 96vw !important; max-height: 90vh; max-height: 90dvh; overflow: auto; }
  .modal-close-btn { width: 40px; height: 40px; }
}

/* ---------- Celular (até 600px) ---------- */
@media (max-width: 600px) {
  body #nav .nv-seg button { font-size: 11.5px; }
  body #nav .nv-brand b { display: none; }
  .mrv-toast { font-size: 12.5px; }
  .sidebar-panel { height: 58vh; }
  .sidebar-toggle-tab { bottom: calc(env(safe-area-inset-bottom, 0px) + 58vh + 16px); }
}

/* ---------- Celular na horizontal (pouca altura) ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  body #nav { right: auto; max-width: 62vw; }
  body #nav .nv-sub { display: none; }
  body #nv-blockpanel, body #apt-info-card { left: 8px; right: auto; width: 300px; max-height: calc(100vh - 80px); }
  .sidebar-panel { left: auto; right: 8px; width: 330px; height: auto; top: 8px; bottom: 8px; }
  .sidebar-toggle-tab { top: 8px; bottom: auto; right: 346px; }
  .sidebar-panel.collapsed + .sidebar-toggle-tab { right: 8px; bottom: auto; top: 8px; }
  #mrv-toasts { top: 8px; }
}

/* ---------- Desktop largo ---------- */
@media (min-width: 1500px) {
  body #nav { max-width: calc(100vw - 460px); }
}

/* ---------- Toque: alvos maiores, sem hover ---------- */
@media (pointer: coarse) {
  .nv-item, .bp-cell, .nv-menu button { min-height: 44px; }
  .nv-search kbd { display: none; }
}

/* Reduz movimento se o usuário pedir */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}