html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: #000;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.app {
    position: relative;
    width: 100vw;
    height: 100vh; /* Fallback for older browsers */
    background: #000;
}

/* Use dynamic viewport height on modern mobile browsers to avoid UI bars overlapping */
@supports (height: 100dvh) {
    .app {
        height: 100dvh;
    }
}

/* 背景のWebカメラ映像 */
#cameraVideo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画面全体にカバー */
    background: #000;
    transform: scaleX(-1); /* デフォルトはフロント想定でミラー、背面時はJSで戻す */
    z-index: 0;
}

/* A-Frame キャンバスを上に重ねる */
a-scene {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: auto;
    z-index: 1; /* ビデオの上、コントロールの下 */
}

/* 下部コントロール */
.controls {
    /* ブラウザUIの出入りに影響されないよう fixed で最前面に固定 */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Top / left-right / bottom. Bottom includes safe-area to stay above iOS home bar */
    padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
    gap: 16px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 30%, rgba(0, 0, 0, 0.6) 100%);
    pointer-events: none; /* ボタン以外は透過 */
    z-index: 5; /* 常に最前面に表示（プレビュー除く） */
}

.controls .group,
.controls .center,
.controls .right {
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

.controls .group button,
.controls .center button,
.controls .right button {
    pointer-events: auto;
    appearance: none;
    border: none;
    border-radius: 999px;
    width: 72px;
    height: 72px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.controls button:active {
    transform: scale(0.98);
}

.controls .small {
    width: 56px;
    height: 56px;
    font-size: 20px;
    font-weight: 600;
}

.icon {
    font-size: 22px;
}

/* プレビュー画面 */
.preview {
    position: absolute;
    inset: 0;
    display: none;
    background: #000;
    color: #fff;
    flex-direction: column;
    z-index: 10; /* コントロールより前面 */
}

.preview.active {
    display: flex;
}

.preview .image-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
}

#previewImg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #000;
}

.preview .actions {
    display: flex;
    gap: 12px;
    padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
}

.preview .actions button {
    min-width: 120px;
    padding: 12px 16px;
    border-radius: 999px;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

#retakeBtn {
    background: #eee;
    color: #111;
}

#saveBtn {
    background: #1e88e5;
    color: #fff;
}

/* 簡易メッセージ */
#message {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    padding: 8px 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    font-size: 14px;
    z-index: 15;
}

/* モバイル（タッチ主体）環境ではカメラ切替ボタンを強制表示（JSが無効でも表示されるように） */
@media (hover: none) and (pointer: coarse) {
    #switchCamBtn {
        display: inline-flex !important;
    }
}

/* ===== 追加: 画面上部のメニュー（操作ボタン群） ===== */
.ar-topbar {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px;
    z-index: 1000; /* どのレイヤよりも前面に固定 */
    pointer-events: none; /* コンテナ自体は透過、ボタンのみ反応 */
}

.ar-topbar .group {
    display: flex;
    gap: 8px;
    pointer-events: none;
}

.ar-topbar button {
    pointer-events: auto;
    appearance: none;
    border: none;
    border-radius: 999px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.ar-topbar button:active {
    transform: scale(0.98);
}

/* プレビュー画像を .picture-preview 内で安全にフィットさせる */
.ar-mizumo .picture-preview {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000; /* 余白が出る場合に黒背景で馴染ませる */
}

.ar-mizumo .picture-preview img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* 全体が収まるように表示 */
    background: #000;
}

/* ===== 追加: プレビューと非表示制御を確実にする ===== */
/* is-hide で確実に非表示 */
.is-hide {
    display: none !important;
}

/* プレビューはカメラ/A-Frameの上に重ねる */
.ar-mizumo {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10; /* A-Frame(canvas: z-index:1) より前面 */
}

/* カメラ側も is-hide で完全に消す（背後で3Dが透けないように） */
.ar-camera.is-hide {
    display: none !important;
}

/* ===== iPhone の下部バーに隠れないように撮影ボタンを持ち上げる ===== */
:root {
    --vv-bottom: 0px;
}

.ar-camera__under {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0; /* 常に画面最下部に密着 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 余白はセーフエリア＋最小の余白のみ。高さに依存しない＆バーを撤廃（ボタンのみ） */
    padding: 0 12px calc(env(safe-area-inset-bottom, 0px) + 6px);
    z-index: 30;
    pointer-events: none; /* コンテナは透過、ボタンのみクリック可 */
}

.ar-camera__under .under-inner {
    /* 下部ボタンのレイアウト（左右ボタン＋中央シャッター） */
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: min(520px, 92vw);
}

.ar-camera__under button,
.btn-shutter {
    cursor: pointer; /* PCでポインタを手の形に */
}

.ar-camera__under .btn-shutter {
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    border-radius: 999px;
    width: 64px; /* 3ボタンを同サイズに統一 */
    height: 64px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    display: inline-flex;
    align-items: center; /* アイコンを上下中央揃え */
    justify-content: center;
    font-size: 22px;
    line-height: 1;
}

