/* Mobile responsive fixes for agent cards */
@media (max-width: 768px) {
  /* Prevent horizontal overflow on mobile */
  body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  /* Ensure all containers stay within viewport */
  * {
    box-sizing: border-box !important;
  }
  
  /* Fix agent dossier page mobile layout */
  [data-testid="agent-dossier"],
  .agent-dossier-container {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }
  
  /* Fix agent cards grid on mobile */
  .agents-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }
  
  /* Fix individual agent cards */
  .agent-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  /* Fix agent card content */
  .agent-card .agent-header {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  
  .agent-card .agent-info {
    min-width: 0 !important;
    flex: 1 !important;
    overflow: hidden !important;
  }
  
  .agent-card .agent-name {
    font-size: 1rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .agent-card .agent-stats {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  
  .agent-card .stat-item {
    font-size: 0.8rem !important;
    gap: 6px !important;
  }
  
  .agent-card .stat-value {
    max-width: 100px !important;
    font-size: 0.8rem !important;
  }
}

@media (max-width: 480px) {
  /* Extra small screens */
  .agent-card {
    padding: 10px !important;
    border-radius: 8px !important;
  }
  
  .agent-card .agent-avatar-image {
    height: 140px !important;
  }
  
  .agent-card .agent-name {
    font-size: 0.9rem !important;
  }
  
  .agent-card .stat-item {
    font-size: 0.7rem !important;
  }
  
  .agent-card .stat-value {
    font-size: 0.7rem !important;
    max-width: 80px !important;
  }
}