/* Mobile Responsive Styles for ChatGPT Clone */

/* Base Mobile Styles - Apply to all screen sizes under 768px */
@media (max-width: 768px) {
  /*
   * Блокировка прокрутки окна — только для макета чата (классы на html/body из chat.html).
   * Иначе /app и другие страницы на base.html не прокручиваются на телефоне.
   */
  html.layout-chat-mobile,
  body.layout-chat-mobile {
    overflow: hidden !important;
    height: 100% !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
  }

  body {
    font-size: 14px;
  }

  /* Нижняя зона сайдбара: ассистенты на мобильных перенесены в меню профиля */
  :root {
    --sb-footer: 0px;
    --sb-profile: 72px;
    --sb-gap: 8px;
  }

  /* Основные стили сайдбара на мобильных устройствах */
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    width: 85%;
    max-width: 300px;
    background-color: #121212;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    display: flex !important;
    flex-direction: column;
  }
  
  #sidebar.hidden {
    display: block !important;
  }
  
  /* Обертка для контента сайдбара — ДЕЛАЕМ ЕЁ ПРОКРУЧИВАЕМОЙ, чтобы sticky работал */
  .mobile-sidebar-content {
    display: flex !important;
    flex-direction: column !important;
    height: calc(var(--vh, 1vh) * 100) !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    flex: 1 !important;
    margin-bottom: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 16px) !important;
    min-height: 0 !important;
  }
  
  /* Дополнительные отступы для старых браузеров */
  .mobile-sidebar-content {
    padding-bottom: env(safe-area-inset-bottom, 16px) !important; /* Отступ только для органов управления браузера */
  }
  
  
  
  /* Профиль — в потоке, без второго sticky (раньше накладывался на список чатов) */
  #sidebar-profile {
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background-color: var(--bg-sidebar) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: static !important;
    bottom: auto !important;
    z-index: auto;
    min-height: 0 !important;
    width: 100% !important;
  }
  
  /* Группа ассистентов — sticky у нижней границы с визуальным разделителем */
  #sidebar-bottom-group {
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 12px 20px 12px 20px !important;
    background-color: var(--bg-sidebar) !important;
    position: sticky !important;
    bottom: env(safe-area-inset-bottom, 0px) !important;
    z-index: 1;
    min-height: var(--sb-footer);
    width: 100% !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important; /* разделитель */
  }
  
  /* Дополнительный визуальный зазор над ассистентами */
  #sidebar-bottom-group::before {
    content: "";
    display: block;
    height: var(--sb-gap);
    width: 100%;
    background: transparent;
  }
  
  /* Светлая тема для нижних блоков */
  [data-theme="light"] #sidebar-profile {
    background-color: #ffffff !important;
    border-top: 1px solid #e5e7eb !important;
  }
  
  [data-theme="light"] #sidebar-bottom-group {
    background-color: #ffffff !important;
    border-top: 1px solid #e5e7eb !important;
  }
  
  #sidebar-chats-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 0 !important;
    padding-bottom: 12px !important;
  }
  
  /* Оверлей для сайдбара */
  #sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 49; /* One less than sidebar z-index */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  #sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  /* Мобильная шапка - фиксированная */
  #mobile-header {
    display: flex !important;
    padding: 10px;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--bg-primary, #1a1a1a);
    width: 100% !important;
    max-width: 100% !important;
    position: fixed !important; /* Фиксируем шапку */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important; /* Высокий z-index */
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  

  /* Контейнер чата */
  #chat-area {
    width: 100% !important;
    height: 100vh !important; /* Полная высота экрана */
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
  }

  /* Контейнер сообщений - единственная прокручиваемая область */
  #messages-container {
    flex: 1 !important; /* Занимает все доступное пространство */
    overflow-y: auto !important; /* Разрешаем только вертикальную прокрутку */
    overflow-x: hidden !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 60px !important; /* Отступ под фиксированную шапку */
    padding-bottom: 20px !important; /* Уменьшенный отступ под поле ввода */
    -webkit-overflow-scrolling: touch !important; /* Плавная прокрутка на iOS */
  }

  /* Форматирование сообщений */
  .message-container {
    padding: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 8px !important; /* Уменьшенный отступ между сообщениями */
  }
  
  /* Уменьшаем отступы для последнего сообщения */
  .message-container:last-child {
    margin-bottom: 0 !important;
  }

  /* Область ввода сообщений */
  #input-container {
    padding: 10px !important;
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 100vw !important;
    background-color: var(--bg-primary, #1a1a1a);
    z-index: 5;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  #message-input {
    font-size: 14px !important;
    padding: 10px !important;
    max-width: 100% !important;
  }

  /* Markdown-контент */
  .markdown-content {
    font-size: 0.9rem; /* Уменьшено с 0.95rem */
  }

  .markdown-content.formatted {
    white-space: normal !important;
  }

  .markdown-content.formatted p {
    margin-bottom: 0.6rem !important; /* Уменьшено с 0.8rem */
    line-height: 1.4 !important; /* Уменьшено с 1.5 */
  }

  .markdown-content pre {
    max-width: 100% !important;
    overflow-x: auto;
    padding: 0.5rem !important; /* Уменьшено для мобильных */
  }

  /* Блоки кода */
  pre code {
    white-space: pre;
    overflow-x: auto;
    display: block;
    max-width: 100%;
    font-size: 0.8rem !important; /* Уменьшено */
  }

  .markdown-content code {
    font-size: 0.8rem; /* Уменьшено с 0.85rem */
    padding: 0.05rem 0.15rem !important; /* Уменьшено */
    background-color: rgba(55, 65, 81, 0.25) !important; /* Меньше выделения на мобильных */
    border: none !important; /* Убираем границы */
  }

  .chat-action-btn {
    min-height: 1.85rem;
    padding: 0.35rem 0.55rem;
  }

  .chat-action-btn--icon {
    min-width: 1.85rem;
    padding: 0.35rem;
  }

  .code-block-wrapper {
    margin: 0.5rem 0 !important;
  }

  .code-block-header {
    padding: 0.35rem 0.55rem !important;
  }

  .code-copy-btn {
    padding: 0.25rem 0.45rem !important;
    font-size: 0.68rem !important;
  }

  .code-copy-btn-text {
    display: none;
  }

  .code-block-body pre {
    padding: 0.75rem !important;
  }

  /* Выпадающее меню профиля позиционируется JS над карточкой профиля. */
  #sidebar-profile .relative {
    position: relative !important;
    overflow: visible !important;
    z-index: 5 !important;
  }
  #profile-dropdown {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 1200 !important;
    background: var(--bg-sidebar) !important;
    background-color: var(--bg-sidebar) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35) !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain !important;
  }
  #profile-dropdown-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #profile-dropdown.hidden { display: none !important; }
  .profile-mobile-assistant-list {
    gap: 8px !important;
  }
  .profile-mobile-menu-item {
    min-height: 52px !important;
  }
  [data-theme="light"] #profile-dropdown {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
  }

  #profile-dropdown { background: #11161d !important; }
  #profile-dropdown * { background-color: transparent !important; }
  #profile-dropdown a:hover,
  #profile-dropdown button:hover { background-color: #242c37 !important; }
  [data-theme="light"] #profile-dropdown { background: #ffffff !important; }
  [data-theme="light"] #profile-dropdown a:hover,
  [data-theme="light"] #profile-dropdown button:hover { background-color: #f3f4f6 !important; }

  /* Форматирование сообщений */
  .message {
    padding: 10px !important;
    margin-bottom: 10px !important;
    max-width: 100% !important;
  }

  /* Кнопки и интерактивные элементы */
  button, .button {
    padding: 8px 12px !important;
    font-size: 14px !important;
    min-height: 40px;
  }

  /* Кнопки переключения сайдбара */
  #toggle-sidebar, 
  #mobile-toggle-sidebar {
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
  }

  /* Таблицы */
  .markdown-content table {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Изображения */
  img, svg, video {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Улучшение обработки длинных слов и URL */
  p, li, a, span, div {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* Improve mobile typography */
  .text-3xl {
    font-size: 1.75rem !important;
  }

  /* Improve spacing on mobile */
  #messages-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Ensure the content doesn't shift when sidebar is opened */
  body.mobile-view {
    overflow-x: hidden;
    position: relative;
  }
}

/* Extra Small Devices (phones) */
@media (max-width: 480px) {
  body {
    font-size: 13px;
  }

  #sidebar {
    width: 85% !important;
  }

  /* Элементы UI для маленьких экранов */
  .message-container {
    padding: 8px !important;
  }

  /* Кнопки для тапа на маленьких экранах */
  button, .button {
    min-height: 40px !important;
    min-width: 40px !important;
  }

  /* Размеры заголовков */
  .markdown-content h1 { font-size: 1.5em; }
  .markdown-content h2 { font-size: 1.3em; }
  .markdown-content h3 { font-size: 1.1em; }
  .markdown-content h4 { font-size: 1em; }

  /* Формы */
  input, textarea, select {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }

  /* Формы авторизации */
  .auth-container {
    width: 90% !important;
    margin: 0 auto !important;
    padding: 15px !important;
  }
}

/* Portrait Mode Optimization */
@media (max-width: 768px) and (orientation: portrait) {
  /* Дополнительные настройки для портретного режима */
  #messages-container {
    max-height: calc(100vh - 120px) !important;
  }
}

