/*
 * VCE 拖放設計語言 (drag-ui)
 * 答題頁與製題頁共用的拖放視覺元件庫
 *
 * 核心原則（出自 uxdesign.cc 設計系統文章）：
 *   1. 統一識別色：紫色專用於所有拖放互動狀態，避免與藍（可點擊）、紅（刪除）衝突
 *   2. 狀態樣式：dragging / previous / invalid 各自有明確視覺
 *   3. 游標策略：grab / grabbing / not-allowed
 *   4. Position Drop Target：插入指示線帶圓形端點，對色盲友善
 *
 * 元件類別：
 *   .dd-chip        可拖物件（淡藍底選項）
 *   .dd-slot        放置區（淡黃底容器）
 *   .dd-handle      6 點拖曳把手
 *   .dd-pool        選項池容器（chip 列表）
 *   .dd-target      target 群組容器（slot 列表）
 *   .dd-insertion   排序時的插入指示線
 */

:root {
  /* 識別色：紫色是 drag 互動的專用色 */
  --dd-purple: #7b5cb8;
  --dd-purple-soft: #e9e1f4;
  --dd-purple-glow: rgba(123, 92, 184, 0.28);

  /* Source（可拖）底色：淡青 #CCFFFF */
  --dd-source-bg: #ccffff;
  --dd-source-bg-hover: #aaeeee;
  --dd-source-border: #6fa3bd;
  --dd-source-text: #0f2a36;

  /* Target（放置）底色：明亮黃與拖放區灰底形成強烈對比 */
  --dd-target-bg: #ffe289;
  --dd-target-bg-empty: #fff6c9;
  --dd-target-border: #c9a44e;
  --dd-target-text: #3d2f08;

  /* Zone 背景（底色）*/
  --dd-pool-bg: #dbe6ec;           /* 來源區底：冷灰藍 */
  --dd-code-bg: #ffffff;           /* 拖圖區底：純白 */
  --dd-code-border: #1874ff;       /* 拖圖區框線：藍色 #1874FF */
  --dd-sap-color: #1874ff;         /* "Select and Place:" 標籤色 */

  /* 無效放置 */
  --dd-invalid: #c74c4c;

  /* 尺寸：chip/slot 基本高度，確保內容有呼吸空間、垂直置中視覺 */
  --dd-chip-radius: 4px;
  --dd-slot-radius: 4px;
  --dd-chip-min-height: 36px;
  --dd-slot-min-height: 40px;
  --dd-gap: 6px;
}

/* ─────────────────────────────────────────────
 * Chip：可拖物件
 * ───────────────────────────────────────────── */
.dd-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--dd-chip-min-height);
  padding: 3px 10px;
  font-family: "Liberation Sans", "Liberation Serif", Arial, sans-serif;
  background-color: var(--dd-source-bg);
  border: 1px solid var(--dd-source-border);
  border-radius: var(--dd-chip-radius);
  color: var(--dd-source-text);
  font-size: 0.875rem;
  line-height: 1.3;
  cursor: grab;
  user-select: none;
  transition: background-color 0.12s, box-shadow 0.12s, border-color 0.12s;
}

.dd-chip:hover {
  background-color: var(--dd-source-bg-hover);
}

.dd-chip:focus-visible {
  outline: 2px solid var(--dd-purple);
  outline-offset: 2px;
}

/* 拖動中狀態：微陰影「像被拿起來」 */
.dd-chip.is-dragging,
.dd-chip.sortable-chosen {
  cursor: grabbing;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  border-color: var(--dd-purple);
  background-color: var(--dd-source-bg-hover);
}

/* Previous state：原位置留下淡化 ghost */
.dd-chip.sortable-ghost {
  opacity: 0.35;
  background-color: var(--dd-purple-soft);
  border-style: dashed;
  border-color: var(--dd-purple);
  color: transparent;
}
.dd-chip.sortable-ghost .dd-handle,
.dd-chip.sortable-ghost .dd-chip-remove {
  visibility: hidden;
}

/* 跟手的半透明複本（SortableJS fallback） */
.dd-chip.sortable-drag {
  opacity: 0.9;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

.dd-chip-label {
  flex: 1 1 auto;
  word-break: break-word;
  white-space: normal;
  text-align: center;
}

/* 誘答選項視覺提示（僅編輯頁顯示） */
.dd-chip[data-distractor="true"]::after {
  content: "誘答";
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 6px;
  background-color: var(--dd-purple);
  color: #fff;
  border-radius: 2px;
  margin-left: 4px;
}

/* Chip 內的移除按鈕（製題時用） */
.dd-chip-remove {
  all: unset;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  color: var(--dd-source-text);
  cursor: pointer;
  opacity: 0.55;
  font-size: 0.95rem;
  line-height: 1;
}
.dd-chip-remove:hover,
.dd-chip-remove:focus-visible {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.08);
  outline: none;
}

