/* 通話ページ。iOS 12 にない flex の gap と dvh は使わない */
html, body { margin: 0; height: 100%; background: #2b1f24; color: #fff; overflow: hidden; }
body {
  font-family: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  -webkit-text-size-adjust: 100%;
}
button { font: inherit; -webkit-appearance: none; border: 0; cursor: pointer; }

#remote { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; background: #2b1f24; }
#local {
  position: fixed; right: 12px; top: 12px; top: calc(12px + env(safe-area-inset-top));
  width: 96px; height: 128px; object-fit: cover; border-radius: 12px; background: #000;
  -webkit-transform: scaleX(-1); transform: scaleX(-1); /* 鏡のように見せる */
  display: none;
}
body.video #local { display: block; }
body.incall.video #panel { background: none; }
body.incall.video #peer, body.incall.video #status { text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }

#panel {
  position: fixed; left: 0; right: 0; top: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; text-align: center; background: #2b1f24;
}
body.incall.video #panel { top: auto; bottom: 120px; padding: 12px; }
#peer { font-size: 30px; font-weight: 700; }
#status { margin-top: 10px; font-size: 17px; color: #f8bbd0; line-height: 1.6; white-space: pre-line; }
#actions { margin-top: 24px; width: 100%; max-width: 320px; }
#actions > * + * { margin-top: 12px; }
.big {
  display: block; width: 100%; padding: 16px; border-radius: 14px; font-size: 19px; font-weight: 700;
  background: #f06292; color: #fff;
}
.big.sub { background: #5a4650; }

#controls {
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 16px 0 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom));
  display: flex; justify-content: center;
}
#controls[hidden] { display: none; }
.ctl {
  width: 72px; height: 72px; margin: 0 12px; border-radius: 50%;
  background: rgba(255, 255, 255, .22); color: #fff; font-size: 26px; line-height: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ctl span { font-size: 11px; margin-top: 4px; }
.ctl.off { background: #fff; color: #2b1f24; }
.ctl.end { background: #e53935; }