/* Landscape Mode Optimization */
@media (max-width: 768px) and (orientation: landscape) {
  /* Лучшее использование горизонтального пространства */
  #sidebar {
    width: 40% !important;
  }

  /* Область ввода в ландшафтном режиме */
  #input-container {
    max-height: 80px !important;
  }
}

/* Нижняя полоса сайдбара: только профиль на мобильных */
@media (max-width: 768px) {
  #sidebar-bottom-bar {
    display: block !important;
    padding: 0 !important;
    position: static !important;
    bottom: auto !important;
    z-index: auto;
    background: transparent !important;
    width: 100% !important;
    flex-shrink: 0 !important;
  }
  #sidebar-assistants-container,
  #sidebar-profile-container { width: 100% !important; min-width: 0 !important; }
  #sidebar-assistants-container #sidebar-divider { display: block; }
  #sidebar-assistants,
  #sidebar-profile { width: 100% !important; border-radius: 0 !important; }
  [data-theme="light"] #sidebar-assistants,
  [data-theme="light"] #sidebar-profile { border-top-color: #e5e7eb !important; }
}

/* Assistants dropdown opens upward on mobile with opaque background */
@media (max-width: 768px) {
  #sidebar-assistants { position: relative !important; }
  #assistants-dropdown {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: calc(100% + 24px) !important; /* выше от заголовка */
    z-index: 1001 !important;
    background: var(--bg-sidebar) !important; /* НЕ прозрачный фон */
    background-color: var(--bg-sidebar) !important; /* перекрываем прежние !important */
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
  }
  [data-theme="light"] #assistants-dropdown {
    background: #ffffff !important;
    background-color: #ffffff !important; /* явное перекрытие */
    border-color: #e5e7eb !important;
  }
  #assistants-dropdown.expanded {
    max-height: 300px !important;
    overflow-y: auto !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35) !important;
  }
}

