/* ==========================================================================
   Мир «Грид» — Live: Адаптивность и Breakpoints (390px, 768px, 1440px+)
   Стандарт мобильного layout: 0px overflow-x, вертикальный стек колонок,
   плавная адаптивность всех компонентов и карточек под экраны 360px-1920px+.
   ========================================================================== */

/* ---------- 0. Zero-CLS стабилизация шапки, виджета здоровья и вкладок ---------- */
.main > .head {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.main > .head .head-left {
  order: 1 !important;
  flex: 1 1 auto !important;
}
.main > .head .head-right {
  order: 2 !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
}
.main > .head .head-right .live {
  height: 36px !important;
  box-sizing: border-box !important;
}
.main > .head .world-health-bar {
  order: 3 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 46px !important;
}
.tabs-row {
  min-height: 52px !important;
  height: 52px !important;
}
.tabs {
  min-height: 44px !important;
  height: 44px !important;
}
.sk-tile {
  min-height: 195px !important;
  height: 195px !important;
}

/* ---------- 1. Большие десктопы (>= 1440px) Linear/Vercel стиль ---------- */
@media (min-width: 1440px) {
  .grid3 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sp-3); }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
  .grid6 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); }
  #cardPipeline { height: auto; min-height: 96px; }
}

/* ---------- 2. Средние десктопы (1201px - 1439px) ---------- */
@media (max-width: 1439px) and (min-width: 1201px) {
  .grid3 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-3); }
  .grid6 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-3); }
}

/* ---------- 3. Ноутбуки и планшеты landscape (<= 1200px) ---------- */
@media (max-width: 1200px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .grid3, .col-l, .col-r {
    display: flex !important; flex-direction: column !important;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important; gap: var(--sp-3-5) !important;
  }
}

/* ---------- 4. Планшеты portrait и компактные экраны (<= 760px) ---------- */
@media (max-width: 760px) {
  html, body { overflow-x: clip !important; width: 100% !important; max-width: 100vw !important; }
  .main {
    padding: var(--sp-3-5) var(--sp-4) var(--sp-8) !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important;
    box-sizing: border-box !important; overflow-x: hidden !important; gap: var(--sp-3-5) !important;
  }
  .head { flex-direction: column !important; align-items: stretch !important; gap: var(--sp-2-5) !important; min-width: 0 !important; max-width: 100% !important; }
  .head-right { display: flex !important; flex-wrap: wrap !important; gap: var(--sp-1-5) !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .tabs-row { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow: visible !important; display: flex !important; align-items: center !important; gap: var(--sp-1-5) !important; }
  .tabs { flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch !important; scroll-behavior: smooth !important; flex-wrap: nowrap !important; scrollbar-width: none !important; border-radius: var(--r-md) !important; }
  .grid3, .col-l, .col-r {
    display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; gap: var(--sp-3-5) !important;
  }
  .timeline-card { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; }
  .timeline { max-width: 100% !important; min-width: 0 !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
}

/* ---------- 5. Планшеты portrait (<= 768px, iPad) ---------- */
@media (max-width: 768px) {
  .main { padding: var(--sp-3) var(--sp-3-5) 28px !important; gap: var(--sp-3) !important; }
  .head h1 { font-size: var(--fs-2xl) !important; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--sp-2-5) !important; }
  .grid6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--sp-2-5) !important; }
  [data-kbd], .cmd-kbd, [data-tooltip*="Ctrl"], .side-search-kbd, .side-action-kbd, kbd, .term-shortcut-hint, .cmd-foot-keys, .term-empty-hotkeys {
    display: none !important;
  }
}

/* ---------- 6. Мобильные телефоны стандартные (<= 640px) ---------- */
@media (max-width: 640px) {
  .main { padding: var(--sp-2-5) var(--sp-3) var(--sp-6) !important; gap: var(--sp-3) !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; }
  .head h1 { font-size: var(--fs-xl); }
  .head-right { display: flex; flex-wrap: wrap; gap: var(--sp-1-5); width: 100%; max-width: 100%; }
  .head-right .btn, .head-right .live { padding: var(--sp-1-5) var(--sp-2-5); font-size: var(--fs-sm); flex: 1 1 auto; justify-content: center; }
  .head-right .btn.sq { flex: 0 0 34px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--sp-2); width: 100%; max-width: 100%; }
  .tile { padding: var(--sp-3) var(--sp-2-5); min-width: 0; max-width: 100%; box-sizing: border-box; }
  .tile-v { font-size: var(--fs-xl) !important; white-space: nowrap !important; }
  .tile-l { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; overflow: visible !important; white-space: normal !important; word-break: break-word !important; }
  .grid6 { grid-template-columns: 1fr !important; gap: var(--sp-2-5) !important; width: 100% !important; max-width: 100% !important; }
  .sys-gauges-grid, .sys-body-layout { flex-direction: column !important; }
}

