/* =====================================================================
   THE POAi — オペレーターとの音声通話(WebRTC)
   仕様書「通話可能な場合 / 通話中の画面 / サービス時間外」。琥珀ブラウンの全画面。
   チャット画面(concierge.css)と公開サイト(app.css)の両方で読み込むため、色はここで完結させる。
   ===================================================================== */
.call {
  --c-bg: #B77100; --c-bg-2: #A86700; --c-halo: #CD8E29; --c-band: #FFD38A; --c-core-line: #E0A445;
  --c-cream: #FCE7D2; --c-gold: #F3C14B; --c-ink: #1E1405; --c-on-bg: #1E1405; --c-soft: rgba(30, 20, 5, .62);
  --c-red: #FF3300; --c-red-dark: #7C0000;
  --lvl: 0;
  position: fixed; inset: 0; z-index: 100; display: flex; justify-content: center;
  background: radial-gradient(120% 80% at 50% 0%, #C27B0A 0%, var(--c-bg) 45%, var(--c-bg-2) 100%);
  color: var(--c-on-bg);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
  line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-y: auto;
  animation: call-in .28s cubic-bezier(.2, .7, .2, 1) both;
}
.call[hidden] { display: none !important; }
.call *, .call *::before, .call *::after { box-sizing: border-box; }
.call button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
.call :focus-visible { outline: 3px solid #FFF3D6; outline-offset: 3px; }

.call-screen { position: relative; width: min(430px, 100%); min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: max(28px, env(safe-area-inset-top)) 24px max(22px, env(safe-area-inset-bottom)); }

/* ---------- 上: THE POAi とマーク ---------- */
.call-head { display: grid; justify-items: center; gap: 18px; padding-top: 2vh; }
.call-brand { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 30px; font-weight: 400; letter-spacing: .02em; color: #000; line-height: 1.1; }
.call-mark { display: block; width: 132px; height: 103px; background: #000; -webkit-mask: url(../img/poa-mark.svg) center / contain no-repeat; mask: url(../img/poa-mark.svg) center / contain no-repeat; }

/* ---------- 中央: リング・状態・ダイアログ ---------- */
.call-stage { position: relative; display: grid; align-content: center; justify-items: center; gap: 18px; min-height: 340px; padding: 18px 0; }

.call-ring { position: relative; width: 236px; height: 236px; display: none; }
.call-ring > span { position: absolute; inset: 0; margin: auto; border-radius: 50%; will-change: transform; }
.call-halo { width: 236px; height: 236px; background: var(--c-halo); opacity: .9; transform: scale(calc(.86 + var(--lvl) * .2)); transition: transform 70ms linear; }
.call-band { width: 150px; height: 150px; background: var(--c-bg); border: 20px solid var(--c-band); box-shadow: 0 0 0 9px var(--c-bg); transform: scale(calc(1 + var(--lvl) * .16)); transition: transform 70ms linear; }
.call-core { width: 108px; height: 108px; display: grid; place-items: center; }
.call-core i { display: block; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--c-core-line); transform: scale(calc(1 + var(--lvl) * .5)); transition: transform 70ms linear; }

.call-info { display: none; text-align: center; min-height: 72px; }
.call-status { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--c-ink); }
.call-timer { margin: 0; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .08em; color: var(--c-ink); }
.call-sub { margin: 2px 0 0; font-size: 12px; color: var(--c-soft); }

.call-dialog { display: none; width: min(300px, 100%); padding: 22px 22px 18px; border-radius: 18px; background: var(--c-cream); color: var(--c-ink); box-shadow: 0 10px 30px rgba(60, 30, 0, .22); animation: call-pop .22s ease-out both; }
.call-dialog p { margin: 0; word-break: auto-phrase; font-size: 14px; letter-spacing: .03em; line-height: 1.8; }
.call-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.call .call-pill { padding: 9px 10px; border-radius: 999px; background: var(--c-gold) !important; color: var(--c-ink) !important; font-weight: 700 !important; font-size: 14px; letter-spacing: .04em; box-shadow: 0 2px 0 rgba(120, 70, 0, .25); transition: transform .1s, filter .15s; }
.call-pill:hover { filter: brightness(1.05); }
.call-pill:active { transform: translateY(1px); }
.call .call-link { display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: #8A5300 !important; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 下: 切断ボタン ---------- */
.call-foot { display: grid; justify-items: center; gap: 12px; padding-bottom: 2vh; min-height: 120px; }
.call-hangup { display: none; width: 76px; height: 76px; border-radius: 50%; transition: transform .1s; }
.call-hangup svg { display: block; width: 100%; height: 100%; }
.call-hangup circle { fill: var(--c-red); stroke: var(--c-red-dark); stroke-width: 2.5; }
.call-hangup path { stroke: var(--c-red-dark); stroke-width: 6.5; stroke-linecap: butt; fill: none; }
.call-hangup:hover circle { fill: #FF4A1C; }
.call-hangup:active { transform: scale(.95); }
.call-demo-note { margin: 0; max-width: 300px; text-align: center; font-size: 11px; color: var(--c-soft); }
.call-rec-note { display: none; margin: 0; max-width: 300px; text-align: center; font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--c-ink); }
.call[data-state="confirm"] .call-rec-note, .call[data-state="mic"] .call-rec-note, .call[data-state="queued"] .call-rec-note,
.call[data-state="connecting"] .call-rec-note, .call[data-state="incall"] .call-rec-note, .call[data-state="incoming"] .call-rec-note { display: block; }

/* ---------- 状態ごとの表示 ----------
   confirm 確認 / closed 時間外 / mic マイク許可待ち / queued 呼び出し中 / connecting 接続中 /
   incall 通話中 / busy 混雑 / incoming 着信 / ended 終了 / error エラー */
.call[data-state="confirm"] .call-dialog[data-for="confirm"],
.call[data-state="closed"] .call-dialog[data-for="closed"],
.call[data-state="busy"] .call-dialog[data-for="busy"],
.call[data-state="incoming"] .call-dialog[data-for="incoming"],
.call[data-state="ended"] .call-dialog[data-for="ended"],
.call[data-state="error"] .call-dialog[data-for="error"] { display: block; }
.call[data-state="queued"] .call-ring, .call[data-state="connecting"] .call-ring, .call[data-state="incall"] .call-ring, .call[data-state="incoming"] .call-ring { display: block; }
.call[data-state="mic"] .call-info, .call[data-state="queued"] .call-info, .call[data-state="connecting"] .call-info, .call[data-state="incall"] .call-info { display: block; }
.call[data-state="mic"] .call-hangup, .call[data-state="queued"] .call-hangup, .call[data-state="connecting"] .call-hangup, .call[data-state="incall"] .call-hangup,
.call[data-state="closed"] .call-hangup, .call[data-state="busy"] .call-hangup, .call[data-state="error"] .call-hangup, .call[data-state="ended"] .call-hangup { display: block; }
.call[data-state="incall"] .call-mute, .call[data-state="connecting"] .call-mute { display: grid; }

/* 呼び出し中・接続中・着信中: リングがゆっくり脈打つ */
.call[data-state="queued"] .call-halo, .call[data-state="connecting"] .call-halo, .call[data-state="incoming"] .call-halo { animation: call-ringing 1.3s ease-in-out infinite; }
.call[data-state="queued"] .call-band, .call[data-state="connecting"] .call-band, .call[data-state="incoming"] .call-band { animation: call-ringing-band 1.3s ease-in-out infinite; }
.call[data-state="incoming"] .call-halo { animation-duration: .8s; }
.call[data-state="incoming"] .call-stage { gap: 26px; }

/* 下の操作: ミュート(通話中)と切断 */
.call-controls { display: flex; align-items: center; justify-content: center; gap: 28px; }
.call-mute { display: none; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--c-cream) !important; color: var(--c-ink) !important; box-shadow: 0 2px 0 rgba(90, 50, 0, .25); }
.call-mute .call-mute-slash { display: none; }
.call-mute[aria-pressed="true"] { background: var(--c-ink) !important; color: var(--c-cream) !important; }
.call-mute[aria-pressed="true"] .call-mute-slash { display: inline; }

/* 混雑・着信のダイアログ */
.call-note { margin-top: 10px !important; font-size: 12.5px !important; color: rgba(30, 20, 5, .72); }
.call-busy-actions { display: grid; gap: 8px; margin-top: 16px; }
.call .call-pill.is-quiet { background: transparent !important; border: 1.5px solid #C79A3A !important; box-shadow: none; }
.call .call-pill.is-accept { background: #3FA34D !important; color: #fff !important; }
.call .call-pill.is-decline { background: var(--c-red) !important; color: #fff !important; }
.call-dialog[data-for="incoming"] p { text-align: center; font-size: 15px; }
.call[data-state="busy"] .call-demo-note, .call[data-state="incoming"] .call-demo-note { visibility: hidden; }

@keyframes call-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes call-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes call-ringing { 0%, 100% { transform: scale(.84); opacity: .75; } 50% { transform: scale(1); opacity: .95; } }
@keyframes call-ringing-band { 0%, 100% { transform: scale(.97); } 50% { transform: scale(1.04); } }

@media (max-height: 700px) {
  .call-head { gap: 10px; padding-top: 0; }
  .call-mark { width: 104px; height: 81px; }
  .call-stage { min-height: 280px; gap: 12px; }
  .call-ring { width: 200px; height: 200px; }
  .call-halo { width: 200px; height: 200px; }
  .call-band { width: 128px; height: 128px; border-width: 17px; }
  .call-foot { min-height: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .call, .call-dialog { animation: none; }
  .call-halo, .call-band { animation: none !important; }
  .call-halo, .call-band, .call-core i { transition: none; }
}
body.call-open { overflow: hidden; }

/* ---------- Telegram のリンクから開く参加ページ(calls/join) ---------- */
body.join-body { background: #B77100; }
.call.join { position: relative; min-height: 100vh; min-height: 100dvh; animation: none; }
.join [data-phase-for] { display: none; }
.join[data-phase="lobby"] [data-phase-for="lobby"], .join[data-phase="done"] [data-phase-for="done"] { display: block; }
.join[data-phase="live"] .join-live, .join[data-phase="live"] .call-ring { display: block; }
.join[data-phase="live"] .call-foot[data-phase-for="live"] { display: grid; }
.join[data-phase="live"] .call-hangup { display: block; }
.join[data-phase="live"][data-role="talk"] .call-mute { display: grid; }
.join .call-head { gap: 10px; }
.join .call-mark { width: 96px; height: 75px; }
.join-live { text-align: center; }
.join-title { font-size: 18px !important; font-weight: 700; }
.join-status { margin-top: 2px !important; color: rgba(30, 20, 5, .75); }
.join-people { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.join-people li { padding: 2px 10px; border-radius: 999px; background: rgba(183, 113, 0, .14); font-size: 12.5px; }
.join-people.is-live { justify-content: center; margin-top: 10px; }
.join-people.is-live li { background: rgba(255, 255, 255, .28); }
.join-field { display: grid; gap: 4px; margin-top: 14px; font-size: 12.5px; color: rgba(30, 20, 5, .8); }
.join-field input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1.5px solid #D9B27A; background: #fff; font: inherit; font-size: 16px; color: #1E1405; }
.join-field input:focus { outline: none; border-color: #B77100; box-shadow: 0 0 0 3px rgba(255, 163, 0, .3); }
.join-actions { display: grid; gap: 8px; margin-top: 14px; }
.join-warn { font-size: 11.5px !important; }
.join .call-dialog { width: min(340px, 100%); }

/* ---------- 映像(第 2 弾): 帯・タイル・カメラのボタン ----------
   タイルは call-mesh.js の VideoTiles が作る(.cv-tile)。管理画面は admin.css に同じ形がある */
.call-video-band { margin: 0; width: min(340px, 100%); padding: 10px 14px; border-radius: 14px; background: var(--c-cream); color: var(--c-ink); font-size: 12.5px; font-weight: 600; line-height: 1.6; text-align: center; white-space: pre-line; box-shadow: 0 6px 18px rgba(60, 30, 0, .18); }
.call-video-band[hidden] { display: none; }
.call-video-switch { font-size: 13px; }
.call-video-switch[hidden] { display: none !important; }
.call-video-switch[disabled] { opacity: .6; cursor: progress; }
.cv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; width: min(380px, 100%); }
.cv-tiles[hidden] { display: none; }
.cv-tile { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: #1E1405; aspect-ratio: 16 / 9; }
.cv-tile[hidden] { display: none; }
.cv-tile video { display: block; width: 100%; height: 100%; object-fit: cover; background: #1E1405; }
.cv-tile.is-self { grid-column: auto; }
.cv-tile.is-self video { transform: scaleX(-1); }
/* バックのカメラは左右反転しない(operator-call.js が会員の画面の箱に is-back を付ける) */
.cv-tiles.is-back .cv-tile.is-self video { transform: none; }
.cv-tile figcaption { position: absolute; left: 6px; bottom: 4px; padding: 0 8px; border-radius: 999px; background: rgba(30, 20, 5, .6); color: #FCE7D2; font-size: 11px; line-height: 1.6; }
.cv-empty { grid-column: 1 / -1; margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .28); font-size: 12px; text-align: center; color: var(--c-ink); }
.cv-empty[hidden] { display: none; }
.call.has-video .call-ring { display: none !important; }
.call.has-video .call-stage { align-content: start; }
/* 映像のタイルが入って背の高さが画面を超えたら、下のボタン(カメラ・切断)に重ねずに画面ごとスクロールさせる
   (.call は flex で、子の高さが画面の高さに固定されて中身がはみ出していた) */
.call.has-video .call-screen { align-self: flex-start; }
.call-cam { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--c-cream) !important; color: var(--c-ink) !important; box-shadow: 0 2px 0 rgba(90, 50, 0, .25); }
.call-cam[hidden] { display: none !important; }
.call-cam[disabled] { opacity: .6; cursor: progress; }
.call-cam .call-cam-slash { display: inline; }
.call-cam[aria-pressed="true"] { background: var(--c-gold) !important; }
.call-cam[aria-pressed="true"] .call-cam-slash { display: none; }
/* カメラの切り替えのボタンが出て 4 つ並ぶときは間を詰める(幅の狭い端末で切断のボタンがはみ出さないように) */
.call-controls:has(.call-flip:not([hidden])) { gap: 18px; }
@media (max-width: 360px) { .call-controls:has(.call-flip:not([hidden])) { gap: 10px; } }
.join-ver { font-size: 10px !important; opacity: .7; }