/* ==========================================
   RESPONSIVE (Cross-cutting)
   Только кросс-файловые адаптивные фиксы.
   НЕ дублируем локальные @media из layout/components/chat/panels/auth.
   ========================================== */

/* ------------------------------------------
   Mobile (<= 768px): prevent horizontal scroll
   ------------------------------------------ */
@media (max-width: 768px) {
  /* общий запрет горизонтального скролла */
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* контейнер приложения не должен “раздуваться” */
  .container {
    max-width: 100%;
    overflow: hidden;
  }

  /* важное: flex-дети должны уметь ужиматься */
  .header,
  .header-left,
  .cards-container,
  .card,
  .card-header,
  .card-name,
  .card-preview,
  .detail-content,
  .user-info-content,
  .messages-area,
  .input-wrapper {
    min-width: 0;
    max-width: 100%;
  }

  /* если где-то попадает длинный текст/номер */
  .card-name,
  .card-preview,
  .chat-user-name,
  .last-message-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ------------------------------------------
   Small phones (<= 480px): safe-area
   ------------------------------------------ */
@media (max-width: 480px) {
  /* нижние зоны, где есть интерактив (клавиатура / safe-area) */
  .chat-input-area {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .detail-content,
  .user-info-content {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* ------------------------------------------
   Touch devices: reduce hover “ложные” эффекты
   (кросс-фикс, чтобы не дублировать в каждом файле)
   ------------------------------------------ */
@media (hover: none) and (pointer: coarse) {
  /* общие правила: hover не должен “прыгать” на тачах */
  .nav-tab:hover,
  .theme-toggle-btn:hover,
  .logout-btn:hover,
  .refresh-btn:hover,
  .back-btn:hover,
  .close-btn:hover,
  .user-info-btn:hover,
  .user-info-close:hover,
  .user-info-retry:hover {
    background: initial;
    border-color: initial;
    color: initial;
    box-shadow: none;
    transform: none;
  }
}

/* ------------------------------------------
   Tablet landscape tweaks (optional)
   Если у тебя на планшете не влезает header/search
   ------------------------------------------ */
@media (max-width: 900px) {
  .header {
    gap: 16px;
  }

  .search-container {
    width: 100%;
    max-width: 420px;
  }
}


/* ------------------------------------------
   Mobile card fixes
   ------------------------------------------ */

@media (max-width: 768px) {
  /* Отступ снизу для последней карточки */
  .cards-container {
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }

  /* Дата слева от имени на одной строке */
  .user-card .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .user-card .card-header .card-name {
    order: 2;
  }

  .user-card .card-header .card-meta {
    order: 1;
    flex-direction: row-reverse;
    gap: 8px;
  }

  /* 8800 карточки тоже */
 .call-card .card-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ------------------------------------------
   Touch: убираем мигание, только реальное нажатие
   ------------------------------------------ */

@media (hover: none) and (pointer: coarse) {

   .overdue-card:hover,
  .overdue-card:active {
    transform: none;
    box-shadow: none;
  }

    .overdue-card.called:hover,
  .overdue-card.called:active {
    border-left-color: var(--accent-green);
  }

      .overdue-card.not-called:hover,
  .overdue-card.not-called:active {
    border-left-color: var(--accent-red);
  }

  .card {
    -webkit-tap-highlight-color: transparent;
  }

  .card:not(.call-card):hover {
    background: var(--bg-card);
    transform: none;
    box-shadow: none;
  }

  .card:not(.call-card):active {
    background: var(--bg-card-hover);
    transition: background 0.1s ease;
  }

  /* call-card - только фон меняем, border не трогаем */
  .call-card:hover {
    transform: none;
    box-shadow: none;
  }

  .call-card:active {
    background: var(--bg-card-hover);
    transition: background 0.1s ease;
  }
}