/* ---------- 7. Сверхкомпактные мобильные (<= 480px, в т.ч. 412px, 390px, 375px, 360px) ---------- */
@media (max-width: 480px) {
  html, body { overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; position: relative; }
  .app { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; }
  .main { padding: var(--sp-2-5) var(--sp-3) var(--sp-6) !important; gap: var(--sp-3) !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; }
  .head { flex-direction: column !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  .head-left { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; min-width: 0 !important; }
  .head h1 { font-size: var(--fs-xl) !important; max-width: 100% !important; }
  .head-sub { font-size: var(--fs-sm) !important; line-height: 1.35; max-width: 100% !important; word-break: break-word !important; }
  .head-right { display: flex !important; flex-wrap: wrap !important; gap: var(--sp-1) !important; width: 100% !important; max-width: 100% !important; }
  .head-right .btn { padding: var(--sp-1-5) var(--sp-2) !important; font-size: var(--fs-sm) !important; }
  .head-right .live { padding: var(--sp-1-5) var(--sp-2) !important; font-size: var(--fs-sm) !important; }

  /* Лента вкладок: плавный горизонтальный скролл без сжатия и обрезки */
  .tabs-row { gap: var(--sp-1) !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; min-width: 0 !important; overflow: visible !important; display: flex !important; align-items: center !important; }
  .tabs { gap: var(--sp-1-5) !important; flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch !important; scroll-behavior: smooth !important; flex-wrap: nowrap !important; scrollbar-width: none !important; border-radius: var(--r-md) !important; }
  .tabs::-webkit-scrollbar { display: none !important; }
  .tab { min-width: max-content !important; max-width: none !important; flex: 0 0 auto !important; flex-shrink: 0 !important; padding: var(--sp-1-5) var(--sp-2-5) !important; box-sizing: border-box !important; border-radius: var(--r-md) !important; }
  .tab-name { font-size: var(--fs-sm) !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; }
  .tab-sub, .tab-pct { font-size: var(--fs-sm) !important; white-space: nowrap !important; flex-shrink: 0 !important; }
  #btnAdd, .btn.sq.add { flex: 0 0 auto !important; flex-shrink: 0 !important; }

  /* Плитки KPI */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--sp-1-5) !important; width: 100% !important; max-width: 100% !important; }
  .tile:first-child { grid-column: 1 / -1 !important; }
  .tile { padding: var(--sp-2) var(--sp-2-5) !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; overflow-x: hidden !important; }
  .tile-top { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: var(--sp-1) !important; width: 100% !important; }
  .tile-v { font-size: var(--fs-lg) !important; white-space: nowrap !important; line-height: 1.15 !important; font-weight: 700 !important; }
  .tile-delta { white-space: nowrap !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .tile-l { overflow: visible !important; text-overflow: clip !important; white-space: normal !important; word-break: break-word !important; }
  .tile-worker-name, .tile-worker-task, .tile-l.thought-log, .thought-log, .tribunal-verdict-text {
    overflow: visible !important; text-overflow: clip !important; white-space: normal !important; word-break: break-word !important;
  }

  /* Строки статусов, Волны, счетчики сообщений (nowrap) */
  .side-hq-wave,
  #sideHQWave,
  .badge-wave,
  .wave-badge,
  .mis-wave-badge,
  .hq-wave-badge,
  .tile-v,
  .tile-v *,
  .tile-top,
  .tile-delta,
  .term-count-pill,
  .term-live-tag,
  .badge-attempts,
  .stage-code-pill,
  .step-dur,
  .step-t,
  .acc-bullet {
    white-space: nowrap !important;
    flex-shrink: 0;
    word-break: keep-all !important;
  }

  /* Каркас колонок и карточек: строгая ширина 100% без вылета за пределы экрана */
  .grid3, .col-l, .col-r {
    display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow-x: hidden !important; gap: var(--sp-2-5) !important;
  }
  .card,
  #cardMission,
  #cardPipeline,
  #cardAgent,
  .msg-card,
  .timeline-card,
  .terminal-card,
  .sys-status-card {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow-x: hidden !important;
  }
  .mis-top { flex-wrap: wrap !important; gap: var(--sp-2) !important; width: 100% !important; max-width: 100% !important; }
  .mis-name { font-size: var(--fs-body) !important; max-width: 100% !important; }
  .mis-goal-desc { max-width: 100% !important; word-break: break-word !important; overflow-wrap: anywhere !important; }
  
  /* Конвейер, стадии, доли и вердикты трибунала: защита от переполнения */
  .tribunal-rejection-card,
  .tribunal-card-head,
  .tribunal-reason-text,
  .railway-progress-wrap,
  .railway-progress-bar,
  .railway-progress-fill,
  .pipeline-stages-list,
  .pipeline-shares-tree,
  .share-branch-node,
  .share-pair-row,
  .share-files-row,
  .share-files-list,
  .share-file-badge,
  .step,
  .step-info,
  .step-top,
  .step-n,
  .step-bottom,
  .step-actor,
  .stage-meta-right,
  .stage-reqs-content,
  .stage-acceptance-item,
  .mission-stage-details-wrap {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  .pipeline-stages-list { display: flex !important; flex-direction: column !important; gap: var(--sp-1-5) !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; }
  .step { padding: var(--sp-1-5) var(--sp-2) !important; gap: var(--sp-2) !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; min-width: 0 !important; overflow: visible !important; }
  .step-info { min-width: 0 !important; flex: 1 1 auto !important; overflow: visible !important; }
  .step-top { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: var(--sp-1) !important; min-width: 0 !important; }
  .step-n { font-size: var(--fs-body) !important; max-width: 100% !important; overflow: visible !important; text-overflow: clip !important; white-space: normal !important; word-break: break-word !important; }
  .step-bottom { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: var(--sp-1) !important; min-width: 0 !important; }
  .step-actor { font-size: var(--fs-sm) !important; max-width: 100% !important; overflow: visible !important; text-overflow: clip !important; white-space: normal !important; word-break: break-word !important; }
  .stage-code-pill, .role-badge { font-size: var(--fs-sm) !important; padding: var(--sp-0-5) var(--sp-1) !important; }
  .stage-avatar-item { width: 20px !important; height: 20px !important; margin-left: calc(-1 * var(--sp-1)) !important; }
  .stage-meta-right { display: inline-flex !important; align-items: center !important; gap: var(--sp-1) !important; margin-left: auto !important; font-size: var(--fs-sm) !important; }
  .mission-stage-details-wrap { max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; }
  .stage-reqs-content, .stage-acceptance-item { font-size: var(--fs-sm) !important; word-break: break-word !important; overflow-wrap: anywhere !important; }
  #cardAgent, .msg-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; min-width: 0 !important; }
  .ag-top { gap: var(--sp-2) !important; }
  .ag-face { width: 42px !important; height: 42px !important; }
  .ag-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--sp-1) !important; }
  .ag-cell { padding: var(--sp-1-5) var(--sp-2) !important; }
  .ag-cell b { font-size: var(--fs-body) !important; }
  .chips#msgChips { display: flex !important; flex-wrap: wrap !important; gap: var(--sp-1) !important; width: 100% !important; }
  .chips#msgChips .chip { padding: var(--sp-1) var(--sp-2) !important; font-size: var(--fs-sm) !important; }
  .chips#msgChips .chip.filter { margin-left: 0 !important; }
  .msgs { max-height: 280px !important; width: 100% !important; max-width: 100% !important; overflow: auto !important; }
  .msg { padding: var(--sp-1-5) 0 var(--sp-1-5) var(--sp-2) !important; gap: var(--sp-2) !important; width: 100% !important; box-sizing: border-box !important; }
  .msg-face { width: 22px !important; height: 22px !important; }
  .msg-h { flex-wrap: wrap !important; font-size: var(--fs-sm) !important; }
  .msg-b { font-size: var(--fs-sm) !important; word-break: break-word !important; overflow-wrap: anywhere !important; }
  .msg-input { display: flex !important; gap: var(--sp-1-5) !important; width: 100% !important; box-sizing: border-box !important; }
  .msg-input input { min-width: 0 !important; width: 100% !important; font-size: var(--fs-sm) !important; padding: var(--sp-1-5) var(--sp-2-5) !important; }
  .timeline-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: visible !important; }
  .timeline-card .card-h { flex-direction: column !important; align-items: flex-start !important; gap: var(--sp-1-5) !important; }
  .tl-controls { justify-content: space-between !important; width: 100% !important; }
  .timeline { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; padding: var(--sp-1-5) var(--sp-0-5) !important; }
  .tl { flex: 0 0 190px !important; min-width: 160px !important; max-width: 220px !important; padding: var(--sp-2) var(--sp-2-5) !important; }
  .tl-detail-drawer { padding: var(--sp-2-5) var(--sp-3) !important; }
  .tl-detail-head { flex-direction: column !important; align-items: flex-start !important; gap: var(--sp-1) !important; }
  .tl-detail-meta { flex-wrap: wrap !important; gap: var(--sp-1-5) !important; }
  .terminal-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: visible !important; }
  .terminal-header { flex-direction: column !important; align-items: flex-start !important; gap: var(--sp-2) !important; padding: var(--sp-2) var(--sp-2-5) !important; }
  .terminal-title { justify-content: space-between !important; width: 100% !important; }
  .terminal-controls { flex-wrap: wrap !important; gap: var(--sp-1) !important; width: 100% !important; }
  .term-level-chips { flex-wrap: wrap !important; gap: var(--sp-1) !important; }
  .term-level-chips .chip { padding: var(--sp-0-5) var(--sp-1-5) !important; font-size: var(--fs-sm) !important; }
  .term-search-wrap { width: 100% !important; min-width: 0 !important; }
  .terminal-body { padding: var(--sp-2) var(--sp-2-5) !important; height: 190px !important; max-width: 100% !important; box-sizing: border-box !important; }
  .term-line { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: var(--sp-1) var(--sp-1-5) !important; padding: var(--sp-1) var(--sp-1-5) !important; font-size: var(--fs-sm) !important; border-bottom: 1px solid var(--white-alpha-04) !important; }
  .term-line-num { font-size: var(--fs-sm) !important; min-width: 18px !important; }
  .term-ts { font-size: var(--fs-sm) !important; }
  .term-badge { font-size: var(--fs-sm) !important; padding: var(--sp-0-5) var(--sp-1) !important; }
  .term-actor { font-size: var(--fs-sm) !important; }
  .term-row-copy { margin-left: auto !important; opacity: 0.85 !important; min-height: 32px !important; min-width: 32px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: var(--sp-0-5) var(--sp-1-5) !important; font-size: var(--fs-sm) !important; }
  .term-msg { min-width: 0 !important; word-break: break-word !important; overflow-wrap: anywhere !important; width: 100% !important; padding-left: var(--sp-5) !important; font-size: var(--fs-sm) !important; line-height: 1.45 !important; }
  .grid6 { grid-template-columns: 1fr !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; gap: var(--sp-2) !important; }
  .card { padding: var(--sp-2-5) !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }

  /* Пол читаемости на мобильных экранах (>= 12px) */
  #clock, b#clock,
  #btnToggleClusters,
  .chip, .term-count-pill, .term-live-pulse,
  .subsys-label, .health-pct-sub,
  .term-line, .term-line-num, .term-ts, .term-badge, .term-actor, .term-msg,
  .term-live-tag, .term-filter-label, .term-active-tag,
  .term-switch-label, .term-empty-stream-badge, .term-empty-stream-badge *,
  .term-footer-text, .term-footer-bar, .term-footer-bar *, .idle-next-check-timer,
  .maestro-preview-dim-badge, .maestro-target-selector, .maestro-target-text,
  .maestro-notes-modal, .maestro-notes-modal *,
  .legend, .legend *, .legend i,
  .step-actor, .step-dur, .step-t,
  .stage-code-pill, .role-badge, .stage-meta-right,
  .tile-l, .tile-delta, .tile-worker-time, .tile-workers-more, .tile-workers-empty,
  .mis-stats-row span, .stage-file-pill, .attr, .perk,
  .badge, .badge-attempts, .fail-reason,
  .hc-id, .hc-score, .hc-role, .hc-dept, .hc-model-pill, .hc-time-badge, .hc-task-desc, .hc-task-label {
    font-size: var(--fs-sm) !important;
  }

  /* Сокрытие клавиатурных подсказок на мобильных */
  [data-kbd],
  .cmd-kbd,
  [data-tooltip*="Ctrl"],
  .side-search-kbd,
  .side-action-kbd,
  kbd,
  .term-shortcut-hint,
  .cmd-foot-keys,
  .term-empty-hotkeys {
    display: none !important;
  }
}