/* ===================================================================
   MESSAGES PAGE — RESPONSIVE STYLES
=================================================================== */

.msg-list { display: flex; flex-direction: column; gap: 6px; }
.msg-row {
  display: flex; align-items: center; gap: 14px; padding: 16px 14px; position: relative;
  background: var(--surface); border-radius: 16px; transition: all 0.2s ease; border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.msg-row:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.msg-body { flex-grow: 1; min-width: 0; }
.msg-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.msg-name { font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.msg-time { font-size: 0.75rem; color: var(--ink-faint); flex-shrink: 0; }
.msg-preview { font-size: 0.86rem; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-unread { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); flex-shrink: 0; box-shadow: 0 0 0 3px rgba(0,184,153,0.2); }

@media (min-width: 768px) {
  .msg-row { padding: 18px 20px; border-radius: 18px; }
  .msg-name { font-size: 1.02rem; }
  .msg-preview { font-size: 0.92rem; }
}

@media (min-width: 1024px) {
  .messages-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
  }
}