/* ─────────────────────────────────────────────
 * Drag handle：6 點把手
 * ───────────────────────────────────────────── */
.dd-handle {
  flex: 0 0 auto;
  width: 12px;
  height: 14px;
  cursor: grab;
  color: var(--dd-source-text);
  opacity: 0.55;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dd-handle:hover {
  opacity: 1;
}
.dd-handle svg {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.dd-chip.is-dragging .dd-handle,
.dd-chip.sortable-chosen .dd-handle {
  cursor: grabbing;
}

/* ─────────────────────────────────────────────
 * Slot：放置區（淡黃）
 * ───────────────────────────────────────────── */
.dd-slot {
  min-height: var(--dd-slot-min-height);
  padding: 6px 10px;
  background-color: var(--dd-target-bg-empty);
  border: 1.5px dashed var(--dd-target-border);
  border-radius: var(--dd-slot-radius);
  color: var(--dd-target-text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--dd-gap);
  text-align: center;
  font-family: "Liberation Sans", "Liberation Serif", Arial, sans-serif;
  transition: background-color 0.12s, border-color 0.12s, box-shadow 0.12s;
}

/* 有 chip 在裡面：底色與邊框皆透明，只留 chip 本身（避免 chip 外圍再出現一圈深黃） */
.dd-slot:not(:empty):not(.dd-slot-empty-stub) {
  background-color: transparent;
  border-color: transparent;
}

/* 拖到此 slot 時的 hover（SortableJS sortable-over） */
.dd-slot.sortable-over,
.dd-slot.dd-slot-active {
  border-style: solid;
  border-color: var(--dd-purple);
  box-shadow: 0 0 0 3px var(--dd-purple-glow);
  background-color: var(--dd-target-bg);
}

/* 無效放置區 */
.dd-slot.dd-slot-invalid {
  border-color: var(--dd-invalid);
  cursor: not-allowed;
}

/* 空 slot 的佔位提示字 */
.dd-slot[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--dd-target-text);
  opacity: 0.45;
  font-size: 0.8125rem;
  align-self: center;
}

/*
 * Slot 內建標籤（data-dd-label）
 * 把固定文字（例如「10.10.13.128」）顯示在 slot 內作為身份標籤，
 * 學員把 chip 拖進來補齊答案。對應 A674 一對一題型的原生樣式。
 */
.dd-slot[data-dd-label]::before {
  content: attr(data-dd-label);
  color: var(--dd-target-text);
  font-weight: 500;
  align-self: center;
  padding-right: 10px;
  flex-shrink: 0;
}
.dd-slot[data-dd-label]:not(:empty)::before {
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  margin-right: 10px;
}
/* 有內建標籤時，不顯示 data-placeholder（兩者語意重複） */
.dd-slot[data-dd-label][data-placeholder]:empty::before {
  content: attr(data-dd-label);
  opacity: 1;
  font-size: inherit;
}

/* Slot 裡的 chip 呈現略收斂，保持 slot 的黃框主視覺 */
.dd-slot .dd-chip {
  flex: 1 1 auto;
  min-height: calc(var(--dd-slot-min-height) - 14px);
}

/* ─────────────────────────────────────────────
 * Source slot：可拖來源的「家」
 * chip 被拖走後，原位置仍保留 slot 形狀（不塌陷）
 * ───────────────────────────────────────────── */
.dd-source-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--dd-chip-min-height);
  border-radius: var(--dd-chip-radius);
  text-align: center;
  transition: background-color 0.12s, border-color 0.12s, box-shadow 0.12s;
}
/* 空家：顯示淡青虛線輪廓，維持原 chip 形狀 */
.dd-source-slot:empty {
  border: 1px dashed var(--dd-source-border);
  background-color: var(--dd-source-bg);
}
/* 拖動中的 target 回饋（當 chip 要放回空的家時） */
.dd-source-slot.sortable-over {
  border-style: solid;
  border-color: var(--dd-purple);
  box-shadow: 0 0 0 3px var(--dd-purple-glow);
  background-color: var(--dd-source-bg);
}
.dd-source-slot .dd-chip {
  flex: 1 1 auto;
}

/* ─────────────────────────────────────────────
 * Pool：純佈局容器，沒有自己的底色與邊框（避免多一層視覺）
 * ───────────────────────────────────────────── */
.dd-pool {
  display: flex;
  flex-direction: column;
  gap: var(--dd-gap);
}

