/* Mobile Hotfix V1 — адаптация текущего desktop UI под телефон */

@media (max-width: 820px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: #080d18 !important;
  }

  body {
    padding: 0 !important;
    margin: 0 !important;
  }

  .app-shell,
  .app,
  main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  .topbar {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 48px 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 0 0 18px 18px !important;
    box-sizing: border-box !important;
  }

  .topbar .brand,
  .topbar-title,
  .brand {
    grid-column: 1 / -1 !important;
  }

  .topbar button,
  .topbar select,
  .topbar input {
    min-height: 44px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
  }

  .topbar,
  .toolbar,
  .controls,
  .top-actions {
    flex-wrap: wrap !important;
  }

  .topbar .actions,
  .toolbar,
  .top-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .workspace {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  .canvas-panel,
  .viewer,
  .viewer-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: auto !important;
    box-sizing: border-box !important;
  }

  canvas {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  .sidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .sidebar button,
  .sidebar input,
  .sidebar select,
  .sidebar textarea {
    min-height: 44px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  .sidebar textarea {
    min-height: 90px !important;
  }

  .sidebar .grid,
  .sidebar .row,
  .side-grid,
  .button-grid,
  .region-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  details,
  .panel,
  .card,
  .block-card {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #touchSelectV1Btn {
    left: 12px !important;
    bottom: calc(env(safe-area-inset-bottom) + 78px) !important;
    z-index: 9999999 !important;
  }
}

@media (max-width: 480px) {
  .topbar .actions,
  .toolbar,
  .top-actions,
  .sidebar .grid,
  .sidebar .row,
  .side-grid,
  .button-grid,
  .region-buttons {
    grid-template-columns: 1fr !important;
  }

  .app-shell,
  .app,
  main {
    padding: 8px !important;
  }
}