/* ==========================================================================
   NEXUS PLATFORM — RESPONSIVE MOBILE v1 (retrato + paisagem)
   Camada final (carregada após styles.css / polish.css).
   Missão: dashboard moderno, organizado e lindo em smartphones e tablets.
   Cobertura: layout, header, sidebar drawer, bottom-nav, grids, cards,
   tabelas, formulários, botões, modais/popups, toasts, charts, terminal,
   QR, simulator, auth, admin e contact — retrato E paisagem.
   ========================================================================== */

:root {
  --m-nav-h: 64px;
  --m-header-h: 56px;
  --m-safe-b: env(safe-area-inset-bottom, 0px);
  --m-safe-t: env(safe-area-inset-top, 0px);
  --m-pad: 1rem;
  --m-gap: 0.75rem;
  --m-touch: 44px;
}

/* ─── BASE ANTI-OVERFLOW (todos os tamanhos) ─── */
html, body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Apenas páginas com dashboard travam o scroll do body (admin/auth rolam normal) */
body.has-dashboard, body:has(.dashboard-layout) {
  overscroll-behavior-y: none;
}
body {
  -webkit-tap-highlight-color: rgba(99, 102, 241, 0.15);
}
img, video, canvas, svg, iframe {
  max-width: 100%;
}
.dashboard-main .tab-content {
  overflow-x: clip;
  scrollbar-gutter: auto;
}
/* Evita estouro horizontal de qualquer grid/flex filho */
.dashboard-main .tab-content > *,
.zn-card, .status-card, .config-section, .settings-section,
.groq-card, .groq-column, .vanguard-card, .product-card {
  min-width: 0;
}

/* ─── BOTTOM NAV MOBILE (injetada via JS ou markup) ─── */
.mobile-bottom-nav {
  display: none;
}
@media (max-width: 1024px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: calc(var(--m-nav-h) + var(--m-safe-b));
    padding: 6px 6px calc(6px + var(--m-safe-b));
    background: rgba(12, 12, 16, 0.96);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 1040;
    align-items: stretch;
    justify-content: space-around;
    gap: 2px;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* Drawer/modal abertos: recolhe a barra para não competir com a gaveta */
  body.mobile-menu-open .mobile-bottom-nav {
    transform: translateY(110%);
    pointer-events: none;
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.3s;
  }
  .mobile-bottom-nav button {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #8b8b93;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 10px;
    min-height: var(--m-touch);
    padding: 4px 2px;
    transition: color 0.2s, background 0.2s;
  }
  .mobile-bottom-nav button .bn-icon {
    font-size: 1.25rem;
    line-height: 1;
  }
  .mobile-bottom-nav button:active {
    background: rgba(255, 255, 255, 0.06);
  }
  .mobile-bottom-nav button.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(99,102,241,0.28), rgba(139,92,246,0.22));
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.45);
  }
  .mobile-bottom-nav button:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 1px;
  }
  /* Reserva espaço para a barra fixa */
  .dashboard-main .tab-content {
    padding-bottom: calc(var(--m-nav-h) + var(--m-safe-b) + 2.5rem) !important;
  }
  .back-to-top-fab {
    bottom: calc(var(--m-nav-h) + var(--m-safe-b) + 1rem) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   TABLETS — até 1024px (retrato e paisagem)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .dashboard-top-grid,
  .groq-layout-columns,
  .config-grid,
  .ai-chart-grid,
  .ai-charts-section .ai-chart-grid {
    grid-template-columns: 1fr !important;
  }
  .zn-stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  .status-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .section-header-main {
    margin: -1rem -1rem 1.5rem -1rem !important;
    padding: 1.25rem 1rem !important;
  }
  .section-header-main h2 {
    font-size: 1.1rem !important;
  }
  .section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .section-actions .btn,
  .section-actions .btn-primary-sm,
  .section-actions .btn-secondary-sm {
    flex: 1 1 auto;
    min-height: var(--m-touch);
    justify-content: center;
  }
  /* Charts: altura fluida */
  .chart-panel {
    min-height: 220px !important;
    padding: 0.75rem !important;
  }
  .chart-panel canvas {
    max-height: 260px !important;
  }
  /* Botões de controle operacional lado a lado com wrap */
  .controls-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.6rem !important;
  }
  .controls-grid .btn {
    min-height: var(--m-touch);
    padding: 0.65rem 0.5rem !important;
    font-size: 0.82rem !important;
  }
  /* Tabelas: rolagem horizontal com indicador */
  .zn-table-container,
  .table-container, .table-responsive, .table-scroll-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .zn-table th, .zn-table td {
    padding: 0.75rem !important;
    font-size: 0.82rem !important;
  }
}

