/* Подключается после style.css. На десктопе вкладок нет, панели стоят в два столбца. */
.tabs { display: none; }

.chat-input-area input { font-size: 16px; } /* iOS не приближает страницу при фокусе */

@media (max-width: 768px) {
    html, body {
        height: 100dvh;
        justify-content: flex-start;
        align-items: stretch;
    }

    body {
        flex-direction: column;
        padding: 0;
    }

    .tabs {
        display: flex;
        gap: 8px;
        width: 100%;
        padding: calc(10px + env(safe-area-inset-top)) 12px 0;
    }

    .tab {
        flex: 1;
        padding: 10px;
        border: none;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.08);
        color: #cbd5e1;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
    }

    .tab.active {
        background: linear-gradient(135deg, #6366f1, #4f46e5);
        color: #ffffff;
    }

    .main-container {
        flex: 1;
        min-height: 0;
        height: auto;
        max-height: none;
        width: 100%;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    }

    .left-panel,
    .right-panel {
        display: none;
        width: 100%;
        min-height: 0;
    }

    .left-panel { overflow-y: auto; }

    .main-container[data-view="pet"] .left-panel { display: flex; }
    .main-container[data-view="chat"] .right-panel { display: flex; }
}