/* Login Page Optimized Styles */

body {
  margin: 0;
  padding: 0;
  background-color: #f8f9fa;
  overflow-x: hidden;
}

/* ===== Изящные плавающие волны ===== */
.animated-lines-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Плавные волнистые формы */
.animated-line {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
}

/* Большие мягкие круги-волны */
.line-1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgba(255, 152, 0, 0.12) 0%, rgba(255, 152, 0, 0.03) 50%, transparent 70%);
  left: -100px;
  top: 20%;
  animation: floatWave1 25s ease-in-out infinite;
}

.line-2 {
  width: 300px;
  height: 300px;
  background: radial-gradient(ellipse at center, rgba(255, 120, 0, 0.10) 0%, rgba(255, 120, 0, 0.02) 50%, transparent 70%);
  right: -80px;
  top: 10%;
  animation: floatWave2 30s ease-in-out infinite;
  animation-delay: 2s;
}

.line-3 {
  width: 250px;
  height: 250px;
  background: radial-gradient(ellipse at center, rgba(255, 152, 0, 0.11) 0%, rgba(255, 152, 0, 0.03) 50%, transparent 70%);
  left: 30%;
  bottom: 20%;
  animation: floatWave3 22s ease-in-out infinite;
  animation-delay: 5s;
}

.line-4 {
  width: 350px;
  height: 350px;
  background: radial-gradient(ellipse at center, rgba(255, 180, 0, 0.09) 0%, rgba(255, 180, 0, 0.02) 50%, transparent 70%);
  right: 10%;
  bottom: 30%;
  animation: floatWave1 28s ease-in-out infinite;
  animation-delay: 8s;
}

.line-5 {
  width: 200px;
  height: 200px;
  background: radial-gradient(ellipse at center, rgba(255, 140, 0, 0.10) 0%, rgba(255, 140, 0, 0.03) 50%, transparent 70%);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: floatWavePulse 20s ease-in-out infinite;
}

.line-6 {
  width: 280px;
  height: 280px;
  background: radial-gradient(ellipse at center, rgba(255, 160, 0, 0.08) 0%, rgba(255, 160, 0, 0.02) 50%, transparent 70%);
  left: 60%;
  top: 5%;
  animation: floatWave2 26s ease-in-out infinite;
  animation-delay: 12s;
}

.line-7 {
  width: 320px;
  height: 320px;
  background: radial-gradient(ellipse at center, rgba(255, 135, 10, 0.10) 0%, rgba(255, 135, 10, 0.03) 50%, transparent 70%);
  left: 15%;
  top: 60%;
  animation: floatWave3 24s ease-in-out infinite;
  animation-delay: 3s;
}

.line-8 {
  width: 260px;
  height: 260px;
  background: radial-gradient(ellipse at center, rgba(255, 170, 40, 0.09) 0%, rgba(255, 170, 40, 0.02) 50%, transparent 70%);
  right: 25%;
  bottom: 15%;
  animation: floatWave1 29s ease-in-out infinite;
  animation-delay: 16s;
}

.line-9 {
  width: 340px;
  height: 340px;
  background: radial-gradient(ellipse at center, rgba(255, 190, 60, 0.11) 0%, rgba(255, 190, 60, 0.03) 50%, transparent 70%);
  left: 70%;
  top: 40%;
  animation: floatWave2 27s ease-in-out infinite;
  animation-delay: 7s;
}

.line-10 {
  width: 220px;
  height: 220px;
  background: radial-gradient(ellipse at center, rgba(255, 145, 25, 0.10) 0%, rgba(255, 145, 25, 0.03) 50%, transparent 70%);
  right: 5%;
  top: 65%;
  animation: floatWavePulse 23s ease-in-out infinite;
  animation-delay: 4s;
}

.line-11 {
  width: 290px;
  height: 290px;
  background: radial-gradient(ellipse at center, rgba(255, 165, 35, 0.09) 0%, rgba(255, 165, 35, 0.02) 50%, transparent 70%);
  left: 5%;
  bottom: 10%;
  animation: floatWave3 31s ease-in-out infinite;
  animation-delay: 18s;
}

.line-12 {
  width: 310px;
  height: 310px;
  background: radial-gradient(ellipse at center, rgba(255, 155, 20, 0.10) 0%, rgba(255, 155, 20, 0.03) 50%, transparent 70%);
  right: 40%;
  top: 25%;
  animation: floatWave1 25s ease-in-out infinite;
  animation-delay: 10s;
}

