/* Page geometry lives here; component appearance lives in the screen stylesheets. */
.app {
  inline-size: min(100%, var(--app-max-width));
  block-size: var(--runtime-viewport-height, 100dvh);
  min-inline-size: 0;
  min-block-size: 0;
  display: grid;
  grid-template-areas: 'chat';
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  position: fixed;
  inset-block-start: var(--runtime-viewport-top, 0);
  inset-inline: 0;
  margin-inline: auto;
}

.app--login {
  isolation: isolate;
  container: login / size;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto minmax(0, 1fr) auto auto auto;
  padding: calc(var(--space-xl) + env(safe-area-inset-top)) calc(var(--space-xl) + env(safe-area-inset-right)) calc(var(--space-xl) + env(safe-area-inset-bottom)) calc(var(--space-xl) + env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.app--home {
  grid-template-areas: 'header' 'content' 'navigation';
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow-y: auto;
}

.home-header { grid-area: header; }
.home-header__title,
.conversation-nav { margin-inline-end: auto; }

.home {
  grid-area: content;
  min-inline-size: 0;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

.conversation-pages {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  block-size: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}
.conversation-pages__page {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.home > .empty-state { min-block-size: 100%; }
.conversation-pages__page > .gift-banner,
.conversation-pages__page > .conversation-list { flex-shrink: 0; }
.conversation-list:empty { display: none; }
.banner-carousel { margin-block-end: var(--space-xl); }
.gift-banner,
.conversation-list { margin: 0 var(--gutter-sm) var(--space-xl); }
.gift-banner { margin-block-end: var(--space-lg); }
.home > .heading { margin-inline: var(--gutter-sm); }
.home > .heading + .character-cards { margin-block-start: var(--space-sm); }
.story-filters {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-block: var(--space-sm);
  padding-inline: var(--gutter-sm);
  overflow-x: auto;
  scroll-padding-inline: var(--gutter-sm);
}

.app--character {
  grid-template-areas: 'content' 'actions';
  grid-template-rows: minmax(0, 1fr) auto;
}
.character-header {
  grid-area: content;
  align-self: start;
  display: grid;
  grid-template-columns: var(--icon-size-lg) minmax(0, 1fr) var(--icon-size-lg);
  column-gap: var(--space-sm);
  z-index: 1;
}
.character-header__name { justify-self: center; max-inline-size: 100%; }
.character-detail {
  grid-area: content;
  display: grid;
  grid-template-columns: var(--gutter-md) minmax(0, 1fr) var(--gutter-md);
  align-content: start;
  min-inline-size: 0;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}
.character-detail > * { grid-column: 2; }
.character-detail > .character-profile { grid-column: 1 / -1; grid-template-columns: subgrid; }
.character-actions {
  grid-area: actions;
  padding: var(--space-md) max(var(--gutter-sm), env(safe-area-inset-right)) max(var(--space-md), env(safe-area-inset-bottom)) max(var(--gutter-sm), env(safe-area-inset-left));
}
.character-profile {
  --image-gallery-top-bleed: calc(var(--control-size-lg) + env(safe-area-inset-top));
  display: grid;
  padding-block-start: var(--image-gallery-top-bleed);
}
.character-profile > * { grid-column: 2; }
.character-profile__gallery {
  --image-gallery-cover-width: 100%;
  inline-size: round(down, 88%, 4px);
  justify-self: center;
}
.character-profile > .image-gallery__backdrop { grid-column: 1 / -1; }
.character-profile__heading {
  padding-block-start: var(--gutter-md);
}
.character-detail:has(> .character-profile[hidden]) {
  padding-block-start: calc(var(--control-size-lg) + env(safe-area-inset-top));
}

.app--story {
  grid-template-areas: 'header' 'content';
  grid-template-rows: auto minmax(0, 1fr);
}
.story-header {
  grid-area: header;
  padding: max(var(--space-sm), env(safe-area-inset-top)) max(var(--gutter-sm), env(safe-area-inset-right)) var(--space-sm) max(var(--gutter-sm), env(safe-area-inset-left));
}
.story {
  grid-area: content;
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  gap: var(--space-lg);
  min-inline-size: 0;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-lg) max(var(--gutter-sm), env(safe-area-inset-right)) max(var(--space-2xl), env(safe-area-inset-bottom)) max(var(--gutter-sm), env(safe-area-inset-left));
}
.story > .character-cards { --character-cards-gutter: 0px; margin: 0; }
.character-cards {
  --character-cards-gutter: var(--gutter-sm);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max(calc((100% - var(--space-sm)) / 2), var(--character-card-min-width));
  align-items: stretch;
  gap: var(--space-sm);
  margin: 0 0 var(--space-2xl);
  padding-inline: var(--character-cards-gutter);
  /* Snap to the first card slot's center, which stays fixed during press scaling. */
  scroll-padding-inline: var(--character-cards-gutter) max(0px, min(calc(50% + var(--space-sm) / 2), calc(100% - var(--character-cards-gutter) - var(--character-card-min-width))));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}
.character-cards--dragging { scroll-snap-type: none; }
.character-card {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.bottom-nav {
  grid-area: navigation;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.chat {
  grid-area: chat;
  justify-self: center;
  inline-size: min(100%, var(--chat-max-width));
  block-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  display: grid;
  grid-template-areas: 'header' 'conversation' 'composer';
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: max-content minmax(0, 1fr) max-content;
  overflow: auto;
  overscroll-behavior: contain;
}

.chat__header { grid-area: header; z-index: 1; }
.chat__settings { margin-inline-start: auto; }
.conversation { grid-area: conversation; grid-row: header-start / conversation-end; min-inline-size: 0; min-block-size: 0; position: relative; }
.conversation__scroll { block-size: 100%; overflow-y: auto; overscroll-behavior: contain; }
.conversation__scroll[data-reply-following] { display: flex; flex-direction: column-reverse; }
.conversation__scroll[data-reply-following] > .conversation__content { flex: 0 0 auto; }
.conversation__content { min-block-size: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.composer { grid-area: composer; min-inline-size: 0; position: relative; }

/* Panels keep their own width when the app gains desktop columns. */
.panel {
  position: fixed;
  inset: auto 0 max(var(--space-sm), env(safe-area-inset-bottom));
  margin: 0 auto;
  inline-size: min(var(--panel-max-width), calc(min(100%, var(--app-max-width)) - var(--chat-gutter) * 2));
  max-block-size: calc(100dvh - var(--control-size-lg) - env(safe-area-inset-top));
  overflow: auto;
}
.panel::backdrop { inset-inline: max(0px, calc((100% - var(--app-max-width)) / 2)); }
.panel--sheet {
  inset-block-end: 0;
  inline-size: min(100%, var(--app-max-width));
  padding-inline: max(var(--space-lg), env(safe-area-inset-left)) max(var(--space-lg), env(safe-area-inset-right));
  padding-block-end: max(var(--space-lg), env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}