/* Chat servers: the rail, channel list, conversation, voice stage and shared player.
   Pages/Servers and js/chat-room.js, js/chat-watch.js. Chrome follows the app's tokens; the video tiles are always dark. */

.cs-error { margin: .5rem 0; padding: .5rem .75rem; border-radius: 8px; color: var(--rl-danger); background: color-mix(in srgb, var(--rl-danger) 10%, transparent); font-size: .9rem; }
.cs-error--bar { margin: 0; border-radius: 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cs-error__x { border: 0; background: none; color: inherit; cursor: pointer; }

/* ---- server icons --------------------------------------------------------------------------------------- */
.cs-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 2.75rem; height: 2.75rem; border-radius: 50%; color: #fff; font-weight: 700; font-size: .95rem;
    text-decoration: none; background: var(--rl-surface-sunken);
    transition: border-radius var(--rl-dur) var(--rl-ease), transform var(--rl-dur) var(--rl-ease), background var(--rl-dur), color var(--rl-dur);
}
.cs-icon:hover, .cs-icon--on { border-radius: 14px; color: #fff; }
.cs-icon:active { transform: scale(.94); }
.cs-icon--lg { width: 3.25rem; height: 3.25rem; font-size: 1.1rem; }
.cs-icon--home { background: var(--rl-accent); color: var(--rl-accent-contrast); }
.cs-icon--home svg { width: 1.4rem; height: 1.4rem; }
.cs-icon--add { background: var(--rl-surface-raised); color: var(--rl-ok); font-size: 1.5rem; font-weight: 400; border: 1px dashed var(--rl-border); }
.cs-icon--add:hover { background: var(--rl-ok); color: #fff; border-style: solid; border-color: transparent; }
/* The pill beside a rail icon: a nub on hover, a bar for the open server. The rail is 4.5rem and the icon 2.75rem, so
   the gutter the pill lives in is .875rem; the rail clips sideways so it can never cause a scrollbar. */
.cs__rail .cs-icon::before {
    content: ""; position: absolute; left: -.875rem; top: 50%; width: 4px; height: 0; border-radius: 0 4px 4px 0;
    background: var(--rl-text); transform: translateY(-50%); transition: height var(--rl-dur) var(--rl-ease);
}
.cs__rail .cs-icon:hover::before { height: 1.25rem; }
.cs__rail .cs-icon--unread:not(.cs-icon--on)::before { height: .5rem; }
.cs__rail .cs-icon--on::before { height: 2.25rem; }
.cs-rail__rule { width: 2rem; height: 2px; border-radius: 2px; background: var(--rl-border); flex: none; }
.cs-folder { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.cs-folder__face {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px; place-items: center;
    width: 2.75rem; height: 2.75rem; padding: .28rem; border: 0; border-radius: 14px; cursor: pointer;
    background: var(--rl-surface-raised); color: inherit;
}
.cs-folder__face img, .cs-folder__mini {
    width: 100%; height: 100%; border-radius: 4px; object-fit: cover;
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: .55rem; font-weight: 700;
}
.cs-folder--open .cs-folder__servers { display: flex; flex-direction: column; align-items: center; gap: .45rem; }

/* /servers/manage draws its server tiles with the page kit (ui-kit.css) and ServersIndex.razor.css now; this grid is kept
   for any page still laying cards out in it. */
.cs-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; margin: .5rem 0 1.5rem; }

/* ---- the page ------------------------------------------------------------------------------------------- */
.cs {
    flex: 1; min-height: 0; position: relative; display: grid; overflow: hidden;
    grid-template-columns: 4.5rem 15.5rem minmax(0, 1fr);
    background-color: var(--rl-bg); background-image: var(--rl-bg-image, none); background-attachment: fixed; color: var(--rl-text);
}
.cs--members { grid-template-columns: 4.5rem 15.5rem minmax(0, 1fr) 14.5rem; }
/* Only a phone hides the sidebar outright; on a desktop the icon rail stays put. */
@media (max-width: 780px) { :root[data-sidebar="collapsed"] .cs__head { padding-left: 3.4rem; } }

.cs__rail {
    display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: .75rem 0; overflow-y: auto; overflow-x: hidden;
    /* A scrollbar's gutter would push the icons off the rail's centre line. */
    scrollbar-width: none;
    background: var(--rl-surface-sunken); border-right: 1px solid var(--rl-border);
}

.cs__side { display: flex; flex-direction: column; min-height: 0; background: var(--rl-surface-raised); border-right: 1px solid var(--rl-border); }
/* Under the sheets on a mid screen and the drawer on a phone; never shown on a wide one. */
.cs__scrim { display: none; position: absolute; inset: 0; z-index: 19; border: 0; padding: 0; background: rgba(0, 0, 0, .45); cursor: default; animation: cs-fade var(--rl-dur) ease-out both; }
.cs__sideHead { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .9rem; border-bottom: 1px solid var(--rl-border); }
.cs__serverName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs__sideScroll { flex: 1; min-height: 0; overflow-y: auto; padding: .5rem .4rem; }
.cs__empty { color: var(--rl-text-muted); font-size: .85rem; padding: .5rem; }

.cs__me { display: flex; align-items: center; gap: .3rem; padding: .5rem .6rem; min-height: 3.2rem; border-top: 1px solid var(--rl-border); background: var(--rl-surface-sunken); }
/* The mute/headphone/gear buttons share one square so they line up with each other and with the name. */
.cs__me > button, .cs__me > .icon-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border-radius: 8px; }
.cs__meName { flex: 1; min-width: 0; font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs__meGear { flex: none; }

.cs-modal__box--narrow { width: min(30rem, 100%); }
.cs-modal__box--narrow select { width: 100%; }
.cs-meter-row { display: flex; align-items: center; gap: .75rem; margin: .5rem 0; }
.cs-meter { flex: 1; height: .6rem; border-radius: 999px; background: var(--rl-surface-sunken); border: 1px solid var(--rl-border); overflow: hidden; }
.cs-meter i { display: block; height: 100%; width: 0; background: var(--rl-ok); transition: width .06s linear; }

/* ---- channel list --------------------------------------------------------------------------------------- */
.cs-cat { display: flex; align-items: center; justify-content: space-between; margin-top: .6rem; }
.cs-cat__head { display: flex; align-items: center; gap: .25rem; border: 0; background: none; padding: .2rem .55rem; cursor: pointer; text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; font-weight: 700; color: var(--rl-text-muted); }
.cs-cat__head:hover { color: var(--rl-text); }
.cs-cat__caret { width: .8rem; height: .8rem; transform: rotate(90deg); transition: transform .12s; }
.cs-cat__caret--shut { transform: rotate(0); }
.cs-cat__add { border: 0; background: none; color: var(--rl-text-muted); cursor: pointer; padding: .2rem; border-radius: 6px; transition: color var(--rl-dur), background var(--rl-dur); }
.cs-cat__add:hover { color: var(--rl-text); background: var(--rl-surface-sunken); }
.cs-cat__add svg { width: .9rem; height: .9rem; }

.cs-chan { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .32rem .55rem; border: 0; border-radius: 8px; background: none; color: var(--rl-text-muted); text-align: left; cursor: pointer; font-size: .92rem; transition: background var(--rl-dur), color var(--rl-dur), transform var(--rl-dur) var(--rl-ease); }
.cs-chan:hover { background: var(--rl-surface-sunken); color: var(--rl-text); }
.cs-chan:active { transform: scale(.98); }
.cs-chan--on { background: var(--rl-surface-sunken); color: var(--rl-text); font-weight: 600; }
.cs-chan--unread { color: var(--rl-text); font-weight: 700; }
/* Unread is a number now (.cs-chan__badge), not a dot; a mention turns it red and says @ before the count. */
.cs-chan__badge { margin-left: auto; min-width: 1.15rem; padding: 0 .35rem; border-radius: 99px; background: var(--rl-accent); color: var(--rl-accent-contrast); font-size: .7rem; font-weight: 700; line-height: 1.15rem; text-align: center; flex: none; animation: cs-pop .2s var(--rl-ease); }
.cs-chan__badge--mention { background: var(--rl-danger); color: #fff; }
.cs-chan__lock { font-size: .72rem; opacity: .75; flex: none; }
.cs-icon { position: relative; }
.cs-icon__badge { position: absolute; right: -.3rem; bottom: -.3rem; min-width: 1.1rem; padding: 0 .3rem; border-radius: 99px; background: var(--rl-accent); color: var(--rl-accent-contrast); border: 2px solid var(--rl-surface-sunken); font-size: .62rem; font-weight: 700; line-height: .95rem; text-align: center; animation: cs-pop .2s var(--rl-ease); }
.cs-icon__badge--mention { background: var(--rl-danger); color: #fff; }
.cs-msg--mention { background: color-mix(in srgb, var(--rl-accent) 11%, transparent); box-shadow: inset 3px 0 0 var(--rl-accent); }
.cs-mention { padding: 0 .2rem; border-radius: 4px; background: color-mix(in srgb, var(--rl-accent) 22%, transparent); color: var(--rl-accent); font-weight: 600; }
.cs-mention--everyone { background: color-mix(in srgb, var(--rl-danger) 20%, transparent); color: var(--rl-danger); }
.cs-mention--role { background: color-mix(in srgb, var(--rl-accent) 28%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rl-accent) 45%, transparent); }
.cs-access { grid-column: 1 / -1; margin: .5rem 0 .25rem; padding: .6rem .75rem; border: 1px solid var(--rl-border); border-radius: 10px; background: var(--rl-surface); }
.cs-access h4 { margin: .5rem 0 .25rem; font-size: .9rem; }
.cs-overrides { width: 100%; border-collapse: collapse; font-size: .82rem; }
.cs-overrides th, .cs-overrides td { padding: .25rem .35rem; text-align: left; border-bottom: 1px solid var(--rl-border); font-weight: 500; }
.cs-overrides thead th { color: var(--rl-text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
.cs-overrides select { max-width: 9rem; }
.cs-chan--live .cs-chan__glyph { color: var(--rl-ok); }
.cs-chan__glyph { width: 1.2rem; text-align: center; flex: none; }
.cs-chan__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.cs-chan__count { font-size: .72rem; color: var(--rl-text-muted); }

.cs-room { list-style: none; margin: 0 0 .25rem 1.7rem; padding: 0; }
.cs-room__who { display: flex; align-items: center; gap: .45rem; padding: .12rem .3rem; font-size: .82rem; color: var(--rl-text-muted); }
.cs-room__who--speaking { color: var(--rl-text); }
.cs-room__who--speaking .cs-room__dot { box-shadow: 0 0 0 2px var(--rl-ok); animation: cs-speak 1.4s ease-in-out infinite; }
.cs-room__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-room__dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; color: #fff; font-size: .72rem; font-weight: 700; }
.cs-room__state { font-size: .75rem; margin-left: auto; }
.cs-badge { font-size: .62rem; font-weight: 700; padding: .05rem .35rem; border-radius: 5px; background: var(--rl-surface-sunken); color: var(--rl-text-muted); text-transform: uppercase; }
.cs-badge--live { background: var(--rl-danger); color: #fff; }

/* ---- the call strip in the sidebar --------------------------------------------------------------------- */
.cs-call { padding: .6rem .8rem; border-top: 1px solid var(--rl-border); background: color-mix(in srgb, var(--rl-ok) 8%, var(--rl-surface-sunken)); }
.cs-call__status { display: flex; align-items: center; gap: .6rem; font-size: .85rem; line-height: 1.2; color: var(--rl-ok); }
.cs-call__status small { color: var(--rl-text-muted); }
.cs-call__pulse { width: .6rem; height: .6rem; border-radius: 50%; background: var(--rl-ok); animation: cs-pulse 1.6s ease-in-out infinite; flex: none; }
@keyframes cs-pulse { 50% { opacity: .35; } }
.cs-call__btns { display: flex; gap: .4rem; margin-top: .5rem; }

.cs-ctl { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 2.4rem; height: 2.4rem; padding: 0 .75rem; border: 1px solid var(--rl-border); border-radius: 8px; background: var(--rl-surface-raised); color: var(--rl-text); cursor: pointer; font: inherit; font-size: .85rem; transition: background var(--rl-dur), color var(--rl-dur), border-color var(--rl-dur), transform var(--rl-dur) var(--rl-ease); }
.cs-ctl:hover { background: var(--rl-surface-raised); }
.cs-ctl:active { transform: scale(.95); }
.cs-ctl--off { background: color-mix(in srgb, var(--rl-danger) 14%, var(--rl-surface)); color: var(--rl-danger); border-color: color-mix(in srgb, var(--rl-danger) 40%, transparent); }
.cs-ctl--on { background: color-mix(in srgb, var(--rl-ok) 16%, var(--rl-surface)); color: var(--rl-ok); border-color: color-mix(in srgb, var(--rl-ok) 40%, transparent); }
.cs-ctl--leave { color: #fff; background: var(--rl-danger); border-color: transparent; }
.cs-ctl--leave:hover { background: var(--rl-danger); filter: brightness(1.1); }
.cs-call__btns .cs-ctl { flex: 1; padding: 0; }

/* ---- main column ---------------------------------------------------------------------------------------- */
.cs__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cs__head { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; border-bottom: 1px solid var(--rl-border); background: var(--rl-surface); min-height: 3.2rem; }
.cs__title { margin: 0; font-size: 1.05rem; font-weight: 650; white-space: nowrap; }
.cs__topic { color: var(--rl-text-muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 1px solid var(--rl-border); padding-left: .6rem; }
.cs__spacer { flex: 1; }
.cs__burger { display: none; }

.cs__members { overflow-y: auto; padding: .75rem .5rem; border-left: 1px solid var(--rl-border); background: var(--rl-surface-raised); }
.cs__membersHead { margin: .9rem .5rem .35rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--rl-text-muted); }
.cs__membersHead:first-child { margin-top: 0; }
.cs-member { display: flex; align-items: center; gap: .55rem; padding: .3rem .5rem; font-size: .9rem; border-radius: 8px; transition: background var(--rl-dur), opacity var(--rl-dur); }
.cs-member:hover { background: var(--rl-surface-sunken); }
.cs-member--off { opacity: .5; }
.cs-member--off:hover { opacity: .85; }
.cs-member__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cs-join { margin: auto; max-width: 30rem; padding: 2rem 1.25rem; text-align: center; }
.cs-join .btn { margin: .5rem 0 1rem; }

/* ---- text channel --------------------------------------------------------------------------------------- */
.cs-pane { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cs-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem 1.25rem .5rem; }
.cs-msgs__note { color: var(--rl-text-muted); }
.cs-msgs__start { margin: 0 0 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rl-border); animation: cs-rise .25s var(--rl-ease) both; }
.cs-msgs__glyph { display: inline-flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; margin-bottom: .6rem; border-radius: 50%; background: var(--rl-surface-sunken); color: var(--rl-text); font-size: 2rem; font-weight: 700; line-height: 1; }
.cs-msgs__start h3 { margin: 0 0 .25rem; font-size: 1.3rem; }
.cs-msgs__start p { margin: 0; color: var(--rl-text-muted); }
.cs-msgs__older { display: block; margin: 0 auto 1rem; }

.cs-msg { position: relative; display: grid; grid-template-columns: 2.4rem 1fr; column-gap: .75rem; padding: .35rem .5rem; margin: 0 -.5rem; border-radius: 8px; transition: background .1s; animation: cs-msg-in .2s var(--rl-ease) both; }
.cs-msg:hover { background: var(--rl-surface-raised); }
.cs-msg > .cs-avwrap { grid-row: 1 / span 2; display: inline-flex; width: 2.4rem; height: 2.4rem; }
.cs-msg__avatar { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; color: #fff; font-weight: 700; }
.cs-msg > .cs-msg__avatar { grid-row: 1 / span 2; width: 2.4rem; height: 2.4rem; }
.cs-msg__head { display: flex; align-items: baseline; gap: .5rem; grid-column: 2; }
.cs-msg__head time { color: var(--rl-text-muted); font-size: .75rem; }
.cs-msg__body { grid-column: 2; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cs-msg--grouped { padding-top: 0; padding-bottom: .1rem; }
.cs-msg--grouped .cs-msg__body { grid-row: 1; }
.cs-msg__edited { color: var(--rl-text-muted); font-size: .72rem; }
.cs-msg__edit { grid-column: 2; display: flex; flex-direction: column; gap: .25rem; }
.cs-msg__edit textarea { width: 100%; resize: vertical; padding: .4rem .6rem; border-radius: 8px; border: 1px solid var(--rl-accent); background: var(--rl-surface); color: var(--rl-text); }

:root[data-messages-right] .cs-msg:not(.cs-msg--mine) .cs-msg__body {
    display: inline-block; width: fit-content; max-width: min(32rem, 100%);
    padding: .55rem .85rem; border-radius: 1.05rem 1.05rem 1.05rem .3rem;
    background: var(--rl-surface-sunken);
}
:root[data-messages-right] .cs-msg:not(.cs-msg--mine).cs-msg--grouped .cs-msg__body { border-radius: .3rem 1.05rem 1.05rem .3rem; }
/* SMS layout: your own lines sit on the right as bubbles (Appearance → Your messages on the right).
   Everyone else's lines are the same shape, on the left, so both sides of the thread are pills. */
:root[data-messages-right] .cs-msgs { display: flex; flex-direction: column; }
:root[data-messages-right] .cs-msg--mine {
    display: flex; flex-direction: column; align-items: flex-end; align-self: flex-end;
    width: fit-content; max-width: min(32rem, 88%); margin: .15rem 0; padding: .2rem .35rem;
    grid-template-columns: none; column-gap: 0;
}
:root[data-messages-right] .cs-msg--mine:hover { background: transparent; }
:root[data-messages-right] .cs-msg--mine.cs-msg--mention { box-shadow: none; background: transparent; }
:root[data-messages-right] .cs-msg--mine > .cs-avwrap,
:root[data-messages-right] .cs-msg--mine > .cs-msg__avatar { display: none; }
:root[data-messages-right] .cs-msg--mine .cs-msg__head,
:root[data-messages-right] .cs-msg--mine .cs-msg__body,
:root[data-messages-right] .cs-msg--mine .cs-msg__edit,
:root[data-messages-right] .cs-msg--mine .cs-msg__atts,
:root[data-messages-right] .cs-msg--mine .cs-msg__embeds,
:root[data-messages-right] .cs-msg--mine .cs-msg__reply,
:root[data-messages-right] .cs-msg--mine > .cs-msg__pin { grid-column: auto; width: 100%; }
:root[data-messages-right] .cs-msg--mine .cs-msg__head { flex-direction: row-reverse; justify-content: flex-start; }
:root[data-messages-right] .cs-msg--mine .cs-msg__body {
    padding: .55rem .85rem; border-radius: 1.05rem 1.05rem .3rem 1.05rem;
    background: var(--rl-bubble-user); color: var(--rl-bubble-user-text);
}
:root[data-messages-right] .cs-msg--mine .cs-msg__body a { color: inherit; text-decoration-color: color-mix(in srgb, var(--rl-bubble-user-text) 55%, transparent); }
:root[data-messages-right] .cs-msg--mine .cs-msg__edited { color: color-mix(in srgb, var(--rl-bubble-user-text) 70%, transparent); }
:root[data-messages-right] .cs-msg--mine .cs-msg__tools { right: auto; left: .35rem; }
:root[data-messages-right] .cs-msg--mine.cs-msg--grouped { padding-top: 0; }
:root[data-messages-right] .cs-msg--mine.cs-msg--grouped .cs-msg__body { border-radius: 1.05rem .3rem .3rem 1.05rem; }
:root[data-messages-right] .cs-msg--mine .cs-msg__reply { justify-content: flex-end; text-align: right; }
:root[data-messages-right] .cs-msg--mine .cs-react { background: color-mix(in srgb, var(--rl-bubble-user) 35%, var(--rl-surface)); }
:root[data-messages-right] .cs-msg--mine .cs-embed {
    --embed-color: color-mix(in srgb, var(--rl-bubble-user-text) 55%, transparent);
    background: color-mix(in srgb, var(--rl-bubble-user) 22%, var(--rl-surface));
}
:root[data-messages-right] .cs-msg--mine .cs-embed__action {
    background: color-mix(in srgb, var(--rl-bubble-user) 40%, var(--rl-surface));
    border-color: color-mix(in srgb, var(--rl-bubble-user-text) 35%, transparent);
    color: var(--rl-bubble-user-text);
}
:root[data-messages-right] .cs-msg--mine .cs-embed__action:hover {
    border-color: var(--rl-bubble-user-text);
    color: var(--rl-bubble-user-text);
}
/* The hover toolbar fades and lifts in rather than popping; it keeps its box so it can animate out as well.
   With no hover (a phone) it simply stays visible, since there is nothing to hover. */
.cs-msg__tools {
    position: absolute; right: .5rem; top: -.55rem; display: flex; gap: .1rem; padding: .1rem .2rem; border: 1px solid var(--rl-border); border-radius: 8px; background: var(--rl-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .16); opacity: 0; visibility: hidden; transform: translateY(4px) scale(.96);
    transition: opacity .12s, transform .12s var(--rl-ease), visibility 0s linear .12s;
}
.cs-msg:hover .cs-msg__tools, .cs-msg:focus-within .cs-msg__tools { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: none) { .cs-msg__tools { opacity: .9; visibility: visible; transform: none; } }
.cs-msg__tools button { border: 0; background: none; cursor: pointer; padding: .15rem .35rem; border-radius: 6px; color: var(--rl-text-muted); transition: background var(--rl-dur), color var(--rl-dur), transform var(--rl-dur) var(--rl-ease); }
.cs-msg__tools button:hover { background: var(--rl-surface-sunken); color: var(--rl-text); transform: translateY(-1px); }

.cs-msg__body a { color: var(--rl-accent); text-decoration: underline; text-underline-offset: 2px; }
.cs-msg__body a:hover { text-decoration-thickness: 2px; }

/* Message markdown (ChatMarkdown): drawn as elements, so these are the only styles it needs. */
.cs-md__h.cs-md__h { margin: .3rem 0 .1rem; line-height: 1.25; }
.cs-md__h.cs-md__h1 { font-size: 1.45rem; }
.cs-md__h.cs-md__h2 { font-size: 1.2rem; }
.cs-md__h.cs-md__h3 { font-size: 1.02rem; }
.cs-md__sub { display: block; color: var(--rl-text-muted); font-size: .75rem; }
.cs-md__quote { margin: .15rem 0; padding: 0 0 0 .7rem; border-left: 4px solid var(--rl-border); }
.cs-md__code { padding: .05rem .3rem; border-radius: 4px; background: var(--rl-surface-sunken); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; }
.cs-md__pre { margin: .25rem 0; padding: .55rem .75rem; border: 1px solid var(--rl-border); border-radius: 8px; background: var(--rl-surface-sunken); overflow-x: auto; white-space: pre; font-size: .85rem; }
.cs-md__pre code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.cs-md__li { display: flex; gap: .45rem; padding-left: calc(.4rem + var(--cs-li-depth, 0) * 1.2rem); }
.cs-md__li--1 { --cs-li-depth: 1; }
.cs-md__li--2 { --cs-li-depth: 2; }
.cs-md__mark { flex: none; min-width: .8rem; color: var(--rl-text-muted); }
.cs-spoiler { border-radius: 4px; background: var(--rl-text); color: transparent; cursor: pointer; transition: background var(--rl-dur), color var(--rl-dur); }
.cs-spoiler * { visibility: hidden; }
.cs-spoiler--shown { background: var(--rl-surface-sunken); color: inherit; cursor: auto; }
.cs-spoiler--shown * { visibility: visible; }

/* A reply: the line it answers, above the author's name. Clicking it jumps there. */
.cs-msg__reply { grid-column: 2; display: flex; align-items: center; gap: .35rem; min-width: 0; margin: 0 0 .1rem; padding: 0; border: 0; background: none; color: var(--rl-text-muted); font: inherit; font-size: .8rem; text-align: left; cursor: pointer; }
.cs-msg__reply:hover { color: var(--rl-text); }
.cs-msg__reply span, .cs-msg__reply strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-msg__reply strong { flex: 0 1 auto; max-width: 40%; }
.cs-msg__reply ~ .cs-msg__avatar, .cs-msg__reply ~ .cs-avwrap { grid-row: 2 / span 2; }
.cs-msg__pin { color: var(--rl-text-muted); font-size: .75rem; }
.cs-msg--flash { background: color-mix(in srgb, var(--rl-accent) 18%, transparent); }
.cs-msgs__present { display: block; margin: .5rem auto; }

/* A picture sent in chat shows in the message; any other file is a card to download. */
.cs-msg__atts { grid-column: 2; display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; margin-top: .25rem; min-width: 0; }
.cs-msg--grouped .cs-msg__atts { grid-row: auto; }
.cs-att { display: inline-flex; max-width: 100%; border-radius: 8px; }
.cs-att--img { border: 1px solid var(--rl-border); background: var(--rl-surface-sunken); overflow: hidden; }
.cs-att__img { display: block; max-width: min(26rem, 100%); max-height: 20rem; width: auto; height: auto; object-fit: contain; }
.cs-att--file { align-items: center; gap: .6rem; padding: .5rem .75rem; border: 1px solid var(--rl-border); background: var(--rl-surface-sunken); color: var(--rl-text); text-decoration: none; }
.cs-att--file:hover { border-color: var(--rl-accent); }
.cs-att__icon { font-size: 1.4rem; }
.cs-att__text { display: flex; flex-direction: column; min-width: 0; }
.cs-att__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; font-weight: 600; font-size: .9rem; }
.cs-att__text small { color: var(--rl-text-muted); }

/* Reactions: chips under a message or an attachment, and the picker that adds them. */
.cs-reacts { grid-column: 2; display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.cs-reacts--att { grid-column: auto; margin-top: .25rem; }
.cs-react { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem; border: 1px solid var(--rl-border); border-radius: 999px; background: var(--rl-surface-raised); color: var(--rl-text); font-size: .85rem; cursor: pointer; transition: border-color var(--rl-dur), background var(--rl-dur), transform var(--rl-dur) var(--rl-ease); animation: cs-pop .2s var(--rl-ease); }
.cs-react:hover { border-color: var(--rl-accent); transform: translateY(-1px); }
.cs-react:active { transform: scale(.92); }
.cs-react--mine { border-color: var(--rl-accent); background: color-mix(in srgb, var(--rl-accent) 20%, transparent); }
.cs-attwrap { position: relative; display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; min-width: 0; }
.cs-att__react { position: absolute; top: .3rem; right: .3rem; border: 1px solid var(--rl-border); border-radius: 8px; background: var(--rl-surface); cursor: pointer; padding: .15rem .35rem; opacity: 0; transition: opacity var(--rl-dur); }
.cs-attwrap:hover .cs-att__react, .cs-att__react:focus-visible { opacity: 1; }
.cs-picker__backdrop { position: fixed; inset: 0; z-index: 20; border: 0; background: transparent; cursor: default; }
.cs-picker { position: absolute; z-index: 21; right: 1.25rem; bottom: 4.75rem; width: min(19rem, calc(100% - 2.5rem)); padding: .5rem; border: 1px solid var(--rl-border); border-radius: 12px; background: var(--rl-surface); box-shadow: 0 8px 24px rgb(0 0 0 / .35); transform-origin: bottom right; animation: cs-rise .18s var(--rl-ease) both; }
.cs-picker__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: .1rem; max-height: 14rem; overflow-y: auto; }
.cs-picker__grid button { border: 0; background: none; cursor: pointer; font-size: 1.25rem; padding: .25rem 0; border-radius: 6px; transition: background var(--rl-dur), transform var(--rl-dur) var(--rl-ease); }
.cs-picker__grid button:hover { background: var(--rl-surface-sunken); transform: scale(1.2); }
.cs-picker__custom { width: 100%; margin-top: .4rem; padding: .35rem .5rem; border-radius: 8px; border: 1px solid var(--rl-border); background: var(--rl-surface-sunken); color: var(--rl-text); }

.cs-pending { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 1.25rem 0; }
.cs-pending__chip { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; padding: .25rem .5rem; border: 1px solid var(--rl-border); border-radius: 8px; background: var(--rl-surface-raised); font-size: .85rem; }
.cs-pending__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }
.cs-pending__chip small { color: var(--rl-text-muted); }
.cs-pending__chip button { border: 0; background: none; color: var(--rl-text-muted); cursor: pointer; padding: 0 .15rem; }
.cs-pending__chip button:hover { color: var(--rl-danger); }

.cs-composer__file { display: none; }
.cs-pane--drop { outline: 2px dashed var(--rl-accent); outline-offset: -6px; background: color-mix(in srgb, var(--rl-accent) 6%, transparent); }

/* One rounded box holding the plus, the text and Send - the chat page's .composer is scoped to that page, so this is
   written out here. The box, not the textarea, takes the focus ring. */
.cs-composer {
    position: relative;
    display: flex; align-items: flex-end; gap: .25rem; margin: .5rem 1.25rem .6rem; padding: .25rem .3rem .25rem .25rem;
    border: 1px solid var(--rl-border); border-radius: var(--rl-radius); background: var(--rl-surface);
    transition: border-color var(--rl-dur), box-shadow var(--rl-dur);
}
.cs-composer:focus-within { border-color: var(--rl-accent); box-shadow: var(--rl-ring); }
.cs-composer .composer__box {
    flex: 1; min-width: 0; width: 100%; font: inherit; line-height: 1.5; resize: none; border: 0; outline: none; background: none;
    color: var(--rl-text); padding: .5rem .35rem; max-height: 14rem; overflow-y: auto;
}
.cs-composer .composer__box::placeholder { color: var(--rl-text-muted); }
.btn.cs-composer__attach { display: inline-flex; align-items: center; justify-content: center; align-self: flex-end; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--rl-text-muted); cursor: pointer; }
.btn.cs-composer__attach svg { display: block; }
.btn.cs-composer__attach:hover { background: var(--rl-surface-sunken); color: var(--rl-text); }
.btn.cs-composer__send { align-self: flex-end; height: 2.5rem; padding: 0 1rem; border-radius: 8px; }
.cs-hint { margin: .3rem 1.25rem .6rem; font-size: .75rem; color: var(--rl-text-muted); }

/* ---- settings panel ------------------------------------------------------------------------------------- */
.cs-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, .5); animation: cs-fade .15s ease-out both; }
.cs-modal__box { width: min(46rem, 100%); max-height: 90vh; display: flex; flex-direction: column; border-radius: var(--rl-radius); border: 1px solid var(--rl-border); background: var(--rl-surface); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); animation: cs-rise .2s var(--rl-ease) both; }
.cs-modal__head { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1.1rem; border-bottom: 1px solid var(--rl-border); }
.cs-modal__head h2 { margin: 0; font-size: 1.15rem; }
.cs-modal__body { padding: .5rem 1.1rem 1.1rem; overflow-y: auto; }
.cs-modal__body section { margin-top: 1rem; }
.cs-modal__body h3 { font-size: .95rem; margin: 0 0 .4rem; }
.cs-tabs { display: flex; gap: .25rem; padding: 0 1rem; border-bottom: 1px solid var(--rl-border); }
.cs-tab { border: 0; background: none; padding: .6rem .8rem; cursor: pointer; color: var(--rl-text-muted); border-bottom: 2px solid transparent; font-weight: 600; transition: color var(--rl-dur), border-color var(--rl-dur); }
.cs-tab:hover { color: var(--rl-text); }
.cs-tab--on { color: var(--rl-text); border-bottom-color: var(--rl-accent); }
/* Server settings uses the same two columns as the site settings pages: sections down the side, the form beside them. */
.cs-modal__box.cs-settings {
    width: min(68rem, calc(100vw - 2rem)); height: min(44rem, calc(100vh - 2rem)); max-height: none;
    display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
}
.cs-settings > .cs-modal__head { grid-column: 1 / -1; }
.cs-settings > .cs-tabs {
    grid-column: 1; grid-row: 2 / span 2; flex-direction: column; align-items: stretch; gap: 2px;
    border-bottom: 0; border-right: 1px solid var(--rl-border); padding: .75rem .5rem; overflow-y: auto;
    background: var(--rl-surface-raised);
}
.cs-settings > .cs-error { grid-column: 2; grid-row: 2; margin: .75rem 1rem 0; }
.cs-settings > .cs-modal__body { grid-column: 2; grid-row: 3; min-height: 0; }
.cs-settings > .cs-tab { text-align: left; border-bottom: 0; border-radius: var(--rl-radius); padding: .4rem .65rem; }
.cs-settings > .cs-tab--on { background: var(--rl-surface-sunken); color: var(--rl-text); border-bottom-color: transparent; }
@media (max-width: 800px) {
    .cs-modal__box.cs-settings { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr); height: min(100dvh - 1rem, 44rem); }
    .cs-settings > .cs-tabs { grid-column: 1; grid-row: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--rl-border); }
    .cs-settings > .cs-tab { white-space: nowrap; }
    .cs-settings > .cs-error { grid-column: 1; grid-row: 3; }
    .cs-settings > .cs-modal__body { grid-column: 1; grid-row: 4; }
}
.cs-invite { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.cs-share { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 .6rem; }
.cs-share code { flex: 1; min-width: 12rem; padding: .45rem .65rem; border-radius: 8px; background: var(--rl-surface-sunken); overflow-wrap: anywhere; text-align: left; }
.cs-invite code { flex: 1; min-width: 12rem; padding: .4rem .6rem; border-radius: 8px; background: var(--rl-surface-sunken); overflow-wrap: anywhere; }
.cs-swatches { display: flex; gap: .4rem; flex-wrap: wrap; }
.cs-swatch { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.cs-swatch--on { border-color: var(--rl-text); }
.cs-addrow { display: flex; flex-wrap: wrap; gap: .5rem; }
.cs-addrow input { flex: 1; min-width: 10rem; }
.cs-addrow input, .cs-addrow select, .cs-grp input, .cs-grp select { padding: .4rem .6rem; border-radius: 8px; border: 1px solid var(--rl-border); background: var(--rl-surface); color: var(--rl-text); }
.cs-grp { margin: .75rem 0; border: 1px solid var(--rl-border); border-radius: 10px; overflow: hidden; }
.cs-grp__head, .cs-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; padding: .45rem .7rem; }
.cs-grp__head { background: var(--rl-surface-raised); }
.cs-row { border-top: 1px solid var(--rl-border); }
.cs-grp__tools { display: inline-flex; gap: .35rem; }
.cs-member .cs-badge { margin-left: .35rem; }

/* ---- voice stage ---------------------------------------------------------------------------------------- */
.vs { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--rl-surface-sunken); }
/* Out of sight but still alive, so the call and a playing video carry on while another channel is open. */
.vs--away { position: fixed; left: -10000px; top: 0; width: 640px; height: 400px; pointer-events: none; }
.vs__canvas { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .6rem; padding: .6rem; overflow-y: auto; }
.vs__watch { flex: 1 1 62%; min-height: 15rem; display: flex; }
.vs__watch[hidden] { display: none; }
.vs__tiles { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.vs--watching .vs__tiles { flex: 0 0 auto; }
.vs__panel { padding: 0 .75rem; }
.vs__panel:empty { display: none; }
.vs__watchForm, .vs__now { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem 0; font-size: .9rem; }
.vs__watchForm input { flex: 1; min-width: 14rem; padding: .45rem .7rem; border-radius: 8px; border: 1px solid var(--rl-border); background: var(--rl-surface); color: var(--rl-text); }
.vs__watchForm select { padding: .45rem; border-radius: 8px; border: 1px solid var(--rl-border); background: var(--rl-surface); color: var(--rl-text); }
.vs__now { justify-content: space-between; }
.vs__bar { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; padding: .7rem; border-top: 1px solid var(--rl-border); background: var(--rl-surface); }

/* ---- tiles (built by chat-room.js) ---------------------------------------------------------------------- */
.rm__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem; align-content: center; }
.rm__audio { display: none; }
/* The call's audio elements live here once the page is gone, so leaving the server does not stop the room. */
.ripllm-voice-park { position: fixed; left: -10000px; top: 0; width: 4rem; height: 4rem; overflow: hidden; pointer-events: none; }
.tile { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer; border-radius: 12px; border: 2px solid transparent; background: #111827; color: #fff; transition: border-color .15s, box-shadow .15s, transform var(--rl-dur) var(--rl-ease); animation: cs-rise .25s var(--rl-ease) both; }
.tile:hover { transform: translateY(-1px); }
.tile--speaking { border-color: var(--rl-ok); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rl-ok) 45%, transparent); animation: cs-speak 1.4s ease-in-out infinite; }
@keyframes cs-speak { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--rl-ok) 22%, transparent); } }
.tile__video { position: absolute; inset: 0; display: none; width: 100%; height: 100%; object-fit: contain; background: #000; }
.tile--video .tile__video { display: block; }
.tile--video .tile__avatar { display: none; }
.tile--self:not(.tile--screen) .tile__video { transform: scaleX(-1); }
.tile__avatar { width: 4.5rem; height: 4.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 700; color: #fff; }
.tile__label { position: absolute; left: .5rem; bottom: .5rem; display: flex; align-items: center; gap: .4rem; max-width: calc(100% - 1rem); padding: .15rem .5rem; border-radius: 8px; background: rgba(0, 0, 0, .6); font-size: .8rem; }
.tile__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile__badges { display: inline-flex; gap: .25rem; }
.tile__badge { font-size: .7rem; }
.tile__badge--live { padding: 0 .3rem; border-radius: 4px; background: var(--rl-danger); font-weight: 700; }
.tile__full { position: absolute; right: .5rem; top: .5rem; display: none; border: 0; border-radius: 8px; padding: .2rem .5rem; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; }
.tile--video:hover .tile__full { display: block; }
.tile:fullscreen { aspect-ratio: auto; border-radius: 0; }

/* One tile promoted to the stage (a screen share, or one the person clicked); the rest become a strip. */
.rm--stage .rm__grid { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); align-content: start; }
.rm--stage .tile:not(.tile--stage) { aspect-ratio: auto; height: 5.5rem; }
.rm--stage .tile--stage { grid-column: 1 / -1; grid-row: 1; aspect-ratio: auto; height: min(62vh, 44rem); }
.rm--stage .tile--stage .tile__video { object-fit: contain; }
.vs--watching .rm__grid { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.vs--watching .tile:not(.tile--stage) { aspect-ratio: auto; height: 5.5rem; }

/* ---- the shared player (built by chat-watch.js) --------------------------------------------------------- */
.wt { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; border-radius: 12px; background: #000; }
.wt__yt { position: relative; flex: 1; min-height: 14rem; }
.wt__yt iframe, .wt__yt > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wt__video { flex: 1; min-height: 0; width: 100%; background: #000; }
.wt__frame { flex: 1; min-height: 14rem; border: 0; background: #fff; }
.wt__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .4rem .75rem; background: var(--rl-surface-raised); color: var(--rl-text); font-size: .85rem; }
.wt__title { font-weight: 600; }
.wt__hint { color: var(--rl-text-muted); font-size: .78rem; }
.wt__blocked { padding: 1rem; color: #fff; }
.wt__gesture { position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; padding: .8rem 1.4rem; border: 0; border-radius: 12px; background: var(--rl-accent); color: var(--rl-accent-contrast); font-weight: 700; cursor: pointer; z-index: 2; }
.wt--locked::after { content: "The host controls playback"; position: absolute; right: .6rem; top: .6rem; padding: .15rem .55rem; border-radius: 8px; background: rgba(0, 0, 0, .65); color: #fff; font-size: .72rem; pointer-events: none; }

/* ---- direct messages ------------------------------------------------------------------------------------ */
.cs-icon--dm { position: relative; background: var(--rl-surface-raised); color: var(--rl-text); font-size: 1.25rem; font-weight: 400; }
.cs-icon--dm.cs-icon--on { background: var(--rl-accent); }
.cs-icon--unread::after { content: ""; position: absolute; right: -.1rem; bottom: -.1rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--rl-danger); border: 2px solid var(--rl-surface-sunken); }
a.cs-chan { text-decoration: none; }
.cs-chan--person .cs-room__dot { margin-right: .1rem; }
.cs-member__dm { margin-left: auto; border: 0; background: none; cursor: pointer; opacity: 0; padding: .1rem .3rem; border-radius: 6px; }
.cs-member:hover .cs-member__dm, .cs-member__dm:focus-visible { opacity: 1; }
.cs-member__dm:hover { background: var(--rl-surface-sunken); }
.cs-people { list-style: none; margin: .25rem 0 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.cs-people__row { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .45rem .5rem; border: 0; border-radius: 8px; background: none; color: var(--rl-text); text-align: left; cursor: pointer; }
.cs-people__row:hover { background: var(--rl-surface-sunken); }
.cs-people__head { margin: .6rem .25rem 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--rl-text-muted); }
.cs-ring { display: flex; align-items: center; gap: .75rem; padding: .5rem 1rem; background: color-mix(in srgb, var(--rl-ok) 15%, transparent); border-bottom: 1px solid var(--rl-border); }
.cs-ring span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cs-member__more--on { opacity: 1; background: var(--rl-surface-sunken); }
.cs-actions { display: flex; flex-direction: column; gap: .1rem; margin: .1rem 0 .4rem .3rem; padding: .3rem; border: 1px solid var(--rl-border); border-radius: 8px; background: var(--rl-surface); }
.cs-actions button { border: 0; border-radius: 6px; background: none; color: var(--rl-text); text-align: left; padding: .35rem .5rem; font-size: .85rem; cursor: pointer; }
.cs-actions button:hover:not(:disabled) { background: var(--rl-surface-sunken); }
.cs-actions button:disabled { opacity: .55; cursor: default; }
.cs-actions__danger { color: var(--rl-danger) !important; }
.cs-actions .cs-error { margin: .1rem 0 .3rem; font-size: .8rem; }
.cs-actions-wrap { display: flex; justify-content: flex-end; padding: .4rem 1rem 0; background: var(--rl-surface); border-bottom: 1px solid var(--rl-border); }
.cs-actions-wrap .cs-actions { min-width: 13rem; margin: 0 0 .4rem; }
.cs-notice { margin: .75rem 1rem; padding: .75rem 1rem; border-radius: 8px; background: var(--rl-surface-sunken); color: var(--rl-text-muted); font-size: .9rem; text-align: center; }
.cs-frow { display: flex; align-items: center; gap: .65rem; padding: .4rem .25rem; border-bottom: 1px solid var(--rl-border); }
.cs-frow:last-child { border-bottom: 0; }
.cs-frow__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-frow__name small { color: var(--rl-text-muted); margin-left: .3rem; }
.cs-frow .btn { padding: .25rem .65rem; font-size: .85rem; }

/* ---- whiteboard and kanban channels ---------------------------------------------------------------------- */
.cs-board { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cs-board > .kb, .cs-board > .wbp { flex: 1; min-height: 0; }

/* ---- page channels (ChannelPageHost) ---------------------------------------
   A toolbar, then the frame; with the source editor open the two sit side by side and the frame is the live preview. */
.cs-page { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--rl-surface); }
.cs-page__bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .4rem .75rem; border-bottom: 1px solid var(--rl-border); font-size: .85rem; color: var(--rl-text-muted); }
.cs-page__tools { display: flex; gap: .4rem; }
.cs-page__body { flex: 1; min-height: 0; display: flex; }
.cs-page__frame { flex: 1; min-width: 0; min-height: 0; border: 0; background: #fff; color-scheme: light; }
.cs-page__empty, .cs-page__blank { margin: auto; padding: 2rem; text-align: center; color: var(--rl-text-muted); }
.cs-page__blank { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.cs-page__editor { flex: 0 0 min(46%, 40rem); display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--rl-border); background: var(--rl-surface-sunken); }
.cs-page__editorLabel { display: flex; flex-direction: column; gap: .15rem; padding: .5rem .75rem .35rem; font-weight: 600; font-size: .85rem; }
.cs-page__editorLabel small { font-weight: 400; color: var(--rl-text-muted); }
.cs-page__source { flex: 1; min-height: 0; resize: none; margin: 0 .5rem; padding: .6rem .7rem; border: 1px solid var(--rl-border); border-radius: 8px; background: var(--rl-surface); color: var(--rl-text); font: .82rem/1.45 ui-monospace, 'Cascadia Code', Consolas, 'SF Mono', Menlo, monospace; tab-size: 2; white-space: pre; overflow: auto; }
.cs-page__source:focus-visible { outline: none; border-color: var(--rl-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rl-accent) 20%, transparent); }
.cs-page__editorBar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem .75rem; font-size: .8rem; color: var(--rl-text-muted); }
.cs-page__editorBtns { display: flex; gap: .4rem; }
.cs-page__count--over { color: var(--rl-danger); font-weight: 600; }
.cs-page__editor .cs-error { margin: 0 .5rem .5rem; }
@media (max-width: 860px) {
    .cs-page--editing .cs-page__body { flex-direction: column; }
    .cs-page__editor { flex: 0 0 50%; border-right: 0; border-bottom: 1px solid var(--rl-border); }
}
.kb__crumbBtn { background: none; border: 0; padding: 0; font: inherit; color: var(--rl-text-muted); cursor: pointer; }
.kb__crumbBtn:hover { color: var(--rl-accent); text-decoration: underline; }
button.kb-card__sub { width: 100%; border: 0; font-family: inherit; cursor: pointer; text-align: left; }

/* ---- AI personalities ---------------------------------------------------------------------------------- */
.cs-badge--ai { background: var(--rl-accent); color: #fff; }
.cs-msg__ai { margin-left: .4rem; padding: 0 .35rem; border-radius: 4px; font-size: .62rem; font-weight: 700; letter-spacing: .04em; background: var(--rl-accent); color: #fff; vertical-align: middle; }
.cs-typing { display: flex; align-items: center; gap: .45rem; margin: 0 1.25rem .25rem; font-size: .8rem; color: var(--rl-text-muted); min-height: 1.1rem; animation: cs-fade var(--rl-dur) ease-out both; }
.cs-typing__dots { display: inline-flex; gap: .2rem; }
.cs-typing__dots i { width: .35rem; height: .35rem; border-radius: 50%; background: var(--rl-text-muted); animation: cs-dot 1.2s ease-in-out infinite; }
.cs-typing__dots i:nth-child(2) { animation-delay: .15s; }
.cs-typing__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes cs-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }
.cs-member--ai .cs-member__name { font-style: italic; }
.vs__ai { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem .75rem; border-top: 1px solid var(--rl-border); background: var(--rl-surface); font-size: .88rem; }
.vs__ai .btn { padding: .25rem .65rem; font-size: .85rem; }

/* ---- motion ---------------------------------------------------------------------------------------------- */
@keyframes cs-fade { from { opacity: 0; } }
@keyframes cs-rise { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes cs-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes cs-msg-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes cs-slide-left { from { transform: translateX(-100%); } }
@keyframes cs-slide-right { from { transform: translateX(100%); } }

/* ---- narrower screens -----------------------------------------------------------------------------------
   Three layouts. Wide: rail, channels, conversation and (if asked for) a members column. Mid: the members list is a
   sheet from the right instead. Narrow: the rail and channels are a drawer from the left behind the burger too.

   The thresholds are on the viewport, but what matters is the room RipCord itself has, and the app sidebar takes
   17rem of that while it is open - so each threshold is written twice, once as is and once 17rem (272px) further out
   for when the sidebar is open. Container queries would say this in one line, but they would also make .cs the
   containing block of every fixed-position dialog inside it, and the boards and games open those. */

/* The members column only exists on a wide screen; on anything narrower the same flag means the opposite (see
   ServerPage: true is "closed", so the first tap opens the sheet). */
.cs:not(.cs--members) > .cs__members { display: none; }

@media (max-width: 1100px) {
    .cs--members { grid-template-columns: 4.5rem 15.5rem minmax(0, 1fr); }
    .cs--members > .cs__members { display: none; }
    .cs:not(.cs--members) > .cs__members { display: block; position: absolute; top: 0; right: 0; bottom: 0; z-index: 20; width: min(16rem, 85%); box-shadow: -8px 0 24px rgba(0, 0, 0, .25); animation: cs-slide-right .22s var(--rl-ease) both; }
    .cs:not(.cs--members) > .cs__scrim { display: block; }
}
@media (max-width: 1372px) {
    :root:not([data-sidebar="collapsed"]) .cs--members { grid-template-columns: 4.5rem 15.5rem minmax(0, 1fr); }
    :root:not([data-sidebar="collapsed"]) .cs--members > .cs__members { display: none; }
    :root:not([data-sidebar="collapsed"]) .cs:not(.cs--members) > .cs__members { display: block; position: absolute; top: 0; right: 0; bottom: 0; z-index: 20; width: min(16rem, 85%); box-shadow: -8px 0 24px rgba(0, 0, 0, .25); animation: cs-slide-right .22s var(--rl-ease) both; }
    :root:not([data-sidebar="collapsed"]) .cs:not(.cs--members) > .cs__scrim { display: block; }
}

@media (max-width: 780px) {
    .cs, .cs--members { grid-template-columns: minmax(0, 1fr); }
    .cs__rail, .cs__side { display: none; }
    .cs--side .cs__rail, .cs--side .cs__side { display: flex; position: absolute; top: 0; bottom: 0; z-index: 21; animation: cs-slide-left .22s var(--rl-ease) both; }
    .cs--side .cs__rail { left: 0; width: 4.5rem; }
    .cs--side .cs__side { left: 4.5rem; width: min(17rem, calc(100% - 4.5rem)); box-shadow: 8px 0 24px rgba(0, 0, 0, .25); }
    .cs--side > .cs__scrim { display: block; }
    .cs__burger { display: inline-flex; }
    .cs__topic { display: none; }
    .cs-msgs { padding-inline: .75rem; }
    .cs-composer, .cs-hint, .cs-pending, .cs-typing { margin-inline: .75rem; }
    .vs__bar .cs-ctl { flex: 1 1 8rem; }
}
@media (max-width: 1052px) {
    :root:not([data-sidebar="collapsed"]) .cs, :root:not([data-sidebar="collapsed"]) .cs--members { grid-template-columns: minmax(0, 1fr); }
    :root:not([data-sidebar="collapsed"]) .cs__rail, :root:not([data-sidebar="collapsed"]) .cs__side { display: none; }
    :root:not([data-sidebar="collapsed"]) .cs--side .cs__rail, :root:not([data-sidebar="collapsed"]) .cs--side .cs__side { display: flex; position: absolute; top: 0; bottom: 0; z-index: 21; animation: cs-slide-left .22s var(--rl-ease) both; }
    :root:not([data-sidebar="collapsed"]) .cs--side .cs__rail { left: 0; width: 4.5rem; }
    :root:not([data-sidebar="collapsed"]) .cs--side .cs__side { left: 4.5rem; width: min(17rem, calc(100% - 4.5rem)); box-shadow: 8px 0 24px rgba(0, 0, 0, .25); }
    :root:not([data-sidebar="collapsed"]) .cs--side > .cs__scrim { display: block; }
    :root:not([data-sidebar="collapsed"]) .cs__burger { display: inline-flex; }
    :root:not([data-sidebar="collapsed"]) .cs__topic { display: none; }
    :root:not([data-sidebar="collapsed"]) .cs-msgs { padding-inline: .75rem; }
    :root:not([data-sidebar="collapsed"]) :is(.cs-composer, .cs-hint, .cs-pending, .cs-typing) { margin-inline: .75rem; }
    :root:not([data-sidebar="collapsed"]) .vs__bar .cs-ctl { flex: 1 1 8rem; }
}

/* A phone proper: tighter header, smaller avatars, no keyboard hint. */
@media (max-width: 480px) {
    .cs__head { padding: .5rem .6rem; gap: .4rem; }
    .cs__title { font-size: .98rem; }
    .cs-msg { grid-template-columns: 2.1rem 1fr; column-gap: .55rem; }
    .cs-msg > .cs-avwrap, .cs-msg > .cs-msg__avatar { width: 2.1rem; height: 2.1rem; }
    .cs-msg__avatar { font-size: .85rem; }
    .cs-hint { display: none; }
    .cs-composer { border-radius: 12px; }
    .cs-att__img { max-width: 100%; max-height: 16rem; }
    .cs-picker { right: .75rem; }
}

/* ---- profiles, pictures, roles ---------------------------------------------------------------------------
   Pages/Servers: ChatAvatar, UserCard, ProfileCardBody, ProfilePage, ImagePicker, RolesEditor. */

.cs-avatar--img { overflow: hidden; }
.cs-avatar--img img, .cs-icon--pic img,
.cs-avatar--img video, .cs-icon--pic video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A banner that is a clip: the video fills the same box the background-image would have, and the box clips it. */
.cs__banner, .cs-pcard__banner { position: relative; overflow: hidden; }
.cs-banner__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.cs-avatar--click { cursor: pointer; }
.cs-avatar--click:hover { filter: brightness(1.1); }
/* The picture takes the icon's radius itself rather than the icon clipping, so the rail pill and the unread badge -
   both of which hang outside the circle - stay visible on a server with its own icon. */
.cs-icon--pic { background-color: transparent; }
.cs-icon--pic img, .cs-icon--pic video { border-radius: inherit; transition: border-radius var(--rl-dur) var(--rl-ease); }

.cs__banner { height: 6.5rem; flex: none; background-size: cover; background-position: center; background-color: var(--rl-surface-sunken); }
.cs__meCard { display: flex; align-items: center; gap: .5rem; min-width: 0; flex: 1; color: inherit; text-decoration: none; border-radius: 8px; padding: .1rem .2rem; }
.cs__meCard:hover { background: var(--rl-surface-sunken); }
.cs__titleBtn, .cs-msg__name { border: 0; background: none; padding: 0; margin: 0; font: inherit; font-weight: 700; color: inherit; cursor: pointer; text-align: left; }
.cs__titleBtn:hover, .cs-msg__name:hover { text-decoration: underline; }
.cs-member__who { display: flex; align-items: center; gap: .55rem; flex: 1; min-width: 0; border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.cs-member__who .cs-member__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the profile card */
.cs-modal--card { align-items: center; }
.cs-modal__box--card { position: relative; width: min(24rem, 100%); overflow-y: auto; }
.cs-card__x { position: absolute; top: .5rem; right: .5rem; z-index: 2; background: rgba(0, 0, 0, .45); color: #fff; border-radius: 50%; }
.cs-pcard { border-radius: var(--rl-radius); overflow: hidden; background: var(--rl-surface); }
.cs-pcard__banner { height: 6.5rem; background-size: cover; background-position: center; }
.cs-pcard__top { margin-top: -2.6rem; padding: 0 1rem; position: relative; }
.cs-pcard__avatar { display: inline-flex; align-items: center; justify-content: center; width: 5.2rem; height: 5.2rem; border-radius: 50%; border: 4px solid var(--rl-surface); color: #fff; font-size: 1.9rem; font-weight: 700; overflow: hidden; }
.cs-pcard__body { padding: .4rem 1rem 1rem; }
.cs-pcard__name { margin: 0; font-size: 1.25rem; overflow-wrap: anywhere; }
.cs-pcard__real { margin: 0; color: var(--rl-text-muted); font-size: .85rem; }
.cs-pcard__tagline { margin: .25rem 0 0; color: var(--rl-text-muted); overflow-wrap: anywhere; }
.cs-pcard__label { margin: .85rem 0 .25rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--rl-text-muted); }
.cs-pcard__bio { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; }
.cs-pcard__none { margin: 0; color: var(--rl-text-muted); font-size: .85rem; }
.cs-pcard__dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0 1rem; font-size: .88rem; }
.cs-pcard__roles { display: flex; flex-wrap: wrap; gap: .35rem; }
.cs-card__actions { margin-top: .9rem; }
.cs-pcard .cs-actions { margin: .75rem 0 0; }

.cs-role { display: inline-flex; align-items: center; gap: .35rem; padding: .12rem .5rem; border-radius: 999px; border: 1px solid var(--rl-border); background: var(--rl-surface-raised); color: var(--rl-text); font-size: .78rem; line-height: 1.4; }
.cs-role i { width: .65rem; height: .65rem; border-radius: 50%; flex: none; }
.cs-role--tier { font-weight: 700; }
.cs-role--toggle { cursor: pointer; font-family: inherit; }
.cs-role--toggle:hover:not(:disabled) { border-color: var(--rl-accent); }
.cs-role--on { border-color: var(--rl-accent); background: color-mix(in srgb, var(--rl-accent) 14%, transparent); }
.cs-role__x { border: 0; background: none; color: var(--rl-text-muted); cursor: pointer; padding: 0 .1rem; font-size: .75rem; }
.cs-role__x:hover { color: var(--rl-danger); }
.cs-role__add { padding: .25rem .4rem; border-radius: 8px; border: 1px solid var(--rl-border); background: var(--rl-surface); color: var(--rl-text); font-size: .8rem; }
.cs-member .cs-role { margin-left: .3rem; }

/* choosing a picture */
.cs-pick { display: flex; align-items: center; gap: 1rem; margin: .75rem 0; }
.cs-pick__preview { flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--rl-surface-sunken); color: var(--rl-text-muted); border: 1px solid var(--rl-border); font-weight: 700; }
.cs-pick__preview img, .cs-pick__preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-pick--round .cs-pick__preview { width: 4.5rem; height: 4.5rem; border-radius: 50%; font-size: 1.6rem; }
.cs-pick--wide .cs-pick__preview { width: 12rem; height: 4rem; border-radius: 10px; font-size: .8rem; }
.cs-pick__side { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cs-pick__side small { color: var(--rl-text-muted); }
.cs-pick__btns { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .25rem; }
.cs-pick__file { display: none; }
.cs-pick .cs-error { margin: .25rem 0 0; }

/* the profile page */
.cs-profile { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 1.25rem; align-items: start; }
.cs-profile__preview h2 { font-size: 1rem; margin: 0 0 .5rem; }
.cs-profile__preview .cs-pcard { border: 1px solid var(--rl-border); box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.cs-profile__form textarea { width: 100%; resize: vertical; }
@media (max-width: 60rem) { .cs-profile { grid-template-columns: minmax(0, 1fr); } }

/* the roles editor */
.cs-roles { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }
.cs-roles__list { display: flex; flex-direction: column; gap: .2rem; }
.cs-roles__item { display: flex; align-items: center; gap: .5rem; border: 0; border-radius: 8px; background: none; color: var(--rl-text); padding: .4rem .55rem; cursor: pointer; text-align: left; font: inherit; }
.cs-roles__item i { width: .8rem; height: .8rem; border-radius: 50%; flex: none; }
.cs-roles__item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-roles__item small { color: var(--rl-text-muted); }
.cs-roles__item:hover { background: var(--rl-surface-sunken); }
.cs-roles__item--on { background: var(--rl-surface-sunken); font-weight: 700; }
.cs-roles__item--everyone { margin-top: .5rem; border-top: 1px solid var(--rl-border); border-radius: 0 0 8px 8px; }
.cs-roles__list .btn { margin-bottom: .4rem; }
.cs-roles__color { display: flex; align-items: center; gap: .5rem; }
.cs-roles__edit .field input:not([type="color"]) { width: 100%; }
.cs-perms { display: flex; flex-direction: column; gap: .1rem; }
.cs-perm { display: flex; align-items: flex-start; gap: .6rem; padding: .35rem .25rem; border-radius: 8px; cursor: pointer; }
.cs-perm:hover { background: var(--rl-surface-sunken); }
.cs-perm span { display: flex; flex-direction: column; }
.cs-perm small { color: var(--rl-text-muted); }
.cs-perm--locked { opacity: .55; cursor: not-allowed; }
@media (max-width: 40rem) { .cs-roles { grid-template-columns: minmax(0, 1fr); } }

/* ---- soundboard and the quick creator ---------------------------------------------------------------------- */
.cs-modal[hidden] { display: none; }
.cs__meGear--on { color: var(--rl-accent); background: var(--rl-surface-raised); }
.sb__tabs { display: flex; align-items: center; gap: .25rem; border-bottom: 1px solid var(--rl-border); margin-bottom: .6rem; flex-wrap: wrap; }
.sb__count { margin-left: .3rem; padding: 0 .4rem; border-radius: 999px; background: var(--rl-surface-sunken); font-size: .72rem; color: var(--rl-text-muted); }
.sb__bar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin: .2rem 0 .8rem; font-size: .85rem; }
.sb__vol { display: inline-flex; align-items: center; gap: .4rem; }
.sb__vol input { width: 7.5rem; }
.sb__mute { margin: 0; }
.sb__mode { margin-left: auto; color: var(--rl-text-muted); }
.sb__mode--live { color: var(--rl-ok); font-weight: 600; }
.sb__empty { padding: 1rem 0; }
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.6rem, 1fr)); gap: .5rem; }
.sb-tile { position: relative; }
.sb-tile__play { width: 100%; min-height: 5.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; padding: .6rem .4rem; border: 1px solid var(--rl-border); border-radius: 12px; background: var(--rl-surface-sunken); color: var(--rl-text); cursor: pointer; transition: transform .06s, background .12s; }
.sb-tile__play:hover { background: var(--rl-surface-raised); }
.sb-tile__play:active { transform: scale(.96); }
.sb-tile--on .sb-tile__play { border-color: var(--rl-accent); background: color-mix(in srgb, var(--rl-accent) 16%, var(--rl-surface)); }
.sb-tile__emoji { font-size: 1.6rem; line-height: 1; }
.sb-tile__name { font-size: .82rem; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-tile__len { font-size: .68rem; color: var(--rl-text-muted); }
.sb-tile__more { position: absolute; top: .15rem; right: .15rem; border: 0; background: none; color: var(--rl-text-muted); cursor: pointer; border-radius: 6px; padding: 0 .3rem; line-height: 1.4; opacity: .55; }
.sb-tile__more:hover, .sb-tile:hover .sb-tile__more, .sb-tile__more:focus-visible { opacity: 1; background: var(--rl-surface); }
.sb-edit { margin-top: .8rem; padding: .8rem; border: 1px solid var(--rl-border); border-radius: var(--rl-radius); background: var(--rl-surface-sunken); }
.sb-edit__emoji { display: flex; flex-wrap: wrap; gap: .25rem; margin: .3rem 0 .6rem; }
.sb-pick { border: 1px solid transparent; background: var(--rl-surface); border-radius: 8px; padding: .15rem .35rem; font-size: 1.1rem; cursor: pointer; }
.sb-pick:hover { border-color: var(--rl-border); }
.sb-add { margin-top: 1.1rem; padding-top: .8rem; border-top: 1px solid var(--rl-border); }
.sb-toasts { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: .3rem; pointer-events: none; }
.sb-toast { padding: .4rem .8rem; border-radius: 999px; background: rgba(20, 20, 24, .88); color: #fff; font-size: .85rem; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); animation: sb-in .18s ease-out; }
@keyframes sb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.qc textarea { width: 100%; }
.qc-out { display: grid; gap: .8rem; margin-top: 1rem; }
.qc-piece { margin: 0; padding: .7rem; border: 1px solid var(--rl-border); border-radius: var(--rl-radius); background: var(--rl-surface-sunken); }
.qc-piece img { display: block; max-width: 100%; max-height: 22rem; margin: 0 auto .6rem; border-radius: 10px; }
.qc-piece audio { width: 100%; margin-bottom: .5rem; }

/* ---- the skeleton: a server page before the server is known ---------------------------------------------
   Same grid as the page, filled with shimmering blocks. Drawn only for a server this session has not opened
   yet; one it has is drawn from memory and read again behind it. The members column stays in the grid at
   every width that would show it, and hides with the same rules as the real one. */
.cs-skel { pointer-events: none; animation: cs-fade .2s ease-out both; }
.cs-skel .cs__rail { gap: .8rem; }
.cs-skel .cs__sideHead, .cs-skel .cs__head { min-height: 3.2rem; }
.cs-skel__list { display: flex; flex-direction: column; gap: .7rem; padding: .9rem .9rem; }
.cs-skel .cs__side .cs-skel__list { flex: 1; }
.cs-skel__block {
    display: block; border-radius: 6px;
    background: linear-gradient(100deg, var(--rl-surface-sunken) 30%, color-mix(in srgb, var(--rl-text) 9%, var(--rl-surface-sunken)) 50%, var(--rl-surface-sunken) 70%);
    background-size: 240% 100%; animation: cs-shimmer 1.6s ease-in-out infinite;
}
.cs-skel__line { height: .8rem; }
.cs-skel__line--sm { height: .65rem; }
.cs-skel__circle { width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: none; }
.cs-skel__circle--lg { width: 3rem; height: 3rem; border-radius: 16px; }
.cs-skel__circle--sm { width: 1.6rem; height: 1.6rem; }
.cs-skel__msgs { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 1.1rem; padding: 1rem 1.25rem .5rem; overflow: hidden; }
.cs-skel__msg { display: grid; grid-template-columns: 2.4rem 1fr; grid-template-rows: auto auto; column-gap: .75rem; row-gap: .45rem; align-items: center; }
.cs-skel__msg .cs-skel__circle { grid-row: 1 / span 2; }
.cs-skel__member { display: flex; align-items: center; gap: .55rem; }
.cs-skel__composer { padding: 0 1.25rem 1rem; }
.cs-skel__field { height: 3rem; border-radius: 14px; }
.cs-skel .cs__members .cs-skel__list { gap: .9rem; padding: .5rem .5rem; }
@keyframes cs-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -40% 0; } }
/* The skeleton's rows come up one after another. */
.cs-skel__msg:nth-child(1) { animation: cs-rise .3s var(--rl-ease) both; }
.cs-skel__msg:nth-child(2) { animation: cs-rise .3s var(--rl-ease) .04s both; }
.cs-skel__msg:nth-child(3) { animation: cs-rise .3s var(--rl-ease) .08s both; }
.cs-skel__msg:nth-child(4) { animation: cs-rise .3s var(--rl-ease) .12s both; }
.cs-skel__msg:nth-child(5) { animation: cs-rise .3s var(--rl-ease) .16s both; }
/* The dots in a channel that is being read for the first time sit in the middle of the pane, not at its top. */
.cs-msgs > .busy--fill { min-height: 100%; }
/* ---- webhooks and embeds -------------------------------------------------------------------------------------
   A webhook post is signed APP, the way an AI post is signed AI. An embed card is Discord's shape: a coloured bar down
   the left (the embed's own colour, or the accent), author, title, description, fields, picture, footer. ---- */
.cs-msg__app { background: #5865f2; }
.cs-msg__embeds { grid-column: 2; display: flex; flex-direction: column; gap: .35rem; margin-top: .3rem; min-width: 0; }
.cs-msg--grouped .cs-msg__embeds { grid-row: auto; }
.cs-embed { --embed-color: var(--rl-accent); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; max-width: 36rem; padding: .6rem .85rem .6rem 1rem; border-radius: 8px; background: var(--rl-surface-raised); border: 1px solid var(--rl-border); font-size: .88rem; line-height: 1.4; }
.cs-embed::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 8px 0 0 8px; background: var(--embed-color); }
.cs-embed__main { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.cs-embed__author { display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; }
.cs-embed__author a { color: inherit; }
.cs-embed__icon { width: 1.25rem; height: 1.25rem; border-radius: 50%; object-fit: cover; flex: none; }
.cs-embed__title { font-weight: 700; color: var(--rl-text); overflow-wrap: anywhere; }
a.cs-embed__title { color: var(--rl-link, #7aa2ff); text-decoration: none; }
a.cs-embed__title:hover { text-decoration: underline; }
.cs-embed__desc, .cs-embed__fvalue { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--rl-text); }
.cs-embed__desc code, .cs-embed__fvalue code { font-size: .82em; padding: .05rem .3rem; border-radius: 4px; background: var(--rl-surface-sunken); }
.cs-embed__fvalue { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.cs-embed__action {
    display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
    padding: .35rem .75rem; border-radius: 8px; border: 1px solid var(--rl-border);
    background: var(--rl-surface-raised); color: var(--rl-text); font: inherit; font-size: .85rem; font-weight: 600;
    text-decoration: none; line-height: 1.2; transition: border-color .12s, background .12s, color .12s;
}
.cs-embed__action:hover { border-color: var(--rl-accent); color: var(--rl-accent); text-decoration: none; }
.cs-embed__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem .75rem; }
.cs-embed__field { grid-column: 1 / -1; min-width: 0; }
.cs-embed__field--inline { grid-column: span 1; }
.cs-embed__fname { font-size: .78rem; font-weight: 700; color: var(--rl-text-muted); margin-bottom: .1rem; }
.cs-embed__image img { display: block; max-width: 100%; max-height: 20rem; border-radius: 6px; margin-top: .2rem; }
.cs-embed__thumb img { display: block; width: 5rem; height: 5rem; object-fit: cover; border-radius: 6px; }
.cs-embed__footer { display: flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--rl-text-muted); margin-top: .1rem; }
.cs-embed__footer .cs-embed__icon { width: 1rem; height: 1rem; }
.cs-hook { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .75rem; align-items: center; padding: .5rem .6rem; border: 1px solid var(--rl-border); border-radius: 8px; background: var(--rl-surface-raised); }
.cs-hook__url { grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem; min-width: 0; }
.cs-hook__url code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.cs-hook--off { opacity: .6; }
.cs-hook__meta { font-size: .78rem; color: var(--rl-text-muted); }

/* ---- status, server tags, voice in the member list --------------------------------------------------------
   The dot sits on the avatar's corner like Discord's: green here, yellow idle, red do-not-disturb, grey away. A tag is
   the server's letters on its colour; the voice line says which room the person is in. ---- */
.cs-avwrap { position: relative; flex: none; }
.cs-dot { position: absolute; right: -2px; bottom: -2px; width: .6rem; height: .6rem; border-radius: 50%; border: 2px solid var(--rl-surface-raised); background: #80848e; }
.cs-dot--online { background: #23a55a; }
.cs-dot--idle { background: #f0b232; }
.cs-dot--dnd { background: #f23f43; }
.cs-dot--idle::after { content: ""; position: absolute; left: -2px; top: -2px; width: .45rem; height: .45rem; border-radius: 50%; background: var(--rl-surface-raised); }
.cs-dot--dnd::after { content: ""; position: absolute; left: 1px; right: 1px; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--rl-surface-raised); }
.cs-member__text { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: .05rem; }
.cs-member__line { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.cs-member__sub { font-size: .72rem; color: var(--rl-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.cs-member__sub--voice { color: #23a55a; }
.cs-member--off .cs-member__sub--voice { color: var(--rl-text-muted); }
.cs-member__sub--game { display: inline-flex; align-items: center; gap: .3rem; color: var(--rl-text); }
.cs-member__game { width: .9rem; height: .9rem; border-radius: 3px; object-fit: cover; flex: none; }
.cs-tag { flex: none; display: inline-flex; align-items: center; gap: .2rem; padding: 0 .3rem; border-radius: 4px; font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--tag-color, var(--rl-accent)); line-height: 1.3; }
.cs-tag::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.cs-member .cs-badge { margin-left: 0; }
.cs__membersBar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .25rem .5rem .1rem; }
.cs__membersBar .btn { font-size: .78rem; padding: .25rem .55rem; }
.cs-invite { display: flex; flex-direction: column; gap: .25rem; margin: .25rem .3rem .6rem; padding: .4rem; border: 1px solid var(--rl-border); border-radius: 8px; background: var(--rl-surface); }
.cs-invite__row { display: flex; align-items: center; gap: .5rem; padding: .2rem .3rem; font-size: .85rem; border-radius: 6px; }
.cs-invite__row:hover { background: var(--rl-surface-sunken); }
.cs-invite__row .btn { margin-left: auto; font-size: .75rem; padding: .15rem .5rem; }
.cs-invite__empty { font-size: .8rem; color: var(--rl-text-muted); padding: .2rem .3rem; }
.cs-status__pick { display: flex; flex-wrap: wrap; gap: .4rem; }
.cs-status__opt { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .6rem; border: 1px solid var(--rl-border); border-radius: 999px; background: var(--rl-surface); cursor: pointer; font: inherit; color: inherit; }
.cs-status__opt--on { border-color: var(--rl-accent); background: var(--rl-surface-sunken); }
.cs-status__opt .cs-dot { position: static; border-width: 0; width: .65rem; height: .65rem; }.cs-pcard__name .cs-tag { vertical-align: middle; margin-left: .35rem; font-size: .6rem; }
.cs-pcard__status { margin: 0 0 .2rem; font-size: .85rem; color: var(--rl-text); }
.cs-pcard__playing { margin: 0 0 .3rem; display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--rl-text); }
.cs-pcard__gamelogo { width: 1.4rem; height: 1.4rem; border-radius: 5px; object-fit: cover; flex: none; }
/* ---- the channel guard: one channel's failure, drawn in its place -------------------------------------------- */
.cs-guard { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 2rem; text-align: center; color: var(--rl-text-muted); }
.cs-guard__title { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--rl-text); }
.cs-guard__why { margin: 0 0 .5rem; max-width: 36rem; }
/* ---- the pet pen: a yard of everyone's pets, and the people beside it ------------------------------------------ */
.pen { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 15rem; background: var(--rl-surface); }
.pen__yard { position: relative; min-width: 0; min-height: 16rem; overflow: hidden; --pen-sky: color-mix(in srgb, var(--rl-surface) 70%, #9fc6ea); --pen-sky-2: var(--rl-surface); --pen-grass: #9ccc7a; --pen-grass-2: #74ab5b; --pen-fence: color-mix(in srgb, var(--rl-text) 35%, transparent); --pen-ink: var(--rl-text); --pen-ink-soft: var(--rl-text-muted); }
.pen__canvas { display: block; position: absolute; inset: 0; cursor: pointer; touch-action: manipulation; }
.pen__empty { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); margin: 0; max-width: 26rem; padding: .8rem 1rem; text-align: center; color: var(--rl-text-muted); background: color-mix(in srgb, var(--rl-surface) 85%, transparent); border: 1px solid var(--rl-border); border-radius: var(--rl-radius); pointer-events: none; }
.pen__card { position: absolute; transform: translate(-50%, -100%); min-width: 14rem; max-width: 18rem; padding: .6rem .75rem; background: var(--rl-surface-raised); border: 1px solid var(--rl-border); border-radius: var(--rl-radius); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); z-index: 2; }
.pen__card::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); background: inherit; border-right: 1px solid var(--rl-border); border-bottom: 1px solid var(--rl-border); }
.pen__cardName { margin: 0 0 .15rem; font-weight: 700; }
.pen__cardName small { display: block; font-weight: 400; color: var(--rl-text-muted); }
.pen__cardMeters { margin: 0 0 .5rem; font-size: .8rem; color: var(--rl-text-muted); }
.pen__cardBtns { display: flex; flex-wrap: wrap; gap: .35rem; }
.pen__cardNotice { margin: .45rem 0 0; font-size: .8rem; color: var(--rl-text-muted); }
.pen__side { display: flex; flex-direction: column; gap: .35rem; min-height: 0; overflow: auto; padding: .8rem .9rem; border-left: 1px solid var(--rl-border); background: var(--rl-surface-raised); }
.pen__h { margin: .2rem 0 .3rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--rl-text-muted); }
.pen__who, .pen__log { list-style: none; margin: 0; padding: 0; }
.pen__visitor { display: flex; align-items: center; gap: .55rem; padding: .3rem 0; }
.pen__visitorPet { width: 1.6rem; text-align: center; font-size: 1.1rem; }
.pen__visitorText { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.pen__visitorText small { color: var(--rl-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pen__hint { margin: .5rem 0 .6rem; font-size: .8rem; color: var(--rl-text-muted); }
.pen__log li { padding: .2rem 0; font-size: .82rem; color: var(--rl-text-muted); border-top: 1px solid var(--rl-border); }
.pen__log li:first-child { color: var(--rl-text); border-top: 0; }
@media (max-width: 900px) {
    .pen { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(14rem, 1fr) auto; }
    .pen__side { border-left: 0; border-top: 1px solid var(--rl-border); max-height: 12rem; }
}

/* ---- lightbox: a picture over a blurred page (js/lightbox.js) ---------------------------------------------- */
html.lbx-open { overflow: hidden; }
.lbx { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center;
       width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; padding: 0; border: 0; overflow: hidden;
       background: rgba(8, 8, 12, .72); backdrop-filter: blur(10px) saturate(.8); -webkit-backdrop-filter: blur(10px) saturate(.8); outline: none; }
.lbx.is-open, dialog.lbx[open] { display: flex; animation: lbx-in .14s ease-out; }
dialog.lbx::backdrop { background: rgba(8, 8, 12, .55); }
@keyframes lbx-in { from { opacity: 0; } to { opacity: 1; } }
.lbx__stage { position: absolute; inset: 3.5rem 4.5rem 4rem; display: flex; align-items: center; justify-content: center; }
.lbx__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: .4rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .55);
            background: repeating-conic-gradient(#2a2a30 0% 25%, #33333a 0% 50%) 50% / 1rem 1rem; }
.lbx__bar { position: absolute; left: 0; right: 0; bottom: 1rem; display: flex; gap: 1rem; align-items: center; justify-content: center;
            font-size: .9rem; color: #ddd; }
.lbx__name { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-weight: 600; }
.lbx__link { color: #cfd3ff; text-decoration: none; }
.lbx__link:hover { text-decoration: underline; }
.lbx__close { position: absolute; top: 1rem; right: 1rem; }
.lbx__close, .lbx__nav { border: 0; border-radius: 50%; width: 2.6rem; height: 2.6rem; background: rgba(255, 255, 255, .1); color: #fff;
                         font-size: 1.2rem; line-height: 1; cursor: pointer; }
.lbx__close:hover, .lbx__nav:hover { background: rgba(255, 255, 255, .22); }
.lbx__nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 1.8rem; }
.lbx__nav--prev { left: 1rem; }
.lbx__nav--next { right: 1rem; }
.lbx__nav[hidden] { display: none; }
.lbx__text {
    width: min(100%, 64rem); max-height: 100%; height: 100%; margin: 0; overflow: auto; padding: 1.25rem 1.5rem;
    border-radius: .4rem; background: #16161c; color: #e8e8ee; font: 0.92rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .55);
}
.lbx__mesh { width: min(100%, 70rem); height: 100%; max-height: 100%; background: transparent; }
.lbx__audio { width: min(100%, 36rem); }
@media (max-width: 700px) { .lbx__stage { inset: 3.5rem .5rem 4rem; } .lbx__nav { top: auto; bottom: 3.5rem; transform: none; } }

/* ---- the composer's + menu (ComposerPlusMenu) ---------------------------------------------------------------- */
.cs-plus__backdrop { position: fixed; inset: 0; z-index: 30; border: 0; background: none; cursor: default; }
.cs-plus { position: absolute; left: .25rem; bottom: calc(100% + .4rem); z-index: 31; width: min(19rem, calc(100vw - 2rem)); max-height: min(28rem, 70vh);
           overflow-y: auto; padding: .35rem; border: 1px solid var(--rl-border); border-radius: 12px; background: var(--rl-surface);
           box-shadow: 0 12px 32px rgba(0, 0, 0, .3); animation: cs-rise .14s var(--rl-ease) both; }
.cs-plus__item { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: 8px; background: none;
                 color: var(--rl-text); font: inherit; font-size: .92rem; text-align: left; cursor: pointer; }
.cs-plus__item:hover, .cs-plus__item:focus-visible { background: var(--rl-surface-sunken); outline: none; }
.cs-plus__item > span:not(.cs-plus__icon):not(.cs-plus__more) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-plus__item small { color: var(--rl-text-muted); font-size: .78rem; }
.cs-plus__icon { width: 1.4rem; text-align: center; font-size: 1.05rem; }
.cs-plus__more { margin-left: auto; color: var(--rl-text-muted); }
.cs-plus__rule { margin: .3rem .2rem; border: 0; border-top: 1px solid var(--rl-border); }
.cs-plus__back { border: 0; background: none; color: var(--rl-text-muted); font: inherit; font-size: .85rem; padding: .3rem .5rem; cursor: pointer; }
.cs-plus__back:hover { color: var(--rl-text); }
.cs-plus__head { margin: .1rem .6rem .3rem; font-weight: 700; font-size: .95rem; }
.cs-plus__sub { margin: .55rem .6rem .15rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--rl-text-muted); }
.cs-plus__none { margin: .2rem .6rem .4rem; font-size: .85rem; color: var(--rl-text-muted); }

/* ---- sketch dialog ------------------------------------------------------------------------------------------- */
.cs-modal__box.cs-sketch { width: min(62rem, 100%); outline: none; }
.cs-sketch__tools { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .6rem 1.1rem; border-bottom: 1px solid var(--rl-border); }
.cs-sketch__swatch { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--rl-border); background: var(--swatch); cursor: pointer; padding: 0; }
.cs-sketch__swatch[aria-pressed="true"] { outline: 2px solid var(--rl-accent); outline-offset: 2px; }
.cs-sketch__custom input { width: 1.9rem; height: 1.9rem; padding: 0; border: 0; background: none; cursor: pointer; }
.cs-sketch__size { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--rl-border);
                   border-radius: 8px; background: var(--rl-surface); cursor: pointer; }
.cs-sketch__size i { display: block; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--rl-text); }
.cs-sketch__size[aria-pressed="true"], .cs-sketch__tools .btn[aria-pressed="true"] { border-color: var(--rl-accent); background: color-mix(in srgb, var(--rl-accent) 14%, var(--rl-surface)); }
.cs-sketch__sep { width: 1px; height: 1.6rem; margin: 0 .25rem; background: var(--rl-border); }
.cs-sketch__paper { padding: .8rem 1.1rem; overflow: auto; background: var(--rl-surface-sunken); }
.cs-sketch__paper canvas { display: block; width: 100%; height: auto; aspect-ratio: 960 / 600; border-radius: 8px; background: #fff;
                           box-shadow: 0 2px 10px rgba(0, 0, 0, .18); touch-action: none; cursor: crosshair; }
.cs-sketch__foot { display: flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border-top: 1px solid var(--rl-border); }
.cs-sketch__foot small { margin-right: auto; }

/* ---- library picker and shared library items ----------------------------------------------------------------- */
.cs-libpick__filters { display: flex; gap: .5rem; margin-top: .5rem; }
.cs-libpick__filters input { flex: 1; min-width: 0; }
.cs-libpick { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
.cs-libpick__item { display: flex; flex-direction: column; gap: .25rem; width: 100%; padding: .4rem; border: 1px solid var(--rl-border); border-radius: 10px;
                    background: var(--rl-surface-sunken); color: var(--rl-text); font: inherit; text-align: left; cursor: pointer; }
.cs-libpick__item:hover { border-color: var(--rl-accent); }
.cs-libpick__item img, .cs-libpick__glyph { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; object-fit: cover;
                                            border-radius: 6px; background: var(--rl-surface); font-size: 2rem; }
.cs-libpick__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; font-weight: 600; }
.cs-libpick__item small { color: var(--rl-text-muted); font-size: .75rem; }
.cs-att--locked { align-items: center; gap: .6rem; padding: .5rem .75rem; border: 1px dashed var(--rl-border); background: var(--rl-surface-sunken); color: var(--rl-text-muted); }
.cs-att__from { display: block; margin-top: .15rem; font-size: .75rem; color: var(--rl-text-muted); }

/* ---- the server-name menu ------------------------------------------------------------------------------------ */
.cs-srvmenu { position: relative; padding: 0; }
.cs-srvmenu__btn { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-width: 0; padding: .7rem .9rem; border: 0;
                   background: none; color: var(--rl-text); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.cs-srvmenu__btn:hover { background: var(--rl-surface-sunken); }
.cs-srvmenu__panel { position: absolute; left: .4rem; right: .4rem; top: 100%; z-index: 30; margin: .2rem 0 0; max-height: 70vh; overflow-y: auto; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.cs-srvmenu__away { position: fixed; inset: 0; z-index: 29; padding: 0; border: 0; background: transparent; cursor: default; }
.cs-srvmenu__panel hr { width: 100%; margin: .2rem 0; border: 0; border-top: 1px solid var(--rl-border); }
.cs-srvmenu__panel .cs-perm { padding: .35rem .5rem; font-size: .85rem; }
.cs-srvmenu__panel .card__hint { margin: .2rem .5rem; }
.cs-chan--muted { opacity: .5; }

/* ---- forums --------------------------------------------------------------------------------------------------- */
.cs-forum { flex: 1; min-height: 0; overflow-y: auto; padding: .5rem 1rem 1rem; }
.cs-forum--thread { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.cs-forum__rules { text-align: left; margin: .5rem 0; }
.cs-forum__rules summary { cursor: pointer; font-weight: 600; }
.cs-forum__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.cs-forum__tag { padding: .2rem .6rem; border: 1px solid var(--rl-border); border-radius: 99px; background: var(--rl-surface-sunken); color: var(--rl-text-muted); font-size: .8rem; cursor: pointer; }
.cs-forum__tag:hover { color: var(--rl-text); }
.cs-forum__tag--on { border-color: var(--rl-accent); background: var(--rl-accent); color: var(--rl-accent-contrast); }
.cs-forum__compose { margin-top: .75rem; padding: .75rem; border: 1px solid var(--rl-border); border-radius: 10px; background: var(--rl-surface-raised); }
.cs-forum__similar { display: flex; flex-direction: column; margin: -.25rem 0 .5rem; padding: .4rem .6rem; border-radius: 8px; background: var(--rl-surface-sunken); }
.cs-forum__similar .cs-frow { width: 100%; border-left: 0; border-right: 0; border-top: 0; background: none; color: var(--rl-text); font: inherit; text-align: left; cursor: pointer; }
.cs-forum__list { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.cs-forum__post { display: flex; gap: .75rem; padding: .65rem .8rem; border: 1px solid var(--rl-border); border-radius: 10px; background: var(--rl-surface-raised);
                  transition: border-color var(--rl-dur); }
.cs-forum__post:hover { border-color: var(--rl-accent); }
.cs-forum__post--new { border-left: 3px solid var(--rl-accent); }
.cs-forum__open { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding: 0; border: 0; background: none; color: var(--rl-text);
                  font: inherit; text-align: left; cursor: pointer; }
.cs-forum__title { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-weight: 700; }
.cs-forum__title .cs-chan__badge { margin-left: 0; }
.cs-forum__preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--rl-text-muted); font-size: .88rem; }
.cs-forum__meta { color: var(--rl-text-muted); font-size: .78rem; }
.cs-forum__thumb { flex: none; width: 5rem; height: 5rem; border-radius: 8px; object-fit: cover; }
.cs-post__head { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding: .6rem 1rem; border-bottom: 1px solid var(--rl-border); background: var(--rl-surface); }
.cs-post__title { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; font-size: 1.15rem; }
.cs-post__titleEdit { width: 100%; }
.cs-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; color: var(--rl-text-muted); }
.cs-post__tools { display: flex; flex-wrap: wrap; gap: .35rem; }
.cs-post__tools .btn, .cs-post__head > .btn, .cs-post__answer .btn { padding: .25rem .65rem; font-size: .82rem; }
.cs-post__answer { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 1rem 0; padding: .5rem .75rem; border-radius: 8px;
                   border-left: 3px solid var(--rl-ok); background: var(--rl-surface-sunken); font-size: .88rem; }
.cs-post__answer span { flex: 1 1 16rem; min-width: 0; }

/* ---- events ----------------------------------------------------------------------------------------------------- */
.cs-events { flex: 1; min-height: 0; overflow-y: auto; padding: .5rem 1rem 1rem; display: flex; flex-direction: column; gap: .75rem; }
.cs-events .cs-tabs { padding: 0; border-bottom: 0; }
.cs-events__past { margin: .5rem 0 0; font-size: .85rem; color: var(--rl-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.cs-events__form { padding: .75rem; border: 1px solid var(--rl-border); border-radius: 10px; background: var(--rl-surface-raised); }
.cs-event { display: flex; flex-direction: column; max-width: 40rem; overflow: hidden; border: 1px solid var(--rl-border); border-radius: 10px; background: var(--rl-surface-raised); }
.cs-event--open { border-color: var(--rl-accent); }
.cs-event--cancelled { opacity: .65; }
.cs-event__cover { width: 100%; max-height: 14rem; object-fit: cover; display: block; }
.cs-event__body { display: flex; flex-direction: column; gap: .45rem; padding: .7rem .9rem; }
.cs-event__when { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; color: var(--rl-accent); font-size: .85rem; font-weight: 600; }
.cs-event__title { margin: 0; font-size: 1.1rem; }
.cs-event__title .cs-msg__name { font-size: inherit; }
.cs-event__about { font-size: .9rem; }
.cs-event__slots { display: flex; flex-wrap: wrap; gap: .35rem; }
.cs-event__slot { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border: 1px solid var(--rl-border); border-radius: 8px; background: var(--rl-surface-sunken);
                  color: var(--rl-text); font: inherit; font-size: .85rem; cursor: pointer; }
.cs-event__slot:hover:not(:disabled) { border-color: var(--rl-accent); }
.cs-event__slot:disabled { opacity: .6; cursor: default; }
.cs-event__slot--on { border-color: var(--rl-accent); background: var(--rl-accent); color: var(--rl-accent-contrast); }
.cs-event__who { margin: 0; padding-left: 1.1rem; font-size: .85rem; color: var(--rl-text-muted); }
.cs-event__where { display: flex; flex-wrap: wrap; align-items: center; color: var(--rl-text-muted); font-size: .85rem; }
.cs-event__where strong { color: var(--rl-text); }
.cs-event__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.cs-event__actions .btn { padding: .3rem .7rem; font-size: .85rem; }
.cs-event__actions small { color: var(--rl-text-muted); }
.cs-cal { display: flex; flex-direction: column; gap: .5rem; }
.cs-cal__head { display: flex; align-items: center; gap: .5rem; }
.cs-cal__head strong { min-width: 9rem; text-align: center; }
.cs-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--rl-border); border-radius: 10px; background: var(--rl-border); }
.cs-cal__dow { padding: .3rem; background: var(--rl-surface-raised); color: var(--rl-text-muted); font-size: .75rem; font-weight: 700; text-align: center; }
.cs-cal__day { display: flex; flex-direction: column; gap: .15rem; min-height: 5.5rem; padding: .25rem; background: var(--rl-surface); }
.cs-cal__day--out { background: var(--rl-surface-sunken); opacity: .6; }
.cs-cal__day--today .cs-cal__num { background: var(--rl-accent); color: var(--rl-accent-contrast); }
.cs-cal__num { align-self: flex-start; min-width: 1.4rem; padding: 0 .3rem; border-radius: 99px; font-size: .75rem; font-weight: 700; text-align: center; }
.cs-cal__event { overflow: hidden; padding: .1rem .3rem; border: 0; border-radius: 4px; background: color-mix(in srgb, var(--rl-accent) 22%, transparent); color: var(--rl-text);
                 font: inherit; font-size: .72rem; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.cs-cal__event:hover { background: color-mix(in srgb, var(--rl-accent) 40%, transparent); }
@media (max-width: 640px) {
    .cs-cal__day { min-height: 3.5rem; }
    .cs-cal__event { font-size: .65rem; }
}

/* ---- right-click menu (js/ripcord-menu.js) ---------------------------------------------------------------------
   Built on .cs-actions so its rows match the member menu; placed by the script at the pointer and kept on screen. */
.cs-actions.cs-cmenu {
    position: fixed; z-index: 1000; margin: 0; min-width: 13.5rem; max-width: 20rem; padding: .35rem; gap: 1px; border-radius: 10px;
    background: color-mix(in srgb, var(--rl-surface) 94%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: var(--rl-shadow-lg); outline: none; user-select: none;
    opacity: 0; transform: scale(.97) translateY(-3px); transform-origin: top left; transition: opacity .12s ease-out, transform .14s var(--rl-ease-out, ease-out);
}
.cs-actions.cs-cmenu--in { opacity: 1; transform: none; }
.cs-cmenu button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .4rem .55rem; border-radius: 6px; font: inherit; font-size: .86rem; transition: background .08s, color .08s; }
.cs-cmenu button:hover:not(:disabled), .cs-cmenu button:focus-visible { background: var(--rl-accent); color: var(--rl-accent-contrast); outline: none; }
.cs-cmenu button:hover:not(:disabled) .cs-cmenu__hint, .cs-cmenu button:focus-visible .cs-cmenu__hint,
.cs-cmenu button:hover:not(:disabled) .cs-cmenu__icon, .cs-cmenu button:focus-visible .cs-cmenu__icon { color: inherit; opacity: .9; }
.cs-cmenu .cs-actions__danger:hover:not(:disabled), .cs-cmenu .cs-actions__danger:focus-visible { background: var(--rl-danger); color: #fff !important; }
.cs-cmenu__icon { flex: none; width: 1.15rem; text-align: center; color: var(--rl-text-muted); font-size: .95rem; line-height: 1; }
.cs-cmenu__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-cmenu__hint { flex: none; margin-left: .75rem; padding: 0; border: 0; background: none; color: var(--rl-text-muted); font: inherit; font-size: .72rem; letter-spacing: .02em; }
.cs-cmenu__slider { display: flex; flex-direction: column; gap: .35rem; padding: .45rem .7rem .55rem; }
.cs-cmenu__sliderHead { display: flex; align-items: center; gap: .55rem; }
.cs-cmenu__sliderHead .cs-cmenu__hint { margin-left: auto; font-variant-numeric: tabular-nums; }
.cs-cmenu__range { width: 100%; height: .55rem; accent-color: var(--rl-accent); cursor: pointer; }
.cs-cmenu hr { margin: .25rem .4rem; border: 0; border-top: 1px solid var(--rl-border); }
.cs-cmenu__note { margin: .25rem .2rem .1rem; padding: .4rem .55rem; border-radius: 6px; background: var(--rl-surface-sunken); color: var(--rl-text-muted); font-size: .78rem; line-height: 1.35; animation: cs-fade .15s ease-out both; }

/* Shared overlay dialogs (poll, reaction roles, channel edit). Kept tighter than the settings modal. */
.cs-dialog { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; }
.cs-dialog__backdrop { position: absolute; inset: 0; border: 0; padding: 0; margin: 0; background: rgb(8 8 14 / .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); cursor: pointer; }
.cs-dialog__panel {
    position: relative; z-index: 1; width: min(24rem, 100%); max-height: min(90vh, 40rem);
    display: flex; flex-direction: column; border-radius: var(--rl-radius); border: 1px solid var(--rl-border);
    background: var(--rl-surface); box-shadow: var(--rl-shadow-lg); animation: cs-rise .2s var(--rl-ease) both;
}
.cs-dialog__panel--narrow { width: min(22rem, 100%); }
.cs-dialog__panel--wide { width: min(40rem, 100%); max-height: min(92vh, 52rem); }
.cs-dialog__rule { border: 0; border-top: 1px solid var(--rl-border); margin: .35rem 0 .15rem; }
.cs-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--rl-border); flex: none; }
.cs-dialog__head h2 { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.cs-dialog__body { padding: .85rem 1rem; overflow-y: auto; display: flex; flex-direction: column; gap: .65rem; min-height: 0; }
.cs-dialog__body > label:not(.cs-check):not(.cs-perm) { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; font-weight: 600; margin: 0; }
.cs-dialog__body > label:not(.cs-check):not(.cs-perm) > input:not([type=checkbox]):not([type=radio]):not([type=range]),
.cs-dialog__body > label:not(.cs-check):not(.cs-perm) > select,
.cs-dialog__body .field input:not([type=checkbox]):not([type=radio]):not([type=range]),
.cs-dialog__body .field select { width: 100%; max-width: none; box-sizing: border-box; }
.cs-dialog__body .field { margin: 0; max-width: none; }
.cs-dialog__body .cs-check {
    display: flex; flex-direction: row; align-items: flex-start; gap: .55rem;
    font-weight: 500; font-size: .9rem; margin: .15rem 0; max-width: none; cursor: pointer;
}
.cs-dialog__body .cs-check input { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .15rem; }
.cs-dialog__body .cs-check span { display: flex; flex-direction: column; gap: .1rem; font-weight: 500; }
.cs-dialog__foot { display: flex; justify-content: flex-end; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--rl-border); flex: none; }
.cs-poll-dlg .cs-poll-dlg__opts { display: flex; flex-direction: column; gap: .4rem; margin: 0; }
.cs-poll-dlg .cs-poll-dlg__opts-label { margin: 0; font-size: .85rem; font-weight: 600; }
.cs-poll-dlg .cs-addrow { flex-wrap: nowrap; width: 100%; }
.cs-poll-dlg .cs-addrow input { min-width: 0; flex: 1 1 auto; }
.cs-poll-dlg .cs-addrow .btn { flex: none; }

.cs-modal__body .cs-check { display: flex; flex-direction: row; align-items: center; gap: .45rem; margin: .35rem 0; font-size: .9rem; }
.cs-modal__body details.card__hint,
.cs-modal__body .card__hint details { margin: .35rem 0 0; }
.cs-modal__body details summary { cursor: pointer; font-weight: 600; color: var(--rl-text); }
.cs-modal__body details[open] summary { margin-bottom: .35rem; }

.cs-voice section { margin-top: 1rem; }
.cs-voice section:first-child { margin-top: 0; }
.cs-voice h3 { font-size: .95rem; margin: 0 0 .4rem; }
.cs-voice .cs-check { display: flex; flex-direction: row; align-items: center; gap: .45rem; margin: .35rem 0; font-size: .9rem; }
.cs-voice__levels { display: flex; flex-direction: column; gap: .4rem; margin: .5rem 0 .75rem; }
.cs-voice__level {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: .55rem;
    row-gap: .1rem;
    align-items: start;
    margin: 0;
    padding: .55rem .65rem;
    border: 1px solid var(--rl-border);
    border-radius: 10px;
    background: var(--rl-surface);
    cursor: pointer;
}
.cs-voice__level:hover { border-color: color-mix(in srgb, var(--rl-accent) 50%, var(--rl-border)); }
.cs-voice__level--on {
    border-color: var(--rl-accent);
    background: color-mix(in srgb, var(--rl-accent) 10%, var(--rl-surface));
    box-shadow: inset 0 0 0 1px var(--rl-accent);
}
.cs-voice__level input { grid-row: 1 / span 2; margin-top: .2rem; }
.cs-voice__levelName { font-weight: 600; font-size: .9rem; }
.cs-voice__levelHint { color: var(--rl-text-muted); font-size: .78rem; line-height: 1.35; }

.cs-grp__tools { display: inline-flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.cs-row { gap: .65rem; }
.cs-row > span:first-child { flex: 1 1 auto; min-width: 8rem; }

/* Column 2 like the body and embeds: without it the grid auto-placed the poll into the 2.4rem avatar column, one word
   per line. Only "your messages on the right" hid that, because your own lines there are a flex column, not the grid. */
.cs-poll { grid-column: 2; min-width: 0; margin: .4rem 0 .2rem; max-width: 26rem; padding: .65rem .75rem; border: 1px solid var(--rl-border); border-radius: 10px; background: var(--rl-surface-sunken); overflow-wrap: anywhere; }
.cs-msg--grouped .cs-poll { grid-row: auto; }
.cs-poll__q { margin: 0 0 .5rem; font-weight: 600; }
.cs-poll__opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.cs-poll__opt { position: relative; display: flex; align-items: center; gap: .5rem; width: 100%; padding: .4rem .55rem; border: 1px solid var(--rl-border); border-radius: 8px; background: var(--rl-surface); color: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.cs-poll__opt:disabled { cursor: default; opacity: 1; }
.cs-poll__opt:not(:disabled):hover { border-color: var(--rl-accent); }
.cs-poll__opt--mine { border-color: var(--rl-accent); box-shadow: inset 0 0 0 1px var(--rl-accent); }
.cs-poll__bar { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--rl-accent) 18%, transparent); pointer-events: none; }
.cs-poll__label { position: relative; flex: 1 1 auto; min-width: 0; font-weight: 600; }
.cs-poll__count { position: relative; flex: none; color: var(--rl-text-muted); font-size: .82rem; }
.cs-poll__meta { margin: .45rem 0 0; color: var(--rl-text-muted); font-size: .78rem; }

.cs-room__vol { flex: none; width: 4.5rem; height: .55rem; margin-left: .25rem; accent-color: var(--rl-accent); cursor: pointer; }
.cs-room__who { flex-wrap: wrap; align-items: center; }
.cs-ctl--ptt {
    outline: 2px solid var(--rl-accent); outline-offset: 1px; min-width: 2.75rem; font-size: .72rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; user-select: none; touch-action: none;
}
.cs-ctl--ptt:active { background: var(--rl-accent); color: var(--rl-accent-contrast); }
.cs-rr__list { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.cs-rr__list li { display: flex; align-items: center; gap: .5rem; }
.cs-rr__emoji { font-size: 1.25rem; line-height: 1; }
.cs-suggest {
    position: absolute; left: 0; right: 0; bottom: calc(100% + .45rem); z-index: 30; max-height: min(20rem, 50vh); overflow-y: auto; padding: .35rem;
    border: 1px solid var(--rl-border); border-radius: 12px; background: var(--rl-surface); box-shadow: var(--rl-shadow-md);
    transform-origin: bottom center; animation: cs-suggest-in .14s var(--rl-ease-out, ease-out) both; overscroll-behavior: contain;
}
@keyframes cs-suggest-in { from { opacity: 0; transform: translateY(6px) scale(.985); } }
.cs-suggest__title { padding: .35rem .55rem .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--rl-text-muted); }
.cs-suggest__group { margin: .3rem .55rem .15rem; padding-top: .35rem; border-top: 1px solid var(--rl-border); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rl-text-muted); }
.cs-suggest__title + .cs-suggest__group { margin-top: 0; padding-top: 0; border-top: 0; }
.cs-suggest__row { display: flex; align-items: center; gap: .6rem; padding: .32rem .55rem; border-radius: 8px; cursor: pointer; font-size: .9rem; transition: background .08s; }
.cs-suggest__row--on { background: color-mix(in srgb, var(--rl-accent) 16%, var(--rl-surface-sunken)); }
.cs-suggest__pic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; overflow: hidden; border-radius: 50%;
                   background: var(--rl-surface-sunken); color: #fff; font-size: .75rem; font-weight: 700; }
.cs-suggest__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-suggest__name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cs-suggest__sub { flex: 1 1 auto; min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: var(--rl-text-muted); font-size: .78rem; }

/* A #channel in a message: a link that looks like a mention. */
.cs-mention--channel { text-decoration: none; cursor: pointer; transition: background var(--rl-dur), color var(--rl-dur); }
.cs-msg__body a.cs-mention--channel { color: var(--rl-accent); text-decoration: none; }
.cs-mention--channel:hover, .cs-msg__body a.cs-mention--channel:hover { background: var(--rl-accent); color: var(--rl-accent-contrast); }

/* ---- in-app presence ------------------------------------------------------------------------------------------- */
.cs-member__sub--app { display: inline-flex; align-items: center; gap: .3rem; color: var(--rl-text); }
.cs-app-dot { flex: none; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--rl-accent);
              box-shadow: 0 0 0 2px color-mix(in srgb, var(--rl-accent) 28%, transparent); animation: cs-app-beat 2.4s ease-in-out infinite; }
@keyframes cs-app-beat { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--rl-accent) 6%, transparent); } }

