/* Robot camera window: the picture is drawn into the canvas underneath this frame. */
.robo-cam {
  /* --cam-w drives both sides (4:3). The 3px border and 14px radius match robotCam.js. */
  --cam-w: 256px;
  --cam-large: min(512px, calc(100vw - 32px), calc((100vh - 272px) * 4 / 3));
  position: fixed;
  top: 72px;   /* under the toast line; wide screens move it up beside the toast (below) */
  right: 16px;
  width: var(--cam-w);
  height: calc(var(--cam-w) * 0.75);
  border: 3px solid rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  box-shadow: var(--shadow);
  cursor: zoom-in;
  transition: width 0.25s, height 0.25s, top 0.25s;
}
.robo-cam[hidden] { display: none; }
.robo-cam.large { --cam-w: var(--cam-large); cursor: zoom-out; }
@media (min-width: 900px) {
  .robo-cam:not(.large) { top: 16px; }
}
@media (max-width: 640px) {
  /* Narrow windows: under the status panel and the toast, which sits lower here. */
  .robo-cam { top: 186px; --cam-w: 176px; --cam-large: min(calc(100vw - 32px), calc((100vh - 386px) * 4 / 3)); }
}

.robo-cam-badge, .robo-cam-stamp {
  position: absolute;
  font-family: -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  color: white;
  pointer-events: none;
}
.robo-cam-badge {
  left: 6px;
  top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(30, 22, 34, 0.55);
  font-size: 12px;
}
.robo-cam-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff5d6c;
  animation: robo-cam-rec 1.6s ease-in-out infinite;
}
@keyframes robo-cam-rec { 50% { opacity: 0.25; } }
.robo-cam-stamp {
  right: 9px;
  bottom: 6px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  opacity: 0.92;
  text-shadow: 0 1px 2px rgba(30, 22, 34, 0.75), 0 0 6px rgba(30, 22, 34, 0.45);
}

.toolbar #btn-cam:not(.on) { opacity: 0.55; }

@media (pointer: coarse) {
  /* Left column under the status panel and the toast: clear of the toolbar (right), the speech
     bubble and the joystick (bottom-left) on short phones too. */
  .robo-cam {
    --cam-w: 144px;
    --cam-large: max(144px, min(calc(100vw - 116px - var(--safe-left) - var(--safe-right)), calc((100dvh - 510px) * 4 / 3)));
    top: calc(196px + var(--safe-top));
    left: calc(12px + var(--safe-left));
    right: auto;
  }
  .robo-cam:not(.large) { top: calc(196px + var(--safe-top)); }
  .robo-cam-badge { font-size: 11px; padding: 2px 7px; }
  .robo-cam-stamp { font-size: 10px; }
  /* The controls hint sits under the small window and makes way for the large one. */
  body:not([data-cam='off']) .hint { top: calc(316px + var(--safe-top)); }
  body[data-cam='large'] .hint { opacity: 0; transition: opacity 0.2s; }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  /* Top-right corner; the large size stops short of the toast (centre) and the toolbar (bottom). */
  .robo-cam, .robo-cam:not(.large) {
    --cam-large: max(144px, min(calc(50vw - 150px), calc((100dvh - 120px) * 4 / 3)));
    top: calc(12px + var(--safe-top));
    left: auto;
    right: calc(14px + var(--safe-right));
  }
  body[data-cam='large'] .robo-say {
    width: calc(100vw - 104px - var(--safe-left) - var(--safe-right) - max(144px, min(calc(50vw - 150px), calc((100dvh - 120px) * 4 / 3))));
  }
}