/* 下部 丸ボタン内のSVGを統一スケールで表示 */
.ar-camera__under .btn-under svg {
    width: 26px;
    height: 26px;
    display: block;
    margin: 0 auto;
}

/* 左右の丸ボタン（リセット／カメラ切替）をシャッターと同じサイズ・見た目に統一 */
.ar-camera__under .btn-under {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    border-radius: 999px;
    width: 64px; /* 統一サイズ */
    height: 64px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 22px; /* フォントアイコンを均一に */
    cursor: pointer;
}

/* マテリアルシンボル（フォントアイコン）の視覚サイズをそろえる */
.ar-camera__under .btn-under .material-symbols-outlined,
.ar-camera__under .btn-shutter .material-symbols-outlined {
    font-size: 28px;
    line-height: 1;
}

/* ===== 吹き出し（モデル追従）のスタイル ===== */
.model-bubble {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -100%);
    background: rgba(255, 255, 255, 0.95);
    color: #222;
    border-radius: 14px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.3;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    max-width: 70vw;
    max-height: 40vh;
    z-index: 2; /* A-Frame(canvas: z-index:1) より前面 */
    pointer-events: none; /* タッチ操作は3Dに通す */
    /* 長文でも吹き出しから溢れないように改修 */
    white-space: pre-wrap; /* 改行を維持しつつ折り返しを許可 */
    overflow-wrap: anywhere; /* どこでも改行可（先頭・末尾も可）*/
    word-break: break-word; /* 単語が長い場合に分割 */
    hyphens: auto; /* 対応ブラウザでハイフネーション */
    overflow-y: auto; /* 高さ超過時は縦スクロール */
    scrollbar-width: none;
}

.model-bubble::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.model-bubble::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: rgba(255, 255, 255, 0.95);
}

.ar-camera__display {
    position: relative;
    overflow: hidden;
    background: #000;
}

.ar-aframe-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

#arVideo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    transform: scaleX(-1); /* デフォルトはフロント想定でミラー */
    z-index: 0;
}

.ar-aframe-wrap a-scene {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
    pointer-events: auto;
}

.ar-topbar {
    position: fixed;
    left: 0;
    right: 0;
    /* セーフエリアをしっかり避け、さらに余白を多めに確保（iOSのステータスバー被り対策で+28px） */
    top: calc(env(safe-area-inset-top, 0px) + 28px);
    display: flex;
    justify-content: center; /* スライダー本体は中央 */
    align-items: center;
    padding: 0 16px;
    z-index: 1000; /* 常に最前面 */
    pointer-events: none; /* 内部のみ操作可 */
}

/* 左上の最小化トグルボタン（サイズ変更を想起させるアイコン） */
.ar-topbar .size-toggle {
    position: absolute;
    left: 12px;
    /* 親が safe-area + 余白で下げているため、ここでは追加のマイナス移動をしない */
    top: 0;
    pointer-events: auto; /* 直接操作可 */
    z-index: 2; /* 展開したバーの上に常に出す */
}

.ar-topbar .size-toggle button {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    border-radius: 999px;
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    line-height: 0;
    display: grid;
    place-items: center;
    position: relative; /* アイコンを重ねて管理 */
    cursor: pointer;
}

.ar-topbar .size-toggle button svg {
    width: 26px;
    height: 26px;
}

/* アイコンをボタン内で完全に重ねる */
.ar-topbar .size-toggle .icon-arrows,
.ar-topbar .size-toggle .icon-close {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 開閉トグルのアイコン切替（閉: 対角矢印 / 開: ×） */
.ar-topbar .size-toggle .icon-close {
    display: none;
}

.ar-topbar .size-toggle button[aria-expanded="true"] .icon-close {
    display: flex;
}

.ar-topbar .size-toggle button[aria-expanded="true"] .icon-arrows {
    display: none;
}

.ar-topbar .size-toggle button:active {
    transform: scale(0.98);
}

/* 右上の回転ボタン */
.ar-topbar .rotate-toggle {
    position: absolute;
    left: 12px;
    top: 76px; /* サイズ変更ボタン(64px)の真下に配置 + 余白 */
    margin: 0 !important; /* インラインの余白を無効化 */
    pointer-events: auto;
    z-index: 2;
}

.ar-topbar .rotate-toggle button {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    border-radius: 999px;
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.ar-topbar .rotate-toggle button .material-symbols-outlined {
    font-size: 28px;
    line-height: 1;
}

.ar-topbar .rotate-toggle button.is-active,
.ar-topbar .rotate-toggle button[aria-pressed="true"] {
    background: #115EA6;
    color: #fff;
}

/* プレビュー中は上部バーを非表示 */
html.is-preview #ar-topbar {
    display: none !important;
}

.ar-topbar .topbar-inner {
    pointer-events: auto; /* スライダーの操作を受け付ける */
    width: 100%;
    max-width: min(600px, 92vw);
    background: rgba(255, 255, 255, 0.98);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 14px; /* notch対策で上側に余白を増やす */
    transition: opacity .18s ease, transform .18s ease;
    position: relative;
    z-index: 1; /* トグルより下のレイヤにする */
}

/* 折りたたみ状態 */
.ar-topbar.is-collapsed .topbar-inner {
    display: none;
}

/* 開いたときの軽いアニメーション（任意） */
.ar-topbar.is-open .topbar-inner {
    opacity: 1;
    transform: translateY(0);
}

.ar-topbar .sizebar-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: #222;
    margin-bottom: 6px;
    gap: 8px;
}

