/* ============================================================
   MOBILE RESPONSIVE DESIGN - v2.6.0
   ============================================================ */

/* Desktop: Hide mobile-only elements */
.mobile-only {
    display: none;
}

/* Tablet breakpoint (768px - 1024px) */
@media (max-width: 1024px) {
    /* ลดขนาด container */
    .max-w-7xl {
        max-width: 100% !important;
        padding: 0 1rem;
    }

    /* ปรับ grid ให้เป็นคอลัมน์เดียว */
    .lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* ปรับ History panel ให้แสดงด้านล่าง */
    .lg\:col-span-2,
    .lg\:col-span-1 {
        grid-column: span 1 !important;
    }
}

/* Mobile breakpoint (< 768px) */
@media (max-width: 768px) {
    /* Mobile branding - show/hide span */
    .mobile-only {
        display: inline !important;
        font-size: 0.6em;
        font-weight: 300;
        color: rgba(139, 92, 246, 0.7);
    }

    /* Force main container full width */
    .max-w-7xl {
        max-width: 100% !important;
        padding: 0 0.5rem !important;
    }

    /* Force grid to 1 column + enable flexbox for ordering */
    main > .grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    /* All columns take full width */
    .lg\:col-span-2,
    .lg\:col-span-1 {
        grid-column: span 1 !important;
        width: 100% !important;
        flex: 0 0 auto !important;
    }

    /* Prompt Craft section first */
    .lg\:col-span-2 {
        order: 1 !important;
    }

    /* History section second */
    .lg\:col-span-1 {
        order: 2 !important;
        position: relative !important;
        top: auto !important;
    }

    /* Typography - ขยายตัวอักษรให้อ่านง่าย */
    body {
        font-size: 16px;
    }

    h1, .text-4xl { font-size: 1.5rem !important; }
    h2, .text-3xl { font-size: 1.25rem !important; }
    h3, .text-2xl { font-size: 1.125rem !important; }
    .text-lg { font-size: 1rem !important; }
    .text-sm { font-size: 0.875rem !important; }
    .text-xs { font-size: 0.75rem !important; }

    /* Container และ Spacing */
    .p-6 { padding: 1rem !important; }
    .p-4 { padding: 0.75rem !important; }
    .gap-6 { gap: 1rem !important; }

    /* Touch targets - ขยายปุ่มให้ใหญ่พอกด (min 44x44px) */
    button, .cyber-btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
    }

    /* Form inputs - ขยายให้กรอกง่าย */
    input, textarea, select {
        font-size: 16px !important; /* ป้องกัน iOS zoom */
        min-height: 44px !important;
        padding: 0.75rem !important;
    }

    /* Video/Image thumbnails - ขยายให้เห็นชัด */
    .video-thumbnail {
        min-height: 150px !important;
    }

    /* Prompt box - ใช้พื้นที่เต็ม */
    #prompt {
        min-height: 120px !important;
    }

    /* History grid - 2 คอลัมน์บนมือถือ */
    #video-history {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    /* Fix: Ensure .hidden class works with ID selector specificity */
    #video-history.hidden {
        display: none !important;
    }

    /* Language selector - keep as 3 columns on mobile (EN/TH/JA) */
    #language-selector .grid-cols-3 {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.25rem !important;
    }

    #language-selector .language-label {
        min-height: 36px !important;
        padding: 0.25rem !important;
    }

    /* Modal - full screen บนมือถือ */
    #video-modal,
    #image-modal {
        padding: 0 !important;
    }

    #video-modal > div,
    #image-modal > div {
        max-width: 100vw !important;
        max-height: 100vh !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    #modal-video-player,
    #modal-image-full {
        max-height: 100vh !important;
    }

    /* Navigation และ Header */
    header {
        padding: 0.75rem 1rem !important;
    }

    /* Header flex gap */
    header > div > div {
        gap: 1rem !important;
    }

    /* Logo sizing */
    header .w-10 {
        width: 2.5rem !important;  /* 40px */
        height: 2.5rem !important;
    }

    /* Title text sizing */
    header h1 {
        font-size: 1.25rem !important; /* 20px (ลดจาก 30px) */
        line-height: 1.3 !important;
    }

    /* Version badge */
    header h1 span.text-sm {
        font-size: 0.7rem !important; /* 11.2px (ลดจาก 14px) */
    }

    /* Subtitle */
    header p.text-xs {
        font-size: 0.625rem !important; /* 10px (ลดจาก 12px) */
    }

    /* Balance Button - Mobile: Fixed compact size */
    .balance-topup-button {
        width: 75px !important;
        max-width: 75px !important;
        min-width: 75px !important;
        padding: 0.375rem 0.5rem !important;
    }

    .balance-topup-button span:first-child {
        font-size: 0.75rem !important; /* Balance: 12px */
    }

    .balance-topup-button span:last-child {
        font-size: 7px !important; /* TOP UP: 7px */
        letter-spacing: 0.03em !important;
    }

    /* Panel overflow fixes */
    .cyber-card {
        overflow: hidden !important;
    }

    .max-w-7xl {
        overflow-x: hidden !important;
    }

    main {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Image Upload + Prompt Craft Layout on Mobile */
    .flex.gap-4:has(#image-upload-section-left) {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    #image-upload-section-left {
        width: 100% !important;
        order: -1 !important; /* Move to top */
    }

    /* Compact image upload area on mobile */
    #drag-drop-area-left {
        padding: 1rem !important;
        min-height: 100px !important;
    }

    #drag-drop-area-left svg {
        width: 2rem !important;
        height: 2rem !important;
        margin-bottom: 0.25rem !important;
    }

    #drag-drop-area-left p {
        font-size: 0.75rem !important;
        margin-bottom: 0.125rem !important;
    }

    /* Image preview - limit height on mobile */
    #image-preview-left {
        max-height: 200px !important;
    }

    /* Navigation buttons in preview */
    #prev-image-btn-left,
    #next-image-btn-left {
        width: 2rem !important;
        height: 2rem !important;
    }

    /* Dropdown menus - ขยายให้กดง่าย */
    select {
        padding: 0.75rem 2rem 0.75rem 0.75rem !important;
        background-size: 1.5rem !important;
    }

    /* Textarea resize handles - larger for mobile touch */
    textarea {
        resize: vertical !important; /* Only vertical resize */
        position: relative !important;
    }

    /* Make resize handle area larger and more visible */
    textarea::after {
        content: '' !important;
        position: absolute !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 40px !important;
        height: 40px !important;
        cursor: ns-resize !important;
        background: linear-gradient(135deg, transparent 0%, transparent 60%, rgba(139, 92, 246, 0.3) 60%) !important;
    }

    /* Alternative: Add visual indicator for resize */
    #prompt,
    #negative-prompt,
    #prompt-craft-input {
        background-image:
            linear-gradient(135deg, transparent 0px, transparent calc(100% - 20px), rgba(139, 92, 246, 0.4) calc(100% - 20px)),
            linear-gradient(135deg, transparent 0px, transparent calc(100% - 12px), rgba(139, 92, 246, 0.3) calc(100% - 12px)),
            linear-gradient(135deg, transparent 0px, transparent calc(100% - 4px), rgba(139, 92, 246, 0.2) calc(100% - 4px)) !important;
        background-repeat: no-repeat !important;
        background-position: bottom right !important;
        background-size: 40px 40px !important;
        padding-bottom: 3rem !important; /* Extra space for resize handle */
    }

    /* Hide desktop-only elements */
    .hidden-mobile {
        display: none !important;
    }
}

