/* Visitor chat (대화 신청, dmui.js) and the 곧 열려요 sheet. Reuses the chat sheet's look (index.html #chat rules). */

/* The person card's block: 대화 신청 leads, the one step under it. */
#bs-dm { display: grid; gap: 10px; }
#bs-dm[hidden], #bs-dm [hidden] { display: none; }
#bs-dm-ask { width: 100%; }
#bs-dm-step { display: grid; gap: 8px; }
#bs-dm-step label { font-family: var(--display); font-size: 14px; color: var(--ink); }
#bs-dm-step label small { font-family: var(--text); color: var(--muted); font-size: 13px; }
#bs-dm-hello { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px 12px; min-height: 46px; width: 100%; font-size: 16px; }
#bs-dm-hello:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
#bs-dm-count { justify-self: end; margin-top: -4px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
#bs-dm-count:empty { display: none; }
#bs-dm-send { width: 100%; }
#bs-dm-note { margin: -2px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center; }
#bs-dm-soon { width: 100%; background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-family: var(--text); font-size: 14px; }
#bs-back { margin: -6px 2px 0 -10px; }
#bs-back + div { flex: 1; min-width: 0; }

/* The banner: the owner's live notice (#notice), with 괜찮아요 / 수락 or 대화 열기. */
#dm-notice { position: fixed; left: 12px; right: 12px; margin: 0 auto; max-width: 440px; top: calc(max(12px, env(safe-area-inset-top)) + 70px); display: flex; align-items: center; gap: 6px; background: var(--ink); color: var(--surface); border-radius: var(--r-m); box-shadow: var(--lift); padding: 6px 6px 6px 14px; z-index: 6; animation: settle .18s ease-out; }
#dm-notice[hidden] { display: none; }
#dm-notice.lower { top: calc(max(12px, env(safe-area-inset-top)) + 136px); }
#dm-notice-body { flex: 1; min-width: 0; display: grid; cursor: default; }
#dm-notice-who { font-size: 13px; line-height: 1.35; }
#dm-notice-text { font-size: 13px; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dm-notice-text[hidden] { display: none; }
#dm-notice button { flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-s); background: var(--surface); color: var(--ink); font-family: var(--display); font-size: 14px; }
#dm-notice button[hidden] { display: none; }
#dm-notice .bn-quiet { background: transparent; color: var(--surface); padding: 0 10px; font-family: var(--text); opacity: .85; }

/* ≡ → 대화 */
#dm-list .mini-sheet, #soon .mini-sheet { position: relative; }
.dm-scrim { position: fixed; inset: 0; border: 0; background: transparent; pointer-events: auto; }
#dm-list-rows { display: grid; }
.dm-empty { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.dm-req { display: grid; gap: 6px; padding: 10px 0 12px; border-bottom: 1px solid var(--line); }
.dm-req p { margin: 0; }
.dm-req-who { font-size: 15px; line-height: 1.4; }
.dm-req-who b { font-family: var(--display); font-weight: normal; }
.dm-req-text { font-size: 14px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.dm-req-btns { display: flex; gap: 8px; margin-top: 2px; }
.dm-req-btns .primary, .dm-req-btns .secondary { flex: 1; min-height: 44px; font-size: 15px; }
.dm-row { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 2px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; width: 100%; }
.dm-row:last-child { border-bottom: 0; }
.dm-row:active { background: var(--sunken); }
.dm-row-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dm-row-main b { font-family: var(--display); font-weight: normal; font-size: 15px; }
.dm-row-main small { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-row.closed .dm-row-main b { color: var(--muted); }
.dm-row-side { flex: none; display: grid; justify-items: end; gap: 4px; }
.dm-row-side time { font-size: 12px; color: var(--muted); }
.dm-dot { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--coral); color: #fff; font-family: var(--display); font-size: 12px; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }

/* The conversation sheet: the chat sheet's look. */
#dm { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
#dm[hidden] { display: none; }
#dm .sheet-head { padding-bottom: 10px; }
#dm-back { flex: none; margin: -6px 2px 0 -10px; color: var(--ink); }
.dm-head-text { flex: 1; min-width: 0; }
#dm-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dm-menu { position: absolute; top: 48px; right: 50px; background: var(--surface); border-radius: var(--r-s); box-shadow: var(--lift-s); display: grid; z-index: 2; overflow: hidden; }
#dm-menu[hidden] { display: none; }
#dm-menu button { border: 0; background: transparent; padding: 10px 26px; min-height: 42px; font-size: 14px; color: var(--ink); text-align: left; }
#dm-menu button[hidden] { display: none; }
#dm-menu button:active { background: var(--sunken); }
#dm-log { flex: 1; min-height: 0; overflow: auto; touch-action: pan-y; display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); -webkit-user-select: text; user-select: text; }
#dm-log .msg { white-space: pre-wrap; }
#dm-form { display: flex; gap: 8px; flex: none; }
#dm-input { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px 12px; min-height: 46px; width: 100%; font-size: 16px; }
#dm-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
#dm-input:disabled { background: var(--sunken); }
#dm-form .primary { flex: none; min-height: 46px; font-size: 15px; padding: 0 14px; border-radius: var(--r-s); }

/* 곧 열려요: on top of whatever opened it. */
#soon { z-index: 7; }
#soon[hidden], #dm-list[hidden] { display: none; }
#soon-want { width: 100%; }
#soon-want:disabled { opacity: 1; background: var(--sunken); color: var(--ink); }
#soon.stacked .dm-scrim { background: var(--scrim-soft); }

@media (max-width: 640px) {
  #dm-sheet { height: min(56dvh, 420px); }
}
@media (prefers-reduced-motion: reduce) { #dm-notice { animation: none; } }