/* Responsive styles */
@media (max-width: 768px) {
  .app-container {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    transform: translateX(-100%);
    transition: transform 0.3s var(--easing-standard);
  }
  
  .sidebar.show {
    transform: translateX(0);
  }
  
  .chat-area {
    width: 100%;
  }
  
  .chat-header {
    padding: 0 var(--space-3);
  }
  
  .chat-header::before {
    content: '';
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18'%3E%3C/path%3E%3Cpath d='M3 6h18'%3E%3C/path%3E%3Cpath d='M3 18h18'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: var(--space-2);
    cursor: pointer;
  }
  
  .chat-user-info {
    margin-left: var(--space-2);
  }
  
  .message-content {
    max-width: 85%;
  }
  
  .conversations-list {
    max-height: calc(100vh - 200px);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar {
    width: 280px;
  }
  
  .message-content {
    max-width: 80%;
  }
}

@media (min-width: 1025px) {
  .app-container {
    margin: 0 auto;
    height: 100vh;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }
}

/* Hover effects only for devices with hover capability */
@media (hover: hover) {
  .icon-button:hover {
    background-color: var(--color-surface-light);
  }
  
  .conversation-item:hover {
    background-color: var(--color-surface-light);
  }
  
  .message-content:hover {
    transform: translateY(-2px);
  }
}

/* Dark mode optimization for OLED screens */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #000000;
    --color-surface: #121212;
    --color-surface-light: #1e1e1e;
  }
}