@import url('https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap');
@import url('./variables.css');

/* Global styles */
*,
*::before,
*::after {
  box-sizing: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-primary);
  font-weight: var(--weight-normal);
  color: var(--text);
  background-color: var(--white);
  overflow-x: hidden;
  min-height: 100vh;
  /* Предотвращение горизонтального скролла */
  max-width: 100vw;
  position: relative;
}

/* Focus styles */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Utility classes */
.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

/* Print styles */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: var(--text) !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a,
  a:visited {
    text-decoration: underline;
  }
  
  img {
    page-break-inside: avoid;
  }
  
  h2,
  h3,
  p {
    orphans: 3;
    widows: 3;
  }
  
  h2,
  h3 {
    page-break-after: avoid;
  }
}

/* Animation utilities */
@keyframes pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-pulse {
  animation: pulse 1.5s ease-in-out infinite;
}

.animate-fadeIn {
  animation: fadeIn var(--duration-normal) ease;
}

.animate-slideUp {
  animation: slideUp var(--duration-normal) var(--easing);
}

.animate-slideDown {
  animation: slideDown var(--duration-normal) var(--easing);
}

/* Loading spinner */
.spinner {
  border: 3px solid var(--primary-light-alpha-2);
  border-top: 3px solid var(--primary);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Button reset */
button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  /* Touch-friendly размеры */
  min-width: 25px;
  min-height: 25px;
  touch-action: manipulation;
}

/* Улучшение touch-targets для маленьких кнопок */
@media (max-width: 767px) {
  button:not(.mobile-menu-btn):not(.chat-attach-btn):not(.chat-send-btn):not(.welcome-screen__send-btn) {
    min-width: 44px;
    min-height: 44px;
  }
  
  /* Специальные кнопки могут быть меньше, но с достаточным padding */
  .chat-attach-btn,
  .chat-send-btn,
  .welcome-screen__send-btn {
    min-width: 2.25rem;
    min-height: 2.25rem;
  }
}

/* Input reset */
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Предотвращение zoom на iOS при фокусе на мобильных */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  textarea {
    /* Минимум 16px для предотвращения zoom на iOS */
    font-size: max(16px, 1em);
  }
}

/* Предотвращение горизонтального скролла для всех элементов */
* {
  max-width: 100%;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}