/* Small mobile (< 480px) */
@media (max-width: 480px) {
    /* History grid - 1 คอลัมน์บนจอเล็ก */
    #video-history {
        grid-template-columns: 1fr !important;
    }

    /* Stack buttons vertically */
    .grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* Extra small mobile - Header adjustments */
    header h1 {
        font-size: 1rem !important; /* 16px */
    }

    header .w-8 {
        width: 1.75rem !important;  /* 28px */
        height: 1.75rem !important;
    }

    .balance-topup-button {
        width: 65px !important;
        max-width: 65px !important;
        min-width: 65px !important;
        padding: 0.3rem 0.4rem !important;
    }

    .balance-topup-button span:first-child {
        font-size: 0.65rem !important; /* Balance: 10.4px */
    }

    .balance-topup-button span:last-child {
        font-size: 6px !important; /* TOP UP: 6px */
    }

    /* Compact status badges */
    .status-badge {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }
}

/* Landscape mobile - ปรับให้ใช้พื้นที่แนวนอน */
@media (max-height: 500px) and (orientation: landscape) {
    /* ลด header height */
    header {
        padding: 0.5rem !important;
    }

    /* Compact modals */
    #video-modal video,
    #image-modal img {
        max-height: 80vh !important;
    }
}

/* ========== Step Complexity Selector - Force 3 columns on mobile ========== */
@media (max-width: 768px) {
    #step-complexity-container .grid {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-template-rows: 1fr !important;
    }

    .step-complexity-btn {
        font-size: 0.75rem !important;
        padding: 0.5rem 0.25rem !important;
        flex-direction: column !important;
        gap: 0.25rem !important;
    }

    .step-complexity-btn img {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
}

/* ========== v2.8.0: Touch-active card styles for mobile ========== */
@media (max-width: 768px) {
    /* Touch-active card visual feedback */
    .video-thumbnail.touch-active,
    .image-thumbnail.touch-active {
        border-color: rgba(6, 182, 212, 0.9) !important;
        border-width: 3px !important;
        box-shadow: 0 0 20px rgba(6, 182, 212, 0.4) !important;
        transition: all 0.3s ease;
    }

    /* Pink glow for image thumbnails */
    .image-thumbnail.touch-active {
        border-color: rgba(244, 114, 182, 0.9) !important;
        box-shadow: 0 0 20px rgba(244, 114, 182, 0.4) !important;
    }

    /* Button scale-in animation */
    .action-button.scale-in {
        animation: scaleIn 0.2s ease-out;
    }

    @keyframes scaleIn {
        from {
            opacity: 0;
            transform: scale(0.8);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* Prevent double-tap zoom */
    .video-thumbnail,
    .image-thumbnail {
        touch-action: manipulation;
    }
}

/* Touch-specific styles */
@media (hover: none) and (pointer: coarse) {
    /* เพิ่ม active states แทน hover */
    .cyber-btn:active,
    button:active {
        transform: scale(0.95);
        opacity: 0.8;
    }

    .video-thumbnail:active {
        transform: scale(0.98);
    }

    /* ลบ hover effects ที่ไม่ทำงานบน touch */
    .hover\:bg-purple-700:hover {
        background-color: inherit;
    }

    .hover\:border-cyan-400:hover {
        border-color: inherit;
    }

    .hover\:shadow-lg:hover {
        box-shadow: inherit;
    }
}