/* Panel 'dialog' + small helpers shared by the ui-npc windows (dialog / shop / enhance). Owned by ui-npc.
   Uses the theme variables and shared widget classes from style.css (docs/ARCHITECTURE.md §7.5). */

/* ---------------------------------------------------------------- shared ui-npc bits */
.npc-noicon { display: inline-block; background: radial-gradient(circle at 40% 35%, #6b4a2b, #2a1a12); border-radius: 3px; }

/* ---------------------------------------------------------------- dialog */
.panel-dialog { display: flex; flex-direction: column; gap: 10px; padding: 2px 2px 4px; color: var(--c-text); user-select: none; }

.panel-dialog .dlg-head { display: flex; align-items: center; gap: 14px; padding: 2px 4px 0; }
.panel-dialog .dlg-portrait { position: relative; width: 84px; height: 84px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #5a3a24 0%, #3a2216 55%, #1a0f0a 100%);
  box-shadow: 0 0 0 2px var(--c-gold), 0 0 0 5px #5a1d12, 0 0 0 6px rgba(232, 196, 106, 0.55), 0 4px 14px rgba(0, 0, 0, 0.55),
    inset 0 -8px 18px rgba(0, 0, 0, 0.5);
  overflow: hidden; }
.panel-dialog .dlg-portrait::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 25%, rgba(255, 240, 200, 0.18), transparent 45%); }
.panel-dialog .dlg-portrait-cv { width: 84px; height: 84px; display: block; }
.panel-dialog .dlg-who { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.panel-dialog .dlg-name { font-size: 21px; font-weight: 600; line-height: 1.15; color: var(--c-gold); letter-spacing: 0.3px;
  text-shadow: 0 2px 0 #3a1208, 0 0 12px rgba(232, 196, 106, 0.25); }
.panel-dialog .dlg-title { align-self: flex-start; font-size: 12.5px; line-height: 1; padding: 4px 9px 4px;
  color: #ffe9c2; background: linear-gradient(180deg, #9b2b1f, #6e1a12); border: 1px solid rgba(232, 196, 106, 0.55);
  border-radius: 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }

.panel-dialog .dlg-text { position: relative; display: grid; min-height: 66px; padding: 12px 14px 18px;
  font-size: 15.5px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; cursor: pointer;
  background: linear-gradient(180deg, rgba(20, 11, 7, 0.72), rgba(36, 22, 14, 0.72));
  border: 1px solid rgba(232, 196, 106, 0.28); border-radius: 6px;
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 230, 180, 0.06); }
.panel-dialog .dlg-text::before { content: ''; position: absolute; left: 10px; right: 10px; top: 5px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 196, 106, 0.35), transparent); pointer-events: none; }
/* Ghost holds the full text so the box never resizes while typing. */
.panel-dialog .dlg-ghost, .panel-dialog .dlg-typed { grid-area: 1 / 1; min-width: 0; }
.panel-dialog .dlg-ghost { visibility: hidden; }
.panel-dialog .dlg-text { max-height: 46vh; overflow-y: auto; }
.panel-dialog .dlg-line { white-space: pre-wrap; overflow-wrap: anywhere; }
.panel-dialog .dlg-l-blank { height: 0.55em; overflow: hidden; }
.panel-dialog .dlg-l-title { font-size: 16.5px; font-weight: 600; color: var(--c-gold); text-shadow: 0 1px 0 #000, 0 0 8px rgba(232, 196, 106, 0.25); }
.panel-dialog .dlg-l-head { margin-top: 2px; font-size: 13.5px; font-weight: 600; color: #e9b86a; letter-spacing: 0.3px;
  border-bottom: 1px solid rgba(232, 196, 106, 0.18); }
.panel-dialog .dlg-l-item { padding-left: 6px; color: #eadfc6; }
.panel-dialog .dlg-l-done { padding-left: 6px; color: var(--c-good); }
.panel-dialog .dlg-skip { position: absolute; right: 10px; bottom: 3px; font-size: 11px; color: var(--c-muted); opacity: 0;
  transition: opacity 0.2s; pointer-events: none; }
.panel-dialog.is-typing .dlg-skip { opacity: 0.85; }
.panel-dialog .dlg-more { position: absolute; right: 12px; bottom: 5px; width: 0; height: 0; opacity: 0; pointer-events: none;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--c-gold); }
.panel-dialog.is-typed .dlg-more { opacity: 0.9; animation: dlg-bob 0.9s ease-in-out infinite; }
@keyframes dlg-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

.panel-dialog .dlg-options { display: flex; flex-direction: column; gap: 6px; }
.panel-dialog .dlg-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 5px 12px 5px 7px;
  font: inherit; font-size: 14.5px; text-align: left; color: var(--c-text); cursor: pointer;
  background: linear-gradient(180deg, #3d2619 0%, #2b1a11 100%);
  border: 1px solid rgba(139, 90, 43, 0.9); border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.08), 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: transform 0.12s, border-color 0.12s, background 0.12s, box-shadow 0.12s, opacity 0.2s; }
