/* Chatbot Mobile Responsive Styles */
/* This file should be loaded after chatbot.css */

@media (max-width: 768px) {
    .chatbot-container {
      bottom: 15px;
      right: 15px;
    }
    
    .chatbot-button {
      width: 55px;
      height: 55px;
      font-size: 22px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    }
    
    .chatbot-window {
      width: 320px;
      height: 480px;
      right: 0;
      bottom: 70px;
    }
  }
  
  @media (max-width: 480px) {
    .chatbot-container {
      bottom: 10px;
      right: 10px;
    }
    
    .chatbot-button {
      width: 50px;
      height: 50px;
      font-size: 20px;
    }
    
    .chatbot-window {
      width: calc(100vw - 20px);
      max-width: 350px;
      height: 70vh;
      max-height: 500px;
      right: 10px;
      bottom: 65px;
      border-radius: 8px;
    }
    
    .chatbot-header {
      padding: 12px 15px;
    }
    
    .chatbot-title {
      font-size: 14px;
    }
    
    .chatbot-messages {
      padding: 12px;
      gap: 12px;
    }
    
    .chatbot-message {
      max-width: 85%;
      padding: 10px 12px;
      font-size: 13px;
      border-radius: 8px;
    }
    
    .chatbot-footer {
      padding: 12px;
    }
    
    .chatbot-input {
      padding: 10px 12px;
      font-size: 13px;
      border-radius: 4px;
    }
    
    .chatbot-send {
      padding: 0 12px;
      border-radius: 4px;
      font-size: 13px;
    }
    
    .chatbot-powered {
      font-size: 9px;
      padding: 4px;
    }
  }
  
  @media (max-width: 375px) {
    /* iPhone SE and smaller screens */
    .chatbot-window {
      width: calc(100vw - 15px);
      height: 65vh;
      right: 7px;
      bottom: 60px;
    }
    
    .chatbot-header {
      padding: 10px 12px;
    }
    
    .chatbot-title {
      font-size: 13px;
    }
    
    .chatbot-messages {
      padding: 10px;
      gap: 10px;
    }
    
    .chatbot-message {
      max-width: 90%;
      padding: 8px 10px;
      font-size: 12px;
    }
    
    .chatbot-input-container {
      gap: 8px;
    }
    
    .chatbot-input {
      padding: 8px 10px;
      font-size: 12px;
    }
    
    .chatbot-send {
      padding: 0 10px;
      font-size: 12px;
    }
  }
  
  @media (max-width: 320px) {
    /* Very small screens */
    .chatbot-container {
      bottom: 8px;
      right: 8px;
    }
    
    .chatbot-button {
      width: 45px;
      height: 45px;
      font-size: 18px;
    }
    
    .chatbot-window {
      width: calc(100vw - 12px);
      height: 60vh;
      right: 6px;
      bottom: 55px;
    }
    
    .chatbot-header {
      padding: 8px 10px;
    }
    
    .chatbot-title {
      font-size: 12px;
    }
    
    .chatbot-messages {
      padding: 8px;
      gap: 8px;
    }
    
    .chatbot-message {
      padding: 6px 8px;
      font-size: 11px;
    }
    
    .chatbot-footer {
      padding: 8px;
    }
    
    .chatbot-input {
      padding: 6px 8px;
      font-size: 11px;
    }
    
    .chatbot-send {
      padding: 0 8px;
      font-size: 11px;
    }
    
    .chatbot-powered {
      font-size: 8px;
    }
  }
  
  /* Landscape orientation adjustments for mobile */
  @media (max-height: 500px) and (orientation: landscape) {
    .chatbot-window {
      height: 85vh;
      max-height: 400px;
    }
    
    .chatbot-messages {
      padding: 8px;
    }
    
    .chatbot-header {
      padding: 8px 12px;
    }
    
    .chatbot-footer {
      padding: 8px 12px;
    }
  }
  
  /* Fix for very wide but short screens */
  @media (min-width: 481px) and (max-height: 600px) {
    .chatbot-window {
      height: 80vh;
      max-height: 450px;
    }
  }
  
  /* Touch-friendly improvements */
  @media (hover: none) and (pointer: coarse) {
    .chatbot-button {
      /* Larger touch target for mobile */
      width: 55px;
      height: 55px;
    }
    
    .chatbot-send {
      /* Ensure send button is easily tappable */
      min-width: 60px;
    }
    
    .chatbot-close {
      /* Larger close button for easier tapping */
      width: 30px;
      height: 30px;
      font-size: 20px;
    }
    
    .chatbot-input {
      /* Prevent zoom on iOS when input is focused */
      font-size: 16px;
    }
  }
  
  /* iOS Safari specific fixes */
  @supports (-webkit-touch-callout: none) {
    .chatbot-window {
      /* Account for iOS Safari's bottom bar */
      bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }
    
    @media (max-width: 480px) {
      .chatbot-window {
        bottom: calc(65px + env(safe-area-inset-bottom, 0px));
      }
    }
  }
  
  /* Dark mode support for mobile */
  @media (prefers-color-scheme: dark) {
    /* Your existing dark theme variables are already good for mobile */
    /* Just ensuring proper contrast on small screens */
    .chatbot-message {
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
  }