:root{--bg: #0F0F12;--text: #F0ECE4;--accent: #5EEAA2;--muted: #8C8C92;--border: #30303A;--font: "JetBrains Mono", "Fira Code", "DejaVu Sans Mono", ui-monospace, monospace;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px;line-height:1.5}.app{display:flex;height:100vh;overflow:hidden}.sidebar{width:220px;min-width:220px;border-right:1px solid var(--border);display:flex;flex-direction:column;background:var(--bg)}.sidebar-header{padding:16px 14px 8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.room-list{list-style:none;flex:1;overflow-y:auto}.room-item{display:flex;justify-content:space-between;align-items:center;padding:6px 14px;cursor:pointer;transition:color .1s;color:var(--muted);border:none;background:none;font-family:var(--font);font-size:13px;width:100%;text-align:left}.room-item:hover{color:var(--text)}.room-item.active{color:var(--accent);font-weight:700}.room-item .count{font-size:11px;color:var(--muted);opacity:.6}.nick-section{padding:12px 14px;border-top:1px solid var(--border)}.nick-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}.nick-display{color:var(--accent);cursor:pointer;font-weight:600;font-size:13px;display:inline-block}.nick-display:hover{text-decoration:underline}.nick-input{background:transparent;border:1px solid var(--border);color:var(--accent);font-family:var(--font);font-size:13px;font-weight:600;padding:2px 6px;width:100%;outline:none}.nick-edit-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.nick-status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.nick-confirm-btn{background:transparent;border:1px solid var(--border);color:var(--muted);font-family:var(--font);font-size:10px;padding:1px 6px;cursor:pointer;flex-shrink:0}.nick-confirm-btn:disabled{opacity:.3;cursor:default}.nick-confirm-btn:hover:not(:disabled){color:var(--text);border-color:var(--muted)}.nick-hint{font-size:9px;width:100%;margin-top:2px}.nick-toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:#1a1a22;border:1px solid var(--border);color:var(--text);padding:8px 16px;font-size:12px;z-index:100;font-family:var(--font);white-space:nowrap}.ephemeral-note{padding:8px 14px;font-size:10px;color:var(--muted);opacity:.5;border-top:1px solid var(--border)}.create-section{padding:8px 14px 12px;border-top:1px solid var(--border)}.create-room-btn{background:transparent;border:1px dashed var(--border);color:var(--accent);font-family:var(--font);font-size:11px;padding:6px 10px;cursor:pointer;width:100%;text-align:left;letter-spacing:.02em;transition:border-color .15s,color .15s}.create-room-btn:hover:not(:disabled){border-color:var(--accent);color:var(--text)}.create-room-btn:disabled{opacity:.4;cursor:default}.create-room-hint{font-size:9px;color:var(--muted);opacity:.5;margin-top:6px}.duration-picker{display:flex;flex-direction:column;gap:4px}.duration-title{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}.duration-label{font-size:10px;color:var(--muted);opacity:.6;margin-bottom:2px}.duration-option{background:transparent;border:1px solid var(--border);color:var(--text);font-family:var(--font);font-size:11px;padding:5px 10px;cursor:pointer;text-align:left;letter-spacing:.02em;transition:border-color .15s}.duration-option:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.duration-option:disabled{opacity:.4;cursor:default}.duration-cancel{background:transparent;border:none;color:var(--muted);font-family:var(--font);font-size:10px;padding:4px 10px;cursor:pointer;text-align:left;opacity:.6;margin-top:2px}.duration-cancel:hover{color:var(--text);opacity:1}.expiry-banner{padding:6px 16px;font-size:11px;border-bottom:1px solid var(--border);font-family:var(--font);letter-spacing:.02em}.back-btn{background:transparent;border:1px solid var(--border);color:var(--accent);font-family:var(--font);font-size:11px;padding:4px 12px;cursor:pointer;margin-top:8px}.back-btn:hover{border-color:var(--accent);color:var(--text)}.chat-area{flex:1;display:flex;flex-direction:column;min-width:0}.title-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border);font-size:12px;min-height:40px}.title-bar-left{display:flex;align-items:center;gap:8px}.title-bar-left .room-name{color:var(--text);font-weight:600}.title-bar-left .status-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.status-dot.connected{background:var(--accent)}.status-dot.connecting{background:#d4a017}.status-dot.disconnected{background:#e04040}.title-bar-right{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:11px}.copy-link{background:none;border:1px solid var(--border);color:var(--muted);font-family:var(--font);font-size:10px;padding:2px 8px;cursor:pointer;letter-spacing:.05em}.copy-link:hover{color:var(--text);border-color:var(--muted)}.messages{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:6px}.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);gap:12px;-webkit-user-select:none;user-select:none}.empty-state .cursor-block{font-size:28px;animation:blink 1.2s step-end infinite}.empty-state .empty-text{font-size:12px;opacity:.5}@keyframes blink{50%{opacity:0}}.message-line{display:flex;flex-direction:column;gap:1px}.message-meta{display:flex;align-items:baseline;gap:8px}.message-meta .nick{font-weight:700;font-size:13px}.message-meta .ts{font-size:10px;color:var(--muted);opacity:.6}.message-text{padding-left:16px;color:var(--text);word-break:break-word;white-space:pre-wrap}.new-msg-pill{position:absolute;bottom:80px;left:50%;transform:translate(-50%);background:var(--border);color:var(--text);padding:4px 14px;font-size:11px;cursor:pointer;border:1px solid var(--muted);z-index:5}.new-msg-pill:hover{background:var(--muted)}.chat-main{flex:1;position:relative;display:flex;flex-direction:column;min-height:0}.input-bar{display:flex;align-items:flex-start;padding:10px 16px;border-top:1px solid var(--border);gap:8px}.input-bar .prompt-char{color:var(--accent);font-weight:700;margin-top:3px;flex-shrink:0}.input-wrapper{flex:1;display:flex;flex-direction:column}.input-wrapper textarea{background:transparent;border:none;color:var(--text);font-family:var(--font);font-size:13px;line-height:1.5;resize:none;outline:none;width:100%;min-height:21px;max-height:120px}.input-wrapper textarea::placeholder{color:var(--muted);opacity:.4}.char-counter{font-size:10px;color:#e04040;align-self:flex-end;margin-top:2px}.rate-hint{font-size:10px;color:#d4a017;margin-top:4px}.send-btn{background:transparent;border:1px solid var(--accent);color:var(--accent);font-family:var(--font);font-size:11px;padding:3px 10px;cursor:pointer;letter-spacing:.06em;margin-top:1px;flex-shrink:0}.send-btn:hover{background:var(--accent);color:var(--bg)}.send-btn:disabled{opacity:.3;cursor:default;background:transparent;color:var(--accent)}.presence-tooltip{position:absolute;top:100%;right:0;background:#1a1a22;border:1px solid var(--border);padding:8px 12px;font-size:11px;z-index:10;min-width:120px;max-height:200px;overflow-y:auto}.presence-tooltip .nick-entry{padding:2px 0;color:var(--text)}.mobile-dropdown{display:none}@media(max-width:700px){.app{flex-direction:column}.sidebar{display:none}.mobile-dropdown{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--bg)}.mobile-dropdown select{background:var(--bg);color:var(--text);border:1px solid var(--border);font-family:var(--font);font-size:12px;padding:4px 8px;flex:1;outline:none}.mobile-dropdown .nick-display{font-size:12px}}