/* PicoCSSのセマンティックなデフォルトを活かし、独自CSSは
   「ビューアとオーバーレイの重ね合わせ」「2カラム」など、PicoCSSでは表せない配置に限る。 */

:root {
  --viewer-max-width: 620px;
}

.layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1.1fr);
  gap: var(--pico-spacing);
  align-items: start;
}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
}

/* ビューア本体とオーバーレイcanvasを正方形の枠へ重ねる。
   正方形にするのは、フレーム抽出時（512x512, h_fov=v_fov相当）と同じ見え方にするため。 */
.viewer-stage {
  position: relative;
  width: 100%;
  max-width: var(--viewer-max-width);
  aspect-ratio: 1 / 1;
  background: #000;
  margin: 0 auto;
  border-radius: var(--pico-border-radius);
  overflow: hidden;
}

.viewer-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  outline: none;
}

/* 画像検索モード: アップロード画像の縦横比に合わせて枠の高さを可変にする。
   video-stageの正方形固定のままだと、正方形でない画像がレターボックスされ、
   選択オーバーレイの座標計算（表示矩形=画像の実ピクセル範囲という前提）が崩れるため */
.viewer-stage.image-mode {
  aspect-ratio: auto;
}

.uploaded-query-image {
  display: block;
  width: 100%;
  height: auto;
}

.image-upload-dropzone {
  padding: 3rem 1rem;
  text-align: center;
}

/* 選択用オーバーレイ。ドラッグ中だけ操作を奪い、通常はビューアの見回しを妨げない */
.selector-overlay {
  cursor: crosshair;
  z-index: 2;
}

.viewer-readout {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--pico-muted-color);
  margin-top: 0.4rem;
}

.query-preview img {
  max-height: 120px;
  width: auto;
  border-radius: var(--pico-border-radius);
  border: 1px solid var(--pico-muted-border-color);
}

/* 検索結果。サムネイル・本文・操作を1行に収める */
.result-item {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

/* ジャンプ中の1件。同一動画の他シーンと紛れないよう、行そのものを示す。
   border-leftではなくinsetのbox-shadowを使うのは、gridの列幅をずらさないため。 */
.result-item.is-active {
  background: var(--pico-card-sectioning-background-color);
  box-shadow: inset 3px 0 0 0 var(--pico-primary);
}

.result-item img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: var(--pico-border-radius);
  background: var(--pico-muted-border-color);
}

.result-meta {
  font-size: 0.8rem;
  color: var(--pico-muted-color);
  margin: 0;
}

.result-score {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.result-item button {
  margin: 0;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  width: auto;
}

.mode-buttons {
  display: flex;
  gap: 0.5rem;
}

.mode-buttons button {
  margin: 0;
  width: auto;
  flex: 1;
}

.hint {
  font-size: 0.8rem;
  color: var(--pico-muted-color);
}

.scroll-list {
  max-height: 60vh;
  overflow-y: auto;
}