:root{color-scheme:light dark;--bg: #ffffff;--panel: #f5f6f8;--line: #e2e4e8;--text: #1c1e21;--muted: #6b7280;--accent: #2563eb;--mine: #dbeafe;--theirs: #f1f3f5;--danger: #dc2626;font-family:system-ui,-apple-system,Apple SD Gothic Neo,Malgun Gothic,sans-serif}@media(prefers-color-scheme:dark){:root{--bg: #16181c;--panel: #1e2126;--line: #2e3238;--text: #e8eaed;--muted: #9aa0a6;--accent: #60a5fa;--mine: #1e3a5f;--theirs: #262a30}}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text)}button,input,textarea{font:inherit;color:inherit}button{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:10px 14px;cursor:pointer}button:disabled{opacity:.5;cursor:default}button.secondary{background:transparent;color:var(--accent);border:1px solid var(--line)}button.link{background:none;color:var(--accent);padding:4px 6px}input,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}.muted{color:var(--muted)}.pad{padding:12px 16px}.error{color:var(--danger)}.center{min-height:100%;display:grid;place-items:center;padding:16px;text-align:center}.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px}.login{width:min(380px,100%);text-align:left}.login h1{margin:0 0 16px;font-size:22px}.login form{display:grid;gap:10px}.login label{font-size:14px;color:var(--muted)}.login hr{border:0;border-top:1px solid var(--line);margin:20px 0}.login .secondary{width:100%}.layout{display:grid;grid-template-columns:280px 1fr;height:100%}.sidebar{display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--panel);min-height:0}.sidebar header,.sidebar footer{padding:12px 16px;display:flex;justify-content:space-between;align-items:center}.sidebar footer{gap:8px}.sidebar footer .secondary{flex:1}.notify-bar{margin:0 12px 8px;background:var(--mine);color:var(--text);font-size:14px}.sidebar nav{flex:1;overflow-y:auto}.room-item{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;background:none;color:var(--text);border-radius:0;text-align:left;padding:12px 16px}.room-item.active,.room-item:hover{background:var(--line)}.room-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.badge{margin-left:6px;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:1px 4px}.unread{background:var(--danger);color:#fff;border-radius:999px;font-size:12px;padding:1px 7px}.main{min-width:0;min-height:0}.room{display:flex;flex-direction:column;height:100%}.room-header{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}.room-header h2{margin:0;font-size:17px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.back{display:none;font-size:20px}.messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}.msg{display:flex;flex-direction:column;align-items:flex-start;max-width:80%}.msg.mine{align-self:flex-end;align-items:flex-end}.author{font-size:13px;color:var(--muted);margin-bottom:2px}.bubble-row{display:flex;align-items:flex-end;gap:6px}.msg.mine .bubble-row{flex-direction:row-reverse}.bubble{background:var(--theirs);padding:8px 12px;border-radius:12px;white-space:pre-wrap;word-break:break-word}.msg.mine .bubble{background:var(--mine)}.file{display:block;margin-top:4px;font-size:14px;text-align:left}button.file{padding:0;color:var(--accent);text-decoration:underline}.attach{padding:10px 12px}.meta{display:flex;flex-direction:column;align-items:flex-end;font-size:11px;color:var(--muted)}.msg:not(.mine) .meta{align-items:flex-start}.unread-count{color:#ca8a04;font-weight:600}.composer{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);align-items:flex-end}.composer textarea{resize:none;max-height:160px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:grid;place-items:center;padding:16px}.dialog{width:min(420px,100%);display:grid;gap:12px}.dialog h2{margin:0;font-size:18px}.pick-list{list-style:none;margin:0;padding:0;max-height:50vh;overflow-y:auto}.pick-list button{width:100%;text-align:left;background:none;color:var(--text);border-radius:6px}.pick-list button:hover{background:var(--line)}select{font:inherit;color:inherit;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);min-width:0}.small{font-size:12px}.tabs{display:flex;gap:4px;padding:8px 16px;border-bottom:1px solid var(--line)}.tab{background:none;color:var(--muted);border-radius:6px}.tab.on{background:var(--line);color:var(--text)}.admin-body{flex:1;overflow-y:auto;padding:16px;display:grid;gap:14px;align-content:start;max-width:760px}.admin-form{display:grid;gap:10px;padding:16px}.admin-form h3{margin:0;font-size:16px}.row{display:flex;gap:8px;align-items:center}.row>input,.row>select{flex:1}.spread{justify-content:space-between}.admin-table{width:100%;border-collapse:collapse;font-size:14px}.admin-table th{text-align:left;color:var(--muted);font-weight:500;padding:6px 4px;border-bottom:1px solid var(--line)}.admin-table td{padding:8px 4px;border-bottom:1px solid var(--line);vertical-align:middle}.chip{padding:3px 10px;font-size:13px;border-radius:999px}.chip.off{background:transparent;color:var(--muted);border:1px solid var(--line)}.admin-rooms button.active{background:var(--line)}button.danger{color:var(--danger)}.meter{height:8px;background:var(--line);border-radius:4px;overflow:hidden}.meter>div{height:100%;background:var(--accent)}.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.stats li{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px;display:flex;justify-content:space-between}.more{align-self:center;font-size:13px}.msg-actions{display:flex;gap:4px;font-size:13px}.msg-actions .link{padding:2px 6px}.bubble{cursor:default}.me{color:var(--text);padding:0;text-align:left}@media(max-width:720px){.layout{grid-template-columns:1fr}.layout.room-open .sidebar{display:none}.layout:not(.room-open) .main{display:none}.back{display:inline-block}.msg{max-width:90%}.row{flex-wrap:wrap}.admin-body{padding:12px}}