/* === EVA 3 PRO MOBILE ADAPTATION V17 (RESTORE CONTENT PADDING) === */

/* ========================================
   VARIABLES & GLOBALS
======================================== */
:root {
    --mobile-header-height: 60px;
}

.mobile-header {
    display: none !important;
}

.sidebar-overlay {
    display: none;
}

/* ========================================
   MOBILE (< 1025px)
======================================== */
@media (max-width: 1024px) {
    body {
        flex-direction: column !important;
    }

    /* --- 1. MOBILE HEADER --- */
    .mobile-header {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--mobile-header-height);
        background: var(--bg-main);
        z-index: 300;
        padding: 0 16px;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .mobile-header .logo {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-main);
    }

    .mobile-header .logo span {
        color: #7C3AED;
    }

    .hamburger-btn {
        width: 44px;
        height: 44px;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 301;
    }

    .hamburger-btn span {
        display: block;
        width: 24px;
        height: 3px;
        background: var(--text-main);
        border-radius: 2px;
        transition: all 0.3s;
    }

    /* --- SIDEBAR --- */
    #desktop-sidebar,
    aside {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100vw !important;
        max-width: none !important;
        z-index: 10000 !important;
        background-color: var(--bg-main) !important;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex !important;
        padding-top: 0px !important;
        /* Reduced from 10px */
        padding-left: 0px !important;
        padding-right: 0px !important;
        padding-bottom: 0px !important;
    }

    /* Принудительно меняем отступы ВНУТРИ меню */
    aside>div {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    aside.mobile-open,
    #desktop-sidebar.mobile-open {
        transform: translateX(0);
    }

    /* --- 2. MAIN CONTENT (ZERO PADDING FIX) --- */
    main {
        margin-top: var(--mobile-header-height) !important;
        width: 100% !important;
        height: calc(100vh - var(--mobile-header-height));
        overflow-y: auto !important;
        padding-top: 10px !important;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        /* FIX: Smooth scroll on iOS */
        overscroll-behavior-y: contain;
        /* FIX: Prevent body scroll chaining */
    }

    /* FIX: Target ALL potential padding classes on the main container */
    main>div.p-8,
    main>div.px-8,
    main>div.flex-1 {
        padding: 0 !important;
        padding-bottom: 80px !important;
        /* Extra bottom space for scrolling */
    }

    #empty-state {
        padding: 0 16px !important;
    }

    /* V17: RESTORE PADDING FOR EVERYTHING ELSE IN CONTENT CONTAINER */
    #content-container>div:not(#resume-section) {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Header (16px) */
    main>div:first-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 16px !important;
        gap: 12px !important;
        min-height: auto !important;
        position: sticky !important;
        top: 0 !important;
        background: var(--bg-main) !important;
        z-index: 50 !important;
    }

    /* FIX: Scroll Offset for Reviews */
    #reviews-section {
        scroll-margin-top: 100px;
        /* 60px header + 40px buffer */
    }

    main>div:first-child>div:first-child {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    main>div:first-child h2 {
        font-size: 1.5rem !important;
        font-weight: 800 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }

    #status-indicator {
        margin-top: 0 !important;
        background: rgba(124, 58, 237, 0.05);
        padding: 4px 8px;
        border-radius: 8px;
        border: 1px solid rgba(124, 58, 237, 0.1);
    }

    .dark #status-indicator {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
    }

    #status-text {
        font-size: 9px !important;
    }

    /* Controls */
    main>div:first-child>div:last-child {
        width: 100%;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
        overflow: visible !important;
        padding: 0 !important;
        height: 40px !important;
    }

    label[for="debug-mode-toggle"],
    #debug-mode-toggle,
    .flex.items-center.gap-2.mr-2:has(#debug-mode-toggle),
    main>div:first-child>div:last-child>div:first-child {
        display: none !important;
    }

    main>div:first-child>div:last-child>a,
    #export-select-container>button,
    main>div:first-child>div:last-child>button[onclick="saveCurrentProject()"] {
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        justify-content: center !important;
        border-radius: 12px !important;
    }

    main>div:first-child>div:last-child>a span:last-child {
        display: none !important;
    }

    main>div:first-child>div:last-child>a span:first-child {
        font-size: 18px !important;
        margin: 0 !important;
        transform: none !important;
    }

    main>div:first-child>div:last-child>a svg {
        width: 20px !important;
        height: 20px !important;
    }

    #custom-select-container {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        order: 0 !important;
    }

    #model-select-btn {
        width: 100% !important;
        height: 40px !important;
        padding: 0 10px !important;
        border-radius: 12px !important;
        justify-content: space-between !important;
    }

    #selected-model-text {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px !important;
    }

    /* --- 3. MODEL DROPDOWN --- */
    #model-dropdown.hidden {
        display: none !important;
    }

    #model-dropdown:not(.hidden) {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        width: 100vw !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        margin-top: 0 !important;
        transform: none !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
        background: var(--bg-main) !important;
        backdrop-filter: blur(16px) !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 24px 16px !important;
        gap: 12px !important;
        z-index: 20005 !important;
        box-shadow: 0 -10px 60px rgba(0, 0, 0, 0.2) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.4) !important;
        animation: slideUpBottom 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .dark #model-dropdown:not(.hidden) {
        background: #1a1c23 !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    #model-dropdown>div,
    #model-dropdown li {
        width: auto !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        border: none !important;
        border-radius: 14px !important;
        padding: 14px !important;
        background: rgba(255, 255, 255, 0.4) !important;
        box-shadow: 2px 2px 6px rgba(163, 177, 198, 0.1), -2px -2px 6px rgba(255, 255, 255, 0.5) !important;
    }

    .dark #model-dropdown>div,
    .dark #model-dropdown li {
        background: rgba(255, 255, 255, 0.05) !important;
        box-shadow: none !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    #model-dropdown>div[class*="font-extrabold"] {
        grid-column: span 2;
        margin-top: 10px;
        margin-bottom: 4px;
        border: none !important;
        background: transparent !important;
        padding-left: 8px !important;
        box-shadow: none !important;
    }

    #model-dropdown .h-px {
        display: none !important;
    }

    @keyframes slideUpBottom {
        from {
            transform: translateY(100%);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* --- 4. RESUME SCROLL (16px FIXED) --- */

    #resume-section {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        padding-bottom: 20px;
    }

    #resume-section h3 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    #resume-section>div {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        gap: 0 !important;
        padding: 0 !important;
        grid-template-columns: none !important;
    }

    #resume-section>div>div {
        min-width: 100% !important;
        max-width: 100% !important;
        scroll-snap-align: start !important;
        flex-shrink: 0;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        padding: 16px !important;
    }

    /* --- 5. REFINE MODAL --- */
    #refine-modal:not(.hidden) {
        display: block !important;
        padding: 0 !important;
    }

    #refine-modal>div {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important;
    }

    #refine-modal .px-8.py-4 {
        padding: 16px !important;
        padding-top: max(16px, env(safe-area-inset-top)) !important;
        background: var(--bg-main);
    }

    #refine-modal button[onclick*="toggleModal"] {
        width: 40px !important;
        height: 40px !important;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 50%;
        color: #ef4444 !important;
        font-weight: 900 !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
    }

    #refine-modal .p-6.flex.justify-between.items-center {
        position: sticky;
        bottom: 0;
        background: var(--bg-main);
        z-index: 50;
        padding: 16px;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px;
    }

    #refine-model-selector {
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    #refine-modal .relative.w-48 {
        width: 100% !important;
    }

    #refine-modal p.text-xs {
        text-align: center;
        margin-bottom: 4px;
    }

    #btn-apply-refine {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px !important;
    }

    /* --- 6. FIXES (DROPDOWN & MODALS) --- */
    /* Fix User Dropdown overflowing screen */
    #user-dropdown {
        left: auto !important;
        right: 0 !important;
        transform-origin: top right !important;
    }

    /* Fix Modals appearing BEHIND sidebar (sidebar is 10000) */
    .modal-overlay,
    #projects-modal,
    #share-modal,
    #confirm-modal,
    #actor-edit-modal,
    #prompt-modal,
    #dna-modal {
        z-index: 20000 !important;
    }

    /* PROJECTS MODAL SPECIFIC FIXES (Mobile) */
    #projects-modal>div {
        padding: 16px !important;
        /* Reduce padding from p-8 */
    }

    /* Header Controls - wrap and stack */
    #projects-modal .flex.items-center.gap-3.w-full.md\:w-auto {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Title Row */
    #projects-modal h2 {
        font-size: 1.25rem !important;
        /* Smaller title */
    }

    /* Search Input Container -> Full Width */
    #projects-modal .relative.w-full.md\:w-64 {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* Filter Container -> Full Width */
    #admin-filter-container {
        width: 100% !important;
        flex: 1 1 100% !important;
        display: flex !important;
        /* Ensure it is visible if not hidden by js */
    }

    /* Close Button -> Top Right Absolute to save space? or just let it flow */
    /* Let's make the close button float top right of the modal container instead for clean look */
    #projects-modal button.w-10.h-10.rounded-full {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        background: rgba(0, 0, 0, 0.05) !important;
        z-index: 50;
    }

    /* Adjust Project Grid */
    #projects-list {
        padding-right: 0 !important;
        /* Remove scrollbar gap compensation */
        gap: 12px !important;
    }

    /* Project Card Tweaks */
    #projects-list>div {
        padding: 16px !important;
    }
}


