/* Responsive Design */

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
  .bot-sidebar {
    display: none;
  }
  
  .main-container {
    grid-template-columns: var(--chatrooms-width) 1fr;
  }
}

/* Mobile (<768px) */
@media (max-width: 767px) {
  /* Header Adjustments */
  .header {
    padding: 0 var(--space-4);
  }
  
  .menu-toggle {
    display: block;
  }
  
  .header-title p {
    display: none;
  }
  
  .header-user {
    display: none;
  }
  
  /* Chatrooms Panel - Slide In/Out */
  .chatrooms-panel {
    position: fixed;
    top: var(--header-height);
    left: -100%;
    bottom: 0;
    width: 80%;
    max-width: 300px;
    z-index: var(--z-dropdown);
    transition: left var(--transition-slow);
    border-right: 1px solid var(--border-light);
    box-shadow: var(--shadow-lg);
  }
  
  .chatrooms-panel.open {
    left: 0;
  }
  
  /* Bot Sidebar - Hidden on Mobile */
  .bot-sidebar {
    display: none;
  }
  
  /* Chat View Full Width */
  .chat-view {
    width: 100%;
  }
  
  .chat-header,
  .chat-footer {
    padding: var(--space-3) var(--space-4);
  }
  
  .chat-title {
    font-size: var(--text-xl);
  }
  
  .chat-messages {
    padding: var(--space-4);
  }
  
  /* Message Bubbles */
  .message-bubble {
    padding: var(--space-3);
  }
  
  .message-header {
    gap: var(--space-2);
  }
  
  .message-avatar {
    width: 32px;
    height: 32px;
  }
  
  .message-bot-name {
    font-size: var(--text-sm);
  }
  
  .message-timestamp {
    font-size: var(--text-xs);
  }
  
  .message-content {
    font-size: var(--text-sm);
    padding-left: calc(32px + var(--space-2));
  }
  
  /* Chatroom Cards */
  .chatroom-card {
    padding: var(--space-3);
    padding-left: var(--space-5);
  }
  
  /* Modal Adjustments */
  .modal {
    padding: var(--space-2);
  }
  
  .modal-content {
    max-height: 95vh;
  }
  
  .modal-body {
    padding: var(--space-6) var(--space-4);
  }
  
  .bot-profile-avatar {
    width: 96px;
    height: 96px;
  }
  
  .bot-profile-name {
    font-size: var(--text-xl);
  }
  
  .bot-profile-bio {
    font-size: var(--text-sm);
  }
  
  .bot-stats-grid {
    grid-template-columns: 1fr;
  }
  
  /* Login/Setup Screens */
  .login-container {
    padding: var(--space-2);
  }
  
  .login-card {
    padding: var(--space-6) var(--space-4);
  }
  
  .login-title {
    font-size: var(--text-2xl);
  }
  
  .orbit-logo {
    width: 64px;
    height: 64px;
  }
}

/* Small Mobile (<576px) */
@media (max-width: 575px) {
  .chatrooms-panel.open {
    width: 100%;
    max-width: 100%;
  }
  
  .header-title h1 {
    font-size: var(--text-lg);
  }
  
  .login-title {
    font-size: var(--text-xl);
  }
  
  .panel-header {
    padding: var(--space-3) var(--space-4);
  }
  
  .panel-content {
    padding: var(--space-3);
  }
}

/* Large Desktop (≥1200px) */
@media (min-width: 1200px) {
  .bots-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .chat-messages {
    padding: var(--space-8);
  }
  
  .panel-content {
    padding: var(--space-5);
  }
}

/* Print Styles */
@media print {
  .header,
  .chatrooms-panel,
  .bot-sidebar,
  .chat-footer,
  .menu-toggle,
  .modal-backdrop {
    display: none;
  }
  
  .chat-view {
    width: 100%;
  }
  
  .message-bubble {
    break-inside: avoid;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dark Mode (Preference) */
@media (prefers-color-scheme: dark) {
  /* Already using dark theme by default */
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  :root {
    --border-light: #505050;
    --border-medium: #707070;
    --text-secondary: #b0b0b0;
  }
  
  .message-bubble,
  .chatroom-card,
  .bot-card {
    border: 2px solid var(--border-medium);
  }
}

/* Mobile Menu Overlay */
@media (max-width: 767px) {
  .menu-overlay {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-dropdown) - 1);
  }
  
  .menu-overlay.active {
    display: block;
  }
}

/* Landscape Mobile */
@media (max-width: 767px) and (orientation: landscape) {
  .chat-messages {
    padding: var(--space-3);
  }
  
  .message-bubble {
    padding: var(--space-2);
  }
  
  .empty-state,
  .chat-empty {
    padding: var(--space-6);
  }
  
  .empty-icon {
    font-size: 3rem;
    margin-bottom: var(--space-4);
  }
}