/* ============================================================
   디스코드 라이브 미리보기 (app-preview.js)
   ------------------------------------------------------------
   설정한 문구가 실제 디스코드에서 어떻게 보이는지 그대로 보여준다.
   디스코드의 픽셀을 베끼지 않고 "메시지 한 통"의 구조(아바타·이름·앱배지·시각·본문)만
   재현한다 — 색·폰트는 우리 토큰을 쓴다.
   ============================================================ */

.dpv-lab{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-faint); margin:12px 0 6px;
}
.dpv{
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:13px 15px;
}
.dpv-msg{display:flex; gap:12px; align-items:flex-start}
.dpv-av{
  flex:none; width:36px; height:36px; border-radius:50%; object-fit:cover;
  background:var(--surface-2); border:1px solid var(--line);
}
.dpv-b{min-width:0; flex:1}
.dpv-h{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; margin-bottom:3px}
.dpv-name{font-size:14px; font-weight:600; color:var(--a1)}
/* 봇 계정임을 알리는 디스코드의 APP 태그(우리 색으로) */
.dpv-badge{
  font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.04em;
  color:#fff; background:var(--a1); border-radius:4px; padding:1.5px 4px; text-transform:uppercase;
}
.dpv-time{font-size:11px; color:var(--ink-faint)}
.dpv-text{font-size:14px; line-height:1.5; color:var(--ink); word-break:break-word}
.dpv-text b{font-weight:700}
.dpv-empty{font-size:13px; color:var(--ink-faint); font-style:italic}
/* 멘션 칩 — 디스코드처럼 옅은 배경 + 강조색 */
.dpv-at{
  color:var(--a1); background:var(--a1-soft); border-radius:4px; padding:0 3px;
  font-weight:600; white-space:nowrap;
}
.dpv-code{
  font-family:var(--mono); font-size:12.5px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:4px; padding:1px 4px;
}

/* 메시지에 첨부된 임베드(임베드 빌더·스타보드) — 본문 아래에 붙는다 */
.dpv .emb-card{margin-top:8px}
.dpv-text + .emb-card{margin-top:6px}
/* 스타보드 인용의 "⭐ 3 · 원문으로 이동" 필드 (봇 embed.add_field 대응) */
.emb-card .e-field{margin-top:9px; display:flex; align-items:baseline; gap:9px; font-size:12.5px}
.emb-card .e-field b{color:var(--ink); font-size:13px}
.emb-card .e-link{color:var(--a2)}

/* 역할 패널 컴포넌트 — 디스코드 버튼/셀렉트 메뉴의 형태만 재현(색은 우리 토큰) */
.dpv-btns{display:flex; flex-wrap:wrap; gap:7px; margin-top:9px}
.dpv-btn{
  font-size:13px; font-weight:600; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:8px; padding:7px 13px;
}
.dpv-sel{
  display:flex; align-items:center; gap:8px; margin-top:9px; max-width:320px;
  font-size:13.5px; color:var(--ink-dim);
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:8px; padding:9px 12px;
}
.dpv-sel>span:first-child{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dpv-sel-n{
  font-family:var(--mono); font-size:10.5px; color:var(--a1);
  background:var(--a1-soft); border-radius:99px; padding:1px 7px;
}

/* ── 인라인 편집 ─────────────────────────────────────────
   미리보기가 곧 편집기다. 클릭하면 그 자리가 textarea로 바뀌고 원문 템플릿을 고친다.
   원본 입력(.dpv-src)은 숨기되 DOM에는 남겨 저장·dirty diff에 그대로 잡히게 한다. */
.dpv-src{display:none}

.dpv-can{
  position:relative; cursor:text; border-radius:6px; padding:2px 22px 2px 4px; margin:-2px -4px;
  transition:background .13s, box-shadow .13s;
}
.dpv-can:hover{background:var(--a1-soft); box-shadow:0 0 0 1px var(--line-strong)}
.dpv-can:focus-visible{outline:2px solid var(--a1); outline-offset:1px}
/* 연필은 평소 숨었다가 hover/focus 때만 — 미리보기의 "실제 모습"을 방해하지 않게 */
.dpv-pen{
  position:absolute; right:4px; top:2px; font-size:11px; color:var(--ink-faint);
  opacity:0; transition:opacity .13s; pointer-events:none;
}
.dpv-can:hover .dpv-pen, .dpv-can:focus-visible .dpv-pen{opacity:1}

.dpv-ta{
  display:block; width:100%; min-height:44px; resize:none; overflow:hidden;
  font-family:var(--sans); font-size:14px; line-height:1.5; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--a1); border-radius:8px; padding:8px 10px;
  box-shadow:0 0 0 3px var(--a1-soft);
}
.dpv-ta:focus{outline:0}