/* ========================================================= */
/* --- АДАПТАЦІЯ ДЛЯ ПЛАНШЕТІВ (max-width: 1000px) --- */
/* ========================================================= */
@media (max-width: 1000px) {

  .sidebar {
        background-color: rgba(255, 255, 255, 0.9);
        box-shadow: 0 0 0 var(--shadow-color); /* Додамо тінь */
    }

  /* 1. Основний контейнер займає 100% екрана */
  .app-container {
    width: 100vw;
    border-radius: 0; /* Прибираємо закруглення на великих екранах */
    height: 100dvh !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    box-sizing: border-box;
  }

  /* 2. Chat Container займає всю доступну ширину */
  .chat-container {
    max-width: 100%;
    /* padding-left: 70px; залишається, щоб не перекривати згорнутий сайдбар */
  }

  /* 3. Зменшуємо відступи повідомлень та області вводу */
  .messages {
    padding: 15px 0;
  }
  .message {
    margin: 15px; /* Зменшуємо горизонтальний відступ */
  }
  .input-area {
    padding: 10px 15px 15px; /* Зменшуємо відступ */
  }

  /* 4. Збільшуємо ширину вмісту повідомлень AI */
  .message-content {
    max-width: 85%;
  }
}

/* ========================================================= */
/* --- АДАПТАЦІЯ ДЛЯ МОБІЛЬНИХ (max-width: 600px) --- */
/* ========================================================= */
@media (max-width: 600px) {
  /* Для різних відступів знизу відступу на мобільних пристороях */
  body {
    height: 100dvh;
    align-items: flex-start;
  }

  .app-container {
     height: 100dvh !important;
     padding-bottom: env(safe-area-inset-bottom) !important;
     box-sizing: border-box;
  }

  .input-area {
     padding-bottom: 15px !important;
  }

  /* Запобігаємо наближенню (зуму) при вводі тексту на iPhone */
  textarea, 
  input[type="text"] {
    font-size: 16px !important; 
  }

  /* 1. Повністю приховуємо Sidebar */
  .sidebar {
    left: -260px;
    width: 260px;
    transition: left 0.3s ease-in-out;
    transition-delay: 0s !important;
    padding-bottom: calc(60px + env(safe-area-inset-bottom)); 
  }

  /* СПЕЦІАЛЬНИЙ СТИЛЬ ДЛЯ iOS (iPhone) */
  @supports (-webkit-touch-callout: none) {
    .sidebar {
       padding-bottom: calc(120px + env(safe-area-inset-bottom)); 
    }
  }

  /* 2. Видаляємо логіку hover для мобільних пристроїв */
  .sidebar:hover {
    width: 260px; /* Залишаємо ширину 260px */
    transition-delay: 0s !important;
  }
  
  /* 3. Очищаємо простір Chat Container від відступу сайдбару */
  .chat-container {
    padding-left: 0; 
  }

  /* 4. Прибираємо анімації розгортання тексту при hover, щоб вони не спрацьовували */
  .sidebar .logo span,
  .sidebar .new-chat-btn span,
  .sidebar .settings button span,
  .sidebar .history-container {
    /* На мобільних завжди приховані, поки JS не відкриє їх явно */
    max-width: 0 !important;
    opacity: 0 !important;
    transition-delay: 0s !important;
    pointer-events: none !important;
  }
  
  /* 5. Зменшуємо загальні відступи */
  .message {
    margin: 10px;
  }

  /* 6. Збільшуємо ширину повідомлень, щоб використати вузький простір */
  .message-content {
    max-width: 95%;
    padding: 10px 14px;
  }
  
  /* 7. Адаптуємо велике вітальне повідомлення */
  .intro-message {
    padding: 15px;
    margin: 20px auto;
  }

  .suggestion-chips {
    justify-content: center; /* Краще розподілити чіпси на вузькому екрані */
  }

  .suggestion-chip {
    padding: 6px 10px;
    font-size: 13px;
    white-space: nowrap;
  }
  
  /* 8. Адаптуємо input area */
  .input-area {
    padding: 10px 10px 15px;
  }
    .sidebar-toggle-wrapper {
        display: block; 
    }
    /* 3. Обертаємо іконку при відкритті */
    .sidebar-open .sidebar-toggle-btn {
      transform: rotate(90deg);
  }
  .chat-header {
      background-color: var(--background-tertiary);
      box-shadow: 0 2px 5px var(--shadow-color);
      position: sticky;
      top: 0;
    }
  .sidebar-open .sidebar .logo span,
  .sidebar-open .sidebar .new-chat-btn span,
  .sidebar-open .sidebar .settings button span,
  .sidebar-open .sidebar .history-container {
      max-width: 240px !important;
      opacity: 1 !important;
      transition-delay: 0.3s !important; /* Затримка, щоб вміст з'явився ПІСЛЯ виїзду */
      pointer-events: auto !important;
  }
  .sidebar-open .sidebar .new-chat-btn i {
    margin-right: 8px;
    transition-delay: 0.3s;
  }
  .sidebar-open .chat-container {
      opacity: 0.6;
      pointer-events: none;
      z-index: 500;
  }
  .sidebar-open .sidebar {
    left: 0; /* Висуваємо сайдбар на екран */
  }
  .modal-content {
      width: 90vw; 
      max-width: 90vw;
  }
  .onboarding-step p {
      text-size-adjust: none;
      -webkit-text-size-adjust: none;
  }
}