/* ダイアログコンテナ（レスポンシブ対応） */
.survey-dialog {
  width: 720px;
  max-width: calc(100% - 40px);
  max-height: calc(100% - 80px);
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,0.6);
  position: relative;
  display: flex;
  flex-direction: column;
  /* モーダルの中身も確実に前面に出す */
  z-index: 17070;
}

/* iframe のレスポンシブ設定 */
.survey-iframe {
  width: 100%;
  height: 520px;
  max-height: calc(80vh);
  border: 0;
  display: block;
}

/* 小画面時は iframe を画面高さに合わせて縮める */
@media (max-width: 520px) {
  .survey-dialog { width: calc(100% - 24px); max-height: calc(100% - 48px); }
  .survey-iframe { height: calc(70vh); }
}

/* survey-dismiss をコンテナ基準で確実に配置する（コンテナ内右上） */
#surveyContainer .survey-dismiss,
.survey-dismiss {
  position: absolute;
  /* 変更: デスクトップではボタンをオレンジの右上に「乗せる」形にするため右側を負のオフセットに */
  right: -12px;   /* 以前: right: 6px; → より右へ */
  top: -6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  z-index: 2;
}

/* モバイル向け調整：コンテナを左寄せにして内部ボタンを整える */
@media (max-width: 520px) {
  #surveyContainer {
    left: calc(env(safe-area-inset-left, 4px)) !important;
    right: auto !important;
    transform: none !important;
    bottom: 12px !important;
    max-width: calc(100% - (var(--mini-base-size) + 96px)) !important;
    width: auto !important;
    z-index: 15050 !important;
    /* モバイルでは margin-left を無効化して確実に左寄せ */
    margin-left: 0 !important;
  }
  /* surveyButton の横幅も安全に保ちつつ左寄せに合わせる */
  #surveyContainer > #surveyButton {
    padding: 10px 14px !important;
    justify-content: flex-start !important;
  }
  /* dismiss の位置は相対的に維持 */
  #surveyContainer .survey-dismiss {
    right: 6px !important;
    top: -6px !important;
    width: 28px !important;
    height: 28px !important;
    line-height: 1 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
  }
}

/* --- 更新: ミニマップと並ぶセレクタをコンテナに合わせる --- */
/* モバイル: ミニマップ分を避ける幅制限（#miniMap の兄弟としてコンテナを参照） */
@media (max-width: 520px) {
  #miniMap ~ #surveyContainer {
    max-width: calc(100% - (var(--mini-base-size) + 24px)) !important;
  }
  /* ミニマップ拡大時はアンケートコンテナをミニマップの下に隠す */
  #miniMap.mini-expanded ~ #surveyContainer {
    z-index: 11000 !important;
  }
}

/* チュートリアル表示中はアンケートコンテナを無効化して暗くする（バックドロップ下へ） */
body.tutorial-active #surveyContainer,
.tutorial-backdrop[aria-hidden="false"] ~ #surveyContainer {
  z-index: 11000 !important;          /* バックドロップ(15000)より下 */
  pointer-events: none !important;     /* クリック不可 */
  opacity: 0.6; /* 少し暗く見せる */
  filter: grayscale(0.15) brightness(0.85) saturate(0.9);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
  transition: opacity 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

/* ミニマップ内のシーン名ラベル（ドット横に表示） --- 改良（小さく・目立たなく） */
.mini-map-dot .mini-map-label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  /* コンパクトにして表示領域を節約 */
  white-space: nowrap;
  font-size: 5px;
  line-height: 1;
  padding: 2px 4px;
  /* 透明度を少し下げて背後が見えるようにする */
  background: rgba(20,24,30,0.72);
  color: #fff;
  border-radius: 6px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.45);
  /* ラベル自体は当たり判定に含めない（丸の当たり判定のみ有効） */
  pointer-events: none !important;
  display: block;
  opacity: 0;
  /* 若干狭めに制限して折り返し回避の閾値を下げる */
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 6;
  transition: opacity 120ms ease, transform 120ms ease;
  box-sizing: border-box; /* 余白の計算を安定させる */
}

/* 表示トリガー: ホバーとタッチ一時表示のみ（ラベル自体は pointer-events:none なのでイベントは下の丸へ） */
#miniMap .mini-map-dot:hover .mini-map-label,
#miniMap .mini-map-dot.show-label .mini-map-label,
.mini-map-dot:hover .mini-map-label,
.mini-map-dot.show-label .mini-map-label {
  /* フル表示よりやや透ける状態にして背景の情報を損なわないようにする */
  opacity: 0.92 !important;
  transform: translateY(-50%) translateX(0) !important;
}

/* 右端寄せ回避（簡易） -- 改良: 右端でラベルが右に途切れる場合はドットの左側に一行で表示する */
.mini-map-dot.near-right .mini-map-label {
  /* ドットの左側にラベルを配置（dot の左端から外側へ） */
  left: auto !important;
  right: calc(100% + 8px) !important;
  transform: translateY(-50%) !important;

  /* 横1行で表示して切れる部分は省略（読みやすさ優先） */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  /* 幅はミニマップサイズに応じ適度に制限 */
  max-width: calc(var(--mini-base-size) - 36px) !important;
  box-sizing: border-box !important;
}

/* モバイル: 右端のときも同様に左側に一行表示（若干狭め） */
@media (max-width: 520px) {
  #miniMap .mini-map-dot.near-right .mini-map-label {
    right: calc(100% + 6px) !important;
    max-width: calc(var(--mini-base-size) - 52px) !important;
    white-space: nowrap !important;
  }
}

