/* Discord Community: the channel sidebar (includes/sidebar.php). Discord's own dark colours. */
.dc-rail, .dc-rail-bar {
	--rail-bg: #2b2d31; --rail-head: #232428; --rail-user: #232428; --rail-text: #949ba4; --rail-hi: #dbdee1;
	--rail-hover: rgba(78, 80, 88, .3); --rail-active: rgba(78, 80, 88, .6); --rail-white: #f2f3f5;
}
.dcom-ui.dc-rail, .dcom-ui.dc-rail-bar { padding: 0; }
.dc-rail {
	position: fixed; z-index: 9990; top: 0; bottom: 0; left: 0; width: 240px;
	display: flex; flex-direction: column; background: var(--rail-bg); color: var(--rail-text); font-size: 15px; line-height: 1.25;
}
body.admin-bar .dc-rail { top: 32px; }
.dc-rail-head {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 48px; overflow: hidden;
	padding: 12px 16px; color: var(--rail-white) !important; box-shadow: 0 1px 0 rgba(4, 4, 5, .2), 0 2px 0 rgba(4, 4, 5, .05);
}
.dc-rail-head:hover { background: var(--rail-hover); }
.dc-rail-head.has-banner { min-height: 136px; }
.dc-rail-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dc-rail-head.has-banner::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(transparent 35%, rgba(0, 0, 0, .7)); }
.dc-rail-name, .dc-rail-online { position: relative; z-index: 2; }
.dc-rail-name { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-rail-online { display: flex; align-items: center; font-size: 12px; font-weight: 500; color: var(--rail-hi); }
.dc-rail-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 8px 16px; scrollbar-width: thin; scrollbar-color: #1a1b1e transparent; }
.dc-rail-cat { margin-top: 16px; }
.dc-rail-cat.is-plain { margin-top: 4px; }
.dc-rail-cat summary {
	display: flex; align-items: center; gap: 2px; padding: 0 8px 4px 0; list-style: none; cursor: pointer;
	font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--rail-text);
}
.dc-rail-cat summary::-webkit-details-marker { display: none; }
.dc-rail-cat summary:hover { color: var(--rail-hi); }
.dc-rail-chev { flex-shrink: 0; transition: transform .15s; }
.dc-rail-cat:not([open]) .dc-rail-chev { transform: rotate(-90deg); }
.dc-rail-list { margin: 0; padding: 0; list-style: none; }
.dc-rail-item { margin: 1px 0; }
.dc-rail-item a {
	display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 8px; border-radius: 4px;
	color: var(--rail-text) !important; font-weight: 500;
}
.dc-rail-item a:hover { background: var(--rail-hover); color: var(--rail-hi) !important; }
.dc-rail-item.is-active a { background: var(--rail-active); color: var(--rail-white) !important; }
.dc-rail-item a:focus-visible, .dc-rail-head:focus-visible, .dc-rail-cat summary:focus-visible, .dc-rail-user:focus-visible { outline: 2px solid #00a8fc; outline-offset: -2px; }
.dc-rail-ico { flex-shrink: 0; width: 20px; height: 20px; opacity: .85; }
.dc-rail-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-rail-label + .dc-rail-ico { width: 14px; height: 14px; opacity: .5; }
.dc-rail-item.is-thread { position: relative; margin-left: 26px; }
.dc-rail-item.is-thread::before { content: ""; position: absolute; left: -14px; top: -8px; width: 10px; height: 25px; border: solid #4e5058; border-width: 0 0 2px 2px; border-bottom-left-radius: 8px; }
.dc-rail-item.is-thread a { min-height: 30px; padding: 4px 8px; font-size: 14px; }
.dc-rail-user { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px; background: var(--rail-user); color: var(--rail-hi) !important; }
a.dc-rail-user:hover { background: #2e3035; }
.dc-rail-user img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.dc-rail-user span { display: flex; flex-direction: column; min-width: 0; }
.dc-rail-user strong { font-size: 14px; color: var(--rail-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-rail-user small { font-size: 12px; color: var(--rail-text); }
.dc-rail-user.is-guest .dcom-btn { width: 100%; justify-content: center; }
.dc-rail-bar { display: none; }
.dc-rail-scrim { position: fixed; inset: 0; z-index: 9989; background: rgba(0, 0, 0, .55); }
.dc-rail-scrim[hidden] { display: none; }

@media (min-width: 1025px) {
	body.dcom-has-rail { padding-left: 240px; }
	.dc-rail-scrim { display: none !important; }
}
@media (max-width: 1024px) {
	.dc-rail-bar {
		position: sticky; top: 0; z-index: 9988; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 8px;
		background: var(--rail-head); color: var(--rail-white);
	}
	body.admin-bar .dc-rail-bar { top: 46px; }
	.dc-rail-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--rail-hi); cursor: pointer; }
	.dc-rail-toggle:hover, .dc-rail-toggle:focus-visible { background: var(--rail-hover); outline: none; }
	.dc-rail-bar-name { font-weight: 700; color: var(--rail-white) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.dc-rail { width: min(86vw, 300px); transform: translateX(-102%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s; box-shadow: 0 0 24px rgba(0, 0, 0, .4); }
	.dc-rail.is-open { transform: none; visibility: visible; transition: transform .2s ease; }
	body.admin-bar .dc-rail { top: 0; }
	body.dc-rail-locked { overflow: hidden; }
}
@media (max-width: 782px) { body.admin-bar .dc-rail-bar { top: 0; } }
@media (prefers-reduced-motion: reduce) { .dc-rail, .dc-rail-chev { transition: none !important; } }