/* Плавные анимации парения */
@keyframes floatWave1 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.75;
  }
  25% {
    transform: translate(40px, -30px) scale(1.1);
    opacity: 0.95;
  }
  50% {
    transform: translate(-20px, 20px) scale(0.95);
    opacity: 0.65;
  }
  75% {
    transform: translate(30px, 40px) scale(1.05);
    opacity: 0.85;
  }
}

@keyframes floatWave2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.65;
  }
  33% {
    transform: translate(-50px, 30px) scale(1.15);
    opacity: 0.85;
  }
  66% {
    transform: translate(30px, -40px) scale(0.9);
    opacity: 0.55;
  }
}

@keyframes floatWave3 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0.75;
  }
  50% {
    transform: translate(60px, -50px) rotate(180deg) scale(1.2);
    opacity: 0.95;
  }
}

@keyframes floatWavePulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.45;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0.75;
  }
}

/* ===== Волнистые изящные линии ===== */
.wavy-line {
  position: absolute;
  width: 100%;
  height: 100px;
  pointer-events: none;
  opacity: 0;
}

.wavy-line-1 {
  top: 15%;
  animation: wavyFlow1 35s ease-in-out infinite;
}

.wavy-line-2 {
  top: 45%;
  animation: wavyFlow2 40s ease-in-out infinite;
  animation-delay: 5s;
}

.wavy-line-3 {
  top: 70%;
  animation: wavyFlow3 45s ease-in-out infinite;
  animation-delay: 10s;
}

.wavy-line-4 {
  top: 30%;
  animation: wavyFlow4 38s ease-in-out infinite;
  animation-delay: 15s;
}

.wavy-line-5 {
  top: 55%;
  animation: wavyFlow5 42s ease-in-out infinite;
  animation-delay: 20s;
}

.wavy-line-6 {
  top: 22%;
  animation: wavyFlow6 36s ease-in-out infinite;
  animation-delay: 8s;
}

.wavy-line-7 {
  top: 80%;
  animation: wavyFlow7 48s ease-in-out infinite;
  animation-delay: 25s;
}

.wavy-line-8 {
  top: 38%;
  animation: wavyFlow8 33s ease-in-out infinite;
  animation-delay: 12s;
}

.wavy-line-9 {
  top: 62%;
  animation: wavyFlow1 37s ease-in-out infinite;
  animation-delay: 18s;
}

.wavy-line-10 {
  top: 18%;
  animation: wavyFlow3 44s ease-in-out infinite;
  animation-delay: 28s;
}

.wavy-line-11 {
  top: 88%;
  animation: wavyFlow5 39s ease-in-out infinite;
  animation-delay: 32s;
}

.wavy-line-12 {
  top: 50%;
  animation: wavyFlow2 41s ease-in-out infinite;
  animation-delay: 22s;
}

.wavy-line-13 {
  top: 8%;
  animation: wavyFlow7 46s ease-in-out infinite;
  animation-delay: 35s;
}

.wavy-line-14 {
  top: 75%;
  animation: wavyFlow4 34s ease-in-out infinite;
  animation-delay: 16s;
}

/* Анимации волнистых линий */
@keyframes wavyFlow1 {
  0%, 100% {
    opacity: 0;
    transform: translateX(-10%) translateY(0px);
  }
  10% {
    opacity: 0.9;
  }
  50% {
    transform: translateX(0%) translateY(-15px);
    opacity: 1;
  }
  90% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateX(10%) translateY(0px);
  }
}

@keyframes wavyFlow2 {
  0%, 100% {
    opacity: 0;
    transform: translateX(10%) translateY(0px);
  }
  10% {
    opacity: 0.75;
  }
  50% {
    transform: translateX(0%) translateY(20px);
    opacity: 1;
  }
  90% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
    transform: translateX(-10%) translateY(0px);
  }
}

@keyframes wavyFlow3 {
  0%, 100% {
    opacity: 0;
    transform: translateX(-5%) translateY(10px) scaleY(1);
  }
  15% {
    opacity: 0.85;
  }
  50% {
    transform: translateX(5%) translateY(-10px) scaleY(1.2);
    opacity: 1;
  }
  85% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translateX(10%) translateY(10px) scaleY(1);
  }
}

@keyframes wavyFlow4 {
  0%, 100% {
    opacity: 0;
    transform: translateX(8%) translateY(-5px);
  }
  12% {
    opacity: 0.65;
  }
  50% {
    transform: translateX(-3%) translateY(12px);
    opacity: 0.95;
  }
  88% {
    opacity: 0.65;
  }
  100% {
    opacity: 0;
    transform: translateX(-10%) translateY(-5px);
  }
}