/* ─── Drawer também em tablets paisagem (até 1024px) ─── */
@media (max-width: 1024px) {
  .dashboard-sidebar {
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    width: min(84vw, 300px) !important;
    min-width: min(84vw, 300px) !important;
    max-width: 86vw !important;
    z-index: 1100 !important;
    transform: translateX(-105%) !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow-y: auto !important;
    padding-bottom: var(--m-safe-b);
  }
  .dashboard-sidebar.active {
    transform: translateX(0) !important;
    box-shadow: 15px 0 45px rgba(0, 0, 0, 0.7) !important;
  }
  .dashboard-sidebar .tab-label,
  .dashboard-sidebar .user-info {
    opacity: 1 !important;
    display: block !important;
    transform: none !important;
  }
  .dashboard-sidebar .tab-label { display: inline-block !important; }
  .dashboard-sidebar .header-logo-full { display: block !important; }
  .dashboard-sidebar .header-logo-compact { display: none !important; }
  .dashboard-sidebar .nav-tab {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: flex-start !important;
    padding: 0.7rem 1rem !important;
    gap: 0.9rem !important;
  }
  .sidebar-backdrop.active { display: block; opacity: 1; pointer-events: auto; }
}

/* ═══════════════════════════════════════════════════════════════════
   SMARTPHONES RETRATO — até 640px
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  :root { --m-pad: 0.85rem; }

  /* Escopado ao dashboard: admin/auth mantêm scroll de página longa */
  body.has-dashboard, body:has(.dashboard-layout) {
    height: 100dvh !important;
  }
  body.has-dashboard .dashboard-layout, .dashboard-layout { height: 100dvh !important; }

  /* Header compacto em 2 linhas */
  .dashboard-header {
    height: auto !important;
    min-height: var(--m-header-h) !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    flex-wrap: wrap !important;
    row-gap: 0.45rem !important;
    padding: 0.6rem 0.75rem calc(0.6rem + 0px) !important;
    padding-top: calc(0.6rem + var(--m-safe-t)) !important;
  }
  .header-breadcrumb {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.78rem !important;
  }
  .header-breadcrumb #breadcrumbCurrent,
  .header-breadcrumb .separator { display: none !important; }
  .header-actions {
    order: 2;
    width: 100% !important;
    display: flex !important;
    gap: 0.45rem !important;
    overflow-x: auto !important;
    padding-bottom: 0.15rem !important;
    scrollbar-width: none;
  }
  .header-actions::-webkit-scrollbar { display: none; }
  .connection-pill, .instance-indicator-pill, .btn-icon-action {
    flex-shrink: 0;
  }
  .connection-pill .label { display: none !important; }
  .connection-pill {
    width: 36px !important;
    padding: 0 !important;
  }
  .instance-indicator-pill {
    max-width: 46vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.72rem !important;
  }

  /* Conteúdo */
  .dashboard-main .tab-content {
    padding: 0.85rem 0.85rem calc(var(--m-nav-h) + var(--m-safe-b) + 2rem) !important;
  }
  .dashboard-main .section-header-main {
    margin: -0.85rem -0.85rem 1.1rem -0.85rem !important;
    padding: 1rem 0.85rem !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
  .section-description { font-size: 0.82rem !important; line-height: 1.6 !important; }

  /* Cards e grids — coluna única, respiro mobile */
  .dashboard-top-grid,
  .status-grid,
  .zn-stat-grid,
  .zn-hardware-grid,
  .storage-grid,
  .zn-info-grid,
  .groq-dashboard-grid,
  .groq-layout-columns,
  .config-grid,
  .products-grid,
  .buttons-grid,
  .faq-mode-tabs,
  .AI-provider-tabs,
  .analytics-quick-stats,
  .ai-chart-grid,
  .customers-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  .analytics-quick-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .zn-card, .status-card, .groq-card, .vanguard-card, .product-card,
  .config-section, .settings-section, .bot-controls {
    padding: 1rem !important;
  }
  .zn-card-stat { padding: 1rem 0.85rem !important; }
  .stat-value { font-size: 1.4rem !important; }

  /* Controles operacionais: 3 botões compactos */
  .controls-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
  }
  .controls-grid .btn {
    flex-direction: column !important;
    gap: 0.15rem !important;
    min-height: 56px !important;
    font-size: 0.72rem !important;
    padding: 0.55rem 0.25rem !important;
  }
  .mode-selector-simplified {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.6rem !important;
  }
  .mode-selector-simplified .btn { width: 100% !important; min-height: var(--m-touch); }

  /* Terminal compacto */
  .terminal-window-mini, .terminal-window {
    max-height: 220px !important;
    font-size: 0.72rem !important;
  }

  /* Status meta row empilha */
  .status-meta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.6rem !important;
  }
  .status-meta-row .btn { width: 100% !important; justify-content: center !important; min-height: var(--m-touch); }

  /* Info rows empilham label/valor */
  .info-row-modern {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.25rem !important;
  }

  /* Behavior tabs: 2 colunas */
  .behavior-mode-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Formulários: 1 coluna, sem zoom iOS */
  .form-grid, .form-actions-grid, .color-pickers {
    grid-template-columns: 1fr !important;
  }
  input[type="text"], input[type="password"], input[type="email"],
  input[type="number"], input[type="search"], input[type="tel"],
  input[type="url"], input[list],
  input[type="date"], input[type="time"], select, textarea, .form-control,
  .zn-input, .zn-select, .zn-textarea {
    font-size: 16px !important;
    min-height: var(--m-touch);
  }
  textarea { min-height: 120px !important; }

  /* Botões: área de toque + empilhamento em rodapés */
  .btn, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning {
    min-height: var(--m-touch);
  }
  /* WCAG 2.5.8: alvos do header/drawer com 44px mínimos */
  .dashboard-header .menu-trigger-mobile,
  .dashboard-header .btn-icon-action,
  .sidebar-close-mobile,
  .dashboard-sidebar .nav-tab {
    min-width: var(--m-touch) !important;
    min-height: var(--m-touch) !important;
  }
  .dashboard-header .btn-icon-action { width: var(--m-touch) !important; height: var(--m-touch) !important; }
  .modal-footer, .editor-footer, .form-actions-right, .config-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .modal-footer .btn, .editor-footer .btn, .config-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ── POPUPS vira bottom-sheet ── */
  /* Fallback funcional: abertura por classe também exibe o overlay */
  .modal.open, .modal.show, .modal.active, .modal.visible,
  .modal-overlay.open, .modal-overlay.show, .modal-overlay.active,
  .sa-modal-overlay.open, .sa-modal-overlay.show, .sa-modal-overlay.active,
  .admin-modal-overlay.open, .admin-modal-overlay.show, .admin-modal-overlay.active,
  .auth-modal-overlay.active, .op-modal-overlay.active {
    display: flex !important;
  }
  .modal, .modal-overlay, .sa-modal-overlay, .admin-modal-overlay,
  .auth-modal-overlay, .op-modal-overlay {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  /* Scroll interno real do corpo do modal */
  .modal-body, .op-modal-progress-wrap {
    max-height: 62dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .modal-content, .modal-box, .modal-account-box, .zn-modal,
  .auth-modal-card, .op-modal-container {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 94dvh !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    animation: mSheetUp 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  /* Overlays genéricos do admin seguem o mesmo padrão bottom-sheet */
  .modal-overlay .modal-content, .sa-modal-overlay .modal-content,
  .admin-modal-overlay .modal-content {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 94dvh !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    overflow-y: auto !important;
  }
  /* Alça visual do bottom-sheet */
  .modal-content::before, .modal-box::before, .op-modal-container::before {
    content: '';
    display: block;
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    margin: 0.55rem auto 0.25rem;
  }
  .op-modal-container::before { background: rgba(255,255,255,0.22); }
  .modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    background: #1c1c20 !important;
  }
  .op-modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
  }
  .modal-body { padding: 1.1rem !important; }
  .modal-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    background: #141416 !important;
    padding-bottom: calc(1rem + var(--m-safe-b)) !important;
  }

  /* Toasts ocupam largura total */
  .toast-container {
    left: 12px !important;
    right: 12px !important;
    top: calc(var(--m-safe-t) + 64px) !important;
    max-height: 40dvh !important;
    overflow-y: auto !important;
  }
  .toast { max-width: none !important; font-size: 0.82rem !important; }

  /* Charts menores */
  .chart-panel { min-height: 200px !important; }
  .chart-panel canvas { max-height: 220px !important; }

  /* QR centralizado e menor */
  .qrcode-container { grid-template-columns: 1fr !important; }
  .qrcode-centering-wrapper { padding: 0.5rem !important; }

  /* Simulator / chat ocupa tela */
  .sim-message { max-width: 92% !important; }
  #simChatMessages { max-height: 52dvh !important; }

  /* Accordions respiram menos */
  .zn-accordion-header, .vanguard-accordion-header {
    padding: 0.9rem 1rem !important;
    font-size: 0.88rem !important;
  }
  .zn-accordion-content.expanded, .vanguard-accordion-content.expanded {
    padding: 1rem !important;
  }

  /* Esconde elementos puramente desktop */
  .hide-mobile { display: none !important; }
}