.ar-topbar .sizebar-title {
    flex: 1;
    text-align: center;
}

.ar-topbar .btn-close {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    border-radius: 999px;
    width: 32px;
    height: 32px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.ar-topbar .btn-close:active {
    transform: scale(0.96);
}

.ar-topbar .sizebar-body {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
}

.ar-topbar .size-icon {
    font-size: 14px;
    color: #333;
    user-select: none;
}

.ar-topbar .size-icon.big {
    font-size: 18px;
}

.ar-topbar input[type="range"] {
    width: 100%;
    height: 32px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(90deg, #e5e7eb, #e5e7eb);
    border-radius: 999px;
    outline: none;
    touch-action: none; /* シーンへのジェスチャ伝播を抑制 */
}

.ar-topbar input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #115EA6; /* エメラルド系 */
    border: 2px solid white;
}

.ar-topbar input[type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #115EA6;
    border: 2px solid white;
}

.a-enter-vr, .a-enter-vr-button,
.a-enter-ar, .a-enter-ar-button {
    display: none !important;
}

/* ---- iOS Chrome (CriOS) 下端の隙間対策: 下端にピッタリ固定（safe-area のみ考慮） ---- */
html.is-crios .ar-camera__under {
    /* iOS Chrome でも bottom は0固定。ボタンの逃げは padding-bottom でのみ確保 */
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}


/* ---- iOS Chrome の下端ホワイトバーをマスク（セーフエリア部を黒で塗りつぶし） ---- */
html.is-crios body::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: env(safe-area-inset-bottom, 0px);
    /* 透けるマスクに変更（白いバーを半透明で馴染ませる） */
    background: rgba(0, 0, 0, 0.35);
    z-index: 20; /* ボタン(z-index:30)より下、映像より上 */
    pointer-events: none;
}

/* Orientation guard overlay: show only in landscape to enforce portrait usage */
.orientation-guard {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: none; /* default hidden; visible in landscape via media query */
    z-index: 9998; /* below system UI, above app UI */
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px calc(env(safe-area-inset-right, 0px) + 16px) calc(env(safe-area-inset-bottom, 0px) + 24px) calc(env(safe-area-inset-left, 0px) + 16px);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.orientation-guard .og-inner {
    max-width: 90vw;
}

.orientation-guard .og-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.orientation-guard .og-text {
    font-size: 14px;
    line-height: 1.7;
    opacity: 0.9;
}

@media (orientation: landscape) {
    .orientation-guard {
        display: flex;
    }
}


/* ===== Landscape mode policy: show overlay only, hide interactive UI ===== */
@media (orientation: landscape) {
    /* Hide bottom buttons, top size bar, and preview controls in landscape */
    .ar-camera__under {
        display: none !important;
    }

    #ar-topbar {
        display: none !important;
    }

    .ar-mizumo .btn-group {
        display: none !important;
    }

    .ar-mizumo .header {
        display: none !important;
    }
}

/* Fallback for browsers where orientation media query is unreliable (iOS Safari cases): use JS-added class */
html.is-landscape .orientation-guard {
    display: flex !important;
}

html.is-landscape .ar-camera__under {
    display: none !important;
}

html.is-landscape #ar-topbar {
    display: none !important;
}

html.is-landscape .ar-mizumo .btn-group {
    display: none !important;
}

html.is-landscape .ar-mizumo .header {
    display: none !important;
}


/* ---- Bubble size stabilization against dynamic mobile UI bars ---- */
@supports (height: 100dvh) {
    .model-bubble {
        /* Use dynamic viewport height to avoid resizing when address bars show/hide */
        max-height: 40dvh;
        box-sizing: border-box; /* ensure padding is included in max-height */
    }
}

/* モードフラッシュ（回転/移動の一時表示） */
.mode-flash {
    position: fixed;
    left: 50%;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    transform: translateX(-50%);
    z-index: 1002;
    pointer-events: none;
    background: rgba(17, 17, 17, 0.9);
    color: #fff;
    padding: .5rem .75rem;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    opacity: 0;
}

.mode-flash.show {
    animation: flashFade 1200ms ease-out 1;
}

@keyframes flashFade {
    0% {
        opacity: 0;
        transform: translate(-50%, -6px);
    }
    10% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -6px);
    }
}

html.is-preview .mode-flash {
    display: none !important;
}

@media (orientation: landscape) {
    .mode-flash {
        display: none !important;
    }
}


/* Override: keep mode-flash fixed vertically (no translateY animation) */
@keyframes flashFadeNoMove {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.mode-flash.show {
    animation: flashFadeNoMove 1200ms ease-out 1 !important;
}