/* ===========================================
   Фиксы мобильной верстки для claude-code-web
   =========================================== */

/* --- Fix 1: Вкладки (tabs) не обрезаются на мобильном --- */
@media (max-width: 768px) {
    .session-tab {
        min-width: 80px;
        max-width: 140px;
        flex-shrink: 0;
    }

    .tab-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 80px;
    }

    .tabs-section {
        scrollbar-width: none; /* Убираем скроллбар на мобильном — свайп работает */
    }

    .tabs-section::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 480px) {
    .session-tab {
        min-width: 60px;
        max-width: 110px;
        padding: 4px 8px;
        font-size: 11px;
    }

    .tab-name {
        max-width: 60px;
    }
}

/* --- Fix 2: Кнопка Install App не перекрывает контент --- */
@media (max-width: 768px) {
    #installBtn,
    .install-btn {
        bottom: auto !important;
        top: 50px !important; /* Под хедером, не перекрывает терминал внизу */
        right: 12px !important;
        padding: 6px 12px !important;
        font-size: 11px !important;
        opacity: 0.7;
        border-radius: 16px !important;
    }

    #installBtn:hover,
    .install-btn:hover {
        opacity: 1;
    }
}

@media (max-width: 480px) {
    #installBtn,
    .install-btn {
        top: 46px !important;
        right: 8px !important;
        padding: 4px 10px !important;
        font-size: 10px !important;
    }
}

/* --- Fix 3: Mode switcher — оставляем внизу, Install App теперь сверху --- */
@media (max-width: 768px) {
    .mode-switcher {
        bottom: 80px !important;
    }
}

/* --- Fix 4: Статусная строка внизу не обрезается --- */
@media (max-width: 768px) {
    .xterm-screen {
        padding-bottom: 4px;
    }
}