diff --git a/src/web/static/index.html b/src/web/static/index.html index a0b6600..a1e9c36 100644 --- a/src/web/static/index.html +++ b/src/web/static/index.html @@ -476,6 +476,44 @@ html, body { text-align: center; } +/* ============================================================ + Character selector (above input) + ============================================================ */ +.char-selector { + display: flex; + gap: 6px; + padding: 6px 20px; + background: var(--bg-surface); + border-top: 1px solid var(--border); + overflow-x: auto; + scrollbar-width: none; +} +.char-selector::-webkit-scrollbar { display: none; } +.char-selector.hidden { display: none; } +.char-chip { + flex-shrink: 0; + background: var(--bg-elevated); + border: 1px solid var(--border); + border-radius: 12px; + padding: 3px 10px; + font-size: 12px; + color: var(--text-secondary); + cursor: pointer; + transition: border-color 0.2s, color 0.2s, background 0.2s; + white-space: nowrap; +} +.char-chip:hover { border-color: var(--gold-dim); color: var(--text-primary); } +.char-chip.active { + background: var(--gold-dim); + border-color: var(--gold); + color: #fff; +} +.char-chip.dead { + opacity: 0.3; + text-decoration: line-through; + cursor: not-allowed; +} + /* ============================================================ Input Area ============================================================ */ @@ -717,6 +755,15 @@ html, body { .msg { max-width: 95%; } .msg-dm-narration { font-size: 15px; } + .char-selector { + padding: 4px 12px; + gap: 4px; + } + .char-chip { + font-size: 11px; + padding: 3px 8px; + } + #input-area { padding: 10px 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); @@ -825,6 +872,7 @@ html, body {