/* ========== RESPONSIVE STYLES FOR TABLETS ========== */
/* iPad 10 Zoll: Portrait ~820px, Landscape ~1180px */

/* ========== TABLET LANDSCAPE (max-width: 1200px) ========== */
@media (max-width: 1200px) {
    /* Container */
    .container {
        width: 95%;
        max-width: 1200px;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Main Popups - slightly smaller */
    .popup,
    .popup_format_tonalitaet {
        width: 90%;
        max-width: 900px;
        height: auto;
        max-height: 80vh;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .popup_chat_history,
    .popup_profile {
        width: 90%;
        max-width: 850px;
        height: auto;
        max-height: 80vh;
    }

    .popup_settings {
        width: 95%;
        max-width: 1100px;
    }

    /* Info popups - hide on smaller screens or reposition */
    .popup-info,
    .popup-tonalitaet_loader_info,
    .popup-info-set,
    .popup-mixer-info,
    .popup_data_check-info {
        display: none !important;
    }

    /* Format options grid - 3 columns instead of 4 */
    .format-options-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Menu items smaller */
    .menu-item {
        width: auto;
        min-width: 120px;
        padding: 0 15px;
        font-size: 12px;
    }

    .menu-brand {
        padding-left: 20px;
        font-size: 18px;
    }
}

/* ========== TABLET PORTRAIT (max-width: 1024px) ========== */
@media (max-width: 1024px) {
    /* Container */
    .container {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Main Popups */
    .popup,
    .popup_format_tonalitaet {
        width: 95%;
        max-width: 700px;
        height: auto;
        max-height: 85vh;
        padding-left: 15px;
        padding-right: 15px;
    }

    .popup_chat_history,
    .popup_profile {
        width: 95%;
        max-width: 700px;
        height: auto;
        max-height: 85vh;
    }

    .popup_settings {
        width: 98%;
        max-width: 900px;
    }

    .popup-other,
    .popup_upload,
    .popup_create_set,
    .popup_data_check {
        width: 90%;
        max-width: 500px;
    }

    .popup_rename,
    .popup_export,
    .popup_tonalitaet_loader,
    .popup_change_password {
        width: 85%;
        max-width: 380px;
    }

    /* Format options grid - 2 columns */
    .format-options-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .format-option-btn {
        width: 100%;
        font-size: 12px;
        padding: 10px 8px;
    }

    /* Check/Fact buttons - full width */
    .format-option-btn-check-fact {
        width: 100%;
        max-width: 100%;
    }

    /* Menu adjustments */
    .menu-item {
        width: auto;
        min-width: 100px;
        padding: 0 10px;
        font-size: 11px;
    }

    .menu-brand {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 16px;
    }

    .menu-brand-text {
        display: none; /* Hide text, show only icon on tablets */
    }

    /* Tonality Mixer - stack vertically */
    .mixer-main-container {
        flex-direction: column;
        height: auto;
    }

    #tonality-mixer-content {
        width: 100%;
        height: auto;
        max-height: 300px;
    }

    .mixer-right-panel {
        width: 100%;
        height: auto;
    }

    .mixer-slider {
        width: 100%;
        max-width: 400px;
    }

    #tonality-mixer-content > div {
        width: 100%;
    }

    /* Prompt input width */
    #prompt-input {
        width: 100%;
        max-width: 600px;
    }

    /* Results area messages */
    .message.user,
    .message.system {
        max-width: 95%;
    }
}

