/* Базовые мобильные стили */
@media (max-width: 768px) {
    /* Общие стили для контейнеров */
    .app-container {
        height: 100vh;
        height: 100dvh; /* Для мобильных браузеров */
    }
    
    /* Сайдбар на мобильных */
    .sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        z-index: 1050;
        width: 85vw;
        max-width: 320px;
        height: 100vh;
        transition: left 0.3s ease;
        box-shadow: 2px 0 20px rgba(0,0,0,0.1);
    }
    
    .sidebar.active {
        left: 0;
    }
    
    /* Оверлей для сайдбара */
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1040;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* Хедер на мобильных */
    .header {
        padding: 0.75rem 1rem;
        position: sticky;
        top: 0;
        z-index: 1030;
        background: var(--bg-primary);
        backdrop-filter: blur(10px);
    }
    
    /* Кнопка меню в хедере */
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        color: var(--text-primary);
        font-size: 1.25rem;
    }
    
    /* Селектор моделей на мобильных */
    .chat-model-selector {
        flex: 1;
        margin: 0 0.75rem;
    }
    
    .model-selector-btn {
        min-width: auto;
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .model-selector-btn span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
    }
    
    /* Выпадающее меню моделей на мобильных */
    .model-dropdown {
        position: fixed;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90vw !important;
        max-width: 400px !important;
        max-height: 80vh !important;
        margin: 0 !important;
    }
    
    .model-dropdown-bottom {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90vw !important;
        max-width: 400px !important;
        max-height: 80vh !important;
        bottom: auto !important;
    }
    
    /* Контейнер чата на мобильных */
    .chat-container {
        height: calc(100vh - 80px);
    }
    
    .chat-area {
        padding: 1rem 0.75rem;
        padding-bottom: 120px;
    }
    
    /* Сообщения на мобильных */
    .message {
        max-width: 95%;
    }
    
    .user-message .message-content,
    .assistant-message .message-content {
        max-width: 90%;
    }
    
    .assistant-message .message-text {
        min-width: auto !important;
        max-width: 100vw !important;
    }
    
    .message-avatar {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    /* Блоки кода на мобильных */
    .code-block {
        margin: 12px 0;
    }
    
    .code-block pre {
        padding: 12px;
        font-size: 12px;
    }
    
    .code-header {
        padding: 8px 12px;
    }
    
    /* Поле ввода на мобильных */
    .message-input-container {
        margin: 0 0.75rem 0.75rem;
        padding: 12px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-primary);
        border-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    
    .message-input {
        font-size: 16px; /* Предотвращает zoom в iOS */
        padding-right: 100px;
        min-height: 44px; /* Минимальная высота для тач-интерфейса */
    }
    
    /* Кнопки действий в поле ввода */
    .input-actions {
        right: 8px;
        gap: 2px;
    }
    
    .input-action-btn {
        width: 36px;
        height: 36px;
    }
    
    /* Селектор модели в поле ввода на мобильных */
    .input-model-selector {
        position: static;
        margin-bottom: 8px;
    }
    
    .model-selector-btn-bottom {
        max-width: none;
        width: 100%;
        justify-content: center;
    }
    
    /* Быстрые действия на мобильных */
    .quick-actions {
        gap: 0.5rem;
        margin: 1rem 0;
    }
    
    .action-btn {
        padding: 0.5rem 0.75rem;
        font-size: 13px;
        border-radius: 12px;
    }
    
    /* Заголовок приветствия */
    .welcome-title {
        font-size: 1.75rem;
        margin-bottom: 1.5rem;
    }
    
    /* Списки чатов на мобильных */
    .chats-list {
        max-height: 60vh;
    }
    
    .chat-item {
        padding: 0.75rem;
    }
    
    /* Настройки Suno на мобильных */
    .suno-content {
        flex-direction: column;
    }
    
    .suno-settings {
        width: 100%;
        min-width: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        max-height: 40vh;
        overflow-y: auto;
    }
    
    .suno-workspace {
        padding: 1rem;
    }
    
    /* Профиль на мобильных */
    .profile-container {
        padding: 0 0.75rem;
    }
    
    .profile-section {
        margin-bottom: 1rem;
    }
    
    .section-content {
        padding: 1rem;
    }
    
    /* Модальные окна на мобильных */
    .modal-dialog {
        margin: 0.5rem;
        max-height: calc(100vh - 1rem);
    }
    
    .modal-content {
        border-radius: 16px;
    }
    
    /* Хедер профиля на мобильных */
    .header-actions {
        gap: 0.25rem;
    }
    
    .upgrade-btn {
        padding: 0.4rem 0.75rem;
        font-size: 12px;
    }
    
    .btn-icon {
        width: 36px;
        height: 36px;
    }
    
    /* Дропдаун меню на мобильных */
    .dropdown-menu {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90vw;
        max-width: 300px;
        max-height: 80vh;
        overflow-y: auto;
    }
    
    /* Улучшаем скроллбар для мобильных */
    .chat-area::-webkit-scrollbar {
        width: 4px;
    }
    
    /* Убираем выделение при тапе */
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Улучшаем интерактивные элементы для тача */
    button, .btn, .nav-item, .chat-item, .action-btn {
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    /* Анимации для мобильных */
    @media (prefers-reduced-motion: no-preference) {
        .message {
            animation-duration: 0.2s;
        }
    }
}

/* Стили для очень маленьких экранов */
@media (max-width: 480px) {
    .header {
        padding: 0.5rem 0.75rem;
    }
    
    .model-selector-btn span {
        max-width: 100px;
    }
    
    .chat-area {
        padding: 0.75rem 0.5rem;
        padding-bottom: 120px;
    }
    
    .message-text {
        padding: 12px 16px;
        font-size: 14px;
    }
    
    .message-input-container {
        margin: 0 0.5rem 0.5rem;
        padding: 10px;
    }
    
    .input-actions {
        right: 6px;
    }
    
    .input-action-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .welcome-title {
        font-size: 1.5rem;
    }
    
    .quick-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .action-btn {
        justify-content: center;
    }
}

/* Стили для планшетов */
@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar {
        width: 240px;
    }
    
    .model-dropdown {
        width: 450px !important;
    }
    
    .chat-area {
        padding: 1.5rem;
    }
}

