body {
  width: 100%;
  height: 100%;
}

.slideout-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 256px;
  min-height: 100vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  z-index: 0;
  display: none;
}

.slideout-menu-left {
  left: 0;
}

.slideout-menu-right {
  right: 0;
}

.slideout-panel {
  position: relative;
  z-index: 1;
  will-change: transform;
  background-color: #FFF; /* A background-color is required */
  min-height: 100vh;
}


.slideout-open .slideout-menu {
  display: block;
}

/* трек (фон) */
.noUi-target {
  background: rgba(255,255,255,0.4);
  border: none;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.08);
  border-radius: 999px;
}

/* активная часть */
.noUi-connect {
  background: linear-gradient(
    135deg,
    #8EC5FC,
    #A6A6FF,
    #E0C3FC
  );
  box-shadow: 0 4px 12px rgba(120,100,200,0.35);
}

/* ручка */
.noUi-handle {
  background: white;
  border: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  top: -6px;
}

/* убрать лишние полоски внутри handle */
.noUi-handle:before,
.noUi-handle:after {
  display: none;
}

.noUi-horizontal .noUi-handle {
  width: 28px;
  height: 28px;
}

.typing-dot {
    animation: ai-chat-typing 1.2s infinite ease-in-out;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.15s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes ai-chat-typing {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: 0.35;
    }
    40% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .typing-dot {
        animation: ai-chat-typing-fade 1.5s infinite ease-in-out;
    }

    @keyframes ai-chat-typing-fade {
        0%, 100% {
            opacity: 0.35;
        }
        50% {
            opacity: 1;
        }
    }
}

/* Модальные окна: корректный скролл на смартфонах */
@media (max-width: 767px) {
    #app-modal {
        display: none;
        align-items: flex-start !important;
        justify-content: center !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        padding: 12px !important;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    #app-modal:not(.hidden) {
        display: flex !important;
    }

    #app-modal > [role="dialog"] {
        display: flex !important;
        flex-direction: column !important;
        flex: 0 0 auto !important;

        width: 100% !important;
        max-height: calc(100dvh - 24px) !important;
        margin: 0 !important;
    }

    #app-modal-body {
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;

        padding: 16px !important;

        -webkit-overflow-scrolling: touch;
    }
}

/* Бесшовный детский фон только для модального окна */
#app-modal > [role="dialog"] {
    background-color: #eef8ff;
    background-image: url("../images/modal-bg.png");
    background-repeat: repeat;
    background-position: center;
    background-size: 360px 360px;
}

/*
 * Белая полупрозрачная поверхность над рисунком:
 * фон видно, но форма и текст не теряются.
 */

/* На телефоне рисунок чуть мельче и заметнее */
@media (max-width: 767px) {
    #app-modal > [role="dialog"] {
        background-size: 250px 250px;
    }

    #app-modal-body {
        background: rgba(255, 255, 255, 0.68);
    }
}

/*****/

/* Бесшовный детский фон только для модального окна */
#app-modal > [role="dialog"] {
    background-color: #eef8ff;
    background-image: url("../images/modal-bg.png");
    background-repeat: repeat;
    background-position: center;
    background-size: 360px 360px;
}



#app-modal-body {
    background: rgba(255, 255, 255, 0);

}

/* На телефоне рисунок чуть мельче и заметнее */
@media (max-width: 767px) {
    #app-modal > [role="dialog"] {
        background-size: 250px 250px;
    }

}

/* Непрозрачные белые поля формы внутри модалки */
input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    background-color: #ffffff !important;
    opacity: 1 !important;
}

/* Поле Flatpickr, если используется дата */
.flatpickr-input,
input.flatpickr-input {
    background-color: #ffffff !important;
}

.child_bg {
    background-image: url("../images/modal-bg.png");
    background-color: #ffffff;
    background-repeat: repeat;
    background-size: 360px auto;
}

.feedback-prompt {
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    width: min(380px, calc(100vw - 2rem));
    transform: translateY(12px);
}

.feedback-prompt-visible {
    opacity: 1;
    transform: translateY(0);
}

.feedback-star {
    color: #d1d5db;
    cursor: pointer;
    touch-action: manipulation;
}

.feedback-star[data-preview="true"],
.feedback-star[data-active="true"] {
    color: #fbbf24;
}

@media (max-width: 767px) {
    .feedback-prompt {
        right: max(0.75rem, env(safe-area-inset-right));
        bottom: max(0.75rem, env(safe-area-inset-bottom));
        left: max(0.75rem, env(safe-area-inset-left));
        width: auto;
        max-height: calc(100dvh - 1.5rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}