/* 橫向選項池（drag_blank 用） */
.dd-pool.dd-pool-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}

/* Pool 拖入時的高亮（僅在允許 move 回 pool 時） */
.dd-pool.sortable-over {
  outline: 2px solid var(--dd-purple);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────
 * Area wrapper：整個「拖圖區」的外框（白底 + 藍框）
 * 給 drag / drag_category 包住左右兩欄；drag_blank 由 .dd-code-block 取代
 * ───────────────────────────────────────────── */
.dd-area {
  background-color: var(--dd-code-bg);
  border: 1.5px solid var(--dd-code-border);
  border-radius: 3px;
  padding: 12px;
}

/* ─────────────────────────────────────────────
 * Target：target 群組容器（如分類容器）
 * ───────────────────────────────────────────── */
.dd-target {
  display: flex;
  flex-direction: column;
  gap: var(--dd-gap);
  padding: 10px;
  background-color: #fdf5d6;
  border: 1.5px solid var(--dd-target-border);
  border-radius: var(--dd-slot-radius);
}

.dd-target-header {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--dd-target-text);
  padding-bottom: 4px;
}

/* ─────────────────────────────────────────────
 * Insertion indicator：排序時的插入線
 * Position Drop Target（文章建議：帶圓形端點，色盲友善）
 * ───────────────────────────────────────────── */
.dd-insertion {
  position: relative;
  height: 0;
  margin: -2px 0;
  pointer-events: none;
}
.dd-insertion::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background-color: var(--dd-purple);
  transform: translateY(-50%);
}
.dd-insertion::after {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--dd-purple);
  transform: translateY(-50%);
}

/* ─────────────────────────────────────────────
 * drag_blank inline slot：在文字流內的 inline 空格
 * ───────────────────────────────────────────── */
.dd-inline-slot {
  display: inline-flex;
  align-items: center;
  min-width: 88px;
  min-height: 26px;
  margin: 0 3px;
  padding: 2px 8px;
  background-color: var(--dd-target-bg-empty);
  border: 1.5px dashed var(--dd-target-border);
  border-radius: 3px;
  vertical-align: middle;
  font-family: "Liberation Sans", "Liberation Serif", Arial, sans-serif;
}
.dd-inline-slot:not(:empty) {
  background-color: transparent;
  border-color: transparent;
}
.dd-inline-slot.sortable-over,
.dd-inline-slot.dd-slot-active {
  border-style: solid;
  border-color: var(--dd-purple);
  box-shadow: 0 0 0 3px var(--dd-purple-glow);
}
.dd-inline-slot .dd-chip {
  min-height: 22px;
  padding: 1px 6px;
}

/* drag_blank 程式碼背景（monospace，保留所有空白）
   白底 + 藍色框線，作為「拖圖區」的視覺識別 */
.dd-code-block {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  white-space: pre-wrap;
  background-color: var(--dd-code-bg);
  border: 1.5px solid var(--dd-code-border);
  border-radius: 3px;
  padding: 12px 14px;
  color: #222;
}

/* drag_blank 散文背景（一般字體，保留換行） */
.dd-prose-block {
  font-size: 0.9375rem;
  line-height: 1.8;
  white-space: pre-wrap;
  background-color: var(--dd-code-bg);
  border: 1.5px solid var(--dd-code-border);
  border-radius: 3px;
  padding: 10px 12px;
  color: var(--admin-text, #333);
}

/* "Select and Place:" 標籤：題幹與拖圖區之間的分隔標示（使用預設字重與色） */
.dd-sap-label {
  font-size: 0.875rem;
  margin-bottom: 6px;
}

/* ─────────────────────────────────────────────
 * 無效拖放（游標）
 * ───────────────────────────────────────────── */
.dd-no-drop,
.dd-no-drop * {
  cursor: not-allowed !important;
}

/* ─────────────────────────────────────────────
 * 鍵盤操作模式（dd-keyboard-mode 由 JS 切換）
 * 被鍵盤「拿起」的 chip 顯示更明確的 outline
 * ───────────────────────────────────────────── */
.dd-chip.dd-keyboard-lifted {
  outline: 2px solid var(--dd-purple);
  outline-offset: 2px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  background-color: var(--dd-source-bg-hover);
}
.dd-slot.dd-keyboard-target,
.dd-inline-slot.dd-keyboard-target,
.dd-pool.dd-keyboard-target {
  outline: 2px dashed var(--dd-purple);
  outline-offset: 2px;
}

/* 鍵盤提示 toast */
.dd-keyboard-hint {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background-color: #2b2b2b;
  color: #fff;
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 0.8125rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  z-index: 9999;
  pointer-events: none;
  max-width: 90vw;
}