/*
    視聴者ページの見た目。docs/design.md 3.2 / 5.2（トークン・ボタン・ダイアログ・通知・操作バーは alv-base.css）

    - 全セレクタを .alv-root の配下に限定する。テーマのページ全体（html・body・ボタン・入力）には触らない
      （以前の watch_user.css は html の margin-top と、ページ中の button / input を塗り替えていた）
    - 縦長（9:16）の配信映像を中心に、下にコメントと操作バー。スマホ幅が基準で、PC では中央に 480px で置く
*/

.alv-viewer.alv-root {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  font-size: 15px;
  letter-spacing: normal;
  text-align: left;
}

/* ---- 映像ステージ ---- */
.alv-viewer .alv-stage {
  width: 100%;
  aspect-ratio: 9 / 16;
  /* 操作バーまで 1 画面に収める。縮んだ分は映像を contain で収める */
  max-height: calc(100svh - 150px);
  min-height: 320px;
}
.alv-viewer .alv-stage__video {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%; max-width: none; margin: 0;
  object-fit: contain; background: #000;
}
.alv-viewer .alv-live {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 6px;
  background: var(--alv-live); color: #FFFFFF; font-size: 12px; font-weight: 700; letter-spacing: .06em;
}
.alv-viewer .alv-live[hidden] { display: none; }
.alv-viewer .alv-sound[aria-pressed="true"] { background: rgba(17, 18, 21, .72); color: var(--alv-text); }

/* ---- コメントと操作バー ---- */
.alv-viewer .alv-controls { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; }
.alv-viewer .alv-comment { display: flex; gap: 8px; margin: 0; }
/* .alv-root.alv-viewer まで書く。alv-base.css の .alv-root input[type="text"]（14px）に勝たないと、iOS がフォーカスで拡大する */
.alv-root.alv-viewer .alv-comment__input {
  flex: 1 1 auto; min-width: 0; width: auto; height: 44px; min-height: 44px; margin: 0; padding: 0 14px;
  border: 1px solid var(--alv-line); border-radius: 22px; background: var(--alv-surface); color: var(--alv-text);
  font: inherit; font-size: 16px; /* 16px 未満だと iOS がフォーカスで拡大する */
  box-shadow: none;
}
.alv-root.alv-viewer .alv-comment__input::placeholder { color: var(--alv-muted); opacity: 1; }
.alv-viewer .alv-comment__send {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 22px;
  background: var(--alv-accent); color: var(--alv-on-accent); box-shadow: none; cursor: pointer;
}
.alv-viewer .alv-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.alv-viewer .alv-choice {
  display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0; padding: 0 14px;
  border: 1px solid var(--alv-line); border-radius: 12px; background: var(--alv-bg); color: var(--alv-text); cursor: pointer;
}
.alv-viewer .alv-choice:has(input:checked) { border-color: var(--alv-accent); }
.alv-viewer .alv-choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--alv-accent); }

@media (prefers-reduced-motion: reduce) {
  .alv-viewer * { transition: none !important; animation: none !important; }
}

/* 設定が正しくないとき（ライブか商品が引けない）。.alv-root の外なのでテーマの文字のまま */
.alv-viewer-error { max-width: 480px; margin: 24px auto; padding: 0 16px; }

/* ---- ログインの小窓（中身は WordPress の wp_login_form → 16.4p） ---- */
.alv-viewer .alv-login form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.alv-viewer .alv-login form p { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.alv-viewer .alv-login label { color: var(--alv-text-2); font-size: 13px; font-weight: 700; }
/* 16px 未満だと iOS がフォーカスで拡大する */
.alv-root.alv-viewer .alv-login input[type="text"], .alv-root.alv-viewer .alv-login input[type="password"] { font-size: 16px; }
.alv-viewer .alv-login .login-remember label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.alv-viewer .alv-login .login-remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--alv-accent); }
.alv-viewer .alv-login input[type="submit"] {
  width: 100%; min-height: 48px; margin: 0; padding: 0 18px; border: 0; border-radius: var(--alv-radius);
  background: var(--alv-accent); color: var(--alv-on-accent); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: none;
}
.alv-viewer .alv-login__page { color: var(--alv-text-2); font-size: 13px; text-align: center; }