/* 详情浮层。
   从底部升起，盖在滑动模式的全屏播放器上 —— 媒体仍然在背后可见。 */

.sheet-wrap {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
}

.sheet-wrap__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  animation: sheet-fade .2s ease-out;
}

.sheet-wrap__panel {
  position: relative;
  width: 100%;
  max-height: 82dvh;
  background: var(--bg-elev);
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  animation: sheet-up .26s cubic-bezier(.22, .61, .36, 1);
  /* 顶到物理屏幕底部，露出 home indicator 区域时用它垫一下 */
  padding-bottom: var(--sab);
}

@keyframes sheet-fade { from { opacity: 0; } }
@keyframes sheet-up { from { transform: translateY(100%); } }

/* 顶部握把 —— iOS 上这是「可以下拉收起」的视觉暗示。
   当下只做视觉，收起靠点遮罩 / 返回手势 / 关闭按钮。 */
.sheet-wrap__grip {
  flex-shrink: 0;
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin: 8px auto 4px;
}

.sheet-wrap__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--bg-elev-2);
  color: var(--fg-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}
.sheet-wrap__close:active { transform: scale(.92); }
.sheet-wrap__close svg { display: block; }

.sheet-wrap__body {
  /* 自己滚，而且**不要把滚动链给背后的 feed** —— 否则拖浮层会带着全屏播放器一起动 */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 18px 20px;
  touch-action: pan-y;
}

/* ---------------------------------------------------------------- 内容 */

.sheet-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 40px 10px 0; /* 右侧给关闭按钮让位 */
}

.sheet-author { font-size: 14px; color: var(--fg-dim); margin-bottom: 12px; }

.sheet-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }

.sheet-desc {
  font-size: 15px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 14px;
}

.sheet-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }

.sheet-bgm {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-elev-2);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 14px;
}
.sheet-bgm__icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
}
.sheet-bgm__icon:active { transform: scale(.93); }
.sheet-bgm__icon svg { display: block; }
.sheet-bgm__text { flex: 1; min-width: 0; }
.sheet-bgm__title {
  font-weight: 600;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sheet-bgm__sub { font-size: 12px; color: var(--fg-faint); }

.sheet-bgm--missing { opacity: .75; }
.sheet-bgm__icon--dim {
  background: var(--bg-elev);
  color: var(--fg-faint);
  cursor: default;
  font-size: 16px;
}
.sheet-bgm__icon--dim:active { transform: none; }

.sheet-actions { display: flex; gap: 10px; margin-bottom: 18px; }
.sheet-actions .btn { flex: 1; }

/* 按钮下面的一句说明，比如「这条不在任何公开收藏夹里」。
   比正文小一号、灰一档；负的上边距是为了贴紧 .sheet-actions（它有 18px 下边距）。 */
.sheet-note {
  font-size: 12px;
  color: var(--fg-faint);
  line-height: 1.5;
  margin: -8px 0 18px;
}

/* 编辑视图。它和详情共用同一个浮层，所以样式也放在这儿。
   （.hint 只在 extract.css 里，首页加载不到，所以这里另起一个类名。） */
.edit-collections { display: flex; flex-wrap: wrap; gap: 8px; }

.edit-note {
  font-size: 13px;
  color: var(--fg-faint);
  line-height: 1.55;
  margin: 8px 0 0;
}
.edit-note a { color: var(--accent); }

.sheet-meta {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  font-size: 13px;
  color: var(--fg-dim);
  line-height: 1.9;
}
.sheet-meta__row { display: flex; gap: 10px; }
.sheet-meta__key { color: var(--fg-faint); flex-shrink: 0; width: 60px; }
.sheet-meta__val { flex: 1; min-width: 0; word-break: break-all; }
.sheet-meta a { color: var(--accent); }

.sheet-footer {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}