/* ビューポート対応スタイル */

/* ベースレイアウト */
:root {
    /* セーフエリアの変数 */
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
}

/* コンテナのパディング */
.container {
    padding-left: calc(var(--spacing-sm) + var(--safe-area-inset-left));
    padding-right: calc(var(--spacing-sm) + var(--safe-area-inset-right));
}

/* ヘッダーの調整 */
.header {
    padding-top: var(--safe-area-inset-top);
}

/* フッターの調整 */
.footer {
    padding-bottom: var(--safe-area-inset-bottom);
}

/* モーダルの調整 */
.modal {
    padding: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);
}

/* 固定要素の調整 */
.fixed-bottom {
    bottom: var(--safe-area-inset-bottom);
}

.fixed-top {
    top: var(--safe-area-inset-top);
}

/* スクロール制御 */
html {
    scroll-padding-top: calc(70px + var(--safe-area-inset-top));
}

/* ビューポートユニット */
.vh-100 {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}

/* メディアクエリ */
@supports (padding: max(0px)) {
    .container {
        padding-left: max(var(--spacing-sm), env(safe-area-inset-left));
        padding-right: max(var(--spacing-sm), env(safe-area-inset-right));
    }
}

/* デバイス向けの最適化 */
@media screen and (orientation: portrait) {
    /* 縦向き */
    .portrait-only {
        display: block;
    }
    
    .landscape-only {
        display: none;
    }
}

@media screen and (orientation: landscape) {
    /* 横向き */
    .portrait-only {
        display: none;
    }
    
    .landscape-only {
        display: block;
    }
}

/* デバイス固有の調整 */
@supports (-webkit-touch-callout: none) {
    /* iOS固有の調整 */
    .ios-specific {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

@supports not (-webkit-touch-callout: none) {
    /* Android固有の調整 */
    .android-specific {
        padding-bottom: 0;
    }
}

/* フォールバック */
@supports not (padding: env(safe-area-inset-left)) {
    .container {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
}

/* アクセシビリティ */
@media screen and (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* 高コントラストモード */
@media screen and (prefers-contrast: high) {
    :root {
        --safe-area-background: #000000;
    }
}

/* ダークモード */
@media screen and (prefers-color-scheme: dark) {
    :root {
        --safe-area-background: var(--haichat-dark-gray);
    }
}

/* 印刷用 */
@media print {
    .container {
        padding: 0;
    }
    
    html {
        scroll-padding-top: 0;
    }
}