/* Nyx AI Studio - Layout Fix Updates */

/* 記事生成フォームの余白を削減 */
#generateForm .mb-4 {
    margin-bottom: 0.75rem !important;
}

#generateForm .mb-3 {
    margin-bottom: 0.5rem !important;
}

#generateForm .card {
    margin-bottom: 0.75rem !important;
}

#generateForm .form-label {
    margin-bottom: 0.3rem !important;
}

/* コンパクトな画像設定セクション */
#imageSettings {
    padding: 0.5rem;
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem !important;
}

#imageSettings .row {
    margin-bottom: 0.5rem !important;
}

#imageSettings .form-label {
    font-size: 0.85rem;
    margin-bottom: 0.25rem !important;
}

/* 情報収集設定のコンパクト化 */
#generateForm .card.bg-light {
    margin-bottom: 0.75rem !important;
}

#generateForm .card.bg-light .card-body {
    padding: 0.75rem !important;
}

#generateForm .card.bg-light .card-title {
    font-size: 1rem;
    margin-bottom: 0.5rem !important;
}

/* モーダルフリーズ対策の強化 */
.modal-backdrop {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

/* モーダル表示時のbody固定を改善 */
body.modal-open {
    overflow: hidden !important;
    position: relative !important; /* fixedではなくrelativeに */
    width: 100% !important;
}

/* モーダルの強制クリーンアップ */
.modal-backdrop.fade:not(.show) {
    opacity: 0 !important;
    pointer-events: none !important;
    display: none !important;
}

.modal-backdrop.fade.show {
    opacity: 0.5;
    transition: opacity 0.15s linear;
}

/* モーダルが閉じた後の確実なクリーンアップ */
.modal.fade:not(.show) {
    display: none !important;
}

/* レスポンシブデザインの改善 */
@media (max-width: 1400px) {
    /* 記事生成ページの2カラムレイアウト調整 */
    #generateForm .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }
    
    #generateForm .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 992px) {
    /* タブレット向け調整 */
    #generateForm .row {
        margin-bottom: 0.5rem !important;
    }
    
    #generateForm .card-body {
        padding: 1rem !important;
    }
}

@media (max-width: 768px) {
    /* モバイル向け調整 */
    #generateForm {
        padding: 0.5rem;
    }
    
    #generateForm .form-control,
    #generateForm .form-select {
        font-size: 16px; /* iOSのズーム防止 */
    }
    
    #generateForm textarea {
        min-height: 100px;
    }
}

/* 記事生成結果モーダルのフリーズ対策 */
#resultModal .modal-dialog {
    pointer-events: auto;
}

#resultModal.show {
    display: block !important;
}

#resultModal .modal-backdrop {
    position: fixed !important;
    z-index: 1040 !important;
}

/* モーダル内のタブコンテンツ最適化 */
#resultModal .tab-content {
    min-height: 300px;
    max-height: calc(80vh - 200px);
    overflow-y: auto;
}

/* プリセットモーダルのスクロール最適化 */
#presetModal .modal-dialog-scrollable .modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* タッチデバイス向けの最適化 */
@media (hover: none) and (pointer: coarse) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    /* タッチ向けボタンサイズ */
    .btn {
        min-height: 44px;
        padding: 0.5rem 1rem;
    }
    
    /* スクロール性能の向上 */
    .modal-body,
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
}

/* グローバルなモーダル修正 */
.modal {
    overflow-x: hidden;
    overflow-y: auto;
}

/* z-indexの管理 */
.modal-backdrop {
    z-index: 1040;
}

.modal {
    z-index: 1050;
}

.toast-container {
    z-index: 1060;
}

/* ページ下部の余白確保 */
.nyx-main > *:last-child {
    padding-bottom: 2rem !important;
}

/* フォーム送信ボタンの位置調整 */
#generateBtn {
    margin-top: 0.5rem;
}