@media (min-width: 600px) {

    html, body {
        height: 100% !important;
        overflow: hidden !important;
    }

    html {
        background: #0f172a;
    }

    html::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background:
            radial-gradient(ellipse 60% 50% at 20% 30%, rgba(59,130,246,0.12) 0%, transparent 70%),
            radial-gradient(ellipse 50% 40% at 80% 70%, rgba(99,102,241,0.10) 0%, transparent 70%),
            #0f172a;
    }

    body {
        width: 720px !important;
        min-width: 720px !important;
        max-width: 720px !important;
        margin: 24px auto !important;
        height: calc(100vh - 48px) !important;
        min-height: unset !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 32px !important;
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.08),
            0 32px 80px rgba(0,0,0,0.7),
            0 8px 24px rgba(0,0,0,0.5);
        padding-bottom: 0 !important;
    }

    body * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body > header {
        position: relative !important;
        top: auto !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        z-index: 50 !important;
    }

    /* Весь скролл только здесь */
    body > main {
        flex: 1 1 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 0 !important;
        min-height: 0 !important;
    }

    body > main::-webkit-scrollbar { width: 0; }

    body > nav {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        z-index: 100 !important;
    }

    button, input, textarea, select {
        max-width: 100% !important;
    }
}

/* ---- Фикс для position:fixed элементов внутри контейнера ---- */
@media (min-width: 600px) {

    /* Превращаем fixed в absolute чтобы привязался к body-контейнеру */
    .save-bar,
    #saveToast,
    .loader-overlay {
        position: absolute !important;
    }

    /* save-bar: прибиваем к низу над nav */
    .save-bar {
        left: 16px !important;
        right: 16px !important;
        bottom: 86px !important;
    }

    /* Toast уведомления */
    #saveToast {
        left: 16px !important;
        right: 16px !important;
    }

    /* Loader на весь контейнер */
    .loader-overlay {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }

    /* body должен быть position:relative чтобы absolute дочерние 
       позиционировались относительно него — уже стоит, но на всякий */
    body {
        position: relative !important;
    }
}

/* ---- hr-vacancies.php и другие страницы с FAB и модалками ---- */
@media (min-width: 600px) {

    /* FAB кнопка — привязываем к контейнеру */
    .fab {
        position: absolute !important;
        bottom: 90px !important;
        right: 20px !important;
    }

    /* Модальные оверлеи — на весь контейнер, не на весь экран */
    .modal-overlay,
    .filter-overlay {
        position: absolute !important;
        inset: 0 !important;
    }

    /* Фильтр дропдаун — ограничиваем шириной контейнера */
    .filter-global-dropdown {
        max-width: min(260px, 680px) !important;
    }

    /* Все остальные fixed элементы которые должны быть внутри контейнера */
    .loader-overlay {
        position: absolute !important;
        inset: 0 !important;
    }
}

