/* family-assist 指导端网页样式 v1.0.0 (?v=100) */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: #10141c;
  color: #e8ecf3;
  display: flex;
  flex-direction: column;
}

/* ---------- 顶栏 ---------- */
#topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #171d29;
  border-bottom: 1px solid #232c3d;
  flex-wrap: wrap;
}
.brand { font-size: 17px; font-weight: 700; letter-spacing: 1px; }
.badge {
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  background: #2a3245; color: #aab4c8; white-space: nowrap;
}
.badge.online  { background: #143a24; color: #6fe3a1; }
.badge.waiting { background: #3a3014; color: #ffd66f; }
.badge.calling { background: #14324a; color: #7ec8ff; animation: pulse 1.6s infinite; }
.badge.paused  { background: #451414; color: #ff8f8f; }
@keyframes pulse { 50% { opacity: .55; } }

.conn { margin-left: auto; display: flex; gap: 8px; align-items: center; }
#codeInput {
  width: 150px; padding: 9px 12px; font-size: 18px; letter-spacing: 4px;
  text-align: center; border-radius: 8px; border: 1px solid #313b50;
  background: #0d1119; color: #fff; outline: none;
}
#codeInput:focus { border-color: #4f8cff; }

button {
  cursor: pointer; border: none; border-radius: 8px;
  padding: 10px 16px; font-size: 15px; font-weight: 600;
  background: #2a3245; color: #e8ecf3; transition: filter .15s, transform .05s;
}
button:active { transform: scale(.97); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: #2f6fed; color: #fff; }
button.danger  { background: #d64545; color: #fff; }
button.warn    { background: #b07818; color: #fff; }

/* ---------- 视频区 ---------- */
#stage { flex: 1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 0; }
#videoWrap { position: relative; max-width: 100%; max-height: 100%; display: flex; }
#remoteVideo { max-width: 100%; max-height: 100%; display: block; background: #000; }
#overlay {
  position: absolute; inset: 0;
  touch-action: none;
  cursor: crosshair;
}
#overlay.mode-tap { cursor: pointer; }
#overlay.mode-none { cursor: default; }

.hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; color: #7c8699; font-size: 16px; line-height: 2;
  padding: 20px; pointer-events: none;
}
#stage.connected .hint { display: none; }

#toast {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; z-index: 30;
}
.toastItem {
  background: rgba(20, 26, 38, .92); border: 1px solid #35405a;
  padding: 8px 16px; border-radius: 8px; font-size: 14px;
  animation: fadein .2s;
}
.toastItem.warn { border-color: #8a5b1c; color: #ffd66f; }
.toastItem.err  { border-color: #8a2f2f; color: #ff9d9d; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } }

/* ---------- 工具栏 ---------- */
#toolbar {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: #171d29; border-top: 1px solid #232c3d;
}
.tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tool { font-size: 14px; padding: 9px 14px; }
.tool.active { background: #2f6fed; color: #fff; }

.actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.action { font-size: 14px; }
.action.key { background: #1f6e46; color: #fff; }

/* 小屏（手机浏览器指导）适配 */
@media (max-width: 600px) {
  .brand { font-size: 15px; }
  .conn { margin-left: 0; width: 100%; }
  #codeInput { flex: 1; width: auto; }
  .tool { padding: 9px 10px; font-size: 13px; }
}