/* Универсальные стили для подложки и ленты генераций (feed) */
.project-feed-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.project-feed.aidc-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.project-feed.aidc-scroll::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}
/* Явно сбрасываем overflow для вложенного .tree внутри aidc-scroll, чтобы не перебивать родительский скролл */
.aidc-scroll .tree {
  overflow: unset !important;
  overflow-x: unset !important;
}
/* AIDC Scroll System */

html, body{
  height:100%;
}

body{
  margin:0;
}

#app{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

#app > header,
#app > footer{
  flex:0 0 auto;
}

/* Default pages: main scrolls */
#app > main{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
}
#app > .shell{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}
#app > .shell > main{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
}

/* Fixed canvas pages: scroll only inside .aidc-scroll */
#app > main.aidc-layout,
#app > main.aidc-fixed,
#app > .shell > main.aidc-layout,
#app > .shell > main.aidc-fixed{
  overflow:hidden;
}

.panel, .aidc-col{
  min-height:0;
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.aidc-scroll-host{
  min-height:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.project-details-scope,
.timeline-host{
  min-height:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.module-stack, .stack{
  min-height:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  overflow:visible;
}

[data-module]{
  min-height:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
}
[data-module] .module-head{ flex:0 0 auto; }
[data-module] .module-body{
  flex:1 1 auto;
  min-height:0;
}

.aidc-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.10) transparent;
}
.aidc-scroll::-webkit-scrollbar{
  width:5px !important;
  height:0 !important;
}
.aidc-scroll::-webkit-scrollbar-track{
  background:transparent;
}
.aidc-scroll::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.10);
  border-radius:4px;
}
.aidc-scroll::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,0.20);
}

/* Custom scrollbar for dropdown menus */
.aidc-select__menu{
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.10) transparent;
}
.aidc-select__menu::-webkit-scrollbar{
  width:5px !important;
  height:0 !important;
}
.aidc-select__menu::-webkit-scrollbar-track{
  background:transparent;
}
.aidc-select__menu::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.10);
  border-radius:4px;
}
.aidc-select__menu::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,0.20);
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE / NARROW WEB FIX (≤1200px) — нативный скролл страницы.
   ─────────────────────────────────────────────────────────────────────
   На десктопе (>1200px) scroll работает внутри `#app > main` (фикс-
   viewport архитектура). На более узких экранах layout многих страниц
   переключается на ≥2 строки (например projects: .panel-right уходит
   вниз при ≤1200px), и фикс-viewport обрезает нижний ряд.
   Решение: на ≤1200px возвращаем естественный document-level scroll —
   html/body растут под контент, main не имеет своего overflow.
   Сохраняем работу страниц где нужен фиксированный layout: добавляем
   класс body.aidc-fixed-page для canvas/editor.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  #app {
    min-height: auto !important;
    height: auto !important;
  }
  #app > main,
  #app > .shell,
  #app > .shell > main {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }
  /* Внутренние скроллируемые блоки больше не «крадут» touch — пусть
     скролл идёт по странице. Если внутри есть .aidc-scroll — оставляем
     overflow:auto, но он не съедает место (max-height отменяем). */
  .aidc-scroll {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }
  /* Grid layouts с 1fr-row коллапсируют до 0 когда родитель auto-height.
     Принудительно переводим строки в auto, чтобы content задавал высоту. */
  .main,
  .aidc-layout,
  .aidc-layout--editor-3col {
    grid-template-rows: auto !important;
    grid-auto-rows: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  /* Панели и колонки с height:100% и overflow:hidden теряют контент,
     когда родитель auto-height. Возвращаем естественную высоту. */
  .panel,
  .aidc-col,
  .panel-right,
  .panel-center,
  .panel-left,
  [data-module] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  /* .shell { min-height: 100vh } → растёт под контент */
  .shell {
    min-height: 0 !important;
    height: auto !important;
  }
  body {
    display: block !important;
    min-height: 100vh;
  }
  /* project-details: внутренние flex-обертки с flex:1 1 0 коллапсируют
     до 0 в auto-height родителе → лента генераций невидима. Раскрываем. */
  [data-project-details],
  [data-project-details] > .panel,
  [data-project-details] #projectDetailsContent,
  [data-project-details] .ag-card,
  [data-project-details] .ag-content,
  [data-project-details] .ag-content.active,
  [data-project-details] .gen-grid,
  [data-project-details] .activity-list,
  .timeline-host,
  .module-stack, .stack {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  /* Сетки на ≤640px — одна колонка для удобного скролла */
  @media (max-width: 640px) {
    [data-project-details] .gen-grid {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }
  /* Карточки таймлайна проекта: фиксированные ширины .ref-media (440px),
     .media-row (minmax 320..440 + max-content) распирают карточку шире
     viewport → теги/прoмпт обрезаются. Делаем все колонки гибкими. */
  [data-project-timeline] .timeline-card,
  [data-project-timeline] .card-body,
  [data-project-timeline] .card-tags,
  [data-project-timeline] .prompt-bubble,
  [data-project-timeline] .prompt-row {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  [data-project-timeline] .timeline-card {
    grid-template-columns: 24px 1fr !important;
    gap: 8px !important;
  }
  [data-project-timeline] .media-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* Главное медиа — резиновая ширина, но не ломаем внутренний layout */
  [data-project-timeline] .media {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* Референсы — flex (JS уже задаёт), просто ограничиваем размер каждого
     ребёнка-img/video, не трогая .refs-label и кнопки. */
  [data-project-timeline] .ref-media {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  [data-project-timeline] .ref-media > img,
  [data-project-timeline] .ref-media > video,
  [data-project-timeline] .ref-media > picture,
  [data-project-timeline] .ref-media > picture > img {
    width: 96px !important;
    height: 96px !important;
    object-fit: cover;
    flex: 0 0 auto;
  }
  /* Исключение — страницы canvas/editor с явным класcом .aidc-fixed-page */
  body.aidc-fixed-page,
  body.aidc-fixed-page #app,
  body.aidc-fixed-page #app > main,
  body.aidc-fixed-page #app > .shell {
    height: 100% !important;
    overflow: hidden !important;
  }
  body.aidc-fixed-page .aidc-scroll {
    overflow: auto !important;
  }
}