/* Подключение шрифта */
@font-face {
    font-family: 'SF Pro';
    src: url('../../uploads/font/base-Light.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Soyuz Grotesk';
    src: url('../../uploads/font/additional-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* Переменные для легкого переключения вариантов */
:root {
    --top-offset: max(24px, env(safe-area-inset-top, 0px)); /* Учитываем safe area сразу */
    --side-padding: 19.76px; /* Переменная для отступа с боков */
    
    /* Safe area insets для iPhone с вырезами */
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
}

/* Специальный класс для полноэкранного режима */
.fullscreen-mode {
    --top-offset: max(86px, var(--safe-area-inset-top)); /* Учитываем safe area */
}

/* Базовые стили */
p, li, ul, pre, div, h1, h2, h3, h4, h5, h6, figure, blockquote, figcaption {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    -webkit-font-smoothing: antialiased;
    /* Отключаем tap highlight эффект на всех элементах */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
/* Глобальная блокировка bounce/rubber band эффекта */
    overscroll-behavior: none;
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
    -webkit-overscroll-behavior: none;
}

html {
    font-family: Inter;
    font-size: 16px;
    line-height: 1.15;
    height: 100dvh !important; /* Используем dvh вместо vh для iPhone */
    /* ИСПРАВЛЕНИЕ: добавляю фон для html */
    background: #f7f3ff !important;
    /* Скрыть скроллбар для IE/Edge */
    -ms-overflow-style: none !important;
    /* Скрыть скроллбар для Firefox */
    scrollbar-width: none !important;
    /* УСИЛЕННАЯ блокировка pull-to-refresh и overscroll эффектов */
    overscroll-behavior: none !important;
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: none !important;
    -webkit-overscroll-behavior: none !important;
    /* ФИКС: меняю touch на auto чтобы убрать bounce */
    -webkit-overflow-scrolling: auto !important;
    /* Мягкая блокировка bounce эффекта */
    touch-action: pan-y !important;
    -webkit-touch-action: pan-y !important;
}
/* Скрыть скроллбар для Chrome, Safari, Opera */
html::-webkit-scrollbar {
    display: none !important;
}

body {
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.15;
    color: var(--dl-color-theme-neutral-dark);
    /* ИСПРАВЛЕНИЕ: заменяю неработающую переменную на конкретный цвет */
    background: #f7f3ff !important;
    fill: var(--dl-color-theme-neutral-dark);
    /* ФИКС: используем dvh вместо vh */
    min-height: 100dvh !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    margin: 0;
    margin-top: 0 !important; /* ФИКС: принудительно убираем margin-top браузера */
    /* Скрыть скроллбар для IE/Edge */
    -ms-overflow-style: none !important;
    /* Скрыть скроллбар для Firefox */
    scrollbar-width: none !important;
    /* УСИЛЕННАЯ блокировка pull-to-refresh и overscroll эффектов */
    overscroll-behavior: none !important;
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: none !important;
    -webkit-overscroll-behavior: none !important;
    /* ФИКС: меняю touch на auto чтобы убрать bounce */
    -webkit-overflow-scrolling: auto !important;
    /* Мягкая блокировка bounce эффекта для мобильных браузеров */
    touch-action: pan-y !important;
    -webkit-touch-action: pan-y !important;
    /* Дополнительная защита от bounce */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* ФИКС: убираю relative position который может вызывать bounce */
    position: static !important;
}

/* Скрыть скроллбар для Chrome, Safari, Opera */
body::-webkit-scrollbar {
    display: none !important;
}

/* Основной контейнер */
.container {
    position: relative;
    width: 390px;
    height: 906px;
    background: #f7f3ff; /* Цвет фона как в профиле */
    border-radius: 32px;
    margin: 0 auto;
    overflow: hidden;
    /* Скрыть скроллбар для IE/Edge */
    -ms-overflow-style: none !important;
    /* Скрыть скроллбар для Firefox */
    scrollbar-width: none !important;
}

/* Скрыть скроллбар для Chrome, Safari, Opera */
.container::-webkit-scrollbar {
    display: none !important;
}

/* Группа с ДБТ-карточкой */
.frame-group3 {
    position: relative;
    width: 100%;
    max-width: 404.01416015625px;
    height: 230px;
    display: flex;
    align-items: flex-start;
    flex-shrink: 1;
    margin: 0 auto;
    transform: none;
}

/* Прямоугольник карточки */
.overlap-group::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    width: 346.88px;
    height: 110.16px;
    left: 13px;
    top: var(--top-offset);
    border: 1px solid #000000;
    border-radius: 16px;
}

/* Контейнер для содержимого DBT-карточки */
.dbt-card-content {
    position: absolute;
    width: auto;
    left: calc(24px + 110px + 15px);
    top: calc(var(--top-offset) + 110.16px / 2); /* Позиционирование по вертикальному центру */
    transform: translateY(-50%); /* Смещение вверх для центрирования */
    z-index: 1;
}

/* Текст "Заполнена на сегодня" */
.text-wrapper-3 {
    position: relative;
    width: auto;
    height: auto;
    font-family: 'SF Pro';
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 22px;
    letter-spacing: -0.4px;
    color: #E41C83;
}

/* Текст "ДБТ-карточка" */
.text-wrapper-4 {
    position: relative;
    width: auto;
    height: auto;
    font-family: 'SF Pro';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.4px;
    color: #000000;
    margin-bottom: 5px;
}

/* Контейнер для статуса */
.dbt-card-status-container {
    width: 100%;
}

/* Изображение */
.element {
    position: absolute;
    width: 110px;
    height: 121px;
    left: 24px;
    top: var(--top-offset);
    z-index: 1;
}

/* Создаю новый flex-контейнер для основного содержимого */
.main-content-flex {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(var(--top-offset) + 110.16px + 32px);
    width: 100%;
}

/* Модифицирую стиль заголовка "Аффирмация дня" */
.text-wrapper-2 {
    position: relative;
    width: 202.4px;
    height: 22px;
    margin-left: 21px;
    margin-top: 0; /* нет отступа, так как он уже учтен в позиции контейнера */
    font-family: 'SF Pro';
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 22px;
    letter-spacing: -0.4px;
    color: #000000;
    text-align: left;
}

/* Модифицирую стиль текста аффирмации */
.p {
    position: relative;
    width: 344.55px;
    /* Удаляю фиксированную высоту */
    margin-left: 21px;
    margin-top: 0px; /* Уменьшаю отступ между заголовком и текстом */
    margin-bottom: 16.6px; /* соответствует отступу перед блоком навыков */
    font-family: 'Soyuz Grotesk';
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 35px;
    letter-spacing: -0.4px;
    color: #000000;
}

/* Модифицирую стиль блока навыков */
.element-2 {
    position: relative;
    width: 100%;
    margin-top: 0; /* так как отступ уже учтен в margin-bottom текста аффирмации */
    min-height: 142.16px; /* 22px + 8.5px + 110.16px для сохранения высоты блока */
}

/* Сохраняю позиционирование заголовка "Навыки" относительно блока навыков */
.text-wrapper-13 {
    position: absolute;
    left: 21px;
    top: 0;
    font-family: 'SF Pro';
    font-style: normal;
    font-weight: 400;
    font-size: 19.2px;
    line-height: 26px;
    letter-spacing: -0.4px;
    color: #000000;
}

/* Адаптирую стиль прямоугольника навыков */
.element-2::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    width: calc(100% - (var(--side-padding) * 2));
    height: 110.16px;
    left: var(--side-padding);
    top: calc(22px + 8.5px);
    border: 1px solid #000000;
    border-radius: 16px;
    z-index: 0;
}

/* Адаптирую стиль блока изображения навыка */
.element-2 .skill-image {
    position: absolute;
    left: calc(19.76px + (346.88px / 3) / 2);
    top: calc(22px + 8.5px + (110.16px / 2));
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* Адаптирую стиль для блока навыка с текстом и подпиской */
.element-2 .skill-block {
    position: absolute;
    left: calc(19.76px + 130.24px);
    top: calc(22px + 8.5px + (110.16px / 2));
    transform: translateY(-50%);
    z-index: 1;
}

/* Адаптирую прогресс-бар */
.progress-bar {
    position: absolute;
    max-width: calc(100% - (var(--side-padding) * 2) - 44px); /* Добавляем 4px отступ */
    height: 4px;
    left: calc(var(--side-padding) + 20px);
    bottom: 2px;
    background: #B584FF;
    border-radius: 3px;
    z-index: 1;
}

.overlap-2 {
    position: absolute;
    top: 300px;
    width: 100%;
}

/* Адаптивность - только для центрирования на разных устройствах */
@media screen and (max-width: 480px) {
    body {
        align-items: center;
        padding-top: 0;
        overflow-x: hidden;
    }
    
    .container {
        margin: 0 auto;
        width: 100%;
        max-width: 390px;
    }
}

/* Адаптивность ТОЛЬКО для телефонов с высоким разрешением */
@media only screen and (-webkit-min-device-pixel-ratio: 2), 
       only screen and (min-resolution: 192dpi) {
    .overlap-group::before {
        left: 50%;
        transform: translateX(-50%);
        width: 346.88px;
    }
    
    .element {
        left: calc(50% - 160px);
    }
    
    .dbt-card-content {
        left: calc(50% - 47px);
        top: calc(var(--top-offset) + 110.16px / 2);
        transform: translateY(-50%);
    }
}

/* Добавляю стили для текстовых элементов в блоке навыков */
.element-2 .skill-block .text-wrapper-5 {
    width: 202.4px;
    height: auto;
    font-family: 'SF Pro';
    font-style: normal;
    font-weight: 400;
    font-size: 19.2px;
    line-height: 26px;
    letter-spacing: -0.4px;
    color: #000000;
    display: block;
    margin-bottom: 0;
}

.element-2 .skill-block .text-wrapper-9 {
    width: 111px;
    height: 25px;
    font-family: 'SF Pro';
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 22px;
    letter-spacing: -0.4px;
    color: #9147FF;
    display: block;
    margin-top: 0;
}

/* Анимации для плавного появления элементов */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Базовый класс для анимации */
.animate-fade-in {
    animation: fadeIn 0.8s ease forwards;
    opacity: 0;
}

/* Разные задержки для элементов */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }

/* Press animation for diary tabs */
@keyframes tabPress {
  0% { transform: scale(1); }
  50% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.tab-press {
  display: inline-block;
  animation: tabPress 0.2s ease;
}

/* ===== ФИКС БЕЛОЙ ОБЛАСТИ ВНИЗУ В TELEGRAM WEBAPP НА iOS ===== */
@supports (-webkit-touch-callout: none) {
    html, body {
        overscroll-behavior: none !important;
        overscroll-behavior-y: none !important;
        -webkit-overscroll-behavior: none !important;
    }
    
    body {
        position: static !important;
        min-height: 100dvh !important;
    }
    
    /* Мягкий фикс для длинных экранов iPhone */
    @media only screen and (min-width: 430px) and (min-height: 900px) {
        body {
            /* Убрано дублирование */
        }
    }
}

/* ===== ПОДДЕРЖКА SAFE AREA ДЛЯ ВСЕХ УСТРОЙСТВ ===== */
@supports (padding: max(0px)) {
    .safe-area-container {
        padding-top: max(var(--top-offset), var(--safe-area-inset-top));
        padding-left: max(var(--side-padding), var(--safe-area-inset-left));
        padding-right: max(var(--side-padding), var(--safe-area-inset-right));
        padding-bottom: max(20px, var(--safe-area-inset-bottom));
    }
}

/* ===== ОФИЦИАЛЬНЫЕ TELEGRAM WEBAPP CSS ПЕРЕМЕННЫЕ ===== */
html, body {
    /* ФИКС: используем dvh вместо vh */
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    padding-top: var(--tg-safe-area-inset-top, 0px) !important;
    padding-left: var(--tg-safe-area-inset-left, 0px) !important;
    padding-right: var(--tg-safe-area-inset-right, 0px) !important;
}
html {
    height: var(--tg-viewport-stable-height, 100vh) !important;
}