.svg-opac-50 img.card { opacity: 0.2; } 
.svg-opac-50:hover img.card { opacity: 0.5; } 
.svg-opac-50 svg.card { opacity: 0; } 
.svg-opac-50 .card { opacity: 0.8; } 
.svg-opac-100 .card { opacity: 1; } 
.svg-opac-100 { border: 1px solid #8B5CF6; }
.svg-not-100 { border: 1px solid #D1D5DB; }
.svg-not-100 .card { opacity: 1; }

.svg-opac-50 .pro { opacity: 1; }
.svg-opac-100 .pro { opacity: 0; }
.svg-not-100 .pro { opacity: 0; }

.click-animation { transition: transform 0.5s ease-out; } 
.click-animation:active { transform: scale(1.07); }</style>

div#chat-messages strong {
    font-weight: 500;
}

div#chat-messages p {    
    margin-top: 12px;
    margin-bottom: 5px;
}

div#chat-messages ol {    
    margin-top: 12px;
}

div#chat-messages ul {    
    list-style-type: disc;
     margin-left: 20px;
}

div#chat-messages li {
    margin-top: 0px;
    margin-bottom: 5px;
}


.preloader-logo-cycle {
    animation: logoCycle 8s infinite;
}

@keyframes logoCycle {
    0% { 
        opacity: 0;
    }
    30% { 
        opacity: 1;
    }
    85% { 
        opacity: 1;
    }
    100% { 
        opacity: 0;
    }
}

.preloader-bg-cycle {
    animation: bgCycle 8s infinite;
}

@keyframes bgCycle {
    0% { 
        opacity: 1;
    }
    20% { 
        opacity: 0.1;
    }
    45% { 
        opacity: 1;
    }
    100% { 
        opacity: 1;
    }
}






.card-left {animation: cardDanceLeft 4s infinite ease-in-out;}
.card-right {animation: cardDanceRight 4s infinite ease-in-out;}

@keyframes cardDanceLeft {
    0%,
    25% {transform: translateX(0) translateY(0) rotate(-4deg);}
    50%,
    75% {transform: translateX(-50px) translateY(0) rotate(-12deg);}
    100% {transform: translateX(0) translateY(0) rotate(-4deg);}
}

@keyframes cardDanceRight {
    0%,
    25% {transform: translateX(0) translateY(0) rotate(4deg);}
    50%,
    75% {transform: translateX(50px) translateY(0) rotate(12deg);}
    100% {transform: translateX(0) translateY(0) rotate(4deg);}
}

/* Начальные состояния изображений */
.card-left .image-1,
.card-right .image-1 {
    opacity: 1;
    /* Первое изображение видимо изначально */
    animation: imageSync1 16s infinite;
    animation-delay: 0.5s;
}

.card-left .image-2,
.card-right .image-2 {
    opacity: 0;
    /* Остальные скрыты */
    animation: imageSync2 16s infinite;
    animation-delay: 0.5s;
}

.card-left .image-3,
.card-right .image-3 {
    opacity: 0;
    /* Остальные скрыты */
    animation: imageSync3 16s infinite;
    animation-delay: 0.5s;
}

.card-left .image-4,
.card-right .image-4 {
    opacity: 0;
    /* Остальные скрыты */
    animation: imageSync4 16s infinite;
    animation-delay: 0.5s;
}

/* Плавные crossfade переходы между изображениями */
@keyframes imageSync1 {
    0% {opacity: 1;}
    22% {opacity: 1;}
    25% {opacity: 0;}
    97% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes imageSync2 {
    0% {opacity: 0;}
    22% {opacity: 0;}
    25% {opacity: 1;}
    47% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 0;}
}

@keyframes imageSync3 {
    0% {opacity: 0;}
    47% {opacity: 0;}
    50% {opacity: 1;}
    72% {opacity: 1;}
    75% {opacity: 0;}
    100% {opacity: 0;}
}

@keyframes imageSync4 {
    0% {opacity: 0;}
    72% {opacity: 0;}
    75% {opacity: 1;}
    97% {opacity: 1;}
    100% {opacity: 0;}
}

.arrow {
    animation: arrowFadeInOut 4s infinite ease-in-out;
    animation-delay: 0.5s;
}

@keyframes arrowFadeInOut {
    0% {opacity: 0;}
    20% {opacity: 0;}
    30% {opacity: 1;}
    50% {opacity: 1;}
    75% {opacity: 0;}
    100% {opacity: 0;}
}




#brushSize {
  -webkit-appearance: none;
  width: 160px; /* ширина как у вас в классе w-40 */
  height: 8px; /* чуть больше для удобства */
  background: #d1d5db; /* gray-300 для трека */
  border-radius: 12px;
  cursor: pointer;
}

/* Трек для Firefox */
#brushSize::-moz-range-track {
  background: #d1d5db;
  border-radius: 12px;
  height: 8px;
}

/* Бегунок для Chrome, Safari, Edge */
#brushSize::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  border: 1px solid #d1d5db;
  margin-top: -4px; /* Центрирование бегунка по высоте трека */
  cursor: pointer;
  transition: background-color 0.3s;
}

#brushSize::-webkit-slider-thumb:hover {
  background-color: #f3f4f6; /* Светлый оттенок при наведении */
}

/* Бегунок для Firefox */
#brushSize::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  border: 1px solid #d1d5db;
  cursor: pointer;
  transition: background-color 0.3s;
}

#brushSize::-moz-range-thumb:hover {
  background-color: #f3f4f6;
}