@keyframes mSheetUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── SMARTPHONES PEQUENOS (≤400px) ─── */
@media (max-width: 400px) {
  .analytics-quick-stats { grid-template-columns: 1fr !important; }
  .controls-grid { grid-template-columns: 1fr !important; }
  .controls-grid .btn { flex-direction: row !important; min-height: var(--m-touch) !important; }
  .behavior-mode-tabs { grid-template-columns: 1fr !important; }
  .zn-table th, .zn-table td { padding: 0.6rem 0.55rem !important; font-size: 0.78rem !important; }
  .mobile-bottom-nav button { font-size: 0.56rem !important; }
  .mobile-bottom-nav button .bn-icon { font-size: 1.1rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   SMARTPHONES PAISAGEM (landscape) — altura curta
   Ex.: 740×360, 844×390. Aproveita a largura, achata o vertical.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) and (orientation: landscape) {
  :root { --m-nav-h: 52px; --m-header-h: 48px; }
  .dashboard-header {
    min-height: 48px !important;
    padding: 0.4rem 0.75rem !important;
    flex-wrap: nowrap !important;
  }
  .header-actions { width: auto !important; order: 2; overflow-x: auto !important; }
  .header-breadcrumb { order: 1; }
  .dashboard-main .tab-content {
    padding: 0.75rem 0.75rem calc(var(--m-nav-h) + var(--m-safe-b) + 1.5rem) !important;
  }
  /* Em paisagem há largura: 2 colunas para stats/cards */
  .status-grid, .zn-stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.7rem !important;
  }
  .dashboard-top-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  .zn-info-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .terminal-window-mini, .terminal-window { max-height: 180px !important; }
  .mobile-bottom-nav { height: calc(52px + var(--m-safe-b)); }
  .mobile-bottom-nav button { flex-direction: row !important; gap: 6px; font-size: 0.6rem !important; }
  .mobile-bottom-nav button .bn-icon { font-size: 1.05rem !important; }
  /* Modais laterais centralizados (não bottom-sheet alto) */
  .modal, .modal-overlay, .sa-modal-overlay, .admin-modal-overlay,
  .auth-modal-overlay, .op-modal-overlay {
    align-items: center !important;
    padding: 0.75rem !important;
  }
  .modal-content, .modal-box, .modal-account-box, .zn-modal,
  .auth-modal-card, .op-modal-container {
    width: min(94vw, 640px) !important;
    max-width: 94vw !important;
    max-height: 92dvh !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
  }
  .modal-content::before, .modal-box::before, .modal-account-box::before,
  .zn-modal::before, .auth-modal-card::before, .op-modal-container::before { display: none !important; }
  /* Sidebar drawer mais estreita na paisagem */
  .dashboard-sidebar {
    width: min(60vw, 280px) !important;
    min-width: min(60vw, 280px) !important;
  }
}
/* Paisagem com altura muito baixa (teclado aberto / phones pequenos) */
@media (max-height: 500px) and (orientation: landscape) {
  .dashboard-header { min-height: 44px !important; }
  .section-header-main { padding: 0.75rem !important; margin-bottom: 0.85rem !important; }
  .section-header-main h2 { font-size: 1rem !important; }
  .section-description { display: none !important; }
  .terminal-window-mini { max-height: 140px !important; }
  .auth-card { padding: 1.5rem 1.25rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   TABLETS PAISAGEM (601–1024px landscape): 3 colunas de stats
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 1024px) and (orientation: landscape) {
  .zn-stat-grid, .status-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .dashboard-top-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   TELAS AUXILIARES (auth / admin / simulator / contact)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Auth */
  .auth-page { padding: 1rem !important; align-items: flex-start !important; overflow-y: auto !important; }
  .auth-card {
    padding: 1.75rem 1.25rem !important;
    border-radius: 18px !important;
    margin: auto 0 !important;
    max-width: 100% !important;
  }
  .auth-logo-wrap img { width: min(240px, 70vw) !important; height: 60px !important; }
  .auth-form input { font-size: 16px !important; }
  .btn-auth-primary, .btn-auth-secondary { min-height: 50px !important; }

  /* Admin */
  .admin-nav {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    padding: 0.7rem 0.85rem !important;
  }
  .admin-grid, .sa-grid, .admin-cards, .stats-grid {
    grid-template-columns: 1fr !important;
  }
  .admin-table-wrapper, .sa-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Simulator popup page */
  .simulator-window { height: 100dvh !important; border-radius: 0 !important; }
}
@media (max-width: 1024px) and (orientation: landscape) {
  .auth-page { align-items: center !important; }
  .auth-card { padding: 1.25rem 1.5rem !important; max-width: 480px !important; }
}

/* ─── Safe-area + notch ─── */
@supports (padding: env(safe-area-inset-bottom)) {
  .dashboard-header { padding-left: calc(0.75rem + env(safe-area-inset-left, 0px)); padding-right: calc(0.75rem + env(safe-area-inset-right, 0px)); }
  .dashboard-main .tab-content { padding-left: calc(0.85rem + env(safe-area-inset-left, 0px)); padding-right: calc(0.85rem + env(safe-area-inset-right, 0px)); padding-bottom: calc(var(--m-nav-h) + env(safe-area-inset-bottom, 0px) + 2rem); }
  .modal-footer, .op-modal-footer { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important; }
  #simChatMessages { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* ─── Reduz movimento quando pedido ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .mobile-bottom-nav button, .dashboard-sidebar, .modal-content { transition: none !important; animation: none !important; }
}