.chat-thread {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: var(--space-section);
}

.chat-thread__head {
  position: sticky;
  inset-block-start: var(--topbar-stick);
  z-index: var(--z-base);
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: calc(var(--space-3) * -1);
  padding-block: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--color-border);
  background: var(--color-bg);
}

.chat-thread__title {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.chat-thread__head > .action-menu {
  flex: none;
}

.chat-thread__rename {
  flex: 1 1 0;
  min-inline-size: 0;
  font-size: max(var(--text-base), var(--text-input-min));
}

.chat-thread__start {
  grid-row: 1;
}

.chat-thread__composer {
  grid-row: 3;
  align-self: end;
  position: sticky;
  inset-block-end: var(--space-4);
  z-index: var(--z-base);
}

.chat-thread__client {
  overflow: hidden;
  padding-inline: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-thread--new {
  grid-template-rows: auto auto;
  align-content: start;
  padding-block-start: clamp(0rem, 6vh, var(--space-12));
}

.chat-thread--new > .chat-thread__messages {
  display: none;
}

.chat-thread--new > .chat-thread__composer {
  grid-row: 2;
  position: static;
}

@media (max-width: 768px) {
  .chat-thread--new {
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: stretch;
  }

  .chat-thread--new > .chat-thread__composer {
    grid-row: 3;
    position: sticky;
    align-self: end;
  }

  .chat-thread__composer {
    inset-block-end: 0;
    margin-block-end: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }

  .chat-thread__head > .badge {
    display: none;
  }
}