/**
 * camera.css —— 录像预览（<video>）与"没画面"时的兜底外观。
 *
 * 为什么样式单独一个文件：`camera.js` 自己不太可能被 app.js 改样式，
 * 但预览区的尺寸、圆角、黑底属于"看一眼就知道对不对"的东西，
 * 混在 record.css 里会让人分不清哪条规则管摄像头。
 *
 * 类名 `pp-camera` 由 `camera.js` 在 open() 时自动加到传进来的 <video> 上
 * （close() 再摘掉），所以 index.html 里不需要加 class，也不需要改别人的文件。
 * 前缀用 `pp-` 而不是 `petphrase-`：这是本模块私有的展示层，不参与别处的样式约定。
 *
 * 只有一处讲究：**一定要给黑底**。摄像头还没出画面时 <video> 是透明的，
 * 页面背景直接透出来，看起来像"元素没渲染"；给个深色底，等待期的观感就正常了。
 */

.pp-camera {
  display: block;
  width: 100%;

  /* 16:9 与 pickVideoConstraints() 里 1280×720 的目标一致：
     在流还没上屏之前，容器就已经占好位置，不会让下面的按钮跳一下 */
  aspect-ratio: 16 / 9;

  /* 铺满并裁掉溢出：宁可裁边缘，也不要出现上下两条黑边（卡片照片抽的是完整帧，不受影响） */
  object-fit: cover;

  /* 未出画面时的底色：用品牌暖棕的深色版，比纯黑更贴这套配色 */
  background: #2B2320;

  /* 边框与圆角交给外层 .camera-frame：预览、声波、噪音提示是同一个"取景框"，
     各自画一圈边框会出现双线。这里只负责画面本身。 */

  /* 预览是"正在发生的事"，不能被拖选，也不该响应指针事件抢走按住录音的手势 */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* 手机竖屏下 16:9 会显得很扁，给个上限，别让它占掉整个屏幕 */
@media (max-width: 480px) {
  .pp-camera {
    max-height: 45vh;
  }
}