/* ========================================
   MOBILE (< 768px) - TABLE VIEW
======================================== */
@media (max-width: 768px) {

    /* FIX: GRID LAYOUT FOR MOBILE LIST ITEMS (FLAT TABLE STYLE) */
    #reviews-list.flex-col {
        gap: 0 !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        background: transparent !important;
        /* Was #fff, now transparent to blend with #E0E5EC */
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .dark #reviews-list.flex-col {
        background: transparent !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    #reviews-list.flex-col>div {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        gap: 8px !important;
        padding: 12px 0 !important;
        /* REMOVED HORIZONTAL PADDING */
        margin-bottom: 0 !important;

        /* FLAT STYLE */
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        /* Reset flex-col things */
        flex-direction: row !important;
        align-items: stretch !important;
    }

    #reviews-list.flex-col>div:last-child {
        border-bottom: none !important;
    }

    /* 1. STRIP / LEFT BORDER (Hidden) */
    #reviews-list.flex-col>div>div:first-child:not(.flex-1) {
        display: none !important;
    }

    /* 2. INFO HEADER (Top Left) */
    #reviews-list.flex-col>div>div:nth-child(2) {
        grid-column: 1 / 2;
        grid-row: 1 / 2;

        width: 100% !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        justify-content: flex-start !important;
    }

    /* Adjust children of Info Header */
    #reviews-list.flex-col>div>div:nth-child(2)>div:first-child {
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    /* Name */
    #reviews-list.flex-col>div>div:nth-child(2)>span.font-bold {
        padding-left: 0 !important;
        font-size: 13px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100px;
    }

    /* Mobile Counter - make it visible and styled */
    #reviews-list.flex-col>div>div:nth-child(2)>span:last-child {
        padding-left: 0 !important;
        display: block !important;
        font-size: 11px !important;
        opacity: 0.7;
    }

    /* Hide Model */
    #reviews-list.flex-col>div>div:nth-child(2)>span.text-\[10px\]:not(:last-child) {
        display: none !important;
    }


    /* 4. ACTIONS (Top Right) */
    #reviews-list.flex-col>div>div:last-child {
        grid-column: 2 / 3;
        grid-row: 1 / 2;

        width: auto !important;
        border: none !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 2px !important;
    }

    /* Hide desktop counter within actions block */
    #reviews-list.flex-col>div>div:last-child>span {
        display: none !important;
    }

    /* Resize action buttons */
    #reviews-list.flex-col>div>div:last-child button {
        width: 24px !important;
        height: 24px !important;
        background: transparent !important;
    }

    #reviews-list.flex-col>div>div:last-child button svg {
        width: 14px !important;
        height: 14px !important;
        color: #94a3b8;
        /* slate-400 */
    }

    /* 3. TEXT CONTENT (Bottom Row) */
    #reviews-list.flex-col>div>div.flex-1 {
        grid-column: 1 / -1;
        grid-row: 2 / 3;

        padding: 0 !important;
        margin: 0 !important;
        margin-top: 2px !important;
        width: 100% !important;
    }

    #reviews-list.flex-col>div>div.flex-1 p {
        font-size: 13px !important;
        line-height: 1.4 !important;
        color: #334155 !important;
        /* slate-700 */
    }

    .dark #reviews-list.flex-col>div>div.flex-1 p {
        color: #e2e8f0 !important;
    }

    /* MODALS FULLSCREEN */
    .modal-overlay>div,
    #projects-modal>div,
    #share-modal>div,
    #confirm-modal>div,
    #actor-edit-modal>div,
    #refine-modal>div {
        width: 100% !important;
        height: 100dvh !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important;
        padding-bottom: 0px !important;
        /* Fix for mobile bottom bars covering buttons */
        overflow-y: auto !important;
        /* Ensure scrolling works */
    }
}

