*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--accent: #3dc373;--accent-contrast: #08180e;--textbox-color: #edfef4;--surface: #ffffff;--surface-2: #f2faf6;--fg: #0d1a12;--muted: #6b8f7c;--border: #c9eed9;color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--accent: #4cf490;--accent-contrast: #061209;--textbox-color: #0c2417;--surface: #0a1a10;--surface-2: #0f2418;--fg: #dff7ea;--muted: #5a8a6e;--border: #1a3d28}}html,body,#root{height:100%;margin:0;background:var(--surface);color:var(--fg)}body{font-family:SF Mono,ui-monospace,Cascadia Code,Fira Code,Menlo,Monaco,Consolas,Courier New,monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:15px}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--muted)}button{padding:.45rem .85rem;border:none;border-radius:6px;background:var(--accent);color:var(--accent-contrast);cursor:pointer;font-weight:700;letter-spacing:.1px;font-family:inherit;font-size:.875rem;transition:filter .12s,background .12s}button:hover{filter:brightness(1.08)}button:active{filter:brightness(.95)}input,textarea{border:1px solid var(--border);border-radius:6px;caret-color:var(--accent);font-family:inherit;font-size:.9rem;font-weight:500;padding:.45rem .75rem;background:var(--textbox-color);color:var(--fg);transition:box-shadow .12s}input::placeholder,textarea::placeholder{color:var(--muted);font-weight:400}input:focus,textarea:focus{outline:none;box-shadow:0 0 0 2px var(--accent);border-color:var(--accent)}h1,h2,h3{line-height:1.2}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:1rem;color:var(--muted)}.loading-spinner{width:2rem;height:2rem;border:3px solid var(--surface-2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.online-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}.offline-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted);flex-shrink:0}.brand-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--accent);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}.owner-badge,.role-badge{font-size:.65rem;font-family:monospace;padding:1px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}.owner-badge,.role-owner{background:var(--accent);color:var(--accent-contrast)}.role-admin{background:var(--surface-2);color:var(--fg)}.count-badge{font-size:.75rem;background:var(--accent);color:var(--accent-contrast);padding:1px 7px;border-radius:999px;font-weight:700;vertical-align:middle}.online-badge{width:10px;height:10px;border-radius:50%;background:var(--accent);flex-shrink:0}.inline-form{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.inline-form input{background:var(--surface-2);color:var(--fg);min-width:180px}.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border);padding:.35rem .65rem;font-weight:500}.btn-ghost:hover{background:var(--surface-2);color:var(--fg)}.user-list{display:flex;flex-direction:column;gap:.4rem}.user-item{display:flex;align-items:center;gap:.5rem;font-size:.9rem;padding:.3rem .5rem;border-radius:6px}.user-item--me{background:color-mix(in srgb,var(--accent) 12%,transparent)}.user-item--offline{opacity:.5}.user-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lobby{display:flex;flex-direction:column;height:100vh;width:clamp(300px,100%,1200px);margin:0 auto}.lobby-header{display:flex;align-items:center;gap:1rem;padding:.85rem 1.5rem;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:10}.lobby-brand{display:flex;align-items:center;gap:.6rem;margin-right:auto}.lobby-brand h1{font-size:1.2rem;font-weight:700;letter-spacing:-.5px;font-family:monospace;color:var(--accent)}.lobby-profile{display:flex;align-items:center;gap:.6rem}.profile-name{font-weight:600;font-family:monospace}.lobby-body{display:grid;grid-template-columns:1fr 18rem;flex:1;overflow:hidden}.rooms-panel{display:flex;flex-direction:column;overflow:hidden}.rooms-panel-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem .75rem;flex-shrink:0}.rooms-panel-header h2{font-size:1.1rem;font-weight:700}.rooms-list-container{flex:1;overflow-y:auto;padding:0 1.5rem .5rem}.rooms-panel-footer{flex-shrink:0;border-top:1px solid var(--border);padding:1rem 1.5rem;background:var(--surface);display:flex;flex-direction:column;gap:.75rem}.create-room-form{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:1rem;margin:1rem;display:flex;flex-direction:column;gap:.75rem}.create-room-form input[type=text]{background:var(--textbox-color);width:100%}.toggle-label{display:flex;align-items:center;gap:.5rem;font-size:.9rem;cursor:pointer}.toggle-label input[type=checkbox]{width:1rem;height:1rem;accent-color:var(--accent)}.room-list{display:flex;flex-direction:column;gap:.6rem;padding-top:.5rem}.room-card{display:flex;align-items:center;justify-content:space-between;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:.9rem 1.1rem;margin:.9rem 1.1rem;gap:1rem;transition:border-color .15s,background .15s}.room-card:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--surface-2))}.room-card-info{flex:1;min-width:0}.room-card-title{display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem}.room-card-title h3{font-size:1rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-icon{font-size:1rem;flex-shrink:0;font-style:normal;color:var(--muted);font-weight:700}.room-card-meta{display:flex;gap:.75rem;font-size:.8rem;color:var(--muted)}.meta-stat{display:flex;align-items:center;gap:.3rem}.btn-enter{flex-shrink:0;background:var(--accent);color:var(--accent-contrast);font-weight:600;font-family:monospace}.btn-enter:hover{filter:brightness(1.1)}.empty-state{text-align:center;padding:3rem 1rem;color:var(--muted)}.lobby-sidebar{border-left:1px solid var(--border);padding:1.5rem 1rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem}.lobby-sidebar h2{font-size:1rem;font-weight:700}.chatroom{display:grid;grid-template-rows:auto auto 1fr auto;height:100vh;max-height:100vh;width:clamp(300px,100%,1400px);margin:0 auto;overflow:hidden}.chatroom-header{display:flex;align-items:center;gap:1rem;padding:.75rem 1.25rem;border-bottom:1px solid var(--border);background:var(--surface);z-index:10}.btn-back{background:transparent;color:var(--muted);border:1px solid var(--border);font-family:monospace;font-size:.85rem;padding:.35rem .7rem;flex-shrink:0}.btn-back:hover{background:var(--surface-2);color:var(--fg)}.chatroom-title{display:flex;align-items:center;gap:.6rem;flex:1;min-width:0}.room-icon-lg{font-size:1.25rem;flex-shrink:0}.chatroom-title h1{font-size:1.1rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-subtitle{font-size:.75rem;color:var(--muted);display:flex;align-items:center;gap:.35rem;margin-top:1px}.chatroom-header-actions{display:flex;align-items:center;gap:.6rem;flex-shrink:0}.invite-bar{padding:.6rem 1.25rem;background:var(--surface-2);border-bottom:1px solid var(--border)}.invite-bar input{background:var(--textbox-color);min-width:280px}.chatroom-body{display:grid;grid-template-columns:1fr 18rem;overflow-y:auto;height:80vh;min-height:0}.message-panel{overflow-y:auto;padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.5rem}.messages{display:flex;flex-direction:column;gap:.4rem}.empty-chat{color:var(--muted);text-align:center;padding:2rem 0;font-size:.9rem}.not-member-notice{background:color-mix(in srgb,orange 15%,var(--surface-2));border:1px solid orange;border-radius:8px;padding:.6rem 1rem;font-size:.85rem;color:var(--fg);margin-bottom:.5rem}.system-message{display:flex;align-items:center;justify-content:center;gap:.5rem;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--muted);padding:.3rem .75rem;border-radius:6px;font-size:.8rem;font-style:italic;align-self:center;max-width:80%}.user-message{background:var(--surface-2);border-radius:10px;padding:.55rem .85rem;max-width:80%;align-self:flex-start}.user-message--me{align-self:flex-end;background:color-mix(in srgb,var(--accent) 18%,var(--surface-2));border-bottom-right-radius:3px}.msg-header{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.2rem}.msg-sender{font-weight:700;font-size:.85rem}.msg-time{font-size:.72rem;color:var(--muted);flex-shrink:0}.msg-text{font-size:.95rem;line-height:1.45;word-break:break-word}.msg-text .md-line{display:block}.msg-text .md-spacer{display:block;height:.4em}.msg-text strong{font-weight:700}.msg-text em{font-style:italic}.msg-text code{background:color-mix(in srgb,var(--accent) 10%,var(--surface));border:1px solid var(--border);border-radius:3px;padding:0 4px;font-family:monospace;font-size:.88em}.msg-text pre{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:.5rem .75rem;margin:.3rem 0;overflow-x:auto;font-size:.85em;line-height:1.5}.msg-text pre code{background:none;border:none;padding:0;font-size:inherit}.msg-text a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}.msg-text a:hover{opacity:.8}.chatroom-sidebar{border-left:1px solid var(--border);padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem}.chatroom-sidebar h2{font-size:.95rem;font-weight:700}.sidebar-section{display:flex;flex-direction:column;gap:.5rem}.sidebar-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);font-weight:600}.new-message{border-top:1px solid var(--border);padding:.85rem 1.25rem;background:var(--surface)}.new-message form{display:flex;gap:.75rem;align-items:flex-end;max-width:900px;margin:0 auto}.new-message form textarea{flex:1;font-family:monospace;font-size:.95rem;resize:none;background:var(--textbox-color);color:var(--fg);min-height:60px;max-height:160px}.new-message form button{flex-shrink:0;align-self:flex-end}.ctx-menu{position:fixed;z-index:9999;min-width:200px;max-width:280px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:4px;box-shadow:0 4px 6px -1px #0000001a,0 10px 30px -5px #0003,0 0 0 1px color-mix(in srgb,var(--accent) 15%,transparent);opacity:0;transform:scale(.92) translateY(-4px);transform-origin:top left;transition:opacity .12s ease,transform .12s ease;pointer-events:none}.ctx-menu--visible{opacity:1;transform:scale(1) translateY(0);pointer-events:all}.ctx-label{padding:6px 10px 4px;font-size:.72rem;font-family:monospace;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.ctx-separator{height:1px;background:var(--border);margin:3px 6px}.ctx-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:transparent;color:var(--fg);border:none;border-radius:6px;padding:7px 10px;font-size:.875rem;font-family:monospace;font-weight:500;cursor:pointer;transition:background .08s,color .08s;filter:none}.ctx-item:hover{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--fg);filter:none}.ctx-item:active{background:color-mix(in srgb,var(--accent) 24%,transparent);filter:none}.ctx-item--danger{color:#e05252}.ctx-item--danger:hover{background:color-mix(in srgb,#e05252 14%,transparent);color:#e05252}.ctx-item-icon{font-size:.9rem;width:16px;text-align:center;flex-shrink:0;color:var(--muted)}.ctx-item:hover .ctx-item-icon,.ctx-item--danger:hover .ctx-item-icon{color:inherit}.ctx-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(8px);background:var(--surface-2);border:1px solid var(--border);color:var(--fg);font-family:monospace;font-size:.8rem;padding:6px 14px;border-radius:999px;box-shadow:0 4px 20px #00000026;pointer-events:none;z-index:10000;opacity:0;transition:opacity .15s,transform .15s}.ctx-toast--visible{opacity:1;transform:translate(-50%) translateY(0)}