/* ==========================================================================
   viewer.css — /3d_viewer (3D Viewer)
   Loaded AFTER new_preuploader.css; the page shares the /workspace header and
   theme tokens by putting both classes on body (class="new_preuploader viewer").
   Every rule here is scoped under body.new_preuploader.viewer so specificity
   beats both single.css and the shared file regardless of load order.
   Light theme: no visual change from the single.css look.
   Dark theme (body.theme-dark): the --np tokens from new_preuploader.css.
   CSP: style-src 'self' — keep all styles in this file, no inline styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page tokens (body colour re-pinned: new_preuploader.css makes it white)
   -------------------------------------------------------------------------- */
body.new_preuploader.viewer {
    --vw-text: #000000;
    --vw-text-soft: #021235;
    --vw-panel-border: #95b1df3b;
    --vw-button-bg: #22222211;
    --vw-button-active-bg: #ffffff30;
    --vw-control-bg: #22222219;
    --vw-upload-panel-bg: #477ff040;
    --vw-switch-bg: #ffffff;
    --vw-switch-hover-bg: #eef3fb;
    --vw-switch-border: #95b1df;
    --vw-switch-text: #333333;
    --vw-switch-active-bg: #3e64ad;
    --vw-switch-active-text: #ffffff;
    --vw-warn: #9a3412;
    color: var(--vw-text);
}
body.new_preuploader.viewer.theme-dark {
    --vw-text: var(--np-text);
    --vw-text-soft: var(--np-text-soft);
    --vw-panel-border: var(--np-border-color);
    --vw-button-bg: rgba(255, 255, 255, 0.06);
    --vw-button-active-bg: rgba(255, 255, 255, 0.14);
    --vw-control-bg: rgba(255, 255, 255, 0.06);
    /* upload.png は暗色アイコンなので、ダークでは明るい下地に載せる */
    --vw-upload-panel-bg: rgba(255, 255, 255, 0.72);
    --vw-switch-bg: var(--np-row-bg);
    --vw-switch-hover-bg: rgba(255, 255, 255, 0.10);
    --vw-switch-border: var(--np-border-color);
    --vw-switch-text: var(--np-text);
    --vw-switch-active-bg: var(--np-accent);
    --vw-switch-active-text: var(--np-accent-contrast);
    --vw-warn: #fbbf24;
}

/* ルート要素の背景 (single.css の --main-background を np トークンに置換) */
body.new_preuploader.viewer #pointcloud_viewer {
    /* 背景は new_preuploader.css の body::before (固定レイヤー) が描く */
    background-image: none;
}
@media (max-width: 680px) and (orientation: portrait) {
    body.new_preuploader.viewer:not(.theme-dark) {
        --np-page-bg: linear-gradient(#1764ff, #99c2bc);
    }
}
/* single.css の "#pointcloud_viewer header p { padding-right: 5.5rem }" は
   旧ヘッダー (タイトル中央寄せ) 用。共通ヘッダーでは不要 */
body.new_preuploader.viewer .np_header #site_title {
    padding-right: 0;
}
/* 旧ヘッダー (#viewer_site_header, 下余白なし) より共通ヘッダーの方が
   下余白が大きいので、キャンバス上の margin をその分詰める */
body.new_preuploader.viewer #pointcloud_viewer #viewer_canvas_layout {
    margin-top: 2rem;
}
/* 使い方 (ヘッダー直下)。非表示時にレイアウトが変わらないよう余白 0 */
body.new_preuploader.viewer .np_main.vw_top {
    padding-bottom: 0;
}
body.new_preuploader.viewer .vw_howto {
    text-align: left;
    margin-bottom: 1.4rem;
}
body.new_preuploader.viewer .vw_howto p {
    margin: 0 0 0.7rem;
    line-height: 1.5;
}
/* 対応形式の一覧: ファイルタイプごとに 1 行 */
body.new_preuploader.viewer .vw_howto_formats {
    margin: 0 0 0.9rem;
    padding-left: 1.4rem;
    line-height: 1.5;
}
body.new_preuploader.viewer .vw_howto_formats li {
    margin: 0.1rem 0;
}

/* --------------------------------------------------------------------------
   Canvas / controls (both themes via tokens)
   -------------------------------------------------------------------------- */