/* ========== SMALL TABLET / LARGE PHONE (max-width: 768px) ========== */
@media (max-width: 768px) {
    /* Container full width */
    .container {
        width: 100%;
        padding: 5px;
        gap: 10px;
    }

    /* Popups nearly full screen */
    .popup,
    .popup_format_tonalitaet,
    .popup_chat_history,
    .popup_profile,
    .popup_settings {
        width: 98%;
        max-width: none;
        height: auto;
        max-height: 90vh;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 10px;
        border-radius: 12px;
    }

    .popup-other,
    .popup_upload,
    .popup_create_set,
    .popup_data_check,
    .popup_rename,
    .popup_export,
    .popup_tonalitaet_loader,
    .popup_change_password {
        width: 95%;
        max-width: none;
    }

    /* Format options - single column */
    .format-options-grid {
        grid-template-columns: 1fr;
    }

    /* Menu - horizontal scroll or hamburger needed */
    .menu-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .menu-items {
        min-width: max-content;
    }

    .menu-item {
        min-width: 90px;
        padding: 0 8px;
        font-size: 11px;
    }

    /* Controls wrapper */
    .controls-wrapper {
        flex-direction: column;
        gap: 10px;
    }

    .controls-area,
    .controls-area-prompt {
        width: 100%;
        max-width: 100%;
    }

    #prompt-input {
        width: 100%;
    }

    /* Button menu smaller */
    .button-menue {
        width: 100%;
        max-width: 200px;
    }

    .button-menue-export {
        width: 100%;
        max-width: 200px;
    }
}

/* ========== TOUCH-FRIENDLY STYLES ========== */
/* Make hover effects work on touch devices via :active */

@media (hover: none) and (pointer: coarse) {
    /* Buttons - use :active instead of :hover for touch */
    .format-option-btn:active,
    .format-option-btn-check-fact:active {
        background: linear-gradient(6deg, var(--format-bg-bt-gradient-start-hover) 25%, var(--format-bg-bt-gradient-end-hover) 100%);
        color: var(--input-button-font-color-general);
        border: 1px solid var(--border-button-input-area-over);
    }

    .button-menue:active,
    .button-menue-chat-format-tone:active,
    .button-menue-export:active {
        background: linear-gradient(6deg, var(--format-bg-bt-gradient-start-hover) 25%, var(--format-bg-bt-gradient-end-hover) 100%);
        border: 1px solid var(--bg-black-white);
    }

    .auth-oauth-btn:active {
        background-color: #f0f0f0;
        border-color: #999;
    }

    .menu-item:active {
        background-color: var(--menu-hover-bg);
        color: var(--menu-hover-text);
    }

    .submenu-item:active {
        background-color: var(--menu-hover-bg);
        color: var(--menu-hover-text);
    }

    /* Larger touch targets */
    .format-option-btn,
    .format-option-btn-check-fact,
    .button-menue,
    .button-menue-chat-format-tone {
        min-height: 44px; /* Apple's recommended minimum touch target */
        padding: 12px;
    }

    /* Control buttons larger for touch */
    #execute-button,
    #stop-button,
    #attach-button,
    #history-button,
    #profil-button,
    #settings-button,
    #white-button {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    /* Disable hover effects that don't work on touch */
    .format-option-btn:hover,
    .format-option-btn-check-fact:hover,
    .button-menue:hover {
        background: inherit;
        border: inherit;
        box-shadow: none;
    }

    /* Format tabs larger */
    .format-tab {
        min-height: 44px;
        padding: 12px 0;
    }

    /* Profile tabs */
    .profile-tab {
        min-height: 44px;
    }
}

/* ========== POPUP SCROLLING FIX ========== */
/* Ensure popups are scrollable on tablets */

.popup-content,
.popup-content-format-popup,
.popup-content-format-chat-llm {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

/* Fix for iOS Safari momentum scrolling */
.popup,
.popup_format_tonalitaet,
.popup_chat_history,
.popup_profile,
.popup_settings {
    -webkit-overflow-scrolling: touch;
}

/* ========== ORIENTATION SPECIFIC ========== */

/* Portrait orientation */
@media (orientation: portrait) and (max-width: 1024px) {
    .popup_settings {
        height: 80vh;
    }

    .format-options-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Landscape orientation */
@media (orientation: landscape) and (max-height: 600px) {
    .popup,
    .popup_format_tonalitaet,
    .popup_chat_history,
    .popup_profile {
        max-height: 95vh;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .popup-content {
        max-height: 70vh;
    }
}