/* ============================================================
   手机演示 + 首屏设备图 专用样式（依赖 css/theme.css 变量）
   ============================================================ */

/* ---------- 首屏设备图 ---------- */
.hero-device { position: relative; }
.hero-device img { width: 100%; height: auto; }
.float-tag {
  position: absolute; padding: 6px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface-solid) 88%, transparent);
  border: 1px solid var(--border-strong); color: var(--text);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  box-shadow: var(--shadow); backdrop-filter: blur(6px);
}
.float-tag::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-2); margin-right: 7px; vertical-align: 1px;
}
.float-tag.t1 { top: 4%; left: 0; animation: float 6s ease-in-out infinite; }
.float-tag.t2 { bottom: 3%; right: -2%; animation: float 6s ease-in-out infinite .8s; }
.hero-device { max-width: 560px; margin-inline: auto; }
@keyframes float { 50% { transform: translateY(-8px); } }
@media (max-width: 520px) {
  .float-tag { font-size: 11.5px; padding: 5px 10px; }
  .float-tag.t1 { left: 0; }
}

/* ---------- 语速下拉 ---------- */
.rate-select {
  padding: 6px 10px; border-radius: 8px; font-size: 13px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border-strong);
}

/* ---------- 屏幕内的 AI 指令浮层 ---------- */
.instr-card {
  position: absolute; left: 10px; right: 10px; top: 50px; z-index: 13;
  background: rgba(12, 20, 34, .93); color: #e9f1ff;
  border: 1px solid rgba(77, 141, 255, .55); border-radius: 12px;
  padding: 10px 12px; font-size: 11.6px; line-height: 1.55;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .38);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.instr-card.show { opacity: 1; transform: none; }
.instr-card b {
  display: block; font-size: 10px; letter-spacing: .1em; color: #7fb4ff;
  margin-bottom: 4px; font-weight: 700;
}

/* ---------- 键盘弹出时压缩应用区 ---------- */
.phone-screen.kb-open .app-view { bottom: 232px; }
.phone-screen.kb-open .mo-feed { border-bottom: 1px solid #e6e6e6; }
@media (max-width: 420px) {
  .phone-screen.kb-open .app-view { bottom: 208px; }
  .instr-card { font-size: 11px; }
}

/* ---------- 朋友圈容器 ---------- */
.mo-wrap { display: flex; flex-direction: column; }
.mo-wrap .mo-feed { flex: 1; overflow-y: auto; }
.mo-wrap .wx-inputbar[hidden] { display: none; }
.mo-wrap .wx-inputbar { background: #f7f7f7; }

/* 被点击的行高亮 */
.wx-row.tapped { background: #e8e8e8; }
.mo-post.tapped { background: #fafafa; }

/* 聊天区滚动条弱化 */
.wx-chat-body::-webkit-scrollbar, .mo-feed::-webkit-scrollbar, .call-body::-webkit-scrollbar,
.steps::-webkit-scrollbar, .voice-menu::-webkit-scrollbar { width: 6px; }
.wx-chat-body::-webkit-scrollbar-thumb, .mo-feed::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .18); border-radius: 3px; }
.call-body::-webkit-scrollbar-thumb, .steps::-webkit-scrollbar-thumb, .voice-menu::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 3px;
}

/* 播放中的按钮状态 */
.icon-btn.playing { background: var(--accent); color: var(--on-accent); border-color: transparent; }