#npc-chat-modal { width: 420px; }
#npc-chat-modal .npc-chat-header { padding: 12px 30px 12px 12px; gap: 14px; }
#npc-chat-modal .npc-chat-portrait { width: 80px; height: 80px; border: 1px solid #7595a5; box-shadow: inset 0 0 0 2px #242521; background: url('../png/npcchat/ground-bg.png') center / cover; display: grid; place-items: center; }
#npc-chat-modal .npc-chat-portrait canvas { width: 64px; height: 64px; image-rendering: pixelated; }
#npc-chat-modal #npc-chat-title { position: relative; isolation: isolate; flex: 1; min-width: 0; padding: 14px 24px; text-align: center; font-family: inherit; font-weight: bold; font-size: 14px; line-height: 1.3; letter-spacing: 0; overflow-wrap: anywhere; color: #f6e4ac; text-shadow: 0 1px 2px #000, 0 0 8px #ff65c080; background: #d4b263; clip-path: polygon(0 0,100% 0,94% 50%,100% 100%,0 100%,6% 50%); }
#npc-chat-title::before { content: ''; position: absolute; inset: 2px; z-index: -1; background: repeating-linear-gradient(0deg,transparent 0 3px,#ffffff08 3px 4px),linear-gradient(115deg,#163e56,#29253d 60%,#542640); clip-path: polygon(0 0,100% 0,94% 50%,100% 100%,0 100%,6% 50%); }
#npc-chat-title::after { content: ''; position: absolute; inset: 5px 18px; border-top: 1px solid #67e8ef; border-bottom: 1px solid #ee65af; pointer-events: none; }
#npc-chat-modal .npc-chat-icon-button { --accent: #70ecdb; position: relative; width: 40px; height: 40px; padding: 0; margin: 0; border: 1px solid #596266; border-radius: 5px; background: #272b2e; box-shadow: inset 0 1px #ffffff16,0 1px 2px #0008; cursor: pointer; }
#npc-chat-modal .npc-chat-icon-button::before { content: ''; position: absolute; width: 22px; height: 22px; left: 50%; top: 50%; transform: translate(-50%,-50%); background: var(--accent); -webkit-mask: var(--npc-icon) center / contain no-repeat; mask: var(--npc-icon) center / contain no-repeat; }
#npc-chat-modal .npc-chat-icon-yes { --npc-icon: url('data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNNyAxMHYxMiIgLz4KICA8cGF0aCBkPSJNMTUgNS44OCAxNCAxMGg1LjgzYTIgMiAwIDAgMSAxLjkyIDIuNTZsLTIuMzMgOEEyIDIgMCAwIDEgMTcuNSAyMkg0YTIgMiAwIDAgMS0yLTJ2LThhMiAyIDAgMCAxIDItMmgyLjc2YTIgMiAwIDAgMCAxLjc5LTEuMTFMMTIgMmEzLjEzIDMuMTMgMCAwIDEgMyAzLjg4WiIgLz4KPC9zdmc+Cg=='); }
#npc-chat-modal .npc-chat-icon-no { --accent: #ff8bb7; --npc-icon: url('data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMTcgMTRWMiIgLz4KICA8cGF0aCBkPSJNOSAxOC4xMiAxMCAxNEg0LjE3YTIgMiAwIDAgMS0xLjkyLTIuNTZsMi4zMy04QTIgMiAwIDAgMSA2LjUgMkgyMGEyIDIgMCAwIDEgMiAydjhhMiAyIDAgMCAxLTIgMmgtMi43NmEyIDIgMCAwIDAtMS43OSAxLjExTDEyIDIyYTMuMTMgMy4xMyAwIDAgMS0zLTMuODhaIiAvPgo8L3N2Zz4K'); }
#npc-chat-modal .npc-chat-icon-trade { --accent: #edcf7d; --npc-icon: url('data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNNiAyIDMgNnYxNGEyIDIgMCAwIDAgMiAyaDE0YTIgMiAwIDAgMCAyLTJWNmwtMy00WiIgLz4KICA8cGF0aCBkPSJNMyA2aDE4IiAvPgogIDxwYXRoIGQ9Ik0xNiAxMGE0IDQgMCAwIDEtOCAwIiAvPgo8L3N2Zz4K'); }
#npc-chat-modal .npc-chat-icon-button:hover, #npc-chat-modal .npc-chat-icon-button:focus-visible { background: #303342; box-shadow: 0 0 7px color-mix(in srgb,var(--accent) 40%,transparent); outline: 1px solid var(--accent); outline-offset: 2px; }
#npc-chat-modal .npc-chat-icon-button:active { background: #0b1016; box-shadow: inset 0 0 8px #000; }
#npc-chat-modal .npc-chat-footer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
#npc-chat-modal .npc-chat-icons { grid-column: 1; grid-row: 1; gap: 8px; }
#npc-chat-modal .npc-chat-toggle-button { grid-column: 2; grid-row: 1; }
#npc-chat-modal #npc-chat-input { grid-column: 1 / -1; grid-row: 2; width: 100%; box-sizing: border-box; }
body.mobile-layout #npc-chat-modal .npc-chat-icon-button { width: 44px; height: 44px; }
@media(max-width:360px) { #npc-chat-modal .npc-chat-header { gap: 8px; padding-left: 8px; } #npc-chat-modal .npc-chat-portrait { width: 64px; height: 64px; } #npc-chat-modal #npc-chat-title { font-size: 14px; padding: 12px 16px; } }