/* ---- create-vacancy.php / edit-vacancy.php ---- */
@media (min-width: 600px) {

    /* Кнопки Черновик/Опубликовать — привязываем к контейнеру */
    .actions {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Уведомление об успехе — центрируем внутри контейнера */
    .success-notification {
        position: absolute !important;
        top: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(-100px) !important;
    }

    .success-notification.show {
        transform: translateX(-50%) translateY(0) !important;
    }
}

/* ---- chat.php / hr-chat.php ---- */
@media (min-width: 600px) {

    /* Поле ввода — прибито к низу как nav */
    body > .input-container {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        z-index: 100 !important;
    }

    /* Лоадер чата — на весь контейнер, не на весь экран */
    .chat-loader {
        position: absolute !important;
        inset: 0 !important;
        z-index: 10000 !important;
    }

    /* Модалка просмотра изображений — на весь контейнер */
    .image-modal {
        position: absolute !important;
        inset: 0 !important;
    }
}

/* ---- hr-chat.php: call panel bottom sheet ---- */
@media (min-width: 600px) {

    .call-overlay {
        position: absolute !important;
        inset: 0 !important;
    }

    .call-panel {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-height: 70% !important;
    }
}

/* ---- hr-applications.php / hr-candidates.php: CV модалка ---- */
@media (min-width: 600px) {

    .cv-modal-overlay {
        position: absolute !important;
        inset: 0 !important;
    }

    .cv-modal {
        max-height: 88% !important;
    }

    .cv-modal-body {
        max-height: calc(88% - 73px) !important;
    }

    /* filter dropdown тоже привязываем */
    .filter-overlay {
        position: absolute !important;
        inset: 0 !important;
    }

    .filter-global-dropdown {
        position: absolute !important;
    }
}

/* ---- hr-applications.php: кнопки CV/AI/Написать и модалка ---- */
@media (min-width: 600px) {

    /* Кнопки не должны схлопываться от max-width: 100% */
    .actions {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
    }

    .actions .btn {
        max-width: none !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    /* Модалка CV — overlay на весь body, скролл внутри */
    .cv-modal-overlay {
        position: fixed !important;
        inset: 0 !important;
        /* Ограничиваем по ширине контейнера через clip */
        clip-path: inset(0) !important;
    }

    .cv-modal {
        max-height: 88vh !important;
        width: 100% !important;
        max-width: 720px !important;
    }

    .cv-modal-body {
        overflow-y: auto !important;
        max-height: calc(88vh - 73px) !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .cv-modal-body::-webkit-scrollbar {
        width: 0 !important;
    }

    /* Toast уведомление */
    #saveToast {
        position: absolute !important;
        top: 76px !important;
        left: 16px !important;
        right: 16px !important;
    }
}

/* ---- fix: кнопки CV/AI/Написать в hr-applications ---- */
@media (min-width: 600px) {

    /* Отменяем глобальный max-width для flex-кнопок */
    .actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    .actions > .btn {
        max-width: none !important;
        width: auto !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }
}

/* ---- ФИНАЛЬНЫЙ фикс кнопок CV/AI/Написать ---- */
@media (min-width: 600px) {

    /* Перебиваем body * { max-width: 100% } специфичностью */
    body .actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }

    body .actions > button,
    body .actions > a {
        max-width: none !important;
        width: 0 !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    /* Также фиксим quick-btn на дашборде — та же проблема */
    body div[style*="display: flex"] > .quick-btn {
        max-width: none !important;
        flex: 1 !important;
    }
}

/* ---- ФИНАЛЬНЫЙ фикс наложения кнопок в hr-applications ---- */
@media (min-width: 600px) {

    /* Карточки не должны схлопываться по высоте */
    .app-card {
        height: auto !important;
        min-height: unset !important;
        overflow: visible !important;
        position: relative !important;
    }

    /* Убираем любое абсолютное/fixed позиционирование с .actions */
    .actions {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        margin-bottom: 15px !important;
    }

    .actions > button {
        position: relative !important;
        max-width: none !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
    }
}

/* ---- create-cv.php ---- */
@media (min-width: 600px) {

    .edits-counter {
        position: absolute !important;
        top: 80px !important;
        left: 16px !important;
        right: 16px !important;
    }

    .loading-screen {
        position: absolute !important;
        inset: 0 !important;
    }
}

/* ---- vacancy.php ---- */
@media (min-width: 600px) {

    .apply-footer {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        flex-shrink: 0 !important;
    }

    .modal {
        position: absolute !important;
        inset: 0 !important;
    }
}

/* ---- create-vacancy.php / edit-vacancy.php: кнопки внизу ---- */
@media (min-width: 600px) {

    body > .actions {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        flex-shrink: 0 !important;
        width: 100% !important;
    }

    body > .actions .actions-content {
        max-width: 100% !important;
        margin: 0 !important;
    }
}

/* ---- убираем пустой блок снизу на страницах без nav ---- */
@media (min-width: 600px) {

    /* Если нет nav но есть .actions как footer — body по высоте контента */
    body:not(:has(> nav)):not(:has(> .apply-footer)):not(:has(> .input-container)) {
        height: auto !important;
        min-height: calc(100vh - 48px) !important;
    }
}

/* ---- create-vacancy / страницы с .actions вместо nav ---- */
@media (min-width: 600px) {

    body:has(> .actions) {
        height: auto !important;
        min-height: calc(100vh - 48px) !important;
        overflow: visible !important;
    }

    body:has(> .actions) > main {
        overflow-y: visible !important;
        flex: 1 1 auto !important;
    }

    body:has(> .actions) > .actions {
        position: sticky !important;
        bottom: 0 !important;
    }
}

/* ---- create-vacancy: кнопки по центру + скролл ---- */
@media (min-width: 600px) {

    body:has(> .actions) {
        overflow-y: auto !important;
    }

    body:has(> .actions) > .actions {
        display: flex !important;
        justify-content: center !important;
    }

    body:has(> .actions) > .actions .actions-content {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        gap: 12px !important;
    }

    body:has(> .actions) > .actions .btn {
        flex: 1 1 0 !important;
        max-width: none !important;
    }
}