/* ============================================================================
 * 启未AI场景平台 V3 · 方案收藏夹样式（配套 plan-favorites.js）
 * 顶部按钮 / 方案卡爱心 / 复用卡徽标 / 浮层菜单 / 抽屉 / 对话框
 * 全部颜色走主题 CSS 变量，白 / 浅绿 / 深 三套主题自动适配。
 * ==========================================================================*/

/* ------------------------------- 顶部按钮 ------------------------------- */

/* 玻璃材质（backdrop-filter）会创建层叠上下文，把收藏夹浮层关进笼子；
   此处让承载浮层的操作区整体提升，浮层才能盖住下方方案卡 */
.prompt-head-actions { position: relative; z-index: 70; }
.fav-menu-wrap { position: relative; }

.fav-menu-btn,
.fav-batch-btn {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  font-size: 0.75rem; font-weight: 600; padding: 5px 9px;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.fav-menu-btn:hover,
.fav-batch-btn:hover { border-color: var(--accent-amber); color: var(--accent-amber); }

.fav-batch-btn {
  color: var(--accent-amber);
  border-color: var(--accent-amber);
  background: var(--accent-amber-soft);
}

/* --------------------------- 浮层菜单 / 抽屉 --------------------------- */

.fav-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 60;
  width: 280px; max-width: calc(100vw - 24px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
  display: flex; flex-direction: column; overflow: hidden;
}
.fav-menu-header {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.fav-menu-title {
  flex: 1; font-size: 0.78rem; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fav-menu-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 6px 10px; border-bottom: 1px solid var(--line);
}
.fav-menu-count { font-size: 0.7rem; color: var(--muted); }

.fav-menu-body {
  max-height: 300px; overflow-y: auto; padding: 4px;
}
.fav-menu-empty {
  font-size: 0.74rem; color: var(--muted); text-align: center;
  padding: 18px 10px; line-height: 1.6;
}
.fav-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: none; background: transparent; color: var(--text);
  font-size: 0.78rem; padding: 8px 9px; border-radius: var(--radius);
  cursor: pointer; transition: background .12s; text-align: left;
}
.fav-menu-item:hover { background: var(--brand-soft); }
.fav-menu-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-menu-item-count { font-size: 0.7rem; color: var(--muted); min-width: 16px; text-align: right; }
.fav-menu-item-arrow { color: var(--muted); font-size: 0.8rem; }

/* 抽屉条目 */
.fav-entry {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; border-radius: var(--radius); cursor: pointer;
  font-size: 0.76rem; transition: background .12s;
}
.fav-entry:hover { background: var(--brand-soft); }
.fav-entry-check { flex: none; accent-color: var(--accent-amber); cursor: pointer; }
.fav-entry-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.fav-entry-title {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600;
}
.fav-entry-date { font-size: 0.66rem; color: var(--muted); }

.fav-menu-footer {
  display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line);
}
.fav-menu-footer-split { justify-content: space-between; }

/* ------------------------------- 通用按钮 ------------------------------- */

.fav-btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  border-radius: var(--radius); font-size: 0.73rem; font-weight: 600;
  padding: 5px 10px; cursor: pointer; transition: all .15s;
}
.fav-btn:hover { border-color: var(--brand); }
.fav-btn:disabled { opacity: .4; cursor: not-allowed; }
.fav-btn-small { font-size: 0.7rem; padding: 3px 8px; }
.fav-btn-primary {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.fav-btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.fav-btn-primary:disabled { opacity: .45; }
.fav-btn-ghost { border-color: transparent; background: transparent; color: var(--muted); }
.fav-btn-ghost:hover { color: var(--brand); background: var(--brand-soft); }
.fav-btn-danger { border-color: var(--accent-rose); color: var(--accent-rose); background: transparent; }
.fav-btn-danger:hover { background: var(--accent-rose-soft); }

/* ----------------------------- 收藏对话框 ----------------------------- */

.fav-dialog-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .55);
  z-index: 200; display: flex; align-items: center; justify-content: center; padding: 12px;
}
.fav-dialog {
  width: 400px; max-width: 100%; max-height: calc(100vh - 48px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 16px 44px rgba(0, 0, 0, .28);
  display: flex; flex-direction: column; overflow: hidden;
}
.fav-dialog-title {
  margin: 0; padding: 11px 14px; font-size: 0.86rem; font-weight: 700; color: var(--text);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.fav-dialog-body {
  padding: 12px 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
}
.fav-dialog-actions {
  display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px;
  border-top: 1px solid var(--line);
}
.fav-dialog-plan {
  font-size: 0.78rem; font-weight: 700; color: var(--text);
  padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); overflow-wrap: anywhere;
}
.fav-dialog-list { margin: 0; padding-left: 18px; font-size: 0.75rem; color: var(--text); line-height: 1.7; }
.fav-dialog-row { font-size: 0.75rem; color: var(--text); line-height: 1.6; }
.fav-dialog-field { display: flex; flex-direction: column; gap: 4px; }
.fav-dialog-label { font-size: 0.71rem; color: var(--muted); }
.fav-dialog-hint { font-size: 0.68rem; color: var(--muted); line-height: 1.6; }
.fav-dialog-caution {
  font-size: 0.7rem; color: var(--accent-rose); line-height: 1.6;
  background: var(--accent-rose-soft); border-radius: var(--radius); padding: 7px 9px;
}
.fav-dialog-error {
  font-size: 0.72rem; color: var(--accent-rose); min-height: 1em; line-height: 1.5;
}

.fav-input {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); color: var(--text); font-size: 0.8rem;
  padding: 7px 10px; font-family: inherit;
}
.fav-input:focus { outline: none; border-color: var(--brand); }