body.new_preuploader.viewer .empty_three_canvas,
body.new_preuploader.viewer #three_canvas,
body.new_preuploader.viewer #pointcloud_viewer #three_canvas {
    border-color: var(--vw-panel-border);
}
body.new_preuploader.viewer .upload_panel {
    background-color: var(--vw-upload-panel-bg);
    border-color: var(--vw-panel-border);
}
body.new_preuploader.viewer #file_choice + #file_choice_label::before {
    background-color: var(--vw-button-bg);
    border-color: var(--vw-panel-border);
}
body.new_preuploader.viewer .common_button {
    color: var(--vw-text);
    background-color: var(--vw-button-bg);
    border-color: var(--vw-panel-border);
}
body.new_preuploader.viewer .common_button:active {
    background: var(--vw-button-active-bg);
}
body.new_preuploader.viewer .elevation_button,
body.new_preuploader.viewer .move_stride_slider {
    background-color: var(--vw-control-bg);
    border-color: var(--vw-panel-border);
    color: var(--vw-text);
}
body.new_preuploader.viewer .model_load_too_large {
    color: var(--vw-warn);
}
body.new_preuploader.viewer .viewer_model_switch_button {
    background: var(--vw-switch-bg);
    border-color: var(--vw-switch-border);
    color: var(--vw-switch-text);
}
body.new_preuploader.viewer .viewer_model_switch_button:hover {
    background: var(--vw-switch-hover-bg);
}
body.new_preuploader.viewer .viewer_model_switch_button.viewer_model_active {
    background: var(--vw-switch-active-bg);
    border-color: var(--vw-switch-active-bg);
    color: var(--vw-switch-active-text);
}

/* --------------------------------------------------------------------------
   Dark theme only
   -------------------------------------------------------------------------- */
body.new_preuploader.viewer.theme-dark .inner_load_circle {
    border-top-color: var(--np-accent);
}
body.new_preuploader.viewer.theme-dark #file_choice:focus + #file_choice_label::before {
    border-color: var(--np-accent);
    box-shadow: 0 0 5px var(--np-accent);
}

/* サイズゲート / ロード中のオーバーレイ (.overlay_center) は全画面 fixed で
   ヘッダー (メニュー・テーマ切替) のクリックまで遮っていた。余白部分は
   クリックを透過し、中身 (ゲート・スピナー) だけ受けるようにする */
body.new_preuploader.viewer .overlay_center {
    pointer-events: none;
    /* 全画面 fixed (中央寄せ) だとサイズ警告の文面が右サイドパネル (生成物の
       切替ボタン) に被ってクリックを奪う。キャンバス領域 (#canvas_inner,
       position: relative) の内側に限定して中央に出す */
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    transform: none;
}
body.new_preuploader.viewer .overlay_center > * {
    pointer-events: auto;
}

/* 横長表示: 使い方 / テーマ切替の 2 つを右へ寄せ、テーマ切替の右端を
   空のキャンバス (.empty_three_canvas: 幅 480px + 枠 0.4vh×2、
   #viewer_canvas_layout の margin-left 5.5rem 分だけ中央から右寄り)
   の右端に揃える。ヘッダーの flex からは外し、行の高さ内で縦中央 */
