feat(npcs): inspect cards, Show overlay, and optional external link

Clicking an NPC tile opens description cards (multi-select accordion); Show puts avatars on screen. Optional URL opens a webview tab. Avatar pan in the editor commits on pointer up.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/renderer/npcs/NpcsApp.module.css

@@ -39,8 +39,9 @@
   padding: 14px 16px;
   border-right: 1px solid var(--stroke);
   background: #0f0f12;
-  display: grid;
-  gap: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
   align-content: start;
 }
 
@@ -53,8 +54,13 @@
 .detailCard {
   display: grid;
   gap: 10px;
-  padding-bottom: 14px;
+  padding: 14px 0;
   border-bottom: 1px solid var(--stroke);
+  min-width: 0;
+}
+
+.detailCard:first-child {
+  padding-top: 0;
 }
 
 .detailCard:last-child {
@@ -62,11 +68,67 @@
   padding-bottom: 0;
 }
 
+.detailCardWebview {
+  min-height: 480px;
+  grid-template-rows: auto auto minmax(380px, 1fr);
+}
+
+.detailAccordion {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  padding: 0;
+}
+
+.detailAccordionMark {
+  color: var(--text2);
+  font-size: 12px;
+  width: 14px;
+}
+
 .detailName {
   font-size: 18px;
   font-weight: 900;
 }
 
+.detailTabs {
+  display: flex;
+  gap: 6px;
+}
+
+.detailTab {
+  border: 1px solid var(--stroke);
+  background: #18181b;
+  color: var(--text2);
+  border-radius: 8px;
+  padding: 6px 10px;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.detailTabActive {
+  border-color: #60a5fa;
+  color: var(--text1);
+  background: #1e293b;
+}
+
+.webviewHost {
+  min-height: 380px;
+  height: 52vh;
+  border-radius: 10px;
+  overflow: hidden;
+  border: 1px solid var(--stroke);
+  background: #ffffff;
+}
+
 .detailSectionTitle {
   font-size: 12px;
   font-weight: 900;
@@ -123,8 +185,8 @@
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 4px;
-  align-items: center;
-  padding: 4px 8px 4px 4px;
+  align-items: start;
+  padding: 6px 8px 8px 4px;
   border-radius: 12px;
   border: 1px solid var(--stroke);
   background: #18181b;
@@ -133,6 +195,12 @@
   width: 100%;
 }
 
+.tileMain {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
 .tileBody {
   display: grid;
   grid-template-columns: 44px 1fr;
@@ -150,6 +218,7 @@
 .tileMenuBtn {
   width: 28px;
   height: 28px;
+  margin-top: 10px;
   border: 0;
   border-radius: 8px;
   background: transparent;
@@ -229,6 +298,22 @@
   white-space: nowrap;
 }
 
+.tileShow {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text2);
+  cursor: pointer;
+  user-select: none;
+}
+
+.tileShow input {
+  margin: 0;
+  accent-color: #60a5fa;
+}
+
 .muted {
   color: var(--text2);
   font-size: 13px;