@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay.visible {
    display: block;
  }

  .sidebar-toggle {
    display: flex;
  }

  .welcome-suggestions {
    grid-template-columns: 1fr;
  }

  .welcome-title {
    font-size: 1.375rem;
  }

  .message {
    gap: 12px;
    padding: 16px 0;
  }

  .chat-area {
    padding: 0;
  }

  .input-area {
    padding: 0 8px 12px;
  }
}

@media (max-width: 480px) {
  .model-select {
    max-width: 150px;
    font-size: 0.8125rem;
  }

  .header {
    padding: 0 8px;
  }

  .messages {
    padding: 16px 8px;
  }
}