/* Opaque background overrides for assistants UI on mobile */
@media (max-width: 768px) {
  /* Заголовок ассистентов — делаем непрозрачным и единым по цвету */
  #assistants-header,
  #assistants-header:hover,
  #assistants-header.expanded,
  #assistants-header.expanded:hover {
    background: var(--bg-sidebar) !important;
    background-color: var(--bg-sidebar) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
  }
  [data-theme="light"] #assistants-header,
  [data-theme="light"] #assistants-header:hover,
  [data-theme="light"] #assistants-header.expanded,
  [data-theme="light"] #assistants-header.expanded:hover {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
  }

  /* Список ассистентов — полностью непрозрачный фон, перекрываем классовые правила */
  .assistants-dropdown,
  .assistants-dropdown.expanded {
    background: var(--bg-sidebar) !important;
    background-color: var(--bg-sidebar) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
  }
  [data-theme="light"] .assistants-dropdown,
  [data-theme="light"] .assistants-dropdown.expanded {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
  }

  /* Элементы списка — непрозрачный фон при hover тоже */
  .assistants-dropdown .sidebar-item { background-color: var(--bg-sidebar) !important; }
  .assistants-dropdown .sidebar-item:hover { background-color: rgba(255,255,255,0.06) !important; }
  [data-theme="light"] .assistants-dropdown .sidebar-item { background-color: #ffffff !important; }
  [data-theme="light"] .assistants-dropdown .sidebar-item:hover { background-color: #f3f4f6 !important; }
} 

/* Force solid background for assistants dropdown */
@media (max-width: 768px) {
  /* Повышаем специфичность и перекрываем любые прозрачности */
  #assistants-dropdown.assistants-dropdown.expanded,
  #assistants-dropdown.assistants-dropdown {
    background: var(--bg-sidebar) !important;
    background-color: var(--bg-sidebar) !important;
  }
  [data-theme="light"] #assistants-dropdown.assistants-dropdown.expanded,
  [data-theme="light"] #assistants-dropdown.assistants-dropdown {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }
  /* Дополнительная подложка внутри, если фон класса переопределяется позднее */
  #assistants-dropdown.assistants-dropdown::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bg-sidebar) !important;
    background-color: var(--bg-sidebar) !important;
    border-radius: 8px;
    z-index: 0;
  }
  [data-theme="light"] #assistants-dropdown.assistants-dropdown::before {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }
  #assistants-dropdown.assistants-dropdown > * {
    position: relative;
    z-index: 1;
  }
} 

/* Hard-force black background for assistants dropdown on mobile */
@media (max-width: 768px) {
  /* Container and header */
  #assistants-header,
  #assistants-header:hover,
  #assistants-header.expanded,
  #assistants-header.expanded:hover,
  #assistants-dropdown,
  #assistants-dropdown.assistants-dropdown,
  #assistants-dropdown.assistants-dropdown.expanded {
    background: #000000 !important;
    background-color: #000000 !important;
    opacity: 1 !important;
  }
  /* Items inside dropdown */
  #assistants-dropdown .sidebar-item,
  #assistants-dropdown .sidebar-item:hover {
    background: #000000 !important;
    background-color: #000000 !important;
  }
  /* Light theme variant */
  [data-theme="light"] #assistants-header,
  [data-theme="light"] #assistants-header:hover,
  [data-theme="light"] #assistants-header.expanded,
  [data-theme="light"] #assistants-header.expanded:hover,
  [data-theme="light"] #assistants-dropdown,
  [data-theme="light"] #assistants-dropdown.assistants-dropdown,
  [data-theme="light"] #assistants-dropdown.assistants-dropdown.expanded {
    background: #ffffff !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
  }
  [data-theme="light"] #assistants-dropdown .sidebar-item,
  [data-theme="light"] #assistants-dropdown .sidebar-item:hover {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }
}