:root {
  color-scheme: dark;
  --bg: #202127;
  --panel: #292a32;
  --panel-raised: #30313a;
  --panel-soft: #25262d;
  --line: rgba(255, 255, 255, .07);
  --text: #f3f1f7;
  --muted: #a7a5b2;
  --faint: #777582;
  --accent: #c0a8ff;
  --accent-strong: #9873f5;
  --green: #82dcaa;
  --danger: #ff919f;
  font-family: "DM Sans", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); color: var(--text); }
button, input, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
html.insecure-context body > :not(#secureContextNotice) { display: none !important; }
.secure-context-notice { display: none; min-height: 100vh; place-items: center; padding: 24px; text-align: center; }
html.insecure-context .secure-context-notice { display: grid; }
.secure-context-notice section { max-width: 440px; }
.brand-logo { display: block; width: 190px; height: 190px; object-fit: contain; mix-blend-mode: screen; }
.secure-context-notice .brand-logo-notice { width: 160px; height: 160px; margin: 0 auto 20px; }
.secure-context-notice h1 { margin-bottom: 10px; font: 700 30px "Space Grotesk", sans-serif; }
.secure-context-notice p { color: var(--muted); line-height: 1.6; }
::selection { color: #211c2b; background: #c0a8ff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.brand { display: inline-flex; align-items: center; color: var(--text); text-decoration: none; }
.brand-mark { display: inline-grid; width: 34px; height: 34px; place-items: center; border-radius: 12px 12px 12px 5px; color: #22212a; background: var(--accent); font: 700 24px "Space Grotesk", sans-serif; }
.auth-view { display: grid; grid-template-columns: minmax(390px, .9fr) minmax(440px, 1.1fr); min-height: 100vh; animation: view-in .48s ease both; }
.auth-card { align-self: center; width: min(430px, calc(100% - 64px)); margin: 56px auto; animation: card-in .55s .06s cubic-bezier(.2,.7,.25,1) both; }
.auth-heading { margin: 76px 0 32px; }
.eyebrow { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }
.auth-heading .eyebrow { margin-bottom: 12px; }
h1, h2, p { margin-top: 0; }
.auth-heading h1, .modal-form h2 { margin-bottom: 9px; font: 700 35px "Space Grotesk", sans-serif; letter-spacing: -1.2px; }
.auth-heading > p:last-child, .modal-form > p:not(.eyebrow):not(.form-error) { margin-bottom: 0; color: var(--muted); font-size: 14px; }
.auth-form, .modal-form { display: grid; gap: 17px; }
.auth-form label, .modal-form > label:not(.check-row) { display: grid; gap: 8px; color: #d8d5e0; font-size: 12px; font-weight: 700; }
.auth-form input, .modal-form input:not([type=checkbox]), .join-form input { width: 100%; height: 47px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: #292a31; color: var(--text); font-size: 14px; }
input::placeholder, textarea::placeholder { color: #777582; }
.button { min-height: 43px; padding: 0 17px; border: 0; border-radius: 8px; font-size: 13px; font-weight: 800; transition: transform .16s, filter .16s, background .16s; }
.button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.button-primary { color: #221e30; background: var(--accent); }
.button-wide { width: 100%; }
.button:disabled { cursor: wait; opacity: .6; }
.auth-form .button { margin-top: 4px; }
.auth-switch { margin: 21px 0 0; color: var(--muted); font-size: 13px; }
.text-button { padding: 0; border: 0; background: none; color: var(--accent); font-size: inherit; font-weight: 700; }
.auth-footnote { margin: 63px 0 0; color: var(--faint); font-size: 11px; }
.form-error { margin: 0; color: var(--danger); font-size: 12px; line-height: 1.45; }
.setup-notice { margin: -13px 0 20px; padding: 13px 15px; border: 1px solid rgba(192,168,255,.22); border-radius: 9px; background: rgba(192,168,255,.07); color: #e2dafa; font-size: 12px; line-height: 1.5; }
.setup-notice strong { display: block; margin-bottom: 4px; }
.setup-notice p { margin: 0; }
code { color: var(--accent); font-size: .94em; }
.auth-art { position: relative; display: grid; min-height: 650px; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 46%, #393047 0, #272631 40%, #222329 77%); }
.art-glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: #9a79e6; filter: blur(150px); opacity: .22; animation: glow-drift 8s ease-in-out infinite alternate; }
.art-orbit { position: absolute; width: 510px; height: 510px; border: 1px solid rgba(201,184,255,.12); border-radius: 50%; transform: rotate(-23deg) scaleY(.62); }
.orbit-two { width: 670px; height: 670px; transform: rotate(34deg) scaleY(.6); }
.art-card { position: absolute; width: min(380px, 70%); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; box-shadow: 0 26px 90px rgba(0,0,0,.3); }
.card-back { width: 340px; height: 194px; margin: -132px 0 0 99px; padding: 20px; transform: rotate(9deg); background: #8075a5; opacity: .38; }
.art-dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: #b9f0cd; }
.art-lines { display: grid; gap: 10px; margin-top: 65px; }
.art-lines i { width: 72%; height: 8px; border-radius: 9px; background: rgba(255,255,255,.38); }
.art-lines i:last-child { width: 42%; }
.card-front { padding: 18px; transform: rotate(-3deg); background: #303039; animation: float-card 5s ease-in-out infinite; }
.art-card-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: #d9d4e5; font-size: 12px; font-weight: 700; }
.online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 11px rgba(130,220,170,.4); }
.art-message { display: flex; gap: 11px; align-items: center; margin: 17px 0; }
.art-avatar { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 11px; color: #282530; font-size: 13px; font-weight: 800; }
.avatar-lilac { background: #c9b4f2; }.avatar-peach { background: #ffc7aa; }
.art-message b { font-size: 11px; }.art-message p { margin: 3px 0 0; color: #c1beca; font-size: 12px; }
.art-compose { display: flex; justify-content: space-between; margin-top: 20px; padding: 11px 12px; border-radius: 8px; background: #25252d; color: #888592; font-size: 11px; }
.art-compose span { color: var(--accent); font-size: 16px; }
.art-caption { position: absolute; bottom: 46px; margin: 0; text-align: center; font: 600 18px "Space Grotesk", sans-serif; line-height: 1.5; }
.art-caption span { color: #aaa6b7; font: 400 15px "DM Sans", sans-serif; }
.art-sparkle { position: absolute; color: #cfbbff; font-size: 23px; }.sparkle-one { top: 27%; left: 20%; }.sparkle-two { right: 19%; bottom: 30%; font-size: 17px; }

.chat-view { display: grid; grid-template-columns: 68px 246px minmax(0,1fr); width: 100%; height: 100vh; min-height: 500px; overflow: hidden; animation: view-in .28s ease both; }
.chat-view.guest-mode { grid-template-columns: minmax(0,1fr); }
.guest-mode > .server-rail, .guest-mode > .channel-panel { display: none; }
.guest-mode > #globalView { width: min(100%, 700px); min-height: 100vh; margin: 0 auto; border-right: 1px solid var(--line); border-left: 1px solid var(--line); }
.guest-mode #globalView .conversation-header { position: sticky; z-index: 2; top: 0; min-height: 62px; flex-basis: 62px; padding: 0 20px; background: rgba(32,33,39,.9); backdrop-filter: blur(14px); }
.guest-mode #globalView .conversation-title h1 { font-size: 18px; }
.guest-mode #globalView .conversation-title p { font-size: 11px; }
.guest-mode #globalView .post-composer { margin: 0; padding: 18px 20px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.guest-mode #globalView .post-compose-content textarea { min-height: 54px; resize: vertical; font-size: 16px; }
.guest-mode #globalView .post-compose-footer { border: 0; }
.guest-mode #globalView .post-compose-footer > span { font-size: 10px; }
.guest-mode #globalView .global-feed { gap: 0; padding: 0; }
.guest-mode #globalView .post-card { padding: 17px 20px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.guest-mode #globalView .message-avatar { border-radius: 50%; }
.guest-mode #globalView .message-avatar img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.guest-mode #globalView .profile-avatar-button { padding: 0; border: 0; cursor: pointer; }
.guest-mode #globalView .profile-avatar-button:hover { filter: brightness(1.12); }
.guest-mode #globalView .post-card:hover { background: rgba(255,255,255,.025); }
.guest-mode #globalView .message-author { font-size: 13px; }
.guest-mode #globalView .post-text { margin-top: 5px; font-size: 14px; }
.guest-mode #changeNameButton { width: auto; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; white-space: nowrap; }
.server-rail { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 13px 0; background: #1b1c21; }
.rail-home, .server-icon, .server-add, .server-discover, .user-avatar { display: grid; flex: 0 0 auto; width: 43px; height: 43px; place-items: center; border: 0; border-radius: 15px; transition: border-radius .16s, background .16s, transform .16s, box-shadow .16s; text-decoration: none; }
.rail-home:hover, .server-icon:hover, .server-add:hover, .server-discover:hover, .user-avatar:hover { transform: translateY(-2px); box-shadow: 0 5px 16px #0003; }
.rail-home { background: #302b3d; }.rail-logo { width: 43px; height: 43px; object-fit: contain; mix-blend-mode: screen; }
.rail-divider { width: 30px; height: 1px; margin: 1px 0 2px; background: var(--line); }
.server-list { display: flex; flex-direction: column; align-items: center; gap: 9px; overflow: auto; scrollbar-width: none; }
.server-list::-webkit-scrollbar { display: none; }
.server-icon { position: relative; overflow: hidden; color: #ded7ed; background: #35323d; font-size: 14px; font-weight: 800; }
.server-icon:hover, .server-icon.active { border-radius: 12px; background: #60527e; }
.server-icon.active::before { position: absolute; left: -9px; width: 4px; height: 23px; border-radius: 5px; background: var(--accent); content: ""; }
.server-icon .server-tooltip { display: none; position: absolute; z-index: 5; left: 53px; padding: 7px 10px; border-radius: 6px; background: #131419; color: var(--text); font-size: 11px; white-space: nowrap; }
.server-icon:hover .server-tooltip { display: block; }
.server-add, .server-discover { color: var(--green); background: #292d31; font-size: 25px; }.server-add:hover, .server-discover:hover { border-radius: 12px; background: #354239; }
.server-discover { color: var(--accent); font-size: 23px; }
.rail-social { display: grid; flex: 0 0 auto; width: 43px; height: 40px; place-items: center; border: 0; border-radius: 12px; background: transparent; color: #aaa7b3; font-size: 22px; transition: color .16s, background .16s, transform .16s; }
.rail-social:hover { transform: translateY(-1px); background: #36323f; color: var(--accent); }
.rail-spacer { flex: 1; }
.user-avatar { color: #282530; background: var(--accent); font-weight: 800; }
.channel-panel { position: relative; display: flex; min-width: 0; flex-direction: column; background: var(--panel); }
.workspace-header { display: flex; height: 59px; flex: 0 0 59px; align-items: center; padding: 0 17px; border-bottom: 1px solid var(--line); }
.workspace-name { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 0; border: 0; background: none; color: var(--text); font: 700 14px "Space Grotesk", sans-serif; }
.chevron { color: var(--muted); font: 18px "DM Sans", sans-serif; }
.empty-workspace { display: flex; flex: 1; flex-direction: column; align-items: flex-start; justify-content: center; padding: 25px; }
.empty-illustration { display: grid; width: 55px; height: 55px; place-items: center; margin-bottom: 18px; border-radius: 17px; background: #373141; color: var(--accent); font-size: 26px; }
.empty-workspace h2 { margin: 0 0 8px; font: 700 18px "Space Grotesk", sans-serif; letter-spacing: -.4px; }
.empty-workspace p { margin: 0 0 21px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.empty-workspace .button { margin-bottom: 8px; }
.button-quiet { width: 100%; color: #d5c8f4; background: #393440; }
.channel-content { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 18px 9px; }
.section-label { display: flex; align-items: center; justify-content: space-between; padding: 0 9px 10px; color: #9e9ba9; font-size: 9px; font-weight: 800; letter-spacing: 1.15px; }
.icon-button { display: grid; width: 31px; height: 31px; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #aaa7b3; font-size: 19px; transition: color .16s, background .16s, transform .16s; }
.icon-button:hover { background: rgba(255,255,255,.07); color: var(--text); }
.section-label .icon-button { width: 24px; height: 24px; font-size: 17px; }
.channel-list { display: grid; gap: 3px; }
.channel-item { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: #aaa7b3; text-align: left; font-size: 13px; }
.channel-item:hover { background: rgba(255,255,255,.04); color: #e0dce7; }.channel-item.active { background: #3b3744; color: #f1eaff; }
.channel-item span:first-child { color: #8f8b9a; font: 18px "Space Grotesk", sans-serif; }
.channel-tip { display: flex; gap: 10px; margin: auto 7px 7px; padding: 13px 12px; border: 1px solid rgba(192,168,255,.1); border-radius: 9px; background: rgba(192,168,255,.05); }
.channel-tip span { color: var(--accent); }.channel-tip p { margin: 0; color: #a9a4b3; font-size: 10px; line-height: 1.55; }
.profile-bar { display: flex; min-height: 62px; align-items: center; gap: 10px; padding: 9px 11px; background: #24252c; }
.profile-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 11px; background: #b9a5e8; color: #282530; font-size: 12px; font-weight: 800; }
.profile-copy { display: grid; flex: 1; min-width: 0; gap: 2px; }
.profile-copy strong { overflow: hidden; color: #f0edf4; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy span { overflow: hidden; color: #9895a2; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.profile-settings { flex: 0 0 auto; }
.conversation { position: relative; display: flex; min-width: 0; flex-direction: column; background: var(--bg); }
.conversation-header { display: flex; min-height: 59px; flex: 0 0 59px; align-items: center; gap: 10px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.hash-mark { color: #9f9ba9; font: 25px "Space Grotesk", sans-serif; }
.conversation-title { min-width: 0; flex: 1; }
.conversation-title h1 { overflow: hidden; margin: 0 0 3px; font: 700 13px "Space Grotesk", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.conversation-title p { overflow: hidden; margin: 0; color: #9895a2; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.header-actions { display: flex; align-items: center; gap: 8px; }.secure-label { display: flex; align-items: center; gap: 7px; color: #aaa7b3; font-size: 10px; }
.mode-badge { padding: 5px 7px; border: 1px solid rgba(255,198,130,.2); border-radius: 6px; background: rgba(255,198,130,.07); color: #ffd09c; font-size: 8px; font-weight: 800; letter-spacing: .7px; white-space: nowrap; }
.message-list { display: flex; flex: 1; flex-direction: column; gap: 0; overflow: auto; padding: 22px clamp(18px, 5vw, 74px); scrollbar-color: #43434c transparent; }
.welcome-messages { display: flex; flex: 1; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding-bottom: 21px; }
.welcome-badge { display: grid; width: 47px; height: 47px; place-items: center; margin-bottom: 20px; border: 1px solid rgba(192,168,255,.17); border-radius: 16px; background: rgba(192,168,255,.08); color: var(--accent); font-size: 20px; }
.welcome-messages .eyebrow { margin-bottom: 10px; }
.welcome-messages h2 { margin: 0 0 10px; font: 700 clamp(28px, 4vw, 44px)/1.1 "Space Grotesk", sans-serif; letter-spacing: -1.9px; }
.welcome-messages h2 span { color: var(--accent); }
.welcome-messages > p:last-child { max-width: 380px; margin: 0; color: #a6a3b0; font-size: 13px; line-height: 1.7; }
.message-row { display: flex; gap: 13px; padding: 10px 0; animation: message-in .16s ease-out; }
@keyframes message-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.message-avatar { display: grid; width: 35px; height: 35px; flex: 0 0 35px; place-items: center; border-radius: 12px; background: #897bb1; color: white; font-size: 12px; font-weight: 800; }
.message-body { min-width: 0; }.message-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 1px 0 4px; }
.message-author { color: #eeeaf5; font-size: 12px; font-weight: 800; }.message-time { color: #85828e; font-size: 9px; }
.message-text { margin: 0; color: #d2cfda; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; }
.message-form { display: flex; align-items: center; gap: 11px; margin: 0 clamp(14px, 4vw, 63px) 22px; padding: 8px 10px 8px 14px; border: 1px solid rgba(255,255,255,.04); border-radius: 11px; background: #2c2d35; }
.composer-plus { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border: 0; border-radius: 8px; background: #44414c; color: #d5c5fb; font-size: 20px; }
.message-form textarea { display: block; width: 100%; max-height: 130px; min-height: 24px; resize: none; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 13px; line-height: 1.5; }
.message-form textarea:focus-visible { outline: 0; }.send-button { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; border: 0; border-radius: 8px; background: var(--accent-strong); color: #fff; font-size: 19px; font-weight: 700; }
.send-button:disabled { cursor: wait; opacity: .5; }.chat-error { position: absolute; right: 6%; bottom: 76px; left: 6%; margin: 0; color: var(--danger); text-align: center; font-size: 11px; }
.mobile-server { display: none; }.toast { position: fixed; z-index: 15; right: 20px; bottom: 20px; max-width: min(360px,calc(100vw - 40px)); padding: 12px 16px; transform: translateY(12px); border: 1px solid var(--line); border-radius: 9px; background: #34343e; box-shadow: 0 12px 40px #0005; color: var(--text); font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.visible { transform: translateY(0); opacity: 1; }
.modal { width: min(440px,calc(100% - 30px)); max-height: min(700px,calc(100vh - 40px)); padding: 0; overflow: auto; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: #292a32; color: var(--text); box-shadow: 0 25px 90px #0008; }
.modal::backdrop { background: rgba(12,12,17,.74); backdrop-filter: blur(4px); }
.modal[open] { animation: modal-in .2s cubic-bezier(.2,.7,.25,1) both; }
.modal-form { position: relative; padding: 31px; }
.modal-form > .eyebrow { margin-bottom: -9px; }.modal-form h2 { margin: 0; font-size: 26px; }.modal-form > p:not(.eyebrow):not(.form-error) { margin-top: -11px; font-size: 12px; line-height: 1.55; }
.account-identity { display: flex; align-items: center; gap: 13px; padding: 12px 0; }
.account-identity .profile-avatar { width: 46px; height: 46px; flex-basis: 46px; border-radius: 15px; font-size: 15px; }
.account-identity h2 { font-size: 18px; letter-spacing: -.4px; }
.account-identity p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.security-section { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.security-section h3 { margin: 0; font: 700 14px "Space Grotesk", sans-serif; }
.security-section p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.totp-qr-section { display: grid; justify-items: center; gap: 12px; }
.totp-qr-code { display: grid; min-width: 220px; min-height: 220px; place-items: center; padding: 10px; border-radius: 8px; background: #fff; }
.totp-qr-code img, .totp-qr-code canvas { max-width: 100%; height: auto; }
.totp-qr-section > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; }
.security-section { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.security-section h3 { margin: 0; font: 700 14px "Space Grotesk", sans-serif; }
.security-section p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.totp-qr-section { display: grid; justify-items: center; gap: 12px; }
.totp-qr-code { display: grid; min-width: 220px; min-height: 220px; place-items: center; padding: 10px; border-radius: 8px; background: #fff; }
.totp-qr-code img, .totp-qr-code canvas { max-width: 100%; height: auto; }
.totp-qr-section > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; }
.modal-close { position: absolute; top: 13px; right: 15px; width: 29px; height: 29px; border: 0; border-radius: 7px; background: transparent; color: #aaa7b3; font-size: 23px; }
.modal-close:hover { background: rgba(255,255,255,.07); color: var(--text); }
.check-row { display: flex; align-items: center; gap: 9px; color: #cbc8d3; font-size: 12px; }.check-row input { accent-color: var(--accent-strong); }
.join-form { display: flex; gap: 8px; }.join-form input { min-width: 0; flex: 1; }.join-form .button { flex: 0 0 auto; }
.public-server-list { display: grid; gap: 8px; max-height: 275px; overflow: auto; }
.public-server-card { display: flex; align-items: center; gap: 11px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.025); }
.public-server-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 12px; background: #40384f; color: var(--accent); font-weight: 800; }
.public-server-info { min-width: 0; flex: 1; }.public-server-info strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.public-server-info span { color: var(--muted); font-size: 10px; }
.public-server-card .button { min-height: 32px; padding: 0 12px; font-size: 11px; }.loading-text { margin: 0; color: var(--muted); font-size: 12px; }
.field-hint { color: var(--faint); font-size: 10px; font-weight: 400; }
.voice-section-label { margin-top: 15px; }
.voice-channel-item > span:first-child { color: #bba4fa; font-size: 15px; }
.social-view { min-width: 0; }
.social-heading-icon, .voice-header-icon { color: var(--accent); font-size: 23px; }
.live-label { display: flex; align-items: center; gap: 7px; color: #a7d8b7; font-size: 9px; font-weight: 800; letter-spacing: .9px; }
.post-composer { display: flex; gap: 13px; margin: 20px clamp(16px,5vw,70px) 10px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #282930; }
.profile-avatar-button { overflow: hidden; padding: 0; border: 0; cursor: pointer; }
.profile-avatar-button img, .message-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.post-compose-content { min-width: 0; flex: 1; }
.post-compose-content textarea { width: 100%; min-height: 70px; resize: vertical; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 14px; line-height: 1.6; }
.post-compose-content textarea:focus-visible { outline: 0; }
.post-compose-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.post-compose-footer > span { color: var(--faint); font-size: 9px; }.post-compose-footer strong { color: #d2cfda; font-weight: 700; }
.global-feed { display: flex; flex: 1; flex-direction: column; gap: 9px; overflow-y: auto; padding: 10px clamp(16px,5vw,70px) 25px; }
.post-card { display: flex; gap: 12px; padding: 16px 15px; border: 1px solid var(--line); border-radius: 11px; background: #26272e; animation: message-in .2s ease-out; }
.post-card-content { min-width: 0; flex: 1; }
.post-username { color: #9c98a6; font-size: 10px; }
.post-text { margin: 8px 0 0; color: #e0dce7; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
.feed-empty { padding: 25px 4px; }
.friends-modal { width: min(520px,calc(100% - 30px)); }
.friends-modal .modal-form { gap: 13px; }
.friends-modal .modal-form > p:not(.eyebrow):not(.form-error) { margin-top: -7px; }
.people-list { display: grid; max-height: 170px; gap: 7px; overflow: auto; }
.person-row { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.02); }
.person-avatar { width: 36px; height: 36px; flex-basis: 36px; border-radius: 11px; }
.person-row .button { min-height: 31px; padding: 0 10px; font-size: 10px; }
.friends-divider { display: flex; align-items: center; gap: 10px; color: #9a97a3; font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.friends-divider::after { height: 1px; flex: 1; background: var(--line); content: ""; }
.dm-messages { padding-top: 25px; }
.dm-view .message-form { margin-top: auto; }
.call-button { display: flex; min-height: 34px; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid rgba(192,168,255,.2); border-radius: 8px; background: rgba(192,168,255,.08); color: #d8caff; font-size: 14px; }
.call-button span { font-size: 11px; font-weight: 700; }
.voice-view { background: radial-gradient(ellipse at 50% 35%, #332e40, #202127 65%); }
.voice-stage { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 25px; text-align: center; }
.voice-pulse { display: grid; width: 92px; height: 92px; place-items: center; margin-bottom: 21px; border: 1px solid rgba(192,168,255,.22); border-radius: 50%; background: rgba(192,168,255,.11); color: var(--accent); font-size: 34px; box-shadow: 0 0 0 13px rgba(192,168,255,.035), 0 0 50px rgba(192,168,255,.12); animation: voice-pulse 2s ease-in-out infinite; }
.voice-stage h2 { margin: 0 0 7px; font: 700 25px "Space Grotesk", sans-serif; }
.voice-stage > p { color: var(--muted); font-size: 12px; }
.voice-participants { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; margin: 18px 0 26px; }
.voice-person { display: flex; min-width: 145px; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.04); text-align: left; }
.voice-person strong { font-size: 11px; }
.voice-person-self { border-color: rgba(192,168,255,.3); }
.voice-controls { display: flex; justify-content: center; gap: 10px; }
.voice-control { display: flex; min-height: 43px; align-items: center; gap: 8px; padding: 0 15px; border: 1px solid var(--line); border-radius: 22px; background: #383640; color: var(--text); font-size: 15px; }
.voice-control[aria-pressed=true] { background: #5b343e; }
.voice-control span { font-size: 11px; font-weight: 700; }
.hangup-control { background: #b94b60; color: white; }
.voice-status { min-height: 18px; margin-top: 16px; }
.voice-stage .voice-network-note { max-width: 370px; margin: 4px 0 0; color: #777582; font-size: 10px; line-height: 1.5; }
.remote-audio-container { display: none; }
@keyframes voice-pulse { 0%,100% { box-shadow: 0 0 0 10px rgba(192,168,255,.035), 0 0 35px rgba(192,168,255,.08); } 50% { box-shadow: 0 0 0 18px rgba(192,168,255,.02), 0 0 60px rgba(192,168,255,.17); } }

@keyframes view-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes card-in { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: translateY(0); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(9px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes glow-drift { from { transform: translate(-14px, 8px) scale(.92); } to { transform: translate(15px, -10px) scale(1.08); } }
@keyframes float-card { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 760px) {
  .auth-view { grid-template-columns: 1fr; }.auth-card { width: min(430px,calc(100% - 42px)); margin: 35px auto; }.auth-heading { margin-top: 53px; }.auth-footnote { margin-top: 44px; }
  .auth-art { display: none; }
  .chat-view { grid-template-columns: 58px minmax(0,1fr); }
  .chat-view.guest-mode { grid-template-columns: minmax(0,1fr); }
  .guest-mode > #globalView { width: 100%; border: 0; }
  .guest-mode #globalView .conversation-header { padding: 0 15px; }
  .guest-mode #globalView .post-composer { padding: 14px 15px; }
  .guest-mode #globalView .post-card { padding: 15px; }
  .server-rail { padding-top: 10px; }.rail-home, .server-icon, .server-add, .server-discover, .user-avatar { width: 39px; height: 39px; }
  .rail-social { width: 39px; height: 37px; }
  .channel-panel { position: absolute; z-index: 4; top: 0; bottom: 0; left: 58px; width: min(265px,calc(100vw - 72px)); transform: translateX(calc(-100% - 65px)); box-shadow: 15px 0 40px #0004; transition: transform .18s ease; }
  .chat-view.mobile-menu-open .channel-panel { transform: translateX(0); }
  .conversation-header { padding: 0 13px; }.mobile-server { display: block; }.mobile-server .icon-button { margin-left: -6px; }.message-list { padding: 18px 17px; }.message-form { margin: 0 12px 13px; }
  .secure-label { display: none; }.welcome-messages h2 { font-size: 34px; }
  .post-composer { margin: 13px 12px 8px; padding: 11px; }.global-feed { padding: 7px 12px 15px; }.post-compose-footer > span { max-width: 55%; line-height: 1.4; }
}
@media (max-width: 390px) {
  .chat-view { grid-template-columns: 51px minmax(0,1fr); }.server-rail { gap: 7px; }.channel-panel { left: 51px; }.conversation-header { gap: 7px; }.conversation-title p { max-width: 190px; }
}