/* Mobile Responsive Enhancements for Trading Analysis Pages */

/* Base mobile optimizations */
@media (max-width: 640px) {
    /* Ensure proper touch targets */
    button, .cursor-pointer {
        min-height: 44px;
        min-width: 44px;
    }
    /* Improve text readability on small screens */
    .text-4xl {
        font-size: 2rem !important;
        line-height: 2.25rem !important;
    }
    
    .text-3xl {
        font-size: 1.75rem !important;
        line-height: 2rem !important;
    }
    
    .text-2xl {
        font-size: 1.5rem !important;
        line-height: 1.75rem !important;
    }
    .f222{
        margin-left: unset !important;
    }
    /* Optimize spacing for mobile */
    .p-6 {
        padding: 1rem !important;
    }
    
    .p-4 {
        padding: 0.75rem !important;
    }
    
    .gap-6 {
        gap: 1rem !important;
    }
    
    .gap-4 {
        gap: 0.75rem !important;
    }
    
    /* Timeline specific optimizations */
    #timeline-container {
        min-height: 80px;
        padding: 0.5rem !important;
    }
    
    #timeline-container .text-xs {
        font-size: 0.65rem !important;
    }
    
    /* Price display optimizations */
    #result-current-price {
        word-break: break-all;
        hyphens: auto;
    }
    
    /* Risk management cards */
    .grid-cols-3 > div {
        min-width: 0;
    }
    
    .grid-cols-3 p {
        word-break: break-word;
        hyphens: auto;
    }
    
    /* Signal details container */
    #result-trade-signal {
        min-width: 0;
        word-wrap: break-word;
    }
    
    #result-trade-signal p {
        word-break: break-word;
        hyphens: auto;
    }
    
    /* SL/TP Cards optimizations */
    #rm-sl-value, #rm-tp-value {
        word-break: break-all;
        hyphens: auto;
        line-height: 1.2;
    }
    
    /* Timeline price labels */
    #timeline-left-price,
    #timeline-entry-price,
    #timeline-right-price {
        font-size: 0.65rem !important;
        line-height: 0.8rem !important;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Reasoning list optimizations */
    #result-reasoning-list {
        padding-left: 1rem !important;
    }
    
    #result-reasoning-list li {
        word-break: break-word;
        hyphens: auto;
        line-height: 1.4;
    }
    
    /* Button optimizations */
    #reset-analysis-btn {
        font-size: 0.9rem;
        padding: 0.75rem 1.5rem !important;
    }
    
    /* Hero section button optimizations */
    .xytzan {
        font-size: 1rem !important;
        padding: 0.75rem 1.5rem !important;
        min-width: 140px !important;
        text-align: center !important;
    }
    
    /* Ensure hero buttons don't overflow */
    .flex.justify-center.items-center.gap-4 {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }
    
    .flex.justify-center.items-center.gap-4 > div {
        order: -1 !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Header optimizations */
    #analysis-title {
        word-break: break-word;
        hyphens: auto;
    }
    
    /* Ensure proper scrolling */
    #analysis-result-container {
        overflow-x: hidden;
    }
    
    /* Image optimizations */
    #result-image {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }
}

/* Extra small screens (iPhone SE, etc.) */
@media (max-width: 375px) {
    .text-2xl {
        font-size: 1.25rem !important;
        line-height: 1.5rem !important;
    }
    
    /* Further optimize hero button for very small screens */
    .xytzan {
        font-size: 0.9rem !important;
        padding: 0.625rem 1.25rem !important;
        min-width: 120px !important;
    }
    
    .text-lg {
        font-size: 1rem !important;
        line-height: 1.25rem !important;
    }
    
    .text-base {
        font-size: 0.9rem !important;
        line-height: 1.1rem !important;
    }
    
    .text-sm {
        font-size: 0.8rem !important;
        line-height: 1rem !important;
    }
    
    .text-xs {
        font-size: 0.7rem !important;
        line-height: 0.9rem !important;
    }
    
    /* Tighter spacing for very small screens */
    .p-4 {
        padding: 0.5rem !important;
    }
    
    .p-3 {
        padding: 0.5rem !important;
    }
    
    .gap-4 {
        gap: 0.5rem !important;
    }
    
    .gap-3 {
        gap: 0.5rem !important;
    }
    
    /* Timeline adjustments for very small screens */
    #timeline-container {
        min-height: 70px;
        padding: 0.25rem !important;
    }
    
    #timeline-arrow {
        font-size: 1rem !important;
    }
    
    /* Grid adjustments */
    .grid-cols-3 {
        gap: 0.25rem !important;
    }
    
    /* Risk management header */
    #rm-overall-rr {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
    }
}

/* Landscape orientation optimizations */
@media (max-width: 640px) and (orientation: landscape) {
    /* Reduce vertical spacing in landscape */
    .mt-6 {
        margin-top: 1rem !important;
    }
    
    .mb-4 {
        margin-bottom: 0.75rem !important;
    }
    
    /* Optimize timeline height for landscape */
    #timeline-container {
        min-height: 60px;
    }
    
    /* Compact button in landscape */
    #reset-analysis-btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.85rem !important;
    }
}

/* High DPI screen optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure crisp text rendering */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* Optimize icon rendering */
    .fas, .far, .fab {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Dark mode specific mobile optimizations */
@media (prefers-color-scheme: dark) and (max-width: 640px) {
    /* Ensure sufficient contrast on mobile */
    .text-gray-300 {
        color: #e5e7eb !important;
    }
    
    .text-gray-400 {
        color: #d1d5db !important;
    }
    
    /* Improve border visibility */
    .border-gray-700 {
        border-color: #4b5563 !important;
    }
}

/* Focus and accessibility improvements for mobile */
@media (max-width: 640px) {
    /* Larger focus indicators for touch */
    button:focus,
    input:focus,
    .cursor-pointer:focus {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }
    
    /* Ensure interactive elements are large enough */
    input[type="radio"] + label {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Improve tap targets */
    .cursor-pointer {
        padding: 0.25rem;
    }
}

/* Animation optimizations for mobile */
@media (max-width: 640px) {
    /* Reduce motion for better performance */
    .transition-all,
    .transition-colors,
    .transition-opacity {
        transition-duration: 0.2s !important;
    }
    
    /* Disable complex animations on very slow devices */
    @media (prefers-reduced-motion: reduce) {
        .transition-all,
        .transition-colors,
        .transition-opacity {
            transition: none !important;
        }
        
        .animate-blob {
            animation: none !important;
        }
    }
}