/* Servers: channel sidebar, server chat, member list, voice panel and the server dialogs.
   Sizes, spacing and colors were measured from the live client. */

/* ---------- rail ---------- */
.rail-face.acr-1, .rail-face.acr-2 { font-size: 18px; line-height: 21.6px; }
.rail-face.acr-3 { font-size: 16px; }
.rail-face.acr-4 { font-size: 14px; }
.rail-face.acr-5 { font-size: 12px; }
.rail-face.img { background: none; }
.rail-face.img img { object-fit: cover; }
.rail-item.add-server .rail-face { color: var(--text-default); }

/* title bar: the server's icon + name */
.sv-icon { flex: none; display: block; border-radius: 4px; object-fit: cover; }
.dest-identity .sv-icon.dest-guild { border-radius: 8px; }
.sv-icon.acronym { display: grid; place-items: center; background: var(--bg-mod-subtle); color: var(--text-default); font-weight: 500; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; }

/* ---------- channel sidebar ---------- */
.sidebar.server-mode > .sidebar-top,
.sidebar.server-mode > .sidebar-scroll { display: none; }
.sv-side { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sv-side[hidden] { display: none; }
.sv-nav { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sv-head header { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 8px; border-bottom: 1px solid var(--border-subtle); }
.sv-dropdown { min-width: 0; display: flex; align-items: center; gap: 2px; height: 32px; padding: 0 8px; border-radius: var(--radius-sm); color: var(--text-strong); cursor: pointer; user-select: none; }
.sv-dropdown h2 { min-width: 0; font-size: 16px; font-weight: 600; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-dropdown .ic { flex: none; transition: transform 0.15s ease-out; }
.sv-dropdown:hover:not(.open) { background: var(--interactive-bg-hover); }
.sv-dropdown.open .ic { transform: rotate(180deg); }
.sv-head-invite { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--text-strong); }
.sv-head-invite:hover { background: var(--interactive-bg-hover); }

.sv-scroll { flex: 1; min-height: 0; padding-bottom: calc(var(--user-panel-h) + 24px); }
.sv-list { position: relative; list-style: none; }
.sv-top-space { height: 12px; }

/* Setup Progress (new servers, owner only) */
.sv-setup { display: flex; align-items: center; gap: 8px; width: 286px; height: 50px; margin: -8px 0 0 8px; padding: 8px; border-radius: var(--radius-sm); cursor: pointer; }
.sv-setup:hover { background: var(--interactive-bg-hover); }
.sv-ring { flex: none; width: 32px; height: 32px; color: #5299ef; }
.sv-ring svg { width: 32px; height: 32px; }
.sv-setup-text { min-width: 0; display: flex; flex-direction: column; }
.sv-setup-text .t { color: var(--text-strong); font-size: 14px; font-weight: 600; line-height: 18px; }
.sv-setup-text .s { color: var(--text-muted); font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-divider { height: 1px; margin: 4px 0; background: var(--border-subtle); }

/* categories */
.sv-cat { padding-top: 16px; }
.sv-cat-row { display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 8px 0 16px; }
.sv-cat-main { min-width: 0; flex: 1; display: flex; align-items: center; gap: 4px; height: 24px; overflow: hidden; color: var(--text-channels); cursor: pointer; user-select: none; }
.sv-cat-main h3 { min-width: 0; font-size: 14px; font-weight: 500; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-cat-main .ic { flex: none; transition: transform 0.15s ease-out; }
.sv-cat.collapsed .sv-cat-main .ic { transform: rotate(-90deg); }
.sv-cat-main:hover { color: var(--text-strong); }
.sv-cat-add { flex: none; display: flex; width: 16px; height: 16px; color: var(--text-channels); cursor: pointer; }
.sv-cat-add:hover { color: var(--text-strong); }

/* channels */
.sv-ch { position: relative; }
.sv-ch-pill { position: absolute; left: 0; top: 17px; width: 4px; height: 8px; margin-top: -4px; border-radius: 0 4px 4px 0; background: var(--text-strong); }
.sv-ch-wrap { width: 286px; margin-left: 8px; padding: 1px 0; }
.sv-ch-link { display: flex; flex-direction: column; min-height: 32px; padding: 4px 8px; border-radius: var(--radius-sm); color: var(--text-channels); text-decoration: none; cursor: pointer; user-select: none; }
.sv-ch-top { display: flex; align-items: center; gap: 8px; height: 24px; }
.ch-ic { position: relative; flex: none; display: flex; width: 20px; height: 20px; color: var(--text-channels); }
.ch-ic > svg { width: 20px; height: 20px; }
.ch-ic.private > svg:first-child { -webkit-mask: radial-gradient(circle at 17px 3.5px, transparent 6px, #000 6.5px); mask: radial-gradient(circle at 17px 3.5px, transparent 6px, #000 6.5px); }
.ch-ic .ch-lock { position: absolute; right: -2px; top: -2px; width: 10px; height: 10px; }
.sv-ch-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-ch-acts { flex: none; display: none; align-items: center; }
.ch-act { display: flex; width: 16px; height: 16px; margin-left: 4px; color: var(--icon-subtle); cursor: pointer; }
.ch-act:hover { color: var(--text-strong); }
.sv-ch-badge { flex: none; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--badge-red); color: #fff; font-size: 12px; font-weight: 700; line-height: 16px; text-align: center; }
.sv-ch-link:hover { background: var(--interactive-bg-hover); }
.sv-ch-link:hover .sv-ch-name { color: var(--text-strong); }
.sv-ch-link:hover .sv-ch-acts, .sv-ch.selected .sv-ch-acts, .sv-ch.connected .sv-ch-acts { display: flex; }
.sv-ch-link:hover .sv-ch-badge, .sv-ch.selected .sv-ch-badge { display: none; }
.sv-ch.selected .sv-ch-link { background: var(--interactive-bg-selected); }
.sv-ch.selected .sv-ch-name, .sv-ch.selected .ch-ic { color: var(--text-strong); }
.sv-ch.selected .ch-act { color: var(--text-strong); }
.sv-ch.unread .sv-ch-name { color: var(--text-strong); }
.sv-ch.unread .ch-ic { color: var(--icon-subtle); }
.sv-ch.muted:not(.selected) .sv-ch-link { opacity: 0.4; }
.sv-ch.connected .sv-ch-link { min-height: 48px; }
.sv-ch.connected .ch-ic { color: #5eb479; }
.sv-ch.connected .sv-ch-name { color: var(--text-strong); }
.sv-ch-bottom { display: flex; align-items: center; height: 16px; margin-left: 28px; }
.sv-status-set { display: flex; align-items: center; color: var(--text-channels); font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; }
.sv-status-set .ic { margin-left: 4px; }
.sv-status-set:hover { color: var(--text-strong); }

/* people in a voice channel */
.sv-voice-users { display: flex; flex-direction: column; padding: 0 0 8px 36px; }
.sv-voice-user { display: flex; align-items: center; gap: 8px; width: 258px; height: 32px; padding: 4px 8px; border-radius: var(--radius-sm); color: var(--text-channels); cursor: pointer; }
.sv-voice-user:hover { background: var(--interactive-bg-hover); color: var(--text-strong); }
.sv-voice-user .vav { flex: none; width: 24px; height: 24px; border-radius: 50%; background: center / cover no-repeat; }
.sv-voice-user .nm { flex: 1; min-width: 0; margin-top: 2px; font-size: 14px; font-weight: 500; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-voice-user .icons { flex: none; display: flex; align-items: center; gap: 4px; color: var(--text-channels); }
.sv-voice-user .vi { display: flex; color: var(--voice-muted, #f23f43); }
.sv-voice-user.invite .lead { flex: none; display: grid; place-items: center; width: 24px; height: 24px; }
.sv-voice-user.invite .nm { margin-top: 0; }
.sv-voice-user.invite .tr { flex: none; display: flex; }

/* ---------- channel header ---------- */
.sv-head-ic { flex: none; display: flex; align-items: center; height: 32px; margin: 0 9px 0 -1px; }
.sv-head-ic .ch-ic { color: var(--text-channels); }
.sv-ch-head .ch-name { flex: none; max-width: 40%; margin-right: 8px; cursor: default; }
.sv-topic-div { flex: none; width: 1px; height: 24px; margin: 0 8px 0 0; background: var(--border-subtle); }
.sv-topic { min-width: 0; color: var(--text-subtle); font-size: 14px; font-weight: 500; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.sv-topic p, .sv-topic div { display: inline; }

/* ---------- a brand-new server's welcome checklist ---------- */
.sv-welcome { display: flex; justify-content: center; margin: 16px; padding: 16px 16px 0; list-style: none; }
.sv-welcome-inner { width: 400px; display: flex; flex-direction: column; align-items: center; }
.sv-welcome-title { width: 100%; color: var(--text-strong); font-size: 32px; font-weight: 500; line-height: 40px; text-align: center; }
.sv-welcome-sub { width: 100%; margin: 8px 0 12px; color: var(--text-default); font-size: 14px; font-weight: 400; line-height: 18px; text-align: center; }
.sv-welcome-sub a { color: var(--text-link); text-decoration: none; }
.sv-welcome-sub a:hover { text-decoration: underline; }
.sv-card { display: flex; align-items: center; width: 400px; height: 58px; margin-top: 8px; padding: 16px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: rgba(151, 151, 159, 0.08); cursor: pointer; }
.sv-card:hover { background: rgba(151, 151, 159, 0.12); }
.sv-card .sv-card-ic { flex: none; width: 24px; height: 24px; margin: 0; vertical-align: 0; }
.sv-card-t { flex: 1; min-width: 0; margin: 0 16px 0 12px; color: var(--text-strong); font-size: 14px; font-weight: 600; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-card-arrow { flex: none; display: flex; color: var(--text-muted); }
.sv-card-check { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #3d9e60; color: #fff; }
.sv-card.completed .sv-card-ic, .sv-card.completed .sv-card-t, .sv-card.completed .sv-card-check { opacity: 0.6; }

/* start of an ordinary channel */
.sv-chstart { margin: 16px; padding-top: 16px; list-style: none; }
.sv-chstart-ic { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--bg-mod-normal); color: var(--text-strong); }
.sv-chstart-ic svg { width: 42px; height: 42px; }
.sv-chstart-title { margin: 8px 0; color: var(--text-strong); font-size: 32px; font-weight: 700; line-height: 40px; }
.sv-chstart-sub { color: var(--text-subtle); font-size: 16px; font-weight: 400; line-height: 20px; }
.sv-chstart-edit { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 2px 4px 2px 0; color: var(--text-link); font-size: 14px; font-weight: 500; line-height: 18px; }
.sv-chstart-edit:hover { text-decoration: underline; }

/* ---------- member list ---------- */
.sv-members .member-row.has-sub { height: 44px; }
.sv-members .member-row.has-sub .member-inner { height: 42px; }
.sv-member-txt { min-width: 0; display: flex; flex-direction: column; }
.sv-member-name { display: flex; align-items: center; min-width: 0; }
.sv-crown { flex: none; display: flex; margin-left: 4px; color: #ea9800; }
.sv-member-sub { margin-top: -2px; color: var(--text-channels); font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-member-sub p, .sv-member-sub div { display: inline; }
.sv-members .member-row:hover .member-name[style] { filter: brightness(1.1); }

/* ---------- voice connection panel (sits on top of the user panel) ---------- */
.sv-rtc { position: absolute; left: 9px; bottom: 65px; z-index: 6; width: calc(var(--rail-w) + var(--sidebar-w) + 1px - 18px); height: 101px; display: flex; flex-direction: column; gap: 12px; padding: 12px; border-bottom: 1px solid var(--border-muted); border-radius: 7px 7px 0 0; }
.sv-rtc[hidden] { display: none; }
.user-panel.rtc-open { height: 159px; padding-top: 101px; }
.user-panel.rtc-open .up-plate { top: auto; height: 56px; border-radius: 0 0 7px 7px; }
.main.rtc-open .rail, .main.rtc-open .sidebar-scroll, .main.rtc-open .sv-scroll { padding-bottom: calc(159px + 24px); }
.sv-rtc-row { display: flex; align-items: center; height: 32px; }
.sv-rtc-status { flex: 1; min-width: 0; display: flex; align-items: center; }
.sv-ping { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-right: 8px; border-radius: var(--radius-sm); background: rgba(0, 133, 69, 0.0784); box-shadow: inset 0 0 0 1px rgba(151, 151, 159, 0.0392); color: #5eb479; cursor: pointer; }
.sv-rtc-label { min-width: 0; }
.sv-rtc-title { margin-top: -1px; color: #5eb479; font-size: 16px; font-weight: 500; line-height: 20px; white-space: nowrap; }
.sv-rtc-sub { color: var(--text-subtle); font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.sv-rtc-sub:hover { text-decoration: underline; }
.sv-rtc-btns { flex: none; display: flex; gap: 4px; margin-left: 10px; }
.sv-rtc-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--icon-subtle); }
.sv-rtc-btn:hover { background: var(--bg-mod-normal); color: var(--text-strong); }
.sv-rtc-btn.on { color: var(--text-strong); }
.sv-rtc-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sv-rtc-actions button { height: 32px; display: grid; place-items: center; padding: 7px 15px; border: 1px solid rgba(151, 151, 159, 0.0392); border-radius: var(--radius-sm); background: var(--bg-mod-subtle); color: var(--text-strong); }
.sv-rtc-actions button:hover { background: var(--bg-mod-normal); }

/* ---------- menus ---------- */
.ctx-menu.sv-server-menu { width: 220px; max-width: 220px; }
.ctx-check { position: relative; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-left: 8px; border: 1px solid rgba(151, 151, 159, 0.64); border-radius: 4px; background: rgba(0, 0, 0, 0.08); color: #fff; }
.ctx-check.on { border-color: var(--brand); background: var(--brand); }
.ctx-item.disabled { cursor: not-allowed; opacity: 0.5; }

/* ---------- shared dialog pieces ---------- */
.pfm-sub { display: flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--text-subtle); font-size: 16px; font-weight: 400; line-height: 20px; }
.pfm.sv-dialog { width: 480px; }
.pfm.sv-dialog .pfm-body { padding: 16px 24px 8px; scrollbar-gutter: auto; }
.pfm-foot.sv-foot-full .pf-btn { flex: 1; }
.pfm-foot.action-bar.end { justify-content: flex-end; }
.sv-form { display: flex; flex-direction: column; gap: 20px; }
.sv-group { display: block; }
.sv-group.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 24px; }
.sv-label { display: flex; align-items: center; margin-bottom: 8px; color: var(--text-strong); font-size: 16px; font-weight: 500; line-height: 20px; }
.sv-group.row .sv-label { margin-bottom: 4px; }
.sv-label .ic { width: 20px; height: 16px; margin-bottom: -1px; padding-right: 4px; }
.sv-label .req { margin-left: 4px; color: #f87e7a; font-weight: 400; }
.sv-desc { color: var(--text-subtle); font-size: 14px; font-weight: 400; line-height: 18px; }
.sv-input-wrap { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 4px 0 12px; border: 1px solid var(--border-normal); border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.122); }
.sv-input-wrap.lead { padding-left: 4px; }
.sv-input-wrap:focus-within { border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: -2px; }
.sv-input-lead { flex: none; display: grid; place-items: center; width: 30px; height: 30px; color: var(--text-default); }
.sv-input-lead svg { width: 16px; height: 16px; }
.sv-input-trail { flex: none; display: flex; align-items: center; width: 32px; height: 30px; color: var(--icon-subtle); cursor: pointer; }
.sv-input-trail:hover { color: var(--text-strong); }
.sv-input { width: 100%; height: 40px; padding: 1px 12px; border: 1px solid var(--border-normal); border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.122); color: var(--text-default); font: 400 16px/20px var(--font); outline: none; }
.sv-input:focus { border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: -2px; }
.sv-input::placeholder { color: var(--text-input-placeholder); }
.sv-input-wrap .sv-input { flex: 1; min-width: 0; height: 38px; padding: 1px 0; border: 0; border-radius: 0; background: none; outline: none; }
.sv-field.error .sv-input { border-color: #f87e7a; outline: none; }

/* radios (Channel Type) */
.sv-radios { display: flex; flex-direction: column; gap: 16px; padding: 8px 0 4px; }
.sv-radio { position: relative; display: block; min-height: 42px; padding-left: 56px; border-radius: var(--radius-sm); cursor: pointer; }
.sv-radio-dot { position: absolute; left: 0; top: 0; width: 20px; height: 20px; border: 1.5px solid var(--text-default); border-radius: 50%; }
.sv-radio.on .sv-radio-dot { border-color: var(--brand); background: var(--brand); }
.sv-radio.on .sv-radio-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; }
.sv-radio-t { display: block; color: var(--text-default); font-size: 16px; font-weight: 400; line-height: 20px; }
.sv-radio-t svg { position: absolute; left: 32px; top: 0; width: 20px; height: 20px; color: var(--text-strong); }
.sv-radio-d { display: block; margin: 4px 0 0 -24px; color: var(--text-subtle); font-size: 14px; font-weight: 400; line-height: 18px; }
.sv-notify .sv-radio { min-height: 20px; padding-left: 32px; }

/* ---------- Create a Server ---------- */
.pfm.slides { width: 444px; overflow: hidden; border: 1px solid var(--pf-line-strong); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16); }
.pfm.slides .pfm-body { padding: 0; overflow: hidden; }
.sv-slide { display: flex; flex-direction: column; }
.sv-slide.in { animation: sv-slide-in 0.2s ease-out; }
@keyframes sv-slide-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.sv-c-head { position: relative; display: flex; flex-direction: column; align-items: center; padding: 16px 24px 8px; text-align: center; }
.sv-slide[data-step="purpose"] .sv-c-head { padding: 24px 16px 0; }
.sv-slide[data-step="customize"] .sv-c-head { padding: 24px 24px 0; }
.sv-slide[data-step="join"] .sv-c-head { padding: 16px 24px 0; }
.sv-slide[data-step="join"] .sv-c-head h1 { margin: 24px 0 8px; }
.sv-c-head h1 { color: var(--text-strong); font-size: 24px; font-weight: 700; line-height: 32px; }
.sv-c-sub { margin-top: 8px; color: var(--text-default); font-size: 16px; font-weight: 400; line-height: 20px; }
.sv-c-sub.small { margin: 0 0 16px; font-size: 14px; line-height: 18px; text-align: center; }
.sv-c-x { position: absolute; top: 12px; right: 16px; width: 32px; height: 32px; display: grid; place-items: center; padding: 4px; border-radius: 3px; color: var(--text-strong); opacity: 0.5; }
.sv-c-x:hover { opacity: 1; }
.sv-c-list { max-height: 330px; margin-top: 24px; padding: 8px 8px 8px 24px; overflow-y: scroll; }
.sv-slide[data-step="purpose"] .sv-c-list { max-height: none; padding: 0 16px 8px; overflow: visible; }
.sv-c-group { margin: 16px 0 8px; color: var(--text-default); font-size: 14px; font-weight: 500; line-height: 18.67px; text-align: left; }
.sv-opt { display: flex; align-items: center; width: 402px; height: 54px; margin-bottom: 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: rgba(151, 151, 159, 0.08); text-align: left; }
.sv-opt:hover { background: rgba(151, 151, 159, 0.12); }
.sv-opt-ic { flex: none; display: flex; width: 20px; height: 20px; margin: 16px; }
.sv-opt-ic .emoji { width: 20px; height: 20px; margin: 0; vertical-align: 0; }
.sv-opt-t { flex: 1; min-width: 0; color: var(--text-default); font-size: 16px; font-weight: 400; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-opt-arrow { flex: none; display: flex; margin-right: 16px; color: var(--text-muted); }
.sv-c-skip { margin: 18px 0 16px; color: var(--text-default); font-size: 14px; font-weight: 400; line-height: 18px; text-align: center; }
.sv-c-skip a { color: var(--text-link); text-decoration: none; }
.sv-c-skip a:hover { text-decoration: underline; }
.sv-c-foot { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-radius: 0 0 12px 12px; background: var(--pf-card); }
.sv-c-foot.col { flex-direction: column; }
.sv-c-foot.col h2 { margin-bottom: 8px; color: var(--text-strong); font-size: 20px; font-weight: 600; line-height: 24px; }
.sv-text-btn { display: flex; align-items: center; height: 20px; color: var(--text-strong); font-size: 16px; font-weight: 500; line-height: 20px; }
.sv-text-btn:hover { text-decoration: underline; }
.sv-text-btn.link { height: 40px; padding: 0 4px; }
.sv-c-body { display: flex; flex-direction: column; gap: 16px; margin: 16px 0; padding: 8px 16px 0 24px; text-align: left; }
.sv-c-body.join { display: block; margin: 0; padding: 8px 16px 0 24px; }
.sv-c-body.join .sv-field { display: block; margin-bottom: 16px; }
.sv-upload { display: flex; justify-content: center; padding-top: 4px; }
.sv-upload-ic { position: relative; width: 80px; height: 80px; color: var(--text-subtle); cursor: pointer; }
.sv-upload-ic svg { width: 80px; height: 80px; }
.sv-upload-ic img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.sv-upload-l { position: absolute; left: 0; right: 0; top: 44px; font-size: 12px; font-weight: 600; line-height: 16px; text-align: center; }
.sv-field { display: block; }
.sv-guide { padding-bottom: 4px; color: var(--text-muted); font-size: 12px; font-weight: 400; line-height: 16px; }
.sv-guide a { color: var(--text-link); font-weight: 600; text-decoration: none; }
.sv-guide a:hover { text-decoration: underline; }
.sv-join-err { margin: -12px 0 12px; color: #f87e7a; font-size: 12px; font-weight: 500; line-height: 16px; }
.sv-c-hint { color: var(--text-subtle); font-size: 14px; font-weight: 500; line-height: 18px; }
.sv-samples { padding: 8px 0; }
.sv-samples span { display: inline-block; margin: 4px; padding: 4px; border: 1px solid rgba(151, 151, 159, 0.0392); border-radius: 4px; background: rgba(151, 151, 159, 0.08); color: var(--text-strong); font-size: 14px; font-weight: 400; line-height: 18px; cursor: pointer; }
.sv-samples span:hover { background: rgba(151, 151, 159, 0.16); }
.sv-discover { display: flex; align-items: center; margin-bottom: 16px; padding: 12px; border-radius: var(--radius-sm); background: var(--bg-base-lower); color: var(--text-strong); cursor: pointer; }
.sv-discover-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: 12px; border-radius: 50%; background: #248046; color: #fff; }
.sv-discover .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sv-discover b { font-size: 16px; font-weight: 600; line-height: 20px; }
.sv-discover .t span { color: var(--text-default); font-size: 12px; font-weight: 400; line-height: 16px; }
.sv-discover code { font-family: var(--font-code); }
.sv-discover > .ic { flex: none; margin-right: 16px; }

/* ---------- invite ---------- */
.pfm.sv-invite { max-height: min(800px, calc(100vh - 48px)); }
.pfm.sv-invite .pfm-body { display: flex; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }
.sv-inv-ch { display: inline-flex; align-items: center; color: var(--text-subtle); }
.sv-inv-ch svg { width: 16px; height: 16px; margin: 0 2px -2px; }
.sv-inv-search { flex: none; display: flex; align-items: center; gap: 4px; height: 40px; margin: 16px 24px 0; padding-left: 4px; border: 1px solid var(--border-normal); border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.122); }
.sv-inv-search:focus-within { border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: -2px; }
.sv-inv-search > span { flex: none; display: grid; place-items: center; width: 30px; height: 30px; color: var(--text-default); }
.sv-inv-search input { flex: 1; min-width: 0; height: 38px; padding: 1px 12px 1px 0; border: 0; background: none; color: var(--text-default); font: 400 16px/20px var(--font); outline: none; }
.sv-inv-search input::placeholder { color: var(--text-input-placeholder); }
.sv-inv-list { flex: 1; min-height: 0; max-height: 517px; padding: 12px 8px 12px 24px; overflow-y: auto; }
.sv-inv-row { display: flex; align-items: center; justify-content: space-between; height: 48px; margin: 0 -8px; padding: 7px 8px 7px 5px; border-radius: 3px; }
.sv-inv-row:hover { background: var(--interactive-bg-hover); }
.sv-inv-row[hidden] { display: none; }
.sv-inv-info { min-width: 0; display: flex; align-items: center; margin-right: 4px; overflow: hidden; }
.sv-inv-info .av { flex: none; margin: 0 10px 0 3px; }
.sv-inv-labels { min-width: 0; display: flex; flex-direction: column; margin: 4px 0; }
.sv-inv-labels strong { color: var(--text-default); font-size: 16px; font-weight: 600; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-inv-labels span { color: var(--text-muted); font-size: 12px; font-weight: 400; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-inv-row .pf-btn { min-width: 60px; }
.sv-inv-empty { padding: 24px 0; color: var(--text-muted); font-size: 14px; text-align: center; }
.pfm-foot.sv-inv-footer { display: block; padding: 24px 24px 0; border-top: 1px solid var(--pf-line); border-radius: 0; }
.sv-copy { display: flex; height: 40px; border: 1px solid var(--border-normal); border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.122); overflow: hidden; }
.sv-copy input { flex: 1; min-width: 0; margin-right: 10px; padding: 10px 0 10px 10px; border: 0; background: none; color: var(--text-default); font: 400 16px/18px var(--font); outline: none; }
.sv-copy-btn { flex: none; min-width: 72px; height: 30px; margin: 4px 4px 4px 0; padding: 2px 20px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px; background: var(--brand); color: #fff; font-size: 14px; font-weight: 500; line-height: 16px; }
.sv-copy-btn:hover { background: #4752c4; }
.sv-copy-btn.copied { background: #248046; }
.sv-inv-note { margin-top: 16px; color: var(--text-muted); font-size: 12px; font-weight: 400; line-height: 16px; }
.sv-inv-note a { color: var(--text-link); text-decoration: none; }
.sv-inv-note a:hover { text-decoration: underline; }

/* ---------- Add an App ---------- */
.sv-app-list { display: flex; flex-direction: column; gap: 8px; }
.sv-app-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: rgba(151, 151, 159, 0.08); }
.sv-app-row img { flex: none; width: 40px; height: 40px; border-radius: 50%; }
.sv-app-row .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sv-app-row strong { color: var(--text-strong); font-size: 16px; font-weight: 600; line-height: 20px; }
.sv-app-row span { color: var(--text-subtle); font-size: 14px; line-height: 18px; }

/* ---------- invite links: the card under a message, and the screen for opening one (not measured) ---------- */
.inv-slot:empty { display: none; }
.inv-card { max-width: 432px; margin-top: 8px; padding: 16px; border-radius: 8px; background: var(--bg-surface-high); }
.inv-head { margin: 0 0 12px; color: var(--text-subtle); font-size: 12px; font-weight: 700; line-height: 16px; text-transform: uppercase; }
.inv-row { display: flex; align-items: center; gap: 16px; }
.inv-icon { flex: none; display: grid; place-items: center; width: 50px; height: 50px; overflow: hidden; border-radius: 16px; background: var(--bg-base-low); }
.inv-icon img { object-fit: cover; }
.inv-acr, .sv-accept-icon .inv-acr { display: grid; place-items: center; color: var(--text-default); font-size: 18px; font-weight: 500; }
.inv-icon.invalid { color: var(--status-dnd); }
.inv-info { flex: 1; min-width: 0; }
.inv-name { overflow: hidden; color: var(--text-strong); font-size: 16px; font-weight: 600; line-height: 20px; white-space: nowrap; text-overflow: ellipsis; }
.inv-name.invalid { color: var(--status-dnd); }
.inv-sub { margin-top: 2px; color: var(--text-subtle); font-size: 14px; line-height: 18px; }
.inv-stats { display: flex; flex-wrap: wrap; justify-content: inherit; gap: 4px 12px; margin-top: 2px; color: var(--text-subtle); font-size: 14px; line-height: 18px; }
.inv-stat { display: inline-flex; align-items: center; gap: 4px; }
.inv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-offline); }
.inv-dot.on { background: var(--status-online); }
.inv-join { flex: none; height: 40px; padding: 0 16px; border-radius: 8px; background: #248046; color: #fff; font-size: 14px; font-weight: 600; }
.inv-join:hover { background: #1a6334; }
.inv-join.joined { background: var(--bg-mod-strong); color: var(--text-default); }
.inv-join.joined:hover { background: var(--bg-mod-normal); }
.sv-accept { width: 440px; }
.sv-accept-body { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px 8px; text-align: center; }
.sv-accept-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 16px; overflow: hidden; border-radius: 20px; background: var(--bg-base-low); }
.sv-accept-sub { color: var(--text-subtle); font-size: 14px; line-height: 18px; }
.sv-accept-name { margin: 4px 0 8px; color: var(--text-strong); font-size: 24px; font-weight: 600; line-height: 30px; }

/* a channel you can't post in: the box stays, greyed out */
.composer.no-post .input-box { opacity: 0.6; }
.composer.no-post textarea { cursor: not-allowed; }

/* ---------- View Server As Role (measured: 41px brand banner right of the rail; outlined 26px white buttons) ---------- */
.surface-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.surface-col > .surface { flex: 1; min-height: 0; }
.app-notice { position: relative; flex: none; display: flex; align-items: center; justify-content: center; height: 41px; padding: 0 8px; background: #3a48a3; color: #fff; }
.app-notice[hidden] { display: none; }
.va-mid { display: flex; align-items: center; justify-content: center; min-width: 0; }
.va-text { font-size: 14px; font-weight: 600; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-btn { flex: none; display: flex; align-items: center; gap: 4px; height: 26px; padding: 4px 8px; border: 1px solid #fff; border-radius: 8px; color: #fff; font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.va-btn:hover { background: rgba(255, 255, 255, 0.1); }
.va-select { margin-left: 16px; gap: 8px; }
.va-select.open .ic { transform: rotate(180deg); }
.va-back { position: absolute; left: 24px; top: 7px; }
.va-off { position: absolute; right: 24px; top: 7px; }
.va-pop { position: fixed; z-index: 60; width: 208px; padding: 8px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-surface-higher); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24); }
.va-search input { width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--border-normal); border-radius: 8px; background: var(--bg-base-lower); color: var(--text-default); font-size: 16px; line-height: 20px; }
.va-search input:focus { border: 2px solid var(--brand); padding: 0 9px; outline: none; }
.va-search input::placeholder { color: var(--text-input-placeholder); }
.va-list { max-height: 320px; margin-top: 4px; overflow-y: auto; }
.va-row { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 4px 0 16px; border-radius: 4px; cursor: pointer; }
.va-row:hover { background: var(--interactive-bg-hover); }
.va-row.fixed { cursor: default; background: none; }
.va-dot { flex: none; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; }
.va-name { flex: 1; min-width: 0; color: var(--text-strong); font-size: 16px; font-weight: 500; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-row.fixed .va-name, .va-row.fixed .va-dot { opacity: 0.5; }
.va-cb { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--border-normal); border-radius: 4px; color: #fff; }
.va-cb.on { border-color: transparent; background: var(--brand); }
.va-row.fixed .va-cb { opacity: 0.5; }

/* ---------- Members entry at the top of the channel list, and its page ---------- */
.sv-special .ch-ic > .ic { width: 20px; height: 20px; }
.sv-special-div { padding: 4px 16px 4px 16px; }
.sv-special-div .sv-divider { margin: 4px 0; }
.chat.mp-open > .chat-header, .chat.mp-open > .chat-body { display: none; }
.sv-mpage { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sv-mpage[hidden] { display: none; }
.sv-mpage-body { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 24px 32px; }
.sv-mpage-body .ss-mtable { min-width: 760px; }
.nt-close { position: absolute; right: 16px; top: 12px; display: grid; place-items: center; width: 16px; height: 16px; color: #fff; opacity: 0.8; }
.nt-close:hover { opacity: 1; }