/* ---- profile looks: nameplates ------------------------------------------------------------------------------------
   The strip behind a member row. Each plate is a --plate background so hover can lay a sheen over it rather than
   replacing it. */
.cs-member.cs-plate, .cs-preset__plate.cs-plate { background: var(--plate); background-size: 200% 100%; }
.cs-member.cs-plate:hover { background: linear-gradient(rgb(255 255 255 / .05), rgb(255 255 255 / .05)), var(--plate); background-size: 100% 100%, 200% 100%; }
.cs-member.cs-plate.cs-member--off { opacity: .6; }
.cs-plate--aurora  { --plate: linear-gradient(100deg, color-mix(in srgb, #22d3ee 26%, transparent), color-mix(in srgb, #a78bfa 26%, transparent) 55%, color-mix(in srgb, #34d399 18%, transparent)); }
.cs-plate--ember   { --plate: linear-gradient(100deg, color-mix(in srgb, #f97316 30%, transparent), color-mix(in srgb, #dc2626 18%, transparent) 60%, transparent); }
.cs-plate--nebula  { --plate: radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, #7c3aed 34%, transparent), transparent 70%), linear-gradient(100deg, transparent 40%, color-mix(in srgb, #db2777 22%, transparent)); }
.cs-plate--circuit { --plate: repeating-linear-gradient(90deg, color-mix(in srgb, #14b8a6 14%, transparent) 0 1px, transparent 1px 14px), linear-gradient(100deg, color-mix(in srgb, #0d9488 26%, transparent), transparent 80%); }
.cs-plate--sakura  { --plate: radial-gradient(circle at 85% 30%, color-mix(in srgb, #fbcfe8 50%, transparent) 0 3px, transparent 4px), radial-gradient(circle at 70% 75%, color-mix(in srgb, #f9a8d4 50%, transparent) 0 2px, transparent 3px), linear-gradient(100deg, color-mix(in srgb, #f472b6 26%, transparent), color-mix(in srgb, #fce7f3 12%, transparent)); }
.cs-plate--abyss   { --plate: linear-gradient(100deg, color-mix(in srgb, #1e3a8a 44%, transparent), color-mix(in srgb, #0ea5e9 18%, transparent) 70%, transparent); }
.cs-plate--gilded  { --plate: linear-gradient(100deg, color-mix(in srgb, #b45309 30%, transparent), color-mix(in srgb, #fde68a 26%, transparent) 50%, color-mix(in srgb, #b45309 22%, transparent)); }
.cs-plate--aurora, .cs-plate--gilded { animation: cs-plate-drift 9s ease-in-out infinite alternate; }
@keyframes cs-plate-drift { to { background-position: 100% 0; } }

/* ---- profile looks: avatar decorations ----------------------------------------------------------------------------
   Drawn by the picture's wrapper around the picture, so they scale with whatever size it has. The status dot stays on top. */
.cs-pcard__avwrap { position: relative; display: inline-flex; border-radius: 50%; }
.cs-deco { position: relative; isolation: isolate; }
.cs-deco > .cs-dot { z-index: 2; }
.cs-deco::after, .cs-deco::before { content: ""; position: absolute; pointer-events: none; z-index: 1; }
.cs-deco--eclipse::after, .cs-deco--flame::after, .cs-deco--frost::after {
    inset: -3px; border-radius: 50%;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}
.cs-deco--eclipse::after { background: conic-gradient(from 0deg, #1a1033 0 55%, #ffd27a 72%, #fff6dc 78%, #ffb347 84%, #1a1033 96%); animation: cs-spin 7s linear infinite; filter: drop-shadow(0 0 3px #ffd27a); }
.cs-deco--flame::after { background: conic-gradient(#ff4d00, #ffb000, #ff2a00, #ffd000, #ff4d00); animation: cs-spin 2.8s linear infinite; filter: drop-shadow(0 0 4px #ff6a00); }
.cs-deco--frost::after { background: conic-gradient(#e0f2fe, #7dd3fc, #ffffff, #38bdf8, #e0f2fe); filter: drop-shadow(0 0 4px #7dd3fc); animation: cs-spin 14s linear infinite; }
.cs-deco--halo::before { left: 18%; right: 18%; top: -16%; height: 14%; border: 2px solid #ffe28a; border-radius: 50%; box-shadow: 0 0 6px #ffe28a, inset 0 0 3px #ffe28a; animation: cs-halo 3s ease-in-out infinite; }
.cs-deco--sparkle::after {
    inset: -12%; border-radius: 50%;
    background: radial-gradient(circle at 12% 20%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 88% 14%, #fde68a 0 2px, transparent 3px),
                radial-gradient(circle at 92% 78%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 8% 84%, #c4b5fd 0 2px, transparent 3px),
                radial-gradient(circle at 50% 0%, #fff 0 1px, transparent 2px);
    animation: cs-twinkle 1.8s ease-in-out infinite alternate;
}
.cs-deco--orbit::after {
    inset: -5px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--rl-accent) 55%, transparent);
    background: radial-gradient(circle at 50% 0, var(--rl-accent) 0 3px, transparent 3.5px); animation: cs-spin 5s linear infinite;
}
@keyframes cs-spin { to { transform: rotate(360deg); } }
@keyframes cs-halo { 50% { transform: translateY(-2px); } }
@keyframes cs-twinkle { from { opacity: .35; transform: scale(.97); } to { opacity: 1; transform: scale(1.02); } }

/* ---- profile looks: display names ------------------------------------------------------------------------------- */
.cs-name--font-serif   { font-family: Georgia, "Times New Roman", serif; }
.cs-name--font-mono    { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; letter-spacing: -.01em; }
.cs-name--font-display.cs-name--font-display { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: .03em; font-weight: 400; }
.cs-name--font-rounded { font-family: ui-rounded, "Segoe UI Variable Display", "Arial Rounded MT Bold", "Nunito", sans-serif; }
.cs-name--font-hand    { font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; }
.cs-name--fx-solid    { color: var(--n1, var(--rl-accent)); }
.cs-name--fx-gradient, .cs-name--fx-shimmer {
    background: linear-gradient(90deg, var(--n1, var(--rl-accent)), var(--n2, var(--n1, var(--rl-accent))));
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.cs-name--fx-shimmer {
    background-image: linear-gradient(100deg, var(--n1, var(--rl-accent)) 0%, var(--n2, var(--rl-accent)) 40%, #fff 50%, var(--n2, var(--rl-accent)) 60%, var(--n1, var(--rl-accent)) 100%);
    background-size: 250% 100%; animation: cs-name-shimmer 3.2s linear infinite;
}
.cs-name--fx-glow { color: var(--n1, var(--rl-accent)); text-shadow: 0 0 6px color-mix(in srgb, var(--n1, var(--rl-accent)) 70%, transparent), 0 0 14px color-mix(in srgb, var(--n1, var(--rl-accent)) 35%, transparent); }
.cs-name--fx-neon {
    color: color-mix(in srgb, var(--n1, var(--rl-accent)) 35%, #fff);
    text-shadow: 0 0 2px #fff, 0 0 6px var(--n1, var(--rl-accent)), 0 0 12px var(--n1, var(--rl-accent)), 0 0 22px color-mix(in srgb, var(--n1, var(--rl-accent)) 60%, transparent);
    animation: cs-neon 5s steps(1) infinite;
}
@keyframes cs-name-shimmer { from { background-position: 125% 0; } to { background-position: -125% 0; } }
@keyframes cs-neon { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: .55; } 94% { opacity: 1; } 96% { opacity: .7; } }

/* ---- profile card: theme, frame, effect ------------------------------------------------------------------------ */
.cs-pcard { position: relative; isolation: isolate; }
.cs-pcard--themed { background: linear-gradient(180deg, color-mix(in srgb, var(--pc-a) 38%, var(--rl-surface)), color-mix(in srgb, var(--pc-b) 38%, var(--rl-surface))); }
.cs-pcard--themed .cs-pcard__avatar { border-color: color-mix(in srgb, var(--pc-a) 38%, var(--rl-surface)); }
.cs-pcard--themed .cs-ptabs { border-bottom-color: color-mix(in srgb, var(--rl-text) 14%, transparent); }
.cs-pcard--themed .cs-widget, .cs-pcard--themed .cs-conn { background: color-mix(in srgb, var(--rl-surface) 55%, transparent); }

.cs-frame::after {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; padding: 2px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.cs-frame--gold::after   { background: linear-gradient(135deg, #f6d365, #b8862b 30%, #fff1c1 50%, #b8862b 70%, #f6d365); padding: 3px; }
.cs-frame--silver::after { background: linear-gradient(135deg, #f3f4f6, #9ca3af 30%, #ffffff 50%, #6b7280 70%, #e5e7eb); padding: 3px; }
.cs-frame--neon::after   { background: linear-gradient(135deg, #22d3ee, #a855f7, #f472b6, #22d3ee); background-size: 300% 300%; animation: cs-frame-flow 6s linear infinite; box-shadow: 0 0 12px #a855f7; }
.cs-frame--eclipse::after { background: conic-gradient(from var(--cs-frame-turn, 0deg), #120a24 0 60%, #ffd27a 75%, #fff6dc 80%, #120a24 95%); padding: 3px; animation: cs-frame-turn 8s linear infinite; }
.cs-frame--pixel { border-radius: 4px; }
.cs-frame--pixel::after { padding: 0; border: 3px solid transparent; border-image: repeating-linear-gradient(90deg, var(--rl-accent) 0 6px, var(--rl-text) 6px 12px) 3; -webkit-mask: none; mask: none; image-rendering: pixelated; }
@property --cs-frame-turn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes cs-frame-turn { to { --cs-frame-turn: 360deg; } }
@keyframes cs-frame-flow { to { background-position: 300% 0; } }

.cs-fx { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; border-radius: inherit; }
.cs-fx::before, .cs-fx::after { content: ""; position: absolute; inset: -10% 0 0; }
.cs-fx--stars::before {
    background: radial-gradient(circle at 10% 20%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 30% 70%, #fff 0 1.2px, transparent 2px),
                radial-gradient(circle at 55% 30%, #fde68a 0 1.5px, transparent 2.2px), radial-gradient(circle at 80% 60%, #fff 0 1px, transparent 1.5px),
                radial-gradient(circle at 90% 15%, #c4b5fd 0 1.4px, transparent 2px), radial-gradient(circle at 45% 90%, #fff 0 1px, transparent 1.5px);
    background-size: 220px 200px; animation: cs-twinkle 2.2s ease-in-out infinite alternate;
}
.cs-fx--stars::after { background: radial-gradient(circle at 70% 40%, #fff 0 1px, transparent 1.6px), radial-gradient(circle at 20% 55%, #fff 0 .8px, transparent 1.4px); background-size: 160px 140px; animation: cs-twinkle 3.1s ease-in-out infinite alternate-reverse; }
.cs-fx--snow::before, .cs-fx--snow::after { inset: 0; background: radial-gradient(circle at 20% 30%, rgb(255 255 255 / .9) 0 1.6px, transparent 2.2px), radial-gradient(circle at 70% 60%, rgb(255 255 255 / .8) 0 1.2px, transparent 1.8px), radial-gradient(circle at 45% 85%, rgb(255 255 255 / .7) 0 2px, transparent 2.6px); background-size: 120px 120px; animation: cs-fall 9s linear infinite; }
.cs-fx--snow::after { background-size: 80px 90px; opacity: .6; animation-duration: 6s; }
.cs-fx--embers::before, .cs-fx--embers::after { inset: 0; background: radial-gradient(circle at 25% 40%, #ffb347 0 1.6px, transparent 2.4px), radial-gradient(circle at 65% 75%, #ff6a00 0 1.2px, transparent 2px), radial-gradient(circle at 85% 20%, #ffd27a 0 1px, transparent 1.6px); background-size: 110px 130px; filter: drop-shadow(0 0 2px #ff7a1a); animation: cs-rise-fx 7s linear infinite; }
.cs-fx--embers::after { background-size: 70px 100px; opacity: .7; animation-duration: 4.5s; }
.cs-fx--bubbles::before, .cs-fx--bubbles::after { inset: 0; background: radial-gradient(circle at 30% 50%, transparent 0 4px, rgb(255 255 255 / .55) 4.5px 5.5px, transparent 6px), radial-gradient(circle at 75% 20%, transparent 0 2.5px, rgb(255 255 255 / .45) 3px 3.8px, transparent 4.2px); background-size: 120px 150px; animation: cs-rise-fx 10s linear infinite; }
.cs-fx--bubbles::after { background-size: 90px 110px; animation-duration: 7s; opacity: .7; }
.cs-fx--aurora::before { inset: 0 0 45%; background: linear-gradient(110deg, rgb(34 211 238 / .32), rgb(167 139 250 / .3), rgb(52 211 153 / .28), rgb(34 211 238 / .32)); background-size: 300% 100%; filter: blur(10px);
                         -webkit-mask: linear-gradient(#000, transparent); mask: linear-gradient(#000, transparent); animation: cs-frame-flow 12s ease-in-out infinite alternate; }
.cs-fx--rain::before, .cs-fx--rain::after { inset: 0; background: radial-gradient(1px 9px at 20% 30%, rgb(186 206 240 / .75), transparent), radial-gradient(1px 7px at 60% 70%, rgb(186 206 240 / .6), transparent), radial-gradient(1px 10px at 85% 10%, rgb(186 206 240 / .7), transparent); background-size: 60px 90px; animation: cs-fall 1.1s linear infinite; }
.cs-fx--rain::after { background-size: 45px 70px; opacity: .55; animation-duration: .8s; }
@keyframes cs-fall { from { background-position: 0 0; } to { background-position: 0 240px; } }
@keyframes cs-rise-fx { from { background-position: 0 0; } to { background-position: 0 -260px; } }

/* ---- profile card: picture, class bubble, badges, tabs ----------------------------------------------------------- */
.cs-pcard__top { display: flex; align-items: flex-end; gap: .5rem; }
.cs-pcard__avatar { box-shadow: var(--rl-shadow-sm); }
.cs-pcard__class {
    position: relative; margin-bottom: .55rem; max-width: 60%; padding: .25rem .65rem; border: 1px solid var(--rl-border); border-radius: 12px;
    background: var(--rl-surface-raised); box-shadow: var(--rl-shadow-sm); font-size: .78rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    animation: cs-pop .25s var(--rl-ease) both;
}
.cs-pcard__pronouns { color: var(--rl-text-muted); }
.cs-pcard__playing--app { color: var(--rl-text-muted); }

.cs-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin: .45rem 0 .35rem; padding: 0; list-style: none; }
.cs-badgechip {
    --b: var(--rl-accent);
    display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem .1rem .4rem; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .02em;
    color: color-mix(in srgb, var(--b) 80%, var(--rl-text)); background: color-mix(in srgb, var(--b) 14%, transparent); border: 1px solid color-mix(in srgb, var(--b) 35%, transparent);
}
.cs-badgechip::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--b); box-shadow: 0 0 0 2px color-mix(in srgb, var(--b) 25%, transparent); }
.cs-badgechip--staff { --b: #8b5cf6; }
.cs-badgechip--support { --b: var(--rl-ok); }
.cs-badgechip--developer { --b: #3b82f6; }
.cs-badgechip--tester { --b: #f59e0b; }
.cs-badgechip--supporter-plus { --b: #ec4899; background: linear-gradient(90deg, color-mix(in srgb, #ec4899 18%, transparent), color-mix(in srgb, #8b5cf6 18%, transparent)); }
.cs-badgechip--supporter { --b: #f472b6; }

.cs-ptabs { display: flex; gap: .15rem; margin: .8rem 0 .2rem; border-bottom: 1px solid var(--rl-border); }
.cs-ptab { position: relative; padding: .45rem .7rem; border: 0; background: none; color: var(--rl-text-muted); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; transition: color var(--rl-dur); }
.cs-ptab::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--rl-accent); transform: scaleX(0); transition: transform .2s var(--rl-ease); }
.cs-ptab:hover { color: var(--rl-text); }
.cs-ptab--on { color: var(--rl-text); }
.cs-ptab--on::after { transform: scaleX(1); }
.cs-pcard [role="tabpanel"] { animation: cs-fade .18s ease-out both; }

/* ---- profile card: board widgets, games, connections ------------------------------------------------------------- */
.cs-pboard { display: flex; flex-direction: column; gap: .6rem; margin-top: .6rem; }
.cs-widget { padding: .6rem .7rem .7rem; border: 1px solid var(--rl-border); border-radius: 10px; background: var(--rl-surface-sunken); }
.cs-widget .cs-pcard__label { margin-top: 0; display: flex; align-items: center; gap: .4rem; }
.cs-widget--spot { border-left: 3px solid var(--rl-accent); }
.cs-widget__game { display: flex; gap: .7rem; align-items: flex-start; }
.cs-widget__game strong { display: block; font-size: .95rem; }
.cs-widget__note { margin: .15rem 0 0; color: var(--rl-text-muted); font-size: .85rem; overflow-wrap: anywhere; }
.cs-widget__tags { display: flex; flex-wrap: wrap; gap: .25rem; margin: .4rem 0 0; padding: 0; list-style: none; }
.cs-widget__tags li { padding: .05rem .45rem; border-radius: 999px; background: var(--rl-surface); border: 1px solid var(--rl-border); font-size: .72rem; }
.cs-widget__count { padding: 0 .35rem; border-radius: 999px; background: var(--rl-surface); color: var(--rl-text-muted); font-size: .65rem; letter-spacing: 0; }
.cs-gameart {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 8px;
    background-size: cover; background-position: center; color: #fff; font-weight: 800; font-size: 1rem; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), var(--rl-shadow-sm);
}
.cs-gameart--big { width: 4rem; height: 4rem; border-radius: 10px; font-size: 1.5rem; }
.cs-gamegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); gap: .5rem; margin: .2rem 0 0; padding: 0; list-style: none; }
.cs-gamegrid li { display: flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 0; }
.cs-gamegrid li .cs-gameart { width: 100%; height: auto; aspect-ratio: 1; transition: transform var(--rl-dur) var(--rl-ease); }
.cs-gamegrid li:hover .cs-gameart { transform: translateY(-2px); }
.cs-gamegrid__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; color: var(--rl-text-muted); }
.cs-gamegrid--list { grid-template-columns: 1fr; gap: .35rem; margin-top: .6rem; }
.cs-gamegrid--list li { flex-direction: row; gap: .6rem; padding: .3rem .4rem; border-radius: 8px; transition: background var(--rl-dur); }
.cs-gamegrid--list li:hover { background: var(--rl-surface-sunken); }
.cs-gamegrid--list li .cs-gameart { width: 2.2rem; aspect-ratio: auto; height: 2.2rem; }
.cs-gamegrid--list .cs-gamegrid__name { font-size: .88rem; color: var(--rl-text); }

.cs-conns { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .4rem; margin: 0; padding: 0; list-style: none; }
.cs-conn { --c: var(--rl-accent); display: flex; align-items: center; gap: .55rem; min-width: 0; padding: .4rem .5rem; border: 1px solid var(--rl-border); border-radius: 10px; background: var(--rl-surface-sunken); transition: border-color var(--rl-dur); }
.cs-conn:hover { border-color: color-mix(in srgb, var(--c) 55%, var(--rl-border)); }
.cs-conn__glyph { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 8px; background: var(--c); color: #fff; font-size: .72rem; font-weight: 800; }
.cs-conn__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cs-conn__text small { color: var(--rl-text-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.cs-conn__text a, .cs-conn__text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; font-weight: 600; color: var(--rl-text); text-decoration: none; }
.cs-conn__text a:hover { color: var(--rl-accent); text-decoration: underline; text-underline-offset: 2px; }
.cs-conn--github { --c: #24292f; } .cs-conn--steam { --c: #1b2838; } .cs-conn--twitch { --c: #9146ff; } .cs-conn--youtube { --c: #ff0033; }
.cs-conn--x { --c: #0f0f0f; } .cs-conn--bluesky { --c: #0085ff; } .cs-conn--reddit { --c: #ff4500; } .cs-conn--spotify { --c: #1db954; }
.cs-conn--xbox { --c: #107c10; } .cs-conn--playstation { --c: #0070d1; } .cs-conn--battlenet { --c: #148eff; } .cs-conn--epic { --c: #313131; }
.cs-conns--edit { grid-template-columns: 1fr; margin-bottom: .75rem; }
.cs-conns--edit .cs-conn .icon-btn { margin-left: auto; }

/* ---- profile editor (ProfileEditor: the pop-out and /servers/profile) ---------------------------------------------- */
.cs-modal--profile { padding: 1.5rem; }
.cs-modal__box--profile { width: min(74rem, 100%); height: min(50rem, calc(100vh - 3rem)); max-height: none; overflow: hidden; padding: 0; }
.cs-pedit { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr) 22rem; min-height: 40rem; overflow: hidden; border: 1px solid var(--rl-border); border-radius: var(--rl-radius); background: var(--rl-surface); }
.cs-pedit--voice { grid-template-columns: 13.5rem minmax(0, 1fr); }
.cs-pedit--voice .cs-pedit__page { max-width: 44rem; }
.cs-pedit--popout { flex: 1; height: 100%; min-height: 0; border: 0; border-radius: 0; }
.cs-pedit__nav { display: flex; flex-direction: column; gap: 1px; padding: 1.1rem .6rem; overflow-y: auto; background: var(--rl-surface-raised); border-right: 1px solid var(--rl-border); }
.cs-pedit__heading { margin: 0 0 .5rem; padding: 0 .6rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rl-text-muted); }
.cs-pedit__navbtn {
    display: block; width: 100%; padding: .45rem .65rem; border: 0; border-radius: 8px; background: none; color: var(--rl-text-muted); font: inherit; font-size: .9rem;
    text-align: left; cursor: pointer; transition: background var(--rl-dur), color var(--rl-dur);
}
.cs-pedit__navbtn:hover { background: var(--rl-surface-sunken); color: var(--rl-text); }
.cs-pedit__navbtn--on, .cs-pedit__navbtn--on:hover { background: color-mix(in srgb, var(--rl-accent) 16%, var(--rl-surface-sunken)); color: var(--rl-text); font-weight: 600; }
.cs-pedit__main { position: relative; min-width: 0; min-height: 0; overflow-y: auto; padding: 1.4rem 1.75rem 0; overscroll-behavior: contain; display: flex; flex-direction: column; }
.cs-pedit__x { position: sticky; top: 0; align-self: flex-end; z-index: 4; margin: -.4rem -.6rem -2rem 0; border-radius: 50%; width: 2.2rem; height: 2.2rem; background: var(--rl-surface); border: 1px solid var(--rl-border); }
.cs-pedit__page { flex: 1; max-width: 40rem; padding-bottom: 1.5rem; animation: cs-pedit-in .22s var(--rl-ease-out, ease-out) both; }
@keyframes cs-pedit-in { from { opacity: 0; transform: translateY(6px); } }
.cs-pedit__title { margin: 0 0 .75rem; font-size: 1.15rem; font-weight: 700; }
.cs-pedit__page > * + .cs-pedit__title { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--rl-border); }
.cs-pedit__sub { margin: 1.25rem 0 .55rem; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rl-text-muted); }
.cs-pedit .field input:not([type=checkbox], [type=radio], [type=color], [type=file], [type=range]), .cs-pedit .field textarea, .cs-pedit .field select { width: 100%; }
.cs-pedit__preview { min-width: 0; overflow-y: auto; padding: 1.1rem 1rem; background: var(--rl-surface-sunken); border-left: 1px solid var(--rl-border); overscroll-behavior: contain; }
.cs-pedit__preview .cs-pcard { border: 1px solid var(--rl-border); box-shadow: var(--rl-shadow-md); }

.cs-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .6rem; }
.cs-presets--round { grid-template-columns: repeat(auto-fill, minmax(6.75rem, 1fr)); }
.cs-preset {
    position: relative; display: flex; flex-direction: column; align-items: stretch; gap: .45rem; min-width: 0; padding: .55rem; border: 1.5px solid var(--rl-border); border-radius: 12px;
    background: var(--rl-surface-raised); color: var(--rl-text); font: inherit; cursor: pointer; text-align: center;
    transition: border-color var(--rl-dur), box-shadow var(--rl-dur), transform var(--rl-dur) var(--rl-ease);
}
.cs-preset:hover { border-color: var(--rl-border-strong, var(--rl-border)); transform: translateY(-1px); box-shadow: var(--rl-shadow-sm); }
.cs-preset:active { transform: scale(.98); }
.cs-preset--on, .cs-preset--on:hover { border-color: var(--rl-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rl-accent) 20%, transparent); }
.cs-preset--on::after { content: "✓"; position: absolute; top: -.45rem; right: -.45rem; display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--rl-accent); color: var(--rl-accent-contrast); font-size: .7rem; font-weight: 800; box-shadow: var(--rl-shadow-sm); animation: cs-pop .2s var(--rl-ease) both; }
.cs-preset__label { font-size: .78rem; color: var(--rl-text-muted); }
.cs-preset--on .cs-preset__label { color: var(--rl-text); font-weight: 600; }
.cs-preset__plate { display: flex; align-items: center; gap: .45rem; min-width: 0; padding: .4rem .55rem; border-radius: 8px; background: var(--rl-surface-sunken); font-size: .85rem; font-weight: 600; text-align: left; }
.cs-preset__plate > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-preset__dot { flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: color-mix(in srgb, var(--rl-accent) 60%, var(--rl-surface)); }
.cs-preset__av { align-self: center; margin: .5rem 0 .2rem; }
.cs-preset__av .cs-room__dot { width: 3rem; height: 3rem; font-size: 1.15rem; overflow: hidden; }
.cs-preset__name { display: block; padding: .45rem .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.05rem; font-weight: 700; }
.cs-preset__stage { position: relative; display: block; height: 4.5rem; overflow: hidden; border-radius: 8px; background: linear-gradient(160deg, #1d1b33, #0e1222); }

.cs-colors { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin: .9rem 0; }
.cs-colors label { display: inline-flex; align-items: center; gap: .55rem; font-size: .88rem; color: var(--rl-text-muted); }

.cs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .5rem 0; padding: 0; list-style: none; }
.cs-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .25rem .2rem .6rem; border: 1px solid var(--rl-border); border-radius: 999px; background: var(--rl-surface-raised); font-size: .82rem; animation: cs-pop .18s var(--rl-ease) both; }
.cs-chip button { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--rl-text-muted); font-size: .65rem; cursor: pointer; transition: background var(--rl-dur), color var(--rl-dur); }
.cs-chip button:hover { background: color-mix(in srgb, var(--rl-danger) 16%, transparent); color: var(--rl-danger); }
.cs-chip__add { width: 7rem; padding: .25rem .6rem; border: 1px dashed var(--rl-border); border-radius: 999px; background: none; color: var(--rl-text); font: inherit; font-size: .82rem; transition: border-color var(--rl-dur), box-shadow var(--rl-dur); }
.cs-chip__add:focus { outline: none; border-style: solid; border-color: var(--rl-accent); box-shadow: var(--rl-ring); }

.cs-wedit { margin-bottom: .75rem; padding: .75rem .9rem .5rem; border: 1px solid var(--rl-border); border-radius: 12px; background: var(--rl-surface-raised); animation: cs-pedit-in .2s var(--rl-ease-out, ease-out) both; }
.cs-wedit__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.cs-wedit__tools { display: flex; gap: .15rem; }
.cs-wedit__tools .icon-btn:disabled { opacity: .35; }
.cs-wedit__add { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .5rem 0 0; }
.cs-wedit__add > span { font-size: .8rem; color: var(--rl-text-muted); margin-right: .25rem; }

.cs-savebar {
    position: sticky; bottom: 1rem; z-index: 5; display: flex; align-items: center; gap: .5rem; margin: 0 -.5rem 1rem; padding: .55rem .6rem .55rem 1rem;
    border: 1px solid var(--rl-border); border-radius: 12px; background: var(--rl-surface-raised); box-shadow: var(--rl-shadow-lg); font-size: .9rem;
    animation: cs-savebar-in .28s var(--rl-ease-out, ease-out) both;
}
.cs-savebar > span { flex: 1; min-width: 0; }
.cs-savebar .cs-error { margin: 0; padding: .25rem .5rem; }
.cs-savebar--dirty { border-color: color-mix(in srgb, var(--rl-accent) 45%, var(--rl-border)); }
.cs-savebar--shake { border-color: var(--rl-danger); background: color-mix(in srgb, var(--rl-danger) 10%, var(--rl-surface-raised)); animation: cs-savebar-shake .45s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes cs-savebar-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes cs-savebar-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }

@media (max-width: 1100px) {
    .cs-pedit { grid-template-columns: 12rem minmax(0, 1fr); }
    .cs-pedit__preview { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--rl-border); }
    .cs-pedit--popout { overflow-y: auto; }
    .cs-pedit--popout .cs-pedit__main { overflow: visible; }
}
@media (max-width: 700px) {
    .cs-modal--profile { padding: 0; }
    .cs-modal__box--profile { height: 100vh; border-radius: 0; }
    .cs-pedit { grid-template-columns: 1fr; }
    .cs-pedit__nav { flex-direction: row; overflow-x: auto; padding: .5rem; border-right: 0; border-bottom: 1px solid var(--rl-border); }
    .cs-pedit__nav .cs-pedit__heading { display: none; }
    .cs-pedit__navbtn { width: auto; white-space: nowrap; }
    .cs-pedit__main { padding: 1rem 1rem 0; }
}

/* ---- finish: depth, focus, and a window that stays put ---------------------------------------------------------- */
/* Scrolling past the end of a pane stops there instead of dragging the page or the window behind it. */
.cs, .cs-msgs, .cs__sideScroll, .cs__members, .cs__rail, .cs-modal__body, .cs-picker__grid { overscroll-behavior: contain; }
/* Chrome pictures are not drag handles: dragging an icon or avatar does nothing rather than lifting a ghost image. */
.cs__rail img, .cs-icon img, .cs-room__dot img, .cs-msg__avatar img, .cs-suggest__pic img, .cs-pcard__avatar img, .cs-gameart, .cs__me img { -webkit-user-drag: none; user-select: none; }

.cs-modal { background: rgb(8 8 14 / .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.cs-modal__box { box-shadow: var(--rl-shadow-lg); }
.cs-picker, .cs-msg__tools { box-shadow: var(--rl-shadow-md); }
.cs-member__who:focus-visible, .cs-chan:focus-visible, .cs-cat__head:focus-visible, .cs-icon:focus-visible, .cs-status__opt:focus-visible,
.cs-preset:focus-visible, .cs-ptab:focus-visible, .cs-pedit__navbtn:focus-visible, .cs__meCard:focus-visible { outline: 2px solid var(--rl-accent); outline-offset: 2px; }
.cs__meCard { border: 0; background: none; font: inherit; text-align: left; cursor: pointer; transition: background var(--rl-dur); }
.cs-status__opt { transition: border-color var(--rl-dur), background var(--rl-dur); }
.cs-status__opt:hover:not(:disabled) { border-color: var(--rl-border-strong, var(--rl-border)); }
.cs-addrow input, .cs-addrow select, .cs-grp input, .cs-grp select, .cs-picker__custom, .cs-role__add, .cs-msg__edit textarea,
.vs__watchForm input, .vs__watchForm select { font: inherit; min-height: var(--rl-control-h); background: var(--rl-surface-raised); transition: border-color var(--rl-dur), box-shadow var(--rl-dur), background-color var(--rl-dur); }
.cs-addrow input:focus-visible, .cs-addrow select:focus-visible, .cs-grp input:focus-visible, .cs-grp select:focus-visible,
.cs-picker__custom:focus-visible, .cs-role__add:focus-visible, .cs-msg__edit textarea:focus-visible,
.vs__watchForm input:focus-visible, .vs__watchForm select:focus-visible { outline: none; border-color: var(--rl-accent); background: var(--rl-surface); box-shadow: var(--rl-ring); }
.cs-ctl:focus-visible, .vc-hold__btn:focus-visible { outline: 2px solid var(--rl-accent); outline-offset: 2px; }
.cs-member { transition: background var(--rl-dur), opacity var(--rl-dur), transform var(--rl-dur) var(--rl-ease); }
.cs-member:active { transform: scale(.985); }

@media (prefers-reduced-motion: reduce) {
    .cs-fx { display: none; }
    .tile--speaking, .cs-room__who--speaking .cs-room__dot { animation: none !important; }
    .cs-deco::after, .cs-deco::before, .cs-app-dot, .cs-name--fx-shimmer, .cs-name--fx-neon, .cs-plate--aurora, .cs-plate--gilded, .cs-frame::after { animation: none !important; }
}