@layer components {
  .message-item {
    display: flex;
    gap: var(--s4);
    padding: var(--s5) var(--s6);
    border-bottom: 1px solid var(--ink-100);
    cursor: pointer;
    transition: background var(--transition);
    position: relative;
  }
  .message-item:hover { background: var(--ink-50); }
  .message-item.unread { background: var(--forest-50); }
  .message-item.unread::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--forest-700);
  }
  .message-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--forest-100);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; color: var(--forest-700);
    flex-shrink: 0;
  }
  .message-content { flex: 1; min-width: 0; }
  .message-sender { font-size: 13px; font-weight: 600; color: var(--ink-800); }
  .message-subject { font-size: 13px; color: var(--ink-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .message-preview { font-size: 12px; color: var(--ink-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
  .message-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
  .message-time { font-size: 11px; color: var(--ink-400); }
  .message-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--forest-700); }
}