/* Indicators */
.resume-indicators {
    display: none;
    justify-content: center;
    gap: 6px;
    margin-top: -10px;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .resume-indicators {
        display: flex;
    }
}

.resume-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
}

.dark .resume-dot {
    background: rgba(255, 255, 255, 0.2);
}

.resume-dot.active {
    background: #7C3AED;
    transform: scale(1.3);
}

/* Utils */
@media (min-width: 1025px) {
    .hide-desktop {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .hide-mobile {
        display: none !important;
    }

    /* --- FAB BUTTONS --- */
    .fab-btn {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: var(--bg-main);
        /* or white/theme */
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-main);
        transition: all 0.2s;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    /* GESTURE MENU OPEN STATE */
    #gesture-fab-container.menu-open #gesture-options {
        pointer-events: auto;
        opacity: 1;
    }

    #gesture-fab-container.menu-open .gesture-option {
        transform: translateY(0) scale(1);
    }

    /* Highlighted State */
    .gesture-option.active-hover {
        background: #7C3AED !important;
        color: white !important;
        transform: scale(1.15) !important;
    }

    .gesture-option.active-hover+span {
        opacity: 1;
    }

    .fab-btn:active {
        transform: scale(0.95);
        background: #f1f5f9;
    }

    .dark .fab-btn {
        background: #1e293b;
        border-color: rgba(255, 255, 255, 0.1);
        color: #e2e8f0;
    }

    .dark .fab-btn:active {
        background: #334155;
    }

    .fab-btn svg {
        width: 18px;
        height: 18px;
    }

    /* MOBILE TOOLS SHEET (Fixed Bottom Panel) */
    .mobile-tools-sheet {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 2000 !important;
        background: white !important;
        padding: 24px !important;
        border-top-left-radius: 24px !important;
        border-top-right-radius: 24px !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        animation: sheetSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .dark .mobile-tools-sheet {
        background: #1e293b !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    @keyframes sheetSlideUp {
        from {
            transform: translateY(100%);
        }

        to {
            transform: translateY(0);
        }
    }

}