/* 勾选行（管理收藏夹 / 调入卡位） */
.fav-check-rows { display: flex; flex-direction: column; gap: 4px; max-height: 210px; overflow-y: auto; }
.fav-check-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.76rem; color: var(--text); padding: 6px 8px;
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
  transition: background .12s;
}
.fav-check-row:hover { background: var(--brand-soft); }
.fav-check-row-input { accent-color: var(--accent-amber); cursor: pointer; flex: none; }
.fav-check-row-count { margin-left: auto; font-size: 0.68rem; color: var(--muted); }

/* 管理收藏夹行 */
.fav-manage-row { display: flex; align-items: center; gap: 6px; }
.fav-manage-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ----------------------- 方案标签收藏栏（调入不替换方案） ----------------------- */

.fav-loadbar {
  display: flex; flex-direction: column; gap: 6px;
  margin: 8px 0; padding: 8px 10px;
  border: 1px dashed var(--accent-amber); border-radius: var(--radius);
  background: var(--accent-amber-soft);
}
.fav-loadbar-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.fav-loadbar-title {
  font-size: 0.76rem; font-weight: 700; color: var(--accent-amber);
}
.fav-loadbar-hint {
  flex: 1; min-width: 120px; font-size: 0.68rem; color: var(--muted); line-height: 1.5;
}
/* 收藏栏提示警示（超出数量上限时） */
.fav-loadbar-hint.warn { color: var(--accent-rose); font-weight: 600; }
.fav-loadbar-list {
  display: flex; flex-direction: column; gap: 5px;
}
.fav-load-card {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 7px 80px 7px 10px;
  cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.fav-load-card:hover {
  border-color: var(--accent-amber);
  box-shadow: 0 0 0 2px var(--accent-amber-soft);
}
.fav-load-card.active {
  border-color: var(--accent-amber);
  background: var(--accent-amber-soft);
  box-shadow: 0 0 0 2px var(--accent-amber-soft);
}
/* 卡片第一行：这是什么产品（如「🪑 玄关桌」），醒目标明 */
.fav-load-card-product {
  font-size: 0.78rem; font-weight: 800; color: var(--accent-amber);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fav-load-card-label {
  font-size: 0.74rem; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fav-load-card-meta {
  font-size: 0.66rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 移除按钮：红色描边 + 红色文字，醒目（收藏夹原件不受影响） */
.fav-load-card-remove {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 0.68rem; font-weight: 700; color: var(--accent-rose);
  background: transparent; border: 1px solid var(--accent-rose);
  border-radius: 8px; cursor: pointer; padding: 3px 8px;
  transition: all .12s; white-space: nowrap;
}
.fav-load-card-remove:hover { color: #fff; background: var(--accent-rose); }

/* --------------------------- 方案卡爱心与复用 --------------------------- */

.fav-heart {
  position: static; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 17px; height: 17px; line-height: 15px; text-align: center;
  font-size: 0.82rem; color: var(--muted); cursor: pointer;
  background: transparent; border: none; border-radius: 50%;
  transition: color .15s, transform .15s; padding: 0;
}
.fav-heart:hover { color: var(--accent-amber); transform: scale(1.18); }
.fav-heart.faved { color: var(--accent-amber); }

/* 收藏复用卡：淡琥珀底 + 暖金边框（selected 蓝色优先级最高，不冲突） */
.plan-pill.plan-pill--favorite:not(.selected):not(.active) {
  border-color: var(--accent-amber);
  background: var(--accent-amber-soft);
}
.plan-pill.plan-pill--favorite:not(.selected):hover {
  border-color: var(--accent-amber);
  box-shadow: 0 0 0 2px var(--accent-amber-soft);
}

/* 「收藏复用」文字徽标 */
.fav-badge {
  display: inline-block; font-size: 0.58rem; font-weight: 700;
  color: var(--accent-amber); background: var(--accent-amber-soft);
  border: 1px solid var(--accent-amber); border-radius: 8px;
  padding: 0 5px; line-height: 1.5; margin-top: 1px; vertical-align: middle;
}
.fav-badge--edited {
  color: var(--accent-rose); background: var(--accent-rose-soft);
  border-color: var(--accent-rose);
}

/* 抽屉条目里的收藏徽标（管理对话框） */
.fav-entry .fav-badge { margin-left: 4px; }

/* ------------------------------- 窄屏适配 ------------------------------- */

@media (max-width: 560px) {
  .prompt-head-actions { flex-wrap: wrap; }
  .fav-menu { width: 270px; }
  .fav-load-card-label { max-width: none; }
  .fav-dialog { width: 100%; }
  .fav-menu-footer-split { flex-direction: column; align-items: stretch; }
  .fav-menu-footer-split .fav-btn { width: 100%; }
}