.room-view{display:flex;flex-direction:column;background-color:var(--bg-primary);position:relative;overflow:hidden}.room-background{flex:1;background-color:#000}.room-info{padding:12px 16px;background-color:var(--bg-secondary);border-top:1px solid var(--border-color)}.room-name{font-size:14px;font-weight:600;color:var(--accent-gold);margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}.room-items{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.items-label{font-size:12px;color:var(--text-muted);margin-right:4px}.item-button{background-color:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-secondary);padding:4px 10px;font-size:12px;border-radius:3px;cursor:pointer;transition:all .15s ease}.item-button:hover{background-color:var(--bg-primary);border-color:var(--accent-copper);color:var(--text-primary)}.item-button:active{transform:scale(.98)}.room-loading{color:var(--text-muted);font-size:12px}.portrait-bar{background-color:var(--bg-secondary);border-left:2px solid var(--border-color);display:flex;flex-direction:column;overflow:hidden}.portrait-header{padding:12px 8px;text-align:center;border-bottom:1px solid var(--border-color);background-color:var(--bg-tertiary)}.portrait-count{display:block;font-size:20px;font-weight:700;color:var(--accent-gold)}.portrait-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)}.portrait-list{flex:1;overflow-y:auto;padding:8px 4px;display:flex;flex-direction:column;gap:8px}.portrait-item{display:flex;flex-direction:column;align-items:center;padding:8px 4px;border-radius:4px;cursor:pointer;transition:background-color .15s ease}.portrait-item:hover{background-color:var(--bg-tertiary)}.portrait-frame{position:relative;width:var(--portrait-size);height:var(--portrait-size);border-radius:4px;overflow:hidden;border:2px solid var(--border-color);transition:border-color .15s ease}.portrait-item:hover .portrait-frame{border-color:var(--accent-copper)}.portrait-image{width:100%;height:100%;object-fit:cover}.portrait-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#fffc}.portrait-status{position:absolute;bottom:-2px;right:-2px;width:14px;height:14px;border-radius:50%;border:2px solid var(--bg-secondary)}.portrait-name{margin-top:6px;font-size:11px;color:var(--text-secondary);text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.portrait-position{font-size:9px;color:var(--text-muted);font-style:italic}.portrait-empty{padding:20px 8px;text-align:center;color:var(--text-muted);font-size:11px}.text-output{background-color:var(--bg-secondary);border-top:2px solid var(--border-color);padding:12px 16px;overflow-y:auto;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;line-height:1.6}.text-empty{color:var(--text-muted);font-style:italic}.text-empty code{background-color:var(--bg-tertiary);padding:2px 6px;border-radius:3px;font-style:normal;color:var(--accent-gold)}.narration-line{margin-bottom:6px;padding:2px 0}.narration-action{color:var(--msg-action)}.narration-speech{color:var(--msg-speech)}.narration-speech:before{content:""}.narration-system{color:var(--msg-system)}.narration-error{color:var(--msg-error)}.narration-emote{color:var(--msg-emote);font-style:italic}.narration-line{animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.command-bar{background-color:var(--bg-tertiary);border-top:2px solid var(--border-color);display:flex;align-items:center;padding:0 16px;position:relative}.command-prompt{color:var(--accent-gold);font-family:Consolas,Monaco,Courier New,monospace;font-size:16px;font-weight:700;margin-right:12px;-webkit-user-select:none;user-select:none}.command-input{flex:1;background:transparent;border:none;outline:none;color:var(--text-primary);font-family:Consolas,Monaco,Courier New,monospace;font-size:14px;padding:14px 0}.command-input::placeholder{color:var(--text-muted)}.suggestions-dropdown{position:absolute;bottom:100%;left:0;right:0;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-bottom:none;max-height:200px;overflow-y:auto}.suggestion-item{padding:8px 16px 8px 40px;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;color:var(--text-secondary);cursor:pointer;transition:background-color .1s ease}.suggestion-item:hover,.suggestion-item.selected{background-color:var(--bg-tertiary);color:var(--text-primary)}.suggestion-item.selected{border-left:2px solid var(--accent-gold);padding-left:38px}.app{display:grid;grid-template-rows:1fr var(--text-output-height) var(--command-bar-height);height:100%;width:100%;background-color:var(--bg-primary)}.app-main{display:grid;grid-template-columns:1fr var(--portrait-bar-width);min-height:0;border-bottom:2px solid var(--border-color)}.app-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;color:var(--text-secondary)}.loading-spinner{width:40px;height:40px;border:3px solid var(--border-color);border-top-color:var(--accent-gold);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error{color:var(--msg-error)}.connection-status{position:fixed;top:8px;left:50%;transform:translate(-50%);background-color:var(--bg-tertiary);border:1px solid var(--border-color);padding:8px 16px;border-radius:4px;font-size:12px;color:var(--text-secondary);z-index:100}:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-tertiary: #1a1a25;--border-color: #2a2a3a;--border-highlight: #3d3d50;--text-primary: #e8e6e3;--text-secondary: #a8a6a3;--text-muted: #6a6a6a;--accent-gold: #c9a227;--accent-copper: #b87333;--msg-action: #7eb8da;--msg-speech: #e8e6e3;--msg-system: #a8a6a3;--msg-error: #da7e7e;--msg-emote: #b8a7da;--portrait-size: 64px;--portrait-bar-width: 100px;--command-bar-height: 48px;--text-output-height: 180px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:Segoe UI,Roboto,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.5}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-highlight);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-copper)}