/* 1100px 未満ではユーザー名と衝突するため通常配置 (中央寄り) のまま */
@media only screen and (min-width: 1100px) {
    body.new_preuploader.viewer .np_header {
        position: relative;
    }
    body.new_preuploader.viewer .np_header_controls {
        display: flex;
        align-items: center;
        position: absolute;
        top: 1rem;
        height: calc(100% - 3.5rem);
        right: calc(50% - 2.75rem - 240px - 0.4vh);
    }
    /* ユーザー名はテーマ切替の右側に残る幅 (右パディング 1rem + 間隔 1rem を
       除く) を上限にし、長い名前は省略記号で切る (重なり防止) */
    body.new_preuploader.viewer .np_header #user_login {
        max-width: calc(50% - 2.75rem - 240px - 0.4vh - 2rem);
        min-width: 0;
    }
    body.new_preuploader.viewer .np_header #user_name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* --------------------------------------------------------------------------
   モデル表示中 (#viewer_canvas_layout.model_displayed) はキャンバスを
   ウィンドウの横幅いっぱい (左右 1rem の余白) に広げる。初期状態の空の
   キャンバス (.empty_three_canvas) は従来サイズのまま。描画バッファは
   placement.js が要素の実寸から決めるので縦横比は歪まない。
   縦長表示 (<=880px) は single.css の既存ルールのまま
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 881px) {
    body.new_preuploader.viewer #pointcloud_viewer #viewer_canvas_layout.model_displayed {
        width: 100%;
        box-sizing: border-box;
        padding: 0 1rem;
        margin-left: 0;
        margin-right: 0;
    }
    body.new_preuploader.viewer .model_displayed #canvas_inner {
        flex: 1 1 0;
        min-width: 0;
    }
    /* ローカル表示: 操作パネル (Initial Position / Point size / Move stride =
       .elevation_buttons)。881〜1580px では縦長表示 (<=880px) と同じく
       キャンバスの上・右寄せに置く (従来の margin-top 10rem は無くす) */
    body.new_preuploader.viewer .model_displayed .three_canvas_button,
    body.new_preuploader.viewer .model_displayed .three_viewer_buttons {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    body.new_preuploader.viewer .model_displayed .three_canvas_button > .elevation_buttons,
    body.new_preuploader.viewer .model_displayed .three_viewer_buttons > .elevation_buttons {
        order: 0;
        flex: 0 0 auto;
        margin: 0 0.3rem 0.6rem auto;
        align-items: stretch;
    }
    /* ローカル表示: 高さは従来の 90vh のまま横幅だけ広げる */
    body.new_preuploader.viewer #pointcloud_viewer .model_displayed #three_canvas {
        flex: 1 1 0;
        min-width: 0;
        width: 100%;
        max-width: none;
        max-height: none;
        height: 90vh;
        box-sizing: border-box;
        margin: 0;
    }
    /* dataset 表示: 右サイドパネルの残り幅いっぱい。高さは従来どおり
       縦スクロールが出ない上限 */
    body.new_preuploader.viewer #pointcloud_viewer .dataset_mode.model_displayed #three_canvas {
        height: min(calc(100vh - 7.1rem), 70vw);
    }
}

/* ロード完了マーカー (<output>, aria-live / テスト用)。flex 行の中で幅を取って
   キャンバスを狭めていたので、読み上げ用に DOM には残しつつ視覚的に隠す */
body.new_preuploader.viewer .viewer_model_loaded_marker {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* 1581px 以上: 操作パネルは dataset 表示のサイドパネルと同じく
   キャンバスの右側に縦積み */
@media only screen and (min-width: 1581px) {
    body.new_preuploader.viewer .model_displayed .three_canvas_button,
    body.new_preuploader.viewer .model_displayed .three_viewer_buttons {
        flex-direction: row;
        align-items: flex-start;
    }
    body.new_preuploader.viewer .model_displayed .three_canvas_button > .elevation_buttons,
    body.new_preuploader.viewer .model_displayed .three_viewer_buttons > .elevation_buttons {
        order: 1;
        margin: 0 0 0 1.4rem;
    }
}

/* --------------------------------------------------------------------------
   Dark theme — bevel borders. single.css の border は幅が vh 依存で、
   outset の暗い側の色はブラウザが自動生成する (暗色はほぼ黒に落ちる)。
   ダークでは px 幅の solid + 明示色の 4 辺 (new_preuploader.css の
   --np-bevel-colors) に置き換え、PC / スマホで同じ見え方にする。
   ライトは single.css の見た目を現状維持
   -------------------------------------------------------------------------- */
body.new_preuploader.viewer.theme-dark .empty_three_canvas,
body.new_preuploader.viewer.theme-dark #three_canvas,
body.new_preuploader.viewer.theme-dark #pointcloud_viewer #three_canvas {
    border: 3px solid var(--np-border-color);   /* 0.4vh outset */
    border-color: var(--np-bevel-colors);
}
body.new_preuploader.viewer.theme-dark .upload_panel {
    border: 4px solid var(--np-border-color);   /* 0.5vh outset */
    border-color: var(--np-bevel-colors);
}
body.new_preuploader.viewer.theme-dark #file_choice + #file_choice_label::before,
body.new_preuploader.viewer.theme-dark .common_button,
body.new_preuploader.viewer.theme-dark .elevation_button,
body.new_preuploader.viewer.theme-dark .move_stride_slider {
    border: 2px solid var(--np-border-color);   /* 0.2〜0.3vh outset */
    border-color: var(--np-bevel-colors);
}