/* Mobile Responsive Fixes for TradingGPT Pro */

/* Global Mobile Fixes */
@media (max-width: 768px) {
    /* Prevent horizontal scrolling */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        position: relative !important;
    }

    /* Fix Luxury Header and Dropdowns */
    .luxury-header {
        position: fixed !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        z-index: 1000 !important;
    }

    /* Fix Dropdown Positioning */
    .luxury-header .relative > div[x-show] {
        position: fixed !important;
        right: 1rem !important;
        top: 60px !important;
        width: min(90vw, 320px) !important;
        max-width: calc(100vw - 2rem) !important;
    }

    /* Notification and User Dropdown Mobile Fix */
    nav[x-data] button + div[x-show] {
        transform-origin: top right !important;
    }

    /* Fix Main Content Spacing */
    main, .main-content {
        margin-top: 0 !important;
    }

    /* Ensure body doesn't scroll under header */
    body {
        padding-top: 72px !important;
    }

    /* Fix dropdown-premium class for mobile */
    .dropdown-premium {
        position: fixed !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    }

    /* Fix Dashboard Cards */
    .dashboard-container {
        padding: 0.5rem !important;
        width: 100% !important;
    }

    .dashboard-card, 
    .stat-card,
    .chart-card {
        width: 100% !important;
        margin: 0.5rem 0 !important;
        max-width: calc(100vw - 1rem) !important;
    }

    /* Fix Trading Cards */
    .trading-card {
        width: 100% !important;
        overflow: hidden !important;
    }

    .price-display {
        font-size: 1.5rem !important;
    }

    /* Fix Charts Container */
    .charts-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0.5rem !important;
    }

    /* Fix Navigation Header */
    .navbar-container {
        padding: 0 1rem !important;
        width: 100% !important;
    }

    .nav-menu {
        position: fixed !important;
        top: 60px !important;
        left: -100% !important;
        width: 100% !important;
        background: rgba(15, 15, 26, 0.98) !important;
        transition: left 0.3s ease !important;
        z-index: 999 !important;
    }

    .nav-menu.active {
        left: 0 !important;
    }

    /* Mobile Menu Button */
    .mobile-menu-btn {
        display: block !important;
    }

    /* Hide Desktop Elements */
    .desktop-only {
        display: none !important;
    }

    /* Fix Tables */
    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: calc(100vw - 1rem) !important;
        margin: 0 0.5rem !important;
    }

    table {
        min-width: 600px !important;
    }

    /* Fix Modals */
    .modal, .modal-content {
        width: calc(100vw - 2rem) !important;
        margin: 1rem !important;
        max-height: calc(100vh - 2rem) !important;
        overflow-y: auto !important;
    }

    /* Fix Forms */
    .form-container {
        padding: 1rem !important;
        width: 100% !important;
    }

    input, select, textarea {
        width: 100% !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
    }

    /* Fix Buttons */
    .btn-group {
        flex-direction: column !important;
        width: 100% !important;
    }

    .btn-group .btn {
        width: 100% !important;
        margin: 0.25rem 0 !important;
    }

    /* Fix Sidebars */
    .sidebar {
        position: fixed !important;
        top: 60px !important;
        left: -100% !important;
        width: 80% !important;
        max-width: 300px !important;
        height: calc(100vh - 60px) !important;
        transition: left 0.3s ease !important;
        z-index: 998 !important;
        background: rgba(15, 15, 26, 0.98) !important;
    }

    .sidebar.active {
        left: 0 !important;
    }

    /* Fix Grid Layouts */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    /* Fix Flex Layouts */
    .flex-row {
        flex-direction: column !important;
    }

    /* Fix Padding and Margins */
    .px-6, .px-8 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .mx-auto {
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }

    /* Fix Text Sizes */
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }
    h4 { font-size: 1.1rem !important; }

    /* Fix Chat Interface */
    .chat-container {
        width: 100vw !important;
        padding: 0 !important;
    }

    .message-bubble {
        max-width: 85% !important;
    }

    .chat-input-container {
        padding: 0.5rem !important;
        width: 100% !important;
    }
    
    /* Chat Messages Mobile Optimization */
    #messagesContainer {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* Ensure word breaking for long messages */
    .markdown-content,
    .whitespace-pre-wrap {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }
    
    /* Prevent code blocks from causing overflow */
    pre, code {
        max-width: 100% !important;
        overflow-x: auto !important;
        word-wrap: break-word !important;
    }
    
    /* Fix message container widths */
    .max-w-2xl,
    .max-w-3xl,
    .max-w-xl,
    .max-w-lg {
        max-width: 100% !important;
    }

    /* Fix Chart Containers */
    .chart-container {
        width: 100% !important;
        padding: 0.5rem !important;
    }

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

/* Small Mobile Devices */
@media (max-width: 480px) {
    /* Even smaller text for very small screens */
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.25rem !important; }
    h3 { font-size: 1.1rem !important; }
    h4 { font-size: 1rem !important; }

    /* Smaller padding */
    .p-4 { padding: 0.75rem !important; }
    .p-6 { padding: 1rem !important; }
    .p-8 { padding: 1.25rem !important; }

    /* Smaller margins */
    .m-4 { margin: 0.75rem !important; }
    .m-6 { margin: 1rem !important; }
    .m-8 { margin: 1.25rem !important; }
}

/* iOS Specific Fixes */
@supports (-webkit-touch-callout: none) {
    /* Fix iOS rubber band scrolling */
    body {
        position: fixed;
        width: 100%;
        height: 100%;
        -webkit-overflow-scrolling: touch;
    }

    /* Fix iOS input zoom */
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* Android Specific Fixes */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .hover\:scale-105:hover {
        transform: none !important;
    }


}