/* Options are shown (and clickable) while the text still types out: the first click on an option both
   reveals the text and picks it. They fade in once per dialog payload (buttons are rebuilt on render).
   Fill mode 'backwards' (not 'both') so hover / disabled styles apply after the entrance. */
.panel-dialog .dlg-opt { animation: dlg-opt-in 0.28s ease-out backwards; }
@keyframes dlg-opt-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.panel-dialog .dlg-opt:hover:not(:disabled), .panel-dialog .dlg-opt:focus-visible {
  border-color: var(--c-gold); transform: translateX(3px); outline: none;
  background: linear-gradient(180deg, #54331f 0%, #3a2317 100%);
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.14), 0 0 10px rgba(232, 196, 106, 0.22); }
.panel-dialog .dlg-opt:active:not(:disabled) { transform: translateX(3px) translateY(1px); }
.panel-dialog .dlg-opt:disabled { cursor: default; opacity: 0.55; }
.panel-dialog .dlg-opt.is-chosen { opacity: 1; border-color: var(--c-gold); background: linear-gradient(180deg, #5f3a22, #402617); }
.panel-dialog .dlg-opt-text { flex: 1; min-width: 0; line-height: 1.35; }

.panel-dialog .dlg-ico { width: 26px; height: 26px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(232, 196, 106, 0.3); }
.panel-dialog .dlg-ico-img { width: 24px; height: 24px; display: block; }
.panel-dialog .dlg-mark { width: 26px; height: 26px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 17px; line-height: 1; border-radius: 50%; }
.panel-dialog .dlg-mark-avail { color: #2a1204; background: radial-gradient(circle at 40% 35%, #fff2b0, #f0b429 60%, #b87a0c);
  box-shadow: 0 0 0 1px #5a3a08, 0 0 8px rgba(255, 196, 60, 0.55); }
.panel-dialog .dlg-mark-ready { color: #2a1204; background: radial-gradient(circle at 40% 35%, #fff7c8, #ffd24a 55%, #d18f10);
  box-shadow: 0 0 0 1px #5a3a08, 0 0 12px rgba(255, 215, 90, 0.85); animation: dlg-glow 1.4s ease-in-out infinite; }
.panel-dialog .dlg-mark-progress { color: #d8ccb4; background: radial-gradient(circle at 40% 35%, #8a8074, #5b534a 60%, #3a342e);
  box-shadow: 0 0 0 1px #2a241e; font-size: 15px; letter-spacing: -1px; }
.panel-dialog .dlg-mark-close { color: var(--c-muted); font-size: 20px; font-weight: 400; }
.panel-dialog .dlg-mark-back::before { content: ''; width: 8px; height: 8px; margin-left: 3px; transform: rotate(45deg);
  border-left: 2px solid var(--c-gold); border-bottom: 2px solid var(--c-gold); }
.panel-dialog .dlg-mark-talk::before { content: ''; width: 8px; height: 8px; transform: rotate(45deg);
  background: linear-gradient(135deg, #ffe28a, var(--c-gold) 50%, #9a6b1f); box-shadow: 0 0 5px rgba(232, 196, 106, 0.5); }
@keyframes dlg-glow { 0%, 100% { box-shadow: 0 0 0 1px #5a3a08, 0 0 6px rgba(255, 215, 90, 0.55); }
  50% { box-shadow: 0 0 0 1px #5a3a08, 0 0 14px rgba(255, 215, 90, 1); } }

.panel-dialog .dlg-opt-quest-avail .dlg-opt-text, .panel-dialog .dlg-opt-quest-ready .dlg-opt-text { color: #ffe7a8; }
.panel-dialog .dlg-opt-quest-ready { border-color: rgba(232, 196, 106, 0.85); }
.panel-dialog .dlg-opt-quest-progress .dlg-opt-text { color: #cbbfa6; }
.panel-dialog .dlg-opt-quest_accept { border-color: rgba(95, 211, 95, 0.55); }
.panel-dialog .dlg-opt-quest_turnin { border-color: rgba(255, 184, 48, 0.8); }
.panel-dialog .dlg-opt-close { background: linear-gradient(180deg, #2c1c13, #22150e); border-color: rgba(139, 90, 43, 0.55); }
.panel-dialog .dlg-opt-close .dlg-opt-text { color: var(--c-muted); }