.chat-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.chat-page__aside {
  display: none;
}

.chat-page__main {
  display: grid;
  grid-template-columns: minmax(0, var(--content-narrow));
  grid-template-rows: auto minmax(0, 1fr);
  justify-content: center;
  gap: var(--space-2);
  min-inline-size: 0;
  min-block-size: calc(100dvh - var(--topbar-h) - var(--space-8));
}

.chat-page__main > .breadcrumb {
  margin-block: var(--space-4) var(--space-2);
}

.chat-page--open .chat-page__main > .breadcrumb {
  margin-block-end: calc(var(--space-section) - var(--space-2));
}

.chat-page__history {
  display: grid;
  align-content: start;
  gap: var(--space-stack);
}

.chat-page__new.btn {
  justify-content: flex-start;
}

.chat-page__icon {
  display: inline-flex;
  color: var(--tone);
}

.chat-page__icon svg {
  inline-size: var(--icon-lg);
  block-size: var(--icon-lg);
}

.chat-page__list {
  display: grid;
  gap: var(--space-hair);
  margin-inline: calc(var(--space-3) * -1);
}

.chat-page__item {
  display: grid;
  gap: var(--space-hair);
  min-inline-size: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}

.chat-page__item--active {
  background: var(--color-accent-soft);
}

.chat-page__item--active .chat-page__item-title {
  font-weight: var(--weight-semibold);
}

.chat-page__item-title {
  overflow: hidden;
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-page__item-meta,
.chat-page__empty {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

@media (hover: hover) {
  .chat-page__item:not(.chat-page__item--active):hover {
    background: var(--color-surface-alt);
  }
}

@media (max-width: 768px) {
  .chat-page__main > .breadcrumb {
    margin-block-start: 0;
  }
}

@media (min-width: 769px) {
  .chat-page {
    grid-template-columns: var(--chat-aside-w) minmax(0, 1fr);
    min-block-size: calc(100dvh - var(--topbar-h));
  }

  .chat-page__aside {
    position: sticky;
    inset-block-start: var(--topbar-h);
    align-self: start;
    display: grid;
    align-content: start;
    gap: var(--space-section);
    block-size: calc(100dvh - var(--topbar-h));
    padding: var(--space-card);
    overflow-y: auto;
    border-inline-end: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .chat-page__main {
    min-block-size: calc(100dvh - var(--topbar-h));
    padding: var(--space-8) var(--space-gutter) 0;
  }
}