/* 选项行、按钮行、视频卡片来自 assets/common.css，这里只补本页特有的东西 */
.option-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 12px 0;
}

.option-item {
  display: flex;
  align-items: center;
}

/* 字段说明问号：包住 label + 问号，给气泡一个定位基准，
   让气泡左沿对齐字段列而不是以问号为中心展开。
   问号不放 label 里面 —— 那样点问号会连带聚焦输入框 */
.label-with-help {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 6px;
}

/* 问号比字段行矮，上下各留几像素，鼠标从问号往下挪进气泡时正好从这段空档经过、hover 会断。
   补一块透明区域接上（横向不超出字段列，纵向只探到字段行底，不挡下面的控件） */
.label-with-help .field-help::after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: -6px;
  left: 0;
  right: 0;
}

.option-item select,
.option-item label {
  margin-left: 6px;
}

.option-item label:first-child {
  margin-left: 0;
}

/* 单个输入框占一行：左侧标签固定宽度，输入框吃掉剩余空间 */
.input-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0;
}

.input-line label {
  flex: 0 0 auto;
  white-space: nowrap;
}

.url-input {
  flex: 1 1 auto;
  min-width: 10rem;
  font-size: 0.8rem;
  color: #4f586b;
  border-radius: 8px;
  border: 1px solid #ced4da;
  padding: 6px;
}

.short-input {
  width: 9rem;
  font-size: 0.8rem;
  color: #4f586b;
  border-radius: 8px;
  border: 1px solid #ced4da;
  padding: 6px;
}

.status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 6px;
  font-size: 0.85rem;
  color: #4f586b;
}

.status-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #b6bbc6;
}

.status-line.publishing .status-dot {
  background-color: #52c41a;
}

.status-line.publishing #cdn-status-text {
  color: #237804;
}

/* 本页是三张视频卡片（本地摄像头 / 本地屏幕 / 远端），宽屏下公共样式会把卡片改成纵向铺满，
   窄屏下需要按三列铺开，所以要盖掉 common.css 的两列/一列宽度 */
@media screen and (max-width: 1279px) {
  .video-container .video-sub-container {
    width: calc(33.33% - 11px);
  }
}

@media screen and (max-width: 768px) {
  .video-container .video-sub-container {
    width: 100%;
  }
}

.domain-input {
  width: 12rem;
  font-size: 0.8rem;
  color: #4f586b;
  border-radius: 8px;
  border: 1px solid #ced4da;
  padding: 6px;
}

/* 没播的时候留一块大黑框没意义，等播放器真挂上了才由 setPlayStatus 加 .playing 露出来 */
.player-view {
  display: none;
  position: relative;
  aspect-ratio: 16 / 9;
  margin-top: 8px;
  background-color: #000000;
  border-radius: 8px;
  overflow: hidden;
}

.player-view.playing {
  display: block;
}

.player-view video,
.player-view canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.player-view video {
  object-fit: contain;
}

.status-line.playing .status-dot {
  background-color: #52c41a;
}

.status-line.playing #play-status-text {
  color: #237804;
}