/* BODHI Dashboard · css/asset-browser.css · 悬浮资产浏览器（📁）
   与 agent-chat.css 的悬浮窗同款几何（几何逻辑共用 js/ui/floating-panel.js），
   配色走 ui.css 的墨/金 token，暗色跟随 .dark。 */

/* ── 唤起钮：叠在制片助手（bottom:22）正上方 ───────────────────── */
.ab-fab {
  position: fixed;
  right: 22px;
  bottom: 90px;
  z-index: 90;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  background: linear-gradient(145deg, #fdfaf4 0%, #f2ece0 55%, #e3d9c6 100%);
  color: #6b5426;
  box-shadow:
    0 3px 5px rgb(120 95 50 / 0.16),
    0 8px 22px rgb(120 95 50 / 0.24),
    inset 0 1px 0 rgb(255 255 255 / 0.7);
  cursor: pointer;
  border: 1px solid rgb(var(--gold-500) / 0.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ab-fab:hover { transform: scale(1.07) translateY(-1px); }
.ab-fab:active { transform: scale(0.98); }
.ab-fab.is-open {
  background: linear-gradient(145deg, rgb(var(--gold-400)) 0%, rgb(var(--gold-500)) 60%, rgb(var(--gold-600)) 100%);
  color: #fdfaf4;
}
.dark .ab-fab {
  background: linear-gradient(145deg, #3a352d 0%, #2c2823 100%);
  color: #e7d9b8;
  border-color: rgb(var(--gold-500) / 0.5);
}
.dark .ab-fab.is-open { background: linear-gradient(145deg, #d4b07a 0%, rgb(var(--gold-600)) 100%); color: rgb(var(--ink-900)); }

/* ── 面板 ──────────────────────────────────────────────────────── */
.ab-panel {
  position: fixed;
  z-index: 91;
  display: flex;
  flex-direction: column;
  width: min(720px, calc(100vw - 32px));
  height: min(620px, calc(100vh - 48px));
  min-width: 360px;
  min-height: 320px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  background: #fffdf9;
  border: 1px solid rgb(214 204 186 / 0.9);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgb(60 45 20 / 0.22), 0 2px 6px rgb(60 45 20 / 0.10);
  overflow: hidden;
}
.ab-panel.hidden { display: none; }
.ab-panel.is-dragging { user-select: none; }
.ab-panel.is-full { border-radius: 0; border-width: 0; }
.ab-panel.is-full .ab-header { cursor: default; }
.ab-panel.is-full .ab-resize { display: none; }
.dark .ab-panel {
  background: #1f1c18;
  border-color: rgb(87 79 66 / 0.9);
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.5);
}

.ab-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #f7f2e8 0%, #f2ece0 100%);
  border-bottom: 1px solid rgb(214 204 186 / 0.8);
  cursor: grab;
  flex: 0 0 auto;
}
.ab-panel.is-dragging .ab-header { cursor: grabbing; }
.dark .ab-header {
  background: linear-gradient(180deg, #2a2621 0%, #232019 100%);
  border-bottom-color: rgb(87 79 66 / 0.8);
}
.ab-title { font-weight: 600; font-size: 13px; color: #4b3d22; white-space: nowrap; }
.dark .ab-title { color: #e7d9b8; }
.ab-hint { font-size: 11px; color: #9a8f7c; white-space: nowrap; }
.ab-count { margin-left: auto; }
.ab-head-actions { margin-left: auto; display: flex; gap: 2px; }

.ab-mini-btn {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1.4;
  color: #6b5f4a;
  cursor: pointer;
}
.ab-mini-btn:hover { background: rgb(var(--gold-500) / 0.14); border-color: rgb(var(--gold-500) / 0.3); }
.ab-mini-btn.is-active { background: rgb(var(--gold-500) / 0.22); border-color: rgb(var(--gold-500) / 0.45); }
.dark .ab-mini-btn { color: #cbbfa6; }

.ab-select, .ab-search {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgb(214 204 186 / 0.9);
  background: #fffdf9;
  color: #4b4034;
  max-width: 180px;
}
.ab-search { flex: 1 1 120px; min-width: 90px; }
.dark .ab-select, .dark .ab-search {
  background: #262219; border-color: rgb(87 79 66 / 0.9); color: #e5ddcc;
}

/* ── 工具条 ────────────────────────────────────────────────────── */
.ab-tools {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 7px 10px;
  border-bottom: 1px solid rgb(214 204 186 / 0.7);
  flex: 0 0 auto;
}
.dark .ab-tools { border-bottom-color: rgb(87 79 66 / 0.7); }
.ab-chips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ab-chips.hidden { display: none; }
.ab-tools-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ab-crumb { display: flex; align-items: center; gap: 6px; }
.ab-crumb.hidden { display: none; }
.ab-crumb-label { font-size: 12px; font-weight: 600; color: #6b5426; }
.dark .ab-crumb-label { color: #e0cfa6; }

/* ── 网格 ──────────────────────────────────────────────────────── */
.ab-body { flex: 1 1 auto; overflow: auto; padding: 10px; }
.ab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 9px;
}
.ab-card {
  border: 1px solid rgb(214 204 186 / 0.85);
  border-radius: 9px;
  overflow: hidden;
  background: #fffdf9;
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.ab-card:hover {
  border-color: rgb(var(--gold-500) / 0.75);
  box-shadow: 0 4px 14px rgb(120 95 50 / 0.16);
  transform: translateY(-1px);
}
.ab-card.is-folder { border-style: dashed; }
.dark .ab-card { background: #262219; border-color: rgb(87 79 66 / 0.85); }

.ab-thumb-wrap { position: relative; aspect-ratio: 16 / 9; background: #efe9dd; }
.dark .ab-thumb-wrap { background: #17150f; }
.ab-thumb, .ab-vthumb, .ab-vthumb video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ab-thumb-empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #9a8f7c;
}
.ab-badge {
  position: absolute; right: 4px; bottom: 4px;
  background: rgb(0 0 0 / 0.66); color: #fff;
  font-size: 10px; padding: 1px 5px; border-radius: 4px;
}
.ab-badge-folder { background: rgb(var(--gold-600) / 0.92); font-weight: 600; }
.ab-badge-lock { right: auto; left: 4px; background: rgb(0 0 0 / 0.5); }
.ab-copy {
  position: absolute; top: 4px; right: 4px;
  border: 0; border-radius: 5px; padding: 1px 5px;
  background: rgb(255 255 255 / 0.85);
  font-size: 11px; cursor: pointer;
  opacity: 0; transition: opacity .12s ease;
}
.ab-card:hover .ab-copy { opacity: 1; }
.dark .ab-copy { background: rgb(40 36 30 / 0.9); color: #e5ddcc; }

.ab-card-name {
  padding: 4px 6px 0;
  font-size: 11px; font-weight: 600; color: #4b4034;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ab-card-sub {
  padding: 0 6px 5px;
  font-size: 10px; color: #9a8f7c;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dark .ab-card-name { color: #e5ddcc; }

.ab-empty { padding: 26px 12px; text-align: center; font-size: 12px; color: #9a8f7c; }
.ab-more { padding: 10px; text-align: center; font-size: 11px; color: #9a8f7c; }

.ab-resize {
  position: absolute; right: 0; bottom: 0;
  width: 16px; height: 16px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 0 50%, rgb(var(--gold-500) / 0.55) 50% 62%,
                    transparent 62% 74%, rgb(var(--gold-500) / 0.55) 74% 86%, transparent 86%);
}

/* ── 视频播放浮层（lightbox 只吃图，视频段自带一层）────────────── */
.ab-play {
  position: fixed; inset: 0; z-index: 170;
  background: rgb(0 0 0 / 0.82);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.ab-play-box { max-width: min(1200px, 92vw); width: 100%; }
.ab-play-video {
  width: 100%; max-height: 78vh; background: #000; border-radius: 8px; display: block;
}
.ab-play-bar {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; color: #e5ddcc;
}
.ab-play-path {
  flex: 1 1 auto; font-size: 11px; word-break: break-all; color: #cbbfa6;
}
.ab-play-bar .ab-mini-btn { color: #e5ddcc; }
.ab-play-bar .ab-mini-btn:hover { background: rgb(255 255 255 / 0.14); }

/* ── 窄屏：面板铺满、唤起钮缩小并让开 Home 条 ──────────────────── */
@media (max-width: 640px) {
  .ab-fab {
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 64px);
    width: 42px; height: 42px; font-size: 17px;
  }
  .ab-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
}

/* 切片形态开关里「线稿图」那颗：本集一张线稿都没有时置灰但不隐藏
   —— 隐藏了就没人知道还有这么个形态。 */
.ab-viewbar .chip.is-disabled { opacity: .45; cursor: not-allowed; }
.ab-badge-line { right: auto; left: 4px; background: rgb(37 99 235 / 0.85); }

/* ── 音频类（ref-browse/audio.js）：无画面，图标 + 文件名占位；播放浮层复用 .ab-play ── */
.ab-athumb {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  background: linear-gradient(135deg, rgb(var(--gold-500) / 0.14), rgb(var(--ink-500) / 0.10));
}
.ab-athumb-ico { font-size: 26px; line-height: 1; }
.ab-athumb-name {
  max-width: 92%; font-size: 10px; color: #6b5426;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, monospace;
}
.dark .ab-athumb-name { color: #cbbfa6; }
.ab-play-box-audio { max-width: min(640px, 92vw); background: #1d1a15; border-radius: 10px; padding: 14px 16px; }
.ab-play-atitle { color: #e5ddcc; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.ab-play-asub { color: #cbbfa6; font-size: 12px; margin-bottom: 8px; white-space: pre-wrap; }
.ab-play-audio { width: 100%; display: block; }