/* Mobile Hotfix V2 — более компактный телефонный layout */

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

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

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

  /* Верхняя панель */
  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
    border-radius: 0 0 18px 18px !important;
    box-sizing: border-box !important;
    background: rgba(8, 13, 24, .96) !important;
    backdrop-filter: blur(14px) !important;
  }

  .brand,
  .topbar-title,
  .topbar .brand {
    width: 100% !important;
    margin-bottom: 8px !important;
  }

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

  .topbar button,
  .topbar select,
  .topbar input,
  .toolbar button,
  .toolbar select {
    width: 100% !important;
    min-height: 42px !important;
    font-size: 15px !important;
    border-radius: 13px !important;
    box-sizing: border-box !important;
  }

  /* Главная область */
  .workspace {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !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;
    border-radius: 16px !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 > *,
  .panel,
  .card,
  .block-card,
  details {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .sidebar button,
  .sidebar input,
  .sidebar select,
  .sidebar textarea {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
    border-radius: 13px !important;
    box-sizing: border-box !important;
  }

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

  /* Кнопки в панелях */
  .sidebar .grid,
  .sidebar .row,
  .side-grid,
  .button-grid,
  .region-buttons,
  .quick-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Блоки текста: убрать кривые узкие колонки */
  .block-card label,
  .block-card .field,
  .block-card .control,
  .block-card .form-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .block-card select,
  .block-card input,
  .block-card textarea,
  .font-family-select,
  .style-mode,
  .erase-mode,
  .font-size-px,
  .text-scale,
  .angle {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Кнопки выбора шрифта горизонтально, не вертикальными буквами */
  .font-choice-btn,
  .font-btn,
  [data-font] {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    line-height: 1.15 !important;
  }

  .font-choice-row,
  .font-row,
  .font-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* Качество Web Render */
  .web-text-quality-controls,
  .web-quality-panel-fixed,
  .quality-grid {
    width: 100% !important;
    max-width: 100% !important;
  }

  .quality-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .quality-grid label {
    display: block !important;
    width: 100% !important;
  }

  .quality-grid input {
    width: 100% !important;
  }

  /* Плавающая кнопка выделения не должна перекрывать Safari bar */
  #touchSelectV1Btn {
    left: 12px !important;
    bottom: calc(env(safe-area-inset-bottom) + 86px) !important;
    z-index: 9999999 !important;
  }
}

@media (max-width: 430px) {
  .toolbar,
  .top-actions,
  .topbar .actions,
  .controls {
    grid-template-columns: 1fr 1fr !important;
  }

  .sidebar .grid,
  .sidebar .row,
  .side-grid,
  .button-grid,
  .region-buttons,
  .quick-actions {
    grid-template-columns: 1fr !important;
  }

  .font-choice-row,
  .font-row,
  .font-buttons {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
}