/*
 * [INPUT]:  styles.css 的 design tokens (颜色/字体/圆角)
 * [OUTPUT]: MicTether 菜单栏弹出面板的纯 CSS 复刻 — 菜单栏 + 唯一面板(概要/优先级/回退/偏好/退出) + 后台拦截提示
 * [POS]:    样式层副文件; 承载落地页「Show, don't tell」的视觉证据 (产品仅此一块面板)
 * [PROTOCOL]: 变更时更新此头部, 然后检查 CLAUDE.md
 */

/* ════════════════════════ 菜单栏 + 面板容器 ════════════════════════ */
.macwrap { position: relative; max-width: 384px; margin: 0 auto; width: 100%; }

/* 菜单栏: 声锚常驻于此 (一道细条, 右对齐图标 + 时钟) */
.menubar {
  display: flex; align-items: center; justify-content: flex-end; gap: .7rem;
  height: 28px; padding: 0 .5rem; margin-bottom: 12px;
  background: rgba(255, 255, 255, .05); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: 8px;
}
.mb-anchor { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: rgba(44, 198, 218, .16); }
.mb-anchor svg { width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 1.8; }
.mb-anchor.ping { animation: mbping .6s var(--ease); }
@keyframes mbping { 0% { box-shadow: 0 0 0 0 rgba(44, 198, 218, .5); } 100% { box-shadow: 0 0 0 8px rgba(44, 198, 218, 0); } }
.mb-clock { font-family: var(--mono); font-size: .72rem; color: var(--ink-faint); }

/* 弹出面板: 暗色半透明 popover (无标题栏/红绿灯, 忠实 menu-bar 风格) */
.panel {
  background: linear-gradient(180deg, rgba(24, 28, 32, .96), rgba(16, 19, 22, .96));
  border: 1px solid var(--border-strong); border-radius: 16px;
  padding: 10px; display: grid; gap: 10px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .02);
}

/* 概要: app 图标 + 名称 + 状态 */
.pnl-summary {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface);
}
.pnl-appicon { width: 32px; height: 32px; border-radius: 8px; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .05); }
.ps-title { font-weight: 600; font-size: .95rem; }
.ps-sub { color: var(--ink-muted); font-size: .76rem; margin-top: .1rem; }

/* 分区卡: 麦克风优先级 / 音箱优先级 / 偏好设置 */
.pnl-sec {
  padding: .8rem .85rem; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); display: grid; gap: .55rem;
}
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sec-name { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .85rem; }
.sec-ico { width: 15px; height: 15px; fill: none; stroke: var(--ink); stroke-width: 1.7; flex: none; }
.sec-badge { font-size: .64rem; font-family: var(--mono); color: var(--ink-faint); letter-spacing: .03em; white-space: nowrap; }
.sec-div { height: 1px; background: var(--border); margin: .05rem 0; }
.sec-row, .pref-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .8rem; color: var(--ink-muted); min-height: 24px; }
.sec-pick {
  color: var(--ink); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 7px; padding: .26rem .55rem; font-size: .76rem;
  max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sec-pick.muted { color: var(--ink-faint); }
.sec-pick.off { color: var(--ink-faint); font-style: italic; }
.sec-stat { display: flex; align-items: center; gap: .45rem; font-size: .76rem; color: var(--ink-faint); }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot.ok { background: var(--green); box-shadow: 0 0 7px rgba(48, 209, 88, .6); }

/* 偏好行: 图标+标签 + 开关/选择/链接 */
.pref-l { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); }
.pref-ico { width: 14px; height: 14px; flex: none; }
.pref-ico.bolt { fill: var(--accent); }
.pref-ico.sun { fill: none; stroke: var(--green); stroke-width: 1.7; }
.pref-link { color: var(--accent); font-size: .8rem; }
.toggle { width: 36px; height: 21px; border-radius: 999px; background: var(--surface-2); position: relative; transition: background .2s; flex: none; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: left .2s var(--ease); }
.toggle.on { background: var(--accent); }
.toggle.on::after { left: 17px; }

/* 退出 */
.pnl-quit {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem; border: 1px solid var(--border); border-radius: 10px;
  background: rgba(255, 255, 255, .03); color: var(--ink); font-size: .85rem;
}
.quit-ico { width: 14px; height: 14px; fill: none; stroke: #ff6b6b; stroke-width: 1.7; flex: none; }

/* ════════════════════════ 后台拦截提示 (面板之外) ════════════════════════ */
.intercept-toast {
  position: absolute; top: 36px; right: 6px; z-index: 5;
  display: inline-flex; align-items: center; gap: .5rem; max-width: 66%;
  padding: .55rem .8rem; border-radius: 10px;
  background: rgba(20, 24, 28, .96); border: 1px solid rgba(44, 198, 218, .4);
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .7);
  font-size: .78rem; color: var(--ink);
  opacity: 0; transform: translateY(-10px) scale(.97); pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.intercept-toast.show { opacity: 1; transform: none; }
.it-ico { width: 15px; height: 15px; fill: none; stroke: var(--accent); stroke-width: 1.8; flex: none; }
.it-text { min-width: 0; }

/* ════════════════════════ 巡览卡: 同一面板的三个片段 ════════════════════════ */
.card-panel { padding: 1.2rem 1.2rem .4rem; background: var(--bg-2); }
.tour-card .card-panel { border-bottom: 1px solid var(--border); }
.pnl-sec.flat { background: var(--surface); }

/* ════════════════════════ 窄屏降级 ════════════════════════ */
@media (max-width: 560px) {
  .sec-pick { max-width: 56%; }
  .intercept-toast { max-width: 88%; font-size: .74rem; }
}

@media (prefers-reduced-motion: reduce) {
  .intercept-toast { transition: none; }
}