/* ==========================================================================
   RESPONSIVE BREAKPOINTS (responsive.css v2)
   ========================================================================== */

@media (max-width: 1024px) {
    :root { --sidebar-width: 256px; }
    .tech-pills { display: none; }
    .chat-messages-inner { max-width: 100%; padding: 0 16px; }
    .chat-input-box { max-width: 100%; }
    .admin-metrics-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 280px !important;
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
        z-index: 1000;
        transition: transform var(--transition-normal);
    }
    .sidebar.mobile-open { transform: translateX(0); }
    .sidebar-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 999; opacity: 0; pointer-events: none; transition: opacity var(--transition-normal); }
    .sidebar-overlay.active { opacity: 1; pointer-events: auto; }

    .chat-header { padding: 0 14px; height: 56px; }
    .header-title { font-size: 15px; }
    #user-profile-name { display: none; }
    .starter-suggestions { grid-template-columns: 1fr; }
    .message-bubble-wrapper { max-width: 91%; }
    .chat-messages-container { padding-bottom: 145px; }
    .chat-input-wrapper { padding: 10px 12px 14px; }
    .chat-input-box { border-radius: var(--radius-lg); }
    .modal-container { width: 96%; }
    .admin-metrics-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .welcome-title { font-size: 22px; }
    .starter-suggestions { display: none; }
    .admin-metrics-grid { grid-template-columns: 1fr; }
}