/* 現在のシーンを示すドットは非表示にしてマーカー（#miniMapMarker）だけ残す */
.mini-map-dot.current {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* 現在位置のラベルは表示しない（ホバーやタッチで出ないように） */
.mini-map-dot.current .mini-map-label {
  display: none !important;
}

/* ドット／マーカーの慣性を無効化：マップ移動に対して即時追従させる */
.mini-map-dot {
  /* JS で transform を直接制御しているため、CSS のトランジションは不要で慣性の原因になる */
  transition: none !important;
}
#miniMapMarker {
  /* マーカーも慣性を出さずに即時追従させる（JS 側の inline 設定も 'none' に統一しています） */
  transition: none !important;
}

/* サイドバーが有効（展開）になったとき、アンケートをサイドバーの下に隠す。
   汎用セレクタで安全に上書きし、操作も受け付けないようにする（他の要素には影響しない）。 */
#sceneList.enabled ~ #surveyContainer {
  z-index: 13000 !important; /* still lower than #sceneList.enabled (16050) */
}

/* モバイルでサイドバー展開時の確実な隠蔽（念のため同様のルールをモバイル専用にも用意） */
@media (max-width: 520px) {
  #sceneList.enabled ~ #surveyContainer {
    z-index: 13000 !important;
  }
}

/* モバイル: サイドバーがタイトル下から safe-area を考慮して画面下端まで表示されるようにする */
@media (max-width: 520px) {
  #sceneList {
    /* 上はタイトルバー高さ + トップオフセット、下はボトムオフセット＋safe-area を指定 */
    top: calc(66px + var(--sidebar-top-offset)) !important;
    bottom: calc(var(--sidebar-bottom-offset) + env(safe-area-inset-bottom, 0px)) !important;
    /* 高さは自動にして top/bottom で伸縮させる */
    height: auto !important;
    max-height: none !important;
    box-sizing: border-box !important;
  }

  /* 内部スクロール領域をタイトルバーと下部オフセット分だけに限定する */
  #sceneList .scenes {
    max-height: calc(100vh - (66px + var(--sidebar-top-offset) + var(--sidebar-bottom-offset) + env(safe-area-inset-bottom, 0px))) !important;
    height: calc(100vh - (66px + var(--sidebar-top-offset) + var(--sidebar-bottom-offset) + env(safe-area-inset-bottom, 0px))) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    /* 下端が safe-area に被らないよう内側に余白を確保 */
    padding-bottom: calc(var(--sidebar-bottom-offset) + env(safe-area-inset-bottom, 12px)) !important;
  }

  /* 表示/非表示のスライド時に高さやオフセットの影響で途中で途切れないようにする */
  #sceneList.enabled {
    bottom: calc(var(--sidebar-bottom-offset) + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* 強制: モバイルでサイドバーがタイトル下から safe-area を含めて画面下端まで確実に伸びるようにする */
@media (max-width: 520px) {
  /* 親コンテナを fixed にして top/bottom を明示、左/右スライドは left 切り替えで維持 */
  #sceneList {
    position: fixed !important;
    top: calc(66px + var(--sidebar-top-offset)) !important;
    bottom: calc(var(--sidebar-bottom-offset) + env(safe-area-inset-bottom, 0px)) !important;
    left: calc(-100% - var(--sidebar-left-offset)) !important; /* hidden 状態の既定 */
    right: var(--sidebar-right-offset) !important;
    width: calc(100% - var(--sidebar-left-offset) - var(--sidebar-right-offset)) !important;
    height: auto !important;
    max-height: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    z-index: 14025 !important; /* コントロールより前面に出して視覚的に被らないように */
    transition: left 320ms ease !important;
  }

  /* 表示時は left をオフセット分に戻す */
  #sceneList.enabled {
    left: var(--sidebar-left-offset) !important;
    right: var(--sidebar-right-offset) !important;
  }

  /* 内部スクロール領域を親の top/bottom にぴったり合わせる（確実に高さを埋める） */
  #sceneList .scenes {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    /* 下部 safe-area を確保 */
    padding-bottom: calc(var(--sidebar-bottom-offset) + env(safe-area-inset-bottom, 12px)) !important;
  }

  /* enabled 状態でも .scenes は親領域いっぱいにする */
  #sceneList.enabled .scenes {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
  }
}

/* チュートリアル表示中はサイドバーをチュートリアルの下に配置 */
body.tutorial-active #sceneList {
  z-index: 14000 !important; /* チュートリアル (15000) より下に配置 */
}

/* チュートリアル表示中は他の操作を無効化 */
body.tutorial-active *:not(.tutorial-backdrop):not(.tutorial-backdrop *) {
  pointer-events: none !important;
  user-select: none !important;
  opacity: 0.6; /* 視覚的に無効化を示す */
  filter: grayscale(0.5);
}

/* チュートリアル自体は操作可能 */
body.tutorial-active .tutorial-backdrop,
body.tutorial-active .tutorial-backdrop * {
  pointer-events: auto !important;
  user-select: auto !important;
  opacity: 1;
  filter: none;
}

/* survey modal close button: desktop-only visible ◻︎✕ */
.survey-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* アクセシビリティ: フォーカス時のリング */
.survey-close:focus {
  outline: 2px solid rgba(255,255,255,0.18);
  outline-offset: 2px;
}

/* モバイルでは非表示（モバイルは別挙動で survey を扱っているため） */
@media (max-width: 520px) {
  .survey-close { display: none !important; }
}