:root{color-scheme:dark;--bg: #0a0c0f;--panel: #12161c;--panel-2: #181e27;--line: #2a3340;--text: #e8eef6;--muted: #8b98a8;--accent: #fb6d07;--accent-dim: #3a2414;--danger: #ff6b6b;--ok: #3dd68c;--ok-bg: #152219;--header-h: 56px;--nav-h: 64px;--safe-b: env(safe-area-inset-bottom, 0px);--safe-t: env(safe-area-inset-top, 0px);font-family:Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:var(--bg);color:var(--text)}button,input{font:inherit}button{border:0;border-radius:12px;padding:12px 16px;background:var(--accent);color:#111;font-weight:650;cursor:pointer}button:disabled{opacity:.45;cursor:default}button.ghost{background:var(--panel-2);color:var(--text);border:1px solid var(--line)}button.danger{background:#5c1d1d;color:#ffd4d4}button.icon{width:40px;height:40px;padding:0;display:grid;place-items:center;background:transparent;color:var(--text);border-radius:12px}button.icon:active{background:var(--panel-2)}input{width:100%;background:#0f1318;border:1px solid var(--line);border-radius:12px;color:var(--text);padding:12px 14px}label{display:grid;gap:6px;font-size:13px;color:var(--muted)}.brand{margin:0;letter-spacing:.04em;font-size:22px}.brand span{color:var(--accent)}.muted{color:var(--muted)}.hint{margin:0;font-size:13px;color:var(--muted);line-height:1.4}.field-help{margin:0;font-size:12px;color:#7f8b9a;line-height:1.35}.error{color:var(--danger);margin:0;font-size:14px}.ok{color:var(--ok)}code{color:#ffbf66;word-break:break-all}.stack{display:grid;gap:12px}.row{display:flex;gap:8px;align-items:center}.app{height:100%;max-width:1120px;margin:0 auto;display:grid;grid-template-rows:auto 1fr auto;background:radial-gradient(900px 420px at 80% -10%,#1a120c 0%,transparent 55%),var(--bg);position:relative;overflow:hidden}.app-header{height:calc(var(--header-h) + var(--safe-t));padding:var(--safe-t) 12px 0;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);background:#0a0c0feb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:5}.app-header .titles{flex:1;min-width:0}.app-header h1{margin:0;font-size:17px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-header .sub{margin:2px 0 0;font-size:12px;color:var(--muted)}button.back-room{background:var(--accent);color:#111;padding:8px 12px;font-size:13px;white-space:nowrap}.app-body{overflow:auto;-webkit-overflow-scrolling:touch;min-height:0}.app-nav{height:calc(var(--nav-h) + var(--safe-b));padding:0 8px var(--safe-b);display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);background:#0c0f14f5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:5}.nav-btn{background:transparent;color:var(--muted);display:grid;gap:2px;place-items:center;padding:10px 4px;border-radius:0;font-weight:600;font-size:11px}.nav-btn .glyph{font-size:20px;line-height:1}.nav-btn.on{color:var(--accent)}.screen{padding:16px 16px 24px;display:grid;gap:14px;min-height:100%;align-content:start}.screen.chat-screen{padding:0;height:100%;grid-template-rows:1fr auto;gap:0}.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px}.howto{background:#101820;border:1px dashed var(--line);border-radius:14px;padding:14px;color:var(--muted);font-size:14px;line-height:1.5}.howto strong{color:var(--text)}.howto ol,.howto ul{margin:8px 0 0;padding-left:18px}.howto li{margin:4px 0}.callout{background:var(--ok-bg);border:1px solid #2d4a32;border-radius:12px;padding:12px;color:#b7e0c2;font-size:14px;line-height:1.45}.tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:4px}.tab{background:transparent;color:var(--muted);padding:10px;border-radius:10px;font-weight:650}.tab.on{background:var(--accent);color:#111}.list{display:grid;gap:8px}.list-item{display:flex;gap:12px;align-items:center;text-align:left;width:100%;background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:14px;padding:12px;font-weight:500}.list-item:active{border-color:var(--accent)}.list-item.on{border-color:var(--accent);background:var(--accent-dim)}.avatar{width:44px;height:44px;border-radius:14px;background:#243041;display:grid;place-items:center;font-weight:700;color:var(--accent);flex-shrink:0}.list-item .meta{flex:1;min-width:0}.list-item .title{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list-item .desc{margin-top:2px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.empty{text-align:center;padding:36px 16px;color:var(--muted);display:grid;gap:8px;justify-items:center}.empty .big{font-size:40px;line-height:1;opacity:.7}.chat-log{overflow:auto;-webkit-overflow-scrolling:touch;padding:12px 14px 8px;display:grid;gap:8px;align-content:start;min-height:0;background:#0c0f14}.msg-row{display:flex;align-items:flex-start;gap:6px;max-width:100%}.msg-row.in{justify-content:flex-start}.msg-row.out{justify-content:flex-end;flex-direction:row-reverse}.bubble{max-width:min(82%,calc(100% - 40px));padding:10px 12px;border-radius:16px;line-height:1.35;font-size:15px;word-break:break-word}.bubble.in{background:#243041;border-bottom-left-radius:6px}.bubble.out{background:var(--accent-dim);border:1px solid #5a3518;border-bottom-right-radius:6px}.bubble .who{font-size:12px;font-weight:700;margin-bottom:3px}button.who{display:block;background:transparent;color:inherit;padding:0;border-radius:0;font-size:12px;font-weight:700;text-align:left;cursor:pointer}.bubble .time{display:block;margin-top:4px;font-size:11px;color:var(--muted);text-align:right}.msg-wrap{position:relative;z-index:0}.msg-wrap:has(.msg-menu){z-index:5}.msg-menu-wrap{position:relative;flex:0 0 auto;padding-top:2px;z-index:2}.msg-menu-btn{width:30px;height:30px;padding:0;border-radius:10px;background:#1a2230;color:var(--muted);font-size:16px;line-height:1;border:1px solid var(--line)}.msg-menu{position:absolute;top:34px;left:auto;right:0;z-index:20;width:196px;padding:8px;border-radius:14px;background:#161c24;border:1px solid var(--line);box-shadow:0 12px 28px #00000059}.msg-menu-wrap.end .msg-menu{left:0;right:auto}.person-row{display:flex;align-items:center;gap:8px;padding-right:8px}.person-row.active{background:#1a2230}.person-row .person{flex:1 1 auto;min-width:0;width:auto}.person-row .person>div:last-child{min-width:0;overflow:hidden}.person-row .person .you{max-width:100%}.kick-btn{flex:0 0 auto;margin:0;padding:7px 10px;font-size:12px;background:#3a1a1a;color:#ffb4b4;white-space:nowrap}.kick-btn:disabled{opacity:.55}.msg-reacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-bottom:6px}.msg-reacts button{min-width:0;padding:6px 0;background:#222a35;font-size:18px;line-height:1.2}.msg-action{width:100%;margin-top:4px;padding:8px 10px;background:#222a35;color:var(--text);text-align:left;font-size:13px}.msg-action.danger{background:#3a1a1a;color:#ffb4b4}.reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.reaction{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:2px 8px;border-radius:999px;background:#1a2230;color:var(--text);font-size:12px;border:1px solid transparent}.reaction .reaction-who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px;color:var(--muted);font-weight:500}.reaction.mine{border-color:var(--accent);background:var(--accent-dim)}.reaction.mine .reaction-who{color:var(--text)}.edit-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-top:1px solid #5a3518;background:#24180f}.edit-bar strong{display:block;font-size:13px}.edit-bar span{color:var(--muted);font-size:12px}.edit-bar button{padding:8px 12px;font-size:13px}.workspace{height:100%;min-height:0;display:grid;grid-template-rows:1fr}.people{display:none;border-right:1px solid var(--line);background:#0e1218;min-height:0;overflow:auto}.people.open{display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:8}.people h2{margin:0;padding:14px 14px 8px;font-size:13px;color:var(--muted);font-weight:650}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.actions button{padding:10px 8px;font-size:13px}.person{display:flex;gap:10px;align-items:center;padding:10px 14px}button.person{width:100%;background:transparent;color:inherit;border-radius:0;text-align:left;font-weight:500;cursor:pointer}button.person.active{background:#1a2230}button.person.room-back{background:#24180f;box-shadow:inset 3px 0 0 var(--accent)}button.person .you{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.person .avatar{width:36px;height:36px;border-radius:12px;font-size:13px}.person .name{font-weight:650}.person .you{color:var(--muted);font-weight:500;font-size:12px}.chat-pane{min-height:0;height:100%;display:grid;grid-template-rows:1fr auto}@media (min-width: 900px){.people{display:block;position:static}.people.open{position:static}.workspace{grid-template-columns:280px 1fr;grid-template-rows:1fr}.only-mobile{display:none!important}}.composer{display:flex;gap:8px;padding:10px 12px calc(10px + var(--safe-b));border-top:1px solid var(--line);background:#0c0f14f5}.composer input{flex:1}.composer button{flex-shrink:0}.composer .clip{width:44px;padding:0;font-size:18px}.private-banner{position:sticky;top:0;z-index:2;margin-bottom:12px;padding:12px;border-radius:14px;background:#24180f;border:1px solid #5a3518}.private-banner strong{display:block;margin-bottom:4px}.private-banner p{margin:0 0 10px;color:var(--muted);font-size:13px;line-height:1.4}.private-banner button{width:100%}.msg-wrap{display:grid}.day-sep{justify-self:center;margin:8px 0 2px;padding:4px 10px;border-radius:999px;background:#1a212b;color:var(--muted);font-size:12px}.msg-text{white-space:pre-wrap}.photo-link{display:block;text-decoration:none;color:inherit}.photo{display:block;width:min(280px,70vw);max-height:360px;border-radius:12px;object-fit:cover;background:#0f1318}.file-card{display:flex;gap:8px;align-items:center;width:100%;text-align:left;background:#0f1318;color:var(--text);border:1px solid var(--line);border-radius:12px;padding:8px 10px}.file-ico{font-size:22px;line-height:1}.file-meta{display:grid;min-width:0}.file-meta strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-meta span{font-size:12px;color:var(--muted)}.attach-row{display:flex;gap:8px;overflow:auto;padding:8px 12px 0}.attach-chip{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:4px 6px 4px 4px;max-width:220px}.attach-thumb{width:36px;height:36px;object-fit:cover;border-radius:8px}.attach-name{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}.gate-hero{padding:28px 8px 8px;text-align:center;display:grid;gap:8px}.gate-hero .lede{margin:0;color:var(--muted);font-size:14px;line-height:1.45}@media (min-width: 720px){.app{border-left:1px solid var(--line);border-right:1px solid var(--line)}}