/* Mobile UX Improvements for AI Studio */

/* ===== АДАПТАЦИЯ ФОНОВОГО ИЗОБРАЖЕНИЯ ===== */
@media screen and (max-width: 768px) {
  body {
    background-attachment: scroll !important;
    background-position: center top !important;
  }
}

/* ===== КРИТИЧЕСКИЕ ИСПРАВЛЕНИЯ АВАТАРОК ===== */

/* Отключение fallback режима для всех аватарок */
.btn-bro-avatar.fallback,
.chat-avatar.fallback,
.message-avatar.fallback,
.hipych-avatar.fallback,
.bro-cat-avatar.fallback {
  display: block !important;
}

.btn-bro-avatar.fallback::after,
.chat-avatar.fallback::after,
.message-avatar.fallback::after,
.hipych-avatar.fallback::after,
.bro-cat-avatar.fallback::after {
  display: none !important;
  content: none !important;
}

/* Восстановление аватарок только на мобильных устройствах */
@media screen and (max-width: 768px) {
  /* Принудительное отображение аватарок Glass UI */
  .glass-ui-hipych-button img,
  .glass-ui-bro-cat-button img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 100 !important;
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
  }
  
  /* Убираем псевдоэлементы только на мобильных */
  .glass-ui-hipych-button::before,
  .glass-ui-bro-cat-button::before,
  .glass-ui-hipych-button::after,
  .glass-ui-bro-cat-button::after {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  /* Убираем текстовое содержимое только на мобильных */
  .glass-ui-hipych-button,
  .glass-ui-bro-cat-button {
    font-size: 0 !important;
    text-indent: -9999px !important;
    color: transparent !important;
  }
}

/* ===== ВОССТАНОВЛЕНИЕ АНИМАЦИИ ЧАСТИЦ ===== */

/* Убираем правило, которое скрывает анимацию */
@media screen and (max-width: 768px) {
  /* Показываем анимацию частиц на мобильных */
  .bg-animation {
    display: block !important;
    opacity: 0.3 !important; /* Уменьшаем интенсивность для мобильных */
  }
  
  #particle-canvas {
    display: block !important;
    opacity: 0.3 !important;
  }
  
  /* Показываем декоративные элементы карточек */
  .service-card::before,
  .assistant-card::before {
    display: block !important;
    opacity: 0.5 !important; /* Уменьшаем интенсивность */
  }
}

/* ===== КРИТИЧЕСКИЕ МОБИЛЬНЫЕ ИСПРАВЛЕНИЯ ===== */

