/* =============================================================================
   layout.css — the app shell. Where things sit, never what they look like.

   Two grids and nothing else:
     .app   rail | content            (the whole window, no page scroll)
     .chat  list | thread + composer  (the second pane, inside content)

   Scrolling is deliberately owned by exactly two elements — `.content` and
   `.chat__scroll`. `body` never scrolls, so the rail and the composer stay
   put and iOS cannot rubber-band the chrome away from under the thread.

   Sizing rule for the whole file: every string-bearing box is sized by the
   ARMENIAN string, which runs 15-25% longer than the English one. That is why
   the rail is 252px and not 200px, and why nothing here is width:max-content.
   ========================================================================= */

/* --- the window ---------------------------------------------------------- */

.app{
  display:grid;
  grid-template-columns:var(--rail-w) minmax(0,1fr);
  grid-template-rows:100vh;
  grid-template-rows:100dvh;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  isolation:isolate;
}

/* --- left rail ----------------------------------------------------------- */

.rail,
.side{
  grid-column:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  background:var(--surface-2);
  border-inline-end:1px solid var(--line);
  padding-block-start:max(var(--sp-4),env(safe-area-inset-top));
  padding-block-end:max(var(--sp-3),env(safe-area-inset-bottom));
  padding-inline-start:max(var(--sp-2),env(safe-area-inset-left));
  padding-inline-end:var(--sp-2);
}

.rail__brand{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  min-height:36px;
  padding:0 var(--sp-2) var(--sp-4);
}

.rail__nav{
  display:flex;
  flex-direction:column;
  gap:2px;
  overflow-y:auto;
  overscroll-behavior:contain;
  min-height:0;
}

.rail__foot{
  margin-block-start:auto;
  padding:var(--sp-3) var(--sp-2) 0;
  border-block-start:1px solid var(--line);
  display:grid;
  gap:2px;
  min-width:0;
}

/* --- content column ------------------------------------------------------ */

.content,
.main{
  grid-column:2;
  min-width:0;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scroll-padding-block-start:var(--sp-6);
  position:relative;
  background:var(--ink);
}

/* The readable column. Screens render inside this; the chat screen opts out
   with .content--bleed because it owns the full height itself. */
.content__inner{
  width:100%;
  max-width:var(--content-max);
  margin-inline:auto;
  padding-block:var(--sp-6) var(--sp-10);
  padding-inline:max(var(--sp-6),env(safe-area-inset-left))
                 max(var(--sp-6),env(safe-area-inset-right));
}

.content--bleed,
.content:has(> .chat){
  overflow:hidden;
}
.content--bleed > .content__inner{
  max-width:none;
  padding:0;
  height:100%;
}

/* Legacy view switching (index.html's five <section class="view">). The
   router shows one at a time; keeping these means a 1:1 markup port cannot
   regress into five stacked screens. */
.view{ display:none; }
.view.active,
.view.is-active{ display:block; }
.view.chatview.active,
.view.chatview.is-active{ display:block; height:100%; padding:0; max-width:none; }

/* --- page header --------------------------------------------------------- */

.page__head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--sp-3) var(--sp-5);
  margin-block-end:var(--sp-6);
}
.page__titles{ min-width:0; display:grid; gap:var(--sp-1); }
.page__title{
  font-family:var(--font-display);
  font-size:var(--fs-h2);
  font-weight:var(--fw-semi);
  letter-spacing:var(--ls-tight);
  line-height:var(--lh-tight);
}
.page__sub,
.sub{ color:var(--text-2); font-size:var(--fs-sm); line-height:var(--lh-snug); }
.page__actions{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }

/* --- generic content grids ----------------------------------------------- */

.grid{ display:grid; gap:var(--sp-4); }
.grid.cols-2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.grid.cols-3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.grid.cols-4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); }
.row{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; }
.row--end{ justify-content:flex-end; }
.spacer{ flex:1 1 auto; }
.section{ margin-block-start:var(--sp-7); }
.section__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--sp-3); margin-block-end:var(--sp-3);
}

