/* ========== The adventure's Messages tab (8D): the GM's threads beside the open one ==========
   Mockup AdvMessages (1440 GM; AdvMessagesPlayerPortrait 820, AdvMessagesPlayerLandscapeDark
   1180): the GM's two panes, gap 16 px, the thread list 340 px (>= 1280), 300 px
   (1024-1279.98), 260 px (<= 1023.98); the player's one thread, 820 px centred, full width
   at <= 1023.98. */

/* The Places recipe (places.css), without its scroll: this tab draws no title above the tab
   bar, the main content has no top padding, so the tab bar sits at its sticky place under the
   app bar and the panes start 12 px under it, where they stick. They fill the screen to 12 px
   above its bottom: nothing scrolls but the message list (and the GM's thread list). */
.anima-main-content:has(.messages-page) {
  padding-top: 0;
  padding-bottom: 12px;
}
.anima-subtab-bar:has(~ .messages-page) {
  margin-bottom: 12px;
}
.messages-page {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.messages-page--player {
  grid-template-columns: minmax(0, 820px);
  justify-content: center;
}
.dm-list,
.messages-page > .dm-conversation {
  position: sticky;
  top: calc(var(--chrome-h) + var(--subtab-bar-h) + 1px + 12px);
  min-width: 0;
  box-sizing: border-box;
}
.dm-list {
  max-height: calc(100dvh - var(--chrome-h) - var(--subtab-bar-h) - 1px - 24px);
}
/* The conversation is as tall as that space: its send bar sits at the bottom of the screen. */
.messages-page > .dm-conversation {
  height: calc(100dvh - var(--chrome-h) - var(--subtab-bar-h) - 1px - 24px);
  min-height: 20rem;
}
/* The ambient button leaves the bottom-right corner, over the latest bubbles and « Envoyer »
   (the Places precedent). */
body:has(.messages-page) .anima-ambient-fab {
  right: auto;
  left: 24px;
}

/* ── The GM's thread list ── */
.dm-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dm-list-title {
  flex: none;
  min-height: var(--touch-min);
  margin: 0;
  display: flex;
  align-items: center;
  font-family: var(--font-title);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.dm-list-hint {
  flex: none;
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.dm-rows {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Room under the last row: it scrolls clear of the ambient button. */
  padding-bottom: 9rem;
  scrollbar-width: thin;
}
.dm-row {
  flex: none;
  width: 100%;
  min-height: 68px;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  font-family: var(--font-body);
}
.dm-row:hover {
  border-color: var(--border-strong);
}
/* The open thread: a 2 px accent border, the padding 1 px less so the row does not move. */
.dm-row[aria-current='true'] {
  padding: 7px 11px;
  border: 2px solid var(--accent);
  background: var(--selected);
}
.dm-avatar,
.dm-conversation-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
}
.dm-avatar {
  color: var(--ink-soft);
}
.dm-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dm-row-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dm-row-name {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-row-time {
  flex: none;
  font-size: 0.8rem;
  color: var(--muted);
}
.dm-row-last {
  font-size: 0.8rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-row-badge {
  flex: none;
  min-width: 22px;
  height: 22px;
  box-sizing: border-box;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
}
.dm-list-empty {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ── The conversation card ── */
.dm-conversation {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.dm-conversation--empty {
  align-items: center;
  justify-content: center;
}
.dm-conversation-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.dm-conversation-avatar {
  color: var(--accent);
}
.dm-conversation-identity {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.dm-conversation-title {
  margin: 0;
  font-family: var(--font-title);
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.dm-conversation-meta {
  font-size: 0.8rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.dm-conversation-badge {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

/* The log scrolls inside itself and opens at the bottom (the component scrolls it there).
   A short thread sits at the bottom too: its first child takes the free space above. */
.dm-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  scrollbar-width: thin;
}
.dm-log > :first-child {
  margin-top: auto;
}
.dm-day {
  align-self: center;
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.dm-message {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.dm-message.mine {
  flex-direction: row-reverse;
}
.dm-bubble {
  min-width: 0;
  max-width: 70%;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dm-message.theirs .dm-bubble {
  background: var(--selected);
  color: var(--ink);
}
.dm-message.mine .dm-bubble {
  background: var(--accent);
  color: var(--on-accent);
}
.dm-bubble-text {
  font-size: 0.85rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.dm-bubble-meta {
  font-size: 0.8rem;
  opacity: 0.85;
}
.dm-delete {
  flex: none;
  align-self: center;
  width: var(--touch-min);
  height: var(--touch-min);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dm-delete:hover {
  border-color: var(--border-strong);
  color: var(--danger);
}
.dm-delete svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.dm-empty {
  margin: auto;
  font-size: 0.85rem;
  color: var(--muted);
}
.dm-error {
  flex: none;
  margin: 0;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--danger);
}

/* ── The send bar ── */
.dm-form {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
}
.dm-input {
  flex: 1;
  min-width: 0;
  height: 48px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--field);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.dm-input:focus {
  border: 2px solid var(--accent);
  outline: none;
  padding: 0 13px;
}
.dm-send {
  flex: none;
  height: 48px;
  padding: 0 22px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
}
.dm-send:hover {
  background: var(--accent-hover);
}

@media (max-width: 1279.98px) {
  .messages-page {
    grid-template-columns: 300px minmax(0, 1fr);
  }
  .messages-page--player {
    grid-template-columns: minmax(0, 820px);
  }
}
@media (max-width: 1023.98px) {
  .messages-page {
    grid-template-columns: 260px minmax(0, 1fr);
  }
  .messages-page--player {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The unread count on the tab bar's Messages button: a 20 px pill (the cockpit journal's
   badge has the same colours, its size is `min-width: 1.2rem`). */
.anima-subtab-badge {
  min-width: 20px;
  height: 20px;
  margin-left: 8px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0;
  text-align: center;
}