/*
 * Conversation — page file. The full conversation page and the desktop
 * quick-chat window share one structure:
 *
 *   header (fixed) · .conversation__scroll (the ONLY scrollable part) · footer/composer (fixed)
 *
 * Message rows are Discord-style (no bubbles); the composer is a Slack-style
 * bordered box. Values come from shared/variables.css.
 */

/* ---- Page layout: pin the shell to the viewport so the page never scrolls ---- */

.page-conversation .shell {
  height: 100dvh;
}

.page-conversation .shell__main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  /* Leave room for the fixed bottom tab bar on phones. */
  padding: var(--space-3) var(--space-3) calc(56px + env(safe-area-inset-bottom) + var(--space-2));
}

/* The friends button would sit on top of the Send button here. */
.page-conversation .shell__friends-fab {
  display: none;
}

@media (min-width: 640px) {
  .page-conversation .shell__main {
    padding: var(--space-4);
  }
}

/* ---- Shared structure ---- */

.conversation {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.conversation--page {
  flex: 1;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  background-color: var(--color-card);
  border-radius: var(--radius-comfortable);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Fills the <dialog>, which is itself a fixed-size flex column. */
.conversation--window {
  flex: 1;
  min-height: 0;
}

.conversation__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.conversation__window-header {
  flex-shrink: 0;
}

.conversation__identity {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.conversation__back {
  width: 36px;
  min-height: 36px;
  height: 36px;
  flex: 0 0 36px;
  color: var(--color-comment);
}

.conversation__back:hover {
  color: var(--color-foreground);
  background-color: var(--color-selection);
}

.conversation__close {
  width: 36px;
  min-height: 36px;
  height: 36px;
  flex: 0 0 36px;
}

/* "Open full chat" is a desktop affordance; phones go straight to the full page. */
.conversation__open-full {
  display: none;
}

@media (min-width: 640px) {
  .conversation__open-full {
    display: inline-flex;
  }
}

.conversation__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Position is managed by the scroll-bottom controller, not by the browser. */
  overflow-anchor: none;
  padding: var(--space-3);
}

.conversation__messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 100%;
  justify-content: flex-end;
}

.conversation__earlier {
  display: block;
}

.conversation__empty {
  text-align: center;
}

.conversation__footer {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

/* Message rows and the composer: shared/messages.css */


/* ---- Quick chat window inside the dialog ---- */

#quick_chat_dialog .sheet__title {
  display: flex;
  flex-direction: column;
  font-size: var(--text-base);
}

@media (min-width: 640px) {
  dialog#quick_chat_dialog.sheet--panel[open] {
    width: 420px;
    height: 600px;
  }
}

/* The other person's name opens their profile drawer, like their picture. */
.conversation__name {
  color: inherit;
  text-decoration: none;
}

.conversation__name:hover {
  text-decoration: underline;
}