*{box-sizing:border-box} :root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;background:#000;color:#f5f5f7;--blue:#0a84ff;--muted:#909099;--surface:#1c1c1e;--line:#2c2c2e}body{margin:0}button,input,textarea,select{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;color:inherit;background:none}a{color:#58aaff}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible{outline:2px solid #8ac6ff;outline-offset:4px}input,textarea,select{background:#222225;border:1px solid #3b3b40;border-radius:12px;color:#fff;padding:13px;min-width:0;width:100%;outline:none}input:focus,textarea:focus{border-color:var(--blue)}textarea{resize:vertical}button svg{width:23px;height:23px;display:block}h1,h2,h3,p{margin-top:0}h1{font-size:1.75rem;letter-spacing:-.045em}h2{font-size:1.35rem;letter-spacing:-.02em}h3{font-size:1rem}small,.meta{color:var(--muted);font-size:.8125rem}.muted{color:var(--muted)}.blue{color:var(--blue)}.danger{color:#ff6961}.primary{background:var(--blue);color:#fff;border-radius:14px;padding:13px 18px;font-weight:600}.secondary{background:#2c2c2e;border-radius:14px;padding:13px 18px}.text-button{color:#53a8ff;padding:10px}.icon-button{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;color:var(--blue)}.icon-button:hover{background:#ffffff0b}.row{display:flex;align-items:center;gap:12px}.spread{justify-content:space-between}.stack{display:grid;gap:16px}.fill{flex:1;min-width:0}.label{display:grid;gap:8px;font-size:.875rem;color:#b7b7be}.error{color:#ff827b;font-size:.875rem;line-height:1.5;margin:0}.hidden{display:none!important}.avatar{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;background:#326b85;color:white;font-size:.8rem;font-weight:600;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.avatar.big{width:88px;height:88px;font-size:1.8rem}.auth{min-height:100dvh;display:grid;place-items:center;padding:32px 22px;background:radial-gradient(ellipse at 50% 0,#12233c 0,transparent 52%)}.auth-card{width:min(100%,390px)}.app-icon{width:68px;height:68px;border-radius:18px;margin-bottom:25px}.auth h1{font-size:2rem;margin-bottom:10px}.auth .intro{color:#a3a3ad;line-height:1.6;margin-bottom:30px}.auth form{display:grid;gap:18px}.auth .switch{font-size:.875rem;text-align:center;margin-top:16px}.shell{height:100dvh;display:grid;grid-template-columns:300px minmax(0,1fr);max-width:1600px;margin:auto}.sidebar{background:#101012;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}.sidebar-top{padding:25px 20px 18px}.wordmark{font-size:.75rem;color:#9999a5;letter-spacing:.13em;margin-bottom:20px}.sidebar h1{margin:0}.groups{flex:1;overflow:auto;padding:10px}.group-item{width:100%;text-align:left;padding:16px 12px;display:flex;gap:12px;align-items:center;border-radius:14px;margin-bottom:4px}.group-item.active{background:#202027}.group-item:hover{background:#202025}.group-item .avatar{width:46px;height:46px;background:#183a5f;font-size:1.1rem}.group-item strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.9375rem}.group-item small{display:block;margin-top:6px}.sidebar-footer{padding:15px 18px;border-top:1px solid var(--line)}.sidebar-footer button{width:100%;text-align:left}.chat{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative;background:#000;padding-bottom:env(safe-area-inset-bottom)}.chat-top{background:linear-gradient(130deg,#101012ee,#142239ee);border-bottom:1px solid #25272e;min-height:122px;display:flex;align-items:center;padding:12px 23px;padding-top:max(12px,env(safe-area-inset-top));gap:12px;flex:none}.chat-title{flex:1;min-width:0;text-align:center;cursor:pointer;padding:0}.chat-title strong{font-size:1rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:7px}.chat-title small{display:block;margin-top:5px;font-size:.75rem}.avatar-cluster{height:43px;display:flex;align-items:center;justify-content:center}.avatar-cluster .avatar{width:37px;height:37px;border:2px solid #172333;margin-left:-8px}.avatar-cluster .avatar:first-child{margin-left:0}.back{display:none}.channel-bar{height:49px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #19191c;color:#bcbcc6;font-size:.875rem}.channel-bar button{display:flex;align-items:center;gap:6px}.channel-bar svg{width:17px;height:17px}.call-live{background:#112a20;color:#8bdeb3;display:flex;align-items:center;gap:10px;padding:12px 22px;font-size:.875rem}.call-live button{margin-left:auto;color:#a5f2cc;font-weight:600}.messages{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:23px 26px 10px;scroll-behavior:smooth}.date{text-align:center;color:#8e8e95;font-size:.75rem;font-weight:600;margin:20px 0 26px}.message{display:flex;gap:8px;align-items:flex-end;margin-bottom:19px}.message .avatar{width:29px;height:29px;font-size:.7rem;margin-bottom:20px}.message.own{justify-content:flex-end}.message-main{max-width:min(78%,540px);min-width:0}.message .sender{font-size:.8125rem;color:#9a9aa2;margin:0 0 5px 12px}.bubble{border-radius:20px 20px 20px 5px;background:#262629;padding:11px 16px;line-height:1.35;font-size:1.0625rem;overflow-wrap:anywhere;white-space:pre-wrap;display:block;width:fit-content;max-width:100%;text-align:left}.own .bubble{background:#1686fb;border-radius:20px 20px 5px 20px;margin-left:auto}.bubble:hover{filter:brightness(1.08)}.bubble img{max-width:100%;max-height:320px;display:block;border-radius:10px;margin:3px 0;object-fit:contain}.message-meta{font-size:.6875rem;color:#8e8e95;display:flex;gap:7px;margin:5px 9px 0;align-items:center}.own .message-meta{justify-content:flex-end}.edited{color:#51a8ff}.unsent{font-style:italic;color:#95959c;padding:5px 8px;font-size:.875rem}.reactions{display:flex;gap:5px;flex-wrap:wrap;margin:6px 0 0 6px}.own .reactions{justify-content:flex-end}.reaction{background:#25252a;border:1px solid #3a3a40;border-radius:20px;padding:3px 8px;font-size:.8125rem}.reaction.mine{border-color:#0a84ff;background:#13304c}.composer-area{padding:12px 20px 16px;background:#000;flex:none}.composer{display:flex;gap:10px;align-items:flex-end}.attach{color:#9b9ba1;background:#242427;width:42px;height:42px}.composer-box{border:1px solid #39393f;border-radius:25px;padding:5px 6px 5px 15px;display:flex;align-items:flex-end;gap:6px;flex:1;min-width:0}.composer textarea{border:0;background:transparent;padding:6px 0;resize:none;font-size:1rem;line-height:1.45;max-height:130px;height:34px;min-height:34px}.send{background:var(--blue);color:#fff;width:32px;height:32px;margin-bottom:1px}.send svg{width:21px;height:21px}.composer-note{font-size:.75rem;color:#777782;text-align:center;margin:8px 0 0}.attachment-preview{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:.875rem}.attachment-preview img{width:55px;height:55px;object-fit:cover;border-radius:10px}.empty{height:100%;display:grid;align-content:center;justify-items:center;text-align:center;padding:25px;gap:14px}.empty .empty-icon{width:68px;height:68px;border-radius:50%;background:#172435;display:grid;place-items:center;color:#54aaff}.empty svg{width:29px;height:29px}.empty h2{margin:0}.empty p{max-width:300px;line-height:1.5;font-size:.9375rem;color:#94949f;margin:0}.empty .primary{margin-top:9px}.drawer-scrim{position:absolute;inset:0;background:#0008;z-index:3}.drawer{position:absolute;right:0;top:0;bottom:0;width:min(360px,90%);z-index:4;border-left:1px solid #323238;background:#141417f5;backdrop-filter:blur(22px);padding:24px 18px;padding-top:max(24px,env(safe-area-inset-top));overflow:auto}.drawer-header{margin-bottom:24px}.drawer-header h2{margin:0}.section-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border-radius:12px;padding:15px 12px;margin-bottom:6px;font-size:.9375rem}.section-item.active{background:#15385b;color:#b9deff}.section-item svg{width:21px;height:21px;flex:none}.section-item small{display:block;margin-top:4px;font-size:.75rem}.drawer .description{font-size:.8125rem;line-height:1.5;margin:18px 8px;color:#9595a1}.drawer-actions{border-top:1px solid #303036;padding-top:15px;margin-top:20px}.modal-row{padding:13px 0;border-bottom:1px solid #303036}.modal-row:last-child{border:0}.modal-row .avatar{width:38px;height:38px}.modal-row strong{font-size:.9375rem}.modal-row small{display:block;margin-top:3px}.modal-row select{width:auto;max-width:140px;padding:8px;font-size:.8125rem}.modal-row button{font-size:.8125rem;padding:8px}.profile-top{display:grid;justify-items:center;gap:12px;padding:15px 0 24px}.profile-top h2{margin:0}.settings-list{border-radius:16px;overflow:hidden;background:#252529}.settings-list button{width:100%;padding:17px;text-align:left;border-bottom:1px solid #37373b;font-size:.9375rem;display:flex;align-items:center;gap:12px}.settings-list button:last-child{border:0}.settings-list svg{width:22px;height:22px;color:#48a5ff}.notice{padding:14px;border-radius:12px;background:#202938;color:#bdd7f5;font-size:.875rem;line-height:1.5}.recovery-code{display:block;word-break:break-all;border:1px solid #42424b;background:#0d0d10;border-radius:12px;padding:16px;font-family:monospace;font-size:.9375rem;user-select:all}.check-row{display:flex;gap:10px;align-items:center;font-size:.875rem;line-height:1.5}.check-row input{width:18px;height:18px;flex:none}.permissions{max-height:260px;overflow:auto}.permission-row{display:grid;grid-template-columns:1fr 70px 70px;gap:5px;align-items:center;padding:11px 0;border-bottom:1px solid #313138;font-size:.875rem}.permission-row input{width:18px;height:18px;justify-self:center}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.reaction-picker{display:flex;justify-content:space-between;padding:10px 0}.reaction-picker button{font-size:1.8rem;padding:8px;border-radius:12px}.reaction-picker button:hover{background:#38383f}.quote{border-left:3px solid #0a84ff;padding:10px 15px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:160px;overflow:auto;color:#bcbcc7;font-size:.9375rem}.call-frame{width:100%;height:65dvh;border:0;border-radius:14px;background:#111;margin-top:15px}dialog{width:min(480px,calc(100% - 30px));max-height:85dvh;overflow:auto;border:1px solid #3a3a42;border-radius:24px;background:#1b1b20;color:white;padding:24px;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#0009;backdrop-filter:blur(6px)}dialog .dialog-title{margin-bottom:22px}dialog .dialog-title h2{margin:0}#toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);z-index:20;max-width:calc(100% - 36px);background:#303038;border:1px solid #555563;border-radius:16px;padding:13px 19px;box-shadow:0 8px 40px #0006;display:none;font-size:.875rem;text-align:center;line-height:1.4}.load-older{display:block;margin:0 auto 20px;font-size:.8125rem;color:#6bb5ff}.connection{font-size:.75rem;color:#ffbd69;text-align:center;padding:6px;background:#2b2111}.selection{color:#9ad2ff}.call-help{line-height:1.6;font-size:.9375rem}.call-help a{display:block;text-align:center;text-decoration:none;margin-top:16px}.call-help .secondary{color:#fff}.app-name{overflow-wrap:anywhere}.form-error:empty{display:none}.wide{width:100%}
@media(min-width:1250px){.shell{grid-template-columns:340px minmax(0,1fr)}.chat-top{padding-left:40px;padding-right:40px}.messages{padding-left:50px;padding-right:50px}.composer-area{padding-left:42px;padding-right:42px}}
@media(max-width:700px){.shell{display:block}.sidebar{height:100dvh;border:0}.shell.has-chat .sidebar{display:none}.chat{height:100dvh}.shell:not(.has-chat) .chat{display:none}.chat-top{min-height:112px;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));gap:2px}.chat-title strong{font-size:.9375rem}.chat-title small{font-size:.75rem}.back{display:grid}.avatar-cluster{height:38px}.avatar-cluster .avatar{width:33px;height:33px}.chat-top>.icon-button{width:40px}.channel-bar{padding:0 16px}.messages{padding:12px 13px 4px}.message-main{max-width:79%}.bubble{font-size:1.0625rem;padding:10px 14px}.composer-area{padding:9px 10px 12px}.composer{gap:8px}.composer-note{font-size:.75rem}.drawer{padding:21px 15px}.sidebar-top{padding-top:30px}.auth h1{font-size:1.875rem}dialog{padding:20px;border-radius:22px}.message-meta{font-size:.75rem}.call-live{padding:11px 16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.messages{scrollbar-width:thin;scrollbar-color:#36363c transparent}.composer textarea{overflow:hidden;height:36px;min-height:36px}.shell,.chat,.sidebar{height:var(--app-height,100dvh)}
dialog:has(.call-frame){width:min(960px,calc(100% - 24px))}.call-frame{height:60dvh;min-height:350px}

.gate{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;background:#000;color:#ff4545}.gate img{width:150px;height:150px;object-fit:contain;border-radius:26px;margin-bottom:22px}.gate-code{font-size:clamp(80px,20vw,150px);font-weight:800;line-height:1}.gate-face{font-size:72px}.gate h1{max-width:600px;font-size:clamp(22px,5vw,34px);margin:18px 0}.gate p{color:#9a9a9f}.gate a{margin-top:26px;color:#8c8c96;font-size:14px}.brand-logo{width:38px;height:38px;border-radius:10px;object-fit:cover}.wordmark{display:flex;align-items:center;gap:10px;font-size:.65rem}.auth .app-icon{object-fit:contain}

.incoming-alert{position:fixed;right:18px;top:max(18px,env(safe-area-inset-top));z-index:50;width:min(360px,calc(100% - 36px));padding:20px;border:1px solid #416183;border-radius:20px;background:#182333;box-shadow:0 12px 50px #0009;display:grid;gap:12px}.incoming-alert span{color:#b7c6d9;font-size:.875rem}

/* Invite-only landing: supplied artwork with real, keyboard-accessible links. */
.search-button{color:#4aa3ff!important}
.gate-body{background:#080807;min-height:100dvh}.gate-art{position:relative;width:min(100%,853px);margin:0 auto;container-type:inline-size}.gate-artwork{display:block;width:100%;height:auto}.gate-nav{position:absolute;top:0;left:8.8%;right:8.8%;height:5.05%;background:#090907;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #957747;color:#dbc496;font-family:Georgia,"Times New Roman",serif;font-size:clamp(9px,1.76cqw,15px);letter-spacing:.24em;white-space:nowrap;padding-top:.3%}.gate-nav a{color:#e0c48e;text-decoration:none;letter-spacing:.17em;padding:12px 0 12px 16px}.gate-nav a:hover{color:#fff1ca}.gate-nav a span{margin-left:.4em}.gate-accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.gate-home{position:absolute;left:32.8%;top:42.7%;width:36%;height:4.55%;border:1px solid transparent}.gate-home:hover{background:#d6b26a18;border-color:#e4c58e}.gate-home:focus-visible,.gate-nav a:focus-visible{outline:2px solid #edcf90;outline-offset:3px}

textarea.content-blocked{color:#ff7676!important;outline:2px solid #d84a4a!important;outline-offset:-2px;background:#351719!important}.moderation-error{padding:0 12px;margin:8px 0 0}.moderation-error:empty{display:none}

.call-live>svg{width:22px;height:22px;flex:none}

/* Keep the chat in the visible viewport while the mobile keyboard resizes/pans it. */
html.chat-app,html.chat-app body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
html.chat-app body{position:fixed;inset:0}
.chat-app #app{position:fixed;top:var(--app-top,0px);left:0;right:0;height:var(--app-height,100dvh);overflow:hidden}
.chat-app .shell,.chat-app .chat,.chat-app .sidebar{height:100%}
.chat-app .messages{min-height:0;flex:1 1 0;overflow-y:auto}
.chat-app .channel-bar,.chat-app .call-live,.chat-app #connection{flex-shrink:0}
.chat-app .composer textarea{font-size:16px;overflow-y:auto}
@media(max-width:700px){.keyboard-open .chat{padding-bottom:0}.keyboard-open .composer-note{display:none}.keyboard-open .composer-area{padding-bottom:8px}}

/* Fill tall phone viewports while keeping the artwork's links aligned. */
.gate-art{height:max(100dvh,min(150.06vw,1280px));min-height:100svh}
.gate-artwork{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}

.profile-footer-row{display:flex;align-items:center;gap:4px}
.profile-footer-row .profile-button{min-width:0;width:auto!important;text-align:left}
.profile-footer-row .icon-button{width:34px!important;height:34px;padding:5px}
.profile-footer-row .search-button{color:#4aa3ff!important}
.profile-footer-row .profile-settings-button{color:#f5f5f7}

/* Keep search focused without washing out the circles screen behind it. */
dialog::backdrop{background:rgba(0,0,0,.42);backdrop-filter:none}
@media(max-width:700px){dialog:not(:has(.call-frame)){width:calc(100% - 18px);max-height:min(78dvh,560px);margin:0 auto 18px}}