/* Основная мобильная адаптация с высоким приоритетом */
@media screen and (max-width: 768px) {
  /* Контейнеры и отступы */
  .container {
    padding: 0 16px !important;
    max-width: 100% !important;
  }
  
  /* Hero секция */
  .hero {
    padding: 85px 0 30px !important;
    min-height: auto !important;
  }
  
  /* Опускаем контейнер с видео героя чуть ниже на мобильных */
  .hero-reel {
    margin-top: 10px !important;
  }
  
  /* Скрываем кнопки в секции героя на мобильных */
  .hero-cta-row {
    display: none !important;
  }
  
  .hero-title {
    font-size: 2rem !important;
    line-height: 1.3 !important;
    margin-bottom: 16px !important;
  }
  
  .hero-description {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-bottom: 24px !important;
  }
  
  /* Кнопки */
  .hero-actions {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  
  .btn-primary, .btn-secondary {
    width: 100% !important;
    padding: 16px 24px !important;
    font-size: 16px !important;
    min-height: 48px !important;
  }
  
  /* Статистика - Скрыто */
  .hero-stats {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  
  /* Сетки */
  .services-grid,
  .stats-grid,
  .assistants-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  /* Карточки */
  .service-card,
  .stat-card,
  .assistant-card {
    padding: 24px 20px !important;
    margin-bottom: 16px !important;
  }
  
  /* Навигация */
  .nav-links {
    display: none !important;
  }
  
  .mobile-menu-btn {
    display: block !important;
  }
  
  /* Показываем нужные кнопки в шапке на мобильных */
  /* WhatsApp */
  .nav-right .nav-icon-btn[data-contact-link="whatsapp"] {
    display: flex !important;
  }
  
  /* Telegram */
  .nav-right .nav-icon-btn[data-contact-link="telegram"] {
    display: flex !important;
  }
  
  /* Скрываем иконку телефона */
  .nav-right .nav-icon-btn[data-contact-link="phone"] {
    display: none !important;
  }
  
  /* Показываем зеленую кнопку с номером телефона */
  .nav-right .nav-cta {
    display: flex !important;
  }
  
  /* Скрываем остальные элементы */
  .nav-right .nav-lang-toggle {
    display: none !important;
  }
  
  /* Гамбургер-меню и кнопки соцсетей/телефона */
  .nav-right {
    justify-content: flex-end !important;
    gap: 8px;
  }
  
  /* Показываем кнопку снежинки на мобильных */
  .nav-right .snow-toggle,
  .nav-right .snow-toggle-btn {
    display: flex !important;
  }
  
  /* Убеждаемся, что гамбургер виден и увеличиваем его в два раза */
  .nav-right .mobile-menu-btn {
    display: flex !important;
    padding: 16px !important;
    gap: 8px !important;
  }
  
  .nav-right .mobile-menu-btn span {
    width: 44px !important;
    height: 4px !important;
  }
  
  /* Скрываем центральную надпись "РЕАЛЬНЫЙ VАЙБ AI STUDIO" на мобильных */
  .nav-center {
    display: none !important;
  }
  
  /* Секции */
  .services {
    padding: 20px 0 !important;
  }
  
  .stats-section, .about, .testimonials, .contact {
    padding: 60px 0 !important;
  }
  
  .section-title {
    font-size: 1.75rem !important;
    margin-bottom: 32px !important;
    text-align: center !important;
  }
}

/* Очень маленькие экраны */
@media screen and (max-width: 480px) {
  .hero-title {
    font-size: 1.75rem !important;
  }
  
  .hero-stats {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  
  .service-card,
  .stat-card,
  .assistant-card {
    padding: 20px 16px !important;
  }
}

/* ===== ИСПРАВЛЕНИЕ АВАТАРОК ===== */

/* Восстановление аватарки Хипыча */
.hipych-avatar,
.hipych-message-avatar,
.chat-avatar.hipych,
.message-avatar.hipych {
  background-image: url('../images/hipych-avatar.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

/* Восстановление аватарки Кота Бро */
.bro-cat-avatar,
.bro-cat-message-avatar,
.chat-avatar.bro-cat,
.message-avatar.bro-cat,
.btn-bro-avatar {
  background-image: url('../images/bro-avatar.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

/* Скрытие текстовых fallback */
.hipych-avatar::before,
.bro-cat-avatar::before,
.chat-avatar::before,
.message-avatar::before,
.hipych-message-avatar::before,
.bro-cat-message-avatar::before,
.btn-bro-avatar::before {
  display: none !important;
  content: none !important;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* Отключение анимаций для пользователей с настройкой reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Откладываем отрисовку секций вне экрана для ускорения первого рендера */
@media (max-width: 900px) {
  @supports (content-visibility: auto) {
    .hero,
    .services,
    .benefits-section,
    .value-highlight,
    .projects-banner-section,
    .cta-section,
    .process-section,
    .assistants-section,
    .testimonials {
      content-visibility: auto;
      contain-intrinsic-size: 800px;
    }
  }
}

/* Оптимизация для мобильных устройств - УДАЛЕНО СКРЫТИЕ АНИМАЦИИ */
@media (max-width: 768px) {
  /* Упрощение hover эффектов */
  .service-card:hover,
  .process-step:hover,
  .assistant-card:hover {
    transform: none;
  }
}

/* ===== TOUCH-FRIENDLY INTERFACE ===== */

/* Увеличение минимальных размеров для touch targets (44px стандарт) */
@media (max-width: 768px) {
  .btn-primary, 
  .btn-secondary,
  .try-assistant-btn,
  .hipych-trigger,
  .bro-cat-trigger {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 24px;
    touch-action: manipulation; /* Быстрый отклик на touch */
  }
  
  /* Навигационные элементы */
  .nav-link, 
  .mobile-nav-link {
    padding: 16px 20px;
    margin: 4px 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  
  /* Кнопки в чатах */
  .quick-btn,
  .hipych-quick-btn,
  .bro-cat-quick-btn {
    min-height: 36px;
    padding: 8px 16px;
    margin: 4px;
  }
  
  /* Кнопка закрытия */
  .chat-close,
  .hipych-close,
  .bro-cat-close {
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
  }
}

/* ===== ENHANCED VISUAL FEEDBACK ===== */

/* Улучшенные активные состояния для touch */
@media (max-width: 768px) {
  .btn-primary:active,
  .btn-secondary:active {
    transform: scale(0.95);
    background: var(--gradient-accent);
    transition: transform 0.1s ease;
  }
  
  .service-card:active,
  .assistant-card:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
  
  .mobile-nav-link:active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
  }
  
  /* Визуальная обратная связь для кнопок чата */
  .quick-btn:active,
  .hipych-quick-btn:active,
  .bro-cat-quick-btn:active {
    transform: scale(0.95);
    background: var(--gradient-primary);
  }
}

/* ===== FULLSCREEN CHAT OPTIMIZATION ===== */

@media (max-width: 768px) {
  /* Полноэкранный чат */
  .chat-container,
  .hipych-widget,
  .bro-cat-widget {
    width: 100vw !important;
    height: 100vh !important;
    max-height: none !important;
    border-radius: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 9999 !important;
  }
  
  /* Оптимизация области сообщений */
  .chat-messages,
  .hipych-messages,
  .bro-cat-messages {
    height: calc(100vh - 180px) !important;
    padding: 16px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Плавная прокрутка на iOS */
  }
  
  /* Фиксация размера шрифта в input (предотвращает zoom на iOS) */
  .chat-input,
  .hipych-input,
  .bro-cat-input,
  #chat-input {
    font-size: 16px !important;
    padding: 16px !important;
    border-radius: 12px !important;
  }
  
  /* Улучшенная область ввода */
  .chat-input-container,
  .hipych-input-container,
  .bro-cat-input-container {
    padding: 16px !important;
    background: var(--bg-primary);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* ===== IMPROVED TYPOGRAPHY ===== */

@media (max-width: 768px) {
  /* Увеличение базового размера текста */
  body {
    font-size: 16px;
    line-height: 1.6;
  }
  
  /* Заголовки */
  .hero-title {
    font-size: 2.2rem;
    line-height: 1.3;
    margin-bottom: 20px;
  }
  
  .section-title {
    font-size: 1.8rem;
    line-height: 1.4;
    margin-bottom: 24px;
  }
  
  .services {
    margin-top: -30px !important;
  }
  
  .services .section-title {
    margin-top: -50px;
    margin-bottom: 4px;
  }
  
  .services-simple-grid {
    margin-top: -20px !important;
  }
  
  /* Описания */
  .hero-description {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 32px;
  }
  
  .service-description,
  .assistant-description {
    font-size: 16px;
    line-height: 1.5;
  }
  
  /* Улучшение читаемости цен */
  .price {
    font-size: 16px;
    font-weight: 600;
  }
}

/* ===== SPACING IMPROVEMENTS ===== */

@media (max-width: 768px) {
  /* Увеличение отступов между секциями */
  .services,
  .assistants-section,
  .testimonials,
  .contact {
    padding: 60px 0;
  }
  
  /* Увеличение отступов в карточках */
  .service-card,
  .assistant-card {
    padding: 32px 24px;
    margin-bottom: 24px;
  }
  
  /* Улучшение отступов в списках */
  .service-card ul,
  .assistant-features {
    margin-top: 20px;
  }
  
  .service-card li {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  
  /* Отступы для кнопок */
  .hero-actions {
    gap: 20px;
    margin-top: 32px;
  }
  
  .contact-actions {
    gap: 20px;
    margin-top: 32px;
  }
}

/* ===== NAVIGATION IMPROVEMENTS ===== */

@media (max-width: 768px) {
  /* Улучшенное мобильное меню */
  .mobile-nav {
    backdrop-filter: blur(20px);
    background: rgba(10, 10, 10, 0.95);
    padding: 20px 0;
  }
  
  .mobile-nav-link {
    font-size: 18px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  
  .mobile-nav-link:last-child {
    border-bottom: none;
  }
  
  /* Улучшенная кнопка меню */
  .mobile-menu-btn {
    padding: 12px;
    min-width: 44px;
    min-height: 44px;
  }
  
  .mobile-menu-btn span {
    transition: all 0.3s ease;
  }
}

/* ===== SCROLL IMPROVEMENTS ===== */

@media (max-width: 768px) {
  /* Плавная прокрутка для всех контейнеров */
  .chat-messages,
  .hipych-messages,
  .bro-cat-messages {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Улучшенные scrollbars для мобильных */
  .chat-messages::-webkit-scrollbar,
  .hipych-messages::-webkit-scrollbar,
  .bro-cat-messages::-webkit-scrollbar {
    width: 4px;
  }
  
  .chat-messages::-webkit-scrollbar-thumb,
  .hipych-messages::-webkit-scrollbar-thumb,
  .bro-cat-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
  }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

@media (max-width: 768px) {
  /* Улучшение фокуса для клавиатурной навигации */
  .btn-primary:focus,
  .btn-secondary:focus,
  .mobile-nav-link:focus {
    outline: 2px solid var(--gradient-primary);
    outline-offset: 2px;
  }
  
  /* Скрытие элементов для screen readers при необходимости */
  .decorative-animation {
    display: none;
  }
  
  /* Улучшение контрастности для важных элементов */
  .price,
  .stat-number {
    color: var(--text-primary);
    font-weight: 700;
  }
}

/* ===== LOADING STATES ===== */

@media (max-width: 768px) {
  /* Состояния загрузки для лучшего UX */
  .loading-state {
    opacity: 0.7;
    pointer-events: none;
  }
  
  .loading-state::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid var(--text-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
}

/* ===== LANDSCAPE ORIENTATION ===== */

@media (max-width: 768px) and (orientation: landscape) {
  /* Оптимизация для альбомной ориентации */
  .hero {
    padding: 40px 0;
  }
  
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-description {
    font-size: 16px;
  }
  
  /* Компактные чаты в landscape */
  .chat-container,
  .hipych-widget,
  .bro-cat-widget {
    height: 100vh !important;
  }
  
  .chat-messages,
  .hipych-messages,
  .bro-cat-messages {
    height: calc(100vh - 140px) !important;
  }
}

/* ===== МОБИЛЬНЫЕ ЧАТЫ И АССИСТЕНТЫ ===== */

@media screen and (max-width: 768px) {
  /* Триггеры чатов */
  .hipych-trigger,
  .bro-cat-trigger {
    width: 60px !important;
    height: 60px !important;
    bottom: 20px !important;
    right: 20px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
  }
  
  .bro-cat-trigger {
    bottom: 90px !important;
  }
  
  /* Полноэкранные чаты */
  .hipych-widget,
  .bro-cat-widget {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    z-index: 9999 !important;
  }
  
  /* Заголовки чатов */
  .hipych-header,
  .bro-cat-header {
    padding: 20px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  
  /* Области сообщений */
  .hipych-messages,
  .bro-cat-messages {
    height: calc(100vh - 200px) !important;
    padding: 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Области ввода */
  .hipych-input-container,
  .bro-cat-input-container {
    padding: 16px !important;
    background: var(--bg-primary) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  
  .hipych-input,
  .bro-cat-input {
    font-size: 16px !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    width: 100% !important;
  }
  
  /* Быстрые кнопки */
  .hipych-quick-actions,
  .bro-cat-quick-actions {
    padding: 12px 16px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  .hipych-quick-btn,
  .bro-cat-quick-btn {
    padding: 8px 12px !important;
    font-size: 14px !important;
    min-height: 36px !important;
    flex: 1 1 auto !important;
    max-width: calc(50% - 4px) !important;
  }
}

/* ===== АССИСТЕНТЫ СЕКЦИЯ ===== */

@media screen and (max-width: 768px) {
  .assistants-section {
    padding: 60px 0 !important;
  }
  
  .assistants-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  .assistant-card {
    padding: 24px 20px !important;
    text-align: center !important;
  }
  
  .assistant-icon {
    width: 60px !important;
    height: 60px !important;
    margin: 0 auto 16px !important;
    font-size: 24px !important;
  }
  
  .assistant-features {
    flex-direction: column !important;
    gap: 8px !important;
    margin: 16px 0 !important;
  }
  
  .feature-tag {
    padding: 8px 12px !important;
    font-size: 14px !important;
    text-align: center !important;
  }
  
  .try-assistant-btn {
    width: 100% !important;
    padding: 16px 24px !important;
    font-size: 16px !important;
    min-height: 48px !important;
  }
}

/* ===== ДОПОЛНИТЕЛЬНЫЕ ИСПРАВЛЕНИЯ ===== */

@media screen and (max-width: 768px) {
  /* Отключение hover эффектов на мобильных */
  .service-card:hover,
  .assistant-card:hover,
  .stat-card:hover,
  .process-step:hover {
    transform: none !important;
  }
  
  /* Улучшение читаемости */
  body {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  
  /* Отступы для секций */
  .services,
  .stats-section,
  .about,
  .testimonials,
  .contact,
  .assistants-section {
    padding: 60px 0 !important;
  }
  
  /* Процесс работы */
  .process-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  
  .process-step {
    padding: 24px 20px !important;
    text-align: center !important;
  }
  
  /* Отзывы */
  .testimonials-slider {
    padding: 0 20px !important;
  }
  
  .testimonial-card {
    padding: 24px 20px !important;
    text-align: center !important;
  }
  
  /* Контакты */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  .contact-actions {
    flex-direction: column !important;
    gap: 12px !important;
  }
}

/* Специальные правила для мобильных устройств */
@media screen and (max-width: 768px) {
  .glass-ui-hipych-button img,
  .glass-ui-bro-cat-button img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 100 !important;
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
  }
  
  /* Принудительное скрытие текстовых fallback на мобильных */
  .glass-ui-hipych-button::before,
  .glass-ui-bro-cat-button::before,
  .glass-ui-hipych-button::after,
  .glass-ui-bro-cat-button::after {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  /* Убираем любые текстовые содержимые */
  .glass-ui-hipych-button,
  .glass-ui-bro-cat-button {
    font-size: 0 !important;
    text-indent: -9999px !important;
    color: transparent !important;
  }
}

/* ===== МОДАЛЬНЫЕ ОКНА ДЛЯ КАРТОЧЕК ===== */

.card-details-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.card-details-modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: var(--bg-primary);
  border-radius: 20px;
  padding: 24px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  transform: scale(0.8);
  transition: transform 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.card-details-modal.active .modal-content {
  transform: scale(1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.5rem;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
  min-width: 44px;
  min-height: 44px;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.modal-body {
  color: var(--text-secondary);
  line-height: 1.6;
}

.modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.modal-actions .btn-primary,
.modal-actions .btn-secondary {
  flex: 1;
  padding: 12px 20px;
  font-size: 16px;
  min-height: 44px;
}

/* ===== ЭНЕРГОСБЕРЕГАЮЩИЙ РЕЖИМ ===== */

.power-save-mode {
  filter: brightness(0.8) contrast(0.9);
}

.power-save-mode .bg-animation,
.power-save-mode .particle-canvas,
.power-save-mode .service-card::before,
.power-save-mode .assistant-card::before {
  display: none !important;
}

.power-save-mode * {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* ===== РЕЖИМ ЭКОНОМИИ ТРАФИКА ===== */

.data-save-mode .bg-animation,
.data-save-mode video:not(#hero-reel-video),
.data-save-mode .particle-canvas {
  display: none !important;
}

.data-save-mode img {
  filter: blur(1px);
  transition: filter 0.3s ease;
}

.data-save-mode img:hover {
  filter: none;
}

/* ===== LAZY LOADING ИЗОБРАЖЕНИЙ ===== */

img[data-src] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ===== ОСТАВЛЯЕМ АНИМАЦИЮ КАРУСЕЛИ ВСЕГДА ВКЛЮЧЕННОЙ ===== */
/* Power/Data save и prefers-reduced-motion глобально режут transition-duration до 0.01ms.
   Переопределяем для 3D-карусели, чтобы карточки не прыгали без движения. */
.services-carousel .service-carousel-card {
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s ease-in-out, filter 0.6s ease-in-out, box-shadow 0.8s ease-in-out !important;
  transition-duration: 0.8s, 0.8s, 0.6s, 0.8s !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.services-carousel .service-carousel-card.carousel-animating {
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s ease-in-out, filter 0.6s ease-in-out, box-shadow 0.8s ease-in-out, visibility 0s linear 0.8s !important;
  transition-duration: 0.8s, 0.8s, 0.6s, 0.8s, 0.8s !important;
}

img.loaded {
  opacity: 1;
}

/* Placeholder для загружающихся изображений */
img[data-src]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* ===== WEBP ПОДДЕРЖКА ===== */

.webp-supported .avatar-fallback {
  background-image: url('../images/hipych-avatar.webp');
}

.webp-not-supported .avatar-fallback {
  background-image: url('../images/hipych-avatar.jpg');
}

/* ===== УЛУЧШЕННЫЕ TOUCH СОСТОЯНИЯ ===== */

@media (max-width: 768px) {
  .service-card:active,
  .assistant-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
  
  .btn-primary:active,
  .btn-secondary:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
  }
  
  /* Улучшенная обратная связь для touch */
  .touch-feedback {
    position: relative;
    overflow: hidden;
  }
  
  .touch-feedback::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
    pointer-events: none;
  }
  
  .touch-feedback:active::after {
    width: 200px;
    height: 200px;
  }
}

/* ===== УЛУЧШЕННЫЕ SCROLLBARS ===== */

@media (max-width: 768px) {
  /* Кастомные scrollbars для мобильных */
  .chat-messages::-webkit-scrollbar,
  .hipych-messages::-webkit-scrollbar,
  .bro-cat-messages::-webkit-scrollbar,
  .modal-content::-webkit-scrollbar {
    width: 6px;
  }
  
  .chat-messages::-webkit-scrollbar-track,
  .hipych-messages::-webkit-scrollbar-track,
  .bro-cat-messages::-webkit-scrollbar-track,
  .modal-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
  }
  
  .chat-messages::-webkit-scrollbar-thumb,
  .hipych-messages::-webkit-scrollbar-thumb,
  .bro-cat-messages::-webkit-scrollbar-thumb,
  .modal-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    transition: background 0.3s ease;
  }
  
  .chat-messages::-webkit-scrollbar-thumb:hover,
  .hipych-messages::-webkit-scrollbar-thumb:hover,
  .bro-cat-messages::-webkit-scrollbar-thumb:hover,
  .modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
  }
}

/* ===== ИНДИКАТОРЫ СОСТОЯНИЯ ===== */

.connection-status {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  z-index: 9998;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.connection-status.online {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.connection-status.offline {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.battery-status {
  position: fixed;
  top: 60px;
  right: 20px;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  z-index: 9998;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.battery-status.low {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.battery-status.normal {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.battery-status.charging {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

/* ===== УЛУЧШЕННЫЕ АНИМАЦИИ ДЛЯ МОБИЛЬНЫХ ===== */

@media (max-width: 768px) {
  /* Плавные переходы для карточек */
  .service-card,
  .assistant-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  /* Анимация появления элементов */
  .fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
  }
  
  .fade-in:nth-child(1) { animation-delay: 0.1s; }
  .fade-in:nth-child(2) { animation-delay: 0.2s; }
  .fade-in:nth-child(3) { animation-delay: 0.3s; }
  .fade-in:nth-child(4) { animation-delay: 0.4s; }
  
  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Анимация для кнопок */
  .btn-primary,
  .btn-secondary {
    position: relative;
    overflow: hidden;
  }
  
  .btn-primary::before,
  .btn-secondary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
  }
  
  .btn-primary:active::before,
  .btn-secondary:active::before {
    width: 300px;
    height: 300px;
  }
}

/* ===== ACCESSIBILITY УЛУЧШЕНИЯ ===== */

@media (max-width: 768px) {
  /* Улучшенный фокус для клавиатурной навигации */
  .btn-primary:focus-visible,
  .btn-secondary:focus-visible,
  .nav-link:focus-visible,
  .mobile-nav-link:focus-visible {
    outline: 3px solid var(--gradient-primary);
    outline-offset: 2px;
    border-radius: 8px;
  }
  
  /* Скрытие декоративных элементов для screen readers */
  .decorative-only {
    aria-hidden: true;
  }
  
  /* Улучшенная читаемость */
  .high-contrast {
    filter: contrast(1.2);
  }
  
  /* Увеличенный текст для лучшей читаемости */
  .large-text {
    font-size: 1.1em;
    line-height: 1.7;
  }
}

/* ===== DARK MODE ПОДДЕРЖКА ===== */

@media (prefers-color-scheme: dark) {
  .card-details-modal {
    background: rgba(0, 0, 0, 0.9);
  }
  
  .modal-content {
    background: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.2);
  }
}

/* ===== REDUCED MOTION ПОДДЕРЖКА ===== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* ИСКЛЮЧЕНИЕ: карусель должна анимироваться всегда */
  .services-carousel .service-carousel-card,
  .services-carousel .service-carousel-card.carousel-animating {
    transition-duration: 0.8s, 0.8s, 0.6s, 0.8s !important;
    animation-duration: 0.8s !important;
  }
  
  .bg-animation,
  .particle-canvas {
    display: none !important;
  }
}

/* ===== PRINT СТИЛИ ===== */

@media print {
  .bg-animation,
  .particle-canvas,
  .chat-overlay,
  .hipych-widget,
  .bro-cat-widget,
  .back-to-top,
  .mobile-menu-btn,
  .connection-status,
  .battery-status {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
  
  .service-card,
  .assistant-card {
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }
}