/* ================================================
   MESSAGING - Mobile
   Extrait de css/messaging.css (lignes 465-511)
   ================================================ */

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
  .messages-container {
    flex-direction: column;
    height: calc(100vh - var(--header-height) - var(--space-4));
  }
  
  .messages-sidebar {
    width: 100%;
    max-height: 40vh;
    border-right: none;
    border-bottom: 1px solid var(--gray-200);
  }
  
  .conversation-item {
    padding: var(--space-3);
  }
  
  .conversation-avatar img {
    width: 40px;
    height: 40px;
  }
  
  .chat-header {
    padding: var(--space-4);
  }
  
  .chat-header-avatar {
    width: 40px;
    height: 40px;
  }
  
  .chat-messages {
    padding: var(--space-4);
  }
  
  .chat-message {
    max-width: 85%;
  }
  
  .chat-input-area {
    padding: var(--space-4);
  }
  
  .chat-message-input {
    font-size: var(--font-sm);
  }
}