/* public/styles/layout.css
   Респонсивная раскладка: main+header и чат.
   Горизонтально (landscape) — чат слева.
   Вертикально (portrait) — чат внизу.
   В состоянии data-chat="off" трек чата схлопывается в 0, контент занимает всё пространство. */

   :root {
    --chat-w: 320px;        /* ширина панели чата на широких экранах */
    --chat-h: 25vh;         /* высота панели чата в вертикальной компоновке */
    --gap: 0;
    --bg: #000;
  }
  
  #layout {
    position: absolute;
    inset: 0;
    display: block;
    gap: var(--gap);
    background: var(--bg);
  
    /* По умолчанию горизонтальная сетка; размер чата берём из --chat-size */
    --chat-size: var(--chat-w);
    grid-template-columns: var(--chat-size) minmax(0, 1fr);
    grid-template-rows: 1fr;
    grid-template-areas: "chat main";
  
    /* Плавное перераспределение треков при переключении состояния */
    transition: grid-template-columns .25s ease, grid-template-rows .25s ease;
  }
  
  /* Вертикальная компоновка (портрет и почти квадратные экраны) */
  @media (max-aspect-ratio: 4/3) {
    #layout {
      --chat-size: var(--chat-h);
      grid-template-columns: 1fr;
      grid-template-rows: 1fr var(--chat-size);
      grid-template-areas:
        "main"
        "chat";
    }
  }
  
  /* Секции */
  /* #main removed; keep compatibility if any stale markup remains */
  #main { display: contents; height: auto; width: auto; }
  
  /* Шапка */
  #header {
    height: 48px;
    background: transparent;
    border: none;
  }
  
  /* Область приложения */
  #app {
    position: relative;
    min-height: 0;
    min-width: 0;
  }
  
  
  
  /* Чат-панель (контейнер области чата) */
  #chat {
    grid-area: chat;
    display: grid;
    grid-template-rows: 1fr;
    border-right: 1px solid #223043;
    background: #0a0f18;
    min-width: 0;
    min-height: 0;
    transition: border-color .25s ease;
  }
  @media (max-aspect-ratio: 4/3) {
    #chat {
      border-right: none;
      border-top: 1px solid #223043;
      min-height: 180px; /* страховка для портретной панели */
    }
  }
  
  /* Корневой контейнер чата */
  #chat-root {
    position: relative;
    min-width: 0;
    min-height: 0;
    /* overflow по умолчанию, без выступающих элементов */
  }
  
  /* ВНУТРЕННИЙ хост для ChatPanel — сюда монтируем панель */
  .chat-panel-host {
    position: absolute;
    inset: 0;
  }
  
  /* === Состояние: чат включён === */
  /* размеры уже заданы выше через --chat-size */
  
  /* === Состояние: чат выключен ===
     Полностью схлопываем трек чата до 0 без «узких полосок». */
  
  /* Горизонтальная компоновка — трек слева = 0 */
  @media (min-aspect-ratio: 4/3) {
    #layout[data-chat="off"] {
      grid-template-columns: 0 minmax(0, 1fr);
    }
  }
  
  /* Вертикальная компоновка — трек снизу = 0 */
  @media (max-aspect-ratio: 4/3) {
    #layout[data-chat="off"] {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 0;
    }
    #layout[data-chat="off"] #chat {
      min-height: 0;
    }
  }
  
  /* Визуальная анимация содержимого чата (не обязательна, оставим мягкий уезд) */
  #chat .chat-panel { transition: transform .25s ease, opacity .25s ease; }
  #layout[data-chat="off"] #chat .chat-panel {
    transform: translateX(-100%);
    opacity: .001;
  }
  @media (max-aspect-ratio: 4/3) {
    #layout[data-chat="off"] #chat .chat-panel {
      transform: translateY(100%);
    }
  }
  
  /* Жёсткое скрытие чата (опционально, если нужно полностью убрать DOM-участие) */
  #layout[data-chat="hide-hard"] #chat { display: none; }
/* Overlay host for in-app floating panels (e.g., chat) */
#app-overlays {
  position: absolute;
  inset: 0;
  pointer-events: none; /* default closed: do not block game; JS enables when chat opens */
  z-index: 100;
}
/* footer placeholder (hidden for now) */
#footer[hidden] { display: none !important; }
#footer:not([hidden]) {
  height: var(--footer-h);
  display: grid;
  align-items: center;
  padding: 0 12px;
  border-top: 1px solid #223043;
  background: rgba(10, 15, 24, 0.85);
  backdrop-filter: blur(6px);
}/* ===== ABSOLUTE LAYOUT CARCASS (overrides grid) ===== */
:root {
  --header-h: 48px;
  --footer-h: 56px; /* increased footer height */
  --chat-h:  25vh; /* dock height */
}
#layout { display: block; position: absolute; inset: 0; }
#layout[data-chat="on"]  { /* sizes controlled by JS */ }
#layout[data-chat="off"] { /* sizes controlled by JS */ }

#header { position: absolute; top: 0; left: 0; right: 0; height: var(--header-h); }
#footer { position: absolute; bottom: 0; left: 0; right: 0; height: var(--footer-h); }

#app { position: absolute; left: 0; right: 0; top: var(--header-h); bottom: calc(var(--footer-h) + var(--chat-size)); }

#chat { position: absolute; left: 0; right: 0; bottom: var(--footer-h); height: var(--chat-size); border: none; background: transparent; }
#chat-root { position: absolute; inset: 0; }
.chat-panel-host { position: absolute; inset: 0; }

/* keep overlays on top */
#app-overlays { position: absolute; inset: 0; pointer-events: none; z-index: 100; }