/* Портретная ориентация */
@media (max-width: 768px) and (orientation: portrait) {
    .chat-container {
        height: calc(100vh - 80px);
    }
}

/* Ландшафтная ориентация */
@media (max-width: 1024px) and (orientation: landscape) {
    .chat-container {
        height: calc(100vh - 70px);
    }
    
    .chat-area {
        padding-bottom: 100px;
    }
    
    .message-input-container {
        padding: 8px 12px;
    }
}

/* Поддержка notch и безопасных зон */
@supports(padding: max(0px)) {
    .message-input-container {
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    }
    
    .header {
        padding-top: max(1rem, env(safe-area-inset-top));
    }
}

/* Улучшения для iOS */
@media (max-width: 768px) {
    /* Предотвращаем zoom при фокусе на iOS */
    input, textarea, select {
        font-size: 16px;
    }
    
    /* Улучшаем скролл на iOS */
    .chat-area {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Убираем задержку тапа на iOS */
    button, [role="button"] {
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
}

/* Анимации для мобильного UX */
.mobile-menu-toggle {
    transition: transform 0.2s ease;
}

.mobile-menu-toggle:active {
    transform: scale(0.95);
}

.input-action-btn:active,
.action-btn:active,
.chat-item:active {
    transform: scale(0.98);
}

/* Специальные стили для клавиатуры */
@media (max-width: 768px) {
    .keyboard-open .message-input-container {
        position: fixed;
        bottom: 0;
    }
    
    .keyboard-open .chat-area {
        padding-bottom: 200px;
    }
}

/* Улучшения для темной темы на мобильных */
[data-theme="dark"] .overlay {
    background: rgba(0,0,0,0.7);
}

[data-theme="dark"] .mobile-menu-toggle {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Оптимизация производительности для мобильных */
@media (max-width: 768px) {
    .message {
        will-change: transform;
    }
    
    .chat-area {
        transform: translateZ(0);
    }
}