/* 一起看：单方投屏。基础样式与导航复用 app.css。 */

/*
 * 画面区。高度靠自己撑住（不靠里面的 video），因为未共享时两个 video 都收着，
 * 只剩中间那层遮罩——没有这块底板，整个卡片会塌成一条。
 */
.theater {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--video-bg);
  box-shadow: 0 14px 34px -22px rgba(60, 40, 30, .6);
}

/* 两个 video 都铺满同一块画面区，谁有内容谁露面 */
.cast-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--video-bg);
}

/*
 * 把片子拖到画面上时的那层高亮。
 * 用伪元素盖，不动下面那几张遮罩各自的显隐规则——两边互不干扰。
 * 下面那层提示要同时收起来，否则两段字会叠在正中，谁也读不清。
 */
.theater.drop-active::after {
  content: '松开就开始播放';
  position: absolute;
  inset: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(255, 255, 255, .55);
  border-radius: calc(var(--radius) - 8px);
  background: rgba(18, 14, 12, .6);
  color: #fff;
  font-size: 14px;
}

.theater.drop-active .theater-drop { opacity: 0; }

/* 同一时刻只有一边有内容：自己投的时候看自己的播放器，看对方的时候看对方那条流 */
#view-watch[data-cast="source"] #cast-remote { display: none; }
#view-watch[data-cast="viewer"] #cast-local { display: none; }
#view-watch[data-cast="idle"] .cast-video { display: none; }

/* 还没共享时盖在画面上的一层。一开始共享就收起来，不挡画面。 */
.theater-drop {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 24px;
  border: none;
  border-radius: 0;
  background: linear-gradient(160deg, #332b26, #241e1a);
  color: rgba(255, 255, 255, .6);
  cursor: pointer;
  box-shadow: none;
  transition: background .16s, color .16s;
}

.theater-drop:hover:not(:disabled) {
  background: linear-gradient(160deg, #3b312b, #2a2320);
  border: none;
  color: #fff;
}

.theater-drop-icon svg {
  width: 42px;
  height: 42px;
  display: block;
  opacity: .8;
}

.theater-drop-main { font-size: 14.5px; }

.theater-drop-sub {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .4);
}

/*
 * 共享中的两个键：换片与停止。
 * 它们浮在画面上，所以用半透明深底 + 白字，自成一套，不跟页面上的 ghost 走。
 */
.cast-tools {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  gap: 8px;
}

.cast-tools .ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(24, 18, 15, .6);
  color: rgba(255, 255, 255, .9);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .15s, color .15s;
}

.cast-tools .ghost:hover {
  background: rgba(24, 18, 15, .84);
  color: #fff;
}

.cast-tools .ghost.danger:hover { background: rgba(120, 32, 32, .8); }

/*
 * 观看端的遥控条。
 * 对端画面是一条直播流，没有可以拖的时间轴——所以这条进度条是我们自己画的，
 * 拖动与暂停都发回源端执行。源端看不到它（他看的是自己那条原生控制条）。
 */
.cast-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
}

.cast-play {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: filter .15s;
}

.cast-play:hover { filter: brightness(1.06); }
.cast-play svg { width: 17px; height: 17px; display: block; }
.cast-play .icon-pause { display: none; }
.cast-play[data-playing="1"] .icon-play { display: none; }
.cast-play[data-playing="1"] .icon-pause { display: block; }

.cast-seek {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.cast-time {
  flex: none;
  font-size: 12.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  min-width: 84px;
  text-align: right;
}

#sync-state { margin-top: 16px; }
#sync-state:empty { display: none; }
#cast-note:empty { margin-top: 0; min-height: 0; }

/* 两边各自在做什么，摆在明面上 */
.pair {
  display: grid;
  gap: 2px;
  margin-top: 18px;
}

.pair-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 13.5px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.pair-k {
  flex: none;
  width: 66px;
  color: var(--ink-3);
  font-size: 12.5px;
}

.pair-v {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .theater-drop-icon svg { width: 34px; height: 34px; }
  .theater-drop-main { font-size: 13.5px; }
  .pair-row { font-size: 12.5px; }
  .pair-k { width: 60px; }
  .cast-bar { gap: 9px; padding: 8px 11px; }
  .cast-time { font-size: 12px; min-width: 72px; }
  /* 手机上「更换影片 / 停止共享」要按得到，别缩太小 */
  .cast-tools .ghost { padding: 7px 12px; }
}