/* ═══════════ 收藏盒 ═══════════ */

/* ── 顶栏按钮 ───────────────────────────────────────────────────────── */
.fav-topbtn{
  position:fixed; z-index:61;
  top:calc(env(safe-area-inset-top) + 6px);
  right:calc(max(4px, calc(50vw - 211px)) + 32px);
  width:28px; height:28px;
  background:transparent; border:0; padding:0;
  color:var(--text); opacity:.55; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  display:flex; align-items:center; justify-content:center;
}
.fav-topbtn:active{ opacity:1 }
.fav-topbtn svg{ width:18px; height:18px }
.fav-topbtn .fav-dot{
  position:absolute; top:3px; right:3px;
  width:6px; height:6px; border-radius:50%;
  background:var(--accent, #B57E86);
  display:none;
}
.fav-topbtn.has-items .fav-dot{ display:block }

/* banner 模式下顶栏更高更紧凑，按钮靠右一点 */
body[data-top="banner"] .fav-topbtn{
  top:calc(env(safe-area-inset-top) + 8px);
  right:calc(max(4px, calc(50vw - 211px)) + 34px);
}

/* ── 面板 ────────────────────────────────────────────────────────────── */
.fav-pop{
  position:fixed; inset:0; z-index:200;
  background:var(--frost-card, rgba(252,253,255,.92));
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  backdrop-filter:blur(18px) saturate(1.2);
  display:flex; flex-direction:column;
  overflow:hidden;
  transition:transform .28s cubic-bezier(.4,.0,.2,1), opacity .22s ease;
}
.fav-pop[hidden]{
  display:flex !important;
  transform:translateX(100%);
  opacity:0;
  pointer-events:none;
}
.fav-pop:not([hidden]){
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
}

.fav-head{
  display:flex; align-items:center; gap:8px;
  padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;
  border-bottom:1px solid var(--hairline, rgba(0,0,0,.06));
}
.fav-back{
  background:none; border:0; font-size:18px; color:var(--text);
  cursor:pointer; padding:4px 8px 4px 0;
}
.fav-title{
  flex:1; font-size:14px; letter-spacing:.12em; color:var(--text-dim);
}
.fav-count{
  font-size:11px; color:var(--text-dim); letter-spacing:.05em;
}

.fav-list{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:8px 12px calc(env(safe-area-inset-bottom) + 12px);
}
.fav-empty{
  text-align:center; color:var(--text-dim); font-size:13px;
  padding:40px 20px; line-height:2;
}

.fav-item{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 8px; border-bottom:1px solid var(--hairline, rgba(0,0,0,.06));
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.fav-item:active{ background:var(--frost-press, rgba(0,0,0,.03)) }
.fav-item-body{ flex:1; min-width:0 }
.fav-item-text{
  font-size:14px; color:var(--text); line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}
.fav-item-meta{
  margin-top:4px; font-size:10px; color:var(--text-dim); letter-spacing:.08em;
}
.fav-item-del{
  flex-shrink:0; background:none; border:0; color:var(--text-dim);
  font-size:16px; padding:4px 6px; cursor:pointer; opacity:.6;
}
.fav-item-del:active{ opacity:1; color:#d98a8a }

/* AI 感受 */
.fav-item-note{
  margin-top:5px; padding:6px 10px;
  background:var(--frost-press, rgba(0,0,0,.03));
  border-left:2px solid var(--accent, #B57E86);
  border-radius:0 8px 8px 0;
  font-size:12.5px; color:var(--text-dim); line-height:1.6;
  font-style:italic;
  word-break:break-word;
}