/*Responsive */

/* Tablet and larger mobile devices - only apply when not in portrait with specific conditions */
@media (max-width: 1024px) and (orientation: landscape) {
  .chat-list-sidebar {
    width: min(60vw, 480px);
    max-width: min(60vw, 480px);
  }

  .chat-list-container {
    padding: 0 16px 16px 16px;
    height: calc(100vh - 100px);
  }

  .chat-list-header {
    padding: 12px 16px;
  }

  .new-chat-btn {
    padding: 10px 16px;
    margin-bottom: 12px;
  }
}

/* Mobile devices in landscape - special handling */
@media (max-width: 768px) and (orientation: landscape) {
  .chat-list-sidebar {
    width: min(55vw, 400px);
    max-width: min(55vw, 400px);
  }

  .floating-controls {
    top: max(10px, env(safe-area-inset-top, 10px));
    right: max(10px, env(safe-area-inset-right, 10px));
  }

  .floating-btn,
  .logo-toggle,
  .history-toggle {
    width: 42px;
    height: 42px;
  }

  .modal-content {
    width: 95%;
  }

  .card-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .key-controls {
    flex-wrap: wrap;
    gap: 4px;
  }

  #custom-prompt-modal .modal-content {
    width: 95%;
    max-width: none;
    margin: 10px;
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  .messages {
    padding: 10px 10px 0;
    gap: 16px;
  }

  .msg {
    padding: 12px;
  }

  .floating-controls {
    top: max(8px, env(safe-area-inset-top, 8px));
    right: max(8px, env(safe-area-inset-right, 8px));
    gap: 6px;
  }

  .floating-btn,
  .logo-toggle,
  .history-toggle {
    width: 38px;
    height: 38px;
  }

  .modal-content {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
  }
  
.input-tray {
    padding: 8px 10px max(8px, env(safe-area-inset-bottom, 8px)) 10px;
  }
}