/* --- chat: the two-pane ---------------------------------------------------

   `min-height:0` on every descendant of the flex/grid chain is what keeps
   .chat__scroll scrolling instead of stretching its parent — the classic
   flexbox overflow trap, and the reason the composer used to drift.
   ---------------------------------------------------------------------- */

.chat,
.view.chatview.active,
.view.chatview.is-active{
  display:grid;
  grid-template-columns:var(--chatlist-w) minmax(0,1fr);
  height:100%;
  min-height:0;
  overflow:hidden;
}

.chat__list,
.chat-list{
  display:flex;
  flex-direction:column;
  min-height:0;
  background:var(--surface-2);
  border-inline-end:1px solid var(--line);
  padding-block-end:max(var(--sp-2),env(safe-area-inset-bottom));
}
.chat__list-head,
.chat-list .newbtn{ padding:var(--sp-3) var(--sp-3) var(--sp-2); }
.chat__items,
.chat-list .items{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:0 var(--sp-2) var(--sp-3);
  display:flex;
  flex-direction:column;
  gap:2px;
}

.chat__main,
.chat-main{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  background:var(--ink);
  position:relative;
}
.chat__scroll,
.chat-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-block:var(--sp-6);
  scroll-padding-block-end:var(--sp-6);
}

/* --- report column ------------------------------------------------------- */

.report{ max-width:var(--report-max); }

/* =============================================================================
   Compact — under 820px the rail collapses to icons and the chat list becomes
   an off-canvas drawer. Same breakpoint as the stylesheet it replaces, so a
   device that worked before still works.
   ========================================================================= */

@media (max-width:820px){
  .app{ grid-template-columns:var(--rail-w-min) minmax(0,1fr); }

  .rail,.side{ padding-inline:var(--sp-2); align-items:stretch; }
  .rail__brand{ justify-content:center; padding-inline:0; }
  .rail__brand .rail__wordmark,
  .side-top em{ display:none; }

  /* icon-only nav: the label is removed from the flow but stays announced */
  .rail__item{ grid-template-columns:1fr; justify-items:center; padding-inline:0; }
  .rail__label,
  .nav button span.lbl{
    position:absolute; width:1px; height:1px;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
  .rail__item .badge,
  .rail__item .chip{ display:none; }

  .rail__foot{ padding-inline:0; text-align:center; font-size:var(--fs-2xs); }
  .rail__who,
  .side-foot .who{ display:none; }

  .content__inner{
    padding-block:var(--sp-5) var(--sp-9);
    padding-inline:max(var(--sp-4),env(safe-area-inset-left))
                   max(var(--sp-4),env(safe-area-inset-right));
  }

  /* chat: one pane, list slides in over it */
  .chat,
  .view.chatview.active,
  .view.chatview.is-active{ grid-template-columns:minmax(0,1fr); }

  .chat__list,
  .chat-list{
    position:fixed;
    inset-block:0;
    inset-inline-start:var(--rail-w-min);
    width:min(280px,78vw);
    z-index:30;
    box-shadow:var(--shadow-2);
    transform:translateX(-108%);
    transition:transform var(--dur-2) var(--ease);
  }
  .chat__list.is-open,
  .chat-list.open{ transform:none; }

  /* Show the FAB only here — components.css keeps it display:none by default
     so a later stylesheet cannot resurrect it on desktop. */
  .chatfab,.chat__toggle{
    display:grid;
    position:fixed;
    inset-inline-start:calc(var(--rail-w-min) + var(--sp-2));
    inset-block-end:max(var(--sp-5),env(safe-area-inset-bottom));
    z-index:31;
  }

  .page__head{ margin-block-end:var(--sp-5); }
}

@media (prefers-reduced-motion: reduce){
  .chat__list,.chat-list{ transition:none; }
}

/* Very narrow — a phone in portrait. The rail keeps its icons; the content
   gutter shrinks to 16px and nothing is allowed to scroll sideways. */
@media (max-width:420px){
  :root{ --rail-w-min:56px; }
  .content__inner{ padding-inline:16px; }
  .grid{ gap:var(--sp-3); }
}