/* ==========================================
   STAFFOPTIMIZE.IO - FULL MOBILE OPTIMIZATION
   ========================================== */

/* 1. Original Layout Logic (Preserved) */
@media (max-width: 767px) {
  .sidebar {
    display: none;
  }

  .col-md-10 {
    width: 100%;
  }

  /* Make all text within the mobile navigation readable white color */
  .navbar-nav .nav-link,
  .navbar-nav .dropdown-item {
    color: rgba(255, 255, 255, 0.8) !important;
  }

  /* 2. Chat Container: Full-Screen Dark Theme Override */
  .chat-container {
    margin: 0 !important;
    height: calc(100vh - 60px) !important;
    border-radius: 0 !important;
    border: none !important;
    background-color: #0f172a !important; /* Midnight Navy */
  }

  /* 3. Chat Window: Force Dark Theme Background */
  .chat-window {
    background-color: #0f172a !important;
    padding: 10px !important;
  }

  /* 4. Message Bubbles: Sizing and Shadow */
  .chat-message {
    max-width: 90% !important;
    font-size: 0.85rem !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
  }

  /* 5. Mobile-Specific Input Group (Thumb Friendly) */
  .input-group {
    padding: 12px !important;
    background-color: #1e293b !important; /* Slate Navy */
    border-top: 1px solid #334155 !important;
    position: sticky;
    bottom: 0;
  }
  
  #chat-input {
    font-size: 16px !important; /* Prevents iOS auto-zoom */
    background-color: #0f172a !important;
    color: #ffffff !important;
    border: 1px solid #475569 !important;
  }

  /* 6. Mobile Analytics: Table & Chart Scaling */
  .chat-message table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #334155;
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border-radius: 8px;
  }

  .chat-message th {
    background-color: #f8f9fa !important;
    color: #111827 !important;
    font-weight: 600;
  }

  .chat-message td {
    background-color: #ffffff !important;
    color: #1f2937 !important;
  }

  canvas {
    width: 100% !important;
    height: auto !important;
  }
}