/* сетка §6.1: страница никогда не скроллится целиком, скроллятся только зоны */

.app {
  --c-rail: var(--w-rail);
  --c-side: var(--w-side);
  --r-log: var(--h-log);
  position: relative;
  height: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  display: grid;
  grid-template-columns: var(--c-rail) minmax(560px, 1fr) var(--c-side);
  grid-template-rows: var(--h-hud) minmax(0, 1fr) var(--r-log) var(--h-foot);
  grid-template-areas:
    "hud  hud  hud"
    "rail chat side"
    "rail log  log"
    "foot foot foot";
  gap: 0;
  overflow: hidden;
  transition: grid-template-columns var(--dur-reveal) var(--ease-drawer),
              grid-template-rows var(--dur-reveal) var(--ease-drawer);
}

/* расписание раскрытия §6.3: панель просто снимает .is-hidden */
.app:has(> .rail.is-hidden) { --c-rail: 0px; }
.app:has(> .side.is-hidden) { --c-side: 0px; }
.app:has(> .log.is-hidden) { --r-log: 0px; }

.hud { grid-area: hud; }
.rail { grid-area: rail; }
.chat { grid-area: chat; }
.side { grid-area: side; }
.log { grid-area: log; }
.foot { grid-area: foot; }
.tabbar { display: none; }

.rail, .side, .log, .chat { min-width: 0; min-height: 0; overflow: hidden; }
.rail, .side { display: flex; flex-direction: column; }
.rail > *, .side > * { min-height: 0; }

.is-hidden { opacity: 0; overflow: hidden; border-width: 0 !important; pointer-events: none; }

/* чат: поток тянется, док прибит вниз */
.chat {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
.chat__stream {
  grid-area: 1 / 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: var(--s4) var(--s6) var(--s3);
  scroll-behavior: auto;
}
.chat__dock { display: flex; flex-direction: column; }
.chat__jump { grid-area: 1 / 1; align-self: end; justify-self: center; margin-bottom: var(--s2); }

.builder { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0 var(--s6) var(--s2); }
.chips:empty { display: none; }
.composer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }

.foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }

/* оверлей: шторка настроек и подложка выдвижных панелей */
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; }
.overlay__scrim { position: absolute; inset: 0; background: #04060899; }
.overlay__sheet {
  position: relative;
  justify-self: center;
  align-self: center;
  width: min(560px, calc(100vw - var(--s6) * 2));
  max-height: min(80vh, 640px);
  overflow-y: auto;
}

.fx { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.fx > * { position: absolute; inset: 0; display: block; }

/* 1024–1279: rail сжат в полосу, разворачивается поверх (Ctrl+1) */
@media (max-width: 1279px) {
  .app {
    --c-rail: var(--w-rail-min);
    grid-template-columns: var(--c-rail) minmax(0, 1fr) var(--c-side);
  }
  .rail.is-open {
    position: absolute;
    z-index: 40;
    top: var(--h-hud);
    bottom: var(--h-foot);
    left: 0;
    width: var(--w-rail);
    box-shadow: 4px 0 0 0 #04060855;
  }
  .chat__stream { padding-inline: var(--s4); }
  .chips { padding-inline: var(--s4); }
}

/* 900–1023: side уезжает в drawer (Ctrl+2) */
@media (max-width: 1023px) {
  .app {
    --c-side: 0px;
    grid-template-columns: var(--c-rail) minmax(0, 1fr);
    grid-template-areas:
      "hud  hud"
      "rail chat"
      "rail log"
      "foot foot";
  }
  .side {
    position: absolute;
    z-index: 45;
    top: var(--h-hud);
    bottom: var(--h-foot);
    right: 0;
    width: var(--w-side);
    opacity: 1;
    transform: translateX(100%);
    transition: transform var(--dur-drawer) var(--ease-drawer);
  }
  .side.is-open { transform: none; }
  .side.is-hidden { display: none; }
}

/* <900: одна колонка, нижний таб-бар, конструктор промпта над вводом */
@media (max-width: 899px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--h-hud) minmax(0, 1fr) var(--h-tab) var(--h-foot);
    grid-template-areas: "hud" "chat" "tabbar" "foot";
  }
  .rail, .log {
    position: absolute;
    z-index: 45;
    top: var(--h-hud);
    bottom: calc(var(--h-tab) + var(--h-foot));
    left: 0;
    width: min(288px, 86vw);
    opacity: 1;
    transform: translateX(-100%);
    transition: transform var(--dur-drawer) var(--ease-drawer);
  }
  .log { width: 100%; top: auto; height: 40vh; transform: translateY(100%); }
  .rail.is-open, .log.is-open { transform: none; }
  .rail.is-hidden, .log.is-hidden, .side.is-hidden { display: none; }
  .rail.is-open { box-shadow: 4px 0 0 0 #04060855; }
  .side { width: min(336px, 92vw); bottom: calc(var(--h-tab) + var(--h-foot)); }
  .tabbar {
    grid-area: tabbar;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    z-index: 46;
  }
  .chat__stream { padding: var(--s3) var(--s3) var(--s2); }
  .chips { padding-inline: var(--s3); flex-wrap: nowrap; overflow-x: auto; }
  .builder { display: flex; gap: var(--s2); overflow-x: auto; padding: var(--s2) var(--s3); }
  .composer__input { font-size: 16px; } /* иначе iOS зумит страницу на фокусе */
  .foot__keys { display: none; }
  .foot { justify-content: center; }
}