/* ==========================================================================
   css/messages.css — Messages (DECISIONS 266, js/ui/messages.js)
   One panel: the conversations on the left, the open conversation on the right with bubbles (yours
   in the accent colour on the right). On a phone one column: the list or the conversation.
   ========================================================================== */
.dm-box {
  display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
  padding: 0; overflow: hidden; height: calc(100vh - 230px); height: calc(100dvh - 230px); min-height: 420px; max-height: 760px;
}
.dm-side { border-right: 1px solid rgba(255, 255, 255, 0.08); overflow-y: auto; padding: 8px; }
.dm-list { display: flex; flex-direction: column; gap: 4px; }
.dm-none { padding: 12px; margin: 0; }
.dm-convo {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  width: 100%; padding: 6px 8px; border-radius: var(--radius-sm, 8px); border: 1px solid transparent;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.dm-convo:hover { background: rgba(255, 255, 255, 0.05); }
.dm-convo.active { background: var(--accent-soft, rgba(214, 69, 69, 0.16)); border-color: rgba(214, 69, 69, 0.4); }
.dm-avatar { width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; border-radius: 50%; background: var(--panel-2); flex: none; }
.dm-convo-main { display: flex; flex-direction: column; min-width: 0; }
.dm-convo-name { font-weight: 700; font-size: 0.9rem; }
.dm-convo-last { font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-convo.unread .dm-convo-last { color: inherit; font-weight: 600; }
.dm-convo-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.dm-convo-time { font-size: 0.7rem; color: var(--muted); white-space: nowrap; }

.dm-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dm-thread > .empty, .dm-thread > .loading-block { margin: auto; }
.dm-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.dm-head-name { flex: 1; min-width: 0; font-weight: 700; }
.dm-back { display: none; }
.dm-log { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.dm-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 78%; }
.dm-msg.mine { align-self: flex-end; align-items: flex-end; }
.dm-bubble { padding: 7px 11px; border-radius: 14px 14px 14px 4px; background: rgba(255, 255, 255, 0.07); line-height: 1.35; overflow-wrap: anywhere; }
.dm-msg.mine .dm-bubble { border-radius: 14px 14px 4px 14px; background: var(--accent, #d64545); color: var(--accent-text, #fff); }
.dm-meta { font-size: 0.68rem; color: var(--muted); margin-top: 2px; }
.dm-empty { margin: auto; text-align: center; }
.dm-form { padding: 10px 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); }

@media (max-width: 899px) {
  /* 100dvh: on a phone 100vh is the height without the address bar, so the box and its input ran
     below the screen (the same trap as the pinned header, DECISIONS 272). 100vh stays as the fallback. */
  .dm-box { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 190px); height: calc(100dvh - 190px); }
  .dm-side { border-right: 0; }
  .dm-box.has-thread .dm-side { display: none; }
  .dm-box:not(.has-thread) .dm-thread { display: none; }
  .dm-back { display: inline-flex; }
}