/* * issho-mobile.css
 * Mobile-specific fixes (v5)
 * - Fix ghost clicks from invisible modals (Critical)
 * - Fix z-index layering
 * - Restore background color
 */

@media screen and (max-width: 768px) {

    /* =========================================================
       1. 背景色の強制復元 & レイアウト固定
       ========================================================= */
    html {
        background-color: #111827 !important;
    }

    body {
        /* 高さを画面いっぱいに固定 */
        height: 100dvh !important;
        min-height: -webkit-fill-available !important;
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;

        /* 背景グラデーションを強制適用 */
        background: radial-gradient(circle at 50% 30%, #1F2937 0%, #0f131f 60%, #050508 100%) !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-attachment: fixed !important;

        /* タップ時のグレーのハイライトを無効化 */
        -webkit-tap-highlight-color: transparent !important;
        touch-action: none;
    }

    #app-container, #auth-view {
        height: 100dvh !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    /* =========================================================
       2. 透明エリアのタップ貫通 (ボタン押しにくさ解消の核心)
       ========================================================= */
    
    /* 【重要修正】
       アクティブでない(.activeがない)オーバーレイは、
       visibility: hidden で描画対象から完全に外し、
       z-index を下げ、ポインターイベントを無効化します。
       これにより「透明な壁」がボタンを邪魔するのを防ぎます。
    */
    .modal-overlay:not(.active) {
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: -9999 !important;
        opacity: 0 !important;
        display: none !important; /* 念には念を入れて非表示 */
    }
    
    /* 非アクティブなモーダル内の全ての子要素も無効化 */
    .modal-overlay:not(.active) * {
        pointer-events: none !important;
        display: none !important;
    }

    /* アクティブな時だけ表示・操作可能にする */
    .modal-overlay.active {
        visibility: visible !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        z-index: 200000 !important; /* 最前面に */
        display: flex !important; /* レイアウト復帰 */
    }

    /* =========================================================
       3. メニュー & モーダルの重なり順序制御
       ========================================================= */
    
    /* アクティブなメニューコンテナ */
    .modal-overlay.active .glass-menu {
        pointer-events: auto !important;
        z-index: 200001 !important;
        position: absolute !important;
    }

    /* メニュー項目 */
    .menu-item {
        pointer-events: auto !important;
        position: relative !important;
        z-index: 200002 !important;
        min-height: 56px !important; /* タップしやすい高さ */
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        width: 100% !important;
    }
    
    /* メニュー自体の幅と配置 */
    .glass-menu {
        width: 260px !important;
        max-width: 85vw !important;
    }
    
    /* =========================================================
       4. 基本UIの操作許可
       ========================================================= */
    
    /* コンテナ自体はスルー */
    header, .bottom-nav-container, #tab-switch-box {
        pointer-events: none !important;
        background: transparent !important;
    }
    
    /* ボタン類は確実に押せるように */
    .header-btn, .tab-btn, .talk-fab, .glass-tab-switch { 
        pointer-events: auto !important; 
        cursor: pointer !important;
        z-index: 10000 !important;
        touch-action: manipulation !important;
    }

    /* =========================================================
       5. コンテンツエリア
       ========================================================= */
    .view-container {
        padding-top: calc(100px + env(safe-area-inset-top)) !important;
        padding-bottom: calc(160px + env(safe-area-inset-bottom)) !important;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        pointer-events: auto !important;
    }
    
    .glass-list-item {
        pointer-events: auto !important;
        position: relative !important;
        z-index: 10 !important;
    }

    /* =========================================================
       6. その他調整
       ========================================================= */
    
    /* フルスクリーンモーダル（アカウント設定など） */
    .full-modal {
        height: calc(93dvh - env(safe-area-inset-top)) !important;
        padding-bottom: calc(40px + env(safe-area-inset-bottom)) !important;
        z-index: 200010 !important;
    }
    
    /* 入力フォームの文字サイズ（ズーム防止） */
    input, select, textarea { 
        font-size: 16px !important; 
    }
    
    /* トースト通知 */
    #toast-container {
        bottom: calc(100px + env(safe-area-inset-bottom)) !important;
        z-index: 999999 !important;
    }
}