/* 導覽員對話框（WP3，#21）。顏色、字型、間距一律用 wp1-spec/theme.css 的變數。
   外觀以前台 wp2-frontend/style.css 的 #guide 區塊為準（115.10.27 版，PR #53）；前台調整時這裡跟著改。class 都以 nm-guide 開頭。 */

.nm-guide { display: flex; flex-direction: column; gap: var(--sp-3); font-family: var(--body); color: var(--ink); }

.nm-guide-head { display: flex; align-items: center; gap: var(--sp-3); }
.nm-guide-portrait { width: 52px; height: 52px; border-radius: 14px; background: var(--night); display: grid; place-items: center; flex: 0 0 auto; }
.nm-guide-portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.nm-guide-portrait .skin { fill: var(--paper-2); }
.nm-guide-portrait .hat { fill: var(--lantern); }
.nm-guide-portrait .coat { fill: var(--gold); }
.nm-guide-portrait .lamp { fill: var(--gold); stroke: var(--gold-line); stroke-width: 1; }
.nm-guide-name { font: 900 var(--fs-lg) var(--display); letter-spacing: .08em; }
.nm-guide-mode { font-size: var(--fs-sm); color: var(--muted); }

.nm-guide-talk { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-md); line-height: 1.6; max-height: 28vh; overflow: auto; }
.nm-guide-talk:empty { display: none; }
.nm-guide-you { align-self: flex-end; max-width: 85%; background: var(--paper-2); padding: 6px var(--sp-3); border-radius: var(--r-md) var(--r-md) var(--sp-1) var(--r-md); overflow-wrap: anywhere; }
.nm-guide-say { display: flex; flex-direction: column; gap: 6px; }
.nm-guide-steps { display: flex; flex-direction: column; gap: var(--sp-1); }
.nm-guide-step { display: flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: 0 var(--sp-3); border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--field); font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.nm-guide-step:hover { border-color: var(--gold-line); }
.nm-guide-step .n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--gold-ink); font: 600 var(--fs-sm) var(--mono); flex: 0 0 auto; }
.nm-guide-why { font-size: var(--fs-sm); color: var(--muted); }

.nm-guide-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.nm-guide-chips button { min-height: 34px; padding: 0 var(--sp-3); border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--paper-2); font: inherit; font-size: var(--fs-sm); color: var(--ink); cursor: pointer; }
.nm-guide-chips button:hover { border-color: var(--gold-line); }

.nm-guide-ask { display: flex; flex-direction: column; gap: var(--sp-1); }
.nm-guide-ask label { font-size: 13px; font-weight: 700; }
.nm-guide-row { display: flex; gap: var(--sp-2); }
.nm-guide-go { flex: 0 0 auto; min-height: var(--tap); padding: 0 var(--sp-4); border-radius: var(--r-md); border: 0; background: var(--lantern); color: var(--field); font: inherit; font-size: var(--fs-md); font-weight: 700; cursor: pointer; box-shadow: 0 4px 0 var(--lantern-ink); }
.nm-guide-go:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--lantern-ink); }
@media (prefers-reduced-motion: reduce) { .nm-guide-go:active { transform: none; } }
.nm-guide-row input { flex: 1; min-width: 0; height: var(--tap); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--field); padding: 0 var(--sp-3); font: inherit; font-size: var(--fs-md); color: var(--ink); }
.nm-guide-hint { font-size: var(--fs-sm); color: var(--muted); }

.nm-guide button:focus-visible, .nm-guide input:focus-visible { outline: 2px solid var(--gold-line); outline-offset: 2px; }