@keyframes wavyFlow5 {
  0%, 100% {
    opacity: 0;
    transform: translateX(-12%) translateY(8px);
  }
  10% {
    opacity: 0.85;
  }
  50% {
    transform: translateX(4%) translateY(-18px);
    opacity: 1;
  }
  90% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translateX(12%) translateY(8px);
  }
}

@keyframes wavyFlow6 {
  0%, 100% {
    opacity: 0;
    transform: translateX(6%) translateY(-8px) scaleY(1);
  }
  14% {
    opacity: 0.75;
  }
  50% {
    transform: translateX(-6%) translateY(15px) scaleY(1.15);
    opacity: 1;
  }
  86% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
    transform: translateX(-12%) translateY(-8px) scaleY(1);
  }
}

@keyframes wavyFlow7 {
  0%, 100% {
    opacity: 0;
    transform: translateX(15%) translateY(5px);
  }
  8% {
    opacity: 0.9;
  }
  50% {
    transform: translateX(-8%) translateY(-20px);
    opacity: 1;
  }
  92% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateX(-15%) translateY(5px);
  }
}

@keyframes wavyFlow8 {
  0%, 100% {
    opacity: 0;
    transform: translateX(-8%) translateY(-12px) scaleY(0.95);
  }
  11% {
    opacity: 0.7;
  }
  50% {
    transform: translateX(7%) translateY(8px) scaleY(1.1);
    opacity: 0.95;
  }
  89% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translateX(15%) translateY(-12px) scaleY(0.95);
  }
}

.page-content {
  min-height: 100vh;
  padding-bottom: 160px;
  padding-top: 120px;
}

/* Логотип */
.logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  margin-top: -100px;
}

.logo-container img.logo {
  max-height: 60px;
  margin: 0 15px;
}

/* Кнопки */
.btn-primary {
  background-color: #ff9800;
  border-color: #ff9800;
  color: white;
}

.btn-primary:hover {
  background-color: #e68900;
  border-color: #e68900;
}

label {
  color: #ff9800;
}

/* Форма входа */
.login-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 30px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  position: relative;
  z-index: 1;
}


/* Модальное окно игры */
#gameModal .modal-body {
  position: relative;
  padding: 0;
  background: linear-gradient(45deg, #0f0f23, #1a1a2e, #16213e);
  background-size: 400% 400%;
  animation: darkGradientBackground 20s ease infinite;
}

@keyframes darkGradientBackground {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

#gameContainer {
  position: relative;
  width: 100%;
  height: 345px;
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 30%, #0f3460 60%, #2c3e50 100%);
  background-size: 100% 300%;
  animation: darkSkyMovement 25s linear infinite;
  overflow: hidden;
  border: 2px solid #34495e;
}

/* Модальное окно пароля - светлый стиль */
#senderAccessModal .modal-content {
  background-color: #fff;
  border: 2px solid #ff9800;
  border-radius: 12px;
}

#senderAccessModal .modal-header {
  border-bottom: 1px solid #ff9800;
  background: linear-gradient(135deg, #fff 0%, #fff8f0 100%);
}

#senderAccessModal .modal-body {
  padding: 25px;
  background-color: #fff;
}

#senderAccessModal .modal-footer {
  border-top: 1px solid #ff9800;
  background: #fff8f0;
}

@keyframes darkSkyMovement {
  0% { background-position: 0% 0%; }
  100% { background-position: 0% -100%; }
}

/* Капибара-игрок */
.character {
  position: absolute;
  bottom: 0;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #ff9800, #ff6600);
  border-radius: 50%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
  transition: transform 0.2s ease-out;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
  will-change: transform, filter;
}

.character::before {
  content: '🦫';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
  transition: inherit;
}

/* Повороты персонажа */
.character.face-left {
  transform: scaleX(-1);
}

.character.face-right {
  transform: scaleX(1);
}

/* Анимация движения (покачивание) */
.character.moving {
  animation: characterWalk 0.4s ease-in-out infinite;
}

@keyframes characterWalk {
  0%, 100% {
    transform: scaleX(1) translateY(0) rotate(0deg);
  }
  50% {
    transform: scaleX(1) translateY(-3px) rotate(-2deg);
  }
}

.character.moving.face-left {
  animation: characterWalkLeft 0.4s ease-in-out infinite;
}

@keyframes characterWalkLeft {
  0%, 100% {
    transform: scaleX(-1) translateY(0) rotate(0deg);
  }
  50% {
    transform: scaleX(-1) translateY(-3px) rotate(2deg);
  }
}

.character.jumping.face-right {
  animation: playerJumpRotationRight 0.6s ease-out;
}

.character.jumping.face-left {
  animation: playerJumpRotationLeft 0.6s ease-out;
}

@keyframes playerJumpRotationRight {
  0% { transform: scaleX(1) rotate(0deg); filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5)); }
  50% { transform: scaleX(1) rotate(180deg); filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8)); }
  100% { transform: scaleX(1) rotate(360deg); filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3)); }
}

@keyframes playerJumpRotationLeft {
  0% { transform: scaleX(-1) rotate(0deg); filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5)); }
  50% { transform: scaleX(-1) rotate(-180deg); filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8)); }
  100% { transform: scaleX(-1) rotate(-360deg); filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3)); }
}

/* Препятствия */
.obstacle, .dotObstacle {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
  will-change: left;
}

.obstacle { bottom: 0; }
.dotObstacle { top: 0; }

.laser-obstacle {
  position: absolute;
  width: 4px;
  background: linear-gradient(90deg, #ff0000, #ff6666, #ff0000);
  box-shadow: 0 0 20px #ff0000, inset 0 0 10px #ff0000;
  animation: laserPulse 0.3s ease-in-out infinite alternate;
  z-index: 1;
}

@keyframes laserPulse {
  0% { opacity: 0.8; transform: scaleX(1); }
  100% { opacity: 1; transform: scaleX(1.2); }
}

.ice-obstacle {
  position: absolute;
  border-radius: 8px;
  background: linear-gradient(135deg, #2c3e50, #34495e, #3498db);
  border: 2px solid #1abc9c;
  box-shadow: 0 0 15px rgba(26, 188, 156, 0.6);
  animation: darkIceShimmer 2s ease-in-out infinite;
  z-index: 1;
}

@keyframes darkIceShimmer {
  0%, 100% { box-shadow: 0 0 15px rgba(26, 188, 156, 0.6); }
  50% { box-shadow: 0 0 25px rgba(26, 188, 156, 0.9); }
}

.sticky-obstacle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #9b59b6, #8e44ad);
  border: 3px solid #663399;
  animation: darkStickyBounce 1s ease-in-out infinite;
  z-index: 1;
  box-shadow: 0 0 10px rgba(155, 89, 182, 0.5);
}

@keyframes darkStickyBounce {
  0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(155, 89, 182, 0.5); }
  50% { transform: scale(1.1); box-shadow: 0 0 15px rgba(155, 89, 182, 0.8); }
}

/* UI элементы игры */
#scoreDisplay {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  z-index: 3;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

#jumpCountDisplay {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  z-index: 3;
}

#comboDisplay {
  position: absolute;
  top: 35px;
  right: 10px;
  color: #ffeb3b;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  z-index: 3;
}

/* Бонусы */
.powerup {
  position: absolute;
  border-radius: 50%;
  animation: powerupFloat 2s ease-in-out infinite;
  z-index: 2;
  will-change: transform;
}

@keyframes powerupFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes darkCoinFloat {
  0%, 100% { transform: translateY(0px) scale(1); filter: brightness(1); }
  50% { transform: translateY(-8px) scale(1.1); filter: brightness(1.2); }
}

.magnet-powerup {
  background: radial-gradient(circle, #e91e63, #ad1457);
  box-shadow: 0 0 15px rgba(233, 30, 99, 0.7);
}

.jetpack-powerup {
  background: radial-gradient(circle, #2196f3, #1565c0);
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.7);
}

.slowmotion-powerup {
  background: radial-gradient(circle, #9c27b0, #6a1b9a);
  box-shadow: 0 0 15px rgba(156, 39, 176, 0.7);
}

.doublepoints-powerup {
  background: radial-gradient(circle, #ff9800, #ef6c00);
  box-shadow: 0 0 15px rgba(255, 152, 0, 0.7);
}

.shield-powerup {
  background: radial-gradient(circle, #00bcd4, #00838f);
  box-shadow: 0 0 15px rgba(0, 188, 212, 0.7);
}

/* Частицы */
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ffd700;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  animation: particleExplode 0.6s ease-out forwards;
}

@keyframes particleExplode {
  0% { 
    opacity: 1; 
    transform: scale(1) translate(0, 0); 
  }
  100% { 
    opacity: 0; 
    transform: scale(0.3) translate(var(--particle-x, 0), var(--particle-y, 0)); 
  }
}

@keyframes trailFade {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.3); }
}

/* Футер */
footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 20px 0 100px;
  background-color: #ff9800;
  text-align: center;
  color: #fff;
  font-size: 14px;
  overflow: hidden;
  z-index: 999;
}

.character-legacy {
  position: absolute;
  bottom: 0;
  width: 150px;
  height: 150px;
  animation: moveCharacter 10s linear infinite;
  z-index: 2;
  will-change: left;
}

@keyframes moveCharacter {
  0%   { left: -150px; }
  100% { left: 100%; }
}

.character-legacy > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
}

.char1, .char2, .char3 {
  background: radial-gradient(circle, #ff9800, #ff6600);
  border-radius: 50%;
}

.char1::before {
  content: '🦫';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 100px;
  animation: fade 3s infinite;
}

.char2::before {
  content: '🦫';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scaleX(-1);
  font-size: 100px;
  animation: fade 3s infinite;
  animation-delay: 1s;
}

.char3::before {
  content: '🦫';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 100px;
  animation: fade 3s infinite;
  animation-delay: 2s;
}

@keyframes fade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  33%  { opacity: 1; }
  43%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Кастомный тултип для кнопки отправителя */
.sender-btn-tooltip {
  position: relative;
  display: inline-block;
}

.custom-tooltip {
  visibility: hidden;
  position: absolute;
  top: 125%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: linear-gradient(135deg, #ff9800 0%, #ff6600 100%);
  color: white;
  text-align: center;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 0.9rem;
  white-space: nowrap;
  z-index: 1000;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 0 8px 16px rgba(255, 152, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  pointer-events: none;
  font-weight: 500;
  line-height: 1.5;
}

/* Стрелка тултипа */
.custom-tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent #ff9800 transparent;
  filter: drop-shadow(0 -3px 3px rgba(0, 0, 0, 0.1));
}

/* Анимация появления при наведении */
.sender-btn-tooltip:hover .custom-tooltip {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Эффект свечения при наведении */
.sender-btn-tooltip:hover .custom-tooltip {
  animation: tooltipGlow 2s ease-in-out infinite;
}

@keyframes tooltipGlow {
  0%, 100% {
    box-shadow: 0 8px 16px rgba(255, 152, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  }
  50% {
    box-shadow: 0 8px 20px rgba(255, 152, 0, 0.5), 0 0 20px rgba(255, 152, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
  }
}

/* Пульсация иконки при наведении */
.sender-btn-tooltip:hover svg.bi-send {
  animation: iconPulse 1s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

/* Responsive */
@media (max-width: 576px) {
  .login-form {
    padding: 20px;
  }
  footer {
    display: none;
  }
  
  /* Скрыть тултип на мобильных - только кнопка */
  .custom-tooltip {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .capybara-decoration {
    display: none;
  }
}

/* Виджет Дарьи */
#darya-block {
  position: fixed;
  bottom: 20px;
  right: 20px;
  max-width: 350px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border: 2px solid #ff9800;
  border-radius: 8px;
  z-index: 1000;
}

#close-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

#darya-question {
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  font-size: 14px;
  overflow-y: auto;
  resize: none;
  line-height: 18px;
  max-height: 252px;
}

#ask-darya-btn {
  border: none;
}

#darya-answer {
  min-height: 80px;
  border: 1px solid #ccc;
  border-radius: 4px;
  white-space: pre-wrap;
  overflow-y: auto;
  max-height: calc(14 * 1.5em);
  transition: opacity 0.5s ease;
  opacity: 1;
}

#darya-answer:empty::before {
  content: "Ответ...";
  color: #aaa;
}

/* Кнопки переключения режимов */
.btn-success {
  background-color: #4caf50;
  border-color: #4caf50;
  color: white;
}

.btn-success:hover {
  background-color: #45a049;
  border-color: #45a049;
}

/* Миниатюры изображений */
.thumbnail {
  width: 100px;
  height: 100px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 4px;
  transition: transform 0.2s ease-in-out;
}

.thumbnail:hover {
  transform: scale(1.1);
}

#enlarged-image-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1001;
  display: flex;
  justify-content: center;
  align-items: center;
}

#enlarged-image {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  animation: zoomIn 0.5s ease-in-out;
}

@keyframes zoomIn {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Оптимизации производительности */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}