:root{--bg:#0c0d10;--panel:#13151b;--panel-2:#191b22;--text:#e8eaf0;--muted:#9aa0ab;--acc:#e63946;--chip:#3a3f51;--me:#2a7ade;--bot:#3b3f4a;--border:#2a2e39}*{box-sizing:border-box}body,html{padding:0;margin:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto}.container{max-width:980px;margin:0 auto;padding:24px}.header{display:grid;gap:8px;margin-bottom:16px}.logo{display:flex;gap:10px;align-items:center}.logo h1{margin:0;font-size:20px;letter-spacing:.2px}.lead{margin:0;color:var(--muted)}.sp{display:none}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px;display:flex;gap:12px;align-items:center;cursor:pointer;transition:transform .08s ease,border-color .08s ease}.card:hover{transform:translateY(-1px);border-color:var(--chip)}.card.selected{outline:2px solid var(--acc)}.avatar{position:relative;width:64px;height:64px;background:#222;border-radius:12px;overflow:hidden}.meta{display:grid;gap:4px;text-align:left}.name{font-weight:600}.tagline{color:var(--muted);font-size:12px;line-height:1.3}.chat-section{margin-top:16px;background:var(--panel-2);border:1px solid var(--border);border-radius:16px;padding:16px}.chat-title{font-size:14px;color:var(--muted);margin-bottom:8px}.chip{background:var(--chip);color:#d2d7ff;border-radius:999px;padding:4px 10px}.chat-wrap{display:grid;gap:12px}.chat-window{min-height:260px;max-height:52vh;overflow:auto;display:grid;gap:8px;padding:8px;background:#0f1117;border-radius:12px;border:1px solid var(--border)}.empty-hint{color:var(--muted);text-align:center;padding:36px 12px}.bubble{max-width:80%;padding:10px 12px;border-radius:12px;line-height:1.5;word-break:break-word}.bubble.me{margin-left:auto;background:var(--me);color:white}.bubble.bot{margin-right:auto;background:var(--bot);color:#e7e9ef}.input-row{display:grid;grid-template-columns:1fr 120px;gap:8px}.input-row textarea{width:100%;resize:vertical;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px;outline:none}.input-row textarea:focus{border-color:var(--chip)}.input-row button{border:1px solid var(--border);background:var(--acc);color:white;font-weight:700;border-radius:10px;cursor:pointer}.input-row button:disabled{opacity:.6;cursor:not-allowed}.footer{margin-top:16px;color:var(--muted);text-align:center}@media (max-width:820px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sp{display:inline}}.character-name{color:white}