/* Responsive Fixes for HK AI Apps */

/* Mobile & Tablet Optimizations */
@media (max-width: 768px) {
    /* --- HK-AI-LAB-Enhanced-Medical-AI.html Fixes --- */
    
    /* Header Layout */
    .app-header {
        flex-direction: column;
        gap: 15px;
        padding: 15px !important;
        height: auto !important;
    }

    .app-logo {
        width: 100%;
        justify-content: center;
        margin-bottom: 10px;
    }

    /* Navigation */
    .app-nav {
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start !important;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
        gap: 10px !important;
    }

    .nav-item {
        white-space: nowrap;
        font-size: 0.8rem !important;
        padding: 8px 12px !important;
    }

    /* User Menu */
    .user-menu {
        width: 100%;
        justify-content: center;
        margin-top: 10px;
        flex-wrap: wrap;
    }

    /* Dashboard Grid */
    .dashboard-grid {
        grid-template-columns: 1fr !important; /* Stack columns on mobile */
        gap: 15px !important;
    }

    /* Module Cards */
    .module-card {
        padding: 15px !important;
    }

    /* Login Screen */
    .login-container {
        padding: 20px !important;
        width: 90% !important;
        margin: 0 auto;
    }

    .login-title {
        font-size: 1.5rem !important;
    }

    /* Forms */
    .input-group input {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }

    /* Buttons */
    .btn, button {
        padding: 12px 20px !important; /* Larger touch targets */
        min-height: 44px; /* Minimum touch height */
    }

    /* Content Area */
    .app-content {
        padding: 15px !important;
    }

    /* --- HK-AI-DOCTOR.html Fixes (Tailwind overrides) --- */
    
    /* Ensure container fits */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Stack header elements */
    header .container {
        flex-direction: column;
        gap: 10px;
    }

    /* Adjust nav buttons */
    .nav-btn {
        padding: 10px 15px !important;
        font-size: 0.8rem !important;
    }

    header.sticky, nav.sticky {
        position: static !important;
        top: auto !important;
    }

    #loginScreen input, #loginScreen select, #loginScreen textarea {
        font-size: 16px !important;
    }

    #loginScreen > div > div {
        width: min(92vw, 320px) !important;
        max-width: 92vw !important;
    }

    img, video, canvas, svg {
        max-width: 100% !important;
        height: auto !important;
    }

    .floating-chat-window {
        width: calc(100vw - 20px) !important;
        right: 10px !important;
        left: 10px !important;
        height: 70vh !important;
        bottom: 90px !important;
        border-radius: 16px !important;
    }

    .floating-ai-chat {
        width: 56px !important;
        height: 56px !important;
        right: 15px !important;
        bottom: 15px !important;
    }

    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    [style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    [style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Small Mobile Devices (Phones) */
@media (max-width: 480px) {
    .app-logo-text {
        font-size: 1.2rem !important;
    }

    .stat-card {
        min-width: 100%;
    }
    
    /* Force tables to be scrollable */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .floating-chat-window {
        height: 75vh !important;
        bottom: 80px !important;
    }
}

.lens-effect {
    display: none !important;
}