:root{color-scheme:light;--bg: #d7dce3;--panel: #eef1f5;--row: #f6f7f9;--border: #8a9099;--text: #2b2f36;--accent: #2db24a;--highlight: #ffffff;--shadow: #b5bcc6;--panel-dark: #d8dee6;--panel-light: #f2f4f7;--ds-blue: #6aa3b8}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:Tahoma,Verdana,"MS Sans Serif",system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;text-rendering:optimizeSpeed;-webkit-font-smoothing:none}body:before{content:"";position:fixed;inset:0;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.03),rgba(0,0,0,.03) 1px,transparent 1px,transparent 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.015),rgba(0,0,0,.015) 1px,transparent 1px,transparent 4px);pointer-events:none}.app-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.app-shell *{image-rendering:pixelated}.screen{width:min(960px,100%)}.ds-panel{background:linear-gradient(180deg,var(--panel-light) 0%,var(--panel-dark) 100%);border:2px solid var(--border);border-radius:2px;padding:20px;box-shadow:inset 0 1px 0 var(--highlight),inset 0 -1px #9aa2ad}.title{margin:0 0 12px;font-size:16px;font-weight:700}.ds-title-bar{display:inline-block;padding:4px 8px;border:2px solid var(--border);border-radius:2px;background:#e7ebf1;box-shadow:inset 0 1px #fff,inset 0 -1px #b9c0cb}.ds-input{width:100%;padding:10px 12px;border:2px solid var(--border);border-radius:2px;background:#f9fafb;font-size:14px;font-family:inherit;outline:none;box-shadow:inset 0 1px 0 var(--highlight)}.ds-input:focus{border-color:var(--accent)}.ds-button{border:2px solid var(--border);border-radius:6px;padding:8px 16px;background:linear-gradient(180deg,#fefefe,#e9edf2);color:var(--text);font-size:14px;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:inset 0 1px 0 var(--highlight),inset 0 -1px 0 var(--shadow)}.ds-button:active{transform:translateY(1px)}.ds-button.primary{border-color:#2a8f3c;background:linear-gradient(180deg,#d7f3de,#9fd8ad)}.ds-button.secondary{background:linear-gradient(180deg,#fff,#e7ebf1)}.ds-button.tiny{border-radius:4px;padding:4px 10px;font-size:12px}.button-letter{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;border:2px solid var(--border);background:#fff;font-weight:700}.name-screen{display:flex;justify-content:center}.name-panel{width:min(420px,100%);display:flex;flex-direction:column;gap:12px}.avatar-picker{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}.avatar-preview{width:96px;height:96px;border-radius:2px;border:2px solid var(--border);background:#c6ced8;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;box-shadow:inset 0 1px 0 var(--highlight),inset 0 -2px 0 var(--shadow)}.avatar-preview.has-image{background-size:cover;background-position:center;image-rendering:pixelated}.avatar-controls{display:flex;flex-wrap:wrap;gap:8px}.avatar-input{display:none}.hint{margin:0;font-size:12px;color:#57606a}.error-text{color:#b23b3b}.room-panel{display:flex;flex-direction:column;gap:16px}.room-list{display:flex;flex-direction:column;gap:10px;padding:12px;border:2px solid var(--border);border-radius:2px;background:#dfe4ea;box-shadow:inset 0 1px #f8fafc,inset 0 -1px #b8bfc9;max-height:300px;overflow-y:auto}.room-create{border:2px solid var(--border);border-radius:2px;padding:10px;background:#e9edf3;box-shadow:inset 0 1px #fff,inset 0 -1px #c3c9d2;display:flex;flex-direction:column;gap:8px}.room-create-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.room-create-row{display:grid;grid-template-columns:1fr auto;gap:8px}.room-create-row .ds-input,.room-create-row .ds-button{height:36px}.room-image-row{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}.room-image-preview{width:48px;height:48px;border:2px solid var(--border);border-radius:2px;background:#f7f8fa;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#6a717c;box-shadow:inset 0 1px #fff,inset 0 -1px #c1c7d0}.room-image-preview.has-image{background-size:cover;background-position:center;image-rendering:pixelated;color:transparent}.room-image-actions{display:flex;flex-wrap:wrap;gap:8px}.room-error{padding:6px 8px;border:2px solid #b23b3b;border-radius:2px;background:#f6dcdc;font-size:12px;font-weight:700;color:#6a1e1e}.room-row{appearance:none;width:100%;display:grid;grid-template-columns:64px 1fr auto 54px;gap:16px;align-items:center;padding:10px 12px;min-height:64px;border:2px solid var(--border);border-radius:2px;background:#f3f5f8;text-align:left;cursor:pointer;font-family:inherit;box-shadow:inset 0 1px #fff,inset 0 -1px #c1c7d0;position:relative}.room-row.selected{background:#fffdf5;border-color:#5b8aa0;box-shadow:inset 0 1px #fff,inset 0 -1px #c0c8d2}.room-row.selected:after{content:"";position:absolute;inset:2px;border:2px solid #5b8aa0;pointer-events:none}.room-tile{width:56px;height:56px;border:2px solid var(--border);border-radius:2px;background:#f7f8fa;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;box-shadow:inset 0 1px #fff,inset 0 -1px #c1c7d0;position:relative;z-index:1}.room-tile.has-image{background-size:cover;background-position:center;image-rendering:pixelated;color:transparent}.room-name{font-size:16px;font-weight:700}.room-capacity{font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:2px solid #9aa1aa;border-radius:2px;background:#eef1f5}.capacity-icon{width:16px;height:16px;border-radius:2px;background:#343a40;position:relative}.capacity-icon:before{content:"";position:absolute;top:3px;left:5px;width:6px;height:6px;border-radius:2px;background:#eef1f5}.capacity-icon:after{content:"";position:absolute;top:9px;left:3px;width:10px;height:4px;border-radius:2px;background:#eef1f5}.room-signal .signal-box{width:36px;height:24px;border:2px solid #5c626b;border-radius:2px;padding:4px;display:flex;align-items:flex-end;gap:3px;background:#1f2326}.signal-bar{width:4px;background:#2b2f36;border-radius:2px}.signal-bar.on{background:var(--accent)}.bottom-bar{display:flex;justify-content:space-between;gap:12px;margin-top:4px}.chat-panel{display:flex;flex-direction:column;gap:12px;min-height:540px}.chat-header{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:12px;padding:10px 12px;border:2px solid var(--border);border-radius:2px;background:#edf0f4;box-shadow:inset 0 1px #fff,inset 0 -1px #c1c7d0}.chat-header.flash{border-color:#f3b433}.chat-header.nudge-flash{background:linear-gradient(180deg,#fff6e1,#ffe2a8)}.chat-title{font-size:16px;font-weight:700}.chat-status{display:flex;align-items:center;gap:6px;font-size:12px}.status-dot{width:10px;height:10px;border-radius:50%;background:#bfc5ce;border:1px solid var(--border)}.status-dot.connected{background:var(--accent)}.status-dot.reconnecting{background:#f3b433}.chat-actions{display:flex;gap:8px}.chat-self{appearance:none;display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:2px solid var(--border);border-radius:2px;background:#f1f4f8;cursor:pointer;font-family:inherit;color:var(--text);box-shadow:inset 0 1px #fff,inset 0 -1px #c3c9d2}.chat-self-name{font-size:12px;font-weight:700}.chat-body{display:grid;grid-template-columns:1fr 200px;gap:12px;height:100%}.chat-main{display:flex;flex-direction:column;gap:8px}.chat-messages{border:2px solid var(--border);border-radius:2px;background:#fbfbfc;padding:12px;min-height:320px;max-height:420px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}.message-row{display:grid;grid-template-columns:auto 1fr;gap:10px}.message-row.mention .message-bubble{border-color:#2a8f3c;background:#e9f7ee}.avatar{width:56px;height:56px;border-radius:2px;border:2px solid var(--border);background:#b5c2d4;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;box-shadow:inset 0 1px #fff6;background-size:cover;background-position:center}.avatar.has-image{image-rendering:pixelated}.avatar.tiny{width:36px;height:36px;font-size:13px}.message-meta{display:flex;align-items:baseline;justify-content:space-between;font-size:12px;margin-bottom:4px}.message-name{font-weight:700}.message-bubble{border:2px solid var(--border);border-radius:2px;background:#f1f3f6;padding:8px 10px;font-size:14px;line-height:1.3;box-shadow:inset 0 1px #fff,inset 0 -1px #c1c7d0}.system-row{display:flex;justify-content:center}.system-pill{padding:4px 10px;border-radius:2px;border:1px solid var(--border);background:#eef3f7;font-size:12px;color:#4a515c}.typing-indicator{font-size:12px;color:#4d5661;min-height:16px}.chat-input{display:grid;grid-template-columns:1fr auto;gap:8px}.jump-latest{align-self:flex-end}.user-panel{border:2px solid var(--border);border-radius:2px;background:#fefefe;padding:10px;display:flex;flex-direction:column;gap:8px;height:fit-content}.panel-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.user-list{display:flex;flex-direction:column;gap:8px}.user-row{display:flex;align-items:center;gap:8px;font-size:13px}.emote{display:inline-block;width:14px;height:14px;margin:0 2px;image-rendering:pixelated;background-size:cover;vertical-align:middle}.emote-smile{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' shape-rendering='crispEdges'><rect width='12' height='12' fill='%23f6f7f9'/><rect x='2' y='3' width='2' height='2' fill='%232b2f36'/><rect x='8' y='3' width='2' height='2' fill='%232b2f36'/><rect x='3' y='8' width='6' height='1' fill='%232b2f36'/></svg>")}.emote-sad{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' shape-rendering='crispEdges'><rect width='12' height='12' fill='%23f6f7f9'/><rect x='2' y='3' width='2' height='2' fill='%232b2f36'/><rect x='8' y='3' width='2' height='2' fill='%232b2f36'/><rect x='3' y='8' width='6' height='1' fill='%232b2f36'/><rect x='4' y='7' width='4' height='1' fill='%232b2f36'/></svg>")}.emote-grin{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' shape-rendering='crispEdges'><rect width='12' height='12' fill='%23f6f7f9'/><rect x='2' y='3' width='2' height='2' fill='%232b2f36'/><rect x='8' y='3' width='2' height='2' fill='%232b2f36'/><rect x='3' y='7' width='6' height='2' fill='%232b2f36'/><rect x='3' y='9' width='6' height='1' fill='%23ffffff'/></svg>")}.emote-wink{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' shape-rendering='crispEdges'><rect width='12' height='12' fill='%23f6f7f9'/><rect x='2' y='3' width='2' height='1' fill='%232b2f36'/><rect x='8' y='3' width='2' height='2' fill='%232b2f36'/><rect x='3' y='8' width='6' height='1' fill='%232b2f36'/></svg>")}.emote-heart{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' shape-rendering='crispEdges'><rect width='12' height='12' fill='%23f6f7f9'/><rect x='2' y='3' width='2' height='2' fill='%23d65353'/><rect x='8' y='3' width='2' height='2' fill='%23d65353'/><rect x='3' y='5' width='6' height='4' fill='%23d65353'/><rect x='4' y='9' width='4' height='2' fill='%23d65353'/></svg>")}.nudge{animation:nudge-shake .35s ease-in-out}@keyframes nudge-shake{0%{transform:translate(0)}25%{transform:translate(6px,-4px)}50%{transform:translate(-5px,3px)}75%{transform:translate(4px,-2px)}to{transform:translate(0)}}@media(prefers-reduced-motion:reduce){.nudge{animation:none}}@media(max-width:860px){.chat-body{grid-